uu

components/buns-address-sheet/buns-address-sheet.vue

@@ -0,0 +1,185 @@
+<template>
+	<tpx-dialog :show="show" title="请选择地区" @onClose="handleCloseModal()">
+		<view style="position: relative;height: calc(70vh);">
+			<tpx-layout>
+				<template v-slot:body>
+					<u-steps direction="column" activeColor="#B12D29" inactiveColor="#B12D29" dot="true">
+						<u-steps-item v-for="(item, index) in submitVals.regNames">
+							<template v-slot:desc>
+								<view :class="`pl-20 ${curTabIndex == index?'clr-prm':''}`" @click="changeCurTab(index)">
+									{{item}}
+								</view>
+							</template>
+						</u-steps-item>
+					</u-steps>
+					
+					<view class="showselect-list">
+						<view v-for="(item, index) in curShowData" class="showselect-group">
+							<view v-if="item.letters" class="pr-20">{{item.letters}}</view>
+							<view>
+								<view v-for="(sItem, sIndex) in item.data" :class="`showselect-item`" @click="selectItemRegion(sItem)">
+									{{sItem.name}}
+									<view v-if="submitVals.regIds.indexOf(sItem.id) > -1?'active':''">
+										<u-icon name="checkbox-mark" size="32" :bold="true"
+											:custom-style="`'color:#B12D29;'`"
+										></u-icon>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					
+				</template>
+
+				<template v-slot:footer>
+					<view class="blcok-white-noradius" style="margin-top: 0;margin-bottom: 0;">
+						<u-button @click="handleSubmitValue()" type="primary" size="large" shape="circle"
+							custom-style="height:80rpx;font-size: 30rpx;">确认</u-button>
+					</view>
+				</template>
+			</tpx-layout>
+		</view>
+	</tpx-dialog>
+</template>
+
+<script>
+	import {
+		getEmisCountry,
+		getEmisRegion
+	} from "@/common/api"
+
+	export default {
+		watch: {
+			show(v) {
+				if (v) {
+					this.submitVals = JSON.parse(JSON.stringify(this.value))
+					this.initData()
+				}
+			}
+		},
+		computed: {
+			curShowData() {
+				const ret = []
+				let letterMap = {}
+				this.curList.map(t => {
+					const firstUpCase = (t.nameEn || '').toLocaleUpperCase()[0]
+					if (!letterMap[firstUpCase]) {
+						letterMap[firstUpCase] = []
+					}
+					letterMap[firstUpCase].push(t)
+				})
+				Object.keys(letterMap).sort((a, b)=> a - b > 0).map((key) => {
+					ret.push({
+						letters: key,
+						data: letterMap[key]
+					})
+				})
+				return ret
+			}
+		},
+		props: {
+			show: {
+				default () {
+					return false
+				}
+			},
+			value: {
+				default () {
+					return {
+						regIds: [],
+						regNames: []
+					}
+				}
+			}
+		},
+		data() {
+			return {
+				curTabIndex: 0,
+				curCountryList: [], // { id , name, nameEn }
+				curList: [], // { id , name, nameEn }
+				submitVals: {
+					regIds: [],
+					regNames: []
+				},
+			}
+		},
+		async created() {
+			const res = await getEmisCountry()
+			this.curCountryList = this.curList = res.rows || []
+		},
+		onHide() {
+
+		},
+		unmounted() {},
+
+		methods: {
+			initData() {
+				if (this.submitVals.regIds.length == 0) {
+					let item = this.curCountryList.filter(t => t.name == '中国')[0]
+					// 默认选择中国
+					this.selectItemRegion(item)
+				}
+			},
+			async getListData({
+				parentId
+			} = {}) {
+				let countryId = this.submitVals.regIds[0] // 最外层是国家id
+				if (parentId == countryId) {
+					parentId = undefined
+				}
+				const res = await getEmisRegion({
+					parentId,
+					countryId
+				})
+				const list = res.rows || []
+				list.map(t => {
+					t.name = t.regionName
+					t.nameEn = t.regionNameEn
+				})
+				this.curList = list
+			},
+			changeCurTab(index) {
+				this.curTabIndex = index
+				if (index == 0) {
+					this.curList = this.curCountryList
+				} else {
+					this.getListData()
+				}
+			},
+			selectItemRegion(item = {}) {
+				// 选择数据变化，需清除下所有层级选中数据
+				if (item.id != this.submitVals[this.curTabIndex]) {
+					this.submitVals.regIds.length = this.curTabIndex
+					this.submitVals.regNames.length = this.curTabIndex
+					this.submitVals.regIds.push(item.id)
+					this.submitVals.regNames.push(item.name)
+				}
+				this.getListData({
+					parentId: item.id
+				})
+			},
+			handleCloseModal() {
+				this.$emit('update:show', false)
+			},
+			handleSubmitValue() {
+				const val = this.submitVals
+				this.$emit('onSure', val)
+				this.$emit('update:value', val)
+				this.handleCloseModal()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+.showselect-list{
+	
+}
+.showselect-group {
+	display: flex;
+}
+.showselect-item{
+	display: flex;
+	margin-bottom: 20rpx;;
+}
+</style>

components/buns-edit-sheet/buns-edit-sheet.vue

@@ -68,6 +68,7 @@
 		methods: {
 			handleCloseModal() {
 				this.$emit('update:show', false)
+				this.$emit('onClose')
 			},
 			handleSubmitValue() {
 				const val = this.submitVals

components/tpx-input/tpx-input.vue

@@ -1,6 +1,6 @@
 <template>
 	<u-input shape="circle" :placeholder="placeholder" :modelValue="value" :clearable="clearable" 
-		:custom-style="inputStyle" 
+		:custom-style="inputStyle" :readonly="readonly"
 		:placeholder-style="`color: #999;${placeholderStyle};` " @change="handleChange"
 	>
 		<template v-if="suffix" #suffix>
@@ -35,6 +35,11 @@
 					return false
 				}
 			},
+			readonly: {
+				default () {
+					return false
+				}
+			},
 			value: {
 				default () {
 					return ''

components/tpx-textarea/tpx-textarea.vue

@@ -1,5 +1,5 @@
 <template>
-	<u-textarea shape="circle"  placeholder-style="color: #0E0708; "  
+	<u-textarea shape="circle"  placeholder-style=""  
 		:modelValue="value" :clearable="true" :placeholder="placeholder" 
 		custom-style="border:0;border-radius: 10rpx;background-color: #F6F6F6;padding: 15rpx 20rpx;" height="160"
 	></u-textarea>

pages/address/edit.vue

@@ -12,7 +12,6 @@
 					</u-row>
 				</view>
 				
-				
 				<view class="blcok-white radius-20">
 					<view class="">
 						
@@ -27,9 +26,9 @@
 							</u-row>
 						</view>
 						
-						<view class="mt-40">
+						<view class="mt-40 pos-rlt">
-							<tpx-select placeholder="所在地区" v-model:value="country" :list="[]" custom-style="border:0;" 
+							<tpx-input v-model:value="submitParam.address" placeholder="所在地区"></tpx-input>
-							></tpx-select>
+							<view @click="handleDialogClick(addressModal)" class="pos-abt-all"></view>
 						</view>
 						
 						<view class="mt-30">
@@ -81,10 +80,10 @@
 			</view>
 		</template>
 	</tpx-layout>
+	<buns-address-sheet v-model:show="addressModal.show" v-model:value="submitParam"></buns-address-sheet>
 </template>
 
 <script>
-	import getCdnUrl from "@/common/getCdnUrl"
 	import {
 		ordStaEnum,
 		ordStatusList,
@@ -109,7 +108,12 @@
 		},
 		data() {
 			return {
+				addressModal: {
+					show: false
+				},
 				submitParam: {
+					regIds: [],
+					regNames: [],
 					type: 1,
 					otherDes: ''
 				}
@@ -128,8 +132,6 @@
 
 		},
 		methods: {
-			getCdnUrl,
-
 			initData() {
 				// uni.showLoading({
 				// 	title: '加载中'
@@ -144,6 +146,9 @@
 			handleSubmit() {
 				
 			},
+			handleDialogClick(curModal) {
+				curModal.show = true
+			}
 		}
 	}
 </script>