uu

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

@@ -3,25 +3,27 @@
 		<view style="position: relative;height: calc(75vh);">
 			<tpx-layout>
 				<template v-slot:header>
-					<u-steps v-if="!regnameLoading" direction="column" activeColor="#B12D29" inactiveColor="#B12D29" dot="true">
+
-						<u-steps-item v-for="(item, index) in submitVals.regNames">
+					<view class="stp-list">
-							<template v-slot:desc>
+						<view v-for="(item, index) in submitVals.regNames"
-								<view :class="`pl-20 pb-20 ${curTabIndex == index?'clr-prm':''}`" @click="changeCurTab(index)">
+							:class="`stp-item ${curTabIndex == index?'active':''}`" @click="changeCurTab(index)">
-									<u-row>
+							<view class="dot"></view>
-										<view style="flex: 1;">{{item}}</view>
+							<view class="cont">
+								<view>{{item}}</view>
 								<u-icon name="arrow-right" size="32" color="rgb(214, 215, 217)"></u-icon>
-									</u-row>
 							</view>
-							</template>
+						</view>
-						</u-steps-item>
+					</view>
-					</u-steps>
+
 				</template>
 				<template v-slot:body>
 					<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 style="flex: 1;">
-								<view v-for="(sItem, sIndex) in item.data" :class="`showselect-item ${submitVals.regIds.indexOf(sItem.id) > -1?'active':''}`" @click="selectItemRegion(sItem)">
+								<view v-for="(sItem, sIndex) in item.data"
+									:class="`showselect-item ${submitVals.regIds.indexOf(sItem.id) > -1?'active':''}`"
+									@click="selectItemRegion(sItem)">
 									{{sItem.name}}
 									<view class="chk">
 										<u-icon name="checkbox-mark" size="32" :bold="true" color="inherit"></u-icon>
@@ -70,7 +72,7 @@
 					}
 					letterMap[firstUpCase].push(t)
 				})
-				Object.keys(letterMap).sort((a, b)=> a - b > 0).map((key) => {
+				Object.keys(letterMap).sort((a, b) => a - b > 0).map((key) => {
 					ret.push({
 						letters: key,
 						data: letterMap[key]
@@ -96,7 +98,6 @@
 		},
 		data() {
 			return {
-				regnameLoading: false,
 				curTabIndex: 0,
 				curCountryList: [], // { id , name, nameEn }
 				curList: [], // { id , name, nameEn }
@@ -140,7 +141,7 @@
 					t.name = t.regionName
 					t.nameEn = t.regionNameEn
 				})
-				if(list.length > 0) {
+				if (list.length > 0) {
 					this.curList = list
 				}
 				return list
@@ -153,15 +154,14 @@
 					this.getListData()
 				}
 			},
-			async addEmptyItem(item){
+			async addEmptyItem(item) {
 				const list = await this.getListData({
 					parentId: item.id
 				})
-				if(list.length > 0) {
+				if (list.length > 0) {
 					this.curTabIndex = this.curTabIndex + 1
 					this.submitVals.regIds.push()
 					this.submitVals.regNames.push('请选择')
-					this.hackUpdateRgnames()
 				}
 			},
 			async selectItemRegion(item = {}) {
@@ -171,17 +171,10 @@
 					this.submitVals.regNames.length = this.curTabIndex
 					this.submitVals.regIds.push(item.id)
 					this.submitVals.regNames.push(item.name)
-					this.hackUpdateRgnames()
 				}
 				// 选中后切换下一层级视图
 				this.addEmptyItem(item)
 			},
-			hackUpdateRgnames() {
-				this.regnameLoading = true
-				setTimeout(()=> {
-					this.regnameLoading = false
-				});
-			},
 			handleCloseModal() {
 				this.$emit('update:show', false)
 			},
@@ -196,26 +189,78 @@
 </script>
 
 <style scoped lang="scss">
-.showselect-list{
+	.stp-list {
-	
+		.stp-item {
-}
+			padding-bottom: 20rpx;
-.showselect-group {
+			position: relative;
+			.dot {
+				position: absolute;
+				top: 8rpx;
+				bottom: 2rpx;
+				left: 0;
+				&:before{
+					content: ' ';
+					display: block;
+					width: 16rpx;
+					height: 16rpx;
+					border-radius: 50%;
+					background-color: $uni-color-primary;
+				}
+				&::after{
+					position: absolute;
+					content: ' ';
+					display: block;
+					width: 3rpx;
+					border-radius: 3rpx;
+					background-color: $uni-color-primary;
+					margin-left: 6rpx;
+					bottom: 0;
+					top: 24rpx;
+				}
+			}
+			.cont {
+				padding-left: 40rpx;
 				display: flex;
-}
+				flex: 1;
-.showselect-item{
+				justify-content: space-between;
+			}
+			&:last-child{
+				.dot {
+					&::after{
+						display: none;
+					}
+				}
+			}
+			&.active{
+				color: $uni-color-primary;
+			}
+		}
+	}
+
+
+	.showselect-list {}
+
+	.showselect-group {
+		display: flex;
+	}
+
+	.showselect-item {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		margin-bottom: 20rpx;
-	.chk{
+
+		.chk {
 			display: none;
 		}
-	&.active{
+
+		&.active {
 			font-weight: bold;
 			color: #B12D29;
-		.chk{
+
+			.chk {
 				display: block;
 			}
 		}
-}
+	}
 </style>