购物车 - 结算你的心仪商品

<template>
	<view>
		<view class="margin">
			<block v-for="(goods,index) in goodsList" :key="index">
				<view class="u-flex">
					<u-checkbox v-model="goods.is_checked" @change="changeChoose" shape="circle" :name="goods.id"></u-checkbox>
					<u-image width="100%" height="300rpx" :src="goods.goods.cover_url"></u-image>
					<view class="flex">
						<view class="flex-top">
							<text>{{goods.goods.title}}</text>
							<text>{{goods.goods.description}}</text>
						</view>
						<view class="u-flex">
							<text class="price">￥{{goods.goods.price}}</text>
							<u-number-box v-model="goods.num" :min="1" :max="100" :index="goods.id"
							@minus="minusNum" @plus="plusNum"></u-number-box>
							<u-icon name="trash" color="red" @click="removeCart(goods.id)"></u-icon>
						</view>
<pre><code>				&lt;/view&gt;
			&lt;/view&gt;
		&lt;/block&gt;
	&lt;/view&gt;
	
	
	&lt;view class=&quot;bottom&quot;&gt;
		&lt;u-checkbox v-model=&quot;isAllchecked&quot; shape=&quot;circle&quot; @change=&quot;changeAllBtn&quot;&gt;全选&lt;/u-checkbox&gt;
		&lt;text class=&quot;u-flex u-m-l-80&quot;&gt;合计： ￥ {{allMoney}}&lt;/text&gt;
		
			&lt;view class=&quot;u-m-r-40 1&quot;&gt;
				&lt;u-button shape=&quot;circle&quot; :custom-style=&quot;customStyle&quot; @click=&quot;toOrder&quot;&gt;去结算&lt;/u-button&gt;
			&lt;/view&gt;
		
	&lt;/view&gt;
	
&lt;/view&gt;
</code></pre>
</template>
<script>
	const that = this
	export default {
		data() {
			return {
				goodsList:[], // 渲染的数据列表
				// isAllchecked: false, //是否全选
				customStyle: {color: '#fff',backgroundColor: 'red'}, //去结算按钮的颜色样式
			}
		},
		onLoad(){
			this.getCartData()
		},
		computed: {
			// 计算总价
			 allMoney: function(){
				  return this.goodsList.reduce((prev,next)=> {
				 	return prev + next.is_checked * next.goods.price * next.num
				 },0)
			},
			isAllchecked: {
				get: function(){
					for(let i=0;i<this.goodsList.length;i++){
						if(this.goodsList[i].is_checked == false) return false 
					}
					return true
				},
				set: function(){
					
				}
			}
		},
		methods: {
			//获取渲染的列表
			async getCartData(){
				const cartData = await this.$u.api.cartDataList({include: 'goods'})
				console.log(cartData);
				const {data} = cartData			
				data.forEach((value,index,data) =>{
					data[index].is_checked = (data[index].is_checked == 1) ? true : false
					return data
				})
				this.goodsList = data
			},
			async minusNum(e){
				console.log(e);
				let cartId = e.index
				console.log(e.value);
				let params = {num: e.value}
				await this.$u.api.cartNumChange(cartId,params)
			},
			async plusNum(e){
				console.log(e);
				let cartId = e.index
				console.log(e.value);
				let params = {num: e.value}
				await this.$u.api.cartNumChange(cartId,params)
			},
			// 移除购物车的商品
			async removeCart(id){
				await this.$u.api.cartRemove(id)
				this.getCartData()
				this.$u.toast('删除成功')
			},
			// 改变商品选中后选择
			async changeChoose(e){
				const {name,value} = e // name为id value为true或者false
				for (let i = 0; i < this.goodsList.length; i++) {
					if(this.goodsList[i].id == name){
						this.goodsList[i].is_checked = !this.goodsList[i].is_checked
					}
				}
				let adArr = this.goodsList.filter(function (value){
					return value.is_checked == true
				})
				console.log(adArr);
				let newArr = []
				for (let i = 0; i < adArr.length; i++) {
					newArr.push(adArr[i].id)
				}
				console.log(newArr);
				await this.$u.api.cartChangeChosen({cart_ids: newArr})
				
				 
			},
			async changeAllBtn(e){
				const {name,value} = e
				if(value == false){
					for (let i = 0; i < this.goodsList.length; i++) {
						this.goodsList[i].is_checked = false
					}
					await this.$u.api.cartChangeChosen({cart_ids: []})
					this.getCartData()
				}else {
					for (let i = 0; i < this.goodsList.length; i++) {
						this.goodsList[i].is_checked = true
					}
					let newArr = []
					for (let i = 0; i < this.goodsList.length; i++) {
						newArr.push(this.goodsList[i].id)
					}
					await this.$u.api.cartChangeChosen({cart_ids: newArr})
					this.getCartData()
				}
				
			},
			toOrder(){
				this.$u.route({url: 'pages/cart/order'
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
.flex{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flex-top{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.price{
	color: red;
}
.bottom{
	display: flex;
	position: fixed;
	width: 100%;
	bottom: 100rpx;
	justify-content: space-between;
	background-color: #fff;
	
}
.margin{
	margin-bottom: 100rpx;
}
</style>