705 lines
16 KiB
Vue
705 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="list">
|
||
<view class="item" v-for="(item, index) in tabList" :key="item.id"
|
||
:class="{ 'active': index === activeIndex }" @click="onTabChange(index)">
|
||
<view class="left">
|
||
<!-- <view class="triangle-concave-transparent ">
|
||
</view> -->
|
||
<image src="/static/image/recharge/tabLine.png" mode=""></image>
|
||
</view>
|
||
<view class="box" v-show="index != activeIndex">
|
||
{{ item.label }}
|
||
<image class="closeImage" v-if="isHuise&&index==1" src="/static/image/template/close.png" mode=""></image>
|
||
</view>
|
||
<view class="box" v-show="index == activeIndex">
|
||
<image class="titleImage" :src="item.icon" mode=""></image>
|
||
<image class="vipImage" v-if="!isHuise||index!=1" src="/static/image/recharge/vip.png" mode=""></image>
|
||
<image class="vipImage" v-else src="/static/image/template/close.png" mode=""></image>
|
||
</view>
|
||
<view class="right">
|
||
<image src="/static/image/recharge/tabLine.png" mode=""></image>
|
||
<!-- <view class="triangle-concave-transparent leftBox">
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- :class="{'centerVip':activeIndex>0&&activeIndex<3,'leftVip':activeIndex==0,'rightVip':activeIndex==3}" -->
|
||
<view class="vip-benefits-container">
|
||
<template v-if="activeIndex == 0">
|
||
<view class="benefit-item" v-for="(benefit, index) in wxList" :key="index">
|
||
<image class="img" :src="benefit.url" mode=""></image>
|
||
<view class="name">
|
||
{{ benefit.name }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="activeIndex == 1">
|
||
<view class="benefit-item" v-for="(benefit, index) in alList" :key="index">
|
||
<image class="img" :src="benefit.url" mode=""></image>
|
||
<view class="name">
|
||
{{ benefit.name }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="activeIndex == 2">
|
||
<view class="benefit-item" v-for="(benefit, index) in anyList" :key="index">
|
||
<image class="img" :src="benefit.url" mode=""></image>
|
||
<view class="name">
|
||
{{ benefit.name }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<image class="qydb" src="/static/image/recharge/qydb.png" mode="widthFix"></image>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: 'custom-tab',
|
||
props: {
|
||
isHuise: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
tabActiveInd: 0,
|
||
// 当前激活的tab索引
|
||
activeIndex: 0,
|
||
chunjie:{
|
||
"wxList": [
|
||
{
|
||
"name": "AI聊天模板",
|
||
"url": "/static/image/recharge/chunjie/mo.png"
|
||
},
|
||
{
|
||
"name": "聊天转账",
|
||
"url": "/static/image/recharge/chunjie/li.png"
|
||
},
|
||
{
|
||
"name": "限额设置",
|
||
"url": "/static/image/recharge/chunjie/wei.png"
|
||
},
|
||
{
|
||
"name": "零钱修改",
|
||
"url": "/static/image/recharge/chunjie/xing.png"
|
||
},
|
||
{
|
||
"name": "零钱通",
|
||
"url": "/static/image/recharge/chunjie/jin.png"
|
||
},
|
||
{
|
||
"name": "分付",
|
||
"url": "/static/image/recharge/chunjie/ma.png"
|
||
},
|
||
{
|
||
"name": "账单",
|
||
"url": "/static/image/recharge/chunjie/song.png"
|
||
},
|
||
{
|
||
"name": "朋友圈",
|
||
"url": "/static/image/recharge/chunjie/fu.png"
|
||
}
|
||
],
|
||
"alList": [
|
||
{
|
||
"name": "余额模拟",
|
||
"url": "/static/image/recharge/chunjie/mo.png"
|
||
},
|
||
{
|
||
"name": "账单生成",
|
||
"url": "/static/image/recharge/chunjie/li.png"
|
||
},
|
||
{
|
||
"name": "理财",
|
||
"url": "/static/image/recharge/chunjie/xiao.png"
|
||
},
|
||
{
|
||
"name": "花呗",
|
||
"url": "/static/image/recharge/chunjie/bao.png"
|
||
},
|
||
{
|
||
"name": "账单详情",
|
||
"url": "/static/image/recharge/chunjie/ma.png"
|
||
},
|
||
{
|
||
"name": "逾期",
|
||
"url": "/static/image/recharge/chunjie/yue.png"
|
||
},
|
||
{
|
||
"name": "黑卡",
|
||
"url": "/static/image/recharge/chunjie/xin.png"
|
||
},
|
||
{
|
||
"name": "热门图标",
|
||
"url": "/static/image/recharge/chunjie/nian.png"
|
||
}
|
||
],
|
||
"anyList": [
|
||
{
|
||
"name": "无广告",
|
||
"url": "/static/image/recharge/chunjie/2.png"
|
||
},
|
||
{
|
||
"name": "无水印",
|
||
"url": "/static/image/recharge/chunjie/0.png"
|
||
},
|
||
{
|
||
"name": "专属客服",
|
||
"url": "/static/image/recharge/chunjie/2.png"
|
||
},
|
||
{
|
||
"name": "多设备",
|
||
"url": "/static/image/recharge/chunjie/6.png"
|
||
},
|
||
{
|
||
"name": "朋友圈素材",
|
||
"url": "/static/image/recharge/chunjie/gong.png"
|
||
},
|
||
{
|
||
"name": "豪车视频",
|
||
"url": "/static/image/recharge/chunjie/he.png"
|
||
},
|
||
{
|
||
"name": "小决定",
|
||
"url": "/static/image/recharge/chunjie/xin.png"
|
||
},
|
||
{
|
||
"name": "随机数",
|
||
"url": "/static/image/recharge/chunjie/zhu.png"
|
||
}
|
||
]
|
||
|
||
},
|
||
anyList:[
|
||
{
|
||
name: "无广告",
|
||
url: "/static/image/recharge/icon1.png"
|
||
},
|
||
{
|
||
name: "无水印",
|
||
url: "/static/image/recharge/icon2.png"
|
||
},
|
||
{
|
||
name: "专属客服",
|
||
url: "/static/image/recharge/icon3.png"
|
||
},
|
||
{
|
||
name: "多设备",
|
||
url: "/static/image/recharge/icon4.png"
|
||
},
|
||
{
|
||
name: "朋友圈素材",
|
||
url: "/static/image/recharge/icon12.png"
|
||
},
|
||
{
|
||
name: "豪车视频",
|
||
url: "/static/image/recharge/icon20.png"
|
||
},
|
||
{
|
||
name: "小决定",
|
||
url: "/static/image/recharge/icon19.png"
|
||
},
|
||
{
|
||
name: "随机数",
|
||
url: "/static/image/recharge/icon18.png"
|
||
}
|
||
],
|
||
alList:[],
|
||
qrj:{
|
||
"wxList": [
|
||
{
|
||
"name": "AI聊天模板",
|
||
"url": "/static/image/recharge/214/icon5.png"
|
||
},
|
||
{
|
||
"name": "聊天转账",
|
||
"url": "/static/image/recharge/214/icon6.png"
|
||
},
|
||
{
|
||
"name": "限额设置",
|
||
"url": "/static/image/recharge/214/icon7.png"
|
||
},
|
||
{
|
||
"name": "零钱修改",
|
||
"url": "/static/image/recharge/214/icon8.png"
|
||
},
|
||
{
|
||
"name": "零钱通",
|
||
"url": "/static/image/recharge/214/icon9.png"
|
||
},
|
||
{
|
||
"name": "分付",
|
||
"url": "/static/image/recharge/214/icon10.png"
|
||
},
|
||
{
|
||
"name": "账单",
|
||
"url": "/static/image/recharge/214/icon11.png"
|
||
},
|
||
{
|
||
"name": "朋友圈",
|
||
"url": "/static/image/recharge/214/icon12.png"
|
||
}
|
||
],
|
||
"anyList": [
|
||
{
|
||
"name": "无广告",
|
||
"url": "/static/image/recharge/214/icon1.png"
|
||
},
|
||
{
|
||
"name": "无水印",
|
||
"url": "/static/image/recharge/214/icon2.png"
|
||
},
|
||
{
|
||
"name": "专属客服",
|
||
"url": "/static/image/recharge/214/icon3.png"
|
||
},
|
||
{
|
||
"name": "多设备",
|
||
"url": "/static/image/recharge/214/icon4.png"
|
||
},
|
||
{
|
||
"name": "朋友圈素材",
|
||
"url": "/static/image/recharge/214/icon12.png"
|
||
},
|
||
{
|
||
"name": "豪车视频",
|
||
"url": "/static/image/recharge/214/icon20.png"
|
||
},
|
||
{
|
||
"name": "小决定",
|
||
"url": "/static/image/recharge/214/icon19.png"
|
||
},
|
||
{
|
||
"name": "随机数",
|
||
"url": "/static/image/recharge/214/icon18.png"
|
||
}
|
||
],
|
||
"alList": [
|
||
{
|
||
"name": "余额模拟",
|
||
"url": "/static/image/recharge/214/icon8.png"
|
||
},
|
||
{
|
||
"name": "账单生成",
|
||
"url": "/static/image/recharge/214/icon11.png"
|
||
},
|
||
{
|
||
"name": "理财",
|
||
"url": "/static/image/recharge/214/icon17.png"
|
||
},
|
||
{
|
||
"name": "花呗",
|
||
"url": "/static/image/recharge/214/icon16.png"
|
||
},
|
||
{
|
||
"name": "账单详情",
|
||
"url": "/static/image/recharge/214/icon21.png"
|
||
},
|
||
{
|
||
"name": "逾期",
|
||
"url": "/static/image/recharge/214/icon13.png"
|
||
},
|
||
{
|
||
"name": "黑卡",
|
||
"url": "/static/image/recharge/214/icon14.png"
|
||
},
|
||
{
|
||
"name": "热门图标",
|
||
"url": "/static/image/recharge/214/icon15.png"
|
||
}
|
||
]
|
||
|
||
},
|
||
alListZC:[
|
||
{
|
||
name: "余额模拟",
|
||
url: "/static/image/recharge/icon8.png"
|
||
},
|
||
{
|
||
name: "账单生成",
|
||
url: "/static/image/recharge/icon11.png"
|
||
},
|
||
{
|
||
name: "理财",
|
||
url: "/static/image/recharge/icon17.png"
|
||
},
|
||
{
|
||
name: "花呗",
|
||
url: "/static/image/recharge/icon16.png"
|
||
},
|
||
{
|
||
name: "账单详情",
|
||
url: "/static/image/recharge/icon21.png"
|
||
},
|
||
{
|
||
name: "逾期",
|
||
url: "/static/image/recharge/icon13.png"
|
||
},
|
||
{
|
||
name: "黑卡",
|
||
url: "/static/image/recharge/icon14.png"
|
||
},
|
||
{
|
||
name: "热门图标",
|
||
url: "/static/image/recharge/icon15.png"
|
||
}
|
||
],
|
||
alListHS:[
|
||
{
|
||
name: "余额模拟",
|
||
url: "/static/image/recharge/huise/icon8.png"
|
||
},
|
||
{
|
||
name: "账单生成",
|
||
url: "/static/image/recharge/huise/icon11.png"
|
||
},
|
||
{
|
||
name: "理财",
|
||
url: "/static/image/recharge/huise/icon17.png"
|
||
},
|
||
{
|
||
name: "花呗",
|
||
url: "/static/image/recharge/huise/icon16.png"
|
||
},
|
||
{
|
||
name: "账单详情",
|
||
url: "/static/image/recharge/huise/icon21.png"
|
||
},
|
||
{
|
||
name: "逾期",
|
||
url: "/static/image/recharge/huise/icon13.png"
|
||
},
|
||
{
|
||
name: "黑卡",
|
||
url: "/static/image/recharge/huise/icon14.png"
|
||
},
|
||
{
|
||
name: "热门图标",
|
||
url: "/static/image/recharge/huise/icon15.png"
|
||
}
|
||
],
|
||
wxList: [
|
||
{
|
||
name: "AI聊天模板",
|
||
url: "/static/image/recharge/icon5.png"
|
||
},
|
||
{
|
||
name: "聊天转账",
|
||
url: "/static/image/recharge/icon6.png"
|
||
},
|
||
{
|
||
name: "限额设置",
|
||
url: "/static/image/recharge/icon7.png"
|
||
},
|
||
{
|
||
name: "零钱修改",
|
||
url: "/static/image/recharge/icon8.png"
|
||
},
|
||
{
|
||
name: "零钱通",
|
||
url: "/static/image/recharge/icon9.png"
|
||
},
|
||
{
|
||
name: "分付",
|
||
url: "/static/image/recharge/icon10.png"
|
||
},
|
||
{
|
||
name: "账单",
|
||
url: "/static/image/recharge/icon11.png"
|
||
},
|
||
{
|
||
name: "朋友圈",
|
||
url: "/static/image/recharge/icon12.png"
|
||
}
|
||
],
|
||
// tab数据列表
|
||
tabList: [
|
||
{ label: '微信特权', icon: '/static/image/recharge/weixin.png' },
|
||
{ label: '小宝特权', icon: '/static/image/recharge/aili.png' },
|
||
{ label: '通用特权', icon: '/static/image/recharge/tytq.png' },
|
||
{ label: '权益对比', icon: '/static/image/recharge/qy.png' }
|
||
]
|
||
};
|
||
},
|
||
watch: {
|
||
isHuise(newValue, oldValue) {
|
||
console.log(newValue)
|
||
console.log(this.alList[0].url.indexOf('recharge/huise/icon')!=-1)
|
||
this.alList.forEach(element => {
|
||
if(element.url.indexOf('recharge/huise/icon')!=-1){
|
||
if(!newValue) {
|
||
// element.url = element.url.replace('recharge/huise/icon','recharge/icon');
|
||
const config = uni.getStorageSync('config').config
|
||
const themeConfig = config?.['client.uniapp.theme']
|
||
if(themeConfig?.enable){
|
||
if(themeConfig?.theme=='0214'){
|
||
this.alList= this.qrj.alList
|
||
}else if(themeConfig?.theme=='0217'){
|
||
this.alList= this.chunjie.alList
|
||
}
|
||
}else{
|
||
this.alList=this.alListZC
|
||
}
|
||
}
|
||
}else{
|
||
if(newValue) {
|
||
// element.url = element.url.replace('recharge/icon', 'recharge/huise/icon');
|
||
this.alList=this.alListHS
|
||
}
|
||
|
||
}
|
||
|
||
});
|
||
}
|
||
},
|
||
mounted() {
|
||
this.alList=this.alListZC
|
||
const config = uni.getStorageSync('config').config
|
||
console.log("config",config)
|
||
const themeConfig = config?.['client.uniapp.theme']
|
||
console.log("themeConfig",themeConfig)
|
||
if(themeConfig?.enable){
|
||
if(themeConfig?.theme=='0214'){
|
||
this.wxList= this.qrj.wxList
|
||
this.alList= this.qrj.alList
|
||
this.anyList= this.qrj.anyList
|
||
}else if(themeConfig?.theme=='0217'){
|
||
this.wxList= this.chunjie.wxList
|
||
this.alList= this.chunjie.alList
|
||
this.anyList= this.chunjie.anyList
|
||
}
|
||
}
|
||
if(this.isHuise) {
|
||
this.alList=this.alListHS
|
||
// this.alList.forEach(element => {
|
||
// element.url = element.url.replace('recharge/icon', 'recharge/huise/icon');
|
||
// });
|
||
}
|
||
},
|
||
methods: {
|
||
// tab切换事件
|
||
onTabChange(index) {
|
||
this.activeIndex = index;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
margin:0 32rpx 32rpx 32rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-image: url('/static/image/recharge/tabBg.png');
|
||
background-size: 100% 68px;
|
||
background-position: 0 5px;
|
||
background-repeat: no-repeat;
|
||
.item {
|
||
width: 100%;
|
||
height: 42px;
|
||
// background-color: #;
|
||
border-radius: 12px 12px 0 0;
|
||
position: relative;
|
||
line-height: 47px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
// transition: all 0.3s ease-in-out;
|
||
cursor: pointer;
|
||
.box{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.titleImage{
|
||
width: 45px;
|
||
height: 11px;
|
||
margin-top: 16px;
|
||
}
|
||
.vipImage{
|
||
margin-top: 15px;
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
.closeImage{
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.left,.right{
|
||
image{
|
||
width: 19px;
|
||
height: 30px;
|
||
}
|
||
}
|
||
.left {
|
||
display: none;
|
||
position: absolute;
|
||
top: 12px;
|
||
left: -19px;
|
||
// transition: all 0.3s ease-in-out;
|
||
// transform-origin: right center;
|
||
transform: scaleX(-1);
|
||
}
|
||
|
||
.right {
|
||
display: none;
|
||
position: absolute;
|
||
top: 12px;
|
||
right: -19px;
|
||
// transition: all 0.3s ease-in-out;
|
||
transform-origin: left center;
|
||
// transform: scaleX(0);
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #fff;
|
||
color: #000;
|
||
// transition: all 0.3s ease-in-out;
|
||
|
||
.left {
|
||
display: block;
|
||
// transform: scaleX(1);
|
||
}
|
||
|
||
.right {
|
||
display: block;
|
||
// transform: scaleX(1);
|
||
}
|
||
}
|
||
|
||
.triangle-concave-transparent {
|
||
transform: rotate(180deg);
|
||
width: 25px;
|
||
height: 25px;
|
||
position: relative;
|
||
background-color: #fff;
|
||
|
||
/* 创建直角三角形遮罩 */
|
||
mask:
|
||
/* 步骤1：先创建一个直角三角形区域 */
|
||
linear-gradient(315deg,
|
||
transparent 0%,
|
||
transparent calc(50% - 1px),
|
||
black 50%,
|
||
black 100%),
|
||
/* 步骤2：从右下角创建一个径向渐变来切割出凹陷 */
|
||
radial-gradient(circle at 100% 100%,
|
||
transparent calc(50.5% + 7px),
|
||
/* 控制凹陷深度，值越大凹陷越深 */
|
||
black calc(50.5% + 7px));
|
||
|
||
mask-composite: intersect;
|
||
-webkit-mask-composite: source-in;
|
||
mask-size: 100% 100%;
|
||
mask-position: 0 0;
|
||
mask-repeat: no-repeat;
|
||
}
|
||
|
||
.leftBox {
|
||
transform: rotate(270deg);
|
||
}
|
||
}
|
||
.leftVip{
|
||
border-radius:0 14px 14px 14px !important;
|
||
}
|
||
.rightVip{
|
||
border-radius:14px 0 14px 14px !important;
|
||
}
|
||
.centerVip{
|
||
border-radius: 14px !important;
|
||
}
|
||
.vip-benefits-container {
|
||
border-radius:0 0 14px 14px;
|
||
background-color: #FFFFFF;
|
||
padding: 16px 0px 0 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
background-color: #FFFFFF;
|
||
animation: fadeInUp2 0.6s ease-out;
|
||
|
||
.benefit-item {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
transition: all 0.3s ease-in-out;
|
||
animation: fadeInUp 0.3s ease-out;
|
||
|
||
// 为每个item添加延迟动画
|
||
@for $i from 1 through 12 {
|
||
&:nth-child(#{$i}) {
|
||
animation-delay: #{$i * 0.1}s;
|
||
animation-fill-mode: both;
|
||
}
|
||
}
|
||
|
||
// 悬停效果
|
||
&:hover {
|
||
// transform: translateY(-4px);
|
||
// box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.img {
|
||
width: 76rpx;
|
||
height: 76rpx;
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
|
||
.name {
|
||
font-size: 10px;
|
||
margin-top: 16rpx;
|
||
transition: all 0.3s ease-in-out;
|
||
}
|
||
}
|
||
.qydb{
|
||
margin: 10px;
|
||
width: calc(100% - 20px);
|
||
// transition: all 0.3s ease-in-out;
|
||
animation: fadeInUp 0.3s ease-out;
|
||
}
|
||
|
||
}
|
||
|
||
// 淡入上移动画
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
// 淡入上移动画
|
||
@keyframes fadeInUp2 {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style> |