kailin_mp/pages/car/index.vue

<template>
	<view>
		<view class="to_bottom" v-if="!cartList.length"> -----还没有产品啦-----</view>
		<view class="car_list">
			<view class="car_item" @longpress="deleteCar(index)" v-for="(item,index) in cartList" :key="index">
				<view class="check_label"  @click="checkedItem(index)" >
					<image class="checkbox" :src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'"></image>
				</view>
				<view class="box_left">
					<navigator :url="'/pages/product/index?product_id='+item.product_id" >
						<image class="car_image" :src="item.thumb" mode=""></image>
					</navigator>
				</view>
				<view class="box_center">
					<navigator :url="'/pages/product/index?product_id='+item.product_id" class="car_name">{{item.name}}</navigator>
					<navigator :url="'/pages/product/index?product_id='+item.product_id" class="car_spec">{{item.spec}}</navigator>
					<navigator :url="'/pages/product/index?product_id='+item.product_id"  class="car_price">
						<text class="price">￥{{item.price}}</text>
						<text class="market_price">￥{{item.market_price}}</text>
					</navigator>
				</view>
				<view class="box_right">
					<view class="buy_num_box">
						<button class="buy_num_sub" @click="changeQuantity(index,-1)" data-eventsync="true">
							<image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
						</button>
						<input type="number" class="buy_num" placeholder="数量" v-model="item.buy_num" @blur="changeQuantity(index,0)" ></input>
						<button class="buy_num_add" @click="changeQuantity(index,+1)" data-eventsync="true">
							<image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="to_bottom" > -----到底啦-----</view>
		<view class="bottom_box">
			<view class="check_all_label" @click="checkAll()">
				<image class="checkbox" :src="checkedAll?'../../static/icon/checked.png':'../../static/icon/checkbox.png'" ></image>
				<text class="checkall">全选</text>
			</view>
			<view class="price_box">
				合计：<text class="price_total">￥{{priceTotal}}</text>
			</view>
			<view class="to_order" @click="toOrder()" >预约</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 购物车列表
				cartList:[],
				// 请求参数
				requestParam:{},
				// 是否全选
				checkedAll:false,
				// 总价
				priceTotal:'0.00',
				// 是否请求中
				isReqing:false,
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShow() {
			// 登录提示
			if( !this.$checkAccess.alterLogin() )  return ;
			// 请求中，不允许刷新
			if( this.isReqing )		return ;
			// 设置请求中
			this.isReqing			= true;
			// 非全选
			this.checkedAll			= 0;
			// 请求列表
			this.$http.request('api/shop_cart/get_list',this.requestParam).then((re)=>{
				// 设置非请求中
				this.isReqing		= false;
				// 成功结果
				if( re.code == 'success' ){
					// 赋值
					this.cartList = re.data;
					// 计算价格
					this.priceHandler();
				}
			});
		},
		onPullDownRefresh() {
			// 登录提示
			if( !this.$checkAccess.alterLogin() )  return ;
			// 请求列表
			this.$http.request('api/shop_cart/get_list',this.requestParam).then((re)=>{
				if( re.code == 'success' ){
					// 赋值
					this.cartList = re.data;
					// 计算价格
					this.priceHandler();
				}
			});
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			
		},
		methods: {
			// 数量调整
			changeQuantity(index,number){
				// 如果不是0.表示两侧按钮点击，0表示输入的修改
				if( number != 0 ) {
					// 计算个数
					this.cartList[index].buy_num = this.cartList[index].buy_num + number;
				}
				// 如果大于库存
				if( this.cartList[index].buy_num > this.cartList[index].stock ) {
					// 设置为库存
					this.cartList[index].buy_num = this.cartList[index].stock;
					// 提示
					uni.showToast({
						title:"购买数量不能大于库存",
						icon:"none",
					})
					return ;
				}
				// 如果小于1.设置为1
				if( this.cartList[index].buy_num < 1 ) {
					// 恢复1
					this.cartList[index].buy_num = 1;
					// 提示
					uni.showToast({
						title:"数量不可小于1",
						icon:"none",
					})
					return ;
				}
				// 请求列表
				this.$http.request('api/shop_cart/edit',{id:this.cartList[index].id,buy_num:this.cartList[index].buy_num}).then((re)=>{
					if( re.code == 'success' ){
						// 计算价格
						this.priceHandler();
					}else{
						uni.showToast({
							title: re.msg,
							icon:"none"
						})
					}
				});
			},
			// 删除购物车
			deleteCar(index){
				uni.showModal({
					title:"是否删除？",
					success: (re) => {
						if(re.confirm){
							// 请求列表
							this.$http.request('api/shop_cart/del',{id:this.cartList[index].id}).then((re)=>{
								// 如果删除成功的话
								if( re.code == 'success' ){
									this.cartList.splice(index,1);
									// 计算价格
									this.priceHandler();
								}
							});
						}
					}
				})
			},
			checkedItem(index){
				// 默认全选
				let checkedAll = 1;
				// 单个设置选中/未选
				this.cartList[index].checked = this.cartList[index].checked ? 0 : 1;
				// 循环处理
				for (let i in this.cartList) {
					// 有未选的就不做全选
					if( !this.cartList[i].checked ) checkedAll = 0;
				}
				// 全选赋值
				this.checkedAll  = checkedAll;
				// 计算价格
				this.priceHandler();
			},
			checkAll(){
				// 设置全选/单选
				this.checkedAll  = this.checkedAll ? 0 : 1;
				// 循环处理
				for (let index in this.cartList) {
					this.cartList[index].checked = this.checkedAll;
				}
				// 计算价格
				this.priceHandler();
			},
			priceHandler(){
				// 总价格
				let priceTotal 	= 0;
				// 循环处理
				for (let index in this.cartList) {
					// 如果选中的
					if( this.cartList[index].checked ){
						priceTotal = this.$decimal.add(priceTotal,this.$decimal.mul(this.cartList[index].price,this.cartList[index].buy_num));
					}
				}
				// 小数点处理
				this.priceTotal = priceTotal.toFixed(2);
			},
			toOrder(){
				// 等待支付的信息
				let waitList = [];
				// 循环处理
				for (let index in this.cartList) {
					// 如果选中的
					if( this.cartList[index].checked ){
						// 如果库存不足
						if( this.cartList[index].buy_num < 1 ){
							uni.showToast({icon:"none",title:"选择的产品至少需要1个"})
							return ;
						}
						// 如果库存不足
						if( this.cartList[index].buy_num > this.cartList[index].stock  ){
							uni.showToast({icon:"none",title:"产品库存不足"})
							return ;
						}
						waitList.push(this.cartList[index].id);
					}
				}
				// 如果没有选择
				if( !waitList.length ) {
					uni.showToast({icon:"none",title:"请选择需要结算的产品"})
					return ;
				}
				// 如果没有选择
				if( waitList.length > 99 ) {
					uni.showToast({icon:"none",title:"这么多产品一个预约单写不下哦"})
					return ;
				}
				uni.navigateTo({
					url:"/pages/car/order?cart_ids="+waitList.join(',')
				})
			}
		}
	}
</script>

<style lang="less">
	.car_list{
		display: block;
		overflow: hidden;
		margin: 0rpx auto;
		margin-top: 20rpx;
		.car_item{
			height: 180rpx;
			display: block;
			background: #FFFFFF;
			margin: 0rpx auto;
			margin-bottom: 20rpx;
			padding: 20rpx 0rpx;
			.check_label{
				float: left;
				width: 40rpx;
				height: 40rpx;
				display: block;
				margin-top: 10rpx;
				padding: 50rpx 20rpx;
				.checkbox{
					float: left;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.box_left{
				float: left;
				width: 140rpx;
				height: 200rpx;
				margin-top: 10rpx;
				.car_image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 5rpx;
				}
			}
			.box_center{
				float: left;
				width: 300rpx;
				margin-left: 25rpx;
				.car_name{
					max-height: 80rpx;
					font-size: 30rpx;
					line-height: 50rpx;
					overflow: hidden;
				}
				.car_spec{
					color: #999999;
					font-size: 24rpx;
					max-height: 60rpx;
					line-height: 60rpx;
					overflow: hidden;
				}
				.car_price{
					font-size: 30rpx;
					line-height: 60rpx;
					.price{
						color: red;
					}
					.market_price{
						font-size: 24rpx;
						color: #999999;
						margin-left: 10rpx;
						padding-left: 10rpx;
						text-decoration: line-through;
						border-left: 2rpx solid #DDDDDD;
					}
				}
			}
			.box_right{
				float: right;
				width: 185rpx;
				.buy_num_box{
					float: right;
					color: #333333;
					overflow: hidden;
					font-size: 24rpx;
					margin-top: 70rpx;
					text-align: center;
					.buy_num_sub{
						float: left;
						border: none;
						height: 36rpx;
						background: none;
						text-align: center;
						line-height: 36rpx;
						padding: 10rpx 10rpx;
						.sub_icon{
							width: 22rpx;
							height: 22rpx;
							display: block;
						}
					}
					.buy_num_sub::after{
						border: none;
						background: none;
					}
					.buy_num{
						float: left;
						width: 90rpx;
						height: 36rpx;
						font-size: 24rpx;
						min-height: 36rpx;
						line-height: 36rpx;
						padding: 0rpx 0rpx;
						border-radius: 8rpx;
						border: 2rpx solid #dddddd;
					}
					.buy_num_add{
						float: left;
						border: none;
						height: 36rpx;
						background: none;
						text-align: center;
						padding: 10rpx 10rpx;
						line-height: 36rpx;
						.add_icon{
							width: 22rpx;
							height: 22rpx;
							display: block;
						}
					}
					.buy_num_add::after{
						border: none;
						background: none;
					}
				}
			}
		}
	}
	.bottom_box{
		left: 0rpx;
		width: 100%;
		height: 100rpx;
		display: block;
		position: fixed;
		overflow: hidden;
		background: #FFFFFF;
		padding: 0rpx 35rpx;
		bottom: var(--window-bottom);
		.check_all_label{
			float: left;
			width: 120rpx;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			padding: 30rpx 0rpx;
			.checkbox{
				float: left;
				width: 40rpx;
				height: 40rpx;
			}
			.checkbox.active{
				border: 2rpx solid red;
				.checkbox_active{
					background-color: #E03519;
				}
			}
			.checkall{
				float: left;
				height: 40rpx;
				display: block;
				margin-left: 10rpx;
				line-height: 40rpx;
			}
		}
		.price_box{
			float: left;
			width: 400rpx;
			display: block;
			color: #666666;
			font-size: 26rpx;
			text-align: right;
			line-height: 100rpx;
			margin-right: 20rpx;
			.price_total{
				color: red;
				font-size: 30rpx;
			}
		}
		.to_order{
			float: left;
			width: 140rpx;
			height: 60rpx;
			display: block;
			color: #FFFFFF;
			font-size: 28rpx;
			margin-top: 20rpx;
			line-height: 60rpx;
			padding: 0rpx 0rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #E03519;
		}
	}
</style>