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
				})
			},
		},
	}
</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>