近期有一些同行提到我寫的一篇文章【完整版購物車】反響還不錯，
然後私信問我能不能有字節互動跟支付寶小程序的購物車功能，於是我。。。。。
![]()
![]()
題外話：
1.uniapp這款框架，通用多端應用【H5,支付寶小程序,微信小程序，
字節互動小程序，百度小程序，QQ小程序】【安卓/ios】
2.注意：【安卓/ios】安卓可以生成apk
本地包以及遠程包下載測試查看，上線之前ios跟安卓都需要配置證書
3.uniapp
生成【字節互動小程序】源碼後，字節互動小程序又可以延伸出
【抖音小程序，今日頭條小程序，皮皮蝦小程序，西瓜視頻小程序】源代碼，
是不是忽然覺得輕鬆多了哈哈
主要優點：
一套代碼可以生產多個平臺應用
雲開發可以摒棄後臺開發人員，前端獨立完成整個項目
主要缺點：
1.部分插件不兼容
好吧，老樣子，上代碼。。。。
<template>
<view class="content">
<view id="cont">
<!--列表-->
<view id="list" v-for="(item,index) in list">
<!--icon選中/未選中ICON-->
<img v-if="item.selected" class="list_icon" @click="radios(index)" :src="radio_show" />
<img v-else="!item.selected" class="list_icon" @click="radios(index)" :src="radio_none" />
<!--列表圖片-->
<img class="list_img" :src="item.src" @click="delerte(index)" />
<!--列表名稱-->
<label class="list_name">{{item.name}}</label>
<!--列表標題-->
<label class="list_title">{{item.title}}</label>
<!--列表價格-->
<label class="money">{{item.money}}</label>
<!--加減功能 文本框數量-->
<view class="sum_cont">
<label class="minute" @click="btn_minute(index)">-</label>
<input class="input" v-model="item.num" />
<label class="add" @click="btn_add(index)">+</label>
</view>
</view>
<!--底部固定樣式-->
<view class="bottom">
<img :src="radio_show" v-if="allselected" @click="btn_msss(index)" class="list_icons" />
<img :src="radio_none" v-else="!allselected" @click="btn_msss(index)" class="list_icons" />
<!--已獲得數量-->
<label class="bott_num">已獲得：{{num}}</label>
<!--總價-->
<label class="bott_money">總和：{{money}}</label>
<!--點贊-->
<label class="btn_sub" @click="btn_sub">結算</label>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
allselected:false,
//默認總價
money: 0,
radio_show: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cnlw-manager/dc8b80f0-b9e9-11ea-b680-7980c8a877b8.png",
radio_none: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cnlw-manager/dc828040-b9e9-11ea-b43d-2358b31b6ce6.png",
//默認總數量
num: 0,
// 購物車假數據
list: [{
name: "派大星",
num: 1,
money: 10,
src: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2104351895,3299575660&fm=26&gp=0.jpg",
title: "養護液",
selected: true
}, {
name: "養護液",
num: 1,
money: 10,
src: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2104351895,3299575660&fm=26&gp=0.jpg",
title: "養護液",
selected: false
}, {
name: "養護液",
num: 1,
money: 10,
src: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2104351895,3299575660&fm=26&gp=0.jpg",
title: "養護液",
selected: true
}]
}
},
//初始化加載 顯示總價總數量
created: function() {
var price = 0;
var numb = 0;
var list = this.list;
for (var i = 0; i < list.length; i++) {
if (list[i].selected) {
price += list[i].num * list[i].money;
numb += list[i].num;
}
}
this.money = price;
this.num = numb;
console.log(numb);
console.log(price);
},
onLoad() {
},
methods: {
//總價總數量方法 方便調用 再次多寫了一次[可以跟初始化封裝爲一個方法]
countManey: function() {
var price = 0;
var numb = 0;
var list = this.list;
for (var i = 0; i < list.length; i++) {
if (list[i].selected) {
price += list[i].num * list[i].money;
numb += list[i].num;
}
}
this.money = price;
this.num = numb;
console.log(numb);
},
//刪除購物車列表
delerte: function(index) {
this.list.splice(index, 1);
},
//選中未選中
radios: function(index) {
var list = this.list;
list[index].selected = !list[index].selected;
this.countManey();
console.log(list[index].selected)
},
//添加
btn_add: function(index) {
var list = this.list;
var num = parseInt(list[index].num);
num = parseInt(num + 1);
list[index].num = num;
this.countManey();
},
//減去
btn_minute: function(index) {
var list = this.list;
var num = list[index].num;
if (num > 1) {
num = num - 1;
list[index].num = num;
}
this.countManey();
},
// 點擊結算
btn_sub() {
uni.showModal({
title: '提示',
content: '這裏是結算',
success: function(res) {
if (res.confirm) {
console.log('用戶點擊確定');
} else if (res.cancel) {
console.log('用戶點擊取消');
}
}
});
},
btn_msss: function(index) {
var allselected = this.allselected;
allselected = !this.allselected;
var list = this.list;
for(var i = 0; i < list.length; i++) {
list[i].selected = allselected;
}
this.allselected = allselected;
this.list = list;
this.countManey();
}
}
}
</script>
<style>
/*清除一下margin-padding*/
page {
margin: 0 auto;
padding: 0;
background-color: #f5f5f5;
}
/*購物車列表樣式*/
#list {
position: relative;
top: 10px;
width: 100%;
height: 120px;
background-color: #fff;
margin-bottom: 10px;
}
/*選中未選中ICON*/
.list_icon {
position: absolute;
width: 35px;
height: 35px;
top: 35px;
left: 20px;
}
/*列表圖*/
.list_img {
position: absolute;
width: 80px;
height: 80px;
left: 80px;
top: 20px;
}
/*列表名稱*/
.list_name {
position: absolute;
top: 30px;
left: 180px;
}
/*列表標題*/
.list_title {
position: absolute;
top: 55px;
left: 180px;
font-size: 15px;
color: #CCCCCC;
}
/*money*/
.money {
position: absolute;
top: 78px;
left: 180px;
font-size: 15px;
color: #EC971F;
}
/* 總數量*/
.sum_cont {
position: absolute;
right: 0;
bottom: 10px;
width: 130px;
height: 31px;
line-height: 31px;
}
/*減號*/
.minute {
position: absolute;
width: 25px;
text-align: center;
height: 30px;
line-height: 30px;
left: 10px;
font-size: 18px;
border: 1px solid #e5e5e5;
}
/*加號*/
.add {
width: 25px;
border: 1px solid #e5e5e5;
height: 30px;
line-height: 30px;
text-align: center;
position: absolute;
right: 10px;
font-size: 18px;
}
/*文本框*/
.input {
width: 40px;
height: 30px !important;
display: inline-block;
font-size: 15px;
line-height: 30px !important;
text-align: center;
border: 1px solid #e5e5e5;
position: absolute;
right: 45px;
}
/*底部固定樣式*/
.bottom {
position: fixed;
width: 100%;
height: 60px;
line-height: 60px;
bottom: 0px;
background-color: #fff;
border-top: 1rpx solid #ccc;
}
/*總價*/
.bott_money {
margin-left: 10px;
font-size: 14px;
}
/*總數量*/
.bott_num {
padding-left: 30px;
font-size: 14px;
}
/*點贊*/
.btn_sub {
position: absolute;
right: 0;
width: 100px;
height: 60px;
line-height: 60px;
background-color: #CF2D28;
color: #fff;
text-align: center;
}
/*全選*/
.list_icons {
position: relative;
top: 10px;
left: 15px;
width: 35px;
height: 35px;
}
</style>
