<template> <div class="addressEdit"> <div> <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="所在地区" 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> </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, modifyAddressApi } from "../../service/api"; import addressList from "../address-picker/addr"; import { Toast } from "vant"; import { Field, Cell } from "mint-ui"; export default { name: "", components: { MyAddress, [Cell.name]: Cell, [Field.name]: Field }, data() { return { addressData: null, receiveName: "", receiveMobile: "", addressDetail: "", showAddressPicker: false, addressArea: "", addressAreaCode: "", address: "", deliverId: "" }; }, mounted() { if (this.$route.params && this.$route.params.data) { let addressData = JSON.parse(this.$route.params.data); this.addressData = addressData; this.receiveName = addressData.receive_name; this.receiveMobile = addressData.receive_mobile; this.address = addressData.address; this.deliverId = addressData.id; this.addressArea = addressData.province_name + "-" + addressData.city_name + "-" + addressData.area_name; } this.getAddressCode(); }, methods: { closeAdd() { this.$emit("closeAdd", false); }, buttonClick(buttonName) { this.$sa.track("buttonClick", { tabTitle: "商品", moduleTitle: "地址填写", buttonType: "功能", buttonName: buttonName }); }, getAddressCode() { let provinceName = this.addressData.province_name; let cityName = this.addressData.city_name; let areaName = this.addressData.area_name; let provinceCode, cityCode, areaCode; for (let i = 0, len = addressList.length; i < len; i++) { let item = addressList[i]; if (cityName == item.label) { provinceCode = item.value; let secondArr = item.children; for (let j = 0, long = secondArr.length; j < long; j++) { let secondItem = secondArr[j]; if (cityName == secondItem.label) { cityCode = secondItem.value; let thirdArr = secondItem.children; for (let k = 0, l = thirdArr.length; k < l; k++) { if ((areaName = thirdArr[k].label)) { areaCode = thirdArr[k].value; break; } } } } } } this.addressAreaCode = provinceCode + "-" + cityCode + "-" + areaCode; }, 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.deliver_id = this.deliverId; 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]; modifyAddressApi(param) .then(res => { this.closeAdd(); Toast("修改成功"); this.$router.replace({ name: "Address" }); }) .catch(error => { console.log(error); }); }, 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; } } }; </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>