You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.2 KiB
150 lines
3.2 KiB
<template>
|
|
<view style="flex-direction: column;">
|
|
<scroll-view class="scroll-view" :scroll-y="true">
|
|
<view class="addressItem" v-for="(item, index) in addressList" :key="item.id">
|
|
<view class="addressItemTop">
|
|
<text class="addrName">{{ item.name }}</text>
|
|
<text class="addrTel">{{ item.phone }}</text>
|
|
</view>
|
|
<text class="addr">{{ item.address }}</text>
|
|
<view class="line"></view>
|
|
<view class="optionsPanel">
|
|
<radio-group @change="radioChange">
|
|
<label>
|
|
<radio :value="item.id" :checked="item.isDefault" color="#e7a23f"></radio>
|
|
<text>设置为默认地址</text>
|
|
</label>
|
|
</radio-group>
|
|
<view class="rightPanel">
|
|
<image class="optionsBtn" src="../../static/删除.png" @click="remove"></image>
|
|
<image class="optionsBtnEdit" src="../../static/编辑.png" @click="$url('/packages/addAddress/addAddress?id='+ item.id)"></image>
|
|
</view>
|
|
</view>
|
|
<view style="height: 30rpx;background-color: #F6F6F6;"></view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="addNewAddr" @click="$url('/packages/addAddress/addAddress')">
|
|
<text>+ 新增收获地址</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
addressList: [{
|
|
id: '1',
|
|
name: '邓平艺',
|
|
phone: '18454545455',
|
|
address: '北京北京市海淀区钻石大厦C座',
|
|
isDefault: true
|
|
},{
|
|
id: '2',
|
|
name: '邓艺平',
|
|
phone: '18454545455',
|
|
address: '北京北京市海淀区钻石大厦C座',
|
|
isDefault: false
|
|
},{
|
|
id: '3',
|
|
name: '洛阳',
|
|
phone: '18454545455',
|
|
address: '北京北京市海淀区钻石大厦C座',
|
|
isDefault: false
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
radioChange(event){
|
|
let id = event.detail.value;
|
|
this.addressList.forEach(item => {
|
|
if(item.id === id){
|
|
item.isDefault = true;
|
|
}else{
|
|
item.isDefault = false;
|
|
}
|
|
});
|
|
},
|
|
remove(){
|
|
this.$msg('删除')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped class="scss">
|
|
/deep/view{
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.scroll-view{
|
|
height: calc(100vh - 200rpx);
|
|
}
|
|
|
|
.checkBtn{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 14rpx;
|
|
}
|
|
.addressItemTop{
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.addressItem{
|
|
flex-direction: column;
|
|
}
|
|
.line{
|
|
height: 1rpx;
|
|
background-color: #D8D8D8;
|
|
margin-left: 32rpx;
|
|
margin-right: 32rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.addrName{
|
|
margin-left: 32rpx;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin-right: 40rpx;
|
|
}
|
|
.addr{
|
|
margin-left: 32rpx;
|
|
}
|
|
.optionsPanel{
|
|
margin-left: 32rpx;
|
|
margin-bottom: 40rpx;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.rightPanel{
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 32rpx;
|
|
}
|
|
.optionsBtn{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
margin-right: 50rpx;
|
|
}
|
|
.optionsBtnEdit{
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
.addNewAddr{
|
|
height: 96rpx;
|
|
/* width: 90%; */
|
|
width: 686rpx;
|
|
border: #E7A23F 2rpx solid;
|
|
border-radius: 8rpx;
|
|
position: fixed;
|
|
bottom: 100rpx;
|
|
left: calc(50% - 343rpx);
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-self: center;
|
|
color: #E7A23F;
|
|
}
|
|
|
|
</style>
|