ec.uniapp-master/components/index-cube/index-cube.vue

<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>