yurong/pages/tabbar/shop.vue

<template>
	<view class="tabbar-page">
		<taoke-rank v-if="!promotionUnlocked"></taoke-rank>
		<block v-else>
		<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 tabbar-page-padding-action">
			<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 tabbar-fixed-above-tabbar">
			<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>
		</block>
	</view>
</template>

<script>
	import TaokeRank from '@/components/taoke/tab-rank.vue'
	export default {
		components: {
			TaokeRank
		},
		data() {
			return {
				min: 1,
				nums: 1,
				list: [],
				checkAllList: false,
				promotionUnlocked: false
			}
		},
		onLoad() {
			this.syncPromotionStatus()
		},
		onShow() {
			this.syncPromotionStatus()
			this.syncCustomTabBar()
			if (!this.promotionUnlocked) {
				return
			}
			if (this.list.length === 0) {
				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: {
			syncPromotionStatus() {
				this.promotionUnlocked = this.$tools.getPromotionUnlocked()
			},
			syncCustomTabBar() {
				this.$tools.setTabbarSelectedPath('/pages/tabbar/shop')
				if (typeof this.getTabBar === 'function') {
					const tabBar = this.getTabBar()
					if (tabBar && typeof tabBar.syncPromotionStatus === 'function') {
						setTimeout(() => {
							tabBar.syncPromotionStatus('/pages/tabbar/shop')
						}, 0)
					}
				}
			},
			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('删除成功')
					}
				})
			},
			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>