添加：装修 - 部分图片相关主键添加大图预览功能
This commit is contained in:
parent
ebbb475be6
commit
823be2a5d0
|
|
@ -39,14 +39,14 @@
|
|||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
import {merPath} from "@/utils/index"
|
||||
|
||||
|
||||
export default {
|
||||
name: 'pictureCube',
|
||||
props: {
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
success: (res) => {
|
||||
if (res && res.height > 0) {
|
||||
let height = res.height * ((that.widthC-that.prConfig*2) / res.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', (that.widthC-that.prConfig*2)*2);
|
||||
}
|
||||
|
|
@ -113,9 +113,15 @@
|
|||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
goDetail(url) {
|
||||
let urls = url.link
|
||||
urls = merPath(urls, this.merId)
|
||||
this.$util.JumpPath(urls);
|
||||
console.log(url)
|
||||
let urls = url.link || '';
|
||||
let image = url.image || '';
|
||||
if(urls){
|
||||
urls = merPath(urls, this.merId)
|
||||
this.$util.JumpPath(urls);
|
||||
}else if(image){
|
||||
this.$util.previewImage(url.image);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<view class="swiperBg" :style="'padding-top:' + marginTop +'rpx;background: linear-gradient(180deg, '+ bgColor0 +' 50%, '+ bgColor1 +' 100%);'">
|
||||
<view :hidden="is_show" class="swiperBg" :style="'padding-top:' + marginTop +'rpx;background: linear-gradient(180deg, '+ bgColor0 +' 50%, '+ bgColor1 +' 100%);'">
|
||||
<!-- 单图模式 -->
|
||||
<block v-if="swiperType == 0">
|
||||
<view class="item-img" v-for="(item,index) in imgUrls" :key="index" :style="{padding:'0 '+paddinglr+'rpx',marginBottom:itemEdge+'rpx'}">
|
||||
<image @click="goDetail(item)" :src="item.img"></image></view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="swiper page_swiper" :class="[docConfig == 1 ? 'square' : docConfig == 0 ? 'circular' : 'nodoc',imgConfig ? '' : 'fillet','dot'+txtStyle]"
|
||||
<view class="swiper page_swiper" :class="[docConfig == 1 ? 'square' : docConfig == 0 ? 'circular' : 'nodoc',imgConfig ? '' : 'fillet','dot'+txtStyle]"
|
||||
:style="'padding: 0 '+ paddinglr +'rpx;'"
|
||||
v-if="imgUrls.length">
|
||||
<swiper
|
||||
indicator-dots="true"
|
||||
:autoplay="true"
|
||||
indicator-dots="true"
|
||||
:autoplay="true"
|
||||
:circular="circular"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
indicator-color="rgba(255,255,255,0.6)"
|
||||
indicator-active-color="#fff"
|
||||
:style="'height:'+(imageH+10)+'rpx;'"
|
||||
:current="swiperCur"
|
||||
|
|
@ -24,15 +24,15 @@
|
|||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
|
||||
<image :src="item.img" class="slide-image aa" :style="'height:'+ imageH +'rpx;'" mode="aspectFill"></image>
|
||||
<image @click="$util.previewImage(item.img)" :src="item.img" class="slide-image aa" :style="'height:'+ imageH +'rpx;'" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- <view class="dots" :class="'dot'+txtStyle">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot" :class="[docConfig == 1 ? 'square' : docConfig == 0 ? 'circular' : 'nodoc',index == swiperCur ? ' active' : '']"></view>
|
||||
</block>
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot" :class="[docConfig == 1 ? 'square' : docConfig == 0 ? 'circular' : 'nodoc',index == swiperCur ? ' active' : '']"></view>
|
||||
</block>
|
||||
</view> -->
|
||||
</view>
|
||||
</block>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
|
||||
<script>
|
||||
|
||||
|
||||
|
||||
import {merPath} from "@/utils/index"
|
||||
export default {
|
||||
name: 'swiperBg',
|
||||
|
|
@ -70,12 +70,14 @@
|
|||
imageH: 310,
|
||||
swiperCur: 0,
|
||||
swiperType: 1,
|
||||
is_show: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
imageH(nVal, oVal) {
|
||||
let self = this
|
||||
this.imageH = nVal
|
||||
this.is_show = false;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -87,9 +89,9 @@
|
|||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: function(res) {
|
||||
if (res && res.height > 0) {
|
||||
if (res && res.height > 0) {
|
||||
let height = res.height * ((750-20) / res.width)
|
||||
that.$set(that, 'imageH', height);
|
||||
that.$set(that, 'imageH', height);
|
||||
} else {
|
||||
that.$set(that, 'imageH', 375);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -998,4 +998,21 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
// 图片预览
|
||||
previewImage(urls, current = ''){
|
||||
// 如果是字符串 则修改为对象
|
||||
if(typeof urls === 'string') urls = [urls];
|
||||
// 预览图片
|
||||
uni.previewImage({
|
||||
urls: urls,
|
||||
current: current
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue