<template>
<div class="addressEdit">
<div>
<!-- <van-cell title="单元格" value="内容" /> -->
<mt-field label="收货人" v-model="receiveName" placeholder="请填写收货人"></mt-field>
<mt-field label="手机号" type="tel" v-model="receiveMobile" placeholder="请填写手机号" :attr='{maxlength: 13}'></mt-field>
<!-- <mt-field label="所在地区" id="mtcell" placeholder="请选择地区" :value="addressArea" @click.native="showPicker" is-link>
<i class="iconfont icon-youjiantou"></i>
</mt-field>-->
<mt-field
label="所在地区"
v-model="addressArea"
placeholder="请填写所在地区"
:readonly="true"
:disableClear="true"
>
<mt-cell is-link style="position:absolute;width: 40px;height:100%;right:0;top:-24px;"></mt-cell>
<div class="stbox" style="position:absolute;right: 0;top: -24px;left: 0;bottom: 0;">
<mt-cell
id="mtcell"
:value="addressArea"
@click.native="showPicker"
style="opacity:0;position:absolute;width:300px;height: 100%;right:10%;top:0;"
></mt-cell>
<!-- <div v-if="!addressArea" class="holder">请填写所在地区</div> -->
</div>
</mt-field>
<mt-field label="详细地址" placeholder="请填写详细地址" v-model="address"></mt-field>
<div @click="onSave();buttonClick('保存地址')" class="btn">
<van-button round size="large" type="info">保存</van-button>
</div>
</div>
<my-address
:showAddressPicker="showAddressPicker"
@save-address="saveAddress"
@hide-picker="hidePicker"
:init="addressArea"></my-address>
</div>
</template>
<script>
import MyAddress from "@/components/address-picker/Address.vue";
import {
saveActivityAddressApi,
getActivityAddressApi,
editActivityAddressApi
} from "../../service/api";
import {Toast } from "vant";
import {Field,Cell} from 'mint-ui'
export default {
name: "addressEdit",
components: {
MyAddress,
[Cell.name]: Cell,
[Field.name]: Field
},
data() {
return {
receiveName: "",
receiveMobile: "",
addressDetail: "",
showAddressPicker: false,
addressArea: "",
addressAreaCode: "6-77-705",
address: "",
addressId: ""
};
},
mounted() {
this.getUserAddress();
},
methods: {
closeAdd() {
this.$emit("closeAdd", false);
},
buttonClick(buttonName) {
this.$sa.track("buttonClick", {
tabTitle: "商品",
moduleTitle: "地址填写",
buttonType: "功能",
buttonName: buttonName
});
},
onSave: function() {
let values = this.addressAreaCode.split("-");
let labels = this.addressArea.split("-");
if (!this.receiveName) {
Toast("收货人不能为空");
return false;
} else if (!this.receiveMobile) {
Toast("手机号不能为空");
return false;
} else if (!/^1\d{10,12}$/.test(this.receiveMobile)) {
Toast("手机号格式不正确");
return false;
} else if (!this.addressArea) {
Toast("所在地区不能为空");
return false;
}else if (!this.address) {
Toast("详细地址不能为空");
return false;
}
let param = {};
param.receive_name = this.receiveName;
param.receive_mobile = this.receiveMobile;
param.address = this.address;
param.province_id = values[0];
param.province_name = labels[0];
param.city_id = values[1];
param.city = labels[1];
param.area_id = values[2];
param.area = labels[2];
console.log(this.addressId);
if (this.addressId) {
editActivityAddressApi(param, this.addressId).then(res => {
this.closeAdd();
Toast("更新成功");
this.$router.replace({
name: "starRank"
});
});
} else {
saveActivityAddressApi(param).then(res => {
this.closeAdd();
Toast("更新成功");
this.$router.replace({
name: "starRank"
});
});
}
},
onValuesChange: function(picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
},
hidePicker() {
// 接受子组件关闭popup事件
this.showAddressPicker = false;
},
showPicker() {
this.showAddressPicker = !this.showAddressPicker;
},
saveAddress(labels, values) {
console.log(labels);
// 从子组件接受返回所选值 val
this.addressArea = labels;
this.addressAreaCode = values;
this.showAddressPicker = !this.showAddressPicker;
},
getUserAddress: function() {
getActivityAddressApi().then(res => {
if (res.receive_name) {
let addressInfo = res;
this.receiveName = addressInfo.receive_name
? addressInfo.receive_name
: "";
this.receiveMobile = addressInfo.receive_mobile;
this.address = addressInfo.address;
this.addressArea = `${addressInfo.province_name}-${
addressInfo.city
}-${addressInfo.area}`;
this.addressAreaCode = `${addressInfo.province_id}-${
addressInfo.city_id
}-${addressInfo.area_id}`;
this.addressId = addressInfo.id;
}
});
}
}
};
</script>
<style lang="less">
@import "../../util/public";
.addressEdit {
background: #f5f5f9;
// .mint-cell-wrapper{border-bottom: 1px solid #E2E2E2;width: 94%;}
.stbox {
position: relative;
}
input::-webkit-input-placeholder {
color: #cccccc;
}
.van-popup {
background: white;
}
.gray {
background: #cccccc;
border: none;
}
.mint-cell {
color: #333333;
}
.btn {
margin-top: 50 * @toVw;
padding: 0 34 * @toVw;
}
#mtcell {
// background: red;
span {
color: #333333;
}
.mint-cell-title {
width: 105px;
flex: none;
}
.mint-cell-value {
flex: 1;
text-align: left;
// background: red;
span {
text-indent: 0;
margin-left: 4px;
}
}
}
.mint-field-core {
// background: red;
text-indent: 2px;
}
.holder {
color: rgb(204, 204, 204);
position: absolute;
top: 10 * @toVw;
left: 108 * @toVw;
}
// .mint-cell-value{color: #333333;}
.head {
i {
display: inline-block;
border-radius: 50%;
width: 11 * @toVw;
height: 11 * @toVw;
}
padding: 13 * @toVw;
background: white;
border-bottom: 1px solid #e2e2e2;
color: #666666;
font-size: 14 * @toVw;
}
.now {
i {
background: #60adf0;
}
}
.item {
margin-top: 10px;
}
.next {
i {
background: #ffd454;
}
}
.content {
background: white;
padding: 13 * @toVw 0 13 * @toVw 33 * @toVw;
.top {
line-height: 28 * @toVw;
color: #333333;
font-weight: bold;
font-size: 17 * @toVw;
}
.bottom {
color: #666666;
font-size: 14 * @toVw;
line-height: 20 * @toVw;
}
.timeInfo {
display: flex;
.text {
color: #999999;
font-size: 12 * @toVw;
margin-left: 0;
line-height: 26 * @toVw;
}
.right {
margin-top: 43 * @toVw;
}
.van-button--info {
background: white;
width: 74 * @toVw;
color: #60adf0;
border-color: #60adf0;
}
}
}
.linebox {
background: white;
}
.line {
width: 100%;
display: block;
border-bottom: 1px solid #e2e2e2;
margin: 12 * @toVw 0;
}
.tip {
padding: 10 * @toVw 20 * @toVw;
color: #999999;
font-size: 12 * @toVw;
line-height: 23 * @toVw;
}
}
@media screen and (orientation: landscape) {
}
</style>