yurong/pages/tabbar/shop.vue

<template>
	<view>
		<view class="w100 h-186" style="background-image: linear-gradient(to bottom,#F2BCBF,#F7F6FA);">
			<uni-nav-bar title="购物车" :border="false" backgroundColor="transparent" class="fw-b"></uni-nav-bar>
		</view>
		<view class="w100 rows rowsc">
			<view class="w-710 bgff br-20 rows rowsm rowsl">
				<view class="w-662 h-98 rows rowsb rowsm mb-20" style="border-bottom: 1rpx solid #eee;">
					<text class="fs-30 fw-b">购物车 ({{list.length}}件)</text>
					<image class="w-30 h-30" src="/static/images/03_sc.png" mode="" @click="cardelete"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 1050rpx;">
					<view class="w100 rows rowsl rosm" v-if="list.length>0">
						<view class="w-662 h-172 rows rowsm pr-20 pl-20 mb-20" v-for="(item,index) in list" :key="index"
						@click.stop="checkItem(item,index)">
							<image class="w-32 h-32 mr-20" :src="item.checkList?'/static/images/03_qou.png':'/static/images/03_w.png'" mode="aspectFill"></image>
							<view class="rows rowsm">
								<image class="w-172 h-172 mr-20 br-20" :src="$tools.oss(item.image)" mode="aspectFill"></image>
								<view class="rows rowsl rowsb h-172">
									<text class="fs-28 fw-b">{{item.name}}</text>
									<text class="mr-30 fs-26 col666">{{item.spec_name}}</text>
									<view class="rows rowsm rowsb w-420">
										<text class="fw-b fs-32" style="color: #FC3131;">￥{{item.price}}</text>
										<lxc-count-style @handleCount='handleCount($event,item,index)' :min="min" :value="item.num"></lxc-count-style>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="w100 rows rowsc h-600 rowsm" v-else>
						<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="w100 h-106 rows rowsm bgff rowsb pl-20 pr-20 fixed" style="bottom:0">
			<view class="rows rowsm">
				<view class="rows rowsm mr-20" @click="checkAll">
					<image class="w-32 h-32 mr-10" :src="checkAllList?'/static/images/03_qou.png':'/static/images/03_w.png'" mode="aspectFill"></image>
					<text class="fs-28">全选</text>
				</view>
				<view class="rows rowsm">
					<text class="fs-28">合计：</text>
					<text class="fs-36 fw-b" style="color: #FC3131;">￥{{totalPrice}}</text>
				</view>
			</view>
			<view class="w-152 h-64 br-100 bg colfff rows rowsc rowsm" @click="cartOrderCreate">
				结算
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				min:1,
				nums:1,
				list:[],
				checkAllList: false
			}
		},
		onShow() {
			this.shopCar()
			this.checkAllList = false
		},
		computed:{
			totalPrice() {
				let arr = this.list.filter(val => val.checkList)
				let totalPrices = 0
				arr.forEach(val => {
					totalPrices += Number(val.price)*Number(val.num)
				})
				return totalPrices.toFixed(2)
			}
		},
		methods: {
			shopCar(){
				this.$tools.axiosFromToken("POST","shop/shopCar").then(res => {
					res.data.forEach(item => {
						item.checkList = false
					})
					this.list = res.data
				})
			},
			checkAll() {
				this.checkAllList = !this.checkAllList
				if(this.checkAllList) {
					this.list.forEach(item =>{
						item.checkList = true
					})
				} else {
					this.list.forEach(item =>{
						item.checkList = false
					})
				}
				this.$forceUpdate()
			},
			checkItem(item,index) {
				item.checkList = !item.checkList
				this.checkAllList = this.list.every(item => item.checkList)
				this.$forceUpdate()
			},
			handleCount(e,item,index){
				this.$tools.axiosFromToken("POST","shop/editCar",{
					id:item.id,
					num:e
				}).then(res => {
					this.$tools.showtt(res.msg)
					if(res.code!=1) return
					this.list[index].num = e
					if(e==0){
						this.list.splice(index,1)
						this.$tools.showtt('删除成功')
					}
					// this.shopcat()
				})
			},
			cardelete(){
				if(this.list.length == 0) return this.$tools.showtt('购物车暂无商品')
				let shop_id = []
				this.list.forEach(item => {
					if(item.checkList){
						shop_id.push(item.id)
					}
				})
				if(shop_id.length == 0) return this.$tools.showtt('请选择要删除的商品')
				this.$tools.axiosFrom("POST","shop/deleteCar",{
					ids:shop_id.join(',')
				}).then(res => {
					this.$tools.showtt(res.msg)
					if(res.code != 1) return
					this.shopCar()
					this.checkAllList = false
				})
			},
			cartOrderCreate(){
				if(this.list.length == 0) return this.$tools.showtt('购物车暂无商品')
				// 拿到单选之后商品的信息
				let infor = []
				let arrId = []
				this.list.forEach(item => {
					if(item.checkList){
						infor.push(item)
						arrId.push(item.id)
					}
				})
				if(infor.length == 0) return this.$tools.showtt('请选择要结算的商品')
				getApp().globalData.shoppings = infor
				this.$tools.goNext(`/pageOne/shopConfirm?id=${arrId.join(',')}`)
			}
		}
	}
</script>

<style>
	page{
		background-color: #F7F6FA;
	}
</style>