Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ZF Sun
2025-10-30 18:09:57 +08:00
parent fc232ad938
commit 55ebc174b9
15 changed files with 180 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/diy-components/diy-goods-brand.vue
View File

@@ -6,7 +6,7 @@
</view>
<view class="ul-wrap">
<view class="li-item" v-for="(item, index) in list" :key="index">
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="toDetail(item)" @error="imgError(index)" :style="itemCss"/>
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)" :style="itemCss"/>
</view>
</view>
</view>
@@ -19,6 +19,8 @@
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import DiyMinx from './minx.js'
export default {
name: 'diy-goods-brand',
props: {
@@ -47,6 +49,7 @@
created() {
this.getBrandList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
@@ -113,7 +116,13 @@
},
imgError(index) {
if (this.list[index]) this.list[index].image_url = this.$util.getDefaultImage().goods;
}
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'goods-brand-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}})
},
}
};
</script>

15
components/diy-components/diy-goods-list.vue
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);
}})
}
}
};

15
components/diy-components/diy-img-ads.vue
View File

@@ -2,7 +2,7 @@
<view data-component-name="diy-img-ads" class="single-graph">
<view :style="imgAdsMarginWarp" class="swiper-box">
<block v-if="imgAdsValue.list.length == 1">
<view class="simple-graph-wrap" :style="imgAdsSwiper" @click="$util.diyRedirectTo(imgAdsValue.list[0].link)">
<view class="simple-graph-wrap" :style="imgAdsSwiper" @click="handlerClick(imgAdsValue.list[0].link)" @tap="handlerClick(imgAdsValue.list[0].link)">
<image :style="{ height: imgAdsValue.list[0].imgHeight }" :src="$util.img(imgAdsValue.list[0].imageUrl)" mode="widthFix" :show-menu-by-longpress="true"/>
</view>
</block>
@@ -13,7 +13,7 @@
}" :autoplay="true" :interval="imgAdsValue.interval" circular="true" :indicator-dots="isDots"
indicator-color="rgba(130, 130, 130, .5)" :indicator-active-color="imgAdsValue.indicatorColor"
@change="swiperChange">
<swiper-item class="swiper-item" :style="imgAdsSwiper" v-for="(item, index) in imgAdsValue.list" :key="index" v-if="item.imageUrl" @click="$util.diyRedirectTo(item.link)">
<swiper-item class="swiper-item" :style="imgAdsSwiper" v-for="(item, index) in imgAdsValue.list" :key="index" v-if="item.imageUrl" @click="handlerClick(item.link)" @tap="handlerClick(item.link)">
<view class="item" :style="imgAdsSwiper + 'height: ' + item.imgHeight">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :show-menu-by-longpress="true"/>
</view>
@@ -34,6 +34,8 @@
</template>
<script>
// 图片广告
import DiyMinx from './minx.js'
export default {
name: 'diy-img-ads',
props: {
@@ -55,6 +57,7 @@
created() {
this.calcSingleRow();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
@@ -131,7 +134,13 @@
// #ifdef MP-WEIXIN
this.isDots = false;
// #endif
}
},
async handlerClick(link) {
await this.__$emitEvent({eventName: 'img-ads-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.$util.diyRedirectTo(link);
}})
},
}
};
</script>

12
components/diy-components/diy-live.vue
View File

@@ -1,6 +1,6 @@
<template>
<x-skeleton data-component-name="diy-live" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="live-wrap" @click="entryRoom(liveInfo.roomid)" v-if="liveInfo">
<view class="live-wrap" @click="handlerClick(liveInfo.roomid)" @tap="handlerClick(liveInfo.roomid)" v-if="liveInfo">
<view class="banner-wrap">
<image :src="liveInfo.banner != '' ? $util.img(liveInfo.banner) : $util.img('public/uniapp/live/live_default_banner.png')"
mode="widthFix" @error="liveInfo.banner = $util.img('public/uniapp/live/live_default_banner.png')"/>
@@ -32,6 +32,7 @@
<script>
// 直播
import DiyMinx from './minx.js'
export default {
components: {},
name: 'diy-live',
@@ -59,6 +60,7 @@
created() {
this.getLiveInfo();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
@@ -136,7 +138,13 @@
}
}
});
}
},
async handlerClick(roomid) {
await this.__$emitEvent({eventName: 'live-tap', data: roomid, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.entryRoom(roomid);
}})
},
}
};
</script>

12
components/diy-components/diy-many-goods-list.vue
View File

@@ -1,7 +1,7 @@
<template>
<view data-component-name="diy-many-goods-list" class="many-goods-list">
<scroll-view scroll-x="true" class="many-goods-list-head" :scroll-into-view="'a' + cateIndex" :style="manyWrapCss">
<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }" :id="'a' + index" :key="index" @click="changeCateIndex(item, index)">
<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }" :id="'a' + index" :key="index" @click="handlerClick({item,index})" @tap="handlerClick({item,index})">
<view class="split-line" v-if="index > 0"></view>
<view class="cate">
<view class="name" :style="{ color : value.headStyle.titleColor }">{{ item.title }}</view>
@@ -16,6 +16,7 @@
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-many-goods-list',
props: {
@@ -50,6 +51,7 @@
created() {
this.changeCateIndex(this.value.list[0], 0, true);
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
@@ -166,7 +168,13 @@
if (isFirst) return;
this.$refs.diyGoodsList.goodsValue = this.goodsValue;
this.$refs.diyGoodsList.getGoodsList();
}
},
async handlerClick({item,index}) {
await this.__$emitEvent({eventName: 'many-goods-list-tap', data: {item,index}, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.changeCateIndex(item, index, false);
}})
},
}
};
</script>

11
components/diy-components/diy-map.vue
View File

@@ -10,7 +10,7 @@
:longitude="item.lng"
:latitude="item.lat"
show-location>
<cover-view style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;" @click="tomap(item)">
<cover-view style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;" @click="handlerClick(item)" @tap="handlerClick(item)">
<cover-view style="font-size:24rpx">一键导航</cover-view>
</cover-view>
</map>
@@ -20,6 +20,8 @@
</template>
<script>
// 地图
import DiyMinx from './minx.js'
export default {
name: 'diy-map',
props: {
@@ -35,6 +37,7 @@
},
created() {
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
@@ -68,6 +71,12 @@
longitude: parseFloat(item.lng),
name:"一键导航",
})
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'map-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.tomap(item);
}})
}
}
};

12
components/diy-components/diy-merch-list.vue
View File

@@ -3,7 +3,7 @@
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig" v-if="value.ornament.type == 'default'">
<view class="merch-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" :style="itemCss" @click="toDetail(item)">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" :style="itemCss" @click="handlerClick(item)" @tap="handlerClick(item)">
<view class="merch-img">
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix" @error="imgError(index)" />
</view>
@@ -22,7 +22,7 @@
<view class="uni-scroll-view-content">
<!-- #endif -->
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index" :style="{ width: 100 / 4 + '%' }" @click="toDetail(item)">
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index" :style="{ width: 100 / 4 + '%' }" @click="handlerClick(item)" @tap="handlerClick(item)">
<view class="graphic-img" v-if="value.mode != 'text'" :style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
<image
:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
@@ -46,6 +46,7 @@
<script>
// 文章
import DiyMinx from './minx.js'
export default {
name: 'diy-article',
props: {
@@ -98,6 +99,7 @@
created() {
this.getList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
@@ -167,6 +169,12 @@
},
imgError(index) {
if (this.list[index]) this.list[index].merch_image = this.$util.getDefaultImage().article;
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'merch-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}})
}
}
};

10
components/diy-components/diy-notes.vue
View File

@@ -7,7 +7,7 @@
</view>
<scroll-view class="diy-notes-box" scroll-x="true" show-scrollbar="true">
<view class="notes-box-item" v-for="(item, i) in dataList" :key="i" @click="toDetail(item.note_id)"
<view class="notes-box-item" v-for="(item, i) in dataList" :key="i" @click="handlerClick(item)" @tap="handlerClick(item)"
:style="notesItemStyle">
<view class="notes-item" v-if="item.status == 1">
<view class="notes-item-con">
@@ -46,6 +46,7 @@
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-notes',
props: {
@@ -70,6 +71,7 @@
created() {
this.getDataList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
@@ -179,6 +181,12 @@
imageError(index) {
this.dataList[index].img = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'notes-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item.note_id);
}})
}
}
};

2
components/diy-components/diy-picture.vue
View File

@@ -72,7 +72,7 @@
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'pictureTap', data: item, promiseCallback: (event, handler, awaitedResult) => {
await this.__$emitEvent({eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
if (item.link.wap_url) {
this.redirectTo(item.link);

14
components/diy-components/diy-presale.vue
View File

@@ -2,7 +2,7 @@
<x-skeleton data-component-name="diy-presale" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-presale" v-if="list.length" :class="[value.template, value.style]" :style="warpCss">
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
</view>
@@ -33,7 +33,7 @@
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="item" v-for="(item, index) in list" :key="index" @click="handlerClick(item)" @tap="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
</view>
@@ -58,7 +58,7 @@
<swiper v-if="value.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="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="handlerClick(item)" @tap="handlerClick(item)":class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)"/>
</view>
@@ -87,6 +87,7 @@
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-presale',
props: {
@@ -107,6 +108,7 @@
this.initSkeleton();
this.getData();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
@@ -236,6 +238,12 @@
let price = data.price;
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
return price;
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'presale-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}})
}
}
};

87
components/diy-components/diy-quick-nav.vue
View File

@@ -8,7 +8,8 @@
class="quick-nav-item"
v-for="(item, index) in value.list"
:key="index"
@click="redirectTo(item.link)"
@click="handlerClick(item)"
@tap="handlerClick(item)"
:style="{ background: 'linear-gradient(to right,' + item.bgColorStart ? item.bgColorStart : '' + ',' + item.bgColorEnd ? item.bgColorEnd : '' + ')' }"
>
<view class="quick-img" v-if="item.imageUrl || item.icon">
@@ -27,48 +28,56 @@
</template>
<script>
export default {
name: 'diy-quick-nav',
props: {
value: {
type: Object
}
},
data() {
return {};
},
created() {},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
},
computed: {
componentStyle() {
var css = '';
css += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
import DiyMinx from './minx.js'
export default {
name: 'diy-quick-nav',
props: {
value: {
type: Object
}
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return css;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
},
data() {
return {};
},
created() {},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
},
computed: {
componentStyle() {
var css = '';
css += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return css;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
}
}
this.$util.diyRedirectTo(link);
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'quick-nav-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.redirectTo(item.link);
}})
}
this.$util.diyRedirectTo(link);
}
}
};
};
</script>
<style>
.quick-nav >>> .uni-scroll-view-content {

12
components/diy-components/diy-rich-text.vue
View File

@@ -1,12 +1,13 @@
<template>
<view data-component-name="diy-rich-text" class="rich-text-box" :style="richTextWarpCss">
<rich-text :nodes="html"></rich-text>
<rich-text :nodes="html" @click="handlerClick" @tap="handlerClick"></rich-text>
</view>
</template>
<script>
// 富文本
import htmlParser from '@/common/js/html-parser';
import DiyMinx from './minx.js'
export default {
name: 'diy-rich-text',
props: {
@@ -22,6 +23,7 @@ export default {
created() {
this.html = htmlParser(this.value.html);
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
@@ -40,7 +42,13 @@ export default {
}
},
mounted() {},
methods: {}
methods: {
async handlerClick(item) {
await this.__$emitEvent({eventName: 'rich-text-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
}})
}
}
};
</script>

21
components/diy-components/diy-rubik-cube.vue
View File

@@ -8,7 +8,7 @@
<!-- 1左2右 -->
<template v-if="value.mode == 'row1-lt-of2-rt'">
<view class="template-left">
<view :class="['item', value.mode]" @click="$util.diyRedirectTo(value.list[0].link)" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
<view :class="['item', value.mode]" @click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" :style="list[0].pageItemStyle" :show-menu-by-longpress="true"/>
</view>
</view>
@@ -16,7 +16,7 @@
<view class="template-right">
<template v-for="(item, index) in list">
<template v-if="index > 0">
<view :key="index" :class="['item', value.mode]" @click="$util.diyRedirectTo(item.link)" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)" @tap="handlerClick(item.link)" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
</view>
</template>
@@ -27,19 +27,19 @@
<!-- 1左3右 -->
<template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'">
<view class="template-left">
<view :class="['item', value.mode]" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }" @click="$util.diyRedirectTo(value.list[0].link)">
<view :class="['item', value.mode]" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }" @click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)">
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" :style="list[0].pageItemStyle" :show-menu-by-longpress="true"/>
</view>
</view>
<view class="template-right">
<view :class="['item', value.mode]" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }" @click="$util.diyRedirectTo(value.list[1].link)">
<view :class="['item', value.mode]" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }" @click="handlerClick(value.list[1].link)" @tap="handlerClick(value.list[1].link)">
<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'" :style="list[1].pageItemStyle" :show-menu-by-longpress="true"/>
</view>
<view class="template-bottom">
<template v-for="(item, index) in list">
<template v-if="index > 1">
<view :key="index" :class="['item', value.mode]" @click="$util.diyRedirectTo(item.link)"
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)" @tap="handlerClick(item.link)"
:style="{
marginRight: value.imageGap * 2 + 'rpx',
width: item.imgWidth,
@@ -55,7 +55,7 @@
<template v-else>
<view :class="['item', value.mode]" v-for="(item, index) in list" :key="index"
@click="$util.diyRedirectTo(item.link)"
@click="handlerClick(item.link)" @tap="handlerClick(item.link)"
:style="{ marginRight: value.imageGap * 2 + 'rpx', marginBottom: value.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" :style="item.pageItemStyle" :show-menu-by-longpress="true"/>
</view>
@@ -67,6 +67,7 @@
<script>
// 魔方、橱窗
import htmlParser from '@/common/js/html-parser';
import DiyMinx from './minx.js'
export default {
name: 'diy-rubik-cube',
props: {
@@ -115,6 +116,7 @@
}
}
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
@@ -356,6 +358,13 @@
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
});
return obj;
},
async handlerClick(link) {
await this.__$emitEvent({eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.$util.diyRedirectTo(link);
}})
}
}
};

2
components/diy-components/diy-text.vue
View File

@@ -290,7 +290,7 @@ export default {
},
methods: {
async handlerClick(link) {
await this.__$emitEvent({eventName: 'textTap', data: link, promiseCallback: (event, handler, awaitedResult) => {
await this.__$emitEvent({eventName: 'text-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
$util.diyRedirectTo(link);
}})

12
components/diy-components/diy-video.vue
View File

@@ -1,9 +1,10 @@
<template>
<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover"></video>
<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover" @click="handlerClick(value.videoUrl)" @tap="handlerClick(value.videoUrl)"></video>
</template>
<script>
// 视频
import DiyMinx from './minx.js'
export default {
name: 'diy-video',
props: {
@@ -15,6 +16,7 @@
return {};
},
created() {},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
@@ -31,7 +33,13 @@
return obj;
}
},
methods: {}
methods: {
async handlerClick(videoUrl) {
await this.__$emitEvent({eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
}})
}
}
};
</script>