前端uniapp的tab选项卡for循环切换、开通VIP实战案例【带源码/最新】

这个案例是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>

		
		<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">
					
					<text class="equity-list-item1">可以发布text>
					<text class="equity-list-item1">{{release_num}}个服务text>
				view>
				<view class="equity-list-item">
					
					<text class="equity-list-item1">优质万事直帮text>
					<text class="equity-list-item1">服务标识text>
				view>
				<view class="equity-list-item">
					
					<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">
					
					<text class="equity-list-item1">服务项目排名text>
					<text class="equity-list-item1">优先展示text>
				view>
				<view class="equity-list-item">
					
					<text class="equity-list-item1">减免{{reduce_commission}}元的text>
					<text class="equity-list-item1">订单手续费text>
				view>
				<view class="equity-list-item">
					
					<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">
					
					<text class="equity-list-item1">享受平台站内和text>
					<text class="equity-list-item1">站外流量扶持text>
				view>
				<view class="equity-list-item">
					
					<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>

最后

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