|
@@ -1,265 +0,0 @@
|
|
-<template>
|
|
|
|
- <a-modal
|
|
|
|
- centered
|
|
|
|
- class="editAddress-modal"
|
|
|
|
- :footer="null"
|
|
|
|
- :maskClosable="false"
|
|
|
|
- title="收货地址"
|
|
|
|
- v-model="isShow"
|
|
|
|
- @cancel="isShow=false"
|
|
|
|
- :width="800">
|
|
|
|
- <a-spin :spinning="spinning" tip="Loading...">
|
|
|
|
- <a-form-model
|
|
|
|
- id="editAddress-form"
|
|
|
|
- ref="ruleForm"
|
|
|
|
- :model="form"
|
|
|
|
- :rules="rules"
|
|
|
|
- :label-col="formItemLayout.labelCol"
|
|
|
|
- :wrapper-col="formItemLayout.wrapperCol"
|
|
|
|
- >
|
|
|
|
- <a-form-model-item label="收货人" prop="consigneeName">
|
|
|
|
- <a-input
|
|
|
|
- id="editAddress-name"
|
|
|
|
- :maxLength="30"
|
|
|
|
- v-model.trim="form.consigneeName"
|
|
|
|
- placeholder="请输入收货人(最多30个字符)"
|
|
|
|
- allowClear />
|
|
|
|
- </a-form-model-item>
|
|
|
|
- <a-form-model-item label="联系电话" prop="consigneeTel">
|
|
|
|
- <a-input
|
|
|
|
- id="editAddress-phone"
|
|
|
|
- :maxLength="30"
|
|
|
|
- v-model.trim="form.consigneeTel"
|
|
|
|
- placeholder="请输入联系电话(最多30个字符)"
|
|
|
|
- allowClear />
|
|
|
|
- </a-form-model-item>
|
|
|
|
- <a-form-model-item label="所在地区" required style="margin: 0;">
|
|
|
|
- <a-row :gutter="20">
|
|
|
|
- <!-- 所在地区 -->
|
|
|
|
- <a-col span="8">
|
|
|
|
- <a-form-model-item prop="provinceSn">
|
|
|
|
- <a-select id="editAddress-provinceSn" allowClear @change="getCityList" v-model="form.provinceSn" placeholder="请选择省">
|
|
|
|
- <a-select-option v-for="item in addrProvinceList" :value="item.areaSn" :key="item.areaSn + 'a'">{{ item.name }}</a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col span="8">
|
|
|
|
- <a-form-model-item prop="citySn">
|
|
|
|
- <a-select id="editAddress-citySn" allowClear @change="getAreaList" v-model="form.citySn" placeholder="请选择市">
|
|
|
|
- <a-select-option v-for="item in addrCityList" :value="item.areaSn" :key="item.areaSn + 'b'">{{ item.name }}</a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- </a-col>
|
|
|
|
- <a-col span="8">
|
|
|
|
- <a-form-model-item prop="countySn">
|
|
|
|
- <a-select id="editAddress-countySn" allowClear @change="areaCharged" v-model="form.countySn" placeholder="请选择区/县">
|
|
|
|
- <a-select-option v-for="item in addrDistrictList" :value="item.areaSn" :key="item.areaSn + 'c'">{{ item.name }}</a-select-option>
|
|
|
|
- </a-select>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- <a-form-model-item label="详细地址" prop="addr">
|
|
|
|
- <a-input
|
|
|
|
- id="editAddress-address"
|
|
|
|
- :maxLength="60"
|
|
|
|
- v-model.trim="form.addr"
|
|
|
|
- placeholder="请输入详细地址(最多60个字符)"
|
|
|
|
- allowClear />
|
|
|
|
- </a-form-model-item>
|
|
|
|
- <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
|
|
|
|
- <a-button type="primary" @click="handleSubmit" id="editAddress-btn-submit">保存</a-button>
|
|
|
|
- <a-button @click="isShow=false" style="margin-left: 15px" id="editAddress-btn-back">返回</a-button>
|
|
|
|
- </a-form-model-item>
|
|
|
|
- </a-form-model>
|
|
|
|
- </a-spin>
|
|
|
|
- </a-modal>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
-import { commonMixin } from '@/utils/mixin'
|
|
|
|
-import { getArea } from '@/api/data'
|
|
|
|
-import { shippingAddressSave } from '@/api/shippingAddress.js'
|
|
|
|
-export default {
|
|
|
|
- name: 'EditAddressModal',
|
|
|
|
- mixins: [commonMixin],
|
|
|
|
- props: {
|
|
|
|
- openModal: { // 弹框显示状态
|
|
|
|
- type: Boolean,
|
|
|
|
- default: false
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- data () {
|
|
|
|
- return {
|
|
|
|
- spinning: false,
|
|
|
|
- isShow: this.openModal, // 是否打开弹框
|
|
|
|
- isEdit: false,
|
|
|
|
- formItemLayout: {
|
|
|
|
- labelCol: { span: 4 },
|
|
|
|
- wrapperCol: { span: 18 }
|
|
|
|
- },
|
|
|
|
- form: {
|
|
|
|
- consigneeName: '',
|
|
|
|
- consigneeTel: '',
|
|
|
|
- provinceSn: undefined,
|
|
|
|
- provinceName: '',
|
|
|
|
- citySn: undefined,
|
|
|
|
- cityName: '',
|
|
|
|
- countySn: undefined,
|
|
|
|
- countyName: '',
|
|
|
|
- addr: ''
|
|
|
|
- },
|
|
|
|
- rules: {
|
|
|
|
- consigneeName: [
|
|
|
|
- { required: true, message: '请输入收货人', trigger: 'change' }
|
|
|
|
- ],
|
|
|
|
- consigneeTel: [
|
|
|
|
- { required: true, message: '请输入联系电话', trigger: 'change' }
|
|
|
|
- ],
|
|
|
|
- provinceSn: [
|
|
|
|
- { required: true, message: '请选择省', trigger: 'change' }
|
|
|
|
- ],
|
|
|
|
- citySn: [
|
|
|
|
- { required: true, message: '请选择市', trigger: 'change' }
|
|
|
|
- ],
|
|
|
|
- countySn: [
|
|
|
|
- { required: true, message: '请选择区', trigger: 'change' }
|
|
|
|
- ],
|
|
|
|
- addr: [
|
|
|
|
- { required: true, message: '请输入详细地址', trigger: 'change' }
|
|
|
|
- ]
|
|
|
|
- },
|
|
|
|
- addrProvinceList: [], // 省下拉
|
|
|
|
- addrCityList: [], // 市下拉
|
|
|
|
- addrDistrictList: [] // 区下拉
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- // 保存
|
|
|
|
- handleSubmit () {
|
|
|
|
- this.$refs.ruleForm.validate(valid => {
|
|
|
|
- if (valid) {
|
|
|
|
- this.spinning = true
|
|
|
|
- shippingAddressSave(this.form).then(res => {
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- this.isShow = false
|
|
|
|
- this.$emit('ok')
|
|
|
|
- this.$message.success(res.message)
|
|
|
|
- this.spinning = false
|
|
|
|
- } else {
|
|
|
|
- this.spinning = false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- } else {
|
|
|
|
- console.log('error submit!!')
|
|
|
|
- return false
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- // 获取城市列表
|
|
|
|
- getCityList (val) {
|
|
|
|
- this.addrCityList = []
|
|
|
|
- this.addrDistrictList = []
|
|
|
|
- this.form.citySn = undefined
|
|
|
|
- this.form.countySn = undefined
|
|
|
|
- if (val) {
|
|
|
|
- this.getArea('city', val)
|
|
|
|
- this.form.provinceName = this.addrProvinceList.find(item => item.areaSn == val).name
|
|
|
|
- } else {
|
|
|
|
- this.form.provinceName = ''
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 获取区县列表
|
|
|
|
- getAreaList (val) {
|
|
|
|
- this.addrDistrictList = []
|
|
|
|
- this.form.countySn = undefined
|
|
|
|
- if (val) {
|
|
|
|
- this.getArea('district', val)
|
|
|
|
- this.form.cityName = this.addrCityList.find(item => item.areaSn == val).name
|
|
|
|
- } else {
|
|
|
|
- this.form.cityName = ''
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 区县变更
|
|
|
|
- areaCharged (val) {
|
|
|
|
- if (val) {
|
|
|
|
- this.form.countyName = this.addrDistrictList.find(item => item.areaSn == val).name
|
|
|
|
- } else {
|
|
|
|
- this.form.countyName = ''
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // 省/市/区
|
|
|
|
- getArea (leve, sn) {
|
|
|
|
- let params
|
|
|
|
- if (leve == 'province') {
|
|
|
|
- params = { type: '2' }
|
|
|
|
- } else {
|
|
|
|
- params = { parentId: sn, type: leve == 'city' ? '3' : '4' }
|
|
|
|
- }
|
|
|
|
- getArea(params).then(res => {
|
|
|
|
- if (res.status == 200) {
|
|
|
|
- if (leve == 'province') {
|
|
|
|
- this.addrProvinceList = res.data || []
|
|
|
|
- } else if (leve == 'city') {
|
|
|
|
- this.addrCityList = res.data || []
|
|
|
|
- } else if (leve == 'district') {
|
|
|
|
- this.addrDistrictList = res.data || []
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- if (leve == 'province') {
|
|
|
|
- this.addrProvinceList = []
|
|
|
|
- } else if (leve == 'city') {
|
|
|
|
- this.addrCityList = []
|
|
|
|
- } else if (leve == 'district') {
|
|
|
|
- this.addrDistrictList = []
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- // 编辑数据
|
|
|
|
- setData (data) {
|
|
|
|
- this.isEdit = true
|
|
|
|
- Promise.all([getArea({ type: '2' }), getArea({ parentId: data.provinceSn, type: '3' }), getArea({ parentId: data.citySn, type: '4' })]).then(res => {
|
|
|
|
- console.log(res)
|
|
|
|
- this.addrProvinceList = res[0].data
|
|
|
|
- const provinceName = this.addrProvinceList.find(item => item.id == data.provinceSn)
|
|
|
|
- if (provinceName && provinceName.name) {
|
|
|
|
- this.form.provinceName = provinceName.name
|
|
|
|
- }
|
|
|
|
- this.addrCityList = res[1].data
|
|
|
|
- const cityName = this.addrCityList.find(item => item.id == data.citySn)
|
|
|
|
- if (cityName && cityName.name) {
|
|
|
|
- this.form.cityName = cityName.name
|
|
|
|
- }
|
|
|
|
- this.addrDistrictList = res[2].data
|
|
|
|
- const countyName = this.addrDistrictList.find(item => item.id == data.countySn)
|
|
|
|
- if (countyName && countyName.name) {
|
|
|
|
- this.form.countyName = countyName.name
|
|
|
|
- }
|
|
|
|
- this.form = Object.assign({}, this.form, data)
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- // 父页面传过来的弹框状态
|
|
|
|
- openModal (newValue, oldValue) {
|
|
|
|
- this.isShow = newValue
|
|
|
|
- },
|
|
|
|
- // 重定义的弹框状态
|
|
|
|
- isShow (newValue, oldValue) {
|
|
|
|
- if (!newValue) {
|
|
|
|
- this.$emit('close')
|
|
|
|
- this.$refs.ruleForm.resetFields()
|
|
|
|
- this.addrCityList = []
|
|
|
|
- this.addrDistrictList = []
|
|
|
|
- this.isEdit = false
|
|
|
|
- delete this.form.id
|
|
|
|
- } else {
|
|
|
|
- if (!this.isEdit) {
|
|
|
|
- this.getArea('province')
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-</script>
|
|
|