这个案例是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_idself.upgrade_money = getList[0].upgrade_moneyconsole.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_iduni.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>

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！