mplace_source/pages/goods/my_cart.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor='bg-white' @rightTap="barEditTap">
			<block slot="content">购物车</block>
			<!-- <block slot="right">
				<text v-if="goods_checked">完成</text>
				<text v-else>编辑</text>
			</block> -->
		</bar-title>
		
		<view class="bg-white zaiui-cart-list-view">
			<block v-for="(items,indexs) in cartList" :key="items.id">
				<view class="light goods-list-item-view">
					<checkbox class='round red sm zaiui-checked' :class="items.status == 1?'checked':''" 
					:checked="items.status == 1?true:false" :data-item="items" @click="CheckboxChange" />
					<view class="cu-avatar radius lg" :style="[{backgroundImage:'url('+ items.pic +')'}]"/>
					<view class="goods-info-view">
						<view class="text-cut text-black">{{items.name}}</view>
						<view class="text-sm text-gray">{{items.sku_name}}</view>
						<view class="zaiui-tag-view">
							<text class="cu-tag line-red sm radius" v-if="items.tag">{{items.tag}}</text>
						</view>
						<view class="goods-price-view">
							<view class="text-price-view">
								<text class="text-price text-red text-lg">{{items.price.value}}</text>
								<text class="cu-tag bg-red sm radius" v-if="items.price_tag">{{items.price_tag}}</text>
							</view>
							<view class="step-btn-view">
								<button class="zaiui-btn text-gray" @click="handleCartNum" :data-item="items" :data-plus="-1" >-</button>
								<input class="zaiui-input" type='number' :value="items.num" @blur="handleCartNum" :data-item="items" :data-plus="0"></input>
								<button class="zaiui-btn" style="line-height: 44upx;" @click="handleCartNum" :data-item="items" :data-plus="1" >+</button>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!--占位底部距离-->
		<view class="cu-tabbar-height"/>
		
		<!--底部操作-->
		<view class="bg-white zaiui-footer-fixed zaiui-foot-padding-bottom">
			<view class="cu-bar padding-lr">
				<view class="checked-view" @tap="tapChecked"> 
					<!-- <checkbox class='round red sm zaiui-checked' :class="checkAll?'checked':''" :checked="checkAll"></checkbox>
					<text class="text-black text-lg text-bold">全选</text> -->
				</view>
				<view class="price-view" style="padding-left: 0;">
					<view class="text-black text-bold">合计：￥{{totalInfo.price}}</view>
					<view class="text-sm">总额:￥{{totalInfo.price}} 优惠:￥0.00</view>
				</view>
				<view class="btn-view">
					<button class="cu-btn radius bg-red" @tap="tapBtn">去结算({{totalInfo.count}})</button>
				</view>
			</view>
		</view>
		
		<!--小程序端显示-->
		<!-- #ifdef MP -->
			<!--编辑-->
			<view class="zaiui-add-btn-view-box" @tap="barEditTap">
				<button class="cu-btn cuIcon-check bg-red" v-if="goods_checked"></button>
				<button class="cu-btn cuIcon-write bg-red" v-else></button>
			</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	
	import _my_cart_data from '@/static/zaiui/data/my_cart.js';	//虚拟数据
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle,
		},
		data() {
			return {
				cartList: [], checkAll: false, goods_checked: false,
			}
		},
		onLoad() {
			// this.goodsList = _my_cart_data.goodsListData();
			this.loadCartList()
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		computed: {
			totalInfo() {
				if(!this.cartList.length) {
					return 0
				}
				
				return this.cartList.filter(item => item.status == 1).reduce((prev, curr) => {
					let count = prev.count + curr.num
					let price = prev.price + curr.price.value
					
					return {
						count,
						price
					}
				}, {
					count: 0,
					price: 0
				})
				
			}
		},
		methods: {
			loadCartList() {
				this.reqByuser({
					url: '?l=cart.list', 
					data: {},
					success: res => {
						if(res.data.status == 1) {
							// console.log(res.data.data)
							// this.cartInfo = res.data.data.info;
							this.cartList = res.data.data.list
							// this.checkAll = !this.cartList.find(item => item.status != 1)
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			handleCartNum(e) {
				let {info_id, sku_id, num} = e.currentTarget.dataset.item;
				let {plus} = e.currentTarget.dataset;
				
				this.reqByuser({
					url: '?l=cart.up', 
					// method: 'POST',
					data: {
						type_id: info_id,
						sku_id,
						num: plus == 0 ? e.target.value : (num + plus)
					},
					success: res => {
						if(res.data.status == 1) {
							uni.showToast({
								icon: 'success',
								title: '操作成功'
							})
							this.cartList = res.data.data
						}else {
							uni.showToast({
								icon: 'error',
								title: '添加失败'
							})
						}
					}
				})
			},
			CheckboxChange(e, _values) {
				// let items = this.cartList, values = e ? e.detail.value : _values;
				// this.cartList = this.cartList.map(item => {
				// 	return {...item, checked: values.includes(item.id + '')}
				// })
				let {id, sku_id, status} = e.currentTarget.dataset.item;
				this.reqByuser({
					url: '?l=cart.edit', 
					data: {
						type_id: id,
						sku_id,
						status: status == 1 ? 2 : 1
					},
					success: res => {
						if(res.data.status == 1) {
							// console.log(res.data.data)
							// this.cartInfo = res.data.data.info;
							this.cartList = res.data.data
							// this.checkAll = !this.cartList.find(item => item.status != 1)
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			tapChecked() {
				if (this.checkAll) {
					this.checkAll = false;
				} else {
					this.checkAll = true;
				}
				this.CheckboxChange('',  this.checkAll ? this.cartList.map(item => item.id + '') : [''])
			},
			barEditTap() {
				if (this.goods_checked) {
					this.goods_checked = false;
				} else {
					this.goods_checked = true;
				}
			},
			tapBtn() {
				uni.navigateTo({
					url: '/pages/goods/settlement'
				});
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	@import "../../static/zaiui/style/my_cart.scss";
</style>