ZF sun
2a5214df11
重构图片预览功能，将其从diy-picture组件移至mixin实现，便于复用 优化diy-rubik-cube组件的点击处理逻辑，支持无链接时预览图片 统一处理图片预览和页面跳转的条件判断
83 lines
2.7 KiB
Vue
83 lines
2.7 KiB
Vue
<template>
|
|
<view data-component-name="diy-picture" class="diy-picture" :style="style">
|
|
<view class="fui-picture">
|
|
<view v-for="(item, index) in value.list" style="line-height: 0;">
|
|
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)"
|
|
v-if="item.link.wap_url" @click="handlerClick(item)" @tap="handlerClick(item)"></image>
|
|
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else
|
|
@click="handlerClick(item)" @tap="handlerClick(item)"></image>
|
|
</view>
|
|
<!-- <view wx:if="{{!childitem.linkurl}}" bindtap="previewImg" data-src="{{childitem.imgurl}}" style="padding:{{diyitem.style.paddingtop==0?0:diyitem.style.paddingtop+'rpx'}} {{diyitem.style.paddingleft==0?0:diyitem.style.paddingleft+'rpx'}}" wx:for="{{diyitem.data}}" wx:for-index="childid" wx:for-item="childitem" wx:key="{{childid}}">
|
|
<image mode="widthFix" src="{{childitem.imgurl}}" style="{{bannerheight?'height:'+bannerheight+'px':'height:auto'}}"></image>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DiyMinx from './minx.js'
|
|
export default {
|
|
name: 'diy-picture',
|
|
props: {
|
|
value: {
|
|
type: Object
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
};
|
|
},
|
|
created() {
|
|
// this.getDataList();
|
|
},
|
|
watch: {
|
|
// 组件刷新监听
|
|
componentRefresh: function (nval) {
|
|
// this.getDataList();
|
|
}
|
|
},
|
|
mixins: [DiyMinx],
|
|
computed: {
|
|
style() {
|
|
var css = '';
|
|
css += 'background-color:' + this.value.contentBgColor + ';';
|
|
if (this.value.elementAngle == 'round') {
|
|
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
|
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
|
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
|
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
|
}
|
|
return css;
|
|
}
|
|
},
|
|
methods: {
|
|
redirectTo(link) {
|
|
if (link.wap_url) {
|
|
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
|
|
this.$refs.login.open(link.wap_url);
|
|
return;
|
|
}
|
|
}
|
|
this.$util.diyRedirectTo(link);
|
|
},
|
|
|
|
async handlerClick(item) {
|
|
await this.__$emitEvent({
|
|
eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
if (!awaitedResult) return;
|
|
|
|
const link = item.link;
|
|
if (link?.name || link?.wap_url || link?.appid) {
|
|
this.redirectTo(item.link);
|
|
} else {
|
|
this.previewImg(item.imageUrl);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss"></style> |