vibe-coding-cn/yshop/yshop-drink-uniapp/pages/components/pages/orders/detail.vue

<template>
<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  @leftClick="onClickBack"
	/>
	<!-- #endif -->
	<view class="container" style="padding:20rpx;">
		<view style="padding-bottom: 100rpx;" v-if="orderData.orderType != 'due'">
			<view class="bg-white">
				<view class="section">
					<!-- store info begin -->
					<list-cell :hover="false">
						<view class="w-100 d-flex align-items-center">
							<view class="d-flex align-center w-60">
								<uv-avatar :src="orderData.shop.image"></uv-avatar>
								<view class="ml-1 font-weight-bolder w-100 font-size-lg text-color-base text-truncate">{{ orderData.shop.name }}</view>
							</view>
							<view class="d-flex justify-content-end align-items-center w-40">
								<view class="iconfont-yshop icon-mobile"  @click="makePhoneCall(orderData.shop)" style="font-size: 45rpx;margin-right: 40rpx;"></view>
								<view class="iconfont-yshop icon-location"  @click="openLocation(orderData.shop)" style="font-size: 45rpx;"></view>
							</view>
						</view>
					</list-cell>
					<!-- store info end -->
					<list-cell :hover="false" padding="50rpx 20rpx">
						<view class="w-100 d-flex flex-column">
							<view class="flex flex-column align-center"  v-if="orderData.orderType == 'desk'">
								<view><uv-text text="桌号"></uv-text></view>
								<view><uv-text :text="orderData.deskNumber" :size="30" color="#059825"></uv-text></view>
							</view>
							<view class="flex flex-column align-center content-center" v-else>
									<view class="mb-1"><uv-text text="取餐号"></uv-text></view>
									<view><uv-text :text="orderData.numberId" :size="30" color="#059825"></uv-text></view>
							</view>
							<!-- goods begin -->
							<view class="w-100 d-flex flex-column position-relative mt-30" style="margin-bottom: -40rpx;">
								<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in orderData.products" :key="index">
									<view class="d-flex flex-column w-60 overflow-hidden">
										<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
										<view class="font-size-sm text-color-assist text-truncate">{{ good.spec }}</view>
									</view>
									<view class="d-flex w-40 align-items-center justify-content-between pl-30">
										<view class="font-size-base text-color-base">x{{ good.number }}</view>
										<view class="font-size-base text-color-base font-weight-bold">￥{{ good.price }}</view>
									</view>
								</view>
							</view>
							<!-- goods end -->
						</view>
					</list-cell>
				</view>
				<view class="section">
					<!-- goods begin -->
					<list-cell :hover="false" padding="50rpx 20rpx">				
						<view class="w-100 d-flex flex-column position-relative">
							<view>
								<uv-text text="商品明细" :bold="true" :size="16"></uv-text>
								<uv-divider text="" textPosition="left"></uv-divider>
							</view>
							<view  class="cart-popup" v-if="orderData.appDeskOrderVo">
								 <scroll-view class="cart-list" scroll-y>
								  <view class="wrapper2">
										  <view class="item" style="background: linear-gradient(to bottom, #e9f1ee, #fcfcf4);padding: 10rpx 30rpx;margin: 15rpx 0;border-radius: 20rpx;" v-for="(item, index) in orderData.appDeskOrderVo" :key="index">
												<view class="flex align-center">
													<view><uv-avatar :src="item.uavatar"></uv-avatar></view>
													<view class="flex flex-1 justify-between font-size-sm text-color-assist">
														<view class="flex flex-column ml-2">
															<text>{{item.unickname}}</text>
															<text>{{formatDateTime(item.addTime) }}</text>
														</view>
														<view v-if="isMer == 1">
															<text style="color: #9acafc;font-weight: bold;">{{item.uidType == 'user' ? '用户点餐' : '员工帮点'}}</text>
															<text style="color: #5ac725;">({{item.isOrder == 0 ? '未出餐' : '已出餐'}})</text>
														</view>
													</view>
												</view>
												<uv-divider :hairline="false" text=""></uv-divider>
												<view class="flex align-center" v-for="(good,index2) in item.appDeskOrderGoodsVos" :key="index2">
													<view><image :src="good.image" style="width: 100rpx;height: 100rpx;"></image></view>
													<view class="flex  flex-1 flex-column ml-2 font-size-sm">
														<view class="flex justify-between"><text class="font-weight-bolder">{{good.title}}</text><text style="color: #f56c6c;">{{good.spec}}</text></view>
														<view class="flex justify-between mt-1"><text>¥{{good.price}}</text><text>x{{good.number}}</text></view>
													</view>
												</view>
										  </view>		
								  </view>
								 </scroll-view>
							 </view>
							 <view v-else>
								<view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in orderData.cartInfo" :key="index">
									<image :src="good.image" mode="aspectFill" class="image"></image>
									<view class="d-flex flex-column w-60 overflow-hidden">
										<view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.title }}</view>
										<view class="font-size-sm text-color-assist text-truncate">{{ good.spec }}</view>
									</view>
									<view class="d-flex w-40 align-items-center justify-content-between pl-30">
										<view class="font-size-base text-color-base">x{{ good.number }}</view>
										<view class="font-size-base text-color-base font-weight-bold">￥{{ good.price }}</view>
									</view>
								</view>
							</view>
						</view>
					</list-cell>
					<!-- goods end -->
				</view>
				<view class="section">
					<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
						<view class="w-100 d-flex flex-column">
							<view>
								<view class="flex align-center">
									<uv-text text="配送信息" :bold="true" :size="16"></uv-text>
									<view v-if="orderData.sameCityTaskId != ''">
										<uv-icon size="18" name="reload" @click="detail(orderData.orderId)"></uv-icon>
									</view>
								</view>
								<uv-divider text="" textPosition="left"></uv-divider>
							</view>
							<view class="pay-cell">
								<view>享用方式</view>
								<view class="font-weight-bold">
									<text v-if="orderData.orderType == 'takein'">自取</text>
									<text v-if="orderData.orderType == 'takeout'">外卖({{orderData.sameCityTaskId != '' ? orderData.expressName: '商家自配送'}})</text>
									<text v-if="orderData.orderType == 'desk'">堂食</text>
									<text v-if="orderData.orderType == 'due'">预约</text>
								</view>
							</view>
							<view v-if="orderData.sameCityTaskId != ''">
								<view class="pay-cell">
									<view>配送员</view>
									<view class="font-weight-bold">{{orderData.sameCityDeliveryCourierName ? orderData.sameCityDeliveryCourierName : '--'}}</view>
								</view>
								<view class="pay-cell">
									<view>配送员电话</view>
									<view class="font-weight-bold">{{orderData.sameCityDeliveryCourierMobile ? orderData.sameCityDeliveryCourierMobile : '--'}}</view>
								</view>
								<view class="pay-cell">
									<view>配送状态</view>
									<view class="font-weight-bold">{{orderData.sameCityDeliveryStatusDes ? orderData.sameCityDeliveryStatusDes : '--'}}</view>
								</view>
								<view class="pay-cell">
									<view>配送时间</view>
									<view class="font-weight-bold">{{orderData.sameCityDeliveryTime ? orderData.sameCityDeliveryTime : '--'}}</view>
								</view>
								<view class="pay-cell">
									<view>送达时间</view>
									<view class="font-weight-bold">{{orderData.sameCityDeliveryExpectFinishTime ? orderData.sameCityDeliveryExpectFinishTime : '--'}}</view>
								</view>
							</view>
							<view v-else>
								<view class="pay-cell">
									<view>取餐时间</view>
									<view class="font-weight-bold">{{orderData.getTime ? formatDateTime(orderData.getTime) : '立即就餐'}}</view>
								</view>
								<view class="pay-cell">
									<view>制作完成时间</view>
									<view class="font-weight-bold">{{ orderData.deliveryTime ? formatDateTime(orderData.deliveryTime) : '无' }}</view>
								</view>
							</view>
						
						</view>
					</list-cell>
				</view>
				<view class="section">
					<list-cell :hover="false" padding="50rpx 20rpx">
						<view class="w-100 d-flex flex-column">
							<view>
								<uv-text text="订单信息" :bold="true" :size="16"></uv-text>
								<uv-divider text="" textPosition="left"></uv-divider>
							</view>
							<view class="pay-cell">
								<view>订单号</view>
								<view class="font-weight-bold">{{ orderData.orderId }}</view>
							</view>
							<view class="pay-cell">
								<view>订单状态</view>
								<view class="font-weight-bold">{{ orderData.statusDto.title }}</view>
							</view>
							<view class="pay-cell">
								<view>下单时间</view>
								<view class="font-weight-bold">{{ formatDateTime(orderData.createTime )}}</view>
							</view>
							<view class="pay-cell">
								<view>支付方式</view>
								<view class="font-weight-bold">{{ orderData.statusDto.payType }}</view>
							</view>
							<view class="pay-cell">
								<view>订单金额</view>
								<view class="font-weight-bold">￥{{ orderData.totalPrice }}</view>
							</view>
							<view class="pay-cell" v-if="orderData.orderType == 'takeout'">
								<view>配送费</view>
								<view class="font-weight-bold">￥{{ orderData.freightPrice }}</view>
							</view>
							<view class="pay-cell">
								<view>优惠金额</view>
								<view class="font-weight-bold">-￥{{ orderData.couponPrice }}</view>
							</view>
							<view class="pay-cell">
								<view>折扣金额</view>
								<view class="font-weight-bold">-￥{{ orderData.deductionPrice }}</view>
							</view>
							<view class="pay-cell">
								<view>实付金额</view>
								<view class="font-weight-bold">￥{{ orderData.payPrice }}</view>
							</view>
							<view class="pay-cell">
								<view>备注</view>
								<view class="font-weight-bold">{{ orderData.remark ? orderData.remark : '无' }}</view>
							</view>
						</view>
					</list-cell>
				</view>
			</view>
			<view class="fixed-bottom bg-white p-3">
				<view v-if="orderData.paid > 0 && orderData.refundStatus == 0" class="flex justify-end ">
					<view class="mr-1"><uv-button type="success" v-if="orderData.status < 2" :plain="true" size="small" text="确认收到餐" @click="receive(orderData)"></uv-button></view>
					<view><uv-button type="error" :plain="true" size="small" text="申请退款" @click="refund(orderData)"></uv-button></view>
			    </view>
				<view v-if="orderData.paid == 0 && orderData.orderType == 'desk'" class="flex justify-end ">
					<view class="mr-1"><uv-button type="info"  text="去加餐" @click="addFood(orderData)"></uv-button></view>
					<view v-if="isMer == 1"><uv-button  color="#059825" text="线下确认收款" @click="offPayOrder(orderData)"></uv-button></view>
					<view v-else><uv-button  color="#059825" text="去买单" @click="goPay()"></uv-button></view>
				</view>
				<view v-if="orderData.paid == 0 && orderData.orderType != 'desk'" class="flex justify-end ">
					<view><uv-button type="warning"  text="立即支付" @click="goPay()"></uv-button></view>
				</view>
			</view>
			<uv-popup ref="popup" mode="bottom" zIndex='9999' custom-style="height: 400rpx;">
				<view class="content">
					<view class="payment">
						<list-cell last :hover="false"><text>支付方式</text></list-cell>
						<list-cell>
							<view class="d-flex align-items-center justify-content-between w-100 disabled"
								@click="setPayType('yue')">
								<view class="iconfont iconbalance line-height-100 payment-icon"></view>
								<view class="flex-fill">余额支付（余额￥{{ member.nowMoney }}）</view>
								<view class="font-size-sm" v-if="member.nowMoney == 0">余额不足</view>
								<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'yue'">
								</view>
								<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
							</view>
						</list-cell>
						<list-cell last>
							<view class="d-flex align-items-center justify-content-between w-100" @click="setPayType('weixin')">
								<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A"></view>
								<view class="flex-fill">微信支付</view>
								<view class="iconfont line-height-100 checkbox checked iconradio-button-on" v-if="payType == 'weixin'">
								</view>
								<view class="iconfont line-height-100 checkbox iconradio-button-off" v-else></view>
							</view>
						</list-cell>
						<list-cell>
							<view class="flex justify-center  w-100">
								<view >   
									<uv-button type="error"  :plain="true" size="normal" text="立即支付" @click="pay(orderData)"></uv-button>
								</view>
							</view>
						</list-cell>
					</view>
				</view>
			</uv-popup>
		</view>
		<view style="padding-bottom: 100rpx;" v-else>
			<view class="bg-white">
				<view class="section">
					<!-- store info begin -->
					<list-cell :hover="false"  v-if="orderData.orderType != 'desk'">
						<view class="w-100 d-flex align-items-center">
							<view class="d-flex flex-column w-60">
								<view class="w-100 font-size-lg text-color-base text-truncate">{{ orderData.shop.name }}</view>
							</view>
							<view class="d-flex justify-content-end align-items-center w-40">
								<view class="iconfont-yshop icon-mobile"  @click="makePhoneCall(orderData.shop)" style="font-size: 45rpx;margin-right: 40rpx;"></view>
								<view class="iconfont-yshop icon-location"  @click="openLocation(orderData.shop)" style="font-size: 45rpx;"></view>
							</view>
						</view>
					</list-cell>
					<!-- store info end -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<!-- steps begin -->
							<view class="d-flex just-content-center">
								<view class="steps d-flex flex-column w-80">
									<view class="steps__text-column">
										<view class="steps__text-column-item " :class="{active: orderData.dueStatus == 1}">
											<view class="steps__column-item-line bg-transparent"></view>
											<view class="steps__text-column-item-text">预约中</view>
											<view class="steps__column-item-line"></view>
										</view>
										<view class="steps__text-column-item activ"  :class="{active: orderData.dueStatus == 2}">
											<view class="steps__column-item-line"></view>
											<view class="steps__text-column-item-text">已取消</view>
											<view class="steps__column-item-line"></view>
										</view>
										<view class="steps__text-column-item" :class="{active: orderData.dueStatus == 3}">
											<view class="steps__column-item-line"></view>
											<view class="steps__text-column-item-text">
												已完成
											</view>
											<view class="steps__column-item-line bg-transparent"></view>
										</view>
									</view>
								</view>
							</view>

							<!-- goods begin -->
							<view class="w-100 d-flex flex-column position-relative mt-30" style="margin-bottom: -40rpx;">
								<view class="w-100 d-flex align-items-center mb-40">
									<view class="d-flex flex-column w-60 overflow-hidden">
										<view class="font-size-lg text-color-base mb-10 text-truncate">{{ orderData.appShopDeskVO.title }}</view>
										<view class="font-size-sm text-color-assist text-truncate">桌号:{{ orderData.appShopDeskVO.number }}</view>
									</view>
									<view class="d-flex w-40 align-items-center justify-content-between pl-30">
										<view class="font-size-base text-color-base">x1</view>
										<view class="font-size-base text-color-base font-weight-bold">￥0.00</view>
									</view>
								</view>
							</view>
							<!-- goods end -->
						</view>
					</list-cell>
				</view>
				<view class="section">
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>预约人</view>
								<view class="font-weight-bold">{{ orderData.realName }}</view>
							</view>
							<view class="pay-cell">
								<view>预约时间</view>
								<view class="font-weight-bold">{{ formatDateTime(orderData.dueTime) }}</view>
							</view>
							<view class="pay-cell">
								<view>到店时间</view>
								<view class="font-weight-bold">{{ orderData.reachTime }}</view>
							</view>
							<view class="pay-cell">
								<view>预约桌号</view>
								<view class="font-weight-bold">{{ orderData.deskNumber }}</view>
							</view>
							<view class="pay-cell">
								<view>就餐人数</view>
								<view class="font-weight-bold">{{ orderData.deskPeople }}</view>
							</view>
							<view class="pay-cell">
								<view>预留电话</view>
								<view class="font-weight-bold">{{ orderData.userPhone }}</view>
							</view>
						</view>
					</list-cell>
					<!-- payment and amount end -->
				</view>
				<view class="section">
					<!-- order info begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>下单时间</view>
								<view class="font-weight-bold">{{ formatDateTime(orderData.createTime )}}</view>
							</view>
							<view class="pay-cell">
								<view>订单号</view>
								<view class="font-weight-bold">{{ orderData.orderId }}</view>
							</view>
						</view>
					</list-cell>
					<!-- order info end --> 
				</view>
				<!-- order other info begin -->
				<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last v-if="orderData.orderType != 'desk'">
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>享用方式</view>
							<view class="font-weight-bold">预约到店就餐</view>
						</view>
						<view class="pay-cell">
							<view>备注</view>
							<view class="font-weight-bold">{{ orderData.remark ? orderData.remark : '无' }}</view>
						</view>
					</view>
				</list-cell>
				<!-- order other info end -->
			</view>
			<view class="fixed-bottom bg-white p-3">
				<view v-if="orderData.dueStatus == 1" class="flex justify-end ">
					<view><uv-button type="warning"  text="取消预约" @click="cancelDueOrder(orderData)"></uv-button></view>
					<view class="ml-1"><uv-button type="error"  text="去点餐" @click="addFood(orderData)"></uv-button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import { onLoad} from '@dcloudio/uni-app'
import { formatDateTime, isWeixin } from '@/utils/util'
import {
  orderDetail,
  orderReceive,
  payUnify,
  getWechatConfig,
  cancelDue,
  offPay
} from '@/api/order'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
// #ifdef H5
import * as jweixin from 'weixin-js-sdk'
// #endif
const main = useMainStore()
const { member,isMer } = storeToRefs(main)

const title = ref('订单详情')
const orderData = ref({
	shop:{name:''},
	statusDto:{payType:''}
})
const order = ref({})
const numForMading = ref(5)
const popup = ref()
const payType = ref('weixin') // 付款方式
//const isMer = ref(0) //是否商家协助点餐

onLoad((option) => {
	if(option.isMer){
		isMer.value = option.isMer
		main.SET_MER(1)
		main.SET_UID_TYPE('admin')
	}
	detail(option.id);
})
const onClickBack = () => {
	const mypage = getCurrentPages()
	let length = mypage.length
	if(length == 1) {
		uni.switchTab({
			url: '/pages/index/index'
		})
		return
	}
	if(length > 1) { 
		if(mypage[length - 2].route == 'pages/components/pages/pay/pay'){
			uni.switchTab({
				url: '/pages/menu/menu'
			})
			return
		}
	}
	uni.navigateBack()
}
const detail =  async(id) => {
	orderData.value = await orderDetail(id);
}
const openLocation = () => {
	let shop = orderData.value.shop;
	uni.openLocation({
		address: shop.addressMap + shop.address + " " + shop.name,
		latitude: parseFloat(shop.lat),
		longitude: parseFloat(shop.lng),
		fail(res) {
		}
	});
}
const makePhoneCall = () =>{
	let shop = orderData.value.shop;
	uni.makePhoneCall({
		phoneNumber: shop.mobile,
		fail(res) {
		}
	})
}

// 确认收到货
const receive  = async(order) => {
	let data = await orderReceive({uni:order.orderId});
	if (data) {
		await detail(order.orderId)
	}
}

const cancelDueOrder = async(order) => {
	let data = await cancelDue({id:order.id});
	if (data) {
		await detail(order.orderId)
	}
}

const offPayOrder = async(order) => {
	let data = await offPay({id:order.id});
	if (data) {
		await detail(order.orderId)
	}
}

//提交退款
const refund = (order) => {
	uni.navigateTo({
		url: '/pages/components/pages/orders/refund?orderId=' + order.orderId + '&payPrice=' + order.payPrice + '&totalPrice=' + order.totalPrice
	})
}

//加餐
const addFood = (order) => {
	main.SET_DESK({id: order.deskId, number:order.deskNumber, shopId: order.shopId, people: order.deskPeople,orderId: order.orderId})
	main.SET_ORDER_TYPE('desk')
	main.SET_STORE(order.shop)
	uni.switchTab({
		url: '/pages/menu/menu'
	}) 
}
const goPay = () => {
	popup.value.open()
}
const pay = async(order) => {
	if (payType.value == 'weixin') {
		// 微信支付
		weixinPay(order);
	} else if (payType.value == 'yue') {
		// 余额支付
		balancePay(order);
	} 
}

// 更改支付方式
const setPayType = (paytype) => {
	payType.value = 'weixin';
	payType.value= paytype;
	uni.setStorage({
		key: 'paytype',
		data: paytype
	})
}

const balancePay = async(order) => {
	let from = 'routine'
	// #ifdef H5
	from = 'h5'
	// #endif
	let pay = await payUnify({
		uni: order.orderId,
		from: from,
		paytype: 'yue'
	});

	uni.hideLoading();
	if (!pay) {
		return;
	}

	uni.removeStorageSync('cart');
	popup.value.close();
	detail(order.orderId)
}
const weixinPay = async(order) => {
	let from = 'routine'
	// #ifdef H5
	from = 'h5'
	if(isWeixin()){
		from = 'wechat'
	}
	
	// #endif
	//let that = this;
	let data = await payUnify({
		uni: order.orderId,
		from: from,
		paytype: 'weixin'
	});
	if (!data) {
		uni.hideLoading();
		return;
	}
	if (data.trade_type == 'MWEB') {
		// #ifdef H5
		// 微信外的H5
		location.href = data.data;
		// #endif
	} else if (data.trade_type == 'JSAPI') {
		// #ifdef MP-WEIXIN
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: data.data.timeStamp,
			nonceStr: data.data.nonceStr,
			package: data.data.package,
			signType: 'MD5',
			paySign: data.data.paySign,
			success: function(res) {
				uni.removeStorageSync('cart');
				popup.value.close();
				detail(order.orderId)
				// uni.switchTab({
				// 	url: '/pages/order/order'
				// });
			},
			fail: function(err) {
			}
		});
		// #endif
	} else if (data.trade_type == 'W-JSAPI'){
		//公众号支付
		let config = await getWechatConfig();
		if (config) {
		  jweixin.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		        appId: config.appId, // 必填，公众号的唯一标识
		        timestamp: config.timestamp, // 必填，生成签名的时间戳
		        nonceStr: config.nonceStr, // 必填，生成签名的随机串
		        signature: config.signature, // 必填，签名
		        jsApiList: [
		          'chooseWXPay'
		        ] ,
			 }
			);
		  jweixin.ready(function() {
		   jweixin.chooseWXPay({
			timestamp: data.data.timeStamp, 
			nonceStr: data.data.nonceStr, 
			package:  data.data.package, 
			signType: 'MD5', 
			paySign: data.data.paySign, 
			success: function(res) {
			 uni.removeStorageSync('cart');
			 popup.value.close();
			 detail(order.orderId)
			 // uni.switchTab({
			 //  url: '/pages/order/order'
			 // });
			},
			fail: function(err) {
	
			}
		   });
		  });
		   jweixin.error(function(res) {
		
		  });
		 } else {
			 //console.log(res)
	  }
		
	}
}
</script>

<style lang="scss" scoped>
.cart-list {
		background-color: #ffffff;
		width: 100%;
		overflow: hidden;
		min-height: 1vh;
		max-height: 60vh;
}
.image {
	width: 120rpx;
	height: 120rpx;
	margin-right: 30rpx;
	border-radius: 8rpx;
}

.pay-cell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: $font-size-base;
	color: $text-color-base;
	margin-bottom: 40rpx;

	&:nth-last-child(1) {
		margin-bottom: 0;
	}
}

.desk-num {
	font-size: 30rpx;
	font-weight: bold;
	color: $text-color-base;
}

.sort-num {
  font-size: 64rpx;
  font-weight: bold;
  color: $text-color-base;
  line-height: 2;
 }

.invote-box {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	
	image {
		width: 30rpx;
		height: 30rpx;
	}
}

.btn-box {
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	z-index: 11;
	
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		flex: 1;
		flex-shrink: 0;
		
		button {
			width: 100%;
			border-radius: 50rem !important;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
	}
}

.payment {
	margin-bottom: 30rpx;

	.disabled {
		color: $text-color-grey;
	}

	.payment-icon {
		font-size: 44rpx;
		margin-right: 10rpx;
	}

	.checkbox {
		font-size: 36rpx;
		margin-left: 10rpx;
	}

	.checked {
		color: $color-primary;
	}
}

/* #ifdef H5 */
	page {
		min-height: 100%;
		background-color: $bg-color;
	}
	/* #endif */
	.order-box {
		padding: 20rpx;
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
	}
	
	.drinks-img {
		width: 260rpx;
		height: 260rpx;
	}
	
	.tips {
		margin: 60rpx 0 80rpx;
		line-height: 48rpx;
	}
	
	.drink-btn {
		width: 320rpx;
		border-radius: 50rem !important;
		margin-bottom: 40rpx;
		font-size: $font-size-base;
		line-height: 3.0;
	}
	
	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}
	
	.section {
		position: relative;
		
		&::before {
			@include arch;
			left: -15rpx;
		}
		
		&::after {
			@include arch;
			right: -15rpx;
		}
	}
	
	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}
	
	
	.steps__img-column {
		display: flex;
		margin: 30rpx 0;
		
		.steps__img-column-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 80rpx;
				height: 80rpx;
			}
			.unactive {
				color: #919293;
			}
		}
	}
	
	.steps__text-column {
		display: flex;
		margin-bottom: 40rpx;
		
		.steps__text-column-item {
			flex: 1;
			display: inline-flex;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-base;
			color: $text-color-assist;
			
			&.active {
				color: $text-color-base;
				font-weight: bold;
				
				.steps__column-item-line {
					background-color: $text-color-base;
				}
			}
			
			.steps__column-item-line{
				flex: 1;
				height: 2rpx;
				background-color: #919293;
				transform: scaleY(0.5);
			}
			
			.steps__text-column-item-text {
				margin: 0 8px;
			}
		}
	}
	.icon-lamp, .icon-daojishi, .icon-takeout, .icon-doorbell{
		font-size: 60rpx;
	}
	.iconfont-yshop {
		color: #059825;
	}
</style>