yogaApp/pages/components/cart.vue

<template>
	<view>
		<!-- 规格选择 -->
		<uni-popup ref="cartpup" type="share">
			<view class="allcon">
				<view class="gcon" v-if="product">
					<image :src="product.img1"></image>
					<view class="tit-box">
						<view class="price">
							<text class="txt">￥</text>
							<text class="tint">{{product.price}}</text>
							<text class="txt" v-if="product.unit">/{{product.unit}}</text>
						</view>
						<text class="tit2">
							已选: {{product.sels}}
						</text>
						<text class="tit2">
							商品: {{product.name}} {{product.tip}}{{product.sels}}
						</text>
					</view>
				</view>
				<view class="selcon" v-if="product.specs&&product.specs.length>0" >
					<view class="spcitem" v-for="(item, index) in product.specs" :key="index" v-if="item.list.length>0">
						<view class="spcname">
							{{item.name}}
						</view>
						<view class="spcul" v-if="item.list&&item.list.length>0">
							<view class="spcli" v-for="(cell, ii) in item.list" :key="ii" :class="item.sels==ii?'cur':''" @tap="seldo(index,ii)">
								{{cell.name}}
							</view>
						</view>
					</view>
				</view>
				<view class="numcon">
					<view class="ntip">购买数量</view>
					<view class="nadc">
						<uni-number-box v-model="product.quantity" :value="product.quantity" :min="1" :max="product.stock" />
					</view>
				</view>
				<button v-if="buyType==1" type="primary" class="sbtn" data-img="/static/image/cart.png" @tap="addcarDo">加入购物车</button>
				<button v-if="buyType==2" type="primary" class="sbtn1" @tap="gotoBuy()">立即购买</button>
			</view>
		</uni-popup>
		
		<!-- 加入购物车动画 cartx 和 carty 是购物车位置在屏幕位置的比例 例如左上角x0.1 y0.1 右下角 x0.9 y0.9--> 
		<shopCarAnimation ref="carAnmation" :cartx="x" :carty="y"></shopCarAnimation>
		
	</view>
</template>

<script> 
import { myCache,getRemoteFile } from '../../utils/utils.js';
//  加入购物车动画组件
import shopCarAnimation from '@/components/fly-in-cart/fly-in-cart.vue'
export default {
	components: {
		shopCarAnimation
	},
	props: {
		pdata: {
			type: Object,
			default: function () {
			  return null
			},
		},// 商品信息
		ptype: {
			type: Number,
			default: 1,
		},// 1加入购物车，2 购买
		x: {
			type: String,
			default: function () {
			  return "0.1"
			},
		},// 坐标点
		y: {
			type: String,
			default: function () {
			  return "0.1"
			},
		},// 坐标点
	},
	data() {
		return {
			product:{
				specs:[]
			},
			buyType:1
		};
	},
	watch: {
		pdata(value) {
		    this.init(value);
		},
		ptype(value) {
		    this.initbt(value);
		},
	},
	methods: {
		init(value){
			this.product=value;
			this.$forceUpdate();
			if(this.product&&this.product.specs){
				this.selinit();
			}
		},
		initbt(value){
			this.buyType=value;
		},
		seldo(ii,kk){
			console.log(ii,kk)
			this.product.specs[ii].sels=kk;
			this.$forceUpdate();
			this.selinit();
		},
		selinit(){
			// 初始化
			if(this.product.specs&&this.product.specs.length>0){
				var sels='',spData={};
				this.product.specs.forEach((cell,idx)=>{
					if(cell.list&&cell.list[cell.sels]){
						sels=sels+cell.list[cell.sels].name+' ',
						spData[cell.name]=cell.list[cell.sels].name;
					}
				});
				this.product.sels=sels;
				this.product.spData=spData; // 规格的json形式，非字符串
				this.product.skus.forEach(cell=>{
					if(cell.spData==JSON.stringify(spData)){
						this.product.skuId=cell.id;
						this.product.price=cell.price;
						this.product.img=cell.pic?getRemoteFile(cell.pic):this.product.img1;
						this.product.img1=cell.pic?getRemoteFile(cell.pic):this.product.img1;
						this.product.stock=cell.stock;//库存
						if(this.product.quantity>this.product.stock){
							this.product.quantity=this.product.stock
						}
						else if(this.product.quantity==0&&this.product.stock>0){
							this.product.quantity=1
						}
					}
				});
				this.$forceUpdate();
			}
			else{
				this.product.sels='';
				this.product.spData==null;
				this.product.skuId=null;
				this.$forceUpdate();
			}
		},
		retSku(spData){
			var rets=[];
			if(spData){
				var suk= spData;
				var keys=Object.keys(suk);
				keys.forEach(dd=>{
					rets.push(dd+":"+suk[dd])
				});
			}
			return rets.join(',');
		},
		gotoBuy(){
			// 购物车数量要大于0
			if(this.product.quantity<=0){
				uni.showModal({
					title: '提示',
					content: '数量要大于0！',
					cancelText: '取消',
					confirmText: '确定',
				});
				return false;
			}
			
			// 更改字符方式传输
			this.product.spData=JSON.stringify(this.product.spData);
			
			// 缓存购买商品
			var setcart= JSON.parse(JSON.stringify(this.product));
			myCache('buycartList',setcart);
			// 跳转订单结算
			uni.navigateTo({
				url: `/pages/product/order?type=buy`
			});
		},
		async addcarDo(e){
			try{
				// 购物车数量要大于0
				if(this.product.quantity<=0){
					uni.showModal({
						title: '提示',
						content: '数量要大于0！',
						cancelText: '取消',
						confirmText: '确定',
					});
					return false;
				}
				
				var param={
					productId:this.product.id,
					productName:this.product.name,
					pic:this.product.img,
					spData:JSON.stringify(this.product.spData),// this.retSku(this.product.spData) 展示时候再解析，保持数据一致, // 保存字符串 this.product.spData,
					skuId:this.product.skuId,
					quantity:this.product.quantity,
					storeId:myCache('myshopid')?myCache('myshopid'):'',
					isCourse:this.product.isCourse,
				};
				const {data: res1} = await uni.$http.post('/api/cart/add',param);
				if (res1) {
					// 购物车缓存
					this.updatecart(e);
					this.close();
				}
				else{
					uni.showModal({
						title: '提示',
						content:  res1.message? res1.message:'加入购物车失败！请稍候再试',
						cancelText: '取消',
						confirmText: '确定',
					});
				}
			}
			catch(e){
				console.log(e)
			}
		},
		async updatecart(e){
			try{
				const {data: res } = await uni.$http.get('/api/cart/list');
				if (res&&res.length>0) {
					// 购物车缓存
					myCache("carts",res);
					// 加入购物车动画
					this.$refs.carAnmation.touchOnGoods(e);
					this.$emit("addShopCar", this.product.sels,this.product.quantity,this.buyType);
				}
			}
			catch(e){
				console.log(e)
			}
		},
		close(){
			this.$refs.cartpup.close();
		},
		show() {
			this.$refs.cartpup.open();
			this.product=this.pdata;
			this.buyType=this.ptype;
			console.log(this.product,this.buyType)
			this.$forceUpdate();
			if(this.product&&this.product.specs){
				this.selinit();
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	/* 弹框 */
	.allcon{
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: calc(var(--window-bottom) + 30rpx);
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
		.gcon{
			display:flex;
			align-items:center;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;
			image{
				flex-shrink: 0;
				width: 150rpx;
				height: 150rpx;
				border-radius: 6rpx;
				border: 1rpx solid #eee;
				margin-right: 20rpx;
			}
			.tit-box{
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.price{
				line-height: 1;
				color: #89965f;
				.txt{
					font-size: 30rpx;
				}
				.tint{
					font-size: 42rpx;
					font-weight: 600;
				}
			}
			.tit{
				font-size: 36rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 1.3;
			}
			.tit2{
				font-size: 24rpx;
				color: #909399;
				margin-top: 10rpx;
			}
		}
		.selcon{
			position: relative;
			padding: 20rpx 0;
			.spcitem{
				padding: 0 20rpx 0 20rpx;
				display: flex;
				flex-direction: column;
				.spcname{
					line-height: 70rpx;
					color: #000;
					font-size: 28rpx;
				}
				.spcul{
					display: flex;
					flex-direction: row;
					flex-flow: wrap;
					.spcli{
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
						border: 1rpx solid #eee;
						font-size: 26rpx;
						color: #000;
						background: #FFF;
						margin-right: 20rpx;
						border-radius: 6rpx;
						margin-bottom: 20rpx;
					}
					.spcli.cur{
						background: #f3f4ee;
						border: 1rpx solid #89965f;
						font-weight: 600;
					}
					.spclilong{
						height: 66rpx;
						line-height: 66rpx;
						padding: 0 20rpx;
						border: 1rpx solid #eee;
						font-size: 26rox;
						color: #000;
						background: #FFF;
						margin-right: 20rpx;
						border-radius: 6rpx;
						margin-bottom: 30rpx;
						display: flex;
						flex:1;
						justify-content: space-between;
					}
					.spclilong.cur{
						background: #f3f4ee;
						border: 1rpx solid #89965f;
						font-weight: 600;
					}
				}
			}
		}
		.numcon{
			padding: 10rpx 20rpx 40rpx 20rpx;
			display: flex;
			justify-content: space-between;
			.ntip{
				font-size: 28rpx;
				color: #000;
			}
			.nadc{
				margin-right: 20rpx;
			}
		}
		.sbtn{
			margin: 20rpx 30rpx 54rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCFCFD;
			width: 690rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #89965f;
			box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
			margin: 0 30rpx 30rpx;
			border-radius: 10rpx;
			opacity: 1;
			&::after{
				border:none;
			}
		}
		.sbtn1{
			margin: 20rpx 30rpx 54rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FCFCFD;
			width: 690rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #55690e;
			box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
			margin: 0 30rpx 30rpx;
			border-radius: 10rpx;
			opacity: 1;
			&::after{
				border:none;
			}
		}
	}
</style>