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

feat(图片预览): 将图片预览功能提取到mixin并优化点击处理

Browse Source 
重构图片预览功能，将其从diy-picture组件移至mixin实现，便于复用
优化diy-rubik-cube组件的点击处理逻辑，支持无链接时预览图片
统一处理图片预览和页面跳转的条件判断
This commit is contained in:
ZF Sun
2026-01-26 14:07:45 +08:00
parent 09e410df00
commit 2a5214df11
3 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,17 +52,6 @@ export default {
} }
}, },
methods: { methods: {
previewImg(img) {
// #ifdef MP-WEIXIN
uni.previewImage({
current: 0,
urls: [this.$util.img(img)],
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
// #endif
},
redirectTo(link) { redirectTo(link) {
if (link.wap_url) { if (link.wap_url) {
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) { if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
@@ -77,7 +66,9 @@ export default {
await this.__$emitEvent({ await this.__$emitEvent({
eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => { eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return; if (!awaitedResult) return;
if (item.link.wap_url) {
const link = item.link;
if (link?.name || link?.wap_url || link?.appid) {
this.redirectTo(item.link); this.redirectTo(item.link);
} else { } else {
this.previewImg(item.imageUrl); this.previewImg(item.imageUrl);

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

@@ -8,9 +8,8 @@
<!-- 1左2右 --> <!-- 1左2右 -->
<template v-if="value.mode == 'row1-lt-of2-rt'"> <template v-if="value.mode == 'row1-lt-of2-rt'">
<view class="template-left"> <view class="template-left">
<view :class="['item', value.mode]" @click="handlerClick(value.list[0].link)" <view :class="['item', value.mode]" @tap="handlerClick(value.list[0].link, value.list[0].imageUrl)"
@tap="handlerClick(value.list[0].link)" :style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
: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'" <image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
:style="list[0].pageItemStyle" :show-menu-by-longpress="true" /> :style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
</view> </view>
@@ -19,9 +18,8 @@
<view class="template-right"> <view class="template-right">
<template v-for="(item, index) in list"> <template v-for="(item, index) in list">
<template v-if="index > 0"> <template v-if="index > 0">
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)" <view :key="index" :class="['item', value.mode]" @tap="handlerClick(item.link, item.imageUrl)"
@tap="handlerClick(item.link)" :style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" <image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" :show-menu-by-longpress="true" /> :style="item.pageItemStyle" :show-menu-by-longpress="true" />
</view> </view>
@@ -34,8 +32,8 @@
<template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'"> <template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'">
<view class="template-left"> <view class="template-left">
<view :class="['item', value.mode]" <view :class="['item', value.mode]"
:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }" :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)"> @tap="handlerClick(value.list[0].link, value.list[0].imageUrl)">
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'" <image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
:style="list[0].pageItemStyle" :show-menu-by-longpress="true" /> :style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
</view> </view>
@@ -43,20 +41,19 @@
<view class="template-right"> <view class="template-right">
<view :class="['item', value.mode]" <view :class="['item', value.mode]"
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }" :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)"> @tap="handlerClick(value.list[1].link, value.list[1].imageUrl)">
<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'" <image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'"
:style="list[1].pageItemStyle" :show-menu-by-longpress="true" /> :style="list[1].pageItemStyle" :show-menu-by-longpress="true" />
</view> </view>
<view class="template-bottom"> <view class="template-bottom">
<template v-for="(item, index) in list"> <template v-for="(item, index) in list">
<template v-if="index > 1"> <template v-if="index > 1">
<view :key="index" :class="['item', value.mode]" @click="handlerClick(item.link)" <view :key="index" :class="['item', value.mode]" @tap="handlerClick(item.link, item.imageUrl)" :style="{
@tap="handlerClick(item.link)" :style="{ marginRight: value.imageGap * 2 + 'rpx',
marginRight: value.imageGap * 2 + 'rpx', width: item.imgWidth,
width: item.imgWidth, height: item.imgHeight + 'px'
height: item.imgHeight + 'px' }">
}">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'" <image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" :show-menu-by-longpress="true" /> :style="item.pageItemStyle" :show-menu-by-longpress="true" />
</view> </view>
@@ -68,8 +65,8 @@
<template v-else> <template v-else>
<view :class="['item', value.mode]" v-for="(item, index) in list" :key="index" <view :class="['item', value.mode]" v-for="(item, index) in list" :key="index"
@click="handlerClick(item.link)" @tap="handlerClick(item.link)" @tap="handlerClick(item.link, item.imageUrl)"
:style="{ marginRight: value.imageGap * 2 + 'rpx', marginBottom: value.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }"> :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'" <image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" :show-menu-by-longpress="true" /> :style="item.pageItemStyle" :show-menu-by-longpress="true" />
</view> </view>
@@ -374,11 +371,16 @@ export default {
return obj; return obj;
}, },
async handlerClick(link) { async handlerClick(link, imageUrl) {
await this.__$emitEvent({ await this.__$emitEvent({
eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => { eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return; if (!awaitedResult) return;
this.$util.diyRedirectTo(link);
if (link?.name || link?.wap_url || link?.appid) {
this.$util.diyRedirectTo(link);
} else if (imageUrl){
this.previewImg(imageUrl);
}
} }
}) })
} }

13
components-diy/minx.js
View File

@@ -5,5 +5,18 @@ export default {
// console.log('__$emitEvent', payload) // console.log('__$emitEvent', payload)
await this.$eventBus.emit(payload.eventName, payload.data, payload.promiseCallback) await this.$eventBus.emit(payload.eventName, payload.data, payload.promiseCallback)
}, },
// 预览图片
previewImg(img) {
// #ifdef MP-WEIXIN
uni.previewImage({
current: 0,
urls: [this.$util.img(img)],
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
// #endif
},
} }
} }