address_edit.vue

<template>
  <view>
    <dHeader :title="$lang.lang.addressInfo.editInfo"></dHeader>
    <view class="container">
      <uni-forms ref="form" :model="form" :label-width="80" :rules="rules">
        <uni-forms-item
          :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">
            <view class="phone-code">+86</view>
            <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: "",
      },
    };
  },
  onLoad(route) {
    this.getAddress(route.id);
  },
  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,
            },
          ],
        },
      };
    },
  },
  methods: {
    saveAddress() {
      // console.log(this.form)
      this.$refs.form.validate().then(async (res) => {
        if (res) {
          try {
            const { code } = await this.$request.post(
              "/app-api/member/user-address/update",
              this.form
            );
            if (code == 0) {
              this.$route.params.addressId = "00000";
              uni.$emit("refreshPreviousPage", "show");
              uni.navigateBack();
            }
          } catch (err) {}
        }
      });
    },
    // 获取地址信息 回显
    async getAddress(id) {
      try {
        const { code, data } = await this.$request.get(
          "/app-api/member/user-address/get",
          { id }
        );
        if (code == 0 && data) {
          this.form = data;
        }
      } catch (err) {}
    },
  },
};
</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 {
  margin-right: 10upx;
  padding-right: 10upx;
  border-right: 1px solid #e6e6e6;
  font-size: 24upx;
  color: #000;
}
.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>