Skip to content

S
singleStore
Commit 52c863a2 authored by June_Q's avatar June_Q
Browse files
Options

perf:商品购买数量双向绑定;UI优化;fix:购物车下来刷新，this指向问题

parent ea4878b3
Hide whitespace changes
Inline Side-by-side
Showing with 115 additions and 88 deletions
App.vue
View file @ 52c863a2
......@@ -5,7 +5,6 @@ import dayjs from 'dayjs'
import { removeStorage } from '@/lib/storage/index.js'
export default {
onLaunch() {
this.checkUpdate() // 检查更新
this.setMobileData() // 获取系统信息和胶囊信息
const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync(): {}
this.$store.state.user.appid = extConfig.appid
......@@ -26,6 +25,10 @@ export default {
}
})
},
onShow() {
this.checkUpdate() // 检查更新
},
globalData: {},
......
components/goods-popup/index.vue
View file @ 52c863a2
<template>
<uni-popup ref="goodsPopup" type="bottom">
<uni-popup ref="goodsPopup" type="bottom" @popchange="popchange">
<view class="wrap w-100" :style="warpFIt">
<view
......@@ -15,60 +15,64 @@
</view>
<scroll-view scroll-y class="sku-list w-100 font-28">
<view
class="sku-item py-2"
v-for="(item, index) in skuData"
:key="index"
>
<view class="w-100 flex j-between a-center mb-2">
<view class="flex-1">{{item.spec_str}}</view>
<view class="step-wrap">
<input-number
:defaultVal="item.counts"
:params="{
index
}"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/>
<template v-if="skuData.length">
<view
class="sku-item py-2"
v-for="(item, index) in skuData"
:key="index"
>
<view class="w-100 flex j-between a-center mb-2">
<view class="flex-1">{{item.spec_str}}</view>
<view class="step-wrap">
<!-- <input-number
:defaultVal="item.counts"
:params="{
index
}"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/> -->
<input-number
:defaultVal.sync="item.counts"
:max="~~item.inventory"
:min="0"
@change="numberChange"
/>
</view>
</view>
</view>
<view class="w-100 flex j-between a-center">
<view class="flex-1 flex j-start a-center price-txt">
<!-- 如果不是阶梯价 ? 价格 === 0 ? 询价 : 固定售价 -->
<template v-if="goods.is_inquiry === '1'">
<text>询价</text>
</template>
<template v-else>
<text>{{item.price}}</text>
<text class="originPrice ml-1">￥{{item.original_price || 0}}</text>
</template>
</view>
<view class="flex-1 text-center">
<text v-if="item.inventory > 0">{{'库存：' + item.inventory}}</text>
<text v-else class="primaryColor">库存需咨询商家</text>
<view class="w-100 flex j-between a-center">
<view class="flex-1 flex j-start a-center price-txt">
<!-- 如果不是阶梯价 ? 价格 === 0 ? 询价 : 固定售价 -->
<template v-if="goods.is_inquiry === '1'">
<text>询价</text>
</template>
<template v-else>
<text>{{item.price}}</text>
<text class="originPrice ml-1">￥{{item.original_price || 0}}</text>
</template>
</view>
<view class="flex-1 text-center">
<text v-if="item.inventory > 0">{{'库存：' + item.inventory}}</text>
<text v-else class="primaryColor">库存需咨询商家</text>
</view>
<view class="payCount text-center">
<text v-if="~~item.origin_number_sku">{{item.origin_number_sku + item.unit}}起购</text>
</view>
</view>
<view class="payCount text-center">
<text v-if="~~item.origin_number_sku">{{item.origin_number_sku + item.unit}}起购</text>
<view class="mt-2 w-100 descColor flex j-start a-center flex-wrap font-24" v-if="item.is_tiered === '1'">
<view
class="mr-3 mb-2"
v-for="tiered_pri in item.tiered_pri"
:key="tiered_pri.num"
>
￥{{tiered_pri.price }}<text class="ml-1">≥{{tiered_pri.num + item.unit}}</text>
</view>
</view>
</view>
<view class="mt-2 w-100 descColor flex j-start a-center flex-wrap font-24" v-if="item.is_tiered === '1'">
<view
class="mr-3 mb-2"
v-for="tiered_pri in item.tiered_pri"
:key="tiered_pri.num"
>
￥{{tiered_pri.price }}<text class="ml-1">≥{{tiered_pri.num + item.unit}}</text>
</view>
</view>
</view>
</template>
</scroll-view>
<view class="flex w-100 a-center flex-column font-28 mt-2">
......@@ -140,6 +144,13 @@ export default {
methods: {
...common,
...mapActions('cart', ['setCount']),
init() {
// 这个init主要是在关闭弹窗时, 把skuData的初始化,让组件下一次打开重新渲染
this.detail = null
this.skuData = []
this.goods = null
},
/**
* @param {Object} params
* goodsInfo: {
......@@ -167,19 +178,19 @@ export default {
hide() {
this.$refs.goodsPopup.close()
// this.showSku = false
this.detail = null
this.skuData = []
this.goods = null
},
popchange(e) {
if(!e.show) {
this.init()
}
},
numberChange(e) {
console.log(e)
const idx = e.params.index
const value = e.val
this.$set(this.skuData[idx], 'counts', value)
// const idx = e.params.index
// const value = e.val
// this.$set(this.skuData[idx], 'counts', value)
this.total()
console.log(this.skuData)
},
total() {
......@@ -187,7 +198,7 @@ export default {
this.totalCounts = skuData.reduce((pre, cur) => { return pre + ~~cur.counts}, 0)
this.totalPrice = skuData.reduce((pre, cur) => {
const price = +cur.price
const counts = ~~cur.counts
const counts = +cur.counts
if(cur.is_tiered === '1') { // 阶梯价 询价不管，不展示，按固定价计算
const tiered_pri = cur.tiered_pri
for(let i = 0, j = tiered_pri.length; i < j; i ++) {
......@@ -201,7 +212,6 @@ export default {
return pre + price * counts
}
}, 0).toFixed(2)
},
// 加入购物车
......@@ -234,7 +244,6 @@ export default {
handlePay() {
try{
const skuData = this.skuData
console.log(skuData)
if(!skuData.length) return
if(!this.totalCounts) return this.$toast({title: '请选择购买数量'})
if(!this.judgePay(skuData)) return this.$toast({title: '购买数量不能少于起购数量'})
......
components/inputNumber/index.vue
View file @ 52c863a2
<template>
<view class="wrpper flex j-between a-center" @touchmove.stop.prevent="clear">
<!-- 减 -->
<view
class="btn iconfont icon-jianhao flex j-center a-center"
:class="calVal <= min ? 'disabled' : null"
@click.stop="subtraction"
></view>
<!-- 输入 -->
<input
class="input"
type="number"
......@@ -13,6 +15,7 @@
@focus="inputFocus"
@blur="inputVal"
/>
<!-- 加 -->
<view
class="btn iconfont icon-hao flex j-center a-center"
:class="(max && (calVal >= max)) ? 'disabled' : null"
......@@ -22,6 +25,13 @@
</template>
<script>
/**
* @param { Number } min 最小值
* @param { Number } max 最大值
* @defaultVal { Number } 默认值
*
* @warning 每次关闭
*/
import { throttle } from '@/utils/common.js'
export default {
props: {
......@@ -39,7 +49,7 @@ export default {
},
params: {
type: Object,
default: () => {}
default: null
}
},
data() {
......@@ -49,25 +59,25 @@ export default {
},
watch: {
// calVal用于内部计算，但是父组件改变了defaultVal的值会不更新calVal(临时解决)
defaultVal(newVal) {
this.calVal = ~~newVal
},
// defaultVal(newVal) {
// this.calVal = ~~newVal
// },
calVal: throttle(function(newVal) {
const max = this.max
const min = this.min
const newVal_number = ~~newVal
if(max && newVal_number > max) return
if(newVal_number < min) return
const newVal_number = +newVal // 一般来说都是Number的 以防万一
const params = this.params
if(max && (newVal_number > max)) return console.log('too max')
if(newVal_number < min) return console.logout("too min")
this.$emit('update:defaultVal', newVal_number);
this.$emit('change', {
params: this.params,
...params,
val: newVal_number
})
}, 300)
},
methods: {
clear(e) {
// TODO nvue 取消冒泡
e.stopPropagation()
return
},
subtraction() {
......@@ -80,17 +90,17 @@ export default {
const max = this.max
if(max && val >= max) {
this.calVal = max
this.$toast({title: '数量不能大于商品库存'})
return
return this.$toast({title: '数量不能大于商品库存'})
}
this.calVal += 1
},
inputVal(e) {
// 这个主要是 用于购物车时的遮罩
this.$emit('inputBlur')
let inputVal = ~~e.detail.value
const max = this.max
const min = this.min
if(max && inputVal >= max) {
if(max && inputVal > max) {
inputVal = max
this.$toast({title: '数量不能大于商品库存'})
} else if(inputVal < min) {
......@@ -99,6 +109,8 @@ export default {
}
this.calVal = inputVal
},
// 这个主要是用于购物车的遮罩层
inputFocus() {
this.$emit('inputFocus')
}
......
config/index.js
View file @ 52c863a2
const env = {
release: 'https://www.gelifood.com', // 正式版
trial: 'https://www.gelifood.com', // 体验版
develop: 'https://www.gelifood.com' // 开发版
develop: 'https://d.gelifood.com' // 开发版
}
// 不考虑其他端小程序直接这样配置
......
pages/carts/index.vue
View file @ 52c863a2
......@@ -70,13 +70,12 @@
></view>
<view class="w-100 flex j-between a-center">
<view class="specification font-24">{{cart.specification}}</view>
<view class="step-wrap" @click.stop="stopClick">
<view class="step-wrap" @click.stop="inputClear">
<input-number
:defaultVal="cart.origin_number_sku | defaultCounts(cart.cart_number)"
:min="cart.origin_number_sku !== '0' ? cart.origin_number_sku : 1"
:min="cart.origin_number_sku !== '0' ? ~~cart.origin_number_sku : 1"
:params="{
wrapIdx: index,
innerIdx: cartIdx
cart_id: cart.cart_id
}"
@change="numberChange"
@inputFocus="inputFocus"
......@@ -194,7 +193,7 @@ export default {
},
onPullDownRefresh() {
setTimeout(function () {
setTimeout(() => {
this.getCartList()
uni.stopPullDownRefresh();
}, 800);
......@@ -240,7 +239,11 @@ export default {
methods: {
...mapActions('cart', ['setCount']),
...cartModules,
stopClick() {return}, // 阻止input事件的冒泡
inputClear() {
// 这个return不要删,主要时阻止事件冒泡
return
},
// login
handleLogin() {
uni.navigateTo({
......@@ -274,11 +277,11 @@ export default {
// 编辑数量
async numberChange(e) {
try{
const cart_id = this.cartList[e.params.wrapIdx].list[e.params.innerIdx].cart_id
const { status } = await editCart({cart_id, cart_number: e.val})
const { cart_id, val: cart_number } = e
console.log(cart_id, cart_number)
const { status } = await editCart({cart_id, cart_number})
if(status) {
this.setCount()
this.$set(this.cartList[e.params.wrapIdx].list[e.params.innerIdx], 'cart_number', e.val)
}
}catch(e){
console.log(e)
......
pages/category/index.vue
View file @ 52c863a2
......@@ -75,7 +75,7 @@
<view class="goods-price flex-1 flex flex-column j-between font-28">
<view class="title">{{good.goods_name}}</view>
<view class="descColor desc font-24 w-100 flex j-between a-center">
<text class="flex-1">{{good.specification}}</text>
<text class="flex-1 overtext-1">{{good.specification}}</text>
<text class="sale-count text-right">销量：{{good.virtual_quantity_sold}}</text>
</view>
<view class="w-100 flex j-between a-center">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment