uniapp-im-shop/pages/address/add.vue

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue'
  import { PHONE_REGEX } from '@/utils/validate'
  import {
    addUserAddress,
    updateUserAddress,
    getUserAddressDetail
  } from '@/api'
  import { navigateBack } from '@/utils/router'

  const props = defineProps({
    type: {
      type: String,
      default: 'add'
    }
  })

  const formRef = ref(null)
  const formData = reactive({
    id: '',
    name: '',
    phone: '',
    address: '',
    /** 门牌号 */
    houseNum: '',
    /** 是否默认地址 */
    defaultAddress: false
  })
  const rules = {
    name: {
      rules: [
        {
          required: true,
          errorMessage: '收件人不能为空'
        }
      ]
    },
    phone: {
      rules: [
        {
          required: true,
          errorMessage: '手机号不能为空'
        },
        {
          validateFunction: (rule, value, data, callback) => {
            if (!PHONE_REGEX.test(value)) {
              callback('手机号格式不正确')
              return false
            }
            return true
          }
        }
      ]
    },
    houseNum: {
      rules: [
        {
          required: true,
          errorMessage: '门牌号不能为空'
        }
      ]
    }
  }

  const submitForm = () => {
    formRef.value.validate().then(async () => {
      const data = {
        houseNum: formData.houseNum,
        name: formData.name,
        phone: formData.phone,
        address: formData.address,
        defaultAddress: formData.defaultAddress ? 1 : 0
      }
      // updateUserAddress
      if (props.type === 'edit') {
        await updateUserAddress({ id: formData.id, ...data })
      } else {
        await addUserAddress(data)
      }
      navigateBack()
    })
  }

  const getData = async id => {
    const { data } = await getUserAddressDetail(id)
    formData.id = data.id
    formData.name = data.name
    formData.phone = data.phone
    formData.houseNum = data.houseNum
    formData.address = data.address
    formData.defaultAddress = data.defaultAddress == 1
  }

  onLoad(e => {
    if (props.type === 'edit') {
      getData(e.id)
    }
  })
</script>

<template>
  <view class="address-add">
    <view class="address-box">
      <view class="top-name">
        <text class="left-name">地址信息</text>
        <view
          class="right-box"
          @click="formData.defaultAddress = !formData.defaultAddress"
        >
          <view class="check">
            <image
              v-show="formData.defaultAddress"
              src="/static/images/public/check-to-confirm.png"
              mode="aspectFit"
              class="check-icon"
            ></image>
          </view>
          <text>默认收货地址</text>
        </view>
      </view>
      <!-- 表单 -->
      <uni-forms
        ref="formRef"
        :rules="rules"
        :modelValue="formData"
        label-width="150rpx"
        class="address-form"
      >
        <uni-forms-item label="收件人" required name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder="请输入收件人"
          />
        </uni-forms-item>
        <uni-forms-item label="手机号" required name="phone">
          <uni-easyinput
            v-model="formData.phone"
            placeholder="请输入手机号"
          />
        </uni-forms-item>
        <uni-forms-item label="门牌号" required name="houseNum">
          <uni-easyinput
            v-model="formData.houseNum"
            placeholder="请输入门牌号"
          />
        </uni-forms-item>
        <uni-forms-item label="详细地址" name="address">
          <uni-easyinput
            type="textarea"
            v-model="formData.address"
            placeholder="请输入详细地址"
          />
        </uni-forms-item>
      </uni-forms>
    </view>

    <!-- 底部按钮 -->
    <bottom-view>
      <cb-button @click="submitForm">
        {{ props.type == 'edit' ? '修改' : '添加' }}
      </cb-button>
    </bottom-view>
  </view>
</template>

<style lang="scss" scoped>
  page {
    background: #f9f9f9;
  }
  .address-add {
    padding: 34rpx 32rpx;
    .address-box {
      padding: 34rpx 32rpx;
      border-radius: 32rpx;
      background: #ffffff;
      .top-name {
        margin-bottom: 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        text-align: left;
        font-style: normal;
        text-transform: none;
        .left-name {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }
      }

      .right-box {
        display: flex;
        align-items: center;

        .check {
          width: 30rpx;
          height: 30rpx;
          border-radius: 28rpx;
          border: 2rpx solid #d9d9d9;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10rpx;
          .check-icon {
            width: 34rpx;
            height: 34rpx;
          }
        }

        text {
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
        }
      }
    }

    .address-form {
      :deep(.uni-easyinput__content) {
        border-radius: 16rpx;
      }
    }
  }
</style>