keysass_app/pages/shoppingtrolley/shoppingtrolley.vue

<template>
	<view>
		<view class="contendt">
			<!-- <view class="bureau">
				<img  src="http://image.bjkeyware.com/static/shopping/shop.png" alt="">
				<p>购物车竟然是空的</p>
				<view class="button-g" @click="toinde">去首页逛逛</view>@change="checkboxChange(item)"
			</view> -->
			<!-- <view></view>@change="checkboxChange(item)"-->
			<view v-if="cartrows&&cartrows.length>0">
				<checkbox-group @change="checkboxChange">
					<view class="catall" v-for="(item,key) of cartrows" :key="key" >
						<u-swipe-action :show="item.show" :index="key" @click="rightclick(item.toolId)" btn-width="150" @open="delopen"   :options="options">
							<view style="display: flex;align-items: center;justify-content: space-between;margin-left: 15px;">
								<checkbox  :value="item.name" :checked="item.isselect"  >
								</checkbox>
								<!-- @click="tooldetils(item.toolId)" -->
								<view  style="display: flex;justify-content: space-between;align-items: center;width:78vw;margin: 18px 10px 18px 0;">
									<img class="deyalimg" :src="item.imgs" alt="">
									<view style="color:#808080;font-size:22rpx;width:70%;margin-right:10px;">
										<p style="color: #1A1A1A;font-size:32rpx;font-weight: bold;margin:-3px 0 10px 0;">{{item.name}}</p>
										<view style="display: flex;margin:3px 0 10px 0;">
											<u-tag v-if="item.toolType==1" text="规格：按次" plain bgColor='transparent' style="margin-right:10px" size='mini'> </u-tag>
											<u-tag v-if="item.toolType==2" text="规格：按月" plain bgColor='transparent' style="margin-right:10px" size='mini'> </u-tag>
											<u-tag :text="'交付方式：'+item.deliverType" plain bgColor='transparent' type="warning" size='mini'> </u-tag>
										</view>
										<view style="display: flex;justify-content: space-between;">
											<p style="color: #FD461A;">
												<span style="font-size: 13px;">¥</span>
												<span style="font-size: 18px;">{{item.price}}</span>
											</p>
											<!-- <u-number-box v-model="item.amount" @change="valChange(item)"></u-number-box> -->
											<uni-number-box v-model="item.amount" :min="1" :max="999"  @change.stop="valChange(item)"  @minus.native.stop='minuschange(item,$event)' @plus.native.stop="pluschange(item,$event)"/>
										</view>
									</view>
								</view>
							</view>
						</u-swipe-action>
					</view>
				</checkbox-group>
				<view style="height:70px;"></view>
			</view>
			<view v-else class="bureau">
				<img  src="http://image.bjkeyware.com/static/shopping/shop.png" alt="">
				<p>购物车竟然是空的</p>
				<view class="button-g" @click="toinde">去首页逛逛</view>
			</view>
		</view>
		<view  v-if="cartrows.length>0" class="submitt">
			<checkbox-group @change="allcheckboxChange">
				<checkbox  :checked="allselect"  >全选</checkbox>
			</checkbox-group>
			<view style="display: flex;align-items: center;">
				<p>合计：</p>
				<p style="color: #FD461A;font-size: 18px;">¥{{allperice}}</p>
				<view class="button-g" style="width:25vw;" @click="popcilk('determine')">去下单</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartrows: [],
				cartnumber:'1',
				allselect:false,
				allperice:0,
				allselectdata:[],//当前选中的商品
				options: [
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d',
							// backgroundImage: 'url("/static/index/index.png")'
						}
					}
				]
			}
		},
		onShow() {
			let wxUserInfo = uni.getStorageSync('wxUserInfo');
			if(wxUserInfo){	
				this.getcartlist();
				// console.log('onShow')
			}else{
				this.cartrows=[]
			}
		},
	
		onLoad() {		
				this.getcartlist();
				// console.log('onLoad')
		},
		mounted() {
		    
		},
		methods: {
			//获取购物车数据
			getcartlist(){
				this.http.quickGet(`/my/shoppingCart`,true).then(res => {
				     console.log('购物车',res)
					 this.cartrows=res.data.rows
					 if(this.cartrows&&this.cartrows.length>0){
						 this.cartrows.forEach(item=>{
							   item.show=false
							if(item.name=='代码静态分析工具'){
								item.imgs='http://image.bjkeyware.com/static/index/11.png'
							}else if(item.name=='源代码安全检测工具'){
								item.imgs='http://image.bjkeyware.com/static/index/5.png'
							}else if(item.name=='C/C++单元测试工具'){
								item.imgs='http://image.bjkeyware.com/static/index/2.png'
							}else if(item.name=='接口测试工具'){
								item.imgs='http://image.bjkeyware.com/static/index/12.png'
							}else if(item.name=='JAVA单元测试工具'){
								item.imgs='http://image.bjkeyware.com/static/index/tool/1.png'
							}else if(item.name=='功能测试工具AutoFun'){
								item.imgs='http://image.bjkeyware.com/static/index/3.png'
							}else if(item.name=='代码组成分析平台'){
								item.imgs='http://image.bjkeyware.com/static/index/tool/4.png'
							}else if(item.name=='性能测试工具'){
								item.imgs='http://image.bjkeyware.com/static/index/6.png'
							}else if(item.name=='自鉴-交互式应用安全测试系统IAST'){
								item.imgs='http://image.bjkeyware.com/static/index/tool/3.png'
							}else if(item.name=='Web应用安全测试工具'){
								item.imgs='http://image.bjkeyware.com/static/index/tool/2.png'
							}else if(item.name=='资产识别及漏洞管理工具'){
								item.imgs='http://image.bjkeyware.com/static/index/zc.png'
							}else if(item.name=='性能测试工具AutoLoad'){
								item.imgs='http://image.bjkeyware.com/static/index/xn.png'
							}
						 })
						 this.getallperice();
					 }
				 }) 
			},
			//打开右滑动框显示删除功能
			delopen(index){
				console.log('odc---',index)
				this.cartrows[index].show = true;
				this.cartrows.map((val, idx) => {
					console.log('idx---',idx)
					if(index != idx){
						this.cartrows[idx].show = false;
					} 
				
					this.cartrows= JSON.parse(JSON.stringify(this.cartrows));
					
				})
				console.log('this.cartrows---',this.cartrows)
			},
			// 删除功能
			rightclick(index){
				console.log('index---',index)
				this.http.quickDelete(`/my/shoppingCart/${index}`,true).then(res=>{
					 console.log('购物车删除',res)
					 this.getcartlist();
				})
			},
			//跳转商品详情页
			tooldetils(id){
				uni.showToast({ title: '该功能开发中', icon: 'none', duration: 1000 });
				// uni.navigateTo({
				// 	url: `/pages/index/toolleasing/tooldetails?id=${id}`
				// })
			},
			toinde(){
				uni.switchTab({
					url: '../index/index'
				})
			},
			// 单个选择的按钮
			checkboxChange(e) {
				this.allperice=0
			    // console.log('change',e,this.cartrows);
				var items = this.cartrows,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.name)){
						this.$set(item,'isselect',true)
					}else{
						this.$set(item,'isselect',false)
					}
				}
				
				console.log('合计：---，',this.allperice)
				//  商品是否全部勾选，判断全选与否状态
				var offcartrows = []
				this.cartrows.forEach(item => item.isselect == true? offcartrows.push(item): '')
				// let allChecks = offcartrows.every(item => item.isselect == true) 
				// if(offcartrows.length>0){
				// 	 offcartrows.forEach(items=>{
				// 		 this.allperice+=parseFloat(items.price*items.amount) 
				// 	 })
				// }
				console.log('当前勾选的---，',offcartrows)
				this.allselectdata=offcartrows
				this.getallperice();
				if(offcartrows.length==this.cartrows.length){
					this.allselect=true
				}else{
					this.allselect=false
				}
				
			},
			// 全选按钮
			allcheckboxChange(e){
				console.log('全选',e,this.cartrows)
				this.allperice=0
				if(e.detail.value.length == 0){
					this.cartrows.map(item => this.$set(item, 'isselect', false))
					this.allselect=false
					this.allselectdata=[]
				}else{
					this.cartrows.map(item => this.$set(item, 'isselect', true))
					this.allselect=true
					this.allselectdata=this.cartrows
					this.cartrows.forEach(item=>{
						this.allperice+=parseFloat(item.price*item.amount) 
					})
				}
				
				console.log('总价',this.allperice)
			},
			//计算总价
			getallperice(){
				// console.log('当前所选',this.allselectdata)
				
				this.allselectdata.forEach(items=>{
					this.allperice+=parseFloat(items.price*items.amount) 
				})
			},
			//-号按钮
			minuschange(item,e){
				if(item.amount==1){
					console.log('您好数量不能在减少了')
					uni.showToast({ title: '您好数量不能在减少了', icon: 'none', duration:3000 });
				}
				if(item.isselect){
					this.allperice-=item.price
				}
				
				// console.log('-号按钮: ',item,e)
				
			},
			//+号按钮
			pluschange(item,e){
				if(item.isselect){
					this.allperice+=item.price
				}
				// console.log('+号按钮: ',item,e,this.allselectdata)
				// 购物车加减号的时候需要新增一个修改当前商品数量的接口
			},
			//加减框输入值的方法
			valChange(val){
				this.allperice=0
				// console.log('val: ',val,)
				if(val.isselect){
					// console.log('输入框事件---',this.allselectdata)
					this.allselectdata.forEach(items=>{
						this.allperice+=parseFloat(items.price*items.amount) 
					})
				}
				
			},
			popcilk(){
				console.log('this.allselectdata--',this.allselectdata)
				if(this.allselectdata.length==0){
					this.$refs.uToast.show({
						title: '请选择要下单的商品',
						type: 'warning',
						duration: 2000,
					})
					return;
				}else{
					this.$refs.uToast.show({
						title: '功能暂未开放',
						type: 'info',
						duration: 2000,
					})	
				}
			}
		}
	}
</script>

<style>
	.contendt{
		width:100vw;
		padding: 13px;
		/* margin:16px 5vw 20px 5vw; */
	}
	.bureau{
		width: 49%;
		/* height: 210rpx; */
		border-radius: 10rpx;
		text-align: center;
		padding: 10px 5px;
		margin: 23vh auto;
	}
	.bureau img{
		width:28vw;
		height:28vw;
		margin:10px auto;
	}
	.bureau p{	
		font-size:30rpx;
		color: #969494;
		margin:10px 0 15px 0px
	}
	.button-g{
		width:280rpx;
		height:75rpx;	
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius:43rpx;
		text-align: center;
		line-height:75rpx;
		color: #FFFFFF;
		font-size: 33rpx;
		margin-left:13px;
	}
	.catall{
		width: 100%;
		/* height: 20vw; */
		background: #FFFFFF;
		border-radius: 10rpx;
		/* padding:35rpx 25rpx; */
		
		margin-bottom: 20px;
	}
	.deyalimg{
		width: 15vw;
		height: 15vw;
		margin: 0 7px;
	}
	.submitt {
		height:70px;
		/* font-size: 20px; */
		background: #FFFFFF;
		box-shadow: -4px 7px 18px 0px rgba(248, 164, 54, 0.33);
		margin-top:60px;
		position: fixed;
		bottom: 0;
		width: 100vw;
		padding: 10px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99;
	}
	/* .u-checkbox__label{
		margin-right: 0;
	} */
	checkbox .wx-checkbox-input {
		width: 30rpx;
		height: 30rpx;
		/* border-radius: 50%; */
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	  background: #1578ED;
	  border-color:transparent;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	  width: 20rpx;
	  height: 20rpx;  
	  line-height: 20rpx;
	  text-align: center;
	  font-size: 22rpx;
	  color: #FFFFFF;
	  background: transparent;
	  transform: translate(-50%, -50%) scale(1);
	  -webkit-transform: translate(-50%, -50%) scale(1);
	}

</style>