web-base-h5/pages/address/index.vue

<template>
  <view class="main">
    <view class="contents">
      <u-form :model="addressForm" labelWidth="auto" ref="uForm">
        <view class="view-class">
          <u-form-item
            label="收货人"
            label-width="100px"
            prop="recName"
          >
            <u-input
              :maxlength="40"
              v-model.trim="addressForm.recName"
              placeholder-class="place-class"
              class="border-color"
              placeholder="请输入收货人姓名"
            />
          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item
            label="联系方式"
            label-width="100px"
            prop="recPhone"
          >
            <u-input
              v-if="pkCountry == 1"
              v-model.trim="addressForm.recPhone"
              placeholder-class="place-class"
              :maxlength="11"
              class="border-color"
              type="number"
              placeholder="请输入联系方式"
            />
            <u-input
              v-else
              v-model.trim="addressForm.recPhone"
              placeholder-class="place-class"
              :maxlength="30"
              class="border-color"
              placeholder="请输入联系方式"
            />
          </u-form-item>
        </view>
        <view class="view-class" @click="getDiqu">
          <u-form-item label="收货地址" label-width="100px" prop="address">
            <view
              v-if="address"
              style="font-size: 28rpx; color: #333; margin-left: 20rpx"
              >{{ address }}</view
            >
            <view
              style="
                margin-left: 20rpx;
                font-size: 28rpx;
                color: rgb(192, 196, 204);
              "
              v-else
              >请选择收货地址</view
            >
          </u-form-item>
          <view class="drop">
            <image src="../../static/images/drop.png"></image>
          </view>
        </view>
        <view class="view-class">
          <u-form-item
            label="详细地址"
            class="label-style"
            label-width="100px"
            prop="recAddress"
          >
            <u-textarea
              v-model.trim="addressForm.recAddress"
              placeholder-class="place-class"
              class="border-color"
              maxlength="200"
              placeholder="请输入详细地址"
            />
          </u-form-item>
        </view>
        <view class="view-class flex-s">
          <view> 设为默认地址 </view>
          <view @click="checkTap">
            <view class="check" v-if="addressForm.isDefault == 0">
              <view></view>
            </view>
            <view class="check" v-else>
              <image src="../../static/images/check.png"></image>
            </view>
          </view>
        </view>
      </u-form>
    </view>
    <v-address
      ref="address"
      @getAddressData="AddressData"
      :defaultCode="defaultCode"
      @addressData="addressData"
    ></v-address>
    <u-button 
      :disabled="!addressForm.recName || !addressForm.recPhone || !addressForm.recAddress"
      type="success"
      shape="circle" 
      class="btn" 
      @click="submit"
      color="#005BAC"
      :loading="loading"
    >
      确定
    </u-button>
    <view style="height: 20rpx"></view>
  </view>
</template>

<script>
import * as api from "@/config/login.js";
import { setToken } from "@/config/auth.js";
import address from "@/components/address.vue";
import store from "@/store";
export default {
  data() {
    return {
      userInfo: "",
      pkCountry:'',
      check: false,
      address: "",
      defaultCode: [],
      urls: "/member/api/maker-space/update-file",
      addressForm: {
        recName: "",
        recPhone: "",
        recProvince: "",
        recCity: "",
        recCounty: "",
        recAddress: "",
        isDefault: 0,
        pkId: "",
      },
      loading: false,
      rules: {
        recName: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: "姓名不能为空",
          },
        ],
        recAddress: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: "详细地址不能为空",
          },
        ],
        recProvince: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: "地址不能为空",

            trigger: ["change"],
          },
        ],
        recPhone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur"],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号格式不正确",
            trigger: ["blur"],
          },
        ],
      },
    };
  },
  onLoad(option) {
    if (option.pkId) {
      this.getAddress(option.pkId);
      uni.setNavigationBarTitle({
        title: "修改收货地址",
      });
    }
    this.pkCountry = uni.getStorageSync("pkCountry");
    this.userInfo = uni.getStorageSync("User");
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  components: {
    "v-address": address,
  },
  methods: {
    AddressData(name) {
      this.address = name;
    },
    submit() {
      this.$refs.uForm.validate().then((res) => {
        this.loading = true
        api.saveAddress(this.addressForm).then((res) => {
          if (res.code == "200") {
            const toast = uni.showToast({
              title: res.msg,
              icon: "none",
              complete() {
                setTimeout(() => {
                  this.loading = false
                  uni.navigateBack(1)
                  toast.hideToast()
                }, 500);
              },
            });
          } else {
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        })
      });
    },
    getDiqu() {
      this.$refs.address.setShow();
    },
    addressData(diqu, obj) {
      this.address = diqu;
      this.addressForm.recProvince = obj.province;
      this.addressForm.recCity = obj.city;
      this.addressForm.recCounty = obj.county;
      this.$forceUpdate();
      // this.getPostAge()
      // this.queryAdressPostage()
    },
    checkTap() {
      if (this.addressForm.isDefault == 0) {
        this.addressForm.isDefault = 1;
      } else {
        this.addressForm.isDefault = 0;
      }
    },
    getAddressData(e) {
      console.error(e);
    },
    getAddress(id) {
      api
        .getAddress(id)
        .then((res) => {
          if (res) {
            this.addressForm = {
              recName: res.data.recName,
              recPhone: res.data.recPhone,
              recProvince: res.data.recProvince,
              recCity: res.data.recCity,
              recCounty: res.data.recCounty || "",
              pkId: res.data.pkId,
              recAddress: res.data.recAddress,
              isDefault: res.data.isDefault,
            };
            this.defaultCode = [
              res.data.recProvince,
              res.data.recCity,
              res.data.recCounty || "",
            ];
          }
        })
        .catch((error) => {
          reject(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
:v-deep .u-form-item__body__right__message {
  margin-left: 215rpx !important;
  padding-bottom: 20rpx;
}
.drop {
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0;
    top: 30rpx;
  }
}
.check {
  position: relative;
  view {
    width: 36rpx;
    height: 36rpx;
    border: 1rpx solid #dddddd;
    border-radius: 50%;
    margin-top: 25rpx;
  }
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0rpx;
    top: 25rpx;
    // margin-top: 20rpx;
  }
}
.flex-s {
  justify-content: space-between;
  display: flex;
  height: 90rpx;
  line-height: 90rpx;
}
.label-style {
  display: block !important;
}
:v-deep .label-style .u-form-item__body__left {
  display: block !important;
  margin-top: 20rpx;
}
.uni-textarea {
  height: 100rpx;
}
.view-class {
  border-bottom: 1rpx solid #eee;
  margin: 0 30rpx;
  position: relative;
}
.border-color {
  border: none;
}
page {
  background-color: #f2f2f2;
}
.contents {
  background-color: #fff;
}
.btn {
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 40rpx auto;
  width: 690rpx;
}
</style>