zhoujun/video_mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

吆喝

Browse Source
This commit is contained in:
蔡同学
2025-08-25 11:20:35 +08:00
parent 25df08ec69
commit 6df8112e7b
251 changed files with 34346 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home/grid.vue
+211
View File
@@ -0,0 +1,211 @@
<template>
<view class="flex alcenter space">
<button v-if="getGridOne!=null && getGridOne.model=='share'" open-type="share" class="grid-left-box">
<view class="main pd16_15">
<view class="ft16 ftw600 cl-default">{{getGridOne.name}}</view>
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridOne.desc}}</view>
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
</view>
<image class="left-bg" :src="statics.gridLeft"></image>
<image class="left-icon" :src="getGridOne.icon"></image>
</button>
<view v-if="getGridOne!=null && getGridOne.model!='share'" :data-model="getGridOne.model" @click="linkTo" class="grid-left-box">
<view class="main pd16_15">
<view class="ft16 ftw600 cl-default">{{getGridOne.name}}</view>
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridOne.desc}}</view>
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
</view>
<image class="left-bg" :src="statics.gridLeft"></image>
<image class="left-icon" :src="getGridOne.icon"></image>
</view>
<view>
<button v-if="getGridTwo!=null && getGridTwo.model=='share'" open-type="share" class="grid-right-box">
<view class="main pd16_15">
<view class="ft16 ftw600 cl-default">{{getGridTwo.name}}</view>
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridTwo.desc}}</view>
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
</view>
<image class="right-bg" :src="statics.gridRight"></image>
<image class="right-icon" :src="getGridTwo.icon"></image>
</button>
<view v-if="getGridTwo!=null && getGridTwo.model!='share'" :data-model="getGridTwo.model" @click="linkTo" class="grid-right-box">
<view class="main pd16_15">
<view class="ft16 ftw600 cl-default">{{getGridTwo.name}}</view>
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridTwo.desc}}</view>
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
</view>
<image class="right-bg" :src="statics.gridRight"></image>
<image class="right-icon" :src="getGridTwo.icon"></image>
</view>
<view class="mt15">
<button v-if="getGridThree!=null && getGridThree.model=='share'" open-type="share" class="grid-right-box">
<view class="main pd16_15">
<view class="ft16 ftw600 cl-default">{{getGridThree.name}}</view>
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridThree.desc}}</view>
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
</view>
<image class="right-bg" :src="statics.gridRight"></image>
<image class="right-icon" :src="getGridThree.icon"></image>
</button>
<view v-if="getGridThree!=null && getGridThree.model!='share'" :data-model="getGridThree.model" @click="linkTo" class="grid-right-box">
<view class="main pd16_15">
<view class="ft16 ftw600 cl-default">{{getGridThree.name}}</view>
<view class="mt4 ft12" :style="{color:tempColor}">{{getGridThree.desc}}</view>
<view class="btn-go" :style="{background:tempColor}">GO<text class="iconfont iconicon_arrow_small ft12"></text></view>
</view>
<image class="right-bg" :src="statics.gridRight"></image>
<image class="right-icon" :src="getGridThree.icon"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return {
gridData:[
{name:'VIP特惠',desc:'尊享会员折上折',model:'tuan',icon:this.$config.staticUrl +'vipcard_home_tehui@2x.png',show:1},
{name:'领优惠券',desc:'领券更省钱',model:'coupon',icon:this.$config.staticUrl +'vipcard_home_coupon@2x.png',show:1},
{name:'邀请好友',desc:'越邀请，越优惠',model:'share',icon:this.$config.staticUrl +'vipcard_home_invite@2x.png',show:0},
{name:'积分商城',desc:'小积分兑豪礼',model:'integral',icon:this.$config.staticUrl +'vipcard_home_integralmall@2x.png',show:1},
{name:'开通次卡',desc:'省钱升级必备',model:'card',icon:this.$config.staticUrl +'vipcard_home_cika@2x.png',show:0},
]
}
},
computed:{
getGridDatas(){
let arr = new Array;
for(var a in this.gridData){
if(this.gridData[a].show == 1){
arr.push(this.gridData[a]);
}
}
return arr;
},
getGridOne(){
return this.getGridDatas[0] ? this.getGridDatas[0] : null;
},
getGridTwo(){
return this.getGridDatas[1] ? this.getGridDatas[1] : null;
},
getGridThree(){
return this.getGridDatas[2] ? this.getGridDatas[2] : null;
}
},
methods:{
linkTo(e){
let model = e.currentTarget.dataset.model;
let url = '';
switch(model){
case 'coupon':
url = '/pages/client/coupon/index';
break;
case 'integral':
url = '/pages/client/integral/index';
break;
case 'card':
url = '/pages/client/card/index';
break;
case 'tuan':
url = '/pages/client/tuan/index';
break;
}
if(url == '') return;
uni.navigateTo({
url:url
})
}
}
}
</script>
<style>
.grid-left-box{
width: 330rpx;
height: 430rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 32rpx;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
line-height: 1;
text-align: left;
}
.grid-right-box{
width: 330rpx;
height: 200rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
border-radius: 32rpx;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
line-height: 1;
text-align: left;
}
.grid-left-box .main,.grid-right-box .main{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 3;
}
.grid-left-box .left-bg{
width: 100%;
height: 140rpx;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.grid-left-box .left-icon{
width: 200rpx;
height: 200rpx;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}
.grid-right-box .right-icon{
width: 120rpx;
height: 120rpx;
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}
.grid-right-box .right-bg{
width: 100%;
height: 74rpx;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
.btn-go{
display: block;
width: 92rpx;
height: 40rpx;
border-radius: 20rpx;
text-align: center;
margin-top: 40rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: 600;
color: #FFFFFF;
font-style:italic;
}
.btn-go text{
font-weight: 400;
margin-left: 8rpx;
}
</style>