hlm_pl_mall_store/pages/seller/address/AddressForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<seller-base :show="false">
	<view class="div container">
		<view class="div common-header-wrap">
			<view :style="'height:'+navHeight+'px'"></view>
			<view class="common-header-holder"></view>
			<view class="common-header-fixed">
			<title-header />
			<uni-nav-bar :title="getTitle" class="common-header" left-icon="back" @clickLeft="goBack">
			</uni-nav-bar>
		</view>
		</view>
		<view class="div main-content">
    <flex-line class="field-line" :show-border="true"><text class="span field-name">联系人</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="address_info.seller_name" /></view></flex-line>
		<flex-line class="field-line" :show-border="true"><text class="span field-name">手机</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="address_info.daddress_telphone" /></view></flex-line>
    <flex-line :show-border="true">
    <text class="span">地区</text>
    <view class="div" @click="onRegion" slot="right">
				<text class="span">{{address_info.area_info}}</text>
				<text class="span iconfont right-arrow">&#xe600;</text>
    </view>
    </flex-line>
		<flex-line class="field-line" :show-border="true"><text class="span field-name">地址</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="address_info.daddress_detail" /></view></flex-line>
    <flex-line :show-border="true"><text class="span line-name">默认地址</text><view class="div" slot="right"><switch @change="switchChange" :checked="!!address_info.daddress_isdefault"></switch></view></flex-line>
		<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">{{getSumitTitle}}</view></view>
    </view>
		<region-picker ref="picker" v-on:onConfirm="onPickerConfirm"></region-picker>
	</view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'

import RegionPicker from '../../RegionPicker'
import { getAddressInfo, editAddress } from '../../../api/sellerAddress'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    RegionPicker
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isAddMode () {
      let mode = this.action
      // add: 添加地址，edit: 编辑地址
      if (mode === 'add') {
        return true
      } else {
        return false
      }
    },
    getTitle () {
      if (this.isAddMode) {
        return '新增地址'
      } else {
        return '修改发货地址'
      }
    },
    getSumitTitle () {
      let isFromCheckout = this.isFromCheckout
      if (isFromCheckout) {
        return '保存并使用'
      } else {
        return '保存'
      }
    }
  },
  data(){
    return {
      navHeight: 0,
      popMap: false,
      address_id: 0,
	  action:'',
	  isFromCheckout:'',
      address_info: {
        seller_name: '',
        daddress_telphone: '',
        daddress_detail: '',
        daddress_isdefault: true,
        area_info: '请选择地区',
        city_id: 0,
        area_id: 0
      }
    }
  },
  onLoad: function (option) {
	  this.action = option.action
    if (this.action!='add') {
      this.address_id = option.address_id
	  this.isFromCheckout = option.isFromCheckout
	  this.goBackLevel = option.goBackLevel ? parseInt(option.goBackLevel) : 1
      getAddressInfo(this.address_id).then(res => {
        this.address_info = res.result.address_info
        if (res.result.address_info.daddress_isdefault === '1') {
          this.address_info.daddress_isdefault = true
        } else {
          this.address_info.daddress_isdefault = false
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods: {
	switchChange(e){
	  this.address_info.daddress_isdefault=e.detail.value
	},
    goBack () {
      uni.navigateBack({delta:1})
    },
    submit () {
      if (this.address_info.seller_name === '') {
		uni.showToast({icon:'none',title: '请填写联系人姓名'})
        return
      }
      if (this.address_info.seller_name.length < 2 || this.address_info.seller_name.length > 15) {
		uni.showToast({icon:'none',title: '2-15个字符限制'})
        return
      }
      if (this.address_info.daddress_telphone === '') {
		uni.showToast({icon:'none',title: '请填写手机号码'})
        return
      }

      if (this.address_info.area_id === 0 || this.address_info.area_id === undefined) {
		uni.showToast({icon:'none',title: '请选择所在地区'})
        return
      }
      if (this.address_info.daddress_detail === '') {
		uni.showToast({icon:'none',title: '请填写详细地址'})
        return
      }
      uni.showLoading({ title: '加载中' })
      editAddress(this.address_info, this.isAddMode ? 0 : this.address_id).then(
        (response) => {
          uni.hideLoading()
          this.updateSelectedAddress()
        }, (error) => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
    },
    onRegion (picker, values) {
      this.$refs.picker.show()
    },
    onPickerConfirm (values) {
      this.address_info.area_info = this.getRegionStr(values)

      this.address_info.area_id = values[2].area_id
      this.address_info.city_id = values[1].area_id
    },
    getRegionStr (values) {
      let title = ''
      for (let i = 0; i < values.length; i++) {
        const element = values[i]
        if (i !== 0) {
          title = title + ' ' + element.area_name
        } else {
          title = title + element.area_name
        }
      }
      return title
    },
    updateSelectedAddress () {
      let isFromCheckout = this.isFromCheckout
      let goBackLevel = this.goBackLevel ? parseInt(this.goBackLevel) : 1
      if (isFromCheckout) {
        uni.navigateBack({delta:goBackLevel})
      } else {
        this.goBack()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main-content{background: #fff;padding:0 $pageSpace}
	.right-arrow{transform: rotate(-90deg);color:#ddd;font-size:$fontSize;display: inline-block;}
	.input-wrap{position: relative;
		.i{position: absolute;right:0;top:0;line-height: 2.4rem;display: block;width:2rem;text-align: center;font-size:$h1}
	}
</style>