使⽤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"
:border="false"
:head-border-bottom="false" :foot-border-top="false" :show-head="false">
<view class="u-flex" slot="body">
<image src="oss.shop.eduwork/product/2020-0820-5f3e180ea8886.png"
></image>
<view class="u-flex-wrap u-m-l-20">
<view >{{ds.title}}</view>
<view >前沿/{{ds.title}}</view>
<view class="u-flex u-m-t-20">
<view >￥{{ds.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" >
<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 >￥{{total}}</text>
</text>
<u-button @click="goSettlement" class="u-m-l-80" size="medium" 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: [{
list: [{
"id": 1,
"goods_id": 1,
"num": 3,
"is_checked": false,
"goods": {
"id": 1,
"title": "《产品思维1》",
"price": 32,
"stock": 100,
"cover_url": "oss.shop.eduwork/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": "oss.shop.eduwork/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": "oss.shop.eduwork/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)
return item.is_checked == true
return item.is_checked == true
}).reduce((pre, now) => {
return pre + (now.num * ds.price)    }, 0)
console.al)
},
// 删除购物车
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。