填写团队信息；自定义省市区弹框组件等

components/CusProvinceCityArea/city-data.js

@@ -0,0 +1,77 @@
+// 模拟的省市区数据
+// 真实项目中建议使用完整的城市数据JS或JSON文件
+export const cityData = [
+  {
+    "name": "北京",
+    "children": [
+      {
+        "name": "北京市",
+        "children": [
+          { "name": "东城区" },
+          { "name": "西城区" },
+          { "name": "朝阳区" },
+          { "name": "海淀区" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "浙江省",
+    "children": [
+      {
+        "name": "杭州市",
+        "children": [
+          { "name": "上城区" },
+          { "name": "下城区" },
+          { "name": "江干区" },
+          { "name": "拱墅区" },
+          { "name": "西湖区" },
+          { "name": "滨江区" }
+        ]
+      },
+      {
+        "name": "宁波市",
+        "children": [
+          { "name": "海曙区" },
+          { "name": "江北区" },
+          { "name": "镇海区" },
+          { "name": "北仑区" }
+        ]
+      },
+      {
+        "name": "温州市",
+        "children": [
+          { "name": "鹿城区" },
+          { "name": "龙湾区" },
+          { "name": "瓯海区" },
+          { "name": "萧山区" }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "江苏省",
+    "children": [
+      {
+        "name": "南京市",
+        "children": [
+          { "name": "玄武区" },
+          { "name": "秦淮区" },
+          { "name": "建邺区" }
+        ]
+      },
+      {
+        "name": "苏州市",
+        "children": [
+          { "name": "姑苏区" },
+          { "name": "虎丘区" },
+          { "name": "吴中区" }
+        ]
+      }
+    ]
+  },
+  // ... 其他省份
+];
+
+// 热门城市
+export const hotCities = ['北京', '上海', '广州', '深圳', '杭州', '南京'];

components/CusProvinceCityArea/index.vue

@@ -0,0 +1,172 @@
+<template>
+	<view class="ssq adffc">
+		<view class="box">
+			<view class="box-top adfac">
+				<view class="box-top-btn qx" @click="handleCancel">取消</view>
+				<view class="box-top-title">{{title}}</view>
+				<view class="box-top-btn qd" @click="handleConfirm">确定</view>
+			</view>
+			<picker-view :value="pickerValue" @change="handlePickerChange" class="picker-view">
+			  <!-- 省份列 -->
+			  <picker-view-column>
+			    <view
+			      class="picker-item"
+			      :class="{ 'selected-item': pickerValue[0] === index }"
+			      v-for="(province, index) in provinces"
+			      :key="province.name"
+			    >
+			      {{ province.name }}
+			    </view>
+			  </picker-view-column>
+			  <!-- 城市列 -->
+			  <picker-view-column>
+			    <view
+			      class="picker-item"
+			      :class="{ 'selected-item': pickerValue[1] === index }"
+			      v-for="(city, index) in cities"
+			      :key="city.name"
+			    >
+			      {{ city.name }}
+			    </view>
+			  </picker-view-column>
+			  <!-- 区县列 -->
+			  <picker-view-column>
+			    <view
+			      class="picker-item"
+			      :class="{ 'selected-item': pickerValue[2] === index }"
+			      v-for="(area, index) in areas"
+			      :key="area.name"
+			    >
+			      {{ area.name }}
+			    </view>
+			  </picker-view-column>
+			</picker-view>
+		</view>
+	</view>	
+</template>
+
+<script>
+	import { cityData, hotCities } from './city-data.js';
+	export default {
+		props:{
+			title:{
+				typeof:String,
+				default:'所属地区'
+			}
+		},
+		data(){
+			return {
+				provinces:cityData,
+				cities:[],
+				areas:[],
+				pickerValue:[0,0,0]
+			}
+		},
+		computed:{
+			selectedProvince:function(){
+				return this.provinces[this.pickerValue[0]] || {}
+			},
+			selectedCity:function(){
+				return this.cities[this.pickerValue[1]] || {}
+			},
+			selectedArea:function(){
+				return this.areas[this.pickerValue[2]] || {}
+			}
+		},
+		mounted() {
+			this.initialize()
+		},
+		methods:{
+			handlePickerChange(e){
+				const newPickerValue = e.detail.value;
+				const [provinceIndex, cityIndex, areaIndex] = newPickerValue;
+				const oldProvinceIndex = this.pickerValue[0];
+				const oldCityIndex = this.pickerValue[1];
+				
+				if (provinceIndex !== oldProvinceIndex) {
+				  this.cities = this.provinces[provinceIndex].children;
+				  this.areas = this.cities[0]?.children || [];
+				  this.pickerValue = [provinceIndex, 0, 0];
+				} else if (cityIndex !== oldCityIndex) {
+				  // 更新地区列表，并将地区索引重置为0
+				  this.areas = this.cities[cityIndex]?.children || [];
+				  this.pickerValue = [provinceIndex, cityIndex, 0];
+				} else {
+				  this.pickerValue = newPickerValue;
+				}
+			},
+			initialize(){
+				this.cities = this.provinces[0]?.children || [];
+				this.areas = this.cities[0]?.children || [];
+			},
+			handleCancel(){
+				this.$emit('cancel')
+			},
+			handleConfirm(){
+				this.$emit('confirm',this.pickerValue)
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.ssq{
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, .5);
+		justify-content: flex-end;
+		z-index: 1001;
+		
+		.box{
+			background: #FFFFFF;
+			border-radius: 24rpx 24rpx 0 0;
+			&-top{
+				width: 100%;
+				height: 84rpx;
+				&-btn{
+					width: 120rpx;
+					font-size: 30rpx;
+					text-align: center;
+					line-height: 42rpx;
+					&.qx{
+						color: #909193;
+					}
+					&.qd{
+						color: #3c9cff;
+					}
+				}
+				&-title{
+					flex: 1;
+					font-size: 32rpx;
+					color: #303133;
+					text-align: center;
+					line-height: 42rpx;
+				}
+			}
+		}
+	}
+	
+	.picker-view {
+	  width: 100%;
+	  height: 380rpx;
+	  margin: 40rpx 0 80rpx;
+	}
+	
+	.picker-item {
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  font-size: 36rpx;
+	  color: #303133;
+	  transition: all 0.2s;
+	  
+	  &.selected-item {
+	    font-size: 36rpx;
+		font-weight: bold;
+	    color: #303133;
+	  }
+	}
+</style>

pages.json

@@ -106,6 +106,12 @@
 					"style": {
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "fillTeamInfo",
+					"style": {
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}