这个案例是uniapp，同样也适用Vue项目，语法一样for循环，点击切换
效果图
图1
图2
源码
直接代码复制查看效果
<template>
<view class="my-helper-service-pass">
<view class="tab-service-box">
<view class="new-tab-item" @click="getTabIndex(index,item.supplier_grade_id)" v-for="(item,index) in grade_list" :class="{ active: currentTab === index }" >
<view class="bottomline">
<text class="bottomline-txt1">{
{item.name}}</text>
<view class="bottomline-txt2">
￥<text>{
{item.upgrade_money}}</text>
</view>
<text class="bottomline-txt3">免{
{item.reduce_commission}}元手续费</text>
<text class="bottomline-txt4">送{
{item.message_num}}条商机提醒</text>
</view>
</view>
</view>
<view class="submit-service-box">
<view class="submit-service-btn d-c-c" @click="submitServie">
确认开通并支付￥{
{upgrade_money}}
</view>
</view>
<view class="agreement-box">
<view class="agreement" @click="isRead=!isRead">
<view :class="isRead?'active agreement-new':'agreement-new'"></view>
同意万事直帮<text @click="xieyi('service')">《服务通服务协议》</text>
</view>
</view>
<!-- 尊享8大服务权益 -->
<view class="equity-box">
<view class="equity-tit">
<view class="equity-tit-lft">
</view>
<view class="equity-tit-txt">
尊享8大服务权益
</view>
<view class="equity-tit-rgt">
</view>
</view>
<view class="equity-list">
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass1.png" mode=""></image> -->
<text class="equity-list-item1">可以发布</text>
<text class="equity-list-item1">{
{release_num}}个服务</text>
</view>
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass2.png" mode=""></image> -->
<text class="equity-list-item1">优质万事直帮</text>
<text class="equity-list-item1">服务标识</text>
</view>
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass3.png" mode=""></image> -->
<text class="equity-list-item1">提现</text>
<text class="equity-list-item1">T+0到账</text>
</view>
</view>
<view class="equity-list equity-list2">
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass4.png" mode=""></image> -->
<text class="equity-list-item1">服务项目排名</text>
<text class="equity-list-item1">优先展示</text>
</view>
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass5.png" mode=""></image> -->
<text class="equity-list-item1">减免{
{reduce_commission}}元的</text>
<text class="equity-list-item1">订单手续费</text>
</view>
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass6.png" mode=""></image> -->
<text class="equity-list-item1">导师在线指导</text>
<text class="equity-list-item1">接单赚钱</text>
</view>
</view>
<view class="equity-list equity-list2">
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass7.png" mode=""></image> -->
<text class="equity-list-item1">享受平台站内和</text>
<text class="equity-list-item1">站外流量扶持</text>
</view>
<view class="equity-list-item">
<!-- <image src="https://bk-css-image.oss-cn-beijing.aliyuncs.com/static/user/index_service/my_helper_service_pass/servicepass8.png" mode=""></image> -->
<text class="equity-list-item1">赠送{
{message_num}}条短信</text>
<text class="equity-list-item1">服务商机提醒,包含对话和订单提醒</text>
</view>
</view>
</view>
<view class="block-btm">
</view>
</view>
</template>
<script>
export default {
data() {
return {
currentTab: 0,
removeobstaclesfrom: '', //开通需要传的参数
isRead: false,
// grade_list: [],
supplier_grade_id: '',
payPrice:'',//支付的钱数
service_vip_url:'',
upgrade_money:'',
release_num:'',
reduce_commission:'',
message_num:'',
grade_list:[]
}
},
mounted() {
this.getVipListData();
},
methods: {
// VIP列表
getVipListData() {
let self = this;
self.isloadding = true;
self._get('supplier.grade/gradeList', {
}, function(res) {
// 实际接口返回的现在用，测试的，暂且注释，用下面第二个数据赋值
// 第一个赋值
// self.grade_list = res.data.grade_list;
// 接口返回的数据，复制过来的
let getList = [
{
"supplier_grade_id": 3,
"name": "1个月",
"upgrade_money": 188,
"is_default": 0,
"weight": 110,
"reduce_commission": 188,
"release_num": 6,
"message_num": 188,
"time": 30,
"is_delete": 0,
"app_id": 10001,
"create_time": "2023-09-28 13:50:54",
"update_time": "2023-12-29 10:25:38"
},
{
"supplier_grade_id": 4,
"name": "3个月",
"upgrade_money": 388,
"is_default": 0,
"weight": 120,
"reduce_commission": 388,
"release_num": 10,
"message_num": 388,
"time": 90,
"is_delete": 0,
"app_id": 10001,
"create_time": "2023-10-19 15:55:03",
"update_time": "2023-12-29 10:25:45"
},
{
"supplier_grade_id": 5,
"name": "12个月",
"upgrade_money": 688,
"is_default": 0,
"weight": 127,
"reduce_commission": 688,
"release_num": 18,
"message_num": 700,
"time": 365,
"is_delete": 0,
"app_id": 10001,
"create_time": "2023-12-13 09:57:32",
"update_time": "2023-12-29 10:37:04"
}
]
// 第二个赋值
self.grade_list = getList;
// 接口赋值
// self.supplier_grade_id = res.data.grade_list[0].supplier_grade_id
// self.upgrade_money = res.data.grade_list[0].upgrade_money
// console.log(res.data.grade_list[0].release_num,'发布数量');
// console.log(res.data.grade_list[0].reduce_commission,'发布数量');
// console.log(res.data.grade_list[0].message_num,'发布数量');
// self.release_num = res.data.grade_list[0].release_num;
// self.reduce_commission = res.data.grade_list[0].reduce_commission;
// self.message_num = res.data.grade_list[0].message_num;
// self.service_vip_url = res.data.service_vip_url
// 模拟复制过来的接口数据赋值
self.supplier_grade_id = rgetList[0].supplier_grade_id
self.upgrade_money = getList[0].upgrade_money
console.log(getList[0].release_num,'发布数量');
console.log(getList[0].reduce_commission,'发布数量');
console.log(getList[0].message_num,'发布数量');
self.release_num = getList[0].release_num;
self.reduce_commission = rgetList[0].reduce_commission;
self.message_num = getList[0].message_num;
// self.service_vip_url = res.data.service_vip_url
});
},
getTabIndex(index,supplier_grade_id){
this.currentTab = index;
this.upgrade_money = this.grade_list[index].upgrade_money;
this.release_num = this.grade_list[index].release_num;
this.reduce_commission = this.grade_list[index].reduce_commission;
this.message_num = this.grade_list[index].message_num;
this.supplier_grade_id = supplier_grade_id;
},
xieyi() {
// let url = '';
// if (type == 'service') {
// url = this.service;
// } else {
// url = this.privacy;
// }
let url = this.service_vip_url;
uni.navigateTo({
url: '/subPages/webview/webview?url=' + url
});
},
submitServie() {
let self = this;
if (!self.isRead) {
uni.showToast({
title: '请同意并勾选协议内容',
duration: 2000,
icon: 'none'
});
return;
}
wx.showModal({
title: '提示',
content: '您确认开通吗?',
success: function(o) {
if (o.confirm) {
uni.showLoading({
title: '正在处理'
});
self._post('supplier.grade/deposit', {
supplier_grade_id: self.supplier_grade_id,
}, function(res) {
// console.log(res.data.money,'返回的余额');
// console.log(res.data.order_id,'开通成功');
let balance = res.data.money;//余额
// let payPrice = self.payPrice;//支付的钱数
let payPrice = self.upgrade_money;//支付的钱数
let order_id = res.data.order_id
uni.navigateTo({
url:`/pagesB/user/index_service/my_helper_service_pass/cashier?order_id=${ order_id}&balance=${ balance}&payPrice=${ payPrice}`
})
// console.log(balance,'传余额');
// console.log(payPrice,'传支付的钱数');
// console.log(order_id,'传order_id');
// let order_id = res.data.order_id
// uni.navigateTo({
// url:`/pages/user/index_service/my_helper_service_pass/cashier?order_id=' + order_id
// })
});
}
}
});
}
}
}
</script>
<style scoped>
page {
/* background: linear-gradient(180deg, #1D1F21 0%, #242629 100%); */
background-color: black;
}
.my-helper-service-pass {
background-color: black;
}
.tab-service-box {
/* margin: 26rpx 32rpx 0 32rpx; */
margin: 0 32rpx 0 32rpx;
padding-top: 26rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
/* 下面默认未选中样式 */
.new-tab-item {
width: 214rpx;
height: 258rpx;
background: linear-gradient(180deg, #FEEFD3 0%, #E2C091 100%);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.new-tab-item .bottomline {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.bottomline-txt1 {
margin-top: 22rpx;
font-size: 28rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #231F18;
line-height: 52rpx;
}
.bottomline-txt2 {
margin-top: 8rpx;
font-size: 36rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #663211;
line-height: 52rpx;
}
.bottomline-txt2 text {
font-size: 48rpx;
font-weight: 700;
}
.bottomline-txt3 {
margin-top: 8rpx;
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #2B2B2B;
line-height: 52rpx;
}
.bottomline-txt4 {
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #2B2B2B;
line-height: 52rpx;
}
/* 下面选中样式 */
.tab-service-box .active {
width: 214rpx;
height: 258rpx;
background: #1F2123;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
border: 2rpx solid;
border-image: linear-gradient(180deg, rgba(164.00000542402267, 104.00000140070915, 66.00000366568565, 1), rgba(226.0000017285347, 192.00000375509262, 145.00000655651093, 1)) 2 2;
display: flex;
flex-direction: column;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.tab-service-box .active .bottomline-txt1 {
margin-top: 22rpx;
font-size: 28rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
.tab-service-box .active .bottomline-txt2 {
margin-top: 8rpx;
font-size: 36rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #E2C091;
line-height: 52rpx;
}
.tab-service-box .active .bottomline-txt2 text {
font-size: 48rpx;
font-weight: 700;
}
.tab-service-box .active .bottomline-txt3 {
margin-top: 8rpx;
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
.tab-service-box .active .bottomline-txt4 {
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}
.submit-service-box {
display: flex;
justify-content: center;
margin-top: 60rpx;
}
.submit-service-btn {
width: 554rpx;
height: 80rpx;
background: linear-gradient(180deg, #FEF0D4 0%, #E1BF8F 100%);
border-radius: 60rpx 60rpx 60rpx 60rpx;
opacity: 1;
font-size: 28rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 700;
color: #663211;
line-height: 64rpx;
}
.agreement-box {
display: flex;
justify-content: center;
margin-top: 16rpx;
}
.agreement {
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
display: flex;
align-items: center;
}
.agreement text {
font-size: 24rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #E1BF8F;
line-height: 52rpx;
}
.agreement-new {
border-radius: 50%;
width: 28rpx;
height: 28rpx;
border: 2rpx solid #999999;
background: #fff;
position: relative;
margin-right: 10rpx;
box-sizing: border-box;
}
.agreement-new.active::after {
content: '';
width: 16rpx;
height: 16rpx;
background: linear-gradient(180deg, #FEF0D4 0%, #C19D6C 100%);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.equity-box {
margin: 32rpx 30rpx 0 32rpx;
height: 770rpx;
background: linear-gradient(117deg, #323232 0%, #1B1B1B 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
opacity: 1;
display: flex;
flex-direction: column;
/* margin-bottom: 154rpx; */
}
.equity-tit {
display: flex;
align-items: center;
justify-content: center;
margin-top: 28rpx !important;
}
.equity-tit-lft {
width: 40rpx;
height: 4rpx;
background: linear-gradient(270deg, #E1C092 0%, rgba(216, 216, 216, 0) 100%);
border-radius: 72rpx 72rpx 72rpx 72rpx;
opacity: 1;
margin-right: 20rpx;
}
.equity-tit-txt {
font-size: 42rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 700;
color: #F4DFBA;
line-height: 64rpx;
}
.equity-tit-rgt {
width: 40rpx;
height: 4rpx;
background: linear-gradient(270deg, #E1C092 0%, rgba(216, 216, 216, 0) 100%);
border-radius: 72rpx 72rpx 72rpx 72rpx;
opacity: 1;
transform: rotate(180deg);
margin-left: 20rpx;
}
.equity-list {
margin-top: 20rpx;
display: flex;
/* justify-content: space-between; */
justify-content: space-around;
/* margin-left: 60rpx;
margin-right: 66rpx; */
}
.equity-list-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.equity-list-item image {
width: 76rpx;
height: 76rpx;
background: #231F18;
opacity: 1;
border-radius: 16rpx;
margin-bottom: 12rpx;
}
.equity-list-item1 {
font-size: 28rpx;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 40rpx;
}
.equity-list2 {
margin-top: 48rpx;
}
.block-btm {
height: 154rpx;
}
</style>
最后
感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
