You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
11 KiB
252 lines
11 KiB
<template>
|
|
<view class="picture-cube" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}">
|
|
<!--一图模式-->
|
|
<view class="one-mode" v-if="showType == '1_1'">
|
|
<view class="title" v-if="cubeTitle && show">
|
|
<span>{{cubeTitle}}</span>
|
|
</view>
|
|
<view :style="' padding-left: ' + meta.padding_left + 'px; padding-right: ' + meta.padding_right + 'px; padding-bottom: ' + meta.padding_bottom + 'px; padding-top: ' + meta.padding_top + 'px;'">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
<!--二图模式-->
|
|
<view class="two-mode" v-if="mode == 2">
|
|
<view class="title" v-if="cubeTitle && show">
|
|
<span>{{cubeTitle}}</span>
|
|
</view>
|
|
<!--第一种表现形式-->
|
|
<view class="first-show" v-if="showType == '2_1'">
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[1].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
<!--第二种表现形式-->
|
|
<view class="common-show" v-if="showType == '2_2'">
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="two-item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[1].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
<!--第三种表现形式-->
|
|
<view class="common-show" v-if="showType == '2_3'">
|
|
<view class="two-item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[1].image"></image>
|
|
</navigator>
|
|
<image :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--三图模式-->
|
|
<view class="three-mode" v-if="mode == 3">
|
|
<view class="title" v-if="cubeTitle && show">
|
|
<span>{{cubeTitle}}</span>
|
|
</view>
|
|
<!--第一种表现形式-->
|
|
<view class="first-show" v-if="showType == '3_1'">
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[1].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[2].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[2].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[2].image" v-else :data-src="cubeData[2].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
<!--第二种表现形式-->
|
|
<view class="common-show" v-if="showType == '3_2'">
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="item">
|
|
<view class="info">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[1].image"></image>
|
|
</navigator>
|
|
<image :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="info">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[2].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[2].image"></image>
|
|
</navigator>
|
|
<image :src="cubeData[2].image" v-else :data-src="cubeData[2].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--第三种表现形式-->
|
|
<view class="common-show" v-if="showType == '3_3'">
|
|
<view class="item">
|
|
<view class="info">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[1].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[1].image"></image>
|
|
</navigator>
|
|
<image :src="cubeData[1].image" v-else :data-src="cubeData[1].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
<view class="info">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[2].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[2].image"></image>
|
|
</navigator>
|
|
<image :src="cubeData[2].image" v-else :data-src="cubeData[2].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<navigator target="miniProgram" hover-class="none" v-if="cubeData[0].link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="cubeData[0].image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="cubeData[0].image" v-else :data-src="cubeData[0].link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!--四图模式-->
|
|
<view class="four-mode" v-if="mode == 4">
|
|
<view class="title" v-if="cubeTitle && show">
|
|
<span>{{cubeTitle}}</span>
|
|
</view>
|
|
<!--第一种表现形式-->
|
|
<view class="first-show" v-if="showType == '4_1'">
|
|
<view class="item" v-for="(item, index) in cubeData" :key="index" >
|
|
<navigator target="miniProgram" hover-class="none" v-if="item.link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="item.image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="item.image" v-else :data-src="item.link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
<!--第二种表现形式-->
|
|
<view class="second-show" v-if="showType == '4_2'">
|
|
<view class="item" v-for="(item, index) in cubeData" :key="index" >
|
|
<navigator target="miniProgram" hover-class="none" v-if="item.link == 'uto_miniprogram'" app-id="wx009e0be72cbf5e80" class="item-navigator">
|
|
<image mode="widthFix" :src="item.image"></image>
|
|
</navigator>
|
|
<image mode="widthFix" :src="item.image" v-else :data-src="item.link" @tap="_jumpLink"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
mode: '',
|
|
bottom: ''
|
|
};
|
|
},
|
|
|
|
props: {
|
|
|
|
showType: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
cubeData: {
|
|
type: Array,
|
|
value: ''
|
|
},
|
|
cubeTitle: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
show: {
|
|
type: Number,
|
|
value: ''
|
|
},
|
|
meta: {
|
|
type: Object,
|
|
value: ""
|
|
} ,
|
|
isAgent:{
|
|
type:Number,
|
|
value:''
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
var type = this.showType;
|
|
var mode = '';
|
|
mode = type.split('_')[0];
|
|
this.mode=mode;
|
|
},
|
|
|
|
//组件的方法
|
|
methods: {
|
|
//图片跳链接
|
|
_jumpLink(e) {
|
|
var src = e.currentTarget.dataset.src;
|
|
if (!src || src == 'uto_miniprogram') return;
|
|
if(src == '/pages/distribution/distributionCenter/distributionCenter'){
|
|
var token = this.$cookieStorage.get('user_token');
|
|
if(token){
|
|
var is_agent = this.isAgent;
|
|
//如果不是分销员
|
|
if(is_agent == 1){
|
|
wx.navigateTo({
|
|
url:'/pages/distribution/distributionCenter/distributionCenter'
|
|
})
|
|
} else{
|
|
wx.navigateTo({
|
|
url:'/pages/distribution/applyDistribution/applyDistribution'
|
|
})
|
|
}
|
|
|
|
} else{
|
|
var url = 'pages/index/index/index';
|
|
wx.navigateTo({
|
|
url: '/pages/user/register/register?url=' + url
|
|
})
|
|
}
|
|
} else{
|
|
wx.navigateTo({
|
|
url: src
|
|
});
|
|
}
|
|
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/less" lang="less">
|
|
@import "index-cube";
|
|
</style>
|