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>
<up-popup
:show="show"
:round="24"
:closeOnClickOverlay="false"
mode="bottom"
>
<view class="address-popup-view" >
<up-popup :show="show" :round="24" :closeOnClickOverlay="false" mode="bottom">
<view class="address-popup-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>
<u-icon size="48rpx" name="close-circle-fill" color="#333" @click="onClose"></u-icon>
</view>
<scroll-view :scroll-x="true" class="address-select-view">
<view class="address-select-view-scroll">
<view class="select-box" @click="onSelectItrm(item,index)" v-for="(item,index) in selectList" :key="index">
<text class="text-28 text-gray" :style="{color:index == curSelect ? '#7934F6' : '#333',
'white-space':'nowrap',}">{{item.name}}</text>
<view class="select-box" @click="onSelectItrm(item, index)" v-for="(item, index) in selectList"
:key="index">
<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>
</view>
</scroll-view>
<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">
<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">
<text class="text-32 text-gray ">{{xItem.name}}</text>
<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>
<view class="address-data-data" @click="onItem(item, xItem)" v-for="(xItem, xIndex) in item.data"
:key="xIndex">
<text class="text-32 text-gray ">{{ xItem.name }}</text>
</view>
</view>
</scroll-view>
<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">
<text class="text-24 text-gray">{{item.zi}}</text>
<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>
</view>
</view>
</view>
@@ -39,69 +38,70 @@
</template>
<script>
import Func from '/utils/func'
import MyBtn from '@/components/common/my-btn.vue'
export default {
components:{MyBtn},
import Func from '/utils/func'
import MyBtn from '@/components/common/my-btn.vue'
export default {
components: { MyBtn },
data() {
return {
scrollId:'',
scrollId: '',
}
},
props:{
show:{
type:Boolean,
default:false
props: {
show: {
type: Boolean,
default: false
},
headText:{
type:String,
default:'请选择所在地区'
headText: {
type: String,
default: '请选择所在地区'
},
dataList:{
type:Array,
default:[]
dataList: {
type: Array,
default: []
},
selectList:{
type:Array,
default:[]
selectList: {
type: Array,
default: []
},
curSelect:{
type:Number,
default:0
curSelect: {
type: Number,
default: 0
}
},
methods: {
onClose(){
onClose() {
this.$emit('close')
},
onOk(){
onOk() {
this.$emit('ok');
},
onMao(item){
onMao(item) {
this.scrollId = item;
},
onSelectItrm(item,index){
if(index != this.curSelect){
this.$emit('select',item,index);
onSelectItrm(item, index) {
if (index != this.curSelect) {
this.$emit('select', item, index);
}
},
onItem(item,xItem){
Func.debounce(()=>this.onItemOne(item,xItem));
onItem(item, xItem) {
// 传入第二个参数 150 毫秒
Func.debounce(() => this.onItemOne(item, xItem), 150);
},
onItemOne(item,xItem){
this.$emit('itemSelect',item,xItem);
}
onItemOne(item, xItem) {
this.$emit('itemSelect', item, xItem);
}
}
}
</script>
<style lang="scss" scoped>
.address-popup-view{
width:100vw;
height:1000rpx;
min-height:1000rpx;
.address-popup-view {
width: 100vw;
height: 1000rpx;
min-height: 1000rpx;
display: flex;
flex-direction: column;
justify-content: center;
@@ -109,35 +109,39 @@
border-radius: 24rpx;
position: relative;
box-sizing: border-box;
.right-zi-view{
width:64rpx;
max-height:600rpx;
.right-zi-view {
width: 64rpx;
max-height: 600rpx;
overflow-y: auto;
position: absolute;
right:32rpx;
right: 32rpx;
border-radius: 32rpx;
padding: 32rpx 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(128,128,128,0.3);
background-color: rgba(128, 128, 128, 0.3);
}
.address-bottom-list{
width:100%;
height:calc(100% - 88rpx - 88rpx - 32rpx);
margin-top:32rpx;
.address-bottom-list {
width: 100%;
height: calc(100% - 88rpx - 88rpx - 32rpx);
margin-top: 32rpx;
display: flex;
flex-direction: column;
overflow-y: auto;
.address-data-view{
width:100%;
.address-data-view {
width: 100%;
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-bottom:1rpx solid #eee;
.address-data-data{
border-bottom: 1rpx solid #eee;
.address-data-data {
padding-top: 24rpx;
box-sizing: border-box;
display: flex;
@@ -146,33 +150,36 @@
}
}
.address-select-view{
width:100%;
height:88rpx;
min-height:88rpx;
.address-select-view {
width: 100%;
height: 88rpx;
min-height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
.address-select-view-scroll{
width:100%;
.address-select-view-scroll {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
.select-line{
width:50rpx;
height:8rpx;
min-height:8rpx;
.select-line {
width: 50rpx;
height: 8rpx;
min-height: 8rpx;
background-color: #7934F6;
border-radius: 4rpx;
}
.select-box{
margin-right:24rpx;
height:56rpx;
min-height:56rpx;
.select-box {
margin-right: 24rpx;
height: 56rpx;
min-height: 56rpx;
display: flex;
flex-direction: column;
align-items: center;
@@ -181,10 +188,11 @@
}
}
.head-view{
width:100vw;
height:88rpx;
min-height:88rpx;
.head-view {
width: 100vw;
height: 88rpx;
min-height: 88rpx;
display: flex;
flex-direction: row;
align-items: center;
@@ -193,5 +201,5 @@
padding: 0 32rpx;
box-sizing: border-box;
}
}
}
</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>
<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 class="address_operate">
<up-checkbox :customStyle="{}" label="已默认" name="agree" usedAlone :checked="item.isDefault" shape="circle"
activeColor="#FF7C41" @change="isDefaultChange(item)">
<up-checkbox :customStyle="{}" label="已默认" name="agree" usedAlone :checked="item.isDefault"
shape="circle" activeColor="#FF7C41" @change="isDefaultChange(item)">
</up-checkbox>
<view class="operate_item">
<view class="operate_" @click="deleteAddressFun(item)">删除</view>
@@ -45,9 +46,10 @@ export default {
}
},
components: { Header },
mounted() {
onShow() {
this.getAddressList();
},
methods: {
// 添加地址
jumpAddAddress() {