zh_order_food_xcx/pages-takeout/replace-take.vue

<template>
	<view class="replace-take-box iPhone-bottom flex-common-css box-border-box bgc-f">
		<scroll-view :scroll-y="true" class="scroll-view-css" @scroll="scroll">
			<view class="list-box">
				<view class="nav-box">
					<image class="bg-img" src="@/static/img/takeout/dq-bg.png" mode="scaleToFill"></image>
					<Nav :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
						<template>
							<view slot="custom" class="align-items-center">
								<uni-icons type="left" size="20" @click="toBack()"></uni-icons>
								<view class="w-390 text-overflow-ellipsis-one fs-36 fw-400">{{schoolData.school_name}}
								</view>
							</view>
						</template>
					</Nav>
					<view :class="addressData.id?'bottom-124':''"
						class="address-box align-items-center box-border-box plr-24" @click="selectFun()">
						<view v-if="!addressData.site_id" class="address-1 flex-justify-space align-items-center">
							<view class="align-items-center">
								<image class="qu-image" src="@/static/img/takeout/qu-icon.png" mode=""></image>
								<view class="fw-600 fs-40">请选择站点</view>
							</view>
							<image class="address-box-right" src="@/static/img/toRight.png" mode=""></image>
						</view>
						<view v-else class="address-2 flex-justify-space align-items-center">
							<view class="display-flex">
								<image class="address-img mr-20" :src="addressData.site_logo" mode="scaleToFill">
								</image>
								<view class="">
									<view class="w-474 fs-40 fw-600 mb-8">{{addressData.site_name}}</view>
									<view class="w-474 fw-400 fs-26 fc-9">{{addressData.site_address}}</view>
								</view>
							</view>
							<image class="address-box-right" src="@/static/img/toRight.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="mb-32" :class="addressData.id?'h-120':'h-60'"></view>

				<view class="list-box-b mb-48 box-border-box plr-24">
					<view class="fs-36 fw-600 mb-22">快递类型</view>
					<view class="list-item flex-justify-space" v-for="(item,i) in list" :key="i">
						<image class="item_img" :src="item.serve_image" mode="scaleToFill"></image>
						<view class="flex-1">
							<view class="fs-32 fw-600 mb-32 ">{{item.serve_name}}</view>
							<view class="fs-24 fw-400 mb-32 fc-9">{{item.serve_desc}}</view>
							<!-- <view class="fs-24 fw-400 mb-4 fc-9">销量2801</view> -->
							<view class="flex-justify-space">
								<view class="">
									<span class="fw-4 fc-FB3D03 fs-24">￥</span>
									<span class="fw-b fc-FB3D03 fs-40">{{item.price}}</span>
									<span class="fw-400 fc-9 fs-24">/份</span>
								</view>
								<view class="display-flex align-items-center">
									<image v-if="item.number > 0" class="wh44" src="@/static/img/takeout/j.png" mode=""
										@click="redNumber(1,item)"></image>
									<!-- <view v-if="item.number > 0" class="right-only-right-red fw-500 fs-36 fc-f align-items-center flex-justify-center" @click="redNumber(1,item)">-</view> -->
									<view v-if="item.number > 0"
										class="right-only-right-2 text-align-center fs-28 fw-400">{{item.number}}</view>
									<!-- <view class="right-only-right-add fw-500 fs-36 fc-f align-items-center flex-justify-center" @click="addNumber(1,item)">+</view> -->
									<image class="wh44" src="@/static/img/takeout/add.png" mode=""
										@click="addNumber(1,item)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="box-border-box plr-24">
					<view v-show="cardData.total_num>0" class="fs-36 fw-600 mb-22">取件码（{{pickup_code.length}}）</view>
					<view class="mb-20" v-for="(item,i) in pickup_code" :key="i">
						<input class="input-num" v-model="item.code" type="text" maxlength="20" placeholder="未输入取件码"
							placeholder-class="input-p fc-FB3D03">
					</view>
				</view>
			</view>
		</scroll-view>


		<view class="shop-buttom-money box-border-box">
			<view class="shop-buttom-money-1 flex-justify-space align-items-center">
				<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill" @click="openBuyCrad()"></image>
				<view v-show="cardData.total_num>0" class="shop-buttom-num fs-24 fc-f text-align-center"
					@click="openBuyCrad()">{{cardData.total_num}}</view>
				<view class="" @click="openBuyCrad()">
					<span class="fw-600 fs-24 fc-f">￥</span>
					<span class="fw-600 fs-44 fc-f">{{cardData.total_price||0}}</span>
				</view>
				<view v-if="cardData.total_num>0" class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600"
					@click="createOrder()">去结算</view>
				<view v-else class="fs-32 fc-f fw-600 mr-36">
					暂未选择
				</view>
			</view>
		</view>



		<uni-popup ref="popupBuy" type="bottom" style="z-index: 200;">
			<view class="buy-card flex-index-css">
				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center">
					<view class="">
						<span class="fs-32 fc-3 mr-12">已选商品</span>
					</view>
					<view class="fs-28 fw-400 fc-9 align-items-center">
						<view class="">
							<uni-icons type="trash" size="18" color="#999"></uni-icons>
						</view>
						<view class="fs-28 fw-400 fc-9" @click="cardAllDel()">清空</view>
					</view>
				</view>
				<view class="scroll-view-css box-border-box p-32">
					<view class="buy-card-item display-flex" v-for="(item,i) in cardData.goods_list" :key="i">
						<image class="item_img" :src="item.serve_image" mode="aspectFill"></image>
						<view class="flex-1">
							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-12">{{item.serve_name}}</view>
							<view class="w-514 text-overflow-ellipsis-one fs-24 fw-400 fc-9 mb-18">{{item.serve_desc}}
							</view>

							<view class="flex-justify-space">
								<view class="">
									<span class="fs-24 fc-FB3D03 fw-400">￥</span>
									<span class="fs-40 fc-FB3D03 fw-b">{{item.price}}</span>
								</view>
								<view class="display-flex align-items-center">
									<image class="wh44" src="@/static/img/takeout/j.png" mode=""
										@click="redNumber(2,item)"></image>
									<!-- <view class="right-only-right-red fw-500 fs-36 fc-f align-items-center flex-justify-center" @click="redNumber(2,item)">-</view> -->
									<view class="right-only-right-2 text-align-center fs-28 fw-400">{{item.number}}
									</view>
									<!-- <view class="right-only-right-add fw-500 fs-36 fc-f align-items-center flex-justify-center" @click="addNumber(2,item)">+</view> -->
									<image class="wh44" src="@/static/img/takeout/add.png" mode=""
										@click="addNumber(2,item)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="shop-buttom-money box-border-box">
					<view class="shop-buttom-money-1 flex-justify-space align-items-center">
						<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill" @click="closeCardBox()">
						</image>
						<view class="shop-buttom-num fs-24 fc-f text-align-center" @click="closeCardBox()">
							{{cardData.total_num}}
						</view>
						<view class="" @click="closeCardBox()">
							<view class="">
								<span class="fw-600 fs-24 fc-f">￥</span>
								<span class="fw-600 fs-44 fc-f">{{cardData.total_price||0}}</span>
							</view>
						</view>
						<view class="shop-buttom-money-2 text-align-center fs-32 fc-f fw-600" @click="createOrder()">去结算
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import tools from "@/service/tools";
	import {
		getExpressServe
	} from '@/api/express.js';
	import {
		setShopIngAdd,
		setShopIngNumber,
		setShopIngDel,
		getShopIngList
	} from '@/api/shopping.js'

	export default {
		data() {
			return {
				schoolData: {
					school_id: '',
					school_name: '',
				},
				addressData: {
					site_id: '',
					site_name: '',
					site_address: '',
					site_logo: '',
				},
				list: [],
				bgckgroundBox: 'transparent',
				isAJAX: false,

				pickup_code: [],

				cardData: {
					goods_list: [],
					total_num: 0,
					total_price: 0,
				},

				isInitial: true,
			}
		},
		onShow() {
			this.list = [];
			// this.pickup_code = [];
			this.cardData = {
					goods_list: [],
					total_num: 0,
					total_price: 0,
				},
				this.schoolData.school_id = uni.getStorageSync('school_id');
			this.schoolData.school_name = uni.getStorageSync('school_name');
			this.addressData.site_id = uni.getStorageSync('site_id');
			this.addressData.site_name = uni.getStorageSync('site_name');
			this.addressData.site_address = uni.getStorageSync('site_address');
			this.addressData.site_logo = uni.getStorageSync('site_logo');
			this.isInitial = true;
			this.getList();
		},
		methods: {
			scroll(e) {
				if (e.detail.scrollTop > 1) {
					this.bgckgroundBox = '#fff';
				} else {
					this.bgckgroundBox = 'transparent';
				}
			},
			getList() {
				getExpressServe({
					school_id: this.schoolData.school_id
				}).then((res) => {
					if (res.code === 1) {
						this.list = res.data;
						this.list.forEach((v) => {
							v.number = 0
						})
						this.getCard();
					}
				})
			},
			getCard() {
				getShopIngList({
					type: 2
				}).then((res) => {
					if (res.code === 1) {
						this.cardData = res.data;
						if (this.cardData.total_num > 0) {
							for (let i = 0; i < this.list.length; i++) {
								for (let n = 0; n < this.cardData.goods_list.length; n++) {
									if (this.list[i].id == this.cardData.goods_list[n].goods_id) {
										this.list[i].number = this.cardData.goods_list[n].number;
										break
									} else {
										this.list[i].number = 0
									}
								}
							}
							// 初始设置code 输入框数量
							if (this.isInitial) {
								let saveData = uni.getStorageSync('saveData')
								if (saveData) {
									return
								} else {
									this.pickup_code = [];
									for (let i = 0; i < this.cardData.total_num; i++) {
										let obj = {
											code: ''
										};
										this.pickup_code.push(obj);
									}
								}
							}
						} else {
							this.list.forEach(t => {
								t.number = 0;
							})
						}
					}
				})
			},
			toBack() {
				tools.leftClick()
				uni.setStorageSync('saveData', false)
			},
			selectFun() {
				uni.setStorageSync('saveData', true)
				uni.navigateTo({
					url: 'pages-takeout/replace-mod/select-site?site_id=' + this.addressData.site_id
				})
			},
			closeCardBox() {
				this.$refs.popupBuy.close();
			},
			openBuyCrad() {
				// if (!this.addressData.site_id) {
				// 	return tools.error('请选择站点')
				// }
				if (this.pickup_code.length == 0) {
					return tools.error('请选择商品')
				}
				this.$refs.popupBuy.open()
			},
			createOrder() {
				if (!this.addressData.site_id) {
					return tools.error('请选择站点')
				}
				if (this.pickup_code.length == 0) {
					return tools.error('请选择商品')
				}
				let flag = this.pickup_code.every((item) => {
					return item.code
				});
				if (!flag) {
					return tools.error('请输入取件码')
				}
				let codeRule = /^[A-Za-z0-9-]+$/
				let flagRule = this.pickup_code.every((item) => {
					return codeRule.test(item.code)
				});
				if (!flagRule) {
					return tools.error('请输入正确的取件码')
				}

				let arr = [];
				this.pickup_code.forEach((v) => {
					arr.push(v.code)
				})
				let pickup_code = arr.join(',')
				uni.setStorageSync('isConfirmAddressFlag', false);
				uni.setStorageSync('saveData', true)
				uni.navigateTo({
					url: 'pages-takeout/confirm-order?pickup_code=' + pickup_code + '&type=2'
				})
			},
			// 增加
			addNumber(type, item) {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				let id = type == 1 ? item.id : item.goods_id;
				setShopIngAdd({
					type: 2,
					goods_id: id
				}).then((res) => {
					if (res.code === 1) {
						this.isAJAX = false;
						item.number += 1;
						let obj = {
							code: ''
						};
						this.pickup_code.push(obj);
						this.$forceUpdate();
						this.isInitial = false;
						this.getCard();
					} else {
						this.isAJAX = false;
						tools.error('添加操作失败')
					}
				})
			},
			// 减少
			redNumber(type, item) {
				if (item.number > 0) {
					if (this.isAJAX) {
						return
					}
					this.isAJAX = true;
					let id = type == 1 ? item.id : item.goods_id;
					setShopIngNumber({
						type: 2,
						goods_id: id,
						operation: 2
					}).then((res) => {
						if (res.code === 1) {
							this.isAJAX = false;
							item.number -= 1;
							this.pickup_code.pop();
							this.$forceUpdate();
							this.isInitial = false;
							this.getCard();
						} else {
							this.isAJAX = false;
							tools.error('减少操作失败')
						}
					})
				} else {
					tools.error('已无可减少商品')
				}
			},
			cardAllDel() {
				setShopIngDel({
					type: 2
				}).then((res) => {
					if (res.code === 1) {
						this.pickup_code = [];
						this.isInitial = false;
						this.getCard();
					} else {
						tools.error('清空失败')
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.wh44 {
		width: 44rpx;
		height: 44rpx;
	}

	.replace-take-box {
		.h-80 {
			width: 470rpx;
			height: 88rpx;
		}

		.right-only-right-red {
			box-sizing: border-box;
			width: 44rpx;
			height: 44rpx;
			border-radius: 12rpx;
			border: 1rpx solid #41ABF5;
			color: #41ABF5;
		}

		.right-only-right-add {
			width: 44rpx;
			height: 44rpx;
			background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
			border-radius: 12rpx;
		}

		.right-only-right-2 {
			min-width: 50rpx;
		}

		.w-514 {
			width: 514rpx;
		}

		.buy-card {
			z-index: 200;
			height: 828rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0rpx 0rpx;

			.buy-card-top {
				width: 100%;
				height: 92rpx;
				background: #FCF5DB;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
			}

			.buy-card-item {
				width: 100%;
				height: 176rpx;
				margin-bottom: 32rpx;

				.item_img {
					width: 152rpx;
					height: 152rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
			}
		}

		.h-120 {
			height: 120rpx;
		}

		.h-60 {
			height: 60rpx;
		}

		.w-474 {
			width: 474rpx;
		}

		.w-390 {
			width: 390rpx;
			margin-left: 38rpx;
		}

		.nav-box {
			height: 490rpx;
			position: relative;

			.bg-img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 490rpx;
				// z-index: -1;
			}

			.bottom-124 {
				bottom: -124rpx !important;
			}

			.address-box {
				z-index: 100;
				position: absolute;
				bottom: -64rpx;
				left: 24rpx;
				box-sizing: border-box;
				width: 702rpx;
				min-height: 136rpx;
				background: linear-gradient(182deg, #F1F9FF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(172, 210, 235, 0.19);
				border-radius: 20rpx;
				border-image: linear-gradient(167deg, rgba(255, 255, 255, 1), rgba(208, 236, 255, 0.61)) 2 2;

				.address-1 {
					width: 100%;

					.qu-image {
						width: 40rpx;
						height: 49rpx;
						margin: 10rpx 10rpx 0 0;
					}

				}

				.address-2 {
					box-sizing: border-box;
					padding: 32rpx 0;
				}

				.address-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 8rpx;
				}

				.address-box-right {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.shop-buttom-money {
			width: 100%;
			height: 140rpx;
			background: rgba(255, 255, 255, 0.8);
			padding: 20rpx 24rpx;

			.shop-buttom-money-1 {
				width: 100%;
				height: 100%;
				background: #333333;
				border-radius: 200rpx;
				box-sizing: border-box;
				padding-left: 136rpx;
				// padding-right: 32rpx;
				position: relative;

				image {
					position: absolute;
					bottom: 0;
					left: 8rpx;
					width: 128rpx;
					height: 128rpx;
				}

				.shop-buttom-num {
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: #FB3D03;
					border-radius: 50%;
					position: absolute;
					top: 36rpx;
					left: 82rpx;
				}

				.shop-buttom-money-2 {
					width: 200rpx;
					height: 100rpx;
					line-height: 100rpx;
					background: #41ABF5;
					border-radius: 0rpx 200rpx 200rpx 0rpx;
				}
			}
		}

		.list-box {
			.list-box-b {
				border-bottom: 1rpx solid #f9f9f9;
			}

			.list-item {
				width: 100%;
				min-height: 100rpx;
				margin-bottom: 50rpx;

				.item_img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
			}

			.input-num {
				width: 100%;
				height: 92rpx;
				box-sizing: border-box;
				padding: 0 24rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
				font-size: 32rpx;
			}

			.input-p {
				font-weight: 400;
				font-size: 28rpx;
				color: #FB3D03;
			}
		}

	}
</style>