address_add.vue

<template>
  <view>
    <dHeader :title="$lang.lang.addressInfo.addInfo"></dHeader>
    <view class="container">
      <uni-forms ref="form" :model="form"   :rules="rules">
        <uni-forms-item class="custom-label-width"
          :label="$lang.lang.addressInfo.consignee"
          required
          name="name"
        >
          <uni-easyinput
            class="input"
            :trim="true"
            :inputBorder="false"
            v-model="form.name"
            :placeholder="$lang.lang.notices.consignee"
          />
        </uni-forms-item>
        <uni-forms-item
          :label="$lang.lang.addressInfo.phone"
          required
          name="phone"
        >
          <view class="phone-box">
            <picker :value="areaIndex" :range="areaName" @change="areaChange">
              <view class="phone-code">
                +{{ areaCode }}
                <uni-icons type="down" class="code-icon" size="10"></uni-icons>
              </view>
            </picker>
            <uni-easyinput
              class="input"
              :trim="true"
              :inputBorder="false"
              v-model.trim="form.phone"
              :placeholder="$lang.lang.notices.phone"
            />
          </view>
        </uni-forms-item>
        <uni-forms-item
          class="item"
          :label="$lang.lang.addressInfo.fullAddress"
          required
          name="address"
        >
          <view class="textarea-box">
            <uni-easyinput
              class="input"
              type="textarea"
              :trim="true"
              autoHeight
              :inputBorder="false"
              :maxlength="100"
              v-model.trim="form.address"
              :placeholder="$lang.lang.notices.fullAddress"
            >
            </uni-easyinput>
            <view class="placeholder">{{
              $lang.lang.notices.fullAddressLength
            }}</view>
          </view>
        </uni-forms-item>
        <view class="btn" @click="saveAddress">{{
          $lang.lang.notices.saveAddress
        }}</view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import dHeader from "../../components/dHeader/index.vue";
export default {
  components: {
    dHeader,
  },
  data() {
    return {
      form: {
        name: "",
        phone: "",
        address: "",
      },
      areaCode: this.$store.getters.areaCode,
      areaIndex: 0,
      areaName: [],
    };
  },
  computed: {
    rules() {
      return {
        name: {
          rules: [
            { required: true, errorMessage: this.$lang.lang.notices.consignee },
          ],
        },
        phone: {
          rules: [
            { required: true, errorMessage: this.$lang.lang.notices.phone },
            {
              validateFunction: (rule, value) => /^\d+$/.test(value),
              errorMessage: this.$lang.lang.notices.nophone,
            },
          ],
        },
        address: {
          rules: [
            {
              required: true,
              errorMessage: this.$lang.lang.notices.fullAddress,
            },
            {
              maxLength: 100,
              errorMessage: this.$lang.lang.notices.fullAddressLength,
            },
          ],
        },
      };
    },
  },
  created() {
    this.getCountry();
  },
  mounted() {
    this.updateLabels();
  },
  methods: {
    updateLabels() {
      this.$nextTick(() => {
        const labels = this.$el.querySelectorAll('.uni-forms-item__label');
        labels.forEach(label => {
          // 移除 width 样式
          label.style.removeProperty('width');
          // 设置 min-width 样式
          label.style.minWidth = '70px';
        });
        console.log(labels);
      });
    },
    saveAddress() {
      this.$refs.form.validate().then(async (valid) => {
        if (valid) {
          try {
            const params = {
              ...this.form,
              areaCode: this.areaCode,
              memberId: this.$store.getters.id,
            };
            const { code, data, msg } = await this.$request.post(
              "/app-api/member/user-address/create",
              params
            );
            if (code == 0) {
              uni.$emit("refreshPreviousPage", "show");
              uni.navigateBack();
            } else {
              uni.showToast({
                title: msg,
                duration: 2000,
              });
            }
          } catch (error) {}
        }
      });
    },
    // 获取国家区号
    async getCountry() {
      try {
        const { code, data } = await this.$request.get(
          "/app-api/ecw/country/list-all"
        );
        if (code == 0 && data.length > 0) {
          // 查询用户区号下标
          const i = data.findIndex((item) => {
            return item.tel == this.areaCode;
          });
          if (i >= 0) this.areaIndex = i;
          data.forEach((item) => {
            const str = item.tel + " " + item[this.$lang.name];
              this.areaName.push(str);
          });
        }
      } catch (error) {}
    },
    // 区号选择切换
    areaChange(e) {
      this.areaIndex = e.detail.value;
      this.areaCode = this.areaName[this.areaIndex].split(" ")[0];
    },
  },
};
</script>

<style>
page {
  padding-top: 190upx;
}
.uni-forms {
  padding: 0 48upx;
  box-sizing: border-box;
}
.uni-forms-item {
  padding: 0 24upx;
  margin-bottom: 44upx;
  width: 100%;
  align-items: center;
  min-height: 80upx;
  box-sizing: border-box;
  border-radius: 12upx;
  background-color: #fff;
}
.item {
  align-items: start;
}
.input {
  font-size: 24upx;
}
.textarea-box {
  padding: 0 0 30upx;
}
.placeholder {
  position: absolute;
  bottom: 8upx;
  right: 0;
  font-size: 24upx;
  color: #b3b3b3;
}
.phone-box {
  display: flex;
  align-items: center;
}
.phone-code {
  display: flex;
  align-items: center;
  margin-right: 10upx;
  padding-right: 10upx;
  border-right: 1px solid #e6e6e6;
  font-size: 24upx;
  color: #000;
}
.code-icon {
  margin-left: 6upx;
}
.btn {
  width: 100%;
  height: 80upx;
  line-height: 80upx;
  text-align: center;
  background-color: #3d6ef6;
  color: #fff;
  border-radius: 80upx;
  margin-top: 40upx;
}

::v-deep .uni-forms-item__label {
  font-size: 28upx !important;
  font-weight: 500 !important;
  color: #000;
}
::v-deep .uni-easyinput__content-input {
  padding-left: 0 !important;
}

::v-deep .uni-easyinput__content-textarea {
  height: 100upx;
  min-height: 100upx;
  /* #ifndef APP-NVUE */
  min-height: 100upx;
  width: auto;
  /* #endif */
}
</style>