From 86d791ba04dda0366f8558155c607e9b40d220c5 Mon Sep 17 00:00:00 2001
From: D <3066417822@qq.com>
Date: Sun, 3 Dec 2023 15:24:16 +0800
Subject: [PATCH 1/2] update

---
 .../u-city-select}/area.js                    |   0
 .../u-city-select}/city.js                    |   0
 .../u-city-select}/province.js                |   0
 .../u-city-select}/u-city-select.vue          |   7 +-
 src/pages.json                                |   9 +-
 src/pages/index.vue                           | 190 ++++++++++++------
 src/pages_template/pages/citySelect/index.vue |   9 +-
 7 files changed, 142 insertions(+), 73 deletions(-)
 rename src/{pages_template/common => components/u-city-select}/area.js (100%)
 rename src/{pages_template/common => components/u-city-select}/city.js (100%)
 rename src/{pages_template/common => components/u-city-select}/province.js (100%)
 rename src/{pages_template/pages/citySelect => components/u-city-select}/u-city-select.vue (96%)

diff --git a/src/pages_template/common/area.js b/src/components/u-city-select/area.js
similarity index 100%
rename from src/pages_template/common/area.js
rename to src/components/u-city-select/area.js
diff --git a/src/pages_template/common/city.js b/src/components/u-city-select/city.js
similarity index 100%
rename from src/pages_template/common/city.js
rename to src/components/u-city-select/city.js
diff --git a/src/pages_template/common/province.js b/src/components/u-city-select/province.js
similarity index 100%
rename from src/pages_template/common/province.js
rename to src/components/u-city-select/province.js
diff --git a/src/pages_template/pages/citySelect/u-city-select.vue b/src/components/u-city-select/u-city-select.vue
similarity index 96%
rename from src/pages_template/pages/citySelect/u-city-select.vue
rename to src/components/u-city-select/u-city-select.vue
index 382276f..348b3a4 100644
--- a/src/pages_template/pages/citySelect/u-city-select.vue
+++ b/src/components/u-city-select/u-city-select.vue
@@ -64,9 +64,9 @@
 </template>
 
 <script>
-	import provinces from "@/pages_template/common/province.js";
-	import citys from "@/pages_template/common/city.js";
-	import areas from "@/pages_template/common/area.js";
+	import provinces from "./province.js";
+	import citys from "./city.js";
+	import areas from "./area.js";
 	/**
 	 * city-select 省市区级联选择器
 	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
@@ -248,3 +248,4 @@
 		}
 	}
 </style>
+@/components/u-city-select/province.js@/components/u-city-select/city.js@/components/u-city-select/area.js
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 0d133a8..0e977d5 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -1,12 +1,13 @@
 {
   "easycom": {
     "custom": {
+      "u-city-select": "@/components/u-city-select/u-city-select.vue",
+      "geek-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
+      "gx-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
       "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
       "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
-      "qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue",
-      "geek-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
-      "gx-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue"
+      "qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue"
     }
   },
   "pages": [
@@ -276,4 +277,4 @@
     "navigationBarTitleText": "RuoYi",
     "navigationBarBackgroundColor": "#FFFFFF"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c839312..07b1842 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,75 +1,141 @@
 <template>
-  <view class="content">
-    <image class="logo" src="@/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">Hello RuoYi-Vue</text>
-    </view>
-    <view class="text-area">
-      <up-text type="primary" text="uview-plus"></up-text>
-    </view>
-    <view class="charts-box">
-      <qiun-data-charts type="column" :chartData="chartData" />
-    </view>
+  <view style="height: 200rpx;background-color: skyblue;"></view>
+  <view>
+    <u--form labelPosition="left" :model="form" :rules="rules" ref="form1" :labelWidth="120"
+      :labelStyle="{ paddingLeft: '40rpx' }">
+      <u-form-item label="姓名" prop="name" borderBottom required>
+        <u--input v-model="form.name" border="none" placeholder="请输入姓名" />
+      </u-form-item>
+
+      <u-form-item label="性别" prop="sex" borderBottom @click="showSex = true">
+        <u--input v-model="form.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
+          suffixIcon="arrow-right" />
+      </u-form-item>
+
+      <u-form-item label="年龄" prop="age" borderBottom required>
+        <u--input v-model="form.age" border="none" placeholder="请输入年龄" />
+      </u-form-item>
+
+      <u-form-item label="手机号" prop="phone" borderBottom required>
+        <u--input v-model="form.phone" border="none" placeholder="请输入手机号" />
+      </u-form-item>
+
+      <u-form-item label="服务单位" prop="service" borderBottom required>
+        <u--input v-model="form.service" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
+          suffixIcon="arrow-right" />
+      </u-form-item>
+
+      <u-form-item label="从业年数" prop="years" borderBottom required>
+        <u--input v-model="form.years" border="none" placeholder="请输入从业年数" />
+      </u-form-item>
+
+      <u-form-item label="维修专长" prop="profession" borderBottom required>
+        <view @click="showSex = true">
+          <u--input disabled disabledColor="#ffffff" placeholder="添加" border="none" prefixIcon="plus-circle" />
+        </view>
+      </u-form-item>
+
+      <u-form-item label="服务地区" prop="region" borderBottom required>
+        <view @click="show.region = true">
+          <u--input disabled disabledColor="#ffffff" placeholder="添加" border="none" prefixIcon="plus-circle" />
+        </view>
+      </u-form-item>
+
+      <u-form-item label="居住地址" prop="address" borderBottom required>
+        <u--input v-model="form.address" border="none" placeholder="请输入居住地址" />
+      </u-form-item>
+
+      <u-form-item label="身份证号" prop="id_number" borderBottom required>
+        <u--input v-model="form.id_number" border="none" placeholder="请输入身份证号" />
+      </u-form-item>
+
+      <u-form-item label="支付宝账户" prop="alipay" borderBottom required>
+        <u--input v-model="form.alipay" border="none" placeholder="请输入支付宝账户" />
+      </u-form-item>
+
+      <u-form-item label="身份证上传" prop="id_card" borderBottom required>
+        <u--input v-model="form.id_card" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
+          suffixIcon="arrow-right" />
+      </u-form-item>
+
+      <u-form-item label="人脸识别" prop="face" borderBottom required>
+        <u--input v-model="form.face" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
+          suffixIcon="arrow-right" />
+      </u-form-item>
+
+      <u-form-item label="技能证书上传" prop="skill" borderBottom>
+        <u--input v-model="form.skill" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
+          suffixIcon="arrow-right" />
+      </u-form-item>
+    </u--form>
+    <u-action-sheet :show="show.sex" :actions="options.sex" title="请选择性别" @close="show.sex = false" @select="sexSelect" />
+    <u-action-sheet :show="show.unit" :actions="options.unit" title="请选择单位" @close="show.unit = false"
+      @select="unitSelect" />
+    <u-city-select v-model="show.region" @city-change="citySelect" />
   </view>
 </template>
 
 <script setup>
+import { reactive } from 'vue';
 import { ref, onMounted } from 'vue';
 
-const chartData = ref({});
+const form = reactive({
+  name: '',
+  sex: '',
+  age: '',
+  phone: '',
+  service: '',
+  years: '',
+  profession: '',
+  region: '',
+  address: '',
+  id_number: '',
+  alipay: '',
+  id_card: '',
+  face: '',
+  skill: ''
+})
+const rules = reactive({
 
-onMounted(() => { getServerData() });
-
-function getServerData() {
-  // 模拟从服务器获取数据时的延时
-  setTimeout(() => {
-    let res = {
-      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
-      series: [
-        {
-          name: '目标值',
-          data: [35, 36, 31, 33, 13, 34],
-        },
-        {
-          name: '完成量',
-          data: [18, 27, 21, 24, 6, 28],
-        },
-      ],
-    };
-    chartData.value = JSON.parse(JSON.stringify(res));
-  }, 500);
+})
+const show = reactive({
+  sex: false,
+  unit: false,
+  region: false
+})
+const options = reactive({
+  sex: [{ name: '男' }, { name: '女' }],
+  unit: [
+    { name: "济南产晏太阳能有限公司" },
+    { name: "济南一休太阳能有限公司" },
+    { name: "济南荣源太阳能有限公司" },
+    { name: "济南力瑞新能能源科技有限公司" },
+    { name: "济南东狮设备安装有限公司" }
+  ],
+  profession: [
+    { name: "普通太阳能" },
+    { name: "壁挂太阳能" },
+    { name: "分体式" },
+    { name: "工程" },
+    { name: "空气能" },
+    { name: "电热水器" },
+  ]
+})
+function sexSelect(e) {
+  form.sex = e.name
 }
+function unitSelect(e) {
+  form.unit = e.name
+}
+function citySelect(e) {
+  form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
+  //  e.province.value + '-' + e.city.value + '-' + e.area.value;
+}
+
 </script>
 
-<style scoped>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-
-.charts-box {
-  width: 100%;
-  height: 300px;
+<style scoped lang="scss">
+:deep(.u-form-item__body__left__content__required) {
+  margin-left: 30rpx;
 }
 </style>
diff --git a/src/pages_template/pages/citySelect/index.vue b/src/pages_template/pages/citySelect/index.vue
index 9577dd2..c2d4989 100644
--- a/src/pages_template/pages/citySelect/index.vue
+++ b/src/pages_template/pages/citySelect/index.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import citySelect from './u-city-select.vue';
+import citySelect from '@/components/u-city-select/u-city-select.vue';
 export default {
 	components: {
 		citySelect
@@ -36,13 +36,14 @@ export default {
 	methods: {
 		cityChange(e) {
 			this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
+			this.input += e.province.value + '-' + e.city.value + '-' + e.area.value;
 		}
 	}
 };
 </script>
 
 <style scoped>
-	.btn-wrap {
-		margin: 100rpx 30rpx;
-	}
+.btn-wrap {
+	margin: 100rpx 30rpx;
+}
 </style>

From fa26bb8796862bd6a6d5039884b195d1e1e23bb0 Mon Sep 17 00:00:00 2001
From: D <3066417822@qq.com>
Date: Sun, 3 Dec 2023 15:43:18 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=9F=8E=E5=B8=82=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../u-city-select/u-city-select.vue           | 384 +++++++++---------
 1 file changed, 187 insertions(+), 197 deletions(-)

diff --git a/src/components/u-city-select/u-city-select.vue b/src/components/u-city-select/u-city-select.vue
index 348b3a4..b82e889 100644
--- a/src/components/u-city-select/u-city-select.vue
+++ b/src/components/u-city-select/u-city-select.vue
@@ -1,23 +1,19 @@
 <template>
-	<u-popup :show="modelValue" mode="bottom" :popup="false"
-		:mask="true" :closeable="true" :safe-area-inset-bottom="true"
-		close-icon-color="#ffffff" :z-index="uZIndex"
-		:maskCloseAble="maskCloseAble" @close="close">
-		<u-tabs v-if="modelValue" :list="genTabsList"
-			:scrollable="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
+	<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true"
+		close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
+		<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
+			ref="tabs" />
 		<view class="area-box">
-			<view class="u-flex" :class="{ 'change':isChange }">
+			<view class="u-flex" :class="{ 'change': isChange }">
 				<view class="area-item">
 					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
 						<scroll-view :scroll-y="true" style="height: 100%">
 							<u-cell-group>
-								<u-cell v-for="(item,index) in provinces"
-									:title="item.label" :arrow="false"
-									:index="index" :key="index"
-									@click="provinceChange(index)">
+								<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false" :index="index"
+									:key="index" @click="provinceChange(index)">
 									<template v-slot:right-icon>
-										<u-icon v-if="isChooseP&&province===index"
-											size="17" name="checkbox-mark"></u-icon>
+										<u-icon v-if="isChooseP && province === index" size="17"
+											name="checkbox-mark"></u-icon>
 									</template>
 								</u-cell>
 							</u-cell-group>
@@ -28,13 +24,10 @@
 					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
 						<scroll-view :scroll-y="true" style="height: 100%">
 							<u-cell-group v-if="isChooseP">
-								<u-cell v-for="(item,index) in citys"
-									:title="item.label" :arrow="false"
-									:index="index" :key="index"
-									@click="cityChange(index)">
+								<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
+									:key="index" @click="cityChange(index)">
 									<template v-slot:right-icon>
-										<u-icon v-if="isChooseC&&city===index"
-											size="17" name="checkbox-mark"></u-icon>
+										<u-icon v-if="isChooseC && city === index" size="17" name="checkbox-mark"></u-icon>
 									</template>
 								</u-cell>
 							</u-cell-group>
@@ -45,13 +38,10 @@
 					<view class="u-padding-10 u-bg-gray" style="height: 100%;">
 						<scroll-view :scroll-y="true" style="height: 100%">
 							<u-cell-group v-if="isChooseC">
-								<u-cell v-for="(item,index) in areas"
-									:title="item.label" :arrow="false"
-									:index="index" :key="index"
-									@click="areaChange(index)">
+								<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
+									:key="index" @click="areaChange(index)">
 									<template v-slot:right-icon>
-										<u-icon v-if="isChooseA&&area===index"
-											size="17" name="checkbox-mark"></u-icon>
+										<u-icon v-if="isChooseA && area === index" size="17" name="checkbox-mark"></u-icon>
 									</template>
 								</u-cell>
 							</u-cell-group>
@@ -64,188 +54,188 @@
 </template>
 
 <script>
-	import provinces from "./province.js";
-	import citys from "./city.js";
-	import areas from "./area.js";
-	/**
-	 * city-select 省市区级联选择器
-	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
-	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
-	 * @property {String} default-region 默认选中的地区，中文形式
-	 * @property {String} default-code 默认选中的地区，编号形式
-	 */
-	export default {
-		name: 'u-city-select',
-		props: {
-			// 通过双向绑定控制组件的弹出与收起
-			modelValue: {
-				type: Boolean,
-				default: false
-			},
-			// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
-			defaultRegion: {
-				type: Array,
-				default () {
-					return [];
-				}
-			},
-			// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
-			areaCode: {
-				type: Array,
-				default () {
-					return [];
-				}
-			},
-			// 是否允许通过点击遮罩关闭Picker
-			maskCloseAble: {
-				type: Boolean,
-				default: true
-			},
-			// 弹出的z-index值
-			zIndex: {
-				type: [String, Number],
-				default: 0
+import provinces from "./province.js";
+import citys from "./city.js";
+import areas from "./area.js";
+/**
+ * city-select 省市区级联选择器
+ * @property {String Number} z-index 弹出时的z-index值（默认1075）
+ * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
+ * @property {String} default-region 默认选中的地区，中文形式
+ * @property {String} default-code 默认选中的地区，编号形式
+ */
+export default {
+	name: 'u-city-select',
+	props: {
+		// 通过双向绑定控制组件的弹出与收起
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
+		defaultRegion: {
+			type: Array,
+			default() {
+				return [];
 			}
 		},
-		data() {
-			return {
-				cityValue: "",
-				isChooseP: false, //是否已经选择了省
-				province: 0, //省级下标
-				provinces: provinces,
-				isChooseC: false, //是否已经选择了市
-				city: 0, //市级下标
-				citys: citys[0],
-				isChooseA: false, //是否已经选择了区
-				area: 0, //区级下标
-				areas: areas[0][0],
-				tabsIndex: 0,
+		// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
+		areaCode: {
+			type: Array,
+			default() {
+				return [];
 			}
 		},
-		mounted() {
-			this.init();
+		// 是否允许通过点击遮罩关闭Picker
+		maskCloseAble: {
+			type: Boolean,
+			default: true
 		},
-		computed: {
-			isChange() {
-				return this.tabsIndex > 1;
-			},
-			genTabsList() {
-				let tabsList = [{
-					name: "请选择"
-				}];
-				if (this.isChooseP) {
-					console.log(this.province)
-					tabsList[0]['name'] = this.provinces[this.province]['label'];
-					tabsList[1] = {
-						name: "请选择"
-					};
-				}
-				if (this.isChooseC) {
-					tabsList[1]['name'] = this.citys[this.city]['label'];
-					tabsList[2] = {
-						name: "请选择"
-					};
-				}
-				if (this.isChooseA) {
-					tabsList[2]['name'] = this.areas[this.area]['label'];
-				}
-				return tabsList;
-			},
-			uZIndex() {
-				// 如果用户有传递z-index值，优先使用
-				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
-			}
-		},
-		emits: ['city-change'],
-		methods: {
-			init() {
-				if (this.areaCode.length == 3) {
-					this.setProvince("", this.areaCode[0]);
-					this.setCity("", this.areaCode[1]);
-					this.setArea("", this.areaCode[2]);
-				} else if (this.defaultRegion.length == 3) {
-					this.setProvince(this.defaultRegion[0], "");
-					this.setCity(this.defaultRegion[1], "");
-					this.setArea(this.defaultRegion[2], "");
-				};
-			},
-			setProvince(label = "", value = "") {
-				this.provinces.map((v, k) => {
-					if (value ? v.value == value : v.label == label) {
-						this.provinceChange(k);
-					}
-				})
-			},
-			setCity(label = "", value = "") {
-				this.citys.map((v, k) => {
-					if (value ? v.value == value : v.label == label) {
-						this.cityChange(k);
-					}
-				})
-			},
-			setArea(label = "", value = "") {
-				this.areas.map((v, k) => {
-					if (value ? v.value == value : v.label == label) {
-						this.isChooseA = true;
-						this.area = k;
-					}
-				})
-			},
-			close() {
-				this.$emit('update:modelValue', false);
-			},
-			tabsChange(index) {
-				this.tabsIndex = index;
-			},
-			provinceChange(index) {
-				this.isChooseP = true;
-				this.isChooseC = false;
-				this.isChooseA = false;
-				this.province = index;
-				this.citys = citys[index];
-				this.tabsIndex = 1;
-			},
-			cityChange(index) {
-				this.isChooseC = true;
-				this.isChooseA = false;
-				this.city = index;
-				this.areas = areas[this.province][index];
-				this.tabsIndex = 2;
-			},
-			areaChange(index) {
-				this.isChooseA = true;
-				this.area = index;
-				let result = {};
-				result.province = this.provinces[this.province];
-				result.city = this.citys[this.city];
-				result.area = this.areas[this.area];
-				this.$emit('city-change', result);
-				this.close();
-			}
+		// 弹出的z-index值
+		zIndex: {
+			type: [String, Number],
+			default: 0
+		}
+	},
+	data() {
+		return {
+			cityValue: "",
+			isChooseP: false, //是否已经选择了省
+			province: 0, //省级下标
+			provinces: provinces,
+			isChooseC: false, //是否已经选择了市
+			city: 0, //市级下标
+			citys: citys[0],
+			isChooseA: false, //是否已经选择了区
+			area: 0, //区级下标
+			areas: areas[0][0],
+			tabsIndex: 0,
+		}
+	},
+	mounted() {
+		this.init();
+	},
+	computed: {
+		isChange() {
+			return this.tabsIndex > 1;
+		},
+		genTabsList() {
+			let tabsList = [{
+				name: "请选择"
+			}];
+			if (this.isChooseP) {
+				console.log(this.province)
+				tabsList[0]['name'] = this.provinces[this.province]['label'];
+				tabsList[1] = {
+					name: "请选择"
+				};
+			}
+			if (this.isChooseC) {
+				tabsList[1]['name'] = this.citys[this.city]['label'];
+				tabsList[2] = {
+					name: "请选择"
+				};
+			}
+			if (this.isChooseA) {
+				tabsList[2]['name'] = this.areas[this.area]['label'];
+			}
+			return tabsList;
+		},
+		uZIndex() {
+			// 如果用户有传递z-index值，优先使用
+			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		}
+	},
+	emits: ['city-change'],
+	methods: {
+		init() {
+			if (this.areaCode.length == 3) {
+				this.setProvince("", this.areaCode[0]);
+				this.setCity("", this.areaCode[1]);
+				this.setArea("", this.areaCode[2]);
+			} else if (this.defaultRegion.length == 3) {
+				this.setProvince(this.defaultRegion[0], "");
+				this.setCity(this.defaultRegion[1], "");
+				this.setArea(this.defaultRegion[2], "");
+			};
+		},
+		setProvince(label = "", value = "") {
+			this.provinces.map((v, k) => {
+				if (value ? v.value == value : v.label == label) {
+					this.provinceChange(k);
+				}
+			})
+		},
+		setCity(label = "", value = "") {
+			this.citys.map((v, k) => {
+				if (value ? v.value == value : v.label == label) {
+					this.cityChange(k);
+				}
+			})
+		},
+		setArea(label = "", value = "") {
+			this.areas.map((v, k) => {
+				if (value ? v.value == value : v.label == label) {
+					this.isChooseA = true;
+					this.area = k;
+				}
+			})
+		},
+		close() {
+			this.$emit('update:modelValue', false);
+		},
+		tabsChange(value) {
+			this.tabsIndex = value.index;
+			console.log('debug=>', this.tabsIndex);
+		},
+		provinceChange(index) {
+			this.isChooseP = true;
+			this.isChooseC = false;
+			this.isChooseA = false;
+			this.province = index;
+			this.citys = citys[index];
+			this.tabsIndex = 1;
+		},
+		cityChange(index) {
+			this.isChooseC = true;
+			this.isChooseA = false;
+			this.city = index;
+			this.areas = areas[this.province][index];
+			this.tabsIndex = 2;
+		},
+		areaChange(index) {
+			this.isChooseA = true;
+			this.area = index;
+			let result = {};
+			result.province = this.provinces[this.province];
+			result.city = this.citys[this.city];
+			result.area = this.areas[this.area];
+			this.$emit('city-change', result);
+			this.close();
 		}
-
 	}
+
+}
 </script>
 <style lang="scss">
-	.area-box {
-		width: 100%;
-		overflow: hidden;
-		height: 800rpx;
+.area-box {
+	width: 100%;
+	overflow: hidden;
+	height: 800rpx;
 
-		>view {
-			width: 150%;
-			transition: transform 0.3s ease-in-out 0s;
-			transform: translateX(0);
+	>view {
+		width: 150%;
+		transition: transform 0.3s ease-in-out 0s;
+		transform: translateX(0);
 
-			&.change {
-				transform: translateX(-33.3333333%);
-			}
-		}
-
-		.area-item {
-			width: 33.3333333%;
-			height: 800rpx;
+		&.change {
+			transform: translateX(-33.3333333%);
 		}
 	}
-</style>
-@/components/u-city-select/province.js@/components/u-city-select/city.js@/components/u-city-select/area.js
\ No newline at end of file
+
+	.area-item {
+		width: 33.3333333%;
+		height: 800rpx;
+	}
+}
+</style>
\ No newline at end of file