uni-app 實現購物車

#實現購物車
uni-app文檔
##效果圖

##具體代碼
前提
實現了商品的購物車添加和用戶登陸

<template>
	<view>
		<view class="" v-if="flag">
			購物車空空如也，請<navigator open-type="switchTab" url="../home/home">先選購</navigator>
		</view>
		<view class="" v-else>
			<view class="cartlist">
				<view class="cartitem" v-for="(item,index) of cartlist" :key="index">
					<checkbox-group @change="selected(item)">
						<checkbox class="xuanzhong" :checked="item.flag" />
					</checkbox-group>

					<image :src="item.proimg" mode=""></image>
					<view class="itemright">
						<view class="">
							{{item.proname}}
						</view>
						<view class="">
							￥{{item.price}}
							<text @click="reduce(item)">[-]</text>
							{{item.num}}
							<text @click="add(item)">[+]</text>
							<text class="del" @click="del(item,index)">刪除</text>
						</view>
					</view>
				</view>
			</view>
			<view class="di">
				<view class="quanxuan">
					<checkbox-group @change="selectedall()">
						<checkbox class="quanxuananniu" :checked="allchecked" />全選
					</checkbox-group>
				</view>
				<view class="">
					總數:{{totalNum}}
				</view>
				<view class="">
					總價:{{totalPrice}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	//由於他們的功能咱們不能全用上，因此本身封裝個簡單的（能夠不封裝）
	import {
		request,
		toast
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				flag: true, // 用於判斷用戶購物車是否有商品，沒有商品爲true，有商品爲false
				cartlist: [], // 購物車商品信息
				allchecked: true //默認全選爲true，由於後臺數據沒有是否選中的信息
			}
		},
		computed: {
			// 計算選中商品數量
			totalNum() {
				let totalNum = 0;
				this.cartlist.map(item => {
					item.flag ? totalNum += item.num : totalNum += 0
				})
				return totalNum
			},
			//計算選中商品的總價
			totalPrice() {
				let totalPrice = 0;
				this.cartlist.map(item => {
					item.flag ? totalPrice += item.num * item.price : totalPrice += 0
				})
				return totalPrice
			}
		},
		onShow() {
			try {
				let userid = uni.getStorageSync('userid') // 提取緩存中的用戶id
				let token = uni.getStorageSync('token') // 提取緩存中的token值
				if (userid && token) { // 兩個值都在的時候才能訪問購物車數據，不然跳到登陸界面
					request({
						url: '/cart',
						data: {
							userid,
							token
						}
					}).then(res => {
						// console.log(res.data.data)
						if (res.data.code === '10019') {
							toast({
								title: '請先登陸'
							})
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.data.code === '10012') {
							toast({
								title: '請選擇商品'
							})
							this.flag = true
						} else {
							toast({
								title: '獲取列表成功'
							})
							this.flag = false
							res.data.data.map(item => { //由於後端數據沒有是否選中，因此本身加了一條
								item.flag = true
							})
							this.cartlist = res.data.data
						}
					})
				} else {
					toast({
						title: '請先登陸'
					})
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods: {
			// 減號操做
			reduce(item) {
				let num = item.num
				// 須要判斷是否會減到0，我在這裏是最小爲1.
				if (num > 1) {
					num -= 1
				} else {
					num = 1
					return
				}
				let token = uni.getStorageSync('token')
				request({
					url: '/cart/update',
					data: {
						token,
						cartid: item.cartid,
						num
					}
				}).then(res => {
					if (res.data.code === '10019') {
						toast({
							title: '請先登陸'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						toast({
							title: '修改數量成功'
						})
						item.num = num
					}
				})
			},
			// 加號操做
			add(item) {
				let num = item.num
				num += 1
				let token = uni.getStorageSync('token')
				request({
					url: '/cart/update',
					data: {
						token,
						cartid: item.cartid,
						num
					}
				}).then(res => {
					if (res.data.code === '10019') {
						toast({
							title: '請先登陸'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						toast({
							title: '修改數量成功'
						})
						item.num += 1
					}
				})
			},
			// 刪除單挑購物車商品
			del(item, index) {
				let token = uni.getStorageSync('token')
				request({
					url: '/cart/delete',
					data: {
						token,
						cartid: item.cartid,
					}
				}).then(res => {
					if (res.data.code === '10019') {
						toast({
							title: '請先登陸'
						})
						uni.navigateTo({
							url: '/pages/login/login'
						})
					} else {
						toast({
							title: '刪除成功'
						})
						this.cartlist.splice(index, 1)
						if (this.cartlist.length === 0) {
							this.flag = true
						}
					}
				})
			},
			// 單個商品前的勾選
			selected(item) {
				// console.log(item)
				item.flag = !item.flag
				if (!item.flag) {
					this.allchecked = false
				} else {
					const test = this.cartlist.every(item => {
						return item.flag === true
					})
					if (test) {
						this.allchecked = true
					} else {
						this.allchecked = false
					}
				}
			},
			// 全選按鈕
			selectedall() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.cartlist.map(item => {
						item.flag = true
					})
				} else {
					this.cartlist.map(item => {
						item.flag = false
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.cartlist {
		background-color: #999999;
		padding: 10px;

		.cartitem {
			background-color: #FFFFFF;
			height: 50px;
			margin-bottom: 10px;

			.xuanzhong {
				float: left;
				line-height: 50px;
				padding-left: 5px;
			}

			image {
				display: inline-block;
				height: 40px;
				width: 40px;
				padding: 5px 0;
				float: left;
			}

			.itemright {
				display: inline-block;
				padding: 5px;

				.del {
					margin-left: 10px;
					background-color: red;
					color: #FFFFFF;
					border-radius: 3px;
					padding: 0 5px;
				}
			}
		}

	}
</style>

在這個特殊時期，咱們更應該靜下心來，停工不行學，「逆戰」加油！