uniapp多个picker组件复用

<template>
	<view class="treatment">
		<view class="navigation">
			<view v-for="(item,index) in navList" :key="index" :class="activeclass === index? 'navigationTextSelect' : 'navigationText'" @click="selectindex(index)">{{item}}</view>
		</view>
		<view class="ResultTitle" v-for="(item,index) in programmeList" :key="index" :class="programmeclass === index? 'ResultTitleSelect' : 'ResultTitleUnchecked'" @click="selectProgramme(index)">
			<text style="width: 187px; font-size: 30rpx;">{{item.name}}</text>
			<view class="pickerView">
				<picker @change="bindReason" :range="item.valueList" @click="pickerIndex = index">
					<view class="infoPicker">{{item.value}}</view>
				</picker>
				<image src="@/static/assets/botton.png"></image>
			</view>
		</view>
		<view class="ResultBtn">
			<button>导入\更新模板库</button>
			<button @tap="navigateTo('/pages/treatment/generalTreatment')">选择模板</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				activeclass: 0,
				programmeclass: 0,
				navList:["方案治疗","电刺激","触发电刺激","产后康复","刺激训练"],
				programmeList:[
					{
						name: "方案治疗模板：",
						value: "方案治疗模板一",
						valueList: ['方案治疗模板一', '方案治疗模板二', '方案治疗模板三', '方案治疗模板四'],
					},
					{
						name: "电刺激模板：",
						value: "电刺激模板一",
						valueList: ['电刺激模板一', '电刺激模板二', '电刺激模板三', '电刺激模板四'],
					},
					{
						name: "触发电刺激模板：",
						value: "触发电刺激治疗模板一",
						valueList: ['触发电刺激治疗模板一', '触发电刺激治疗模板二', '触发电刺激治疗模板三', '触发电刺激治疗模板四'],
					},
					{
						name: "产后康复模板：",
						value: "产后康复治疗模板一",
						valueList: ['产后康复治疗模板一', '产后康复治疗模板二', '产后康复治疗模板三', '产后康复治疗模板四'],
					},
					{
						name: "刺激训练模板：",
						value: "刺激训练治疗模板一",
						valueList: ['刺激训练治疗模板一', '刺激训练治疗模板二', '刺激训练治疗模板三', '刺激训练治疗模板四'],
					},
				],
				// 定义当前点击获取的下标，数组是从【0】开始的；
				pickerIndex:0,
				navigationUrl:[
					'/pages/treatment/regimenTreatment',
					'/pages/treatment/electricalStimulation',
					'/pages/treatment/selectElectricalStimulation',
					'/pages/treatment/postpartumRecovery',
					'/pages/treatment/stimulationTherapy',
				]
			}
		},
		methods:{
			//点击切换头状态
			selectindex(index){
				this.activeclass = index
				uni.navigateTo({
					url: this.navigationUrl[index]
				})
			},
			//点击切换picker内容
			bindReason(e) {
				this.programmeList[this.pickerIndex].value = this.programmeList[this.pickerIndex].valueList[e.detail.value];
			},
			//点击切换内容区域状态
			selectProgramme(index){
				this.programmeclass = index
			},
			//跳转模板
			navigateTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>