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="wayType === 1?'bgc-FFF3F3 b-FF3333':'b-b-d'" @click="wayTypeStyle(1)">
						<view class="fw-600 fs-32" :class="wayType === 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="wayType === 2?'bgc-FFF3F3 b-FF3333':'b-b-d'" @click="wayTypeStyle(2)">
						<view class="fw-600 fs-32" :class="wayType === 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">
							桌号：17
						</view>
					</view>
				</view>
				<view class="mb-24 b-b-F9F9F9">
					<view class="flex-justify-space mb-28" v-for="(item,i) in cardData.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">
								{{item.goods_name}}
							</view>
							<view class="fs-24 fc-9 mb-2">{{item.goods_desc}}</view>
							<view class="fs-24 fc-9">x{{item.goods_number}}</view>
						</view>
						<view class="fs-32 fw-600 fc-3">￥{{item.goods_money}}</view>
					</view>
				</view>
				<view class="flex-justify-space mb-30">
					<view class="fs-28 fw-400">就餐人数</view>
					<view class="align-items-center" @click="openPop">
						<view class="fs-32 fw-600 fc-3 mr-4">2人</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">{{(total_price - quanMoney) < 0?'0':(total_price - quanMoney).toFixed(2)||0}}</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="fromData.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">{{(total_price - quanMoney) < 0?'0':(total_price - quanMoney).toFixed(2)||0}}</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">
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getShopIngList
	} from '@/api/shopping.js'
	import {
		getDeliveryMoney
	} from '@/api/common.js'
	import {
		orderCreate,
		orderPay
	} from '@/api/order.js'
	import tools from "@/service/tools";
	export default {
		components: {},
		data() {
			return {
				wayType: 1, //1堂食 2打包
				fromData: {
					school_id: '',
					shop_id: '',
					// site_id:'',
					type: '',
					time: '',
					address_id: '',
					coupon_id: '',
					note: '',
					// is_default:0,
					// pickup_code:[],
				},
				addressData: {},
				deliverText: '',
				cardData: {
					goods_list: [],
				},
				delivery_money: '',
				quanMoney: "",
				total_price: '',
				isAJAX: false,
				CouponLength: 0, // 可用优惠券数量
				receiveLength: 0 // 可领优惠券数量
			}
		},
		onLoad(e) {},
		onShow() {},
		onUnload() {},
		methods: {
			openPop(){
				this.$refs.popup.open()
			},
			wayTypeStyle(type) {
				if (type === this.wayType) {
					return
				} else {
					this.wayType = type
				}
			},
			getDeliveryMoney(shop_id) {
				// 获取外卖配送费
				this.fromData.school_id = uni.getStorageSync('school_id');
				getDeliveryMoney({
					shop_id: shop_id,
					school_id: this.fromData.school_id
				}).then((res) => {
					if (res.code == 1) {
						this.delivery_money = res.data.delivery_money
						this.total_price = (Number(this.total_price) + Number(this.delivery_money)).toFixed(2)
					}
				})
			},
			// 获取购物车
			getCard(shop_id) {
				getShopIngList({
					shop_id: shop_id
				}).then((res) => {
					if (res.code === 1) {
						this.cardData = res.data;
						this.total_price = res.data.total_price
						this.getDeliveryMoney(shop_id)
					}
				})
			},
			giveCouPon(e) {
				if (e.id) {
					this.quanMoney = Number(e.money);
					this.fromData.coupon_id = e.id;
				} else {
					this.quanMoney = ''
					this.fromData.coupon_id = 0
				}
			},
			toSave() {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				this.fromData.school_id = uni.getStorageSync('school_id');
				orderCreate(this.fromData).then((res) => {
					if (res.code === 1) {
						uni.redirectTo({
							url: `/pages-takeout/pay-page?orderId=${res.data.order_id}`
						});
					} else {
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.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>