feat：修改地址选中
This commit is contained in:
+180
-172
@@ -1,197 +1,205 @@
|
|||||||
<template>
|
<template>
|
||||||
<up-popup
|
<up-popup :show="show" :round="24" :closeOnClickOverlay="false" mode="bottom">
|
||||||
:show="show"
|
<view class="address-popup-view">
|
||||||
:round="24"
|
<view class="head-view">
|
||||||
:closeOnClickOverlay="false"
|
<text class="text-32 text-zu1 text-bold">{{ headText }}</text>
|
||||||
mode="bottom"
|
<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 class="address-popup-view" >
|
</view>
|
||||||
<view class="head-view">
|
<scroll-view :scroll-x="true" class="address-select-view">
|
||||||
<text class="text-32 text-zu1 text-bold">{{headText}}</text>
|
<view class="address-select-view-scroll">
|
||||||
<MyBtn text="确定" @ok="onOk" v-if="!dataList.length" mh="48rpx" wd="128rpx" fz="24rpx"></MyBtn>
|
<view class="select-box" @click="onSelectItrm(item, index)" v-for="(item, index) in selectList"
|
||||||
<u-icon size="48rpx" name="close-circle-fill" color="#333" @click="onClose"></u-icon>
|
:key="index">
|
||||||
</view>
|
<text class="text-28 text-gray" :style="{
|
||||||
<scroll-view :scroll-x="true" class="address-select-view">
|
color: index == curSelect ? '#7934F6' : '#333',
|
||||||
<view class="address-select-view-scroll">
|
'white-space': 'nowrap',
|
||||||
<view class="select-box" @click="onSelectItrm(item,index)" v-for="(item,index) in selectList" :key="index">
|
}">{{ item.name }}</text>
|
||||||
<text class="text-28 text-gray" :style="{color:index == curSelect ? '#7934F6' : '#333',
|
<view class="select-line" v-if="index == curSelect"></view>
|
||||||
'white-space':'nowrap',}">{{item.name}}</text>
|
</view>
|
||||||
<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>
|
</view>
|
||||||
</view>
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
<view class="right-zi-view" v-if="dataList.length">
|
<scroll-view :scroll-y="true" class="address-bottom-list" :scroll-into-view="scrollId">
|
||||||
<view class="zi-box" v-for="(item,index) in dataList" @click="onMao(item.zi)" :key="index">
|
<view class="address-data-view" v-for="(item, index) in dataList" :key="index" :id="item.zi">
|
||||||
<text class="text-24 text-gray">{{item.zi}}</text>
|
<text class="text-32 text-gray text-bold">{{ item.zi }}</text>
|
||||||
</view>
|
<view class="address-data-data" @click="onItem(item, xItem)" v-for="(xItem, xIndex) in item.data"
|
||||||
</view>
|
:key="xIndex">
|
||||||
</view>
|
<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>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</up-popup>
|
</up-popup>
|
||||||
</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: {
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
},
|
},
|
||||||
props:{
|
headText: {
|
||||||
show:{
|
type: String,
|
||||||
type:Boolean,
|
default: '请选择所在地区'
|
||||||
default:false
|
|
||||||
},
|
|
||||||
headText:{
|
|
||||||
type:String,
|
|
||||||
default:'请选择所在地区'
|
|
||||||
},
|
|
||||||
dataList:{
|
|
||||||
type:Array,
|
|
||||||
default:[]
|
|
||||||
},
|
|
||||||
selectList:{
|
|
||||||
type:Array,
|
|
||||||
default:[]
|
|
||||||
},
|
|
||||||
curSelect:{
|
|
||||||
type:Number,
|
|
||||||
default:0
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
dataList: {
|
||||||
methods: {
|
type: Array,
|
||||||
onClose(){
|
default: []
|
||||||
this.$emit('close')
|
},
|
||||||
},
|
selectList: {
|
||||||
onOk(){
|
type: Array,
|
||||||
this.$emit('ok');
|
default: []
|
||||||
},
|
},
|
||||||
onMao(item){
|
curSelect: {
|
||||||
this.scrollId = item;
|
type: Number,
|
||||||
},
|
default: 0
|
||||||
onSelectItrm(item,index){
|
}
|
||||||
if(index != this.curSelect){
|
|
||||||
this.$emit('select',item,index);
|
},
|
||||||
}
|
|
||||||
},
|
methods: {
|
||||||
onItem(item,xItem){
|
onClose() {
|
||||||
Func.debounce(()=>this.onItemOne(item,xItem));
|
this.$emit('close')
|
||||||
},
|
},
|
||||||
onItemOne(item,xItem){
|
onOk() {
|
||||||
this.$emit('itemSelect',item,xItem);
|
this.$emit('ok');
|
||||||
|
},
|
||||||
|
onMao(item) {
|
||||||
|
this.scrollId = item;
|
||||||
|
},
|
||||||
|
onSelectItrm(item, index) {
|
||||||
|
if (index != this.curSelect) {
|
||||||
|
this.$emit('select', item, index);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
onItem(item, xItem) {
|
||||||
|
// 传入第二个参数 150 毫秒
|
||||||
|
Func.debounce(() => this.onItemOne(item, xItem), 150);
|
||||||
|
},
|
||||||
|
onItemOne(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;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.right-zi-view {
|
||||||
|
width: 64rpx;
|
||||||
|
max-height: 600rpx;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: absolute;
|
||||||
|
right: 32rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
padding: 32rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
background-color: #fff;
|
background-color: rgba(128, 128, 128, 0.3);
|
||||||
border-radius: 24rpx;
|
}
|
||||||
position: relative;
|
|
||||||
box-sizing: border-box;
|
.address-bottom-list {
|
||||||
.right-zi-view{
|
width: 100%;
|
||||||
width:64rpx;
|
height: calc(100% - 88rpx - 88rpx - 32rpx);
|
||||||
max-height:600rpx;
|
margin-top: 32rpx;
|
||||||
overflow-y: auto;
|
display: flex;
|
||||||
position: absolute;
|
flex-direction: column;
|
||||||
right:32rpx;
|
overflow-y: auto;
|
||||||
border-radius: 32rpx;
|
|
||||||
padding: 32rpx 0;
|
.address-data-view {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 32rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
border-bottom: 1rpx solid #eee;
|
||||||
background-color: rgba(128,128,128,0.3);
|
|
||||||
}
|
.address-data-data {
|
||||||
.address-bottom-list{
|
padding-top: 24rpx;
|
||||||
width:100%;
|
|
||||||
height:calc(100% - 88rpx - 88rpx - 32rpx);
|
|
||||||
margin-top:32rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow-y: auto;
|
|
||||||
.address-data-view{
|
|
||||||
width:100%;
|
|
||||||
padding: 0 32rpx;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
padding: 24rpx 0;
|
||||||
border-bottom:1rpx solid #eee;
|
|
||||||
.address-data-data{
|
|
||||||
padding-top: 24rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
padding: 24rpx 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
.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%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.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;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.head-view{
|
|
||||||
width:100vw;
|
|
||||||
height:88rpx;
|
|
||||||
min-height:88rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
padding: 0 32rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-view {
|
||||||
|
width: 100vw;
|
||||||
|
height: 88rpx;
|
||||||
|
min-height: 88rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
padding: 0 32rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user