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> -->
	  <view class="form-item forn-switch">
		  <label>设置默认收货地址</label>
		  <switch :checked="state.isDefault" color="#43a1e0" style="transform:scale(0.75)" @change="changeSwitch"></switch>
	  </view>
	  
    </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,addressToOrder } from "@/utils/network/api.js";
import { request } from "@/utils/network/request.js";
import { getItem, StorageKeys } from "@/utils/storage";
import { msg,checkStr} 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: '',
	orderId:'',
	whetherToMail:0,
  },
  show: false,
  isDefault: false,
});

//switch 事件
const changeSwitch = (e:any)=>{
	console.log(e);
	state.formData.defaultAddress = e.detail.value?1:2;
	console.log(state.formData);
};
// 选择地区回调
const regionConfirm = (e: any) => {
  state.formData.region = e.province.name + e.city.name + e.area.name;
};

const savaHandle = () => {
	if (!state.formData.consignee) {
		msg('请输入收货人姓名');
		return;
	}
	if (!checkStr(state.formData.consigneeTel, 'mobile')) {
		msg('请输入正确手机号');
		return;
	}
	if (!state.formData.region) {
		msg('请输选择省市区');
		return;
	}
	if (!state.formData.address) {
		msg('请输入正确详细地址');
		return;
	}
  state.formData.openId = getItem(StorageKeys.OpenId);
 
  queryAddOrEditAddress(addOrEditAddressQuery, state.formData);
};

/* 新增/编辑收货地址 */
const queryAddOrEditAddress = (code, data) => {
	if(state.formData.orderId){
		console.log(data);
		let options = {
		  type: 2,
		  data: data,
		  method: "POST",
		  showLoading: true,
		};
		request(code, options).then((res) => {
		    // msg("新增地址成功");
			
		    // uni.navigateBack({
		    //   delta: 1,
		    // });
			let options2 = {
			  type: 2,
			  data: state.formData,
			  method: "POST",
			  showLoading: true,
			};
			request(addressToOrder, options2).then((res) => {
				console.log(res);
				  uni.redirectTo({
				  	url: `/applyCard/release-products?orderId=${state.formData.orderId}&clientFee=${getItem('clientFee')}&&id=${getItem('productId')}`,
				  });
			  })
		  })
		  .catch((err) => {
		    console.log(err);
		  });
		  
	}else{
		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((option) => {
	state.formData.orderId = option.orderId
});
</script>

<style lang="scss" scoped>
	
	.form-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		padding: 20rpx 0;
	}
.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>