簡易商城小程序全棧開發(mpvue+koa+mongodb)
接(jie)觸小程序(xu)有一段時(shi)間后并且(qie)多多少少做了一些項目之后，又開始了vue的旅程，受其(qi)核心思想(xiang)的影(ying)響(xiang)，對(dui)數據/狀態管理、組件(jian)化(hua)、跨(kua)平臺等都(dou)有較高(gao)的追求，mpvue 是一個使用 Vue.js開發小程序(xu)的前端框架，由此開始了mpvue踩坑(keng)之旅，想(xiang)在提(ti)高(gao)代碼可讀(du)性的同時(shi)，也(ye)增加一點(dian)vue.js的開發體(ti)驗。
技術棧
前端(duan)： 微(wei)信小(xiao)程序、mpvue
后端：koa
數據(ju)庫：mongodb 數據(ju)庫可視化工具：Robo3T
商城小程序開跑
一個基本的(de)商城小(xiao)程序(xu)，包含了前端的(de)首頁、分類、購物車、我的(de)(訂單)四個tab頁，后端的(de)數據(ju)定義、分類、和存取。各(ge)有其色，我在(zai)下面就相(xiang)應介紹一些(xie)主要功(gong)能、對(dui)比(bi)原生(sheng)小(xiao)程序(xu)和vue.js所踩到的(de)坑(keng)還有后端數據(ju)庫的(de)功(gong)能應用。 想了解(jie)或者有何(he)問題都可以去 作品(pin)源碼 中了解(jie)哦(e)。
成果分享
一、前臺頁面及功能展示
首頁：
加入購物車：
購物車全選結算(suan)：
地址管理：
1. 談(tan)組件封(feng)裝
舉個栗子說(shuo)，首頁(ye)由三(san)部分組(zu)成(cheng):頭部輪播(bo)推薦(jian)(jian)+中間橫向(xiang)滑動(dong)(dong)推薦(jian)(jian)+縱向(xiang)滾動(dong)(dong)商品list。這(zhe)三(san)部分，幾乎是(shi)(shi)所有(you)商城類app必(bi)需(xu)的(de)(de)功能(neng)了(le)。頭部的(de)(de)輪播(bo)推薦(jian)(jian)、中間的(de)(de)橫向(xiang)滑動(dong)(dong)式推薦(jian)(jian)的(de)(de)封裝，我們都(dou)知道，諸如此類的(de)(de)功能(neng)組(zu)件(jian)(jian)(jian)，在各app上(shang)基本都(dou)少不了(le)，最(zui)初學vue最(zui)先有(you)所體(ti)會的(de)(de)，便(bian)是(shi)(shi)組(zu)件(jian)(jian)(jian)代(dai)(dai)(dai)碼(ma)復(fu)(fu)用性(xing)高的(de)(de)特點，在進(jin)行一些組(zu)件(jian)(jian)(jian)復(fu)(fu)用遷移至別的(de)(de)組(zu)件(jian)(jian)(jian)或頁(ye)面時，可(ke)能(neng)都(dou)不需(xu)要改動(dong)(dong)代(dai)(dai)(dai)碼(ma)或者(zhe)改動(dong)(dong)少量(liang)代(dai)(dai)(dai)碼(ma)就可(ke)以直接使用，可(ke)以說(shuo)是(shi)(shi)相當方(fang)便(bian)了(le)，對于(yu)mpvue組(zu)件(jian)(jian)(jian)內仍然支持原生小程序的(de)(de)swiper與scroll，兩者(zhe)兼容后，對于(yu)熟知小程序和vue的(de)(de)開(kai)發(fa)者(zhe)，這(zhe)項功能(neng)可(ke)以很高效率地(di)完(wan)成(cheng)。
最后主(zhu)頁(ye)面文件(jian)就是(shi)由一個(ge)個(ge)組件(jian)組成，可讀性很強了，對(dui)于(yu)初學者(zhe)來(lai)說，模(mo)塊封裝的思想是(shi)首(shou)先就得具(ju)備的了。
<template>
<div class="container" @click="clickHandle('test click', $event)">
<div class="swiperList">
<swiper :text="motto" :swiperList="swiperlist"></swiper>
</div>
<div class="navTab">
<div class="recTab">
<text> —— 為你推薦 ——</text>
</div>
</div>
<scroll></scroll>
<div class="hot">
<span> —— 熱門商品 ——</span>
</div>
<hot :v-text="motto"></hot>
<div class="fixed-img">
<img :src="fixImg" alt="" class="fix-img">
</div>
</div>
</template>
復制代碼
不過關于(yu)組件封裝與組合的問題，由于(yu)最(zui)近有(you)研究vue性能優化和(he)用戶體(ti)驗的一些知識點(dian)，考慮了一個比較嚴肅(su)的問題：
先(xian)看一(yi)下常見的vue寫法(fa)：在html里(li)放一(yi)個app組(zu)件(jian)，app組(zu)件(jian)里(li)又引(yin)用(yong)了其他(ta)的子組(zu)件(jian)，形成一(yi)棵以app為根節點的組(zu)件(jian)樹：
<body>
<app></app>
</body>
復制代碼
而這種做法就(jiu)引發(fa)了性能(neng)問題，要(yao)初(chu)始(shi)(shi)化(hua)(hua)一個父組(zu)件(jian)(jian)，必然需要(yao)先(xian)初(chu)始(shi)(shi)化(hua)(hua)它(ta)的子組(zu)件(jian)(jian)，而子組(zu)件(jian)(jian)又(you)有它(ta)自己(ji)的子組(zu)件(jian)(jian)。那(nei)么要(yao)初(chu)始(shi)(shi)化(hua)(hua)根標簽，就(jiu)需要(yao)從底(di)層開(kai)始(shi)(shi)冒泡，將頁面所(suo)有組(zu)件(jian)(jian)都初(chu)始(shi)(shi)化(hua)(hua)完。所(suo)以我們的頁面會(hui)在所(suo)有組(zu)件(jian)(jian)都初(chu)始(shi)(shi)化(hua)(hua)完才(cai)開(kai)始(shi)(shi)顯(xian)示。
這(zhe)個(ge)結果(guo)顯然(ran)不(bu)是我們要(yao)的，用戶每次點開頁面(mian)(mian)，還要(yao)面(mian)(mian)對一(yi)陣(zhen)子(zi)的空白(bai)和響(xiang)應，因為頁面(mian)(mian)啟(qi)動后不(bu)止要(yao)響(xiang)應初始化(hua)頁面(mian)(mian)的組件，還有包含在app里的其他組件，這(zhe)樣嚴重(zhong)拖慢了頁面(mian)(mian)打開的速(su)度。
更好的(de)結果是頁面(mian)可(ke)以(yi)從上到下按(an)順序流(liu)式渲(xuan)染(ran)，這樣可(ke)能總(zong)體(ti)時間(jian)增長了，但首屏時間(jian)縮減，在用戶(hu)看來(lai)，頁面(mian)打開(kai)速度就(jiu)更快了。網上一些辦法大(da)同小異，各有優缺點，所以(yi)...本(ben)人也在瘋狂試驗中，靜待好消息。
**2.Class、Style的綁定 **
在不(bu)同父(fu)組件中(zhong)引用同一子組件時(shi)，但是(shi)(shi)各自(zi)需要接收綁定的(de)動態(tai)樣式去呈現(xian)不(bu)同的(de)樣式，在綁定css style樣式這一關上，踩(cai)了個大坑：mpvue居然不(bu)支持(chi)用object的(de)形式傳style，起(qi)先處于樣式一直上不(bu)去的(de)抓狂當中(zhong),網上對于mpvue這方(fang)面的(de)細節(jie)也少之又少，后(hou)來查找了許多地方(fang)，發現(xian)class和style的(de)綁定都(dou)是(shi)(shi)不(bu)支持(chi)classObj和styleObj形式，就(jiu)嘗試用了字符串，果然...改代(dai)碼(ma)改到(dao)懷(huai)疑人(ren)生，結果你告訴我人(ren)生起(qi)步就(jiu)是(shi)(shi)錯(cuo)誤，怎(zen)能不(bu)心痛？...
解決：
<template>
<div class="swiper-list">
<d-swiper :swiperList="swiperlist" :styleObject="styleobject"></d-swiper>
</div>
</template>
<script>
data() {
return {
styleobject:'width:100%;height:750rpx;position:absolute;top:0;z-index:3'
}
}
</script>
復制代碼
3. “v-for嵌套”陷阱
在做vue項目的時候難(nan)免會用到(dao)(dao)循環(huan)，需要用到(dao)(dao)index索引值，但是(shi)v-for在嵌(qian)套時index沒(mei)辦法重(zhong)復(fu)用，內(nei)循環(huan)與外循環(huan)不能共用一個index。
<swiper-item v-for="(items,index) in swiperList" :key="index">
<div v-for="item in items" class="swiper-info" :key="item.id" @click="choose" >
<image :src="item.url" class="swiper-image" :style="styleObject"/>
</div>
</swiper-item>
復制代碼
以上代碼就會報錯：
而給內循環再(zai)加上另(ling)一個索引，便沒有報錯(cuo)：
<swiper-item v-for="(items,index) in swiperList" :key="index">
<div v-for="(item,i) in items" class="swiper-info" :key="i" @click="choose" >
<image :src="item.url" class="swiper-image" :style="styleObject"/>
</div>
</swiper-item>
復制代碼
4.this指向問題與箭頭函數的應用
這是vue文檔里的(de)原話：All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.
意思是(shi)：在Vue所(suo)有的(de)生命(ming)周期鉤子方法(fa)（如(ru)created，mounted， updated以及(ji)destroyed）里使(shi)用this，this指向調用它的(de)Vue實(shi)例，即（new Vue）。 mpvue里同理(li)。 我們都(dou)知道，生命(ming)周期函數(shu)中(zhong)的(de)this都(dou)是(shi)指向Vue實(shi)例的(de)，因此我們就可(ke)以訪問數(shu)據，對屬性和方法(fa)進行運(yun)算(suan)。
props：{
goods:Array
},
mounted: function(options){
let category = [
{id: 0, name: '全部'},
{id: 1, name: 'JAVA'},
{id: 2, name: 'C++'},
{id: 3, name: 'PHP'},
{id: 4, name: 'VUE'},
{id: 5, name: 'CSS'},
{id: 6, name: 'HTML'},
{id: 7, name: 'JavaScript'}
]
this.categories = category
this.getGoodsList(0)
},
methods: {
getGoodsList(categoryId){
console.log(categoryId);
if(categoryId == 0){
categoryId = ''
}
wx.request({
url: '//localhost:3030/shop/goods/list',
data: {
categoryId: categoryId
},
method: 'POST',
success: res => {
console.log(res);
this.goods = res.data.data;
}
})
},
}
復制代碼
普(pu)通(tong)(tong)函(han)(han)數this指(zhi)向這(zhe)個函(han)(han)數運(yun)行的(de)上下文(wen)環(huan)(huan)境(jing)(jing)，也就(jiu)是調用它的(de)上下文(wen)，所(suo)以(yi)在這(zhe)里，對(dui)于生命周期函(han)(han)數用普(pu)通(tong)(tong)函(han)(han)數還(huan)是箭(jian)頭(tou)函(han)(han)數其實(shi)并(bing)沒(mei)(mei)有(you)影響，因為它的(de)定義環(huan)(huan)境(jing)(jing)與運(yun)行環(huan)(huan)境(jing)(jing)是同一(yi)個，所(suo)以(yi)同樣能取到(dao)vue實(shi)例(li)中數據、屬性和(he)方(fang)法(fa)。 箭(jian)頭(tou)函(han)(han)數中，this指(zhi)向的(de)是定義它的(de)最外(wai)層代碼塊，()=>{} 等(deng)價于 function(){}.bind(this);所(suo)以(yi)this當(dang)然指(zhi)向的(de)是vue實(shi)例(li)。起(qi)初(chu)并(bing)沒(mei)(mei)有(you)考慮到(dao)this指(zhi)向的(de)問(wen)題，在wx.request({})中success用了普(pu)通(tong)(tong)函(han)(han)數，結果(guo)一(yi)直報錯“goods is not defined”，用了箭(jian)頭(tou)函(han)(han)數才(cai)解(jie)決(jue)，起(qi)初(chu)普(pu)通(tong)(tong)函(han)(han)數的(de)this指(zhi)向 getGoodsList()的(de)上下文(wen)環(huan)(huan)境(jing)(jing)，所(suo)以(yi)一(yi)直沒(mei)(mei)辦法(fa)取到(dao)值。
5.onLoad與onShow
在進行首頁點擊商品跳轉(zhuan)到詳情頁時(shi)，onLoad()無(wu)法獲取更新數據。
首先雖(sui)然onLoad: function (options) 這個(ge)是(shi)可以接受到值(zhi)的(de)，但是(shi)這個(ge)只是(shi)加載一(yi)次，不是(shi)我想要的(de)效果，我需要在(zai)本(ben)頁(ye)面(不關閉的(de)情(qing)況下(xia))到另外(wai)一(yi)個(ge)頁(ye)面在(zai)跳轉進來，接收到對應商(shang)品的(de)數據(ju)。
所以需要將代碼(ma)放在(zai)onshow內部， 在(zai)每(mei)次頁面加載(zai)的時候都會進(jin)行當前狀態的查(cha)詢，查(cha)詢對應數(shu)據的子對象，更新渲染到詳情頁上。
onShow: function(options){
// console.log(this.styleobject)
// console.log(options)
wx.getStorage({
key: 'shopCarInfo',
success: (res) =>{
// success
console.log(`initshopCarInfo:${res.data}`)
this.shopCarInfo = res.data;
this.shopNum = res.data.shopNum
}
})
wx.request({
url: '//localhost:3030/shop/goods/detail',//請求detail數據表的數據
method: 'POST',
data: {
id: options.id
},
success: res =>{
// console.log(res);
const dataInfo = res.data.data.basicInfo;
this.saveShopCar = dataInfo;
this.goodsDetail.name = dataInfo.name;
this.goodsDetail.minPrice = dataInfo.minPrice;
this.goodsDetail.goodsDescribe = dataInfo.characteristic;
let goodsLabel = this.goodsLabel
goodsLabel = res.data.data;
// console.log(goodsLabel);
this.selectSizePrice = dataInfo.minPrice;
this.goodsLabel.pic = dataInfo.pic;
this.goodsLabel.name = dataInfo.name;
this.buyNumMax = dataInfo.stores;
this.buyNumMin = (dataInfo.stores > 0) ? 1 : 0;
}
})
}
復制代碼
了解小(xiao)程序(xu)onLoad與onShow生命周期函(han)數：
onLoad：生命周(zhou)期函(han)數–監(jian)聽小程序(xu)初始(shi)化，當小程序(xu)初始(shi)化完成時，會觸發 onLoadh（全局只(zhi)觸發一次）。
onShow：生命周期函數–監聽小程(cheng)(cheng)序(xu)顯示，當小程(cheng)(cheng)序(xu)啟動，或從后臺(tai)進入前臺(tai)顯示，會觸發 onShow。
二、后臺數據庫及數據存取
1.架設 HTTP 服務
在全局配置文(wen)件中： 1).引入koa并實例化
const Koa = require('koa')；
const app = new Koa()
復制代碼
2).app.listen(端口(kou)號)：創建并(bing)返回 HTTP 服務器，將給定的參(can)數傳遞給Server#listen()。
const Koa = require('koa');//引入koa框架
const app = new Koa();
app.listen(3000);
這里的app.listen()方法只是以下方法的語法糖:
const http = require('http');
const Koa = require('koa');
const app = new Koa();
http.createServer(app.callback()).listen(3000);
復制代碼
這樣基本的配(pei)置完畢，我(wo)們(men)就可以用“//localhost3030+請(qing)求地(di)址(zhi)參數(shu)”獲取到數(shu)據庫的值(zhi)了。
2.Koa-router路由中間件
koa-router 是常用的 koa 的路由庫(ku)。
如果依靠(kao)ctx.request.url去手動處(chu)理(li)路由(you)(you)，將會寫很多處(chu)理(li)代(dai)碼，這(zhe)時候就需要對應(ying)的路由(you)(you)的中(zhong)間(jian)件對路由(you)(you)進行(xing)控制，這(zhe)里(li)介紹一(yi)個比較(jiao)好用的路由(you)(you)中(zhong)間(jian)件koa-router。
以路由切換(huan)催動界面切換(huan)，”數(shu)據化”界面。
3.建立對象模型
在(zai)構(gou)建(jian)函數庫之前，先來聊聊對(dui)象的建(jian)模。
Mongoose是在node.js異步環境(jing)下對mongodb進行便捷操作(zuo)的對象模型(xing)工具。該npm包封裝了操作(zuo)mongodb的方法。
Mongoose有兩(liang)個特點：
1、通過關(guan)系(xi)型數據庫的(de)思想(xiang)來設(she)計非關(guan)系(xi)型數
2、基(ji)于mongodb驅(qu)動，簡化操作
const mongoose = require('mongoose')
const db = mongoose.createConnection('mongodb://localhost/shop') //建立與shop數據庫的連接(shop是我本地數據庫名)
復制代碼
本地(di)數據庫(ku)shop中(zhong)建了分別“地(di)址管(guan)理(li)”、“商品(pin)詳情”、“訂單詳情”、“商品(pin)列表(biao)(biao)”、“用戶列表(biao)(biao)”五個(ge)數據表(biao)(biao)：
Schema界(jie)面定義數據模型(xing)：
Schema用于定(ding)義數(shu)據庫(ku)的(de)(de)(de)結(jie)構(gou)。類似創建(jian)表(biao)時的(de)(de)(de)數(shu)據定(ding)義(不僅僅可以(yi)定(ding)義文檔(dang)的(de)(de)(de)結(jie)構(gou)和屬性，還(huan)可以(yi)定(ding)義文檔(dang)的(de)(de)(de)實例(li)方法(fa)、靜態模(mo)型方法(fa)、復合(he)索(suo)引等)，每(mei)個(ge)Schema會映(ying)射到(dao)mongodb中的(de)(de)(de)一個(ge)collection，但是Schema不具(ju)備操作數(shu)據庫(ku)的(de)(de)(de)能力。
數(shu)(shu)據(ju)(ju)表(biao)(biao)跟對(dui)(dui)象的(de)(de)(de)映(ying)射,同(tong)時具有檢(jian)查效果,檢(jian)查每組數(shu)(shu)據(ju)(ju)是(shi)否滿足(zu)模型中定義的(de)(de)(de)條件 同(tong)時，每個(ge)對(dui)(dui)象映(ying)射成(cheng)一個(ge)數(shu)(shu)據(ju)(ju)報表(biao)(biao)，就可(ke)用(yong)該(gai)對(dui)(dui)象進行保存操作，等同(tong)操作數(shu)(shu)據(ju)(ju)表(biao)(biao)，而(er)非mysql命(ming)令行般(ban)繁(fan)瑣(suo)的(de)(de)(de)操作
以“商品(pin)列表(biao)(biao)”數據(ju)表(biao)(biao)為(wei)例：
// 模型通過Schema界面定義。
var Schema = mongoose.Schema;
const listSchema = new Schema({
barCode: String,
categoryId: Number,
characteristic: String,
commission: Number,
commissionType: Number,
dateAdd: String,
dateStart: String,
id: Schema.Types.ObjectId,
logisticsId: Number,
minPrice: Number,
minScore: Number,
name: String,
numberFav: Number,
numberGoodReputation: Number,
numberOrders: Number,
originalPrice: Number,
paixu: Number,
pic: String,
pingtuan: Boolean,
pingtuanPrice: Number,
propertyIds: String,
recommendStatus: Number,
recommendStatusStr: String,
shopId: Number,
status: Number,
statusStr: String,
stores: Number,
userId: Number,
videoId: String,
views: Number,
weight: Number,
})
復制代碼
定義了數(shu)據(ju)(ju)表(biao)中(zhong)需要的數(shu)據(ju)(ju)項的類型，數(shu)據(ju)(ju)表(biao)傳入數(shu)據(ju)(ju)后會一一對應(ying)：
4.koa-router“路由庫”
const Router = require('koa-router')()//引入koa-router
const router = new Router();// 創建 router 實例對象
//注冊路由
router.post('/shop/goods/list', async (ctx, next) => {
const params = ctx.request.body
//以‘listSchema’的模型去取到Goods的數據
const Goods = db.db.model('Goods', db.listSchema) //第一個‘db’是require來的自定義的，第二個‘db’是取到連接到mongodb的數據庫，model代指實體數據(根據schema獲取該字段下的數據，然后傳給Goods))
ctx.body = await new Promise((resolve, reject) => {//ctx.body是ctx.response.body的縮寫,代指響應數據
//異步，等到獲取到數據之后再將body發出去
if (params.categoryId) {
Goods.find({categoryId: params.categoryId},(err, docs) => {
if (err) {
reject(err)
}
resolve({
code: 0,
errMsg: 'success',
data: docs
})
})
} else {
Goods.find((err, docs) => {
if (err) {
reject(err)
}
resolve({
code: 0,
errMsg: 'success',
data: docs
})
})
}
})
})
復制代碼
所有(you)(you)的(de)數(shu)(shu)據(ju)(ju)庫操作(zuo)都(dou)是異步的(de)操作(zuo)，所以需要封裝promise來實現，由此通過POST “//localhost3030/shop/goods/list”便(bian)可(ke)(ke)訪問本地shop數(shu)(shu)據(ju)(ju)庫了。 這里(li)順便(bian)提一下(xia)“ctx”的(de)使用，ctx(context)上(shang)下(xia)文，我(wo)們(men)(men)(men)都(dou)知(zhi)道有(you)(you)node.js 中(zhong)(zhong)有(you)(you)request(請(qing)(qing)求)對象(xiang)和respones(響應)對象(xiang)。Koa把這兩個對象(xiang)封裝在ctx對象(xiang)中(zhong)(zhong)。 參(can)數(shu)(shu)ctx是由koa傳入的(de)封裝了request和response的(de)變量，我(wo)們(men)(men)(men)可(ke)(ke)以通過它訪問request和response (前端通過ajax請(qing)(qing)求http獲取(qu)數(shu)(shu)據(ju)(ju)) 我(wo)們(men)(men)(men)可(ke)(ke)以通過ctx請(qing)(qing)求or獲取(qu)數(shu)(shu)據(ju)(ju)庫中(zhong)(zhong)的(de)數(shu)(shu)據(ju)(ju)。
Ctx.body 屬性就(jiu)是發送給用戶的內(nei)容
body是(shi)http協議(yi)中的響(xiang)應(ying)體，header是(shi)指響(xiang)應(ying)頭
ctx.body = ctx.res.body = ctx.response.body
5.數據緩存之模型層設置
1).為什么要做數據(ju)緩(huan)存？
在(zai)這(zhe)里不得(de)不提(ti)一(yi)(yi)句數(shu)據緩存的重要(yao)(yao)性(xing)，雖(sui)然我是(shi)從本地數(shu)據庫獲(huo)取(qu)的數(shu)據，但是(shi)由于需要(yao)(yao)的數(shu)據量較多(duo)，再者前面(mian)說的性(xing)能(neng)優化還未完成，每次(ci)還是(shi)有一(yi)(yi)定的請(qing)求時間，沒必要(yao)(yao)每次(ci)打開都去請(qing)求一(yi)(yi)遍后端，渲(xuan)染頁面(mian)較慢，所(suo)以(yi)需要(yao)(yao)將(jiang)需要(yao)(yao)經(jing)常用(yong)到的數(shu)據做本地緩存，這(zhe)樣(yang)能(neng)大(da)大(da)提(ti)高頁面(mian)渲(xuan)染速(su)度。
2).設置模型層
setGoodsList: function (saveHidden, total, allSelect, noSelect, list) {
this.saveHidden = saveHidden,
this.totalPrice = total,
this.allSelect = allSelect,
this.noSelect = noSelect,
this.goodsList = list
var shopCarInfo = {};
var tempNumber = 0;
var list = [];
shopCarInfo.shoplist = list;
for (var i = 0; i < list.length; i++) {
tempNumber = tempNumber + list[i].number
}
shopCarInfo.shopNum = tempNumber;
wx.setStorage({
key: "shopCarInfo",
data: shopCarInfo
})
},
復制代碼
將需(xu)要(yao)做本(ben)地存(cun)儲數(shu)據的方法(fa)封(feng)裝成一個方法(fa)模型，當需(xu)要(yao)做本(ben)地存(cun)儲時，直接(jie)做引(yin)用(yong)，如(ru)今vue、react中多用(yong)到的架構思想，都對(dui)模型層封(feng)裝有一定的要(yao)求。
bindAllSelect() {
var list = this.goodsList;
var currentAllSelect = this.allSelect
if (currentAllSelect) {
list.forEach((item) => {
item.active = false
})
} else {
list.forEach((item) => {
item.active = true
})
}
this.setGoodsList(this.getSaveHide(), this.totalPrice(), !currentAllSelect, this.noSelect(), list);
},
復制代碼
