xiongmao/pages/shopping-cart/shopping-cart1.vue

<!-- 购物车 -->
<template>
	<view class="container">
		<view class="discount-box" v-if="discountstate == true">
			<view class="discount">
				<view class="discount-off" @click="discountclose">×</view>
				<view class="discount-title">金额明细</view>
				<view class="discount-tips">实际优惠金额以下单页为准</view>
				<view class="discount-list">
					<text>商品总价</text>
					<text>￥1200</text>
				</view>
				<view class="discount-list2">
					<text>满减</text>
					<text>-￥200</text>
				</view>
				<view class="discount-list2">
					<text>优惠券</text>
					<text>-￥200</text>
				</view>
				<view class="discount-list2">
					<text>共减</text>
					<text>-￥200</text>
				</view>
				<view class="discount-list">
					<text>合计(合计金额不含运费、进口税)</text>
					<text>￥1200</text>
				</view>
			</view>
		</view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>

		<view class="page-header">
			<view class="text-center">购物车</view>
			<block v-if="cartList.length > 0">
				<view class="edit" v-if="btnType === 'edit'" @click="$u.throttle(btnTool('edit'), 2000)">管理</view>
				<view class="edit" v-if="btnType === 'done'" @click="$u.throttle(btnTool('done'), 2000)">完成</view>
			</block>
		</view>
		<view class="tips-box">
			<view>限时30元购物券免费领，一人一次限领一张</view>
			<view class="tips-del">×</view>
		</view>
		<!-- <u-checkbox-group> -->
		<view class="cart-box" v-if="cartList.length > 0">
			<u-swipe-action :show="item.show" :disabled="swipeAction" btn-width="160" :index="index"
				v-for="(item, index) in cartList" :key="item._id"
				@click="$u.throttle(actionClick($event, item._id), 2000)" @open="actionOpen" :options="options"
				class="card-warp">
				<view class="item u-border-bottom">
					<u-checkbox-group @change="checkboxChange" width="36rpx">
						<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#F2501A"
							class="checkbox"></u-checkbox>
						<view class="shop-title">店铺名称</view>
					</u-checkbox-group>

				</view>
				<view class="item u-border-bottom">
					<u-checkbox-group @change="checkboxChange" width="36rpx">
						<u-checkbox v-model="item.check" size="36" shape="circle" active-color="#F2501A"
							class="checkbox"></u-checkbox>
					</u-checkbox-group>
					<view class="cart-img">
						<image mode="widthFix" :src="item.product.image"
							@click.stop="$u.throttle(gotoDetail(item.product._id), 2000)"></image>
					</view>
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap" @click.stop="$u.throttle(gotoDetail(item.product._id), 2000)">
						<view class="title u-line-1 ">{{ item.product.title }}</view>

						<view class="sku">{{ item.product.cate_name }}</view>
						<view class="price">
							¥{{ priceInt(item.product.price) }}.{{ priceDecimal(item.product.price) }}
							<del>10.0</del>
						</view>

					</view>
					<u-number-box v-model="item.product.number" :min="1" :max="item.product.stock" input-width="100"
						input-height="50" @change="valChange($event, item.product._id)"></u-number-box>
				</view>
			</u-swipe-action>
		</view>
		<view class="page-box" v-else>
			<view>
				<view class="emputy">
					<image src="../../static/normal-1.png"></image>
					<view class="explain">
						<view class="tips">暂无购物车</view>
					</view>
					<view class="btn" @click="$u.throttle(gotoHome, 2000)">去逛逛</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="cartList.length > 0">
			<u-checkbox @change="checkedAll" v-model="checked" size="40" shape="circle" active-color="#F2501A"
				class="checkall"><span>全选</span></u-checkbox>
			<text class="price fill" v-if="btnType === 'edit'">
				<view>
					<text class="sml">总计(不含运费):</text>
					￥{{ totalPrice }}
				</view>
				<view class="discount-but" v-if="totalPrice != 0" @click="discount">
					<text>共优惠20.00元 查看明细</text>
					<image src="../../static/normal-1.png"></image>
				</view>
			</text>
			<u-button throttle-time="2000" v-if="btnType === 'edit'" @click="$u.throttle(btnClick('order'), 2000)"
				size="medium" :ripple="true" ripple-bg-color="#F2501A" shape="circle" :customStyle="customStyle">
				<text>
					<text v-if="this.discountstate == false">结算</text>
					<text v-else @click="discountclose">领卷结算</text>
				</text>
				<text v-if="totalCount > 0">{{ '(' + totalCount + ')' }}</text>
			</u-button>
			<u-button throttle-time="2000" v-if="btnType === 'done'" size="medium" :ripple="true" ripple-bg-color="#ccc"
				shape="circle" :customStyle="customStyle3" @click="$u.throttle(btnClick('del'), 2000)">
				移入收藏夹
			</u-button>
			<u-button throttle-time="2000" v-if="btnType === 'done'" size="medium" :ripple="true" ripple-bg-color="#ccc"
				shape="circle" :customStyle="customStyle2" @click="$u.throttle(btnClick('del'), 2000)">
				删除
			</u-button>
		</view>
		<u-modal v-model="showModal" :title="title" :content="content" :title-style="titleStyle"
			:content-style="contentStyle" :confirm-style="confirmStyle" :show-cancel-button="true" @confirm="confirm">
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import sortdata from '../../static/data/cartData.js';
	 import uswipeaction from "@/uview-ui/components/u-swipe-action/u-swipe-action.vue";
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				cartList: [], //购物车列表
				showModal: false, //modal弹窗
				title: '提示', //弹窗标题
				content: '确认将1个宝贝删除?', //弹窗内容
				delId: '', //删除id,
				options: [{
					text: '移入收藏夹',
					style: {
						backgroundColor: '#F28A1A'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#F2501A'
					}
				}], //u-swipe-action样式 
				btnType: 'edit', //按钮类型
				checked: false, //是否全选
				swipeAction: false, //是否禁止滑动
				// u-button样式
				customStyle: {
					color: '#fff',
					backgroundColor: '#F2501A',
					margin: '0',
					padding: '0 20rpx',
					width: '200rpx',
					fontSize: '32rpx'
				},
				customStyle2: {
					color: '#F2501A',
					backgroundColor: '#fff',
					margin: '0',
					padding: '0 20rpx',
					border: 'none',
					width: '200rpx',
					fontSize: '32rpx'
				},
				customStyle3: {
					color: '#F28A1A',
					backgroundColor: '#fff',
					margin: '10rpx',
					padding: '0 10rpx',
					border: 'none',
					width: '200rpx',
					fontSize: '30rpx'
				},
				// 模态窗样式
				titleStyle: {
					fontSize: '36rpx'
				},
				contentStyle: {
					fontSize: '36rpx'
				},
				confirmStyle: {
					color: '#fff',
					backgroundColor: '#F2501A'
				},
				discountstate: false //优惠页面状态true打开 false关闭
			};
		},
		onShow() {
			this.checked = false;
			this.getCart();
			console.log(this.cartList);
		},
		computed: {
			// 价格合计
			totalPrice() {
				let sumPrice = 0,
					items = this.cartList;
				items.forEach(val => {
					let priceVal = parseFloat(val.product.price),
						salesVal = parseFloat(val.product.number);
					if (val.check) {
						sumPrice += priceVal * salesVal;
					}
				});
				// sumPrice = sumPrice == 0 ? 0 : sumPrice.toFixed(2);
				let tofixNum = sumPrice.toFixed(2);
				return parseFloat(tofixNum);
			},
			// 数量统计
			totalCount() {
				let totalNumber = 0,
					items = this.cartList;
				items.forEach(val => {
					if (val.check) {
						totalNumber += val.number;
					}
				});
				return totalNumber;
			},
			// 价格整数
			priceInt() {
				return val => {
					let priceStr = val.toString();
					if (priceStr != parseInt(priceStr)) {
						return priceStr.split('.')[0];
					} else {
						return priceStr;
					}
				};
			},
			// 价格小数
			priceDecimal() {
				return val => {
					let priceStr = val.toString();
					if (priceStr != parseInt(priceStr)) {
						return priceStr.split('.')[1];
					} else {
						return '00';
					}
				};
			}
		},
		methods: {
			//打开优惠页面
			discount() {
				this.discountstate = true
			},
			//关闭优惠页面
			discountclose() {
				this.discountstate = false
			},
			// 购物车列表
			getCart() {
				const resData = sortdata.cartData;
				resData.forEach(val => {
					val.show = false;
					val.check = false;
				});
				this.cartList = resData;
			},
			gotoHome() {
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				});
			},
			// 管理按钮
			btnTool(type) {
				switch (type) {
					case 'edit':
						this.btnType = 'done';
						this.swipeAction = true;
						let items = this.cartList;
						items.forEach(val => {
							val.show = false;
						});
						break;
					case 'done':
						this.btnType = 'edit';
						this.swipeAction = false;
						break;
				}
			},
			// 删除
			actionClick(index, del) {
				this.showModal = true;
				this.delId = del;
			},
			// 删除确认
			confirm() {
				let _self = this;
				let delArr = [],
					type = _self.btnType,
					items = _self.cartList;
				if (type === 'edit') {
					delArr.push(_self.delId);
				} else {
					items.forEach(val => {
						if (val.check) {
							delArr.push(val._id);
						}
					});
					_self.btnType = 'edit';
				}

				// 为了模拟清空购物车
				if (delArr.length == items.length) {
					_self.cartList = [];
				}

				_self.$refs.uToast.show({
					title: '删除了id为' + delArr + '的商品',
					icon: false
				});
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			actionOpen(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				let items = this.cartList;
				items[index].show = true;
				items.forEach((val, idx) => {
					if (index != idx) {
						items[idx].show = false;
					}
				});
			},
			// 跳转详情
			gotoDetail(id) {
				console.log(id);
				// uni.navigateTo({
				//     url: '/pages/good/detail?good_id=' + id
				// })
			},
			// 选中商品
			checkboxChange(e) {
				let items = this.cartList;
				let checkedArr = [];
				items.forEach(val => {
					if (val.check) {
						checkedArr.push(val);
					}
				});
				let len = checkedArr.length;
				// 如果选择的数组中有值，并且长度等于列表长度，就是全选
				if (len > 0 && len == items.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			// 数量增减
			valChange(e, id) {
				// console.log(e, id);
			},
			// 全选
			checkedAll() {
				this.checked = !this.checked;
				let flag = this.checked,
					items = this.cartList;
				items.forEach(val => {
					if (flag) {
						val.check = true;
					} else {
						val.check = false;
					}
				});
			},
			// 结算
			btnClick(type) {
				let _self = this;
				switch (type) {
					case 'order':
						let items = _self.cartList;
						let checkedArr = [];
						items.forEach(val => {
							if (val.check) {
								checkedArr.push(val._id);
							}
						});
						let shopIds = checkedArr.toString();
						if (!shopIds) {
							_self.$refs.uToast.show({
								title: '请选择要结算的商品!',
								icon: false
							});
							return;
						}
						console.log(shopIds);
						// uni.navigateTo({
						//     url: '/pages/order/createOrder?cartId=' + shopIds
						// });
						break;
					case 'del':
						if (!_self.totalCount) {
							_self.$refs.uToast.show({
								title: '请选择要删除的商品!',
								icon: false
							});
							return;
						}
						_self.showModal = true;
						break;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F2F2;
	}

	// 状态栏占位
	.status_bar {
		background-color: #F2501A;
	}

	.page-header {
		padding: 26rpx 30rpx;
		display: flex;
		position: relative;
		color: #000;
		font-size: 36rpx;
		background-color: #fff;

		.text-center {
			width: 100%;
			text-align: center;
		}

		.edit {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 30rpx;
			font-size: 32rpx;
		}
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		align-items: center;

		.cart-img {
			width: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;

			image {
				width: 100%;
			}
		}

		.title-wrap {
			width: 440rpx;

			.sku {
				margin: 20rpx 0;
				font-size: 28rpx;
				color: #666;
			}

			.price {
				font-size: 32rpx;
				color: #F2501A;

				.large {
					margin-left: 6rpx;
					font-size: 40rpx;
					font-weight: bold;
				}

				del {
					margin-left: 10rpx;
					color: #919191;
					font-size: 24rpx;

				}
			}

			.clamp {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

			.title {
				text-align: left;
				font-size: 30rpx;
				color: #333;
				// margin-top: 20rpx;
				line-height: 46rpx;
			}
		}

		.u-numberbox {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
		}
	}

	// emputy
	.emputy {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 582rpx;
			height: 370rpx;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #F2501A;
			font-size: 26rpx;
			border: 1px solid #F2501A;
		}
	}

	.bottom {
		border-radius: 100rpx;
		background-color: #F8F9FC;
		padding: 0 20rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: var(--window-bottom);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		z-index: 99;
		height: 110rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.checkall {
			position: absolute;
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);

			span {
				color: #000;
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.price {
			margin-right: 20rpx;
			color: #F2501A;
			font-size: 26rpx;

			.sml {
				margin-right: 10rpx;
				color: #202020;
				font-size: 30rpx;
			}

		}
	}

	.tips-box {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 20rpx;
		background-color: #FFF0C7;
		color: #F2501A;
		margin-bottom: 40rpx;
	}

	.tips-del {
		font-size: 50rpx;
	}

	.card-warp {
		margin-top: 20rpx;
	}

	.shop-title {
		margin: 5rpx 0rpx 0 10rpx;
		font-weight: bold;
	}

	.discount-but {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	// 金额明细
	.discount-box {
		width: 100%;
		min-height: 87vh;
		background-color: rgba(0, 0, 0, 0.2);
		position: fixed;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: flex-end;
	}

	.discount {
		width: 100%;
		height: 450rpx;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.discount-off {
			width: 100%;
			color: #777777;
			font-size: 60rpx;
			height: 30rpx;
			display: flex;
			justify-content: flex-end;
			margin-right: 10rpx;
		}

		.discount-title {
			color: #202020;
			font-size: 32rpx;
		}

		.discount-tips {
			color: #A7A7A7;
			margin-top: 10rpx;
		}

		.discount-list,
		.discount-list2 {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15rpx;

			text:last-child {
				font-weight: bold;
			}
		}

		.discount-list2 {
			text:last-child {
				color: #F2501A;
			}

		}
	}
</style>