wzj-boot/mini-app/src/pages/mall/user/user-address.wpy

<style lang="less">


.address-item {
  border: #eeeeee 1px solid;
  border-radius: 20px;
  width: 660rpx;
  margin-top: 20px;
  background-color: white;
  box-shadow: 4px 4px 10px #eeeeee;
  padding: 10px 10px 0px 10px;
  font-weight: bold;

  display: flex;
  flex-direction: column;
  //align-items: center;
}


input {

  margin: 12px 15px;
  font-size: 14px;
}

.cell-title {
  padding: 10px 16px;
  font-weight: bold;
}

.cell {
  margin-top: 10px;
}

.cell-input {
  display: flex;
  justify-content: space-between;
  margin-right: 15px;
}

.cell-item {
  margin-left: 22px;
  margin-top: 12px;
  width: 300rpx;
}

</style>
<template>

  <nav-bar :title="title" />
  <div class="container" :style=" { 'margin-top' : (statusBarHeight + 46  ) + 'px' }">


    <div class="address-item">
      <div class="cell">
        <span class="cell-title">选择收货地区</span>
        <radio-group bindchange="onChangeCountry" style="display: flex;">
          <div class="cell-item" v-for="(item,index) in countryTypes">
            <radio :value="item" :checked="item === radio" color="#AC3016">{{item}}</radio>
            <span>{{item}} </span>
          </div>
        </radio-group>

        <van-divider customStyle="margin: 10px 5px;" />
      </div>

      <div v-if="radio=== '国内'" class="cell">
        <span class="cell-title">收货地址（省市区）</span>
        <div style="display: flex;width: 100%;">
          <picker mode="region" v-model="form.region" bindchange="bindRegionChange" style="width: 700rpx;">
            <van-field
              :value="form.region"
              required
              center
              clearable
              readonly
              placeholder="请选择"
              border="{{ false }}"
            />
          </picker>
          <van-icon name="arrow" color="#dddddd" />
        </div>
        <van-divider customStyle="margin: 0 5px;" />
      </div>

      <div class="cell">
        <span class="cell-title">详细地址</span>
        <van-field
          :value="form.address"
          required
          center
          clearable
          type="textarea"
          autosize
          placeholder="请输入详细地址"
          bind:change="onChangeAddress"
        />
        <van-divider customStyle="margin: 0 5px;" />
      </div>
      <div class="cell">
        <span class="cell-title">收货人手机号码</span>
        <van-field
          :value="form.mobile"
          required
          center
          clearable
          type="number"
          placeholder="请输入手机联系电话号码"
          bind:change="onChangeMobile"
        />
        <van-divider customStyle="margin: 0 5px;" />
      </div>
      <div class="cell">
        <span class="cell-title">收货人姓名</span>
        <van-field
          :value="form.name"
          required
          center
          clearable
          placeholder="请输入收货人姓名"
          bind:change="onChangeName"
        />
        <van-divider customStyle="margin: 0 5px;" />
      </div>


      <van-button round type="info" size="large" style="margin: 20px;" @tap="onSubmit">保存</van-button>
    </div>


  </div>
</template>

<script>
import wepy from '@wepy/core'
import store from '@/store'

import { mapActions, mapState } from '@wepy/x'
import defaultMix from '../../../mixins/defaultMix'
import appManager from '../../../appManager'
import userApis from '../../../apis/userApis'
import addressApis from '../../../apis/addressApis'

wepy.page({
  store,
  hooks: {},
  data: {
    title: '添加地址',
    // countryTypes: ['国内', '海外'],
    countryTypes: ['国内'],
    form: {
      id: '',
      region: ['宁夏回族自治区', '银川市', '西夏区'],
      address: '',
      mobile: '',
      name: ''
    },
    radio: '国内'

  },
  mixins: [defaultMix],
  computed: {
    ...mapState({
      'imageDefine': state => state.imageDefine,
      'user': state => state.user,
      'navDefine': state => state.navDefine,
      'userAddress': state => state.userAddress,
      'statusBarHeight': state => state.statusBarHeight
    })
  },
  methods: {
    bindRegionChange(e) {
      this.form.region = e.$wx.detail.value
    },
    onChangeCountry(e) {
      this.radio = e.$wx.detail.value
      if (this.radio === '海外') {
        this.form.region = ['海外']
      } else {
        this.form.region = ['宁夏回族自治区', '银川市', '西夏区']
      }
    },

    async onSubmit() {
      console.log(this.form)
      if (this.form.region.length < 1) {
        appManager.showToast('请选择收货地区!')
        return
      }

      if (!this.form.address) {
        appManager.showToast('请输入收货详细地址!')
        return
      }
      if (!this.form.mobile) {
        appManager.showToast('请输入收货人手机号码!')
        return
      }

      if (!(/^1[3|4|5|6|8][0-9]\d{4,8}$/.test(this.form.mobile))) {
        appManager.showToast('请输入正确的手机号码!')
        return
      }

      if (!this.form.name) {
        appManager.showToast('请输入收货人姓名!')
        return
      }

      let data = {}
      Object.assign(data, this.form)
      data.region = data.region.join(',')

      let r;

      if (!this.form.id) {
        r = await addressApis.createAddress(data)
      } else {
        r = await addressApis.editAddress(data)
      }

      if (r.code === 200) {
        this.navBack()
      } else {
        appManager.showToast('保存失败')
      }

      // TODO 提交
    },
    onChangeAddress(e) {
      this.form.address = e.$wx.detail
    },
    onChangeMobile(e) {
      this.form.mobile = e.$wx.detail
    },
    onChangeName(e) {
      this.form.name = e.$wx.detail
    }
  },

  onLoad(options) {
    if (options.id) {
      addressApis.getAddressById(options.id).then(r => {
        const item = r.data
        item.region = item.region.split(',')
        this.form = item
      })
      return
    }
    this.form.mobile = this.user.mobile
  },

  ready() {

  }
})
</script>
<config>
{
navigationBarTitleText: ''
}
</config>