shopCar.vue

<template>
	<view>
		<u-popup :show="showShopCar && goods.length" mode="bottom" :round="10" :overlay="true"
			:closeOnClickOverlay="true" @close="closeT">
			<view class="shop-car">
				<view class="header">
					<text class="left">购物袋</text>
					<text class="right" @click="clearCar"><text class="delete-icon"></text>清空购物车</text>
				</view>
				<view class="container">
					<view>
						<view class="empty" v-if="show == false">
							<image :src="imgPath" mode="widthFix" style="width: 400rpx;"></image>
							<view class="empty-text">空空如也的购物</view>
							<view class="empty-button" @click="goshopping">去选购</view>
						</view>
						<view v-if="show == true">
							<view class="goods-detail" v-for="(item, index) in goods" :key="index">
								<view class="detail-left">
									<view class="goods-left">
										<view class="checkBox">
											<view class="check"  @click="selected(item)" :class="item.flag?'checked':'nochecked'"></view>
										</view>
										<!-- <u-checkbox-group @change="selected(item)">
											<label>
												<u-checkbox shape="circle" class="selected" color="#555555"
													:checked="item.flag" />
											</label>
										</u-checkbox-group> -->
										<view>
											<image :src="item.pics.thumbnailApplet || item.pics.thumbnail"
											style="width: 120rpx;height: 120rpx;margin-top: 4rpx"></image>
										</view>
									</view>
									<view class="size">
										<view class="goods-name">{{ item.name }}</view>
										<view class="goods-skus">
											<text v-for="(rl, index) in item.sku.rules" :key="rl.ruleName">
												{{ rl.ruleName }}
												<text v-if="index != item.sku.rules.length - 1">/</text>
											</text>
										</view>
										<view class="goods-price">
											<text class="price-discount">￥{{ item.sku.discount }}</text>
											<text class="price-x">￥</text>
											<text class="price-xx">{{ item.sku.price }}</text>
										</view>
									</view>
								</view>
								<view class="detail-right">
									<view class="subtract" @click="reduce(item, index)"></view>
									<text class="num">{{ item.num }}</text>
									<view class="add" @click="add(item)" ></view>
									<!-- <text class="subtract" @click="reduce(item, index)">-</text> -->
									<!-- <u-icon class="subtract" name="minus-circle" @click="reduce(item, index)" color="#2979ff" size="22"></u-icon> -->
									<!-- <text @click="add(item)" class="add">+</text> -->
									<!-- <u-icon class="add" name="plus-circle-fill" color="#2979ff" @click="add(item)" size="22"></u-icon> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height:200rpx"></view>
			</view>

		</u-popup>
		<view class="end" v-if="goods.length">
			<view @click.stop="openShopCar" class="end-left">
				<view style="display:flex">
					<view class="car-img">
						<text class="badge" v-if="totalNum">{{ totalNum }}</text>
					</view>
					<text class="shopClassStyle">￥{{ totalPrice.toFixed(2) }}</text>
				</view>
			</view>
			<view class="end-right goSubmmit" @click="saveReserve" v-if="userms">
			</view>
			<!-- <view v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve">
				
			</view> -->
			<button v-if="!userms" class="end-right goSubmmit" style="border-radius: 0;" open-type="getPhoneNumber"
				@getphonenumber="saveReserve">
			</button>
		</view>
		<show-toast ref="toast"/>
	</view>
</template>

<script>
import { $EventBus } from "../../utils/EventBus";
import Menu from '@/request/menu';
import User from '@/request/user';
export default {
	data() {
		return {
			showShopCar: false,//是否弹出购物车列表
			show: true,
			allchecked: true,
			// checked:true,
			goods: [],//购物车商品信息
			loginInfo: "",
			imgPath: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309',
		}
	},
	created() {
		$EventBus.$off('updateCar');
	},
	mounted() {
		if(!this.userms){
			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
				this.loginInfo = loginInfo
			})
		}
		this.goods = uni.getStorageSync('shopCarInfo') || [];
		$EventBus.$on('updateCar', () => {
			this.goods = uni.getStorageSync('shopCarInfo') || [];
		});
	},
	methods: {
		// 切换购物车列表显示隐藏
		openShopCar() {
			this.$nextTick(() => {
				this.showShopCar = !this.showShopCar;
			})
		},
		closeT(e) {
			this.showShopCar = false;
		},
		// 清空购物车
		clearCar() {
			uni.removeStorageSync('shopCarInfo');
			$EventBus.$emit('updateCar');
		},
		// 购物车为空时点击去购物，收起购物袋
		goshopping() {
			this.showShopCar = false;
		},
		//跳转到结算
		saveReserve(e) {
			if(this.totalPrice < 0 || this.totalNum <= 0) {
				this.showToast({ title: '请选择商品', icon: 'error' })
				return;
			}
			let Authorization = uni.getStorageSync('Authorization');
			let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v => v.flag == true);
			if (shopCarInfo) {
				if (Authorization) {
					uni.navigateTo({
						url: `/orderSubPackage/pages/settlement/index?buyType=1`
					})
				} else {
					this.loginByPhoneNumber(e)
				}
			}
			return;
		},
		// 付款前未登录发起授权
		loginByPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				e.loginInfo = this.loginInfo
				User.getPhoneNumber(e);
			} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
				this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
			}
		},
		change(e) { },
		selected(item) {
			item.flag = !item.flag
			if (!item.flag) {
				this.allchecked = false
			} else {
				const a = this.goods.filter((item) => {
					return item.flag == true
				})
				if (a) {
					this.allchecked = true
				} else {
					this.allchecked = false
				}
			}
			uni.setStorageSync('shopCarInfo', this.goods);
		},
		selectgoods() {
			this.allchecked = !this.allchecked
			if (this.allchecked) {
				this.goods.map(item => {
					item.flag = true
				})
			} else {
				this.goods.map(item => {
					item.flag = false
				})
			}
			uni.setStorageSync('shopCarInfo', this.goods);
		},
		reduce(item, index) {
			item.num -= 1
			if (item.num == 0) {
				this.goods.splice(index, 1);
			}
			uni.setStorageSync('shopCarInfo', this.goods);
			$EventBus.$emit('updateCar');
		},
		add(item) {
			let s = 0;
			this.goods.forEach(function (val) {
				s += Number(val.num);
			}, 0);
			let countOfOrder = uni.getStorageSync('countOfOrder');
			console.log(s , countOfOrder)
			if (s >= countOfOrder) {
				this.showToast({
					title: '最多可一次购买'+countOfOrder+'杯',
					icon: 'none'
				});
				return;
			}
			let num = Number(item.num)
			item.num = num + 1
			uni.setStorageSync('shopCarInfo', this.goods);
			$EventBus.$emit('updateCar');
		}
	},
	computed: {
		userms() {
			return this.$store.getters.Authorization;
		},
		totalNum() {
			let totalNum = 0;
			this.goods.map(item => {
				item.flag ? totalNum += parseInt(item.num) : totalNum += 0
			})
			return totalNum
		},

		totalPrice() {
			let totalPrice = 0;
			this.goods.forEach(item => {
				const sku = item.sku;
				item.flag ? totalPrice += item.num * sku.discount : totalPrice += 0
			})
			return totalPrice
		}
	}
}

</script>

<style lang="scss">
.shopClassStyle {
	color: #000000;
	font-weight: bold;
	font-size: 32rpx;
	font-weight: 500;
	font-family: Futura-Medium, Futura;
	display: flex;
	margin-left: 38rpx;
	letter-spacing: 1px;
	align-items: center;
}

.shop-car {
	display: flex;
	flex-direction: column;
	height: 860rpx;

	.header {
		height: 88rpx;
		display: flex;
		border-bottom: 1px solid #ECECEC;

		.left {
			flex: 1;
			display: flex;
			align-items: center;
			padding-left: 31rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 31rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;

			.delete-icon {
				width: 18rpx;
				height: 18rpx;
				background: url(../../static/imgs/icon-delete.png) center center no-repeat;
				background-size: cover;
				display: inline-block;
				margin-right: 8rpx;
			}
		}
	}

	.container {
		flex: 1;
		overflow: auto;
	}
}

.goods {
	line-height: 80rpx;
	background-color: #FFFFFF;

	&-detail {
		display: flex;
		padding: 30rpx 26rpx 30rpx 32rpx;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;

		.detail-left {
			display: flex;
			height: 128rpx;
			align-items: center;
			justify-content: space-between;

			.goods-left {
				display: flex;
				align-items: center;
				.checkBox{
					margin-right: 32rpx;
					width: 40rpx;
					display: flex;
					align-items: center;
					height: 100%;

					.check{
						width: 100%;
						height: 40rpx;
					}

					.checked{
						background: url('../../static/imgs/duigouxuanzhong.png') center center no-repeat;
						background-size:100% 100%;
					}
					.nochecked{
						background: url('../../static/imgs/weixuanzhong.png') center center no-repeat;
						background-size:100% 100%;
					}
				}
			}
		}

		.size {
			margin-left: 30rpx;
			.goods-name{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				padding-top: 5rpx;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
			}

			.goods-skus {
				margin-top: 4rpx;
				height: 22rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 26rpx;
			}
			
			.goods-price {
				margin-top: 24rpx;

				.price-discount{
					height: 38rpx;
					font-size: 24rpx;
					font-family: Futura-Medium, Futura;
					font-weight: 500;
					color: #333333;
					line-height: 30rpx;
				}
				.price-x {
					margin-left: 6rpx;
					font-size: 20rpx;
					font-family: ArialMT;
					line-height: 22rpx;
					color: #999999;
				}

				.price-xx {
					text-decoration: line-through;
					height: 22rpx;
					font-size: 20rpx;
					font-family: ArialMT;
					color: #999999;
					line-height: 22px;
				}
				}


		}

		.detail-right {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			// text {
			// 	width: 40rpx;
			// 	line-height: 40rpx;
			// 	text-align: center;
			// 	display: inline-block;
			// 	margin-right: 10rpx;
			// 	color: #000000;
			// }
			.subtract {
				width: 40rpx;
				height: 40rpx;
				background: url('../../static/imgs/jianhao.png') center center no-repeat;
				background-size:100% 100%;
				
			}
			.num {
				height: 28rpx;
				font-size: 32rpx;
				font-family: ArialMT;
				color: #000000;
				line-height: 28rpx;
				margin-left: 26rpx;
				margin-right: 26rpx;
				font-weight: bold;
			}
			.add {
				width: 40rpx;
				height: 40rpx;
				background: url('../../static/imgs/jiahao.png') center center no-repeat;
				background-size:100% 100%;
			}
		}
	}
}

.empty {

	position: relative;
	top: 220rpx;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;

	&-text {
		color: #808080;
		margin-bottom: 50rpx;
	}

	&-button {
		width: 300rpx;
		height: 90rpx;
		color: orange;
		border: 1rpx solid orange;
		text-align: center;
		line-height: 90rpx;
		border-radius: 48rpx;
	}
}

.end {
	width: 100%;
	height: 92rpx;
	background-color: rgb(253, 253, 253);
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0px -4px 8px 0px rgba(102, 102, 102, 0.1);
	display: flex;
	z-index: 10075;
	align-items: center;

	&-left {
		width: 70%;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		.end-flex {
			display: flex;
			align-items: center;
		}

		.car-img {
			width: 45rpx;
			height: 54rpx;
			display: inline-block;
			background: url('../../static/imgs/gouwudai.png') center center no-repeat;
			background-size: cover;
			position: relative;

			.badge {
				position: absolute;
				height: 26rpx;
				font-family: Futura-Medium, Futura;
				background: #FF72C1;
				right: -16rpx;
				top: -4rpx;
				min-width: 26rpx;
				font-weight: 500;
				font-size: 20rpx;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;

			}
		}
	}

	&-right {
		width: 169rpx;
		font-size: 32rpx;
		line-height: 92rpx;
		background-color: #006ECF;
		text-align: right;
		color: #fff;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}
	.goSubmmit{
		background: url('../../static/imgs/fukuan.png') center center no-repeat;
		width: 200rpx;
		height: 100%;
	}
}
</style>