jingheng_H5/components/cart-full/cart-full.vue

<template>
	<view class="purchase">
		<view class="purchase-smk"  @touchmove.stop.prevent="movePrevent" @tap="close"></view>
		<view class="purchase-box">
			<view class="purchase-box-title">清理下就能成功加购</view>
			<view class="purchase-box-pind">购物车已满</view>
			<view class="purchase-box-cont">
				<view class="purchase-box-itm">
					<view class="purchase-box-mgb">
						<image :src="datails[listIndx].pic" mode="aspectFill"></image>
						<text class="mgb-tx">{{datails[listIndx].createtime}}加购</text>
					</view>
					<view class="purchase-box-btx" @tap="refresh">
						<text class="iconfont icon-shuaxin"></text>
						<text class="">换一个</text>
					</view>
				</view>
				<view class="purchase-box-ct">
					<view class="icon-bd">
						<text class="iconfont icon-youjiantou"></text>
					</view>
				</view>
				<view class="purchase-box-itm">
					<view class="purchase-box-mgb bg-lig" :style="{'background-color':t('color1')}" style="border-radius: 50%;">
						<text class="iconfont icon-shoucangjia"></text>
					</view>
					<view class="purchase-box-btx">
						<text class="">移入收藏夹</text>
					</view>
				</view>
			</view>
			<button class="purchase-btn" type="default" :style="{'background-color':t('color1')}" @tap="confirm">确认加购</button>
		</view>
		<view class="show-t" v-show="showText_box">
			<view class="">{{showText_t}}</view>
			<view class="">{{showText_b}}</view>
		</view>
	</view>

</template>

<script>
	var app = getApp();
	export default  {
		
		props: {
			
			purchaseDetail: {
				type: Array,
				default: []
			},
			goodscart: {
				type: Object,
				default: {},
			},

		},
		data() {
			return {
				datails: this.purchaseDetail,
				listIndx: 0,
				timeout: null,
				showText_box: true,
				showText_t: '您的购物车商品总数已满',
				showText_b: '请先清理后继续加入购物车',
			}
		},
		mounted(){
			this.timeout = setTimeout(() => {
				this.showText_box = false
			}, 1500)
			// app.error('您的购物车商品总数已满，请先清理后继续加入购物车', 1500);
		},
		beforeDestroy() {
			clearTimeout(this.timeout)
		},
		methods: {
			movePrevent(){
				return true
			},
			close() {
				this.$emit('closePur', false)
			},
			refresh() {
				this.listIndx++
				if(this.listIndx == this.datails.length ) {
					this.listIndx = 0
				}
			},
			// 移除购物车
			delCard(ids) {
				app.post('ApiShop/cartdelete', {ids: ids}, (data) => {
					this.addCard()
				})
			},
			// 加入购物车
			addCard() {
				app.post('ApiShop/addcart', {
					proid: this.goodscart.proid,
					ggid: this.goodscart.ggid,
					num: this.goodscart.num,
					}, res => {
						if (res.status == 1) {
							app.success('添加成功');
							this.$emit('closePur', false)
							this.$emit('favorite', 1)
						} else {
							let massg = null
							this.showText_box = true
							// app.error(res.msg);
							if(res.msg.indexOf('，') != -1) {
								massg = res.msg.split('，')
								this.showText_t = massg[0]
								this.showText_b = massg[1]
								this.timeout = setTimeout(() => {
									this.showText_box = false
								}, 1500)
							}else {
								this.showText_t = res.msg
								this.showText_b = ''
								this.timeout = setTimeout(() => {
									this.showText_box = false
								}, 1500)
							}
							
						}
					
				});
			},
			// 确认加购
			confirm() {
				let ids = []
				ids.push(this.datails[this.listIndx].cartid)
				clearTimeout(this.timeout)
				if (this.datails[this.listIndx].isfavorite) {
					this.delCard(ids)
				}else {
					app.post('ApiShop/addfavorite', {
						proid: this.datails[this.listIndx].goodsid,
						type: 'shop'
					}, data => {
						if (data.status == 1 && data.msg == '已收藏') {
							this.delCard(ids)
						}
					});
				}

				
			}
		}
	}
</script>

<style lang="scss">

	.purchase {
		width: 100%;
		height: 100%;
	}
	/* 购物车已满弹框 */
	.purchase-smk {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.3);
		
	}
		.purchase-box {
			width: 600rpx;
			height: 600rpx;
			padding: 0 54rpx;
			font-size: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			border-radius: 28rpx;
			z-index: 10000;
			
			
			.purchase-box-title {
				font-size: 40rpx;
				font-weight: bold;
			}
			.purchase-box-pind {
				color: #666666;
			}
			.purchase-box-cont {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.purchase-box-itm {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
	
					.purchase-box-mgb {
						width: 174rpx;
						height:174rpx;
						overflow: hidden;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						image {
							width: 100%;
							height: 100%;
						}
						
						.mgb-tx {
							width: 100%;
							height: 44rpx;
							font-size: 28rpx;
							line-height: 44rpx;
							text-align: center;
							border-radius: 8rpx 8rpx 0 0;
							background-color: rgba(228, 228, 228, 0.7);
							position: absolute;
							left: 0;
							bottom: 0;
						}
						
						.icon-shoucangjia {
							color: #fff;
							font-size: 94rpx;
						}
					}
					.bg-lig {
						    background-image: linear-gradient(to bottom right, #FFEE96, #EFBD6F);
					}
				}
				.purchase-box-ct {
					height: 100%;
					display: flex;
					.icon-youjiantou {
						font-size: 72rpx;
						color: #f7deb7;
					}
					.icon-bd {
						height:174rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
	
				.purchase-box-btx {
					width: 100%;
					padding-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #999;
					
					.icon-shuaxin {
						    font-size: 36rpx;
							padding-top: 4rpx;
						    padding-right: 10rpx;
					}
				}
			}
			.purchase-btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				border-radius: 800rpx;
				color: #fff;
			}
		}
	.show-t {
		min-width: 400rpx;
		padding: 30rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		// text-align: center;
		line-height: 50rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 10001;
		transform:  translate(-50%, -50%);
		background-color: #595959cc;
	}
</style>