shop-applet/pages/index/component/pictureCube.vue

304 lines
6.3 KiB
Vue

<template>
<view class="pictureCube skeleton-rect" :class="{pageOn:bgStyle===1}" :style="{margin:'0 '+prConfig*2+'rpx',marginTop:slider*2+'rpx',background:bgColor}" v-if="picList.length" v-show="!isSortType">
<view class="advertItem01" v-for="(item,index) in picList" :key="index" v-if="style==0" @click="goDetail(item)">
<image :src="item.image" mode="widthFix"></image>
</view>
<view class="advertItem02 acea-row" v-if="style==1">
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
<image :src="item.image" :style="'height:'+ imageH +'rpx;'" mode="widthFix"></image>
</view>
</view>
<view class="advertItem02 advertItem03 acea-row" v-if="style==2">
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
<image :src="item.image" :style="'height:'+ imageH +'rpx;'"></image>
</view>
</view>
<view class="advertItem04 acea-row" v-if="style==3">
<view class="item" @click="goDetail(picList[0])">
<image :src="picList[0].image"></image>
</view>
<view class="item">
<view class="pic" @click="goDetail(picList[1])">
<image :src="picList[1].image"></image>
</view>
<view class="pic" @click="goDetail(picList[2])">
<image :src="picList[2].image"></image>
</view>
</view>
</view>
<view class="advertItem02 advertItem05 acea-row" v-if="style==4">
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
<image :src="item.image" mode="aspectFit" :style="'height:'+ imageH +'rpx;'"></image>
</view>
</view>
<view class="advertItem02 advertItem06 acea-row" v-if="style==5">
<view class="item" v-for="(item,index) in picList" :key="index" @click="goDetail(item)">
<image :src="item.image"></image>
</view>
</view>
</view>
</template>
<script>
import {merPath} from "@/utils/index"
export default {
name: 'pictureCube',
props: {
dataConfig: {
type: Object,
default: () => {}
},
isSortType: {
type: String | Number,
default: 0
},
merId: {
type: String || Number,
default: ''
}
},
data() {
return {
picList: this.dataConfig.picStyle.picList,
style: this.dataConfig.tabConfig.tabVal,
bgStyle: this.dataConfig.bgStyle.type,
prConfig: this.dataConfig.prConfig.val,
slider: this.dataConfig.mbConfig.val,
bgColor: this.dataConfig.bgColor.color[0].item,
widthC: '',
imageH: ''
};
},
mounted() {
if(this.picList.length){
let that = this;
this.$nextTick((e) => {
if(this.style==1){
this.widthC = 375
}else if(this.style==2){
this.widthC = 250
}else if(this.style==4){
this.widthC = 188
}
uni.getImageInfo({
src: that.setDomain(that.picList[0].image),
success: (res) => {
if (res && res.height > 0) {
let height = res.height * ((that.widthC-that.prConfig*2) / res.width)
that.$set(that, 'imageH', height);
} else {
that.$set(that, 'imageH', (that.widthC-that.prConfig*2)*2);
}
},
fail: function(error) {
that.$set(that, 'imageH', (that.widthC-that.prConfig*2)*2);
}
})
})
}
},
created() {},
methods: {
//替换安全域名
setDomain: function(url) {
url = url ? url.toString() : '';
//本地调试打开,生产请注销
if (url.indexOf("https://") > -1) return url;
else return url.replace('http://', 'https://');
},
goDetail(url) {
let urls = url.link
urls = merPath(urls, this.merId)
if (urls.indexOf("http") != -1) {
// #ifdef H5
location.href = urls
// #endif
// #ifdef MP || APP-PLUS
uni.navigateTo({
url: `/pages/annex/web_view/index?url=${urls}`
});
// #endif
} else {
if (['/pages/goods_cate/goods_cate', '/pages/plant_grass/index', '/pages/order_addcart/order_addcart', '/pages/user/index']
.indexOf(urls) == -1) {
uni.navigateTo({
url: urls
})
} else {
uni.reLaunch({
url: urls
})
}
}
}
}
}
</script>
<style lang="scss" scoped>
.pageOn{
border-radius:24rpx!important;
.advertItem01{
image{
border-radius:20rpx;
}
}
.advertItem02{
.item{
&:nth-child(1){
image{
border-radius:20rpx 0 0 20rpx
}
}
&:nth-child(2){
image{
border-radius:0 20rpx 20rpx 0
}
}
}
}
.advertItem03{
.item{
&:nth-child(1){
image{
border-radius:20rpx 0 0 20rpx
}
}
&:nth-child(2){
image{
border-radius:0
}
}
&:nth-child(3){
image{
border-radius:0 20rpx 20rpx 0
}
}
}
}
.advertItem04{
.item{
&:nth-child(1){
image{
border-radius:20rpx 0 0 20rpx
}
}
&:nth-child(2){
.pic{
&:nth-child(1){
image{
border-radius:0 20rpx 0 0
}
}
&:nth-child(2){
image{
border-radius:0 0 20rpx 0
}
}
}
}
}
}
.advertItem05{
.item{
&:nth-child(1){
image{
border-radius:20rpx 0 0 20rpx
}
}
&:nth-child(2){
image{
border-radius:0
}
}
&:nth-child(4){
image{
border-radius:0 20rpx 20rpx 0
}
}
}
}
.advertItem06{
.item{
&:nth-child(1){
image{
border-radius:20rpx 0 0 0
}
}
&:nth-child(2){
image{
border-radius:0 20rpx 0 0
}
}
&:nth-child(3){
image{
border-radius:0 0 0 20rpx
}
}
&:nth-child(4){
image{
border-radius:0 0 20rpx 0
}
}
}
}
}
.pictureCube {
background-color: #fff;
.advertItem01 {
width: 100%;
height: auto;
image {
width: 100%;
height: 100%;
display: block;
}
}
.advertItem02{
width: 100%;
.item{
width: 50%;
height: auto;
image{
width: 100%;
height: 100%;
display: block;
}
}
}
.advertItem03{
.item{
width: 33.3333%;
}
}
.advertItem04{
width: 100%;
.item{
width: 50%;
height: 376rpx;
.pic{
width: 100%;
height: 188rpx;
}
image{
width: 100%;
height: 100%;
display: block;
}
}
}
.advertItem05{
.item{
width: 25%;
}
}
.advertItem06{
.item{
width: 50%;
height: 188rpx;
}
}
}
</style>