zh_order_food_xcx/pages-buy/dry-clean.vue

<template>
	<view class="dry-clean-box iPhone-bottom flex-common-css box-border-box">
		<Nav title='干洗'></Nav>
		<view class="head-box box-border-box p-24 flex-justify-space">
			<image v-if="!siteData.logo" src="@/static/img/logo/logo.png" mode="aspectFill"></image>
			<image v-else :src="siteData.logo" mode="aspectFill"></image>
			<view class="flex-1">
				<view class="display-flex mb-16">
					<view class="w410 fs-40 fw-600 text-overflow-ellipsis-one">{{siteData.name?siteData.name:'请选择站点'}}
					</view>
					<view class="fs-28 fw-400 fc-41ABF5 text-align-right" @click="selectsShop()">【切换站点】</view>
				</view>
				<view class="display-flex">
					<view v-if="siteData.city_name||siteData.address" class="w410 fs-26 fw-400 fc-9">
						{{siteData.city_name}}{{siteData.address}}</view>
					<view v-else class="w410 fs-26 fw-400 fc-9">请选择站点已提供服务</view>
					<view class="text-align-center" style="margin-left: auto;">
						<view class="text-align-right">
							<uni-icons type="location" size="20"></uni-icons>
						</view>
						<view class="fs-26 fc-9">{{siteData.distance||'0'}}km</view>
					</view>
				</view>
			</view>

		</view>

		<view class="box-border-box p-24" @click="openText()">
			<view class="sy-box flex-justify-space box-border-box p-16">
				<view class="align-items-center">
					<uni-icons type="help" size="20" color="#666"></uni-icons>
					<view class="fc-6 fs-28 ml-10">使用须知</view>
				</view>
				<image src="@/static/img/toRight.png" mode=""></image>
			</view>
		</view>

		<!-- 列表 -->
		<view class="common-view-css bgc-f" style="overflow: hidden;">
			<Menu ref="menuBox" style="height: 100%;" @relCardBuy='relCardBuy'></Menu>
		</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 class="shop-buttom-num fs-24 fc-f text-align-center" @click="openBuyCrad()">
					{{cardData.total_num||'0'}}</view>
				<view class="">
					<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 fc-f fs-32 fw-600" @click="createOrder()">去结算</view>
			</view>
		</view>



		<uni-popup ref="popupBuy" type="bottom">
			<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 :src="item.goods_image" mode="scaleToFill"></image>
						<view class="flex-1">
							<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-40">{{item.goods_name}}</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">
									<view v-show="item.number > 0"
										class="right-only-right-red fw-500 text-align-center fs-36 fc-f"
										@click="addred(1,item)">-</view>
									<view v-show="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 text-align-center fs-36 fc-f"
										@click="addred(2,item)">+</view>

								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="shop-buttom-money box-border-box" @click="createOrder()">
					<view class="shop-buttom-money-1 flex-justify-space align-items-center">
						<image src="@/static/img/takeout/buy-icon.png" mode="scaleToFill"></image>
						<view class="shop-buttom-num fs-24 fc-f text-align-center">{{cardData.total_num||'0'}}</view>
						<view class="">
							<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">去结算</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupText" type="bottom">
			<view class="use-box box-border-box p-16">
				<view class="head-pop flex-justify-space align-items-center mb-24">
					<uni-icons type="closeempty" size="24" color="#fff"></uni-icons>
					<view class="fs-36 fc-0 fw-600">使用须知</view>
					<uni-icons @click.stop="closeMsg()" type="closeempty" size="24"></uni-icons>
				</view>
				<view class="scroll-view-css" v-html="laundry_str"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		setShopIngNumber,
		setShopIngDel,
		getShopIngList,
		setShopIngAdd,
	} from '@/api/shopping.js'
	import {
		getCommonText
	} from '@/api/common.js';

	import Menu from './dry-mod/menu.vue';
	import tools from "@/service/tools";
	export default {
		components: {
			Menu
		},
		data() {
			return {
				laundry_str: '',
				siteData: {
					id: '',
					school_id: '',
					name: '',
					logo: '',
					distance: 0,
					city_name: '',
					address: '',
				},

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

				isAJAX: false,
			}
		},
		onLoad(e) {
			if (e.data) {
				this.siteData = JSON.parse(decodeURIComponent(e.data));
			}
		},
		onShow() {
			this.getText();
			this.getCardList();
		},
		methods: {
			cardAllDel() {
				if (this.cardData.goods_list.length > 0) {
					setShopIngDel({
						type: 3
					}).then((res) => {
						if (res.code === 1) {
							this.cardData.goods_list = [];
							this.getCardList();
							this.$refs.menuBox.getTypeList();
						} else {
							tools.error('清空失败')
						}
					})
				} else {
					tools.error('暂未选择商品')
				}

			},

			relCardBuy() {
				// 重置购物车
				this.getCardList();
			},
			getCardList() {
				getShopIngList({
					type: 3
				}).then((res) => {
					if (res.code === 1) {
						this.cardData = res.data;
					}
				})
			},

			getText() {
				getCommonText().then((res) => {
					if (res.code === 1) {
						this.laundry_str = res.data.laundry_str
					}
				})
			},

			selectsShop() {
				uni.navigateTo({
					url: '/pages-buy/dry-mod/select-shop?id=' + this.siteData.id
				})
			},
			openText() {
				this.$refs.popupText.open()
			},
			closeMsg() {
				this.$refs.popupText.close()
			},

			openBuyCrad() {
				this.$refs.popupBuy.open()
			},

			addred(type, info) {
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				if (type === 1) {
					// 减
					setShopIngNumber({
						type: 3,
						goods_id: info.goods_id,
						category_id: info.category_id,
						operation: 2
					}).then((res) => {
						if (res.code === 1) {
							this.isAJAX = false;
							info.num -= 1;
							this.getCardList();
							this.$refs.menuBox.getTypeList();
						} else {
							this.isAJAX = false;
							tools.error(res.msg)
						}
					})

				} else if (type === 2) {
					// 加
					setShopIngAdd({
						type: 3,
						goods_id: info.goods_id,
						category_id: info.category_id
					}).then((res) => {
						if (res.code === 1) {
							this.isAJAX = false;
							info.num += 1;
							this.getCardList();
							this.$refs.menuBox.getTypeList();
						} else {
							this.isAJAX = false;
							tools.error(res.msg)
						}
					})

				}
			},

			createOrder() {
				if (this.cardData.goods_list.length == 0) {
					return tools.error('请选择商品')
				}
				if (!this.siteData.id) {
					return tools.error('请选择站点')
				}
				uni.navigateTo({
					url: '/pages-buy/save-dry?id=' + this.siteData.id + '&siteData_logo=' + this.siteData.logo +
						'&siteData_name=' + this.siteData.name
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.use-box {
		width: 100%;
		height: 70vh;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;

		.head-pop {
			padding-bottom: 34rpx !important;
			border-bottom: 1rpx solid #F2F2F2;
		}
	}

	.dry-clean-box {
		background-color: #fff;

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

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

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

		.w-514 {
			width: 514rpx;
		}

		.w410 {
			width: 410rpx;
		}

		.head-box {
			background-color: #fff;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(51, 51, 51, 0.06);

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 8rpx;
				margin-right: 18rpx;
			}
		}

		.sy-box {
			width: 100%;
			height: 60rpx;
			background: #F2F2F2;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			image {
				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;
				}
			}
		}

		.buy-card {
			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;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 12rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>