一个简单的商城应用,mall.vue组件代码如下:
<template>
<view class="uni-container">
<uni-search-bar @confirm="search" v-model="searchValue" @input="input" @cancel="cancel">
</uni-search-bar>
<uni-section title="商品" type="line">
<uni-list>
<uni-list-item
v-for="(goods, index) in goodsList"
:key="goods.spuId"
:thumb="goods.coverImgUrl"
thumb-size="lg"
v-if="goods.skuInfoList != null"
>
<template v-slot:body>
<view class="slot-box slot-body">
<view class="slot-text">
{{goods.name}}
</view>
<view class="extra-goods-desc" v-if="goods.subName">
{{goods.subName}}
</view>
<view v-if="goods.skuInfoList.length === 1">
¥{{goods.skuInfoList[0].price}}
</view>
</view>
</template>
<template v-slot:footer v-if="goods.skuInfoList.length === 0">
<view class="footer-actions" style="flex-direction: column;">
<view class="cannot-buy">规格未配置,</view>
<view class="cannot-buy">无法购买。</view>
</view>
</template>
<template v-slot:footer v-else-if="goods.skuInfoList.length === 1">
<view class="footer-actions">
<button class="goods-add-remove-btn" @click="removeSku(goods.skuInfoList[0])">-</button>
{{cartSkuIdCount(goods.skuInfoList[0].skuId)}}
<button class="goods-add-remove-btn" @click="addSku(goods.skuInfoList[0])">+</button>
</view>
</template>
<template v-slot:footer v-else>
<view class="footer-actions">
<button class="select-detail-btn" @click="selectSkuHandler(goods)">选规格</button>
</view>
</template>
</uni-list-item>
</uni-list>
</uni-section>
<uni-section title="" padding>
<uni-pagination
:show-icon="true"
:total="total"
:current="queryParams.page"
:pageSize="queryParams.pageSize"
@change="paginationChange"
/>
</uni-section>
<view class="buttom-white"></view>
<!-- 购物车 -->
<uni-goods-nav class='cart' :style="{'z-index': cartIndex}" :fill="true" :options="options"
:button-group="customButtonGroup" @click="onClick" @buttonClick="buttonClick"/>
<view>
<!-- 选择规格弹窗 -->
<uni-popup ref="inputDialog" title="选择商品规格" type="dialog" class="sku-dialog">
<uni-section
v-for="(skuInfo, index) in currentGoods.skuInfoList"
:key="skuInfo.skuId"
:title="'规格' + (index + 1) + ':' + skuInfo.attributeValue"
v-if="skuInfo.onShelf === '1'"
type="line"
class="sku-dialog-item"
>
<uni-list>
<uni-list-item title="单价" :rightText="'¥' + skuInfo.price" />
<uni-list-item title="下单">
<template v-slot:footer v-if="skuInfo.stockAmount > 0">
<view class="footer-actions">
<button class="goods-add-remove-btn" @click="removeSku(skuInfo)">-</button>
{{cartSkuIdCount(skuInfo.skuId)}}
<button class="goods-add-remove-btn" @click="addSku(skuInfo)">+</button>
</view>
</template>
<template v-slot:footer v-else class="slot-text">
<text>抢光了</text>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</uni-popup>
</view>
<view>
<!-- 购物车清单弹窗 -->
<uni-popup ref="popup" background-color="#fff" @change="change">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
<view :style="{'margin-top': (Math.max(cartItemList.length, 5) * 80) + 'px'}">
<uni-section title="购物车清单" type="line">
<uni-list>
<uni-list-item
v-for="(cartItem, index) in cartItemList"
:key="cartItem.skuId + '-' + Date.now() + '-' + Math.random()"
:title="friendlySkuTitle(cartItem.skuId)"
:note="cartSkuIdCount(cartItem.skuId, 'cart')"
:rightText="cartSkuIdTotalAmount(cartItem.skuId)"
/>
</uni-list>
</uni-section>
<uni-section title="选购商品合计" type="line" class="total-amount-box">
<view class="total-amount-line">
<text style="color: red;">¥</text><text class="total-amount">{{totalAmountSum}}</text><text>元</text>
</view>
</uni-section>
<uni-section title="账户余额" type="line">
<view class="balance-box">
<text style="color: #ffd4c5">¥</text><text class="balance">{{balance}}</text><text>元</text>
</view>
</uni-section>
<uni-section title="提醒" type="line" class="total-amount-box" v-if="balance < totalAmountSum">
<text style="color: red;">注意:</text><text>您的账户余额不足。</text>
</uni-section>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import {getAuthorization} from '@/utils/auth.js';
import {setCartItems, removeCartItems} from '@/utils/cart.js';
import {getGoodsList} from '@/api/goods.js';
import {getBalanceByUserId} from '@/api/ledger-user.js';
export default {
components: {},
data() {
return {
type: 'left',
searchValue: '',
options: [{
icon: 'cart',
text: '购物车',
info: 0
}],
cartIndex: 900,
buttonGroup: [{
text: '去结算',
backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
color: '#fff'
}],
customButtonGroup: [{
text: '去结算',
backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
color: '#fff'
}],
queryParams: {
page: 1,
pageSize: 4,
diningType: null,
name: null,
},
goodsList: [],
currentGoods: {},
total: 0,
token: null,
cartItemList: [],
balance: 0,
}
},
onLoad() {
removeCartItems();
},
onShow() {
this.token = getAuthorization();
this.getList();
this.getBalance();
},
computed: {
totalAmountSum() {
let totalAmount = 0;
for(let cartItem of this.cartItemList) {
totalAmount = totalAmount + cartItem.amount * cartItem.price;
}
return totalAmount;
}
},
methods: {
getList() {
getGoodsList(this.queryParams).then(response => {
if (response.code === 200) {
this.goodsList = response.data.rows;
for (let i = 0; i < this.goodsList.length; i++) {
const coverImgUrl = `${process.env.VUE_APP_BASE_API}/system/file?fileId=${this.goodsList[i].coverImgId}&token=${this.token}`;
console.debug('coverImgUrl', coverImgUrl);
this.goodsList[i].coverImgUrl = coverImgUrl;
}
this.total = response.data.total;
console.info(this.goodsList)
}
})
},
getBalance() {
getBalanceByUserId().then(response => {
if (response.code === 200) {
this.balance = response.data ? response.data.balance : 0;
}
})
},
paginationChange(e) {
this.queryParams.page = e.current;
this.getList();
},
selectSkuHandler(goods) {
this.currentGoods = goods;
this.$refs.inputDialog.open();
},
removeSku(skuInfo) {
let idx = -1;
for (let i = 0; i < this.cartItemList.length; i++) {
if (this.cartItemList[i].skuId == skuInfo.skuId) {
idx = i;
break;
}
}
if (idx >= 0) {
if (this.cartItemList[idx].amount === 1) {
this.cartItemList.splice(idx, 1);
} else {
this.cartItemList[idx].amount -= 1;
this.cartItemList.splice(idx, 1, this.cartItemList[idx]);
}
this.cartOptionsInfo();
}
},
addSku(skuInfo) {
let idx = -1;
for (let i = 0; i < this.cartItemList.length; i++) {
if (this.cartItemList[i].skuId == skuInfo.skuId) {
idx = i;
break;
}
}
if (idx >= 0) {
this.cartItemList[idx].amount += 1;
this.cartItemList.splice(idx, 1, this.cartItemList[idx]);
} else {
const cartItem = skuInfo
for (let goods of this.goodsList) {
if (goods.spuId === skuInfo.spuId) {
cartItem.name = goods.name;
break;
}
}
cartItem.amount = 1;
this.cartItemList.push(cartItem);
}
this.cartOptionsInfo();
},
cartOptionsInfo() {
// this.options[0].info = this.cartItemList.length;
Vue.set(this.options, 0, {icon: 'cart', text: '购物车', info: this.cartItemList.length})
},
cartSkuIdCount(skuId, sense) {
const found = this.cartItemList.filter(e => e.skuId === skuId);
if (found && found.length > 0) {
if (!sense) {
return found[0].amount;
} else {
return '单价' + found[0].price + ',已购' + found[0].amount + '份';
}
} else {
if (!sense) {
return 0;
} else {
return '已购0份';
}
}
},
cartSkuIdTotalAmount(skuId) {
let totalAmount = 0;
for(let cartItem of this.cartItemList) {
if (cartItem.skuId === skuId) {
totalAmount = totalAmount + cartItem.amount * cartItem.price;
}
}
return '小计¥' + totalAmount;
},
friendlySkuTitle(skuId) {
for(let cartItem of this.cartItemList) {
if (cartItem.skuId === skuId) {
return cartItem.attributeValue ? cartItem.name + ',' + cartItem.attributeValue : cartItem.name;
}
}
},
onClick(e) {
console.info('点击了购物车')
this.cartIndex = -900;
this.$refs.popup.open('left')
},
change(e) {
if (!e.show) {
this.cartIndex = 900;
}
console.log('当前模式:' + e.type + ',状态:' + e.show);
},
buttonClick(e) {
if (this.options[0].info <= 0 || this.cartItemList.length === 0) {
uni.showToast({
title: '购物车空空如也',
icon: 'none'
});
} else if (this.balance < this.totalAmountSum) {
uni.showToast({
title: '咦,钱不够了呀,真尴尬。',
icon: 'none',
duration: 2500
});
} else {
setCartItems({cartItems: this.cartItemList, complete: () => {
uni.navigateTo({
url: '/pages/settle/settle'
});
}});
}
},
addToCart(delta) {
// this.options[0].info += delta;
Vue.set(this.options, 0, {icon: 'cart', text: '购物车', info: this.options[0].info += delta})
},
// 搜索函数
search(res) {
this.queryParams.name = res.value;
this.getList();
},
// 搜索框中输入文字时触发
input(res) {
console.log('----input:', res)
},
// 取消搜索函数
cancel(res) {
this.queryParams.name = null;
this.getList();
}
}
}
</script>
编译失败:
[HBuilder] 16:43:01.490 Error: 暂不支持 {key:"footer",fn:function(){return[_c('view',{staticClass:'footer-actions data-v-c6e060ee'},[_c('button',{attrs:{'data-event-opts':[['tap',[['removeSku',['$0'],[[['goodsList','spuId',goods.$orig.spuId,'skuInfoList.__$n0']]]]]]]},staticClass:'goods-add-remove-btn data-v-c6e060ee',on:{'bindtap':'__e'}},[_v("-")]),_v("\n\t\t\t\t\t\t"+goods.m0+"\n\t\t\t\t\t\t"),_c('button',{attrs:{'data-event-opts':[['tap',[['addSku',['$0'],[[['goodsList','spuId',goods.$orig.spuId,'skuInfoList.__$n0']]]]]]]},staticClass:'goods-add-remove-btn data-v-c6e060ee',on:{'bindtap':'__e'}},[_v("+")])])];},proxy:true} 语法
[HBuilder] 16:43:01.492 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:82:11)
[HBuilder] 16:43:01.510 at traverseConditionalExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:118:7)
[HBuilder] 16:43:01.511 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:70:12)
[HBuilder] 16:43:01.524 at traverseConditionalExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:135:9)
[HBuilder] 16:43:01.526 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:70:12)
[HBuilder] 16:43:01.547 at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:513:35
[HBuilder] 16:43:01.550 at Array.map (<anonymous>)
[HBuilder] 16:43:01.566 at traverseResolveScopedSlots (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:429:45)
[HBuilder] 16:43:01.568 at traverseCallExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:107:10)
[HBuilder] 16:43:01.592 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:68:12)
[HBuilder] 16:43:01.595 at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:190:43
[HBuilder] 16:43:01.617 at Array.forEach (<anonymous>)
[HBuilder] 16:43:01.618 at traverseDataNode (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:183:23)
[HBuilder] 16:43:01.638 at traverseCreateElement (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:161:30)
[HBuilder] 16:43:01.638 at traverseCallExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:107:10)
[HBuilder] 16:43:01.649 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:68:12)
[HBuilder] 16:43:01.650 at traverseConditionalExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:118:7)
[HBuilder] 16:43:01.669 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:70:12)
[HBuilder] 16:43:01.694 at traverseRenderList (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:557:20)
[HBuilder] 16:43:01.697 at traverseCallExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:107:10)
[HBuilder] 16:43:01.719 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:68:12)
[HBuilder] 16:43:01.721 at traverseCreateElement (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:173:41)
[HBuilder] 16:43:01.745 at traverseCallExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:107:10)
[HBuilder] 16:43:01.747 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:68:12)
[HBuilder] 16:43:01.769 at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:270:25
[HBuilder] 16:43:01.771 at Array.reduce (<anonymous>)
[HBuilder] 16:43:01.794 at traverseArrayExpression (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:269:34)
[HBuilder] 16:43:01.795 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:72:12)
[HBuilder] 16:43:01.818 at traverseCreateElement (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:173:41)
[HBuilder] 16:43:01.819 at traverseCallExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:107:10)
[HBuilder] 16:43:01.837 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:68:12)
[HBuilder] 16:43:01.838 at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:270:25
[HBuilder] 16:43:01.863 at Array.reduce (<anonymous>)
[HBuilder] 16:43:01.876 at traverseArrayExpression (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:269:34)
[HBuilder] 16:43:01.896 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:72:12)
[HBuilder] 16:43:01.897 at traverseCreateElement (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:173:41)
[HBuilder] 16:43:01.917 at traverseCallExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:107:10)
[HBuilder] 16:43:01.918 at traverseExpr (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:68:12)
[HBuilder] 16:43:01.928 at WithStatement (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\template\traverse.js:25:19)
[HBuilder] 16:43:01.929 at NodePath._call (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\path\context.js:46:20)
[HBuilder] 16:43:01.940 at NodePath.call (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\path\context.js:36:17)
[HBuilder] 16:43:01.942 at NodePath.visit (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\path\context.js:84:31)
[HBuilder] 16:43:01.961 at TraversalContext.visitQueue (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\context.js:96:16)
[HBuilder] 16:43:01.963 at TraversalContext.visitMultiple (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\context.js:67:17)
[HBuilder] 16:43:01.980 at TraversalContext.visit (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\context.js:119:19)
[HBuilder] 16:43:01.981 at traverseNode (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\traverse-node.js:18:17)
[HBuilder] 16:43:01.998 at NodePath.visit (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\path\context.js:90:52)
[HBuilder] 16:43:01.999 at TraversalContext.visitQueue (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\context.js:96:16)
[HBuilder] 16:43:02.015 at TraversalContext.visitSingle (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\context.js:72:19)
[HBuilder] 16:43:02.017 at TraversalContext.visit (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\traverse\lib\context.js:121:19)
[HBuilder] 16:43:13.863 TypeError: Cannot read properties of undefined (reading 'includes')
[HBuilder] 16:43:13.864 at D:\Program Files\HBuilderX\plugins\uniapp-cli\bin\uniapp-cli.js:53:21
[HBuilder] 16:43:13.872 at runMicrotasks (<anonymous>)
[HBuilder] 16:43:13.872 at processTicksAndRejections (node:internal/process/task_queues:96:5)
[HBuilder] 16:43:13.880 Error: getaddrinfo ENOTFOUND 96f0e031-f37a-48ef-84c7-2023f6360c0a.bspapp.com
[HBuilder] 16:43:13.880 at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:109:26) {
[HBuilder] 16:43:13.887 errno: -3008,
[HBuilder] 16:43:13.887 code: 'ENOTFOUND',
[HBuilder] 16:43:13.895 syscall: 'getaddrinfo',
[HBuilder] 16:43:13.895 hostname: '96f0e031-f37a-48ef-84c7-2023f6360c0a.bspapp.com'
[HBuilder] 16:43:13.903 }
[HBuilder] 16:43:13.911 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
[HBuilder] 16:43:13.912 Error: Compile failed at pages/mall/mall.vue
[HBuilder] 16:43:13.919 at compile (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\index.js:149:13)
[HBuilder] 16:43:13.919 at actuallyCompile (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\@vue\component-compiler-utils\dist\compileTemplate.js:70:96)
[HBuilder] 16:43:13.927 at compileTemplate (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\@vue\component-compiler-utils\dist\compileTemplate.js:31:16)
[HBuilder] 16:43:13.928 at Object.<anonymous> (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\templateLoader.js:46:20)
[HBuilder] 16:43:14.505 项目 'gh-cantee-mobile' 发布微信小程序失败.
请问哪里不对,我要怎么改才能编译成功?
1 个回复
c***@qq.com
不知道什么原因,Hbuilder版本高了导致的,用3.7版本的就可以。