zh_order_food_xcx/pages-takeout/goods-order.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box bgc-F5F4F9">
		<image class="order-bg" src="@/static/img/order-food/order-bg.png" mode=""></image>
		<newNav textName="提交订单" class="mb-20"></newNav>
		<view class="scroll-view-css plr-24 box-border-box z-3">
			<view class="way-box bgc-f b-rad-20 mb-20 p-24 box-border-box">
				<view class="fc-6 fw-400 fs-28 mb-24">
					请选择就餐方式
				</view>
				<view class="align-items-center">
					<view class="pl-32 pr-24 box-border-box align-items-center flex-justify-space flex-1 mr-18 b-rad-16"
						:class="cartData.order_type === 1?'bgc-FFF3F3 b-FF3333':'b-b-d'" @click="wayTypeStyle(1)">
						<view class="fw-600 fs-32" :class="cartData.order_type === 1?'fc-FF3333':'fc-3'">
							堂食
						</view>
						<image class="ts-img" src="/static/img/order-food/ts-img.png" mode="aspectFill"></image>
					</view>
					<view class="pl-32 pr-24 box-border-box align-items-center flex-justify-space flex-1 b-rad-16"
						:class="cartData.order_type === 2?'bgc-FFF3F3 b-FF3333':'b-b-d'" @click="wayTypeStyle(2)">
						<view class="fw-600 fs-32" :class="cartData.order_type === 2?'fc-FF3333':'fc-3'">
							打包
						</view>
						<image class="ts-img" src="/static/img/order-food/db-img.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="align-items-center b-rad-16 bgc-f mb-20 p-20 box-border-box">
				<uni-icons type="notification" size="15" color="#FF8D28" class="mr-12"></uni-icons>
				<view class="fs-24 fc-FF8D28">
					依据法律规定，18周岁以下未成年人限制购买酒类商品
				</view>
			</view>

			<view class="box-card bgc-f b-rad-16 p-24 box-border-box mb-16">
				<view class="align-items-center flex-justify-space pb-24 b-b-F9F9F9">
					<view class="fs-28 fc-6">
						店内点单
					</view>
					<view class="align-items-center">
						<image class="zz-icon mr-4" src="@/static/img/order-food/zz-icon.png" mode=""></image>
						<view class="fs-28 fc-6">
							桌号：{{cartData.table_number}}
						</view>
					</view>
				</view>
				<view class="mb-24 b-b-F9F9F9">
					<view class="flex-justify-space mb-28" v-for="(item,i) in cartData.shopping_cart.goods_list"
						:key="i">
						<image class="goods-img" :src="item.goods_image" mode="aspectFill"></image>
						<view class="w376">
							<view class="fs-28 fw-600 mb-2 text-overflow-ellipsis-one">
								{{item.goods_name}}
							</view>
							<view class="fs-24 fc-9 mb-2">{{item.goods_attr}}</view>
							<view class="fs-24 fc-9">x{{item.goods_number}}</view>
						</view>
						<view class="fs-32 fw-600 fc-3">￥{{item.price}}</view>
					</view>
				</view>
				<view class="flex-justify-space mb-30" v-if="cartData.order_type === 2">
					<view class="fs-28 fw-400">打包费</view>
					<view class="fs-32 fw-600 fc-3">￥{{cartData.shopping_cart.pack_price}}</view>
				</view>
				<view class="flex-justify-space mb-30" v-if="cartData.order_type === 1">
					<view class="fs-28 fw-400">就餐人数</view>
					<view class="align-items-center" @click="openPop">
						<view class="fs-32 fw-600 fc-3 mr-4">{{cartData.diner_number}}人</view>
						<image class="right-b" src="@/static/img/order-food/right-b.png" mode=""></image>
					</view>
				</view>
				<!-- 				<view class="flex-justify-space mb-30">
					<view class="fs-28 fw-400">餐位费</view>
					<view class="fs-32 fw-600 fc-3">￥4</view>
				</view> -->
				<!-- 				<view class="flex-justify-space mb-30">
					<view class="fs-28 fw-400">店铺优惠</view>
					<view class="fs-32 fw-600">￥{{cardData.pack_price}}</view>
				</view> -->
				<view class="align-items-center flex-justify-end pt-20 b-t-F9F9F9">
					<view class="fs-28 fc-0 fw-400 mr-4">
						应付
					</view>
					<span class="fw-600 fc-0 fs-28">￥</span>
					<span
						class="fw-600 fc-0 fs-44">{{cartData.order_type === 1 ?cartData.shopping_cart.total_goods_money:cartData.shopping_cart.total_price}}</span>
				</view>
			</view>

			<view class="p-24 box-border-box bgc-f mb-20 b-rad-20 flex-justify-space">
				<view class="fs-28 fw-600">备注</view>
				<input v-model="cartData.note" class="flex-1 text-align-right fs-28" type="text" placeholder="请填写你的需求">
			</view>
			<view class="p-24 box-border-box bgc-f mb-20 b-rad-20 flex-justify-space">
				<view class="fs-28 fw-600">支付方式</view>
				<view class="align-items-center">
					<image class="wx-zf mr-6" src="@/static/img/common/wx-zf.png" mode=""></image>
					<view class="fs-28 fc-3">
						微信支付
					</view>
				</view>
			</view>
		</view>

		<view class="plr-24	box-border-box">
			<view class="bottom-box flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200 bgc-f">
				<view class="align-items-baseline">
					<view class="fs-28 fc-3 fw-600">￥</view>
					<view class="fs-44 fc-3 fw-600">
						{{cartData.order_type === 1 ?cartData.shopping_cart.total_goods_money:cartData.shopping_cart.total_price}}
					</view>
				</view>
				<view class="box-2 text-align-center fc-f fs-32 fw-600 b-rad-200" @click="toSave()">立即支付</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="transparent" borderRadius='10px 10px 0 0'>
			<view class="b-rad-20-20-0-0 bgc-f popup_diner_number p-32 box-border-box">
				<view class="fc-3 fw-600 fs-36 mb-32">
					请选择用餐人数
				</view>
				<view class="align-items-center flex-justify-space flex-wrap-wrap mb-50">
					<view @click="dinerNumber(index+1)"
						class="w-25-100 b-rad-12 text-align-center flex-justify-center fs-36 fc-3 fw-500 mb-20"
						:class="cartData.diner_number === index+1 && !customizeType?'b-FF3333 bgc-FFF3F3':'b-FFF3F3 bgc-F2F2F2'"
						v-for="(item,index) in 10">
						{{index + 1}}
					</view>
					<view class="bgc-F2F2F2 b-rad-12 customize-box mb-20"
						:class="customizeType?'b-FF3333 bgc-FFF3F3':'b-FFF3F3 bgc-F2F2F2'">
						<input class="customize-input fs-32" type="number" v-model="customize_num" @focus='focusInput'
							@input='input' placeholder="请输入数量" placeholder-class="fc-9 fs-32" />
					</view>
				</view>
				<view class="pop-but fs-32 fc-f fw-500 text-align-center b-rad-200" @click="okPop">
					确认选择
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getShopIngList
	} from '@/api/shopping.js'
	import {
		orderCreateVtwo,
		orderCreate,
		orderPay
	} from '@/api/order.js'
	import cartStore from '@/utils/cartStore.js';
	import tools from "@/service/tools";
	export default {
		components: {},
		data() {
			return {
				customize_num: '',
				customizeType: false,
				shop_id: '',
				wayType: 1,
				fromData: {
					school_id: '',
					shop_id: '',
					// site_id:'',
					type: '',
					time: '',
					address_id: '',
					coupon_id: '',
					note: '',
				},
				addressData: {},
				deliverText: '',
				delivery_money: '',
				quanMoney: "",
				total_price: '',
				isAJAX: false,
				cartData: {
					shopping_cart: {},
					order_type: 1, //1堂食 2打包
					table_number: 1,
					diner_number: 1,
					note: ''
				},
				CouponLength: 0, // 可用优惠券数量
				receiveLength: 0 // 可领优惠券数量
			}
		},
		onLoad(e) {
			this.cartData.table_number = uni.getStorageSync('table_number')
			this.getCartData()
		},
		onShow() {},
		onUnload() {},
		methods: {
			okPop() {
				if (this.cartData.diner_number === 0) {
					tools.error("选择就餐人数")
					return
				}
				this.$refs.popup.close()
			},
			input(e) {
				this.cartData.diner_number = e.detail.value
			},
			focusInput() {
				this.customizeType = true
				this.cartData.diner_number = 0
			},
			dinerNumber(num) {
				if (this.cartData.diner_number === num) {
					return
				} else {
					this.cartData.diner_number = num
				}
				this.customizeType = false
				this.customize_num = ''
			},
			getCartData() {
				cartStore.setShopId();
				const shopCart = cartStore.getShopCart();
				this.cartData.shopping_cart = shopCart
			},
			openPop() {
				if (this.cartData.diner_number > 10) {
					this.customize_num = this.cartData.diner_number
				}
				this.$refs.popup.open()
			},
			wayTypeStyle(type) {
				if (type === this.cartData.order_type) {
					return
				} else {
					this.cartData.order_type = type
				}
			},
			toSave() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				orderCreateVtwo(this.cartData).then((res) => {
					if (res.code === 1) {
						orderPay({
							order_id: res.data.order_id
						}).then((ret) => {
							if (ret.code === 1) {
								uni.requestPayment({
									provider: "wxpay", //支付类型-固定值
									timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
									nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
									package: ret.data.wx_pay.package, // 固定值
									signType: ret.data.wx_pay.signType, //固定值
									paySign: ret.data.wx_pay.paySign, //签名
									success: (ren) => {
										tools.success("支付成功");
										this.isAJAX = false;
										setTimeout(() => {
											uni.redirectTo({
												url: `/pages-order/takeout-info?orderId=` + res.data.order_id
											})
											cartStore.clearCurrentShopCart();
										}, 1000)
									},
									fail: (err) => {
										this.isAJAX = false;
										tools.error("支付失败");
										setTimeout(() => {
											uni.redirectTo({
												url: `/pages/order/index`
											})
											cartStore.clearCurrentShopCart();
										}, 1000)
									},
								});
							} else {
								this.isAJAX = false;
								tools.error("支付失败");
								setTimeout(() => {
									uni.redirectTo({
										url: `/pages/order/index`
									})
									cartStore.clearCurrentShopCart();
								}, 1000)
							}
						})
					} else {
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
			setShopIngDel() {
				// 清除购物车
				cartStore.clearCurrentShopCart();
			}
		},
	}
</script>

<style scoped lang="scss">
	.pop-but {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
	}

	.customize-input {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.customize-box {
		width: 48%;
		height: 92rpx;
	}

	.w-25-100 {
		width: 22%;
		height: 92rpx;
		line-height: 92rpx;
	}

	.popup_diner_number {
		width: 100%;
		height: 42vh;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.wx-zf {
		width: 40rpx;
		height: 40rpx;
	}

	.zz-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.right-b {
		width: 32rpx;
		height: 32rpx;
	}

	.ts-img {
		width: 128rpx;
		height: 128rpx;
	}

	.way-box {
		box-shadow: 0rpx 8rpx 56rpx 0rpx rgba(154, 152, 152, 0.34);
	}

	.z-3 {
		position: relative;
		z-index: 3;
	}

	.order-bg {
		width: 100%;
		height: 15vh;
		position: fixed;
		left: 0;
		top: 0;
	}

	.goods-img {
		width: 108rpx;
		height: 108rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}

	.right-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.w376 {
		width: 376rpx;
	}

	.w570 {
		width: 570rpx;
	}

	.sd-box {
		padding: 3rpx 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: rgba(251, 61, 3, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.box-2 {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
	}

	.bottom-box {
		width: 100%;
		height: 96rpx;
	}
</style>