|
|
@@ -5,10 +5,19 @@
|
|
|
<text style="float:right;">{{ getMyShopInfo.shop.shopName=='首店'? getMyShopInfo.shop.merchantName: getMyShopInfo.shop.merchantName+' '+getMyShopInfo.shop.shopName}}</text>
|
|
|
</view>
|
|
|
<view class="itemList-item_box">
|
|
|
- <view v-for="item in selectList" :key="item.id" class="show-item_box">
|
|
|
- <view class="item-body_box not-active" @click="popAddModelFn(item)">
|
|
|
+ <view
|
|
|
+ v-for="item in selectList"
|
|
|
+ :key="item.id"
|
|
|
+ class="show-item_box"
|
|
|
+ @touchstart="onItemTouchStart(item, $event)"
|
|
|
+ @touchmove="onItemTouchMove(item, $event)"
|
|
|
+ @touchend="onItemTouchEnd(item)"
|
|
|
+ @touchcancel="onItemTouchEnd(item)"
|
|
|
+ >
|
|
|
+ <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="flower-name_box">
|
|
|
- <view class="current-item-title"><text class="name">{{item.name}}</text><text @click.stop="delItem(item)" class="del">删除</text></view>
|
|
|
+ <view class="current-item-title"><text class="name">{{item.name}}</text></view>
|
|
|
</view>
|
|
|
<view class="item-price-num">
|
|
|
<template v-if="item.property && item.property == 1">
|
|
|
@@ -61,7 +70,12 @@ export default {
|
|
|
data(){
|
|
|
return {
|
|
|
totalShop:{ bigUnit: 0, smallUnit:0, totalPrice: 0 },
|
|
|
- itemList:[]
|
|
|
+ itemList:[],
|
|
|
+ swipeItemId: '',
|
|
|
+ touchStartX: 0,
|
|
|
+ touchStartY: 0,
|
|
|
+ isHorizontalSwipe: false,
|
|
|
+ lastSwipeTime: 0
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
@@ -82,6 +96,42 @@ export default {
|
|
|
...mapGetters(["getMyShopInfo"]),
|
|
|
},
|
|
|
methods:{
|
|
|
+ getTouchPoint(event) {
|
|
|
+ const touches = event.changedTouches || event.touches || []
|
|
|
+ return touches[0]
|
|
|
+ },
|
|
|
+ onItemTouchStart(item, event) {
|
|
|
+ const touch = this.getTouchPoint(event)
|
|
|
+ if (!touch) return
|
|
|
+ this.touchStartX = touch.clientX
|
|
|
+ this.touchStartY = touch.clientY
|
|
|
+ this.isHorizontalSwipe = false
|
|
|
+ },
|
|
|
+ onItemTouchMove(item, event) {
|
|
|
+ const touch = this.getTouchPoint(event)
|
|
|
+ if (!touch) return
|
|
|
+ const moveX = touch.clientX - this.touchStartX
|
|
|
+ const moveY = touch.clientY - this.touchStartY
|
|
|
+ if (Math.abs(moveX) <= Math.abs(moveY) || Math.abs(moveX) < 15) return
|
|
|
+ this.isHorizontalSwipe = true
|
|
|
+ this.swipeItemId = moveX < 0 ? item.id : ''
|
|
|
+ },
|
|
|
+ onItemTouchEnd() {
|
|
|
+ if (this.isHorizontalSwipe) {
|
|
|
+ this.lastSwipeTime = Date.now()
|
|
|
+ }
|
|
|
+ this.touchStartX = 0
|
|
|
+ this.touchStartY = 0
|
|
|
+ this.isHorizontalSwipe = false
|
|
|
+ },
|
|
|
+ handleItemClick(item) {
|
|
|
+ if (this.swipeItemId === item.id) {
|
|
|
+ if (Date.now() - this.lastSwipeTime < 300) return
|
|
|
+ this.swipeItemId = ''
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.popAddModelFn(item)
|
|
|
+ },
|
|
|
popAddModelFn(info) {
|
|
|
let currentNum = info.currentNum
|
|
|
let unitPrice = info.unitPrice
|
|
|
@@ -91,6 +141,7 @@ export default {
|
|
|
},
|
|
|
delItem(item){
|
|
|
this.$util.hitVoice()
|
|
|
+ this.swipeItemId = ''
|
|
|
item.currentNum = 0
|
|
|
this.replaceItemFn(item)
|
|
|
}
|
|
|
@@ -115,11 +166,33 @@ export default {
|
|
|
border: 1px solid #eee;
|
|
|
& .show-item_box {
|
|
|
padding: 2upx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .delete-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 2upx;
|
|
|
+ right: 2upx;
|
|
|
+ bottom: 2upx;
|
|
|
+ width: 40upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 12upx;
|
|
|
+ background-color: #f56c6c;
|
|
|
+ border-radius: 2upx;
|
|
|
+ }
|
|
|
& .item-body_box {
|
|
|
+ position: relative;
|
|
|
border-radius: 2upx;
|
|
|
padding: 2upx;
|
|
|
font-size: 14upx;
|
|
|
color:#666666;
|
|
|
+ transition: transform 0.2s;
|
|
|
+ z-index: 1;
|
|
|
+ &.is-swiped {
|
|
|
+ transform: translateX(-42upx);
|
|
|
+ }
|
|
|
&.active {
|
|
|
background-color: #d4d6d6;
|
|
|
}
|
|
|
@@ -143,11 +216,6 @@ export default {
|
|
|
width:50upx;
|
|
|
font-size:11upx;
|
|
|
}
|
|
|
- .del{
|
|
|
- color:orange;
|
|
|
- font-size:12upx;
|
|
|
- float:right;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
& > view:nth-child(2) {
|
