<template>
	<!-- 瑞幸咖啡首页 -->
	<view class="content">
		<!-- 顶部图 -->
		<view class="banner">
			<image class="img" :src="qnyurl('nx_indexback.png','nx')" mode="widthFix"></image>
		</view>
		<view class="stote-operate">
			<navigator url="/pages/restaurant/home/home" hover-class="none" style="width: 100%;height: auto;">
				<view class="stote-operate-order">
					<image class="img" :src="qnyurl('place.png','nx')"></image>
				</view>
			</navigator>
			<view class="stote-operate-orders" @tap="oreder">
				<view class="tishi">
					<text class="title">我的订单</text>
					<text class="text">柜台扫码取餐</text>
				</view>
				<image class="img" :src="qnyurl('orders.png','nx')"></image>
			</view>
			<view class="stote-operate-service" @tap="location">
				<view class="tishi">
					<view class="title">在线客服</view>
					<view class="text">服务时间 09:00-24:00</view>
				</view>
				<image class="img" :src="qnyurl('service.png','nx')"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	// 客服链接
	import { RXSERVICE} 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 {
				showw:false
			}
		},
		onShow() {
			// 只要显示该页面就将导航索引重置
			this.SETNAVINDEX(0);
		},
		onLoad() {
			this.SETBRANDINFOR({
				brand_id:2,
				brand_name:'奈雪的茶'
			});
			// 设置微信分享标识
			this.$wx.miniProgram.postMessage({
				data:{
					title: '奈雪的茶——人生亦如茶，经历沉浮，方能回甘，喝奈雪，点这里',
					imageUrl:'https://img.agrimedia.cn/chwl/nx/nxshare.jpg',
					ISH5:true,
					CallbackUrl:'https://jc.agrimedia.cn/privilege/pages/restaurant/index/index_nx',
				}
			});
		},
		methods: {
			oreder() {
				let self = this;
				// 点击订单时将导航索引设置为1表明显示订单页面
				uni.navigateTo({
					url: '/pages/restaurant/home/home',
					success() {
						self.SETNAVINDEX(1);
					}
				})
			},
			/**
			 * @跳转客服
			 * */
			service() {
				window.location.href = RXSERVICE;
			},
		},
		
		onShareAppMessage() {
			return XBKSharing();
		}
	}
</script>

<style lang="scss">
page{
		width: 100%;
		min-height: 100%;
		background-color: #F7F7F7;
	}
	.banner {
		width: 100%;
		
		// height: 490rpx;
		.img {
			width: 100%;
			height: 100%;
		}
	}

	.stote-operate {
		width: 100%;
		height: auto;
		padding: 32rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		position: fixed;
		    top: 41%;
		.stote-operate-order {
			width: 100%;
			height: 241rpx;
			position: relative;

			.diancan {
				position: absolute;
				top: 68px;
				left: 78rpx;
				width: 181rpx;
				height: 64rpx;
				background: #FFFFFF;
				box-shadow: 0 10rpx 16rpx 0 rgba(44, 94, 255, 0.2400);
				border-radius: 32rpx;
				color: #4B6FE7;
				text-align: center;
				line-height: 60rpx;
				font-weight: 800;
			}

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

		.stote-operate-orders,
		.stote-operate-service {
			width: 332rpx;
			height: 217rpx;
		    margin-top: 30rpx;
			position: relative;
			.tishi{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				display: flex;
				flex-direction: column;
				padding: 32rpx;
				.title{
					font-size: 32rpx;
				}
				.text{
					font-size: 24rpx;
					color: #666666;
				}
				
			}

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
