回到最新版本

ghsPad/src/pages/home/components/rightItem.vue

@@ -19,21 +19,33 @@
         </view>
 
         <view class="cat-list-area">
-            <view v-for="item in globalRightItemClass" :key="item.id" :class="[globalRightItemCategoryId===item.id?'active':'']" @click="handleCategoryClick(item)" > {{item.name}} </view>
+            <!-- 小程序端 @click="fn(item)" 对 v-for 变量传递不稳定，改用 data-index + 列表取项 -->
+            <view
+                v-for="(catItem, catIdx) in globalRightItemClass"
+                :key="categoryTabKey(catItem, catIdx)"
+                :class="[globalRightItemCategoryId===catItem.id?'active':'']"
+                :data-cid="catItem.id"
+                :data-cat-index="catIdx"
+                @click.stop="handleCategoryClick"
+            >
+                <text class="cat-tab-name">{{ catItem.name }}</text>
+            </view>
         </view>
         <view class="shop-show_box">
             <view v-if="filteredItemList.length === 0" class="no-data-tip">
                 <text>{{ searchKeyword ? '未找到相关花材' : '暂无花材' }}</text>
             </view>
-            <view v-for="item in filteredItemList" :key="item.id" class="show-shop_box">
+            <!-- key：id+property+下标，避免任意重复键；名称须用 text，避免 App 端 view 插值与 image 异步刷新不同步出现「名错图对」 -->
+            <view v-for="(item, flowerIdx) in filteredItemList" :key="flowerItemRowKey(item, flowerIdx)" class="show-shop_box">
                 <view class="item-detail" @click="popAddModelFn(item)">
-                    <image class="img" :src="item.cover" lazy-load="true" :lazy-load-margin="0" mode="scaleToFill" ></image>
+                    <!-- 收银格图片小，关闭懒加载可减少原生 image 与底部文案层的刷新不同步（偶发相邻标题串位） -->
+                    <image class="img" :key="flowerItemRowKey(item, flowerIdx)" :src="item.cover" :lazy-load="false" mode="scaleToFill" ></image>
                     <!-- 多颜色类型标识 -->
                     <view v-if="item.variety == 1" class="variety-badge"></view>
                     <view class="shop-info_price">
                         <view>
-                            <view>{{item.name}}</view>
-                            <view style="display:flex;justify-content: space-between;padding-right:2upx;">
+                            <text class="flower-card-name" :key="'nm-' + item.id + '-' + flowerIdx" @click.stop="quickAddItem(item)">{{ item.name }}</text>
+                            <view class="flower-card-meta" @click.stop="quickAddItem(item)">
                                 <text>￥{{parseFloat(item.price)}}</text>
                                 <text v-if="Number(item.reachNumDiscount)>0 && Number(item.reachNum)>0" style="color:#FFEB3B;">{{ item.reachNum }}↓{{ item.reachNumDiscount?parseFloat(item.reachNumDiscount):0 }}</text>
                                 <text>剩{{parseFloat(item.stock)}}</text>
@@ -157,6 +169,17 @@ export default {
         }
     },
     methods:{
+        /** 顶部分类 tab：id + 下标，避免 App 端同结构列表偶发文字与点击项不一致 */
+        categoryTabKey(catItem, index) {
+            const id = catItem && catItem.id != null ? catItem.id : 'noid'
+            return `cat-${id}-${index}`
+        },
+        /** 列表行 key：优先 id+property（多规格），再拼下标保证唯一，避免 v-for 在部分端上节点复用异常 */
+        flowerItemRowKey(item, index) {
+            const id = item && item.id != null ? item.id : 'noid'
+            const prop = item && item.property !== undefined && item.property !== null ? item.property : 1
+            return `fl-${id}-${prop}-${index}`
+        },
         addToClear(){
             this.$msg('请扫码打开')
         },
@@ -166,11 +189,26 @@ export default {
                 this.closeSearchBox()
             }
         },
-        handleCategoryClick(item){
-            // 点击分类时清空搜索框
+        handleCategoryClick(e){
+            const cur = e && e.currentTarget ? e.currentTarget : (e && e.target)
+            const ds = cur && cur.dataset ? cur.dataset : {}
+            const list = this.globalRightItemClass || []
+            let cat = null
+            if (ds.cid !== undefined && ds.cid !== '') {
+                const cid = ds.cid
+                cat = list.find(function (c) { return String(c.id) === String(cid) })
+            }
+            if (!cat && ds.catIndex !== undefined && ds.catIndex !== '') {
+                const idx = Number(ds.catIndex)
+                if (!isNaN(idx)) {
+                    cat = list[idx]
+                }
+            }
+            if (!cat || cat.id == null) {
+                return
+            }
             this.searchKeyword = ''
-            // 调用原来的分类切换方法
-            this.globalChangeCategory(item)
+            this.globalChangeCategory(cat)
         },
         toggleSearchBox(){
             this.showSearchBox = !this.showSearchBox
@@ -185,9 +223,37 @@ export default {
             this.searchKeyword = ''
         },
 		popAddModelFn(info) {
+            const property = info.property !== undefined ? info.property : 1
+            this.notifyOperateItem({ ...info, property })
             this.$util.hitVoice()
-			this.showAddModelFn({ ...info, currentNum: 1, unitPrice: info.price,unitType:0})
+			this.showAddModelFn({ ...info, property, currentNum: 1, unitPrice: info.price,unitType:0})
 		},
+        quickAddItem(info){
+            const property = info.property !== undefined ? info.property : 1
+            this.notifyOperateItem({ ...info, property })
+            const hasItem = this.selectList.find(item => Number(item.id) == Number(info.id) && Number(item.property) == Number(property))
+            this.$util.hitVoice()
+            if(hasItem){
+                const currentNum = Number(hasItem.currentNum) || 0
+                this.replaceItemFn({ ...hasItem, currentNum: currentNum + 1 })
+                return
+            }
+            const unitName = property == 1 ? (info.bigUnit || info.unitName || '扎') : '份'
+            const unitPrice = property == 1 ? (info.bigPrice || info.price || info.unitPrice) : (info.price || info.unitPrice)
+            this.replaceItemFn({ ...info, property, currentNum: 1, unitPrice, unitType: 0, unitName})
+        },
+        notifyOperateItem(item){
+            this.$emit('operateItem', item)
+        },
+        addItemModelHidden() {
+            if(this.customData && this.customData.id){
+                this.notifyOperateItem(this.customData)
+            }
+            if(this.$refs.selectNumPriceRef){
+                this.$refs.selectNumPriceRef.close()
+            }
+            this.customData = {};
+        },
         refreshMyRightItem(customId){
 			this.globalRightItemCustomId = customId
 			this.itemRefresh()
@@ -250,14 +316,18 @@ export default {
                     box-sizing: border-box;
                     z-index: 10;
                     & > view {
-                        & > view:nth-child(1) {
+                        & > .flower-card-name {
+                            display: block;
                             overflow: hidden;
                             white-space: nowrap;
-                            width:100%;
-                            font-size:9upx;
+                            width: 100%;
+                            font-size: 9upx;
                         }
-                        & > view:nth-child(2) {
-                            font-size:7upx;
+                        & > .flower-card-meta {
+                            display: flex;
+                            justify-content: space-between;
+                            padding-right: 2upx;
+                            font-size: 7upx;
                         }
                     }
                 }
@@ -278,13 +348,18 @@ export default {
             padding: 8upx 0upx;
             font-size: 9upx;
             width: 68upx;
-            overflow: hidden;
-            white-space: nowrap;
             text-align: center;
             &.active {
                 background-color: #3385FF;
                 color: #ffffff;
             }
+            .cat-tab-name {
+                display: block;
+                overflow: hidden;
+                white-space: nowrap;
+                width: 100%;
+                font-size: 9upx;
+            }
         }
     }
     & .shop-show_box {

hdPad/src/pages/home/components/rightItem.vue

@@ -30,9 +30,10 @@
                     <image class="img" :src="item.cover" lazy-load="true" :lazy-load-margin="0" mode="scaleToFill" ></image>
                     <view class="shop-info_price">
                         <view>
-                            <view>{{item.name}}</view>
-                            <view style="display:flex;justify-content: space-between;padding-right:2upx;">
-                                <text>￥{{parseFloat(item.price)}}</text><text>剩{{parseFloat(item.stock)}}</text>
+                            <view @click.stop="quickAddItem(item)">{{item.name}}</view>
+                            <view style="display:flex;justify-content: space-between;padding-right:2upx;" @click.stop="quickAddItem(item)">
+                                <text>￥{{parseFloat(item.price)}}</text>
+                                <text>剩{{parseFloat(item.stock)}}</text>
                             </view>
                         </view>
                     </view>
@@ -84,12 +85,12 @@ export default {
             default:0
         }
     },
-    mounted(){
-        let id = this.customId>0 ? this.customId : 0
-        if(id>0){
-            this.globalGetRightItem(id)
-        }
-    },
+    // mounted(){ // watch.customId 处会自动调用globalGetRightItem
+    //     let id = this.customId>0 ? this.customId : 0
+    //     if(id>0){
+    //         this.globalGetRightItem(id)
+    //     }
+    // },
 	created(){
 		this.listenScanItem()
     },
@@ -179,9 +180,37 @@ export default {
             this.searchKeyword = ''
         },
 		popAddModelFn(info) {
+            const property = info.property !== undefined ? info.property : 1
+            this.notifyOperateItem({ ...info, property })
             this.$util.hitVoice()
-			this.showAddModelFn({ ...info, currentNum: 1, unitPrice: info.price,unitType:0})
+			this.showAddModelFn({ ...info, property, currentNum: 1, unitPrice: info.price,unitType:0})
 		},
+        quickAddItem(info){
+            const property = info.property !== undefined ? info.property : 1
+            this.notifyOperateItem({ ...info, property })
+            const hasItem = this.selectList.find(item => Number(item.id) == Number(info.id) && Number(item.property) == Number(property))
+            this.$util.hitVoice()
+            if(hasItem){
+                const currentNum = Number(hasItem.currentNum) || 0
+                this.replaceItemFn({ ...hasItem, currentNum: currentNum + 1 })
+                return
+            }
+            const unitName = property == 1 ? (info.bigUnit || info.unitName || '扎') : '份'
+            const unitPrice = property == 1 ? (info.bigPrice || info.price || info.unitPrice) : (info.price || info.unitPrice)
+            this.replaceItemFn({ ...info, property, currentNum: 1, unitPrice, unitType: 0, unitName})
+        },
+        notifyOperateItem(item){
+            this.$emit('operateItem', item)
+        },
+        addItemModelHidden() {
+            if(this.customData && this.customData.id){
+                this.notifyOperateItem(this.customData)
+            }
+            if(this.$refs.selectNumPriceRef){
+                this.$refs.selectNumPriceRef.close()
+            }
+            this.customData = {};
+        },
         renewMyRightItem(customId){
             this.globalRightItemCustomId = customId
             this.globalItemRefresh(customId)