chore(components): diy组件部分添加点击事件句柄重新处理

This commit is contained in:
2025-10-30 18:09:57 +08:00
parent fc232ad938
commit 55ebc174b9
15 changed files with 180 additions and 70 deletions

View File

@@ -2,7 +2,7 @@
<x-skeleton data-component-name="diy-goods-list" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view :class="['goods-list', goodsValue.template, goodsValue.style]" :style="goodsListWarpCss">
<template v-if="goodsValue.template != 'horizontal-slide'">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<view class="goods-img-wrap">
<image class="goods-img" :src="$util.img(item.goods_image, { size: goodsValue.template == 'large-mode' ? 'big' : 'mid' })" mode="widthFix" @error="imgError(index)" :style="{ borderRadius: goodsValue.imgAroundRadius * 2 + 'rpx' }"/>
<view class="sell-out" v-if="item.stock <= 0">
@@ -99,7 +99,7 @@
</view>
</template>
<scroll-view v-if="goodsValue.template == 'horizontal-slide' && goodsValue.slideMode == 'scroll'" class="scroll" :scroll-x="true">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<view class="goods-img-wrap">
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)" :lazy-load="true"/>
<view class="sell-out" v-if="item.stock <= 0">
@@ -149,7 +149,7 @@
</scroll-view>
<swiper v-if="goodsValue.template == 'horizontal-slide' && goodsValue.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="goods-item" v-for="(dataItem, dataIndex) in list[pageIndex]" :key="dataIndex" @click="toDetail(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<view class="goods-item" v-for="(dataItem, dataIndex) in list[pageIndex]" :key="dataIndex" @click="handlerClick(dataItem)" @tap="handlerClick(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<view class="goods-img-wrap">
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(dataIndex)" :lazy-load="true"/>
<view class="sell-out" v-if="dataItem.stock <= 0">
@@ -210,6 +210,7 @@
<script>
import nsGoodsSkuIndex from '@/components/ns-goods-sku/ns-goods-sku-index.vue';
import DiyMinx from './minx.js'
export default {
name: 'diy-goods-list',
components: {
@@ -241,6 +242,7 @@
this.initSkeleton();
this.getGoodsList();
},
mixins: [DiyMinx],
watch: {
'globalStoreInfo.store_id': {
handler(nval, oval) {
@@ -525,6 +527,13 @@
.toString()
.substr(3, len) + Date.now()
).toString(36);
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'goods-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}})
}
}
};