pages.json

@@ -136,6 +136,12 @@
 						"navigationBarTitleText": "酒店民宿信息 ",
 						"enablePullDownRefresh": false
 					}
+				}, {
+					"path": "stayInfo/roomPosition",
+					"style": {
+						"navigationBarTitleText": "位置定位 ",
+						"enablePullDownRefresh": false
+					}
 				}
 
 			]

pagesMy/stayInfo/roomPosition.vue

@@ -0,0 +1,306 @@
+<template>
+	<view class="pages">
+		<view class="content">
+			<view class="card">
+				<view class="card1" @tap="open()">
+					<text>所属城市
+						<text style="margin-left: 30rpx;" v-if="str.name==undefined||str.name==''">请选择所属城市</text>
+						<text style="margin-left: 30rpx;" v-else>{{str.name}}</text>
+					</text>
+					<text>></text>
+				</view>
+			</view>
+			<view class="card">
+				<view class="card1">
+					<text style="margin-right: 30rpx;">详细地址</text>
+					<u--input placeholder="请输入您的地址" border="none" v-model="formData.areaDetail"></u--input>
+				</view>
+			</view>
+			<view class="card">
+				<view class="card1">
+					<text>单元、门牌号</text>
+				</view>
+				<view style="margin-top: 20rpx;">
+					<span>
+						<u--textarea border='none' :maxlength='300' count v-model="formData.introduction"
+							placeholder="请输入单元、门牌号" height='250'></u--textarea>
+					</span>
+				</view>
+			</view>
+			<view class="card">
+				<view class="card1">
+					<text>地图位置</text>
+				</view>
+				<view style="margin-top: 20rpx;" class="collapseTitle">
+					点击地图可调整至更精确位置
+				</view>
+				<view style="margin-top: 20rpx;">
+					<view class="content-map">
+						<map style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude" :scale="16"
+							:title="title" />
+					</view>
+				</view>
+			</view>
+			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
+				@confirm="confirm" @cancel="cancel" :visible="visible" />
+		</view>
+
+
+		<view class="bottom">
+			<view class="btn">
+				确定
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
+	// 引入高德地图api提供的微信小程序的接口
+	var amapFile = require('@/utils/amap-wx.130.js');
+	// 创建地图
+	var myAmapFun = new amapFile.AMapWX({
+		key: '1173b1eb83eb93bff1fb4a5987503a51'
+	}); //key值要申请为 去高德地图申请微信小程序的key
+	// var myAmapFun = new amapFile.AMapWX({key: ''}); //key我的
+	export default {
+		data() {
+			return {
+				selectIndex: undefined,
+				selectAddr: {},
+				searchWords: "",
+				id: 1, // 使用 marker点击事件 需要填写id
+				title: 'map',
+				latitude: 39.91667, // 纬度
+				longitude: 116.41667, // 经度
+				markers: [{
+					latitude: 39.91667, // 纬度
+					longitude: 116.41667, // 经度
+					width: 30,
+					height: 30,
+					iconPath: ''
+					// iconPath: '../../static/ditu.png'
+				}],
+				dataTips: [],
+				// type: '',
+				value: '',
+				value1: '',
+				fileList: [],
+				fileList1: [],
+				imgUrlList: [],
+				fileList2: [],
+				result: '',
+				visible: false,
+				maskCloseAble: true,
+				str: {
+					name: '浙江省舟山市嵊泗县'
+				},
+				defaultValue: '330922',
+				// defaultValue: ['河北省','唐山市','丰南区'],
+				column: 3,
+				address: '',
+				formData: {}
+			}
+		},
+		components: {
+			cityPicker
+		},
+		onLoad(option) {
+			if (option) {
+				console.log(option, 'option11111111option');
+				this.formData = JSON.parse(option.item)
+				console.log(this.formData, 'this.formData');
+				this.latitude = this.formData.lat
+				this.longitude = this.formData.lon
+				this.markers[0].latitude=this.formData.lat
+				this.markers[0].longitude=this.formData.lon
+			}
+
+			// var self = this;
+			// this.myPosition()
+			// uni.getLocation({
+			// 	type: 'gcj02',
+			// 	success: function(res) {
+			// 		console.log(res, '当前地址定位');
+			// 		if (res.errMsg == "getLocation:ok") {
+			// 			console.log(self.mark, 'onload里面看看');
+			// 			self.longitude = res.longitude;
+			// 			self.latitude = res.latitude;
+			// 			self.$set(self.markers[0], "longitude", res.longitude);
+			// 			self.$set(self.markers[0], "latitude", res.latitude);
+			// 			self.mapFlafg = true;
+			// 			console.log(self.markers, "markers")
+			// 			// self.markers[0].longitude = res.longitude;
+			// 			// self.markers[0].latitude = res.latitude;
+			// 		}
+			// 	},
+			// 	complete: () => {
+			// 		// 获取当前位置的地点列表
+			// 		myAmapFun.getPoiAround({
+			// 			location: self.longitude + ',' + self.latitude,
+			// 			success: (data) => {
+			// 				console.log("获取当前的列表", data);
+			// 				this.dataTips = data.poisData;
+			// 			},
+			// 			fail: (info) => {
+			// 				console.log(info, '点击地图错误信息1')
+			// 			}
+			// 		})
+			// 	}
+			// });
+		},
+		methods: {
+			myPosition() {
+				var myAmapFun = new amapFile.AMapWX({
+					key: '1173b1eb83eb93bff1fb4a5987503a51'
+				});
+				let that = this;
+				//获取地址
+				myAmapFun.getRegeo({
+					success: function(data) {
+						that.longitude = data[0].longitude
+						that.latitude = data[0].latitude
+						console.log(that.longitude, that.latitude, '1111');
+					},
+					fail: function(info) {
+						//失败回调
+						console.log(info)
+						uni.navigateBack();
+					}
+				})
+			},
+			open() {
+				this.visible = true
+			},
+			confirm(val) {
+				this.str = val
+				console.log(this.str, '333')
+				this.visible = false
+			},
+			cancel() {
+				this.visible = false
+			},
+			onShareAppMessage(res) {
+				if (res.from === 'button') { // 来自页面内分享按钮
+					console.log(res.target, '1')
+				}
+				return {
+					title: 'data-cityPicker省市区地址选择器！',
+					path: '/pages/cityPicker/cityPicker'
+				}
+			},
+			onShareTimeline(res) {
+				if (res.from === 'button') { // 来自页面内分享按钮
+					console.log(res.target, '2')
+				}
+				return {
+					title: 'data-cityPicker省市区地址选择器！'
+				}
+			},
+			change() {
+
+			},
+			close() {
+
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/deep/.u-cell__body {
+		padding: 0;
+	}
+
+	::v-deep .u-cell__body {
+		padding: 0;
+	}
+
+	.pages {
+		height: 100vh;
+		background: #F9FAFC;
+
+		.content {
+			padding: 20rpx;
+			height: 100vh;
+
+			.card {
+				background: #fff;
+				border-radius: 16rpx;
+				padding: 30rpx 33rpx;
+				margin-bottom: 20rpx;
+
+				.upload {
+					margin-top: 48rpx;
+					width: 100%;
+					height: 200rpx;
+					border-radius: 16rpx;
+					background-color: #F5F8FA;
+					display: flex;
+					align-items: center;
+					text-align: center;
+
+					.upload-one {
+						margin: 0 245rpx;
+						width: 200rpx;
+						height: 200rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+
+				.collapseTitle {
+					font-size: 22rpx;
+					color: #a5a5a5;
+					margin-bottom: 20rpx;
+				}
+
+				.card1 {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+
+					.as-content {
+						color: #a5a5a5;
+					}
+				}
+			}
+		}
+
+		.content-map {
+			border: 1rpx solid black;
+			height: 355rpx;
+		}
+
+		.bottom {
+			position: absolute;
+			bottom: 0;
+			height: 9%;
+			background: #fff;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 0 30rpx;
+			box-sizing: border-box;
+			flex-direction: column;
+
+			.btn {
+				background: #33AFFC;
+				color: white;
+				text-align: center;
+				height: 73rpx;
+				line-height: 73rpx;
+				align-self: center;
+				border-radius: 35rpx;
+				width: 80%;
+
+			}
+		}
+	}
+</style>

pagesMy/stayInfo/stayInfo.vue

@@ -2,52 +2,86 @@
 	<view class="pages">
 		<view class="content">
 			<view class="card">
-				<view class="card1">
+				<view class="card1" @click="goToPosition()">
 					<text>位置定位</text>
 					<text>></text>
 				</view>
 			</view>
 			<view class="card">
 				<view class="card1">
-					<text>联系电话</text>
-					<text>
-						<u--input placeholder="请输入内容" border="surround" v-model="value" @change="change"></u--input>
-					</text>
+					<text style="margin-right: 30rpx;">联系电话</text>
+					<u--input placeholder="请输入内容" border="none" v-model="stayInfo.landlinePhone"></u--input>
 				</view>
 			</view>
 			<view class="card">
 				<view class="card1">
 					<text>酒店简介</text>
-					<span style="margin-top: 20rpx;">
-						<u--textarea :maxlength='300' count v-model="value1" placeholder="请输入酒店简介"
-							height='250'></u--textarea>
+				</view>
+				<view style="margin-top: 20rpx;">
+					<span>
+						<u--textarea border='none' :maxlength='300' count v-model="stayInfo.introduction"
+							placeholder="请输入酒店简介" height='250'></u--textarea>
 					</span>
 				</view>
 			</view>
-			<view class="card">
-				<view class="card1">
-					<u-collapse @change="change" @close="close" @open="open">
-						<u-collapse-item title="内饰照片" name="Docs guide">
-							<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
+			<view class="card" style="padding: 0;">
+				<view>
+					<u-collapse :border='false' accordion @change="change" @close="close" @open="open">
+						<u-collapse-item title="环境\内饰照片(0/10)" name="Docs guide">
+							<text class="collapseTitle">至少上传1张，建议上传5-10张，需展示完整内饰</text>
+							<view class="upload" v-if="stayInfo.picList.length==0">
+								<u-upload :fileList="stayInfo.picList" multiple :maxCount="10"
+									:maxSize="10 * 1024 * 1024" @afterRead="afterRead" @delete="deletePic"
+									@oversize="overSize">
+									<view class="upload-one">
+										<image
+											src="https://i.ringzle.com/file/20240103/1d3cf8e7ad184d17a253b3b08dfd0c53.png"
+											mode="aspectFill"></image>
+									</view>
+								</u-upload>
+							</view>
+							<view class="uploads" v-else>
+								<u-upload :fileList="stayInfo.picList" multiple :maxCount="10"
+									:maxSize="10 * 1024 * 1024" @afterRead="afterRead" @delete="deletePic"
+									@oversize="overSize">
+									<view class="upload-image">
+										<image
+											src="https://i.ringzle.com/file/20240103/1d3cf8e7ad184d17a253b3b08dfd0c53.png"
+											mode="aspectFill"></image>
+									</view>
+								</u-upload>
+							</view>
 						</u-collapse-item>
+						<!-- <u-collapse-item title="环境照片" name="Docs guide">
+							<text class="collapseTitle">至少上传1张，建议上传5-10张，需展示完整环境</text>
+							<view class="upload" v-if="fileList1.length==0">
+								<u-upload :fileList="fileList1" multiple :maxCount="10" :maxSize="10 * 1024 * 1024"
+									@afterRead="afterRead" @delete="deletePic" @oversize="overSize">
+									<view class="upload-one">
+										<image
+											src="https://i.ringzle.com/file/20240103/1d3cf8e7ad184d17a253b3b08dfd0c53.png"
+											mode="aspectFill">
+										</image>
+									</view>
+								</u-upload>
+							</view>
+							<view class="uploads" v-else>
+								<u-upload :fileList="fileList1" multiple :maxCount="10" :maxSize="10 * 1024 * 1024"
+									@afterRead="afterRead" @delete="deletePic" @oversize="overSize">
+									<view class="upload-image">
+										<image
+											src="https://i.ringzle.com/file/20240103/1d3cf8e7ad184d17a253b3b08dfd0c53.png"
+											mode="aspectFill"></image>
+									</view>
+								</u-upload>
+							</view>
+						</u-collapse-item> -->
 					</u-collapse>
-
 				</view>
 			</view>
-			<view class="card">
-				<view class="card1">
-					<u-collapse @change="change" @close="close" @open="open">
-						<u-collapse-item title="环境照片" name="Docs guide">
-							<text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
-						</u-collapse-item>
-					</u-collapse>
 
-				</view>
-			</view>
 		</view>
-
 		<view class="bottom">
-
 			<view class="btn">
 				确定
 			</view>
@@ -60,10 +94,43 @@
 		data() {
 			return {
 				value: '',
-				value1: ''
+				value1: '',
+				fileList: [],
+				fileList1: [],
+				imgUrlList: [],
+				fileList2: [],
+				stayInfo: {
+					picList: []
+				}
 			}
 		},
+		onLoad() {
+			this.getStayInfo()
+		},
 		methods: {
+			goToPosition() {
+				const qwe=JSON.stringify(this.stayInfo)
+				console.log(qwe,'qweqweqweqwe');
+				uni.navigateTo({
+					url: '/pagesMy/stayInfo/roomPosition?item=' + JSON.stringify(this.stayInfo)
+				})
+			},
+			getStayInfo() {
+				this.$api.get('/merchant/hotel/mine/getMerchantHomestayInfo/' + '1711268640588517378').then(res => {
+					if (res.data.code == 0) {
+						this.stayInfo = res.data.data
+					} else {
+						uni.showToast({
+							title: res.data.msg,
+
+						})
+						setTimeout(() => {
+							uni.navigateBack()
+						}, 1500)
+					}
+					console.log(res, 'res------');
+				})
+			},
 			change() {
 
 			},
@@ -72,30 +139,163 @@
 			},
 			open() {
 
-			}
+			},
+			// 删除图片
+			deletePic(event) {
+				console.log('jinlaile1');
+				this[`stayInfo.picList{event.name}`].splice(event.index, 1)
+			},
+			// 新增图片
+			async afterRead(event) {
+				console.log('jinlaile2', event);
+				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+				let lists = [].concat(event.file)
+				let fileListLen = this.stayInfo.picList.length
+				lists.map((item) => {
+					this.stayInfo.picList.push({
+						...item,
+						status: 'uploading',
+						message: '上传中'
+					})
+				})
+				for (let i = 0; i < lists.length; i++) {
+					const result = await this.uploadFilePromise(lists[i].url)
+					let item = this.stayInfo.picList[fileListLen]
+					this.stayInfo.picList.splice(fileListLen, 1, Object.assign(item, {
+						status: 'success',
+						message: '',
+						url: result
+					}))
+					fileListLen++
+				}
+			},
+			uploadFilePromise(url) {
+				console.log('jinlaile3');
+				return new Promise((resolve, reject) => {
+					let a = uni.uploadFile({
+						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
+						filePath: url,
+						name: 'file',
+						formData: {
+							user: 'test'
+						},
+						success: (res) => {
+							setTimeout(() => {
+								resolve(res.data.data)
+							}, 1000)
+						}
+					});
+				})
+			},
+			// 	deletePic(event) {
+			// 		this.fileList.splice(event.index, 1);
+			// 	},
+			// 	overSize(e) {
+			// 		uni.$u.toast('上传图片大小不能超过10MB!');
+			// 	},
+			// 	// 新增图片
+			// 	async afterRead(event) {
+			// 		console.log('jinlaile');
+			// 		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
+			// 		let Lists = [].concat(event.file);
+			// 		let fileListLen = this.fileList.length;
+			// 		Lists.map((item) => {
+			// 			this.picList.push(
+			// 				item.url,
+			// 			)
+			// 		})
+
+			// 		for (let i = 0; i < Lists.length; i++) {
+			// 			const result = await this.uploadFilePromise(Lists[i].url);
+			// 			wx.getImageInfo({
+			// 				src: Lists[i].url,
+			// 				success: res => {
+			// 					this.imgUrlList.push(result)
+			// 				}
+			// 			})
+			// 		}
+			// 	},
+			// 	//上传图片
+			// 	uploadFilePromise(url) {
+			// 		return new Promise((resolve, reject) => {
+			// 			let a = uni.uploadFile({
+			// 				url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload',
+			// 				filePath: url,
+			// 				name: 'file',
+			// 				header: {
+			// 					token: wx.getStorageSync('access_token')
+			// 				},
+			// 				success: (res) => {
+			// 					let data = JSON.parse(res.data);
+			// 					this.fileList.push({
+			// 						url: data.data.url
+			// 					})
+			// 					resolve(data.data.url);
+			// 				}
+			// 			});
+			// 		})
+			// 	},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
+	/deep/.u-cell__body {
+		padding: 0;
+	}
+
+	::v-deep .u-cell__body {
+		padding: 0;
+	}
+
 	.pages {
 		height: 100vh;
 		background: #F9FAFC;
 
 		.content {
 			padding: 20rpx;
+			height: 100vh;
 
 			.card {
 				background: #fff;
 				border-radius: 16rpx;
-				padding: 30rpx 20rpx;
-
+				padding: 30rpx 33rpx;
 				margin-bottom: 20rpx;
 
+				.upload {
+					margin-top: 48rpx;
+					width: 100%;
+					height: 200rpx;
+					border-radius: 16rpx;
+					background-color: #F5F8FA;
+					display: flex;
+					align-items: center;
+					text-align: center;
+
+					.upload-one {
+						margin: 0 245rpx;
+						width: 200rpx;
+						height: 200rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+
+				.collapseTitle {
+					font-size: 22rpx;
+					color: #a5a5a5;
+					margin-bottom: 20rpx;
+				}
+
 				.card1 {
 					display: flex;
 					flex-direction: row;
 					justify-content: space-between;
+					align-items: center;
+
 				}
 			}
 		}

uni_modules/piaoyi-cityPicker/changelog.md

@@ -0,0 +1,10 @@
+## 1.1.1（2023-12-06）
+defaultValue可以传入defaultValue:['河北省','唐山市','丰南区']数组类型以及defaultValue: '420103'地区编码字符串类型
+## 1.1.0（2023-12-05）
+即默认值传入地区编码，也支持传入中文省市区数组
+## 1.0.9（2023-12-04）
+优化
+## 1.0.8（2023-10-24）
+修复东菀市和中山市下各镇的行政编码错误问题
+## 1.0.4（2023-09-15）
+改为uni_modules规范

uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue

@@ -0,0 +1,281 @@
+<template>
+	<view class="pupop">
+		<view class="popup-box" :animation="animationData">
+			<view class="pupop-btn">
+				<view @tap="cancel">取消</view>
+				<view @tap="confirm" style="color: #2979ff;">确定</view>
+			</view>
+			<picker-view :value="value" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
+				<picker-view-column>
+					<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.name}}</view>
+				</picker-view-column>
+				<picker-view-column>
+					<view class="item" v-for="(item,index) in cityList" :key="index">{{item.name}}</view>
+				</picker-view-column>
+				<picker-view-column v-if="column == 3">
+					<view class="item" v-for="(item,index) in areaList" :key="index">{{item.name}}</view>
+				</picker-view-column>
+			</picker-view>
+		</view>
+		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
+	</view>
+</template>
+
+<script>
+	import {
+		addressList
+	} from './cityData.js'
+	export default {
+		data() {
+			return {
+				value: [],
+				addressList,
+				provinceList: [],
+				cityList: [],
+				areaList: [],
+				indicatorStyle: `height: 50px;`,
+				provinceIndex: 0,
+				cityIndex: 0,
+				areaIndex: 0,
+				animationData: {}
+			}
+		},
+		props: {
+			column: {
+				type: Number,
+				default: 3
+			},
+			defaultValue: {
+				default: () => ''
+			},
+			visible: {
+				type: Boolean,
+				default: () => false
+			},
+			maskCloseAble: {
+				type: Boolean,
+				default: () => true
+			},
+		},
+		watch: {
+			visible (val) {
+				this.changeActive()
+			},
+			defaultValue() {
+				this.init()
+			}
+		},
+		created() {
+			this.init()
+		},
+		methods: {
+			init () {
+				var provinceList = []
+				addressList.filter(item => {
+					provinceList.push({
+						code: item.code,
+						name: item.name
+					})
+				})
+				this.provinceList = [...provinceList]
+				if (!this.defaultValue) {
+					this.cityList = addressList[0].children
+					this.areaList = addressList[0].children[0].children
+				} else {
+					var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外 "}
+					if (Array.isArray(this.defaultValue) && this.defaultValue.length >= 2) {
+						console.log(this.defaultValue)
+						var province = this.defaultValue[0]
+						var city = this.defaultValue[1]
+						this.provinceIndex = 0
+						this.cityIndex = 0
+						this.areaIndex = 0
+						this.provinceIndex = addressList.findIndex(obj => {
+							return obj.name == province
+						})
+						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
+						this.cityList = addressList[this.provinceIndex].children
+						this.cityIndex = this.cityList.findIndex(obj => {
+							return obj.name == city
+						})
+						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
+						this.areaList = this.cityList[this.cityIndex].children
+						if (this.defaultValue.length > 2) {
+							this.areaIndex = this.areaList.findIndex(obj => {
+								return obj.name == this.defaultValue[2]
+							})
+						}
+						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
+						this.$nextTick(() => {
+							if (this.column == 3) {
+								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
+							} else if (this.column == 2) {
+								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
+							}
+						})
+					} else if (/^\d{6}$/.test(this.defaultValue)) {
+						var province = this.defaultValue.substr(0, 2)
+						var city = this.defaultValue.substr(0, 4)
+						this.provinceIndex = 0
+						this.cityIndex = 0
+						this.areaIndex = 0
+						this.provinceIndex = addressList.findIndex(obj => {
+							return obj.code == province
+						})
+						this.provinceIndex = this.provinceIndex >= 0 ? this.provinceIndex : 0
+						this.cityList = addressList[this.provinceIndex].children
+						this.cityIndex = this.cityList.findIndex(obj => {
+							return obj.code == city
+						})
+						this.cityIndex = this.cityIndex >= 0 ? this.cityIndex : 0
+						this.areaList = this.cityList[this.cityIndex].children
+						this.areaIndex = this.areaList.findIndex(obj => {
+							return obj.code == this.defaultValue
+						})
+						this.areaIndex = this.areaIndex >= 0 ? this.areaIndex : 0
+						this.$nextTick(() => {
+							if (this.column == 3) {
+								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex, this.areaIndex]))
+							} else if (this.column == 2) {
+								this.value = JSON.parse(JSON.stringify([this.provinceIndex, this.cityIndex]))
+							}
+						})
+					} else {
+						uni.showToast({
+							title: '地区编码格式不正确',
+							icon: 'none'
+						})
+						console.log('地区编码格式不正确')
+					}
+				}
+				this.changeActive()
+			},
+			confirm () {
+				if (this.column == 3) {
+					this.$emit('confirm', {
+						code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code,
+						name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name + addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name,
+						provinceName: addressList[this.provinceIndex].name,
+						cityName: addressList[this.provinceIndex].children[this.cityIndex].name,
+						areaName: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].name
+					})
+				} else if (this.column == 2) {
+					this.$emit('confirm', {
+						code: addressList[this.provinceIndex].children[this.cityIndex].children[this.areaIndex].code.substring(0, 4) + '00',
+						name: addressList[this.provinceIndex].name + addressList[this.provinceIndex].children[this.cityIndex].name,
+						provinceName: addressList[this.provinceIndex].name,
+						cityName: addressList[this.provinceIndex].children[this.cityIndex].name
+					})
+				} else {
+					uni.showToast({
+						title: '目前column只能传2和3',
+						icon: 'none'
+					})
+				}
+			},
+			cancel () {
+				this.$emit('cancel')
+			},
+			// 动画
+			changeActive () {
+				var active = '-315px'
+				if (this.visible) {
+					active = 0
+				}
+				var animation = uni.createAnimation({
+					duration: 400,
+					timingFunction: 'linear'
+				})
+				animation.bottom(active).step()
+				this.animationData = animation.export()
+			},
+			bindChange(e) {
+				e.detail.value[0] = e.detail.value[0] || 0
+				e.detail.value[1] = e.detail.value[1] || 0
+				e.detail.value[2] = e.detail.value[2] || 0
+				if (e.detail.value[0] != this.provinceIndex) {
+					// console.log('监听第一列')
+					this.provinceChange(e.detail.value[0])
+				} else if (e.detail.value[1] != this.cityIndex) {
+					// console.log('监听第二列')
+					this.cityChange(e.detail.value[1])
+				} else if (e.detail.value[2] != this.areaIndex) {
+					// console.log('监听第三列')
+					this.areaChange(e.detail.value[2])
+				}
+			},
+			// 监听第一列变化
+			provinceChange (e) {
+				this.provinceIndex = e
+				this.cityIndex = 0
+				this.areaIndex = 0
+				this.value = [...[e, 0, 0]]
+				this.cityList = addressList[e].children
+				this.areaList = addressList[e].children[0].children
+			},
+			// 监听第二列变化
+			cityChange (e) {
+				this.cityIndex = e
+				this.areaIndex = 0
+				// console.log(this.cityIndex, this.areaIndex)
+				this.value = [...[this.provinceIndex, e, 0]]
+				this.cityList = addressList[this.provinceIndex].children
+				this.areaList = addressList[this.provinceIndex].children[e].children
+			},
+			// 监听第三列变化
+			areaChange (e) {
+				this.areaIndex = e
+			},
+			// 点击模态框
+			close () {
+				if (this.maskCloseAble) {
+					this.cancel()
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.pupop {
+		.popup-box {
+			position: fixed;
+			left: 0;
+			bottom: -315px;
+			z-index: 99999;
+			background: #fff;
+			padding-bottom: 50px;
+			.pupop-btn{
+				height: 40px;
+				display: flex;
+				align-items: center;
+				padding: 0 30upx;
+				justify-content: space-between;
+			}
+		}
+		.pupop-model {
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 9999;
+			background: rgba(0, 0, 0, .5);
+		}
+		.pupop-models{
+			display: none;
+		}
+		.picker-view {
+			width: 750rpx;
+			height: 225px;
+			margin-top: 20rpx;
+		}
+		.item {
+			height: 50px;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			line-height: 50px;
+		}
+	}
+</style>

uni_modules/piaoyi-cityPicker/package.json

@@ -0,0 +1,27 @@
+{
+    "id": "piaoyi-cityPicker",
+    "name": " data-cityPicker省市区地址选择器",
+    "displayName": " data-cityPicker省市区地址选择器",
+    "version": "1.1.1",
+    "description": "常用省市区选择器，默认值支持地区编码和中文数组，支持2列和3列配置，可反选，自定义模态框、弹框",
+    "keywords": [
+        "省市区",
+        "支持2列和3列配置",
+        "默认值支持地区编码和中文数组",
+        "动画",
+        "可反选"
+    ],
+    "dcloudext": {
+        "type": "component-vue",
+        "contact": {
+            "qq": ""
+        },
+        "declaration": {
+            "ads": "无",
+            "data": "插件不采集任何数据",
+            "permissions": "无"
+        },
+        "npmurl": ""
+    },
+    "repository": ""
+}

uni_modules/piaoyi-cityPicker/readme.md

@@ -0,0 +1,98 @@
+## 1.0.7（2023-09-15）
+改为uni_modules规范
+### cityPicker 浮动菜单
+
+**使用方法：**
+
+```
+<template>
+	<view>
+		<button @tap="open">打开</button>
+		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
+		<view>{{str}}</view>
+	</view>
+</template>
+
+<script>
+	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
+	export default {
+		data() {
+			return {
+				visible: false,
+				maskCloseAble: true,
+				str: '',
+				defaultValue: '420103',
+				// defaultValue: ['河北省','唐山市','丰南区'],
+				column: 3
+			}
+		},
+		components: {
+			cityPicker
+		},
+		methods: {
+			open () {
+				this.visible = true
+			},
+			confirm (val) {
+				console.log(val)
+				this.str = JSON.stringify(val)
+				this.visible = false
+			},
+			cancel () {
+				this.visible = false
+			}
+		},
+		onShareAppMessage(res) {
+			if (res.from === 'button') { // 来自页面内分享按钮
+				console.log(res.target)
+			}
+			return {
+				title: 'data-cityPicker省市区地址选择器！',
+				path: '/pages/cityPicker/cityPicker'
+			}
+		},
+		onShareTimeline(res) {
+			if (res.from === 'button') { // 来自页面内分享按钮
+				console.log(res.target)
+			}
+			return {
+				title: 'data-cityPicker省市区地址选择器！'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+
+```
+
+### 注：近期收到使用用户反馈，存在以下一个问题（如有好的建议，期待私信，谢谢）
+
+1、之前只支持默认值传入地区编码，已更新可以支持传入中文省市区数组
+
+defaultValue可以传入defaultValue:['河北省','唐山市','丰南区']数组类型以及defaultValue: '420103'地区编码字符串类型
+
+可以使用const reg =/([\u4e00-\u9fa5]+省|自治区|[\u4e00-\u9fa5]+市|[\u4e00-\u9fa5]+区)/g;将自己的省市区数据进行处理为数组再传入
+
+
+#### 事件说明
+
+|   事件名    | 返回值 |      描述      |
+| :---------: | :----: | :------------: |
+| @confirm |   对象(code,完整地区名称)   | 点击确定的回调 |
+| @cancel | 无 | 点击取消的回调 |
+
+#### Prop
+
+| 参数名称 | 描述                           |
+| -------- | ------------------------------ |
+| visible | 控制选择器显示和隐藏 |
+| column | 可选值2和3，2是省市两列选择；3是省市区三列选择 |
+| maskCloseAble | 点击模态框是否关闭弹框 |
+| defaultValue | 初始地区编码（例:420102或者['河北省','唐山市','丰南区']） |
+
+### 可接定制化组件开发
+### 右侧有本人代表作小程序二维码，可以扫码体验
+### 如使用过程中有问题或有一些好的建议，欢迎加QQ群互相学习交流：120594820