uniAppXCX/pages/addressEdit/addressEdit.vue

<template>
  <view class="container">
    <uni-forms class="form" :rules="rules" ref="form" :modelValue="form" label-width="160rpx" label-align="right">
      <uni-forms-item label="姓名" required name="name">
        <uni-easyinput v-model="form.name" placeholder="请输入姓名" />
      </uni-forms-item>
      <uni-forms-item label="手机号" required name="tel">
        <uni-easyinput v-model="form.tel" placeholder="请输手机号" />
      </uni-forms-item>
      <uni-forms-item label="选择地址" required name="areaCode">
        <picker mode="region" @change="onchange">
          <!-- <uni-easyinput v-model="form.name" placeholder="请输入姓名" /> -->
          <view class="inputBox" v-if="form.areaCode">{{ form.province }}/{{ form.city }}/{{ form.county }}</view>
          <view class="inputBox" v-else>点击选择地址</view>
        </picker>
      </uni-forms-item>
      <uni-forms-item label="详细地址" required name="addressDetail">
        <uni-easyinput type="textarea" v-model="form.addressDetail" placeholder="请输详细地址" />
      </uni-forms-item>
      <uni-forms-item label="设为默认地址" required name="isDefault">
        <switch :checked="form.isDefault == 1" @change="switchChange" style="transform: scale(0.7)" />
      </uni-forms-item>
    </uni-forms>
    <view class="bottom">
      <button class="m_button" type="default" @click="save">保存</button>
    </view>
  </view>
</template>

<script>
import { addressSaveApi, addressDetailApi } from '@/api/address.js'
export default {
  data() {
    return {
      address: [],
      form: {
        id: null,
        areaCode: null,
        name: null, //姓名
        province: null, //省
        city: null, //市
        county: null, //县区
        addressDetail: null, //详细地址
        tel: null, //电话
        isDefault: 0,
      },
      rules: {
        name: {
          rules: [
            {
              required: true,
              errorMessage: '姓名不能为空',
            },
          ],
        },
        tel: {
          rules: [
            {
              required: true,
              errorMessage: '手机号不能为空',
            },
          ],
        },
        areaCode: {
          rules: [
            {
              required: true,
              errorMessage: '请选择地址',
            },
          ],
        },
        addressDetail: {
          rules: [
            {
              required: true,
              errorMessage: '详细地址不能为空',
            },
          ],
        },
      },
    }
  },
  onLoad(option) {
    console.log(option, 'option')
    if (option.id) {
      let params = {
        id: option.id,
      }
      addressDetailApi(params).then(res => {
        console.log(res, 'res')
        this.form = {
          ...res.data,
        }
      })
    }
  },
  onShow() {},
  methods: {
    onchange(value) {
      console.log(value, 'value')
      this.form.areaCode = value.detail.code[2]
      this.form.province = value.detail.value[0]

      if (value.detail.value[0] == value.detail.value[1]) {
        this.form.city = '市辖区'
      } else {
        this.form.city = value.detail.value[1]
      }
      this.form.county = value.detail.value[2]
    },
    switchChange(value) {
      console.log(value, 'value')
      if (value.detail.value) {
        this.form.isDefault = 1
      } else {
        this.form.isDefault = 0
      }
    },
    save() {
      let _this = this
      console.log(this.form, 'this.form')
      this.$refs.form
        .validate()
        .then(val => {
          addressSaveApi(this.form).then(res => {
            console.log(res, '提交新增地址')
            wx.redirectTo({
              url: '/pages/addressManage/addressManage',
            })
            wx.showToast({
              title: '保存成功',
            })
          })
        })
        .catch(err => {
          console.log('err', err)
        })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #fff;
  padding: 40rpx;

  .form {
    margin-top: 40rpx;
  }

  .inputBox {
    border: 2rpx solid #f0f0f0;
    border-radius: 8rpx;
    height: 70rpx;
    line-height: 70rpx;
    padding-left: 20rpx;
    color: #333;
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  padding: 40rpx 0;
  text-align: center;
  width: calc(100% - 80rpx);

  .m_button {
    height: 72rpx;
    width: 40vw;
    line-height: 72rpx;
    border-radius: 36rpx;
    font-size: 26rpx;
  }
}
</style>