zhywpt-sp/applyCard/addAddress.vue

<template>
  <view class="form">
    <u-form label-width="120rpx" :model="state.formData" ref="uForm">
      <u-form-item label="收货人">
        <u-input
          placeholder="名字"
          :customStyle="btnGetCode"
          v-model="state.formData.consignee"
        />
      </u-form-item>
      <u-form-item label="手机号">
        <u-input
          placeholder="手机号"
          :customStyle="btnGetCode"
          type="number"
          v-model="state.formData.consigneeTel"
        />
      </u-form-item>
      <u-form-item label="所在地区">
        <u-input
          :customStyle="btnGetCode"
          type="select"
          :select-open="state.show"
          v-model="state.formData.region"
          placeholder="省 市 区"
          @click="state.show = true"
        ></u-input>
      </u-form-item>

      <u-form-item label="详细地址">
        <u-input
          placeholder="小区楼栋/乡村名称"
          :customStyle="textareaStyle"
          type="textarea"
          v-model="state.formData.address"
        />
      </u-form-item>
      <u-form-item label="邮政编码">
        <u-input
          placeholder="邮政编码"
          :customStyle="btnGetCode"
          v-model="state.formData.postalCode"
        />
      </u-form-item>
      <u-form-item label-width="240rpx" label="设置默认收货地址">
        <u-switch
          v-model="state.formData.defaultAddress"
          active-color="#25D8C9"
          :active-value="1"
          :inactive-value="2"
        ></u-switch>
      </u-form-item>
    </u-form>

    <view class="action">
      <button type="default" class="button" @click="savaHandle()">保存</button>
    </view>
    <u-picker
      mode="region"
      v-model="state.show"
      @confirm="regionConfirm"
    ></u-picker>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addOrEditAddressQuery } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { getItem, StorageKeys } from "@/utils/storage";
import { msg } from "@/utils/utils";
const btnGetCode = {
  background: "#F1F1F1",
  "border-radius": "20rpx",
  padding: "10rpx 20rpx",
  height: "40px",
};

const textareaStyle = {
  background: "#F1F1F1",
  "border-radius": "20rpx",
  padding: "20rpx 10rpx",
};

const state = reactive({
  formData: {
    consignee: "",
    consigneeTel: "",
    region: "",
    address: "",
    postalCode: "",
    defaultAddress: 2,
    openId: undefined,
    id: undefined,
  },
  show: false,
});
// 选择地区回调
const regionConfirm = (e: any) => {
  state.formData.region = e.province.name + e.city.name + e.area.name;
};

const savaHandle = () => {
  state.formData.openId = getItem(StorageKeys.OpenId);
  queryAddOrEditAddress(addOrEditAddressQuery, state.formData);
};
const submit = (e: any) => {
  console.log("提交内容", e);
  // const code = "IF01001202209060883" //请求编码
  // const options = {
  //     type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  //     data: e, //请求参数
  //     method: 'POST|GET', //提交方式(默认POST)
  //     showLoading: true, //是否显示加载中(默认显示)
  // }
  // request(code, options).then((res) => {
  // 	uni.showToast({
  // 		icon: 'none',
  // 		title: hint
  // 	})
  // })
};

/* 新增/编辑收货地址 */
const queryAddOrEditAddress = (code, data) => {
  const options = {
    type: 2,
    data: data,
    method: "POST",
    showLoading: true,
  };
  request(code, options)
    .then((res) => {
      msg("新增地址成功");
      uni.navigateBack({
        delta: 1,
      });
    })
    .catch((err) => {
      console.log(err);
    });
};

onLoad(() => {});
</script>

<style lang="scss" scoped>
.form {
  padding: 30rpx;
}

.action {
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 30rpx;

  .button {
    height: 80rpx;
    background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 80rpx;
  }
}

.white-action {
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 30rpx;

  .button {
    height: 80rpx;
    border-radius: 40rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
    font-size: 32rpx;
    font-weight: 400;
    color: #666666;
    line-height: 80rpx;
  }
}
</style>