wx-qhb/pageC/addEditAddress/addEditAddress.vue

<template>
  <view class="page">
    <view class="content">
      <view class="title">
        <text class="title-left">{{ i18n.contacts }}</text>
        <view class="title-right">
          <image
            src="../../static/mine/331.png"
            class="title-icon"
            mode=""
          ></image>
          <text>{{ i18n.wxAddress }}</text>
        </view>
      </view>
      <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
      <u--form labelPosition="left" :model="model1" ref="uForm">
        <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.city"
          borderBottom
          @click="show = true"
          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>
        <view class="company">
          <u--input
            v-model="model1.userInfo.company"
            :placeholder="i18n.company"
            border="none"
          ></u--input>
        </view>
        <view
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view
            class="item-left"
            @click="model1.userInfo.is_default = !model1.userInfo.is_default"
          >
            <image
              src="../../static/mine/327.png"
              class="address-icon"
              mode=""
              v-if="!model1.userInfo.is_default"
            ></image>

            <image
              v-else
              src="../../static/mine/330.png"
              class="address-icon"
              mode=""
            ></image>
            <text>{{ i18n.initial }}</text>
          </view>
          <text style="font-size: 24rpx; color: #333">{{ i18n.empty }}</text>
        </view>
      </u--form>
    </view>
    <SelectCity :show="show" @close="close" :cityId="cityId" />
    <view class="footer">
      <button class="save" @click="submit">{{ i18n.preserve }}</button>
    </view>
  </view>
</template>

<script>
import SelectCity from "./component/selectCity.vue";
export default {
  components: {
    SelectCity,
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      show: false,
      cityId: [],
      cityPid: {},
      addressId: "",
      model1: {
        userInfo: {
          name: "",
          sex: "",
          phone: "",
          city: "",
          detailed: "",
          company: "",
          is_default: 0,
          country_id: 0,
        },
      },
      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);
    }
  },
  methods: {
    //编辑 or 新增
    submit() {
      const obj = {
        mobile: this.model1.userInfo.phone,
        name: this.model1.userInfo.name,
        is_default: this.model1.userInfo.is_default ? 1 : 0,
        company_name: this.model1.userInfo.company,
        address: this.model1.userInfo.detailed,
        country_id: this.model1.userInfo.country_id,
      };
      //有id为编辑，没有id为新增
      if (this.addressId) {
        uni.$u.http
          .put(`/api/address/${this.addressId}`, { ...obj, ...this.cityPid })
          .then((res) => {
            console.log(res);
            uni.navigateBack({
              delta: 1,
            });
          })
          .catch(() => {});
      } else {
        uni.$u.http
          .post(`/api/address`, { ...obj, ...this.cityPid })
          .then((res) => {
            console.log(res);
            uni.navigateBack({
              delta: 1,
            });
          })
          .catch(() => {});
      }
    },
    //关闭选择城市弹窗
    close(obj) {
      this.show = false;
      if (obj && obj.name) {
        this.model1.userInfo.city =
          obj.name + obj.children.name + obj.children.children.name;
        this.cityId = [obj.id, obj.children.id, obj.children.children.id];
        this.cityPid.province_id = obj.id;
        this.cityPid.city_id = obj.children.id;
        this.cityPid.area_id = obj.children.children.id;
      }
    },
    //回显数据
    getAddressDetail(id) {
      uni.$u.http.get(`/api/address/${id}`).then((res) => {
        this.model1.userInfo.city =
          res.province_name + res.city_name + res.area_name;
        this.model1.userInfo.name = res.name;
        this.model1.userInfo.phone = res.mobile;
        this.model1.userInfo.detailed = res.address;
        this.model1.userInfo.company = res.company_name;
        this.model1.userInfo.is_default = res.is_default;
        this.model1.userInfo.country_id = res.country_id;
        if (res.province_id && res.city_id && res.area_id) {
          this.cityId = [res.province_id, res.city_id, res.area_id];
        }
      });
    },
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.i18n.newAddress,
    });
  },
  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>