wx-qhb/pageC/internationalAddress/internationalAddress.vue

<template>
  <view class="page">
    <view class="content">
      <view class="title">
        <text class="title-left">{{ i18n.contacts }}</text>
      </view>
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form labelPosition="left" :model="model1" ref="uForm">
        <u-form-item
          labelWidth="150rpx"
          @click="showDialog = true"
          :label="i18n.country"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.country"
            disabled
            disabledColor="#ffffff"
            :placeholder="i18n.selection"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          labelWidth="150rpx"
          :label="i18n.name"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.name"
            :placeholder="i18n.goods"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item
          labelWidth="150rpx"
          :label="i18n.phone"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.phone"
            :placeholder="i18n.pleasePhoneNumber"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          labelWidth="150rpx"
          :label="i18n.postalCode"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.zip_code"
            :placeholder="i18n.PleacePostalCode"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          labelWidth="150rpx"
          :label="i18n.city"
          borderBottom
          @click="openCity"
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.city"
            disabled
            disabledColor="#ffffff"
            :placeholder="i18n.township"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item
          labelWidth="150rpx"
          :label="i18n.detailed"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.detailed"
            :placeholder="i18n.sect"
            border="none"
          ></u--input>
        </u-form-item>

        <u-form-item
          labelWidth="150rpx"
          :label="i18n.companyName"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.companyName"
            :placeholder="i18n.company"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item
          labelWidth="150rpx"
          :label="i18n.email"
          borderBottom
          ref="item1"
        >
          <u--input
            v-model="model1.userInfo.email"
            :placeholder="i18n.pleaseEmail"
            border="none"
          ></u--input>
        </u-form-item>
        <view
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view class="item-left">
            <image
              src="../../static/mine/330.png"
              class="address-icon"
              mode=""
            ></image>
            <text>{{ i18n.addressBook }}</text>
          </view>
          <text style="font-size: 24rpx; color: #333">{{ i18n.empty }}</text>
        </view>
      </u--form>
    </view>
    <!-- <SelectCity :show="show" @close="close" :countryId="country.id" /> -->
    <view class="footer">
      <button class="save" @click="submit">{{ i18n.preserve }}</button>
    </view>

    <u-picker
      :show="show"
      :columns="cityList"
      keyName="name"
      @confirm="countrycConfirm"
      @cancel="show = false"
      :closeOnClickOverlay="true"
      @close="close"
    ></u-picker>
    <u-picker
      :show="showDialog"
      :columns="columns"
      keyName="name"
      @cancel="showDialog = false"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @close="close"
    ></u-picker>
  </view>
</template>

<script>
import SelectCity from "../addEditAddress/component/selectCity.vue";
export default {
  components: {
    SelectCity,
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      show: false, //城市弹窗
      showDialog: false, //国家弹窗
      //表单数据
      model1: {
        userInfo: {
          name: "",
          phone: "",
          country: "",
          postalCode: "",
          city: "",
          detailed: "",
          email: "",
          companyName: "",
          zip_code: "",
        },
      },
      selectedCity: {}, //选中的城市
      columns: [], //获取到的国家数据
      country: {}, //选中的国家数据
      cityList: [[]], //选中国家之后的城市数据
      addressId: "", //编辑的地址id
      rules: {
        "userInfo.name": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "userInfo.sex": {
          type: "string",
          max: 1,
          required: true,
          message: "请选择男或女",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  onLoad(options) {
    if (options.id) {
      this.addressId = options.id;
      this.getAddressDetail(options.id);
    } else {
      uni.setNavigationBarTitle({
        title: this.i18n.newAddress,
      });
    }
  },
  methods: {
    //回显数据
    getAddressDetail(id) {
      uni.setNavigationBarTitle({
        title: "编辑地址",
      });
      uni.$u.http.get(`/api/address/${id}`).then((res) => {
        this.model1.userInfo.city = res.province_name;
        this.model1.userInfo.name = res.name;
        this.model1.userInfo.phone = res.mobile;
        this.model1.userInfo.detailed = res.address;
        this.model1.userInfo.companyName = res.company_name;
        this.model1.userInfo.is_default = res.is_default;
        this.model1.userInfo.country = res.country_name;
        this.model1.userInfo.email = res.email;
        this.country.id = res.country_id;
        this.selectedCity.id = res.province_id;
        this.model1.userInfo.zip_code = res.zip_code;
      });
    },

    //选择国家
    confirm(e) {
      this.country = e.value[0];
      this.model1.userInfo.country = this.country.name;
      this.getCityList(this.country.id);
      this.showDialog = false;
    },
    //打开选择城市的弹窗
    openCity() {
      //判断是否选择国家
      if (JSON.stringify(this.country) != "{}") {
        //判断选中的国家有没有城市数据
        if (this.cityList[0].length > 0) {
          this.show = true;
        } else {
          uni.$u.toast("该国家没有城市数据，请直接填写详细地址");
        }
      } else {
        uni.$u.toast("请先选择国家");
      }
    },
    //选择国家
    countrycConfirm(e) {
      this.selectedCity = e.value[0];
      this.model1.userInfo.city = this.selectedCity.name;
      this.show = false;
    },
    submit() {
      const obj = {
        mobile: this.model1.userInfo.phone,
        name: this.model1.userInfo.name,
        country_id: this.country.id,
        province_id: this.selectedCity.id,
        address: this.model1.userInfo.detailed,
        company_name: this.model1.userInfo.companyName,
        email: this.model1.userInfo.email,
        zip_code: this.model1.userInfo.zip_code,
      };
      if (this.addressId) {
        uni.$u.http.put(`/api/address/${this.addressId}`, obj).then((res) => {
          uni.navigateBack({
            delta: 1,
          });
        });
      } else {
        uni.$u.http.post(`/api/address`, obj).then((res) => {
          uni.navigateBack({
            delta: 1,
          });
        });
      }
    },
    //关闭弹窗
    close() {
      this.show = false;
      this.showDialog = false;
    },
    //获取所有国家
    getCountryList() {
      uni.$u.http.get(`/api/area?is_domestic=0&pid=`).then((res) => {
        this.columns = [res];
      });
    },
    //根据国家获取城市
    getCityList(num) {
      uni.$u.http.get(`/api/area/tree?pid=${num}`).then((res) => {
        this.cityList = [res];
      });
    },
  },
  mounted() {
    this.getCountryList();
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;

  .content {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 24rpx;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);

      .title-left {
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
      }

      .title-icon {
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
      }

      .title-right {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: rgba(51, 51, 51, 0.6);
      }
    }

    .company {
      height: 102rpx;
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
    }
  }

  .item-left {
    font-size: 24rpx;
    color: #333;
    display: flex;
    align-items: center;
    height: 86rpx;

    .address-icon {
      width: 26rpx;
      height: 26rpx;
      margin-right: 10rpx;
    }
  }

  .footer {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    height: 146rpx;
    width: 750rpx;
    left: 0;
    padding-top: 20rpx;

    .save {
      width: 702rpx;
      margin: 0 auto;
      background-color: #f83224;
      color: #fff;
      border-radius: 40rpx;
    }
  }
}
</style>