charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：修改地址选中

Browse Source
This commit is contained in:
charles
2026-07-16 17:48:44 +08:00
parent aa2f1009e8
commit 96dfd68553
2 changed files with 186 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/address-popup.vue
+93 -85
View File
@@ -1,37 +1,36 @@
<template> <template>
<up-popup <up-popup :show="show" :round="24" :closeOnClickOverlay="false" mode="bottom">
:show="show" <view class="address-popup-view">
:round="24"
:closeOnClickOverlay="false"
mode="bottom"
>
<view class="address-popup-view" >
<view class="head-view"> <view class="head-view">
<text class="text-32 text-zu1 text-bold">{{headText}}</text> <text class="text-32 text-zu1 text-bold">{{ headText }}</text>
<MyBtn text="确定" @ok="onOk" v-if="!dataList.length" mh="48rpx" wd="128rpx" fz="24rpx"></MyBtn> <MyBtn text="确定" @ok="onOk" v-if="!dataList.length" mh="48rpx" wd="128rpx" fz="24rpx"></MyBtn>
<u-icon size="48rpx" name="close-circle-fill" color="#333" @click="onClose"></u-icon> <u-icon size="48rpx" name="close-circle-fill" color="#333" @click="onClose"></u-icon>
</view> </view>
<scroll-view :scroll-x="true" class="address-select-view"> <scroll-view :scroll-x="true" class="address-select-view">
<view class="address-select-view-scroll"> <view class="address-select-view-scroll">
<view class="select-box" @click="onSelectItrm(item,index)" v-for="(item,index) in selectList" :key="index"> <view class="select-box" @click="onSelectItrm(item, index)" v-for="(item, index) in selectList"
<text class="text-28 text-gray" :style="{color:index == curSelect ? '#7934F6' : '#333', :key="index">
'white-space':'nowrap',}">{{item.name}}</text> <text class="text-28 text-gray" :style="{
color: index == curSelect ? '#7934F6' : '#333',
'white-space': 'nowrap',
}">{{ item.name }}</text>
<view class="select-line" v-if="index == curSelect"></view> <view class="select-line" v-if="index == curSelect"></view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view :scroll-y="true" class="address-bottom-list" :scroll-into-view="scrollId"> <scroll-view :scroll-y="true" class="address-bottom-list" :scroll-into-view="scrollId">
<view class="address-data-view" v-for="(item,index) in dataList" :key="index" :id="item.zi"> <view class="address-data-view" v-for="(item, index) in dataList" :key="index" :id="item.zi">
<text class="text-32 text-gray text-bold">{{item.zi}}</text> <text class="text-32 text-gray text-bold">{{ item.zi }}</text>
<view class="address-data-data" @click="onItem(item,xItem)" v-for="(xItem,xIndex) in item.data" :key="xIndex"> <view class="address-data-data" @click="onItem(item, xItem)" v-for="(xItem, xIndex) in item.data"
<text class="text-32 text-gray ">{{xItem.name}}</text> :key="xIndex">
<text class="text-32 text-gray ">{{ xItem.name }}</text>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<view class="right-zi-view" v-if="dataList.length"> <view class="right-zi-view" v-if="dataList.length">
<view class="zi-box" v-for="(item,index) in dataList" @click="onMao(item.zi)" :key="index"> <view class="zi-box" v-for="(item, index) in dataList" @click="onMao(item.zi)" :key="index">
<text class="text-24 text-gray">{{item.zi}}</text> <text class="text-24 text-gray">{{ item.zi }}</text>
</view> </view>
</view> </view>
</view> </view>
@@ -39,69 +38,70 @@
</template> </template>
<script> <script>
import Func from '/utils/func' import Func from '/utils/func'
import MyBtn from '@/components/common/my-btn.vue' import MyBtn from '@/components/common/my-btn.vue'
export default { export default {
components:{MyBtn}, components: { MyBtn },
data() { data() {
return { return {
scrollId:'', scrollId: '',
} }
}, },
props:{ props: {
show:{ show: {
type:Boolean, type: Boolean,
default:false default: false
}, },
headText:{ headText: {
type:String, type: String,
default:'请选择所在地区' default: '请选择所在地区'
}, },
dataList:{ dataList: {
type:Array, type: Array,
default:[] default: []
}, },
selectList:{ selectList: {
type:Array, type: Array,
default:[] default: []
}, },
curSelect:{ curSelect: {
type:Number, type: Number,
default:0 default: 0
} }
}, },
methods: { methods: {
onClose(){ onClose() {
this.$emit('close') this.$emit('close')
}, },
onOk(){ onOk() {
this.$emit('ok'); this.$emit('ok');
}, },
onMao(item){ onMao(item) {
this.scrollId = item; this.scrollId = item;
}, },
onSelectItrm(item,index){ onSelectItrm(item, index) {
if(index != this.curSelect){ if (index != this.curSelect) {
this.$emit('select',item,index); this.$emit('select', item, index);
} }
}, },
onItem(item,xItem){ onItem(item, xItem) {
Func.debounce(()=>this.onItemOne(item,xItem)); // 传入第二个参数 150 毫秒
Func.debounce(() => this.onItemOne(item, xItem), 150);
}, },
onItemOne(item,xItem){ onItemOne(item, xItem) {
this.$emit('itemSelect',item,xItem); this.$emit('itemSelect', item, xItem);
}
} }
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.address-popup-view{ .address-popup-view {
width:100vw; width: 100vw;
height:1000rpx; height: 1000rpx;
min-height:1000rpx; min-height: 1000rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@@ -109,35 +109,39 @@
border-radius: 24rpx; border-radius: 24rpx;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
.right-zi-view{
width:64rpx; .right-zi-view {
max-height:600rpx; width: 64rpx;
max-height: 600rpx;
overflow-y: auto; overflow-y: auto;
position: absolute; position: absolute;
right:32rpx; right: 32rpx;
border-radius: 32rpx; border-radius: 32rpx;
padding: 32rpx 0; padding: 32rpx 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: rgba(128,128,128,0.3); background-color: rgba(128, 128, 128, 0.3);
} }
.address-bottom-list{
width:100%; .address-bottom-list {
height:calc(100% - 88rpx - 88rpx - 32rpx); width: 100%;
margin-top:32rpx; height: calc(100% - 88rpx - 88rpx - 32rpx);
margin-top: 32rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
.address-data-view{
width:100%; .address-data-view {
width: 100%;
padding: 0 32rpx; padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-bottom:1rpx solid #eee; border-bottom: 1rpx solid #eee;
.address-data-data{
.address-data-data {
padding-top: 24rpx; padding-top: 24rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@@ -146,33 +150,36 @@
} }
} }
.address-select-view{
width:100%; .address-select-view {
height:88rpx; width: 100%;
min-height:88rpx; height: 88rpx;
min-height: 88rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0 32rpx; padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
.address-select-view-scroll{
width:100%; .address-select-view-scroll {
width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
.select-line{ .select-line {
width:50rpx; width: 50rpx;
height:8rpx; height: 8rpx;
min-height:8rpx; min-height: 8rpx;
background-color: #7934F6; background-color: #7934F6;
border-radius: 4rpx; border-radius: 4rpx;
} }
.select-box{
margin-right:24rpx; .select-box {
height:56rpx; margin-right: 24rpx;
min-height:56rpx; height: 56rpx;
min-height: 56rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -181,10 +188,11 @@
} }
} }
.head-view{
width:100vw; .head-view {
height:88rpx; width: 100vw;
min-height:88rpx; height: 88rpx;
min-height: 88rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -193,5 +201,5 @@
padding: 0 32rpx; padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
} }
} }
</style> </style>
pages/mine_package/mine_address/mine_address.vue
+6 -4
View File
@@ -8,11 +8,12 @@
<view style="margin-left: 20rpx;">{{ item.phone }}</view> <view style="margin-left: 20rpx;">{{ item.phone }}</view>
</view> </view>
<view class="address_item_address"> <view class="address_item_address">
{{ item.countryName }} {{ item.provinceName }} {{ item.cityName }} {{ item.areaName }} {{ item.townshipName }} {{ item.address }} {{ item.countryName }} {{ item.provinceName }} {{ item.cityName }} {{ item.areaName }} {{
item.townshipName }} {{ item.address }}
</view> </view>
<view class="address_operate"> <view class="address_operate">
<up-checkbox :customStyle="{}" label="已默认" name="agree" usedAlone :checked="item.isDefault" shape="circle" <up-checkbox :customStyle="{}" label="已默认" name="agree" usedAlone :checked="item.isDefault"
activeColor="#FF7C41" @change="isDefaultChange(item)"> shape="circle" activeColor="#FF7C41" @change="isDefaultChange(item)">
</up-checkbox> </up-checkbox>
<view class="operate_item"> <view class="operate_item">
<view class="operate_" @click="deleteAddressFun(item)">删除</view> <view class="operate_" @click="deleteAddressFun(item)">删除</view>
@@ -45,9 +46,10 @@ export default {
} }
}, },
components: { Header }, components: { Header },
mounted() { onShow() {
this.getAddressList(); this.getAddressList();
}, },
methods: { methods: {
// 添加地址 // 添加地址
jumpAddAddress() { jumpAddAddress() {