applet/pages/user/address/addEditAddress.vue

<template>
  <view class="container">
    <uv-navbar title="添加收货地址" placeholder autoBack></uv-navbar>
    <form @submit="formSubmit">
      <view class="u-bg-fff">
        <view class="u-plr30">
          <view class="v-flex-center border v-border-one-one ht104">
            <view class="wt140 u-font28 u-1A1A1A">收货人：</view>
            <input
              class="u-ml10"
              maxlength="8"
              name="receiverName"
              :value="dataform.receiverName"
              placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
              placeholder="请填写收货人姓名"
            />
          </view>
          <view class="v-flex-center border v-border-one-one ht104">
            <view class="wt140 u-font28 u-1A1A1A">手机号码：</view>
            <input
              class="u-ml10"
              type="number"
              name="receiverPhone"
              maxlength="11"
              :value="dataform.receiverPhone"
              placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
              placeholder="请输入手机号码"
            />
          </view>

          <view
            class="v-flex-center border u-border-one-one ht104"
            @click="pickerRef.open()"
          >
            <view class="wt140 u-font28 u-1A1A1A">所在地区：</view>
            <input
              class="u-ml10"
              placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
              placeholder="请选择地区"
              disabled
              :value="
                dataform.provinceName +
                '' +
                dataform.cityName +
                '' +
                dataform.areaName
              "
            />
            <image
              class="tiaozhuan u-ml25"
              :src="$handleImageUrl('/czd/tiaozhuan.png')"
              mode=""
            ></image>
          </view>

          <view class="address-detail-container">
            <view class="wt140 u-font28 u-1A1A1A">详细地址：</view>
            <textarea
              class="address-textarea"
              maxlength="50"
              name="detailAddress"
              placeholder-style="color: #d9d9d9;font-weight: 400;font-size: 26rpx; "
              v-model="dataform.detailAddress"
              placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元室等"
            ></textarea>
          </view>
        </view>
      </view>
      <view class="default border u-mt20 u-bg-fff u-flex-center-sb">
        <view>设为默认收货地址</view>
        <view>
          <switch
            @change="isDefault"
            color="#FA6138"
            :checked="dataform.defaultStatus"
            style="transform: scale(0.7)"
          ></switch>
        </view>
      </view>

      <view class="u-plr30 mt104">
        <button class="u-btn-two" form-type="submit">保存</button>
      </view>
    </form>

    <!-- 地区选择 -->
    <RegionSelection ref="pickerRef" @confirm="areaConfirm"/>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  useraddressAdd_Api,
  useraddressEdit_Api,
  useraddressInfo_Api,
} from "@/api/userInfo.js";
import $mConfig from "@/config/global.config";
const pickerRef = ref(null);
const dataform = ref({
  receiverName: "", //收货人姓名
  receiverPhone: "", //联系电话
  provinceName: "", //省的名称
  provinceCode: "", //省编号
  cityCode: "", //市编号
  cityName: "", //市名称
  areaName: "", //区名称
  areaCode: "", //区编号
  detailAddress: "", //详细地址
  defaultStatus: false, //是否是默认
});

// 地区选择器确认事件
const areaConfirm = (e) => {
  dataform.value = {
    ...dataform.value,
    ...e,
  }
};

const formSubmit = (e) => {
  let target = e.detail.value;
  if (!target.receiverName) {
    uni.$uv.toast("请输入收货人姓名");
    return false;
  }
  if (!target.receiverPhone) {
    uni.$uv.toast("请输入联系电话");
    return false;
  }
  if (!target.receiverPhone.match($mConfig.telRegex)) {
    uni.$uv.toast("请输入正确手机号");
    return false;
  }
  if (!dataform.value.provinceCode) {
    uni.$uv.toast("请选择省市区");
    return false;
  }
  if (!target.detailAddress) {
    uni.$uv.toast("请输入详细地址");
    return false;
  }
  dataform.value.receiverName = target.receiverName;
  dataform.value.receiverPhone = target.receiverPhone;
  dataform.value.detailAddress = target.detailAddress;
  // console.log(" this.dataform = ", dataform.value);
  let url = dataform.value.id ? useraddressEdit_Api : useraddressAdd_Api;
  uni.showLoading({
    title: "提交中",
    mask: true,
  });
  url(dataform.value)
    .then((res) => {
      uni.hideLoading();
      if (res.code == 200) {
        uni.showToast({
          title: dataform.value.id ? "修改成功" : "添加成功",
          icon: "none",
          duration: 3000,
          success() {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          },
        });
      }
    })
    .catch((err) => {
      // uni.hideLoading();
      console.log(err);
    });
};
// 是否设置默认地址
const isDefault = (e) => {
  dataform.value.defaultStatus = e.detail.value;
};

onLoad((options) => {
  if (options.id) {
    useraddressInfo_Api(options.id).then(async (res) => {
      if (res.code == 200) {
        dataform.value = res.data;
      }
    });
  }
});
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.container {
  .u-bg-fff {
    background-color: #fff;
    margin-top: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .u-plr30 {
    padding: 0 30rpx;
  }

  .v-flex-center {
    display: flex;
    align-items: center;
  }

  .border {
    border-bottom: 1rpx solid #e7e7e7;
  }

  .v-border-one-one {
    &:last-child {
      border-bottom: none;
    }
  }

  .ht104 {
    height: 104rpx;
    line-height: 104rpx;
  }

  .ht132 {
    height: 132rpx;
    padding: 20rpx 0;
  }

  .wt140 {
    width: 140rpx;
    flex-shrink: 0;
  }

  .u-font28 {
    font-size: 28rpx;
  }

  .u-1A1A1A {
    color: #1a1a1a;
  }

  .u-ml10 {
    margin-left: 10rpx;
  }

  .u-ml25 {
    margin-left: 25rpx;
  }

  .tiaozhuan {
    width: 25rpx;
    height: 25rpx;
  }

  input {
    width: calc(100% - 175rpx);
    height: 100%;
    font-size: 28rpx;
    color: #1a1a1a;
  }

  textarea {
    width: calc(100% - 175rpx);
    height: 90rpx;
    font-size: 28rpx;
    color: #1a1a1a;
    padding: 10rpx;
    box-sizing: border-box;
    background: #f8f8f8;
    border-radius: 10rpx;
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 28rpx;
    font-style: normal;
    color: #999;
  }

  .default {
    padding: 38rpx 30rpx;
    background-color: #fff;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #1a1a1a;
  }

  .u-mt20 {
    margin-top: 20rpx;
  }

  .u-flex-center-sb {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mt104 {
    margin-top: 104rpx;
    padding: 0 30rpx;
  }

  .u-btn-two {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
    // background: linear-gradient(90deg, #ff6b35, #fa6138);
    background: #e93534;
    box-shadow: 0 10rpx 20rpx rgba(250, 97, 56, 0.3);
  }

  .address-detail-container {
    padding: 20rpx 0;
    display: flex;
    align-items: flex-start;

    .wt140 {
      padding-top: 10rpx;
    }
  }

  .address-textarea {
    flex: 1;
    // margin-left: 10rpx;
    height: 160rpx;
    padding: 10rpx 0;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #1a1a1a;
    line-height: 1.4;
  }
}
</style>