H5-ThreeDoorder/pages/restaurant/index/index_mdl.vue

<template>
	<!-- 肯德基首页 -->
	<view class="content">
		<view class="stote-Logo">
			<image class="img" :src="qnyurl('homback.png','mdl')" mode="widthFix"></image>
		</view>
		<view class="stote-operate">
			<view class="Stote-Infor">
				<view class="Stote-Infor-order">
					<navigator url="/pages/restaurant/home/home" hover-class="none">
						<view class="Stote-Infor-order-Status">
							<view class="Stote-Infor-order-Status-Title">
								自助点餐
							</view>
							<view class="Stote-Infor-order-Status-text">
								提前点餐，到店自取
							</view>
							<view class="Stote-Infor-order-Status-Tiem">
								点餐时间 10:30-21:50
							</view>
						</view>
					</navigator>
					<view class="Stote-Infor-order-OrderS" @tap="oreder">
						<view class="Stote-Infor-order-OrderS-Title">
							我的订单
						</view>
						<view class="Stote-Infor-order-OrderS-text">
							查看订单进度
						</view>
					</view>
				</view>
				<view class="service" @tap="location">
					<view class="service-img">
						<image class="img" :src="qnyurl('service.png','mdl')" mode=""></image>
					</view>
					<view class="text">
						在线客服
					</view>
					<view class="icon iconfont icon-youjiantou"></view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	// 客服链接
	import {
		KFCSERVICE
	} from '@/static/js/serviceurl.js';
	// 共用混入
	import mixin from '@/static/js/mixin/mixin.js';
	// 点餐混入
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	import {
		KFCrestaurant
	} from '@/static/js/share.js'
	export default {
		mixins: [mixin, restaurantmixins],
		data() {
			return {

			}
		},
		onShow() {
			this.SETNAVINDEX(0);
		},
		onLoad() {
			this.SETBRANDINFOR({
				brand_id: 5,
				brand_name: '麦当劳'
			});
			// 设置微信分享标识
			this.$wx.miniProgram.postMessage({
				data:{
					title: '麦当劳——欢欢笑笑常常麦当劳，点这里，享优惠哦~',
					imageUrl:'https://img.agrimedia.cn/chwl/mdl/mdlshare.jpg',
					ISH5:true,
					CallbackUrl:'https://jc.agrimedia.cn/privilege/pages/restaurant/index/index_kdj',
				}
			});
		},
		methods: {
			...mapMutations({
				SETNAVINDEX: "shopping/SETNAVINDEX"
			}),
			oreder() {
				this.SETNAVINDEX(1);
				uni.navigateTo({
					url: '/pages/restaurant/home/home'
				})
			},
			/**
			 * @跳转客服
			 * */
			service() {
				window.location.href = KFCSERVICE;
			},
		},
		onShareAppMessage() {
			return KFCrestaurant();
		}
	}
</script>

<style lang="scss">
	page {
		max-height: 100%;
		min-height: 100%;
		height: 100%;
		// background-color: #F9E0B9;
		background-image: url(https://img.agrimedia.cn/chwl/mdl/homback-1.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.stote-Logo {
		padding: 32rpx 32rpx 0 32rpx;
		.img {
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}
	}

	.stote-operate {
		width: 100%;
		min-height: 300rpx;
		height: auto;
		padding: 18rpx;
		box-sizing: border-box;
	}

	.Stote-Infor {
		width: 100%;
		height: auto;
		border-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;

		&-order {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;

			&-Status {
				background-image: url(https://img.agrimedia.cn/chwl/mdl/store.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				&-Tiem{
					color: #FDAD00;
					font-size: 25rpx;
				}
			}
			&-OrderS{
				background-image: url(https://img.agrimedia.cn/chwl/mdl/orders.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			
			&-Status,
			&-OrderS {
				width: 320rpx;
				height: 368rpx;
				border-radius: 15rpx;
				padding: 10rpx 32rpx;
				box-sizing: border-box;
				position: relative;
				

				.img-box {
					width: 200rpx;
					height: 200rpx;
					position: absolute;
					right: 0;
					bottom: 0;

					.img {
						width: 100%;
						height: 100%;
					}
				}
				&-Title {
					font-size: $FONTSIZE36;
					color: #000000;
					line-height: 80rpx;
					font-weight: 700;
				}

				&-text {
					font-size: $FONTSIZE25;
					color: $THEMECOLOR4;
				}
			}
		}

		.service {
			width: 100%;
			height: 144rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			padding: 15rpx 42rpx;
			box-sizing: border-box;

			&-img {
				width: 47rpx;
				height: 59rpx;

				.img {
					width: 100%;
					height: 100%;
				}

			}

			.text {
				font-size: $FONTSIZE36;
				font-weight: 700;
				flex: 1;
				box-sizing: border-box;
				padding-left: 33rpx;
			}

		}
	}
</style>