微信小程序顶部导航栏切换模板

<template>
	 <view>
			<view class="nav">
			 <view @click="navSwitch" data-index="0" :class="navState==0 ? 'nav-switch-style':''">已上架
			 </view>
			 <view @click="selectores" data-index="2" :class="navState==1 ? 'nav-switch-style':''">{{whole}}
			 <image :src="imgurl" ></image>
			 	<view v-show='showstwo'>
			 		<view class="second" @click="second" data-index="3">审核通过</view>
			 		<view class="second" @click="second" data-index="4">未通过</view>
			 		<view class="second" @click="second" data-index="5">审核中</view>
			 	</view>
			 </view>
			 <view @click="navSwitch" data-index="2" :class="navState==2 ? 'nav-switch-style':''">新增套餐</view>
			</view>
			<!-- 不可滑动页 -->
			<view>
			 <view  v-if="navState==0" >
			 <view >套餐名称</view>
			 <view>套餐租金</view>
			 </view>
			
			<view v-if="navState==3">
				审核通过
			 </view>
			 <view v-if="navState==4">
			 	未通过
			  </view>
			  <view v-if="navState==5">
			  	审核中
			   </view>
			
			 <view v-if="navState==2" class="">
				 <form @submit="formSubmit" @reset="formReset">
					<view class="list-name">套餐名称:</view>
				 	<input class="list-input" id="PackageName" name="PackageName" placeholder="例如**路车行齐大师电动车"/>
					 <view class="list-name">套餐租金:</view>
					 <input class="list-input" id="PackageRent" name="PackageRent" placeholder="请输入套餐租金金额"/>
					 <view class="list-name">押金金额:</view>
					 <input class="list-input" id="DepositAmount" name="DepositAmount" placeholder="请输入套餐压金金额"/>
					 <view class="tips">注意：电池套餐的租金建议设置为299/月，押金为300元</view>
				 <button  class="Confirm-binding" formType="submit">确认新增套餐</button>
				 </form>
			 </view>
			</view>

	    </view>
</template>

<script setup lang="ts">
    import {ref,reactive} from 'vue';
	import {onLoad} from'@dcloudio/uni-app';
	let  navState = ref(0);//导航状态
	let whole = ref('审核中');
	let showstwo = ref(false);
	let imgurl = ref('../../static/jianto.png')
	 function navSwitch(e:any) {
	      // console.log(e.currentTarget.dataset.index)
	      let index = e.currentTarget.dataset.index;
	      navState.value = index
		  console.log(index)
	      }
		  
		  //新增套餐
	  function formSubmit(e: any) {
		   let uid =  uni.getStorageSync('uid');
		  let {PackageName, PackageRent,DepositAmount } = e.detail.value;
		   console.log(PackageName+'--------'+PackageRent+'--------'+DepositAmount)
	   }
	   //点击展开全部2
	   function selectores(e: any) {
	   	let index = e.currentTarget.dataset.index;
	   	if (showstwo.value) {
	   		showstwo.value = false;//控制展开收起
			imgurl.value = '../../static/jianto.png'//图片的状态切换
	   	} else {
	   		showstwo.value = true;//控制展开收起
			imgurl.value = '../../static/down.png'//图片的状态切换
	   	}
	   }
	   //显示切换标题
	   function second(e: any) {
	   	let index = e.currentTarget.dataset.index;
	   	console.log(index)
		navState.value = index;//控制底部显示什么内容
	   	if (index == 3) {
	   		whole.value = '审核通过';//控制文字展示
	   		console.log(whole.value)
	   	}
	   	if (index == 4) {
	   		whole.value = '未通过';//控制文字展示
	   	}
	   	if (index == 5) {
	   		whole.value = '审核中';//控制文字展示
	   	}
	   }
</script>

<style>

.nav{
  height: 20px;
  display: flex;
  justify-content: space-around;
  padding: 20rpx;
  background-color: rgb(236 236 236));
   font-size: 14px;
   border-bottom: 2px solid rgb(219, 215, 215)
 }
 .nav-switch-style{
  color: rgb(223, 43, 43);
 }
 .style-roll{
  background-color: rgb(130, 177, 247);
  padding: 100rpx 0;
  text-align: center;
 }
image{
	width: 12px;
	height: 12px;
}
.second{
	height: 20px;
	
}

.list-name{
	float:left;
	width: 20%;
	height: 25px;
	margin-top: 5px;
	font-size: 15px;
}
.list-input{
	float:left;
	width: 77%;
	height: 30px;
	font-size: 13px;
	margin-left: 3%;
}
.tips{
	float:left;
	width: 100%;
	height: 30px;
	color: #DD524D;
	font-size: 11px;
	margin-top: 5px;
	text-align: center;
}
.Confirm-binding{
	float: left;
    width: 100%;
    height: 40px;
    font-size: 16px;
    text-align: center;
    background-color: #CC66FF;
   border-top: 5px;
}

</style>

 微信导航栏，顶部切换模板，可以展开切换内容