小程序購物車商品數(shù)量加減，單選全選，商品價(jià)格累計(jì)
2020年注定了是個(gè)不平凡的一年，疫情的爆發(fā)阻礙前去工作的腳步，只有在家敲著自己的小鍵盤玩樂了，把每一天當(dāng)成一個(gè)新的開始，牢記心中的理想，微笑面對生活，不斷充實(shí)自己，就會擁有精彩有意義的人生。逆境中學(xué)習(xí)，逆戰(zhàn)中敲代碼。
最近學(xué)習(xí)小程序，簡單的對購物車基本功能做下學(xué)習(xí)筆記。
本次應(yīng)用uni-app創(chuàng)建項(xiàng)目
uni-app是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS，Android，H5，以及各種小程序（微信/支付寶/百度/頭條/ QQ /釘釘）等多個(gè)平臺。
DCloud公司擁有420萬開發(fā)者，數(shù)十萬應(yīng)用案例，10.5億手機(jī)端用戶，數(shù)十款uni-app插件，70 +微信/ qq群。阿里小程序工具官方內(nèi)置uni-app（詳見），騰訊課堂官方為uni-app錄制培訓(xùn)課程（詳見），開發(fā)者可以放心選擇。 uni-app在手，做啥都不愁。甚至不跨端，也是更好uni-app的小程序開發(fā)框架（詳見），更好的App跨平臺框架，更方便的H5開發(fā)框架。你都可以快速交付，不需要轉(zhuǎn)換開發(fā)思維，不需要更改開發(fā)習(xí)慣。
頁面大致內(nèi)容
在這里插入圖片描述
下面是代碼
頁面模板
1
<template>
<view>
<view v-if="flag">
? ? ? 購物車未添加內(nèi)容，請 <navigator open-type="switchTab" url="/pages/home/home">//跳轉(zhuǎn)到商品頁，選購</navigator>
? ? </view>
? ? <view v-else>
? ? ? <view class="cartlist">
? ? ? ? <checkbox-group @change="allselected">
? ? ? ? ? <checkbox :checked="allchecked" />全選
? ? ? ? </checkbox-group>
? ? ? ? <view class="cartitem" v-for="(item, index) of cartlist" :key="index">
? ? ? ? ? <checkbox-group @change="selected(item)">
? ? ? ? ? ? <checkbox :checked="item.flag" />
? ? ? ? ? </checkbox-group>
? ? ? ? ? {{ item.proname }} ￥{{ item.price }} -- {{ item.num }}
? ? ? ? ? <text @click="reduce(item)">[-]</text>
? ? ? ? ? <text @click="add(item)">[+]</text>
? ? ? ? ? <text @click="del(item, index)">[del]</text>
? ? ? ? </view>
? ? ? </view>
? ? </view>
? ? <view> 總數(shù)：{{totalNum}}</view>
? ? <view> 總價(jià)：{{totalPrice}}</view>
</view>
</template>
js部分
<script>
? import { request, toast } from '../../utils/index.js' //
export default {
data() {
return {
flag: true,
? ? ? ? cartlist: [],
? ? ? ? allchecked: true
}
},
? ? computed: {
? ? ? totalNum () { //總數(shù)量
? ? ? ? let totalNum = 0;
? ? ? ? this.cartlist.map(item => {
? ? ? ? ? item.flag ? totalNum += item.num : totalNum += 0
? ? ? ? })
? ? ? ? return totalNum
? ? ? },
? ? ? totalPrice () { //總價(jià)格
? ? ? ? let totalPrice = 0;
? ? ? ? this.cartlist.map(item => {
? ? ? ? ? item.flag ? totalPrice += item.num * item.price : totalPrice += 0
? ? ? ? })
? ? ? ? return totalPrice
? ? ? }
? ? },
? ? onLoad () {
? ? },
? ? onShow () { // 不使用 onLoad 以及 mounted 是因?yàn)轫撁姹痪彺妫瑪?shù)據(jù)更新不及時(shí)
? ? ? try{
? ? ? ? let userid = uni.getStorageSync('userid')
? ? ? ? let token = uni.getStorageSync('token')
? ? ? ? if (userid && token) {
? ? ? ? ? request({
? ? ? ? ? ? url: '/cart',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? userid, token
? ? ? ? ? ? }
? ? ? ? ? }).then(res => {
? ? ? ? ? ? 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
? ? ? ? ? ? ? // 賦值之前給 數(shù)據(jù)添加數(shù)據(jù)項(xiàng) item.flag
? ? ? ? ? ? ? res.data.data.map( item => {
? ? ? ? ? ? ? ? item.flag = true
? ? ? ? ? ? ? })
? ? ? ? ? ? ? this.cartlist = res.data.data
? ? ? ? ? ? ? console.log(this.cartlist)
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? toast({title:'請先登錄'})
? ? ? ? ? uni.navigateTo({
? ? ? ? ? ? url: '/pages/login/login'
? ? ? ? ? })
? ? ? ? }
? ? ? }catch(e){
? ? ? ? //TODO handle the exception
? ? ? }
? ? ?
? ? ?
? ? },
methods: {
? ? ? allselected () { //全選框
? ? ? ? this.allchecked = !this.allchecked
? ? ? ? console.log(this.allchecked)
? ? ? ? // 如果為真，修改數(shù)據(jù)的每一項(xiàng)的flag的值都為真，否則都為假
? ? ? ? if (this.allchecked) {
? ? ? ? ? this.cartlist.map( item => {
? ? ? ? ? ? item.flag = true
? ? ? ? ? })
? ? ? ? } else {
? ? ? ? ? this.cartlist.map( item => {
? ? ? ? ? ? item.flag = false
? ? ? ? ? })
? ? ? ? }
? ? ? },
? ? ? selected (item) { //每條數(shù)據(jù)選擇框
? ? ? ? console.log('test', item)
? ? ? ? item.flag = !item.flag
? ? ? ? console.log(this.cartlist)
? ? ? ? // 如果單獨(dú)某一項(xiàng)沒被選中，那么全選一定不被選中
? ? ? ? // 如果單獨(dú)某一項(xiàng)被選中了，檢測其他項(xiàng)是否都被選中，如果都選中了，全選被選中
? ? ? ? if(!item.flag) {
? ? ? ? ? this.allchecked = false
? ? ? ? } else {
? ? ? ? ? // 檢測其余項(xiàng)是否被選中 --- 一假則假
? ? ? ? ? const test = this.cartlist.every(item => {
? ? ? ? ? ? return item.flag === true
? ? ? ? ? })
? ? ? ? ?
? ? ? ? ? if (test) {
? ? ? ? ? ? this.allchecked = true
? ? ? ? ? } else {
? ? ? ? ? ? this.allchecked = false
? ? ? ? ? }
? ? ? ? }
? ? ? },
reduce (item) { //商品數(shù)量減
? ? ? ? // 如果當(dāng)前的個(gè)數(shù)為1 不操作，如果大于1減1操作
? ? ? ? let num = item.num
? ? ? ? if (num > 1) {
? ? ? ? ? num -= 1
? ? ? ? } else {
? ? ? ? ? num = 1
? ? ? ? }
? ? ? ? let token = uni.getStorageSync('token')
? ? ? ? request({
? ? ? ? ? url: '/cart/update',
? ? ? ? ? data: {
? ? ? ? ? ? token,
? ? ? ? ? ? cartid: item.cartid, // item包含購物車記錄id
? ? ? ? ? ? num
? ? ? ? ? }
? ? ? ? }).then(res => {
? ? ? ? ? if (res.data.code === '10019') {
? ? ? ? ? ? toast({title:'請先登錄'})
? ? ? ? ? ? uni.navigateTo({
? ? ? ? ? ? ? url: '/pages/login/login'
? ? ? ? ? ? })
? ? ? ? ? } else {
? ? ? ? ? ? toast({title:'修改數(shù)量成功'})
? ? ? ? ? ? item.num -= 1 // 服務(wù)器返回成功之后? 視圖才更新
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? add (item) { //商品數(shù)量減
? ? ? ? // item.num += 1
? ? ? ? // 加1
? ? ? ? let num = item.num
? ? ? ? num += 1
? ? ? ? let token = uni.getStorageSync('token')
? ? ? ? request({
? ? ? ? ? url: '/cart/update',
? ? ? ? ? data: {
? ? ? ? ? ? token,
? ? ? ? ? ? cartid: item.cartid, // item包含購物車記錄id
? ? ? ? ? ? num
? ? ? ? ? }
? ? ? ? }).then(res => {
? ? ? ? ? if (res.data.code === '10019') {
? ? ? ? ? ? toast({title:'請先登錄'})
? ? ? ? ? ? uni.navigateTo({
? ? ? ? ? ? ? url: '/pages/login/login'
? ? ? ? ? ? })
? ? ? ? ? } else {
? ? ? ? ? ? toast({title:'修改數(shù)量成功'})
? ? ? ? ? ? item.num += 1 // 服務(wù)器返回成功之后? 視圖才更新
? ? ? ? ? }
? ? ? ? })
? ? ? },
? ? ? 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:'刪除數(shù)據(jù)成功'})
? ? ? ? ? ? this.cartlist.splice(index, 1) // 刪除當(dāng)前的數(shù)據(jù)
? ? ? ? ? ? // 如果點(diǎn)擊刪除 刪完之后要顯示沒有數(shù)據(jù)了
? ? ? ? ? ? this.cartlist.length === 0 ? this.flag = true : this.flag = false
? ? ? ? ? }
? ? ? ? })
? ? ? }
}
}
</script>
