<template>
<div class="wuyu">
<div data-v-7041dcbc="">
<div data-v-65221434="" data-v-7041dcbc="" class="nav"><span data-v-65221434="" class="back"
@click="fanhuio">< 返回</span>
<p data-v-65221434="">添加收货地址</p>
</div>
<div data-v-7041dcbc="" style="height: 1rem; background: white;"></div>
<div data-v-7041dcbc="" class="van-address-edit ">
<div class="van-address-edit__fields">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>姓名</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" placeholder="收货人姓名"
class="van-field__control" v-model="from.username" v-username></div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>电话</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="tel" placeholder="收货人手机号"
class="van-field__control" v-model="from.userphone" v-phones></div>
</div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
<div class="van-cell__title van-field__label"><span>地区</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><input type="text" readonly="readonly"
placeholder="选择省 / 市 / 区" class="van-field__control" v-model="from.location"
@focus="ssx">
<div class="van-field__right-icon"><i class="van-icon van-icon-arrow"><!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-address-edit-detail">
<div class="van-cell__value van-cell__value--alone">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>详细地址</span></div>
<div class="van-cell__value van-field__value">
<div class="van-field__body"><textarea rows="1" placeholder="街道门牌、楼层房间号等信息"
class="van-field__control" style="height: 23px;"
v-model="from.useraddress"></textarea></div>
</div>
</div>
</div>
</div>
</div>
<div class="van-cell van-cell--center van-address-edit__default">
<div class="van-cell__title"><span>设为默认收货地址</span></div>
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
<van-switch v-model="checked" />
</div>
</div>
<div class="van-address-edit__buttons"><button
class="van-button van-button--danger van-button--normal van-button--block van-button--round"
@click="baocun" :disabled="flgs">
<div class="van-button__content"><span class="van-button__text">保存</span></div>
</button><button
class="van-button van-button--default van-button--normal van-button--block van-button--round">
<div class="van-button__content"><span class="van-button__text">删除</span></div>
</button></div>
</div>
</div>
<div class="jilian" @touchmove.prevent ref="uio">
<div class="jilian2" ref="iop">
<div class="tous">
<div class="qx">取消</div>
<div class="qd" @click="que">确定</div>
</div>
<jilian @val=lopss></jilian>
</div>
</div>
</div>
</template>
<script>
import jilian from '../views/jilian.vue'
export default {
components: { jilian },
data() {
return {
from: {
username: '',
userphone: '',
location: '',
useraddress: ''
},
value: '',
flgs: false,
checked: false,
add:[]
}
},
methods: {
baocun() {
if (this.from.username == '' && this.from.userphone == '' && this.from.location == '' && this.from.useraddress == '') {
this.flgs = false
} else if (this.from.username !== '' && this.from.userphone !== '' && this.from.location !== '' && this.from.useraddress !== '') {
this.$http.post('addressadd', {
uid: '18613be0-123b-11ee-ba9f-a16de45f589b',
username: this.from.username,
userphone: this.from.userphone,
location: this.from.location,
useraddress: this.from.useraddress,
}).then((res) => {
console.log(res,'sdasdas');
this.add=res.data.list
// console.log(this.add.addId);
if (this.checked = true) {
this.$router.push({ path: '/addresslist', query: {id:this.add.addId} })
}else{
this.$router.push('/addresslist')
}
})
}
},
fanhuio() {
this.$router.go(-1)
},
ssx() {
this.$refs.uio.style.zIndex = 2000
this.$refs.iop.style.bottom = 0
this.$refs.iop.style.zIndex = 2100
},
lopss(val) {
// 接收
console.log(val);
this.value = val
},
que() {
this.$refs.uio.style.zIndex = -2
this.$refs.iop.style.bottom = -300
this.$refs.iop.style.zIndex = -3
this.from.location = this.value.join('/')
}
},
}
</script>
<style scoped lang="scss">
$r: 37.5;
.wuyu {
background-color: white;
width: 100%;
height: 100%;
}
.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;
}
.back[data-v-65221434] {
position: absolute;
left: 0.26667rem;
}
.jilian {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1000;
.jilian2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 300rem / $r;
background-color: white;
border-radius: 20rem/$r 20rem/$r 0 0;
bottom: -300rem / $r;
transition: all 0.5s;
z-index: -2000;
.tous {
width: 100%;
height: 30rem / $r;
// background-color: red;
margin-top: 10rem/$r;
.qx {
float: left;
font-size: 14rem/$r;
text-indent: 14rem/$r;
// margin-top: 14rem/$r;
line-height: 30rem/$r;
}
.qd {
float: right;
font-size: 14rem/$r;
margin-right: 14rem/$r;
// margin-top: 14rem/$r;
color: #5780C1;
line-height: 30rem/$r;
}
}
}
}
.van-picker__columns {
height: 264rem/$r;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: flex;
cursor: grab;
}
.van-picker-column {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
overflow: hidden;
font-size: 0.42667rem;
}
.van-picker-column__wrapper {
-webkit-transition-timing-function: cubic-bezier(.23, 1, .68, 1);
transition-timing-function: cubic-bezier(.23, 1, .68, 1);
transform: translateY(110px);
}
ol,
ul {
margin: 0;
padding: 0;
list-style: none;
}
.van-picker-column__item {
height: 44rem/$r;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
padding: 0 0.10667rem;
color: #000;
}
.van-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.van-picker__mask {
background-size: 100% 110px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4)), -webkit-linear-gradient(bottom, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4));
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4)), linear-gradient(0deg, hsla(0, 0%, 100%, .9), hsla(0, 0%, 100%, .4));
background-repeat: no-repeat;
background-position: top, bottom;
-webkit-transform: translateZ(0);
transform: translateZ(0);
pointer-events: none;
}
.van-picker__frame {
position: absolute;
top: 50%;
right: 0.42667rem;
left: 0.42667rem;
height: 44rem/$r;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
pointer-events: none;
}
[class*=van-hairline]::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #ebedf0;
-webkit-transform: scale(.5);
transform: scale(.5);
border-width: 0.02667rem 0;
}
</style>
