NN2023021801/addons/dbapp/pagesUser/address/editAddress.vue

<script>
import api from '@/api'
export default {
  data() {
    return {
      type: '',
      area: [],
      showPopup: false,
      form: {
        name: '',
        mobile: '',
        province: '', // 省id
        county: '', // 区id
        city: '', // 市id
        area_text: '', // 省市区拼接
        remark: '', // 详细地址
        is_default: 0
      },
      rules: {
        name: { required: true, message: '请输入收货人', trigger: ['blur', 'change'] },
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^((\+|00)86)?1\d{10}$/,
            message: '请输入正确的手机号',
            trigger: ['blur']
          }
        ],
        area_text: { required: true, message: '请选择地区', trigger: ['blur', 'change'] },
        remark: { required: true, message: '请输入详细地址', trigger: ['blur', 'change'] }
      }
    }
  },
  watch: {
    area(v) {
      if (!Object.keys(v).length) return

      let str = ''
      v.forEach(item => (str += item.name))
      // 这里做一下判断是因为 编辑状态下，省市区名字未 分割到 area 数组
      if (str) this.form.area_text = str
    }
  },
  methods: {
    save() {
      // this.$refs.form1.validate().then(() => {
      api
        .saveAddress({
          ...this.form,
          province: this.area[0].id,
          county: this.area[1].id,
          city: this.area[2].id
        })
        .then(() => {
          uni.$emit('reloadAddressList')
          this.$common.back()
          this.$nextTick(() => {
            this.$common.toast(`${this.type === 'add' ? '新建' : '修改'}成功`)
          })
        })
      // })
    }
  },
  onLoad() {
    let { type, obj } = this.$store.state.params
    this.type = type
    if (Object.keys(obj).length) {
      this.form = JSON.parse(JSON.stringify(obj))
      this.area = [
        { id: this.form.province, name: '' },
        { id: this.form.county, name: '' },
        { id: this.form.city, name: '' }
      ]
    }

    uni.setNavigationBarTitle({
      title: type === 'add' ? '新建地址' : '编辑地址'
    })
  }
}
</script>

<template>
  <view class="m p-10">
    <view class="bg-white radius10 form">
      <u-form
        ref="form1"
        :model="form"
        :rules="rules"
        :labelStyle="{ fontSize: '28rpx', color: '#303133' }"
        labelAlign="left"
        errorType="toast"
      >
        <u-form-item prop="name" label="收货人" labelWidth="160rpx">
          <u-input
            v-model="form.name"
            border="none"
            placeholder="请输入收货人"
            fontSize="26rpx"
          ></u-input>
        </u-form-item>
        <u-form-item prop="mobile" label="手机号码" labelWidth="160rpx">
          <u-input
            v-model="form.mobile"
            border="none"
            placeholder="请输入手机号码"
            fontSize="26rpx"
          ></u-input>
        </u-form-item>
        <u-form-item
          prop="area_text"
          label="所在地区"
          labelWidth="160rpx"
          @click="showPopup = true"
        >
          <u-input
            disabled
            disabledColor="transparent"
            :value="form.area_text"
            border="none"
            placeholder="省市区县、乡镇等"
            fontSize="26rpx"
          ></u-input>
        </u-form-item>
        <u-form-item prop="remark">
          <view slot="label" class="form-label">详细地址</view>
          <u-textarea
            v-model="form.remark"
            placeholder="街道楼牌号等"
            border="none"
            height="50"
            confirmType="done"
          ></u-textarea>
        </u-form-item>
      </u-form>
    </view>
    <view class="bg-white radius10 mt-10 w flex pt-10 pb-10">
      <u-text text="默认地址" size="28rpx"></u-text>
      <u-switch
        v-model="form.is_default"
        :inactiveValue="0"
        :activeValue="1"
        activeColor="var(--theme)"
        size="20"
      ></u-switch>
    </view>

    <area-select :showPopup.sync="showPopup" :area.sync="area"></area-select>

    <u-button
      text="保存"
      color="var(--theme)"
      @click="save"
      shape="circle"
      customStyle="width: 650rpx;height: 98rpx; position:fixed;bottom:100rpx;left:50%;transform:translate(-50%)"
    ></u-button>
  </view>
</template>

<style lang="scss" scoped>
.form {
  padding: 0 24rpx;

  .form-label {
    width: 80px;
    height: 40rpx;
    font-size: 28rpx;
    color: #303133;
  }
}

/deep/.u-textarea {
  padding: 4rpx 0 !important;
}
::v-deep .u-textarea {
  padding: 4rpx 0 !important;

  /* #ifdef MP-WEIXIN */
  transform: translate(-10rpx, -10rpx);
  /* #endif */
}

/deep/.u-textarea textarea,
::v-deep .u-textarea textarea {
  font-size: 26rpx !important;
}
</style>