|
|
@@ -4,26 +4,38 @@
|
|
|
列表
|
|
|
<text style="float:right;">{{ getMyShopInfo.shop.shopName=='首店'? getMyShopInfo.shop.merchantName: getMyShopInfo.shop.merchantName+' '+getMyShopInfo.shop.shopName}}</text>
|
|
|
</view>
|
|
|
- <view class="itemList-item_box">
|
|
|
+ <scroll-view
|
|
|
+ class="itemList-item_box"
|
|
|
+ scroll-y
|
|
|
+ scroll-with-animation
|
|
|
+ :scroll-into-view="activeScrollIntoView"
|
|
|
+ >
|
|
|
<view
|
|
|
v-for="item in selectList"
|
|
|
- :key="item.id"
|
|
|
+ :key="getItemKey(item)"
|
|
|
+ :id="getItemScrollId(item)"
|
|
|
+ :data-item-key="getItemKey(item)"
|
|
|
class="show-item_box"
|
|
|
- @touchstart="onItemTouchStart(item, $event)"
|
|
|
- @touchmove="onItemTouchMove(item, $event)"
|
|
|
- @touchend="onItemTouchEnd(item)"
|
|
|
- @touchcancel="onItemTouchEnd(item)"
|
|
|
+ @touchstart="onItemTouchStartByEvent"
|
|
|
+ @touchmove="onItemTouchMoveByEvent"
|
|
|
+ @touchend="onItemTouchEndByEvent"
|
|
|
+ @touchcancel="onItemTouchEndByEvent"
|
|
|
>
|
|
|
- <view class="delete-btn" @click.stop="delItem(item)">删除</view>
|
|
|
- <view class="item-body_box not-active" :class="{'is-swiped': swipeItemId === item.id}" @click="handleItemClick(item)">
|
|
|
+ <view class="delete-btn" :data-item-key="getItemKey(item)" @click.stop="delItemByEvent">删除</view>
|
|
|
+ <view
|
|
|
+ class="item-body_box not-active"
|
|
|
+ :data-item-key="getItemKey(item)"
|
|
|
+ :class="{'is-swiped': swipeItemId === item.id, 'is-operated': activeItemKey === getItemKey(item)}"
|
|
|
+ @click="handleItemClickByEvent"
|
|
|
+ >
|
|
|
<view class="flower-name_box">
|
|
|
<view class="current-item-title">
|
|
|
<text class="name">{{item.name}}</text>
|
|
|
<view class="num-action_box">
|
|
|
- <view class="num-btn" @click.stop="changeItemNum(item, -1)">
|
|
|
+ <view class="num-btn" :data-item-key="getItemKey(item)" @click.stop="changeItemNumByEvent($event, -1)">
|
|
|
<zui-svg-icon icon="general-sub" :width="28" :height="28" color="#8abf8a" />
|
|
|
</view>
|
|
|
- <view class="num-btn" @click.stop="changeItemNum(item, 1)">
|
|
|
+ <view class="num-btn" :data-item-key="getItemKey(item)" @click.stop="changeItemNumByEvent($event, 1)">
|
|
|
<zui-svg-icon icon="general-plus" :width="28" :height="28" color="#8abf8a" />
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -42,7 +54,7 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </scroll-view>
|
|
|
<view class="itemList-footer_box">
|
|
|
<view> 数量
|
|
|
<text style="margin-left:5upx;">
|
|
|
@@ -75,6 +87,12 @@ export default {
|
|
|
changeCurrentJobId:{
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
+ },
|
|
|
+ activeItemMark:{
|
|
|
+ type: Object,
|
|
|
+ default(){
|
|
|
+ return { key:'', time:0 }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
data(){
|
|
|
@@ -82,6 +100,8 @@ export default {
|
|
|
totalShop:{ bigUnit: 0, smallUnit:0, totalPrice: 0 },
|
|
|
itemList:[],
|
|
|
swipeItemId: '',
|
|
|
+ activeItemKey: '',
|
|
|
+ activeScrollIntoView: '',
|
|
|
touchStartX: 0,
|
|
|
touchStartY: 0,
|
|
|
isHorizontalSwipe: false,
|
|
|
@@ -100,6 +120,23 @@ export default {
|
|
|
this.currentJobId = id
|
|
|
},
|
|
|
immediate:true
|
|
|
+ },
|
|
|
+ activeItemMark:{
|
|
|
+ handler(mark){
|
|
|
+ if(mark && mark.key){
|
|
|
+ this.activeItemKey = mark.key
|
|
|
+ this.scrollToActiveItemByKey(mark.key)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate:true
|
|
|
+ },
|
|
|
+ selectList:{
|
|
|
+ handler(){
|
|
|
+ if(this.activeItemKey){
|
|
|
+ this.scrollToActiveItemByKey(this.activeItemKey)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep:true
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
@@ -110,14 +147,64 @@ export default {
|
|
|
const touches = event.changedTouches || event.touches || []
|
|
|
return touches[0]
|
|
|
},
|
|
|
+ getItemKey(item) {
|
|
|
+ const property = item.property !== undefined ? item.property : 1
|
|
|
+ return `${item.id}_${property}`
|
|
|
+ },
|
|
|
+ getScrollIdByKey(key) {
|
|
|
+ return `select-item-${key}`
|
|
|
+ },
|
|
|
+ getItemScrollId(item) {
|
|
|
+ return this.getScrollIdByKey(this.getItemKey(item))
|
|
|
+ },
|
|
|
+ getEventItem(event) {
|
|
|
+ const dataset = event && event.currentTarget && event.currentTarget.dataset
|
|
|
+ const key = dataset && dataset.itemKey
|
|
|
+ if (!key) return null
|
|
|
+ return this.selectList.find(item => this.getItemKey(item) === key)
|
|
|
+ },
|
|
|
+ scrollToActiveItemByKey(key) {
|
|
|
+ this.activeScrollIntoView = ''
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.activeScrollIntoView = this.getScrollIdByKey(key)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setActiveItem(item) {
|
|
|
+ const key = this.getItemKey(item)
|
|
|
+ this.activeItemKey = key
|
|
|
+ this.scrollToActiveItemByKey(key)
|
|
|
+ },
|
|
|
+ clearActiveItem(item) {
|
|
|
+ if (this.activeItemKey === this.getItemKey(item)) {
|
|
|
+ this.activeItemKey = ''
|
|
|
+ this.activeScrollIntoView = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ hasEnoughStock(item, num) {
|
|
|
+ if (!this.checkStock || num <= 0) return true
|
|
|
+ if (item.unitType == 0) {
|
|
|
+ return Number(num) <= Number(item.stock)
|
|
|
+ }
|
|
|
+ const stockNum = (Number(num) / Number(item.ratio)).toFixed(2)
|
|
|
+ return Number(stockNum) <= Number(item.stock)
|
|
|
+ },
|
|
|
+ showNoStockTip(item) {
|
|
|
+ this.$util.noStockRemind()
|
|
|
+ this.$msg(item.unitType == 0 ? "库存不足" : "库存不足哦")
|
|
|
+ },
|
|
|
onItemTouchStart(item, event) {
|
|
|
+ if (!item) return
|
|
|
const touch = this.getTouchPoint(event)
|
|
|
if (!touch) return
|
|
|
this.touchStartX = touch.clientX
|
|
|
this.touchStartY = touch.clientY
|
|
|
this.isHorizontalSwipe = false
|
|
|
},
|
|
|
+ onItemTouchStartByEvent(event) {
|
|
|
+ this.onItemTouchStart(this.getEventItem(event), event)
|
|
|
+ },
|
|
|
onItemTouchMove(item, event) {
|
|
|
+ if (!item) return
|
|
|
const touch = this.getTouchPoint(event)
|
|
|
if (!touch) return
|
|
|
const moveX = touch.clientX - this.touchStartX
|
|
|
@@ -126,7 +213,11 @@ export default {
|
|
|
this.isHorizontalSwipe = true
|
|
|
this.swipeItemId = moveX < 0 ? item.id : ''
|
|
|
},
|
|
|
- onItemTouchEnd() {
|
|
|
+ onItemTouchMoveByEvent(event) {
|
|
|
+ this.onItemTouchMove(this.getEventItem(event), event)
|
|
|
+ },
|
|
|
+ onItemTouchEnd(item) {
|
|
|
+ if (!item) return
|
|
|
if (this.isHorizontalSwipe) {
|
|
|
this.lastSwipeTime = Date.now()
|
|
|
}
|
|
|
@@ -134,15 +225,23 @@ export default {
|
|
|
this.touchStartY = 0
|
|
|
this.isHorizontalSwipe = false
|
|
|
},
|
|
|
+ onItemTouchEndByEvent(event) {
|
|
|
+ this.onItemTouchEnd(this.getEventItem(event))
|
|
|
+ },
|
|
|
handleItemClick(item) {
|
|
|
+ if (!item) return
|
|
|
if (this.swipeItemId === item.id) {
|
|
|
if (Date.now() - this.lastSwipeTime < 300) return
|
|
|
this.swipeItemId = ''
|
|
|
return
|
|
|
}
|
|
|
this.popAddModelFn(item)
|
|
|
+ },
|
|
|
+ handleItemClickByEvent(event) {
|
|
|
+ this.handleItemClick(this.getEventItem(event))
|
|
|
},
|
|
|
popAddModelFn(info) {
|
|
|
+ this.setActiveItem(info)
|
|
|
let currentNum = info.currentNum
|
|
|
let unitPrice = info.unitPrice
|
|
|
let unitType = info.unitType
|
|
|
@@ -150,17 +249,36 @@ export default {
|
|
|
this.showAddModelFn({ ...info, currentNum: currentNum, unitPrice: unitPrice,unitType:unitType,action:'update'})
|
|
|
},
|
|
|
delItem(item){
|
|
|
+ if (!item) return
|
|
|
this.$util.hitVoice()
|
|
|
this.swipeItemId = ''
|
|
|
+ this.clearActiveItem(item)
|
|
|
item.currentNum = 0
|
|
|
this.replaceItemFn(item)
|
|
|
},
|
|
|
+ delItemByEvent(event) {
|
|
|
+ this.delItem(this.getEventItem(event))
|
|
|
+ },
|
|
|
changeItemNum(item, step) {
|
|
|
+ if (!item) return
|
|
|
this.$util.hitVoice()
|
|
|
this.swipeItemId = ''
|
|
|
const currentNum = Number(item.currentNum) || 0
|
|
|
- item.currentNum = Math.max(0, currentNum + step)
|
|
|
+ const nextNum = Math.max(0, currentNum + step)
|
|
|
+ if (!this.hasEnoughStock(item, nextNum)) {
|
|
|
+ this.showNoStockTip(item)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ item.currentNum = nextNum
|
|
|
+ if (nextNum > 0) {
|
|
|
+ this.setActiveItem(item)
|
|
|
+ } else {
|
|
|
+ this.clearActiveItem(item)
|
|
|
+ }
|
|
|
this.replaceItemFn(item)
|
|
|
+ },
|
|
|
+ changeItemNumByEvent(event, step) {
|
|
|
+ this.changeItemNum(this.getEventItem(event), step)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -180,6 +298,7 @@ export default {
|
|
|
margin-bottom:72upx;
|
|
|
overflow-y: auto;
|
|
|
flex: 1;
|
|
|
+ height: 0;
|
|
|
border: 1px solid #eee;
|
|
|
& .show-item_box {
|
|
|
padding: 2upx;
|
|
|
@@ -187,9 +306,9 @@ export default {
|
|
|
overflow: hidden;
|
|
|
.delete-btn {
|
|
|
position: absolute;
|
|
|
- top: 2upx;
|
|
|
- right: 2upx;
|
|
|
- bottom: 2upx;
|
|
|
+ top: 3upx;
|
|
|
+ right: 3upx;
|
|
|
+ bottom: 3upx;
|
|
|
width: 40upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -201,15 +320,19 @@ export default {
|
|
|
}
|
|
|
& .item-body_box {
|
|
|
position: relative;
|
|
|
- border-radius: 2upx;
|
|
|
+ border-radius: 4upx;
|
|
|
padding: 2upx;
|
|
|
font-size: 14upx;
|
|
|
color:#666666;
|
|
|
+ border-bottom: 3upx solid transparent;
|
|
|
transition: transform 0.2s;
|
|
|
z-index: 1;
|
|
|
&.is-swiped {
|
|
|
transform: translateX(-42upx);
|
|
|
}
|
|
|
+ &.is-operated {
|
|
|
+ border-bottom-color: #8abf8a;
|
|
|
+ }
|
|
|
&.active {
|
|
|
background-color: #d4d6d6;
|
|
|
}
|
