<template>
<div class="add">
<div class="nav"><span class="back" style="display: none;">< 返回</span>
<p>添加地址</p>
</div>
<div style="width: 100%; height: 1rem; background-color: white;"></div>
<div>
<div class="zyn" v-for="item, index in dzsj" :key=index>
<div :class="{ hus: item.delBtn }" class="zhongs" v-vuetouch="{ index: index, dzsj: dzsj }">
<div class="van-cell van-cell--borderless">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
style="font-size: 18px;">
<input type="checkbox" @click="xuan(item)" :checked="item.status == 1">
</div><span class="van-radio__label">
<div class="van-address-item__name">{{ item.username }} {{
item.userphone }}<span
class="van-tag van-tag--round van-tag--danger van-address-item__tag"
v-if="item.status == 1">默认</span>
</div>
<div class="van-address-item__address">{{ item.location
}}--{{
item.useraddress }}</div>
</span>
</div>
</div><i class="van-icon van-icon-edit van-address-item__edit" @click="bian(item)"></i>
</div>
</div>
<div class="shanchu" @click="delt(item.id, index)">
删除
</div>
</div>
</div>
<div class="van-address-list__bottom">
<button
class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"
@click="xinzeng">
<div class="van-button__content"><span class="van-button__text">新增地址</span></div>
</button>
</div>
<delter :xianshi="xianchu" @queshi="queding"></delter>
</div>
</template>
<script>
import toubu from '../views/toubu.vue'
import delter from '../views/delter.vue'
export default {
components: { toubu, delter },
data() {
return {
dzsj: [],
val: '',
xianshi: false,
husss: '',
xian2: true,
zy: [],
xianchu: false
}
},
methods: {
liebiao() {
this.$http.get('addresslist', {
params: {
uid: '18613be0-123b-11ee-ba9f-a16de45f589b'
}
}).then((res) => {
console.log(res);
res.data.list.map((item) => {
item.delBtn = false
item.status = 0
})
this.dzsj = res.data.list
this.zy = this.dzsj.filter(item => item.id == this.$route.query.id).map(item => {
item.status = 1
})
})
},
fanhui() {
this.$router.go(-1)
},
xuan(item) {
this.dzsj.map(i => {
if (item.id == i.id) {
i.status = 1
} else {
i.status = 0
}
})
setTimeout(() => {
this.$router.push({ path: '/orderconfirm', query: { item: JSON.stringify(item) } })
}, 700)
},
xinzeng() {
this.$router.push('/dizhi')
},
bian(obj) {
this.$router.push({ path: '/biannjidizhi', query: { obj: obj } })
},
queding() {
this.$http.post('http://43.138.15.137:4000/api/addressremove', {
id: this.husss,
headers: {
'Authorization': localStorage.getItem('toke')
}
}).then(res => {
this.xianchu = false
this.dzsj.splice(this.catidx, 1)
})
},
delt(index, idx) {
this.husss = index
this.xianchu = true
this.catidx = idx
}
},
created() {
this.liebiao()
},
directives: {
vuetouch(el, binding, vnode) {
var elIndex = binding.value.index;
var dzsj = binding.value.dzsj;
var container = el;
var x = 0;
var XX = 0;
container.addEventListener('touchstart', function (event) {
x = event.changedTouches[0].pageX;
for (var i = 0; i < dzsj.length; i++) {
dzsj[i].delBtn = false;
}
});
container.addEventListener('touchmove', function (event) {
event.preventDefault();
XX = event.changedTouches[0].pageX;
var c = XX - x;
if (c < 0) {
dzsj[elIndex].delBtn = true;
}
});
}
},
}
</script>
<style scoped lang="scss">
$r: 37.5;
.nav[data-v-65221434] {
width: 100vw;
height: 1.06667rem;
line-height: 1.06667rem;
text-align: center;
background: #FF6040;
color: white;
position: fixed;
top: 0;
left: 0;
font-size: 0.4rem;
z-index: 1000;
}
.back[data-v-65221434] {
position: absolute;
left: 0.26667rem;
}
.hus {
transform: translate3d(-40.5875px, 0px, 0px);
transition-duration: 0.6s;
}
.zan {
width: 100%;
height: 600rem / $r;
// margin-top: 100rem/$r;
img {
width: 100%;
height: 100%;
}
}
.zyn {
width: 100%;
height: 110rem/$r;
overflow: hidden;
margin-top: 2rem/$r ;
position: relative;
border-bottom: 1px solid black;
margin-bottom: 10rem/$r;
.zhongs {
width: 100%;
height: 100%;
position: relative;
z-index: 100;
background-color: white;
.zyn1 {
float: left;
input {
width: 20rem / $r;
height: 20rem / $r;
margin-left: 30rem/$r;
background-color: white;
border-radius: 50%;
}
img {
width: 90rem / $r;
height: 90rem / $r;
border-radius: 10rem/$r;
margin-left: 10rem/$r;
margin-top: 10rem/$r;
}
}
.nn {
float: left;
width: 100rem/$r;
height: 80rem / $r;
// background-color: blue;
margin-top: 10rem/$r;
font-size: 14rem/$r;
color: black;
font-weight: 200;
.msx-zyn {
margin-top: 10rem/$r;
text-indent: 10rem/$r;
font-size: 10rem/$r;
}
.msx-dyx {
text-indent: 10rem/$r;
margin-top: 5rem/$r;
font-size: 12rem/$r;
color: #646566;
}
.msx-wy {
text-indent: 6rem/$r;
margin-top: 20rem/$r;
font-size: 16rem/$r;
}
}
.zyn2 {
float: left;
width: 100rem/$r;
height: 80rem / $r;
// background-color: blue;
margin-top: 20rem/$r;
.zyn3 {
margin-top: 40rem/$r;
}
}
}
.shanchu {
width: 40rem/$r;
height: 110rem/$r;
background-color: red;
color: white;
font-size: 12rem/$r;
line-height: 110rem/$r;
text-align: center;
position: absolute;
right: 0;
top: 0;
z-index: 2;
// transform: translate3d(80.5875px, 0px, 0px);
// transition-duration: 0.6s;
}
}
.tibu {
position: fixed;
bottom: 46rem/$r;
left: 0;
right: 0;
width: 100%;
height: 50rem / $r;
background-color: white;
z-index: 2000;
.zyn4 {
font-size: 12rem/$r;
float: left;
width: 80rem/$r;
height: 100%;
// background-color: aqua;
margin-left: 20rem/$r;
input {
display: inline-block;
width: 20rem / $r;
height: 20rem / $r;
margin-left: 10rem/$r;
margin-top: 15rem/$r;
float: left;
border-radius: 10rem/$r ;
}
span {
float: left;
display: inline-block;
text-indent: 10rem/$r;
font-size: 14rem/$r;
margin-top: 15rem/$r;
}
}
.zyn5 {
float: left;
font-size: 14rem/$r;
margin-left: 45rem/$r;
margin-top: 15rem/$r;
// color: red;
}
.zyn6 {
float: right;
font-size: 14rem/$r;
button {
outline: none;
border: none;
width: 120rem / $r;
height: 40rem / $r;
margin-right: 10rem/$r;
// margin-left: 2rem/$r;
background: linear-gradient(to right, #ff6034, #ee0a24);
color: white;
margin-top: 5rem/$r;
border-radius: 20rem/$r;
}
}
}
.jw {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
.jmfj {
width: 80%;
height: 150rem / $r;
background-color: white;
margin-top: 50%;
margin-left: 10%;
border-radius: 20rem/$r;
.guoqi {
padding-top: 20rem/$r;
text-align: center;
width: 100%;
height: 20rem/$r;
line-height: 20rem/$r;
font-size: 14rem/$r;
}
.guoq2 {
padding-top: 20rem/$r;
text-align: center;
width: 100%;
height: 20rem/$r;
line-height: 20rem/$r;
font-size: 14rem/$r;
}
.an {
margin-top: 20rem/$r;
.qux {
width: 50%;
height: 50rem / $r;
background-color: white;
font-size: 12rem/$r;
line-height: 50rem/$r;
text-align: center;
outline: none;
border: none;
float: left;
border-radius: 0 0 0 10rem/$r ;
border-top: 1rem/$r solid #ccc;
}
.qued {
width: 50%;
height: 50rem / $r;
background-color: white;
font-size: 12rem/$r;
line-height: 50rem/$r;
text-align: center;
outline: none;
border: none;
float: left;
border-radius: 0 0 10rem/$r 0;
border-top: 1rem/$r solid #ccc;
border-left: 1rem/$r solid #ccc;
box-sizing: border-box;
}
}
}
}
input {
border-radius: 50%;
}
input[type=checkbox] {
width: 20rem / $r;
height: 20rem / $r;
margin-top: 2px;
position: relative;
border-radius: 50%;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
color: #000;
width: 20rem / $r;
height: 20rem / $r;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius: 3px;
// border-radius: 50%;
}
input[type=checkbox]:checked::after {
content: "✓";
color: #fff;
font-size: 14rem/$r;
line-height: 20rem/$r;
background-color: #FF6040;
}
input[type=checkbox] {
width: 20rem / $r;
height: 20rem / $r;
margin-top: 2rem/$r;
position: relative;
border-radius: 50%;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
color: #000;
width: 20rem / $r;
height: 20rem / $r;
display: inline-block;
visibility: visible;
padding-left: 0px;
text-align: center;
content: ' ';
border-radius: 3px;
// border-radius: 50%;
}
input[type=checkbox]:checked::after {
content: "✓";
color: #fff;
font-size: 10px;
line-height: 20rem/$r;
background-color: #FF6040;
}
</style>
