使用uview编写购物车界面代码

我俨然越来越像前端了！现在在学uniapp跨端框架，试着用uview编写了一下购物车界面代码，然后恰恰uview模板中又没有提供这个界面的前端代码，所以分享出来，有需要的可以拿，不客气~

• 实现效果
  CSDN上传不了图了…
• 废话不说直接上代码！因为本人比较懒，所以css直接写标签里了，没有抽取出来，感觉改起来也方便~嘻嘻

<template>
	<view>
		<view class="u-m-l-30 u-m-t-30">
			<u-checkbox-group :wrap="true" @change="checkboxgroupChange">
				<u-checkbox shape="circle" v-model="item.is_checked"
					v-for="(item, index) in list" :key="index" :name="item.id">
					<u-card :border-radius="0" class="u-m-t-0 u-m-b-0 u-m-l-10"
						style="background-color: hsl(0, 0%, 98%);width: 640rpx;height: 200rpx;" :border="false"
						:head-border-bottom="false" :foot-border-top="false" :show-head="false">
						<view class="u-flex" slot="body">
							<image src="https://oss.shop.eduwork.cn/product/2020-0820-5f3e180ea8886.png"
								style="width: 160rpx;height: 160rpx;"></image>
							<view class="u-flex-wrap u-m-l-20">
								<view style="font-size: 12px;">{{item.goods.title}}</view>
								<view style="font-size: 9px;color: #999999;">前沿/{{item.goods.title}}</view>
								<view class="u-flex u-m-t-20">
									<view style="color:#cc0000;font-weight: bold;">￥{{item.goods.price}}</view>
									<u-number-box class="u-m-l-30" :input-width="70" :input-height="40"
										v-model="item.num" @change="numChange(item.id)"></u-number-box>
									<u-icon @click="deleteCart(item.id)" class="u-m-l-30" name="trash-fill" color="#e60000" size="40"></u-icon>
								</view>
							</view>
						</view>
					</u-card>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="u-line-1 u-flex" style="position: fixed;bottom: 55px;">
			<u-checkbox-group class="u-m-l-30">
				<u-checkbox shape="circle" v-model="allSelect" @change="allSelectChange" name="all">全选</u-checkbox>
			</u-checkbox-group>
			<text class="u-m-l-80">
				合计:<text style="color:#cc0000 ;">￥{{total}}</text>
			</text>
			<u-button @click="goSettlement" class="u-m-l-80" size="medium" style="display: inline-block;" type="error"
				shape="circle">去结算
			</u-button>
		</view>
		<u-modal  @confirm="confirmDelete" width="70%" :mask-close-able="true" show-cancel-button confirm-text="删除" 
		cancel-text="我再想想" v-model="showModel" content="确认将这一个宝贝删除？"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModel:false,
				allSelect: false,
				currnetSelectCart: [],
				wantDelete:null,
				total: 0,
				list: [{
						"id": 1,
						"goods_id": 1,
						"num": 3,
						"is_checked": false,
						"goods": {
							"id": 1,
							"title": "《产品思维1》",
							"price": 32,
							"stock": 100,
							"cover_url": "https://oss.shop.eduwork.cn/product/2020-0820-5f3e180ea8886.png"
						}
					},
					{
						"id": 2,
						"goods_id": 2,
						"num": 1,
						"is_checked": true,
						"goods": {
							"id": 2,
							"title": "《产品思维2》",
							"price": 20,
							"stock": 100,
							"cover_url": "https://oss.shop.eduwork.cn/product/2020-0820-5f3e180ea8886.png"
						}
					},
					{
						"id": 3,
						"goods_id": 4,
						"num": 5,
						"is_checked": false,
						"goods": {
							"id": 3,
							"title": "《产品思维3》",
							"price": 40,
							"stock": 100,
							"cover_url": "https://oss.shop.eduwork.cn/product/2020-0820-5f3e180ea8886.png"
						}
					}
				]
			}
		},
		watch: {
			currnetSelectCart(val) {
				if (val.length == this.list.length)
					this.allSelect = true
				else this.allSelect = false
			}
		},
		mounted() {
			// 初始化全选状态
			let selects = this.list.filter((item) => {
				return item.is_checked == true
			})
			if (selects.length == this.list.length)
				this.allSelect = true

			// 初始化合计
			this.calculateTotal()
		},
		methods: {
			// 计算合计金额
			calculateTotal() {
				console.log(this.list)
				this.total = this.list.filter(item => {
					return item.is_checked == true
				}).reduce((pre, now) => {
					return pre + (now.num * now.goods.price)
				}, 0)
				console.log(this.total)
			},
			// 删除购物车
			deleteCart(id){
				this.showModel = true
				this.wantDelete = id
			},
			confirmDelete(){
				this.list = this.list.filter(item=>{
					return item.id != this.wantDelete
				})
				this.calculateTotal()
			},
			// 点击全选
			allSelectChange(e) {
				if (e.value == true)
					this.list.map(val => {
						val.is_checked = true;
					})
				else
					this.list.map(val => {
						val.is_checked = false;
					})
				this.calculateTotal()
			},
			// 选择商品
			checkboxgroupChange(e) {
				this.currnetSelectCart = e
				this.calculateTotal()
				console.log(this.currnetSelectCart)
			},
			// 商品数量改变
			numChange(id) {
				let cart = this.list.filter(item => {
					return item.id == id
				})[0]
				if (cart.is_checked == true)
					this.calculateTotal()
			},
			// 去结算
			goSettlement() {
				console.log("结算中...")
			}
		}
	}
</script>

<style scoped>

</style>