<template>
<div id="jueseQiehuan">
<b-header title="收货地址"></b-header>
<scroll>
<div class="title">
<div>收货地址</div>
<div class="title-edit" v-if="!isEdit" @click="editDelete">编辑</div>
<div class="title-edit" v-else @click="editFinish" style="color: #797C80">完成</div>
</div>
<div class="container">
<div class="cont" v-show="!isEdit" @click="editAddress">
<div class="cont-left">
<p class="cont-left-title"><span>王晓花</span>158****77991</p>
<p class="cont-left-addr">四川省成都市吉泰五路88号香年广场T2楼46层4602号</p>
</div>
<div class="cont-right">
<span class="edit"></span>
</div>
</div>
<label style="display:block;" v-show="isEdit" v-for="(item, index) in list" :key="index" @click="checkAddress(item)">
<div class="cont">
<div class="cont-right">
<span class="check" style="margin-right: .2rem;vertical-align: middle;">
<i class="icon" :class="item.on ? 'icon-checked' : 'icon-check'"></i>
</span>
</div>
<div class="cont-left" style="width: 90%;">
<p class="cont-left-title"><span>{{item.name}}</span>{{item.tel}}</p>
<p class="cont-left-addr">{{item.address}}</p>
</div>
</div>
</label>
</div>
<div class="checkAll" v-show="isEdit">
<div class="checkAll-left" @click="checkAll">
<span class="check">
<!-- <input type="radio" name="check" :id="'radio'+item.id" /> -->
<i class="icon" :class="chosenAddressId ? 'icon-checked' : 'icon-check'"></i>
</span>
全选
</div>
<div class="checkAll-right" @click="deleteAddress">
<span>删除</span>
</div>
</div>
<!-- <div class="nodata">暂无数据</div> -->
<div class="footer" v-show="!isEdit" @click="addAddress">新增收货地址</div>
</scroll>
</div>
</template>
<script>
import BHeader from 'components/base/header/header'
import Scroll from 'components/base/scroll/scroll'
export default {
components: {
BHeader,
Scroll
},
data () {
return {
isEdit: false,
chosenAddressId: false,
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
on: false
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
on: false
}
],
disabledList: [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号',
on: false
}
]
}
},
methods: {
addAddress () {
this.$router.push('/cloud/addAddress')
},
editAddress () {
this.$router.push('/cloud/editAddress')
},
checkAddress (item) {
var i = 0
this.list.forEach(res => {
if (item.id === res.id && item.on) {
res.on = false
} else if (item.id === res.id && !item.on) {
res.on = true
}
if (res.on) i++
})
if (i === this.list.length) {
this.chosenAddressId = true
} else {
this.chosenAddressId = false
}
},
checkAll () {
if (!this.chosenAddressId) {
this.chosenAddressId = true
this.list.forEach(res => {
res.on = true
})
} else {
this.chosenAddressId = false
this.list.forEach(res => {
res.on = false
})
}
},
editDelete () {
this.isEdit = true
},
editFinish () {
this.isEdit = false
},
deleteAddress () {
alert('删除调用接口')
}
}
}
</script>
<style lang="scss" scoped>
@import "~assets/styles/mixin";
#jueseQiehuan {
height: 100%;
background-color: #fff;
.title {
border-bottom: 1px solid #F1F3F8;
padding: 1.125rem .94rem;
color:rgba(44,43,64,1);
font-size: 1.5rem;
font-weight: 600;
display: flex;
justify-content: space-between;
.title-edit {
height:1.31rem;
font-size:0.94rem;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(76,136,255,1);
line-height:1.31rem;
}
}
.container {
padding: 0 .94rem;
margin-bottom: 4rem;
.cont {
display: flex;
justify-content: space-between;
padding: .94rem 0;
border-bottom: 1px solid #F1F3F8;
.cont-left {
width: 80%;
color: #17181A;
.cont-left-title {
font-size:0.75rem;
font-family:PingFangSC-Medium;
font-weight:500;
margin-bottom: 0.25rem;
font-weight: 600;
line-height:1.25rem;
height:1.25rem;
span {
font-size: .94rem;
margin-right: .5rem;
}
}
.cont-left-addr {
font-size:0.94rem;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(121,124,128,1);
line-height:1.25rem;
}
}
.cont-right {
position: relative;
.edit {
@include background-image('cloud/address_edit');
display: block;
height: 1.375rem;
width: 1.375rem;
position: absolute;
top: 50%;
right: 15px;
font-size: 16px;
transform: translate(0,-50%);
}
.check {
top: 50%;
left: 0;
font-size: 16px;
position: absolute;
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
height: 1.125rem;
width: 1.125rem;
input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
margin: 0;
width: 100%;
height: 100%;
}
}
}
}
}
.icon {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 vant-icon;
}
.icon-checked {
position: relative;
display: inline-block;
font: normal normal normal 14px/1 vant-icon;
font-size: inherit;
text-rendering: auto;
color: #17181A;
}
.icon-check {
color: #999;
font: normal normal normal 14px/1 "vant-icon";
}
.icon-checked::before {
content: "\F011";
}
.icon-check::before {
content: "\F010";
}
.icon::before {
display: inline-block;
}
.checkAll {
position: absolute;
bottom: 0;
width: 100%;
height: 3.125rem;
line-height: 3.125rem;
text-align: center;
color: #fff;
font-size: .94rem;
display: flex;
justify-content: space-between;
border-top: 1px solid #EEEEEE;
.checkAll-left {
font-size:0.81rem;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(44,43,64,1);
width: 20%;
}
.checkAll-right {
width: 30%;
span{
width: 100%;
display: block;
height: 3.125rem;
line-height: 3.125rem;
text-align: center;
font-size:0.88rem;
font-family:PingFangSC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
background-color: #F55858;
}
}
}
.nodata {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size:0.88rem;
color:rgba(27,28,30,1);
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 3.125rem;
line-height: 3.125rem;
text-align: center;
color: #fff;
font-size: .94rem;
background-color: #4C88FF;
}
}
</style>
