zhishifufei_uniapp/pages/my/edit_address.vue

<template>
  
  <BaseContainer class="add-address">
    <NavBar :title="title" />
    <view class="form">
      <view class="section">
        <view class="label flex flex-center-x">
          <view class="left-prop">姓名</view>
          <input v-model="realName" type="text" placeholder="请输入姓名" />
        </view>
        <view class="label flex flex-center-x">
          <view class="left-prop">联系电话</view>
          <input v-model="phone" type="tel" maxlength="11" placeholder="请输入联系电话" />
        </view>
        <view class="label flex flex-center-x" v-if="type">
          <view class="left-prop">所在地区</view>
          <AddressPicker ref="picker" style="width: 440rpx;" :address="address.district" @change="handleCityChange" />
          <image
            class="address-icon"
            mode="heightFix"
            :src="getImgPath('/wap/first/zsff/images/location_fill.png')"
          />
        </view>
        <view class="label flex flex-center-x"  v-else>
          <view class="left-prop">所在地区</view>
          <input
            v-model="area"
            disabled
            placeholder="请选择"
            readonly
            @click="showPicker"
          />
          <image
            class="address-icon"
            mode="heightFix"
            :src="getImgPath('/wap/first/zsff/images/location_fill.png')"
          />
        </view>

        <view class="label flex flex-center-x">
          <view class="left-prop">详细地址</view>
          <input v-model="detail" placeholder="请填写具体地址" />
        </view>
      </view>
      <view class="section">
        <view class="label flex flex-center-x">
          <view class="checkbox" @click="isDefault = !isDefault">
            <image
              v-if="isDefault"
              :src="getImgPath('/wap/first/zsff/images/checkbox02.png')"
            />
            <image v-else :src="getImgPath('/wap/first/zsff/images/checkbox01.png')" />
          </view>
          设置为默认地址
        </view>
      </view>
      <view class="btn">
        <view class="save-btn flex flex-center" @click="addAddress">立即保存</view>
      </view>
      <AddressPicker ref="picker" style="width: 440rpx;" v-if="!type" :address="address.district" @change="handleCityChange" />
    </view>
  </BaseContainer>
</template>

<script>
import { getUserAddressInfo, updateUserAddressInfo } from "@/api/user";
import AddressPicker from "@/components/AddressPicker/index.vue";

export default {
  components: {
    AddressPicker,
  },
  data() {
    return {
      id: "",
      realName: "",
      phone: "",
      address: {
        province: "",
        city: "",
        district: "",
      },
      detail: "",
      isDefault: false,
      show: false,
      district: "",
      cartId: 0,
      cityData: [],
      type:false
    };
  },
  computed: {
    title() {
      return this.id ? "修改地址" : "添加地址";
    },
    area() {
      let address = this.address;
      return (address.province + " " + address.city + " " + address.district).trim();
    },
  },
  onLoad({ id = "", cartId = 0 }) {
    // #ifdef MP-KUAISHOU
        this.type = true
    // #endif
    // #ifdef MP-TOUTIAO
    this.type = true
    // #endif
    this.id = id;
    this.cartId = cartId;
    if (id) this.getData();
  },
  methods: {
    handleCityChange({ detail }) {
      let [{ value: province }, { value: city }, district = {}] = detail.value;

      district = district.value || "";
      this.address = {
        province,
        city,
        district,
      };
    },

    showPicker() {
      this.$refs.picker.show();
    },
    getData() {
      getUserAddressInfo(this.id).then(({ data }) => {
        const { addressInfo, cartId } = data;
        const {
          real_name,
          phone,
          province,
          city,
          district,
          detail,
          is_default,
        } = addressInfo;
        Object.assign(this, {
          addressInfo,
          realName: real_name,
          phone,
          address: {
            province,
            city,
            district,
          },
          detail,
          isDefault: is_default === 1,
          district,
          cartId,
        });
      });
    },
    async addAddress() {
      if (this.$reg.isEmpty(this.realName)) {
        return this.$util.showMsg("请输入姓名");
      } else if (!this.$reg.isPhone(this.phone)) {
        return this.$util.showMsg("请输入正确的手机号");
      } else if (
        this.$reg.isEmpty(this.address.province) ||
        this.$reg.isEmpty(this.address.city) ||
        this.$reg.isEmpty(this.address.district)
      ) {
        return this.$util.showMsg("请选择所在地区");
      } else if (this.$reg.isEmpty(this.detail)) {
        return this.$util.showMsg("请输入详细地址");
      }

      uni.showLoading({ mask: true });

      try {
        const { data } = await updateUserAddressInfo({
          id: this.id,
          real_name: this.realName,
          phone: this.phone,
          address: this.address,
          detail: this.detail,
          is_default: this.isDefault,
        });
        uni.hideLoading();

        if (this.cartId) {
          uni.navigateTo({
            url: `/pages/special/confirm_order?cartId=${this.cartId}`,
          });
        } else {
          const pages = getCurrentPages();
          if (pages.length > 1 && pages[pages.length - 2].route === "pages/my/address") {
            uni.navigateBack();
          } else {
            uni.redirectTo({
              url: "/pages/my/address",
            });
          }
        }
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
    result(ret) {
      this.address.province = ret.itemName1;
      this.address.city = ret.itemName2;
      this.address.district = ret.itemName3;
    },
  },
};
</script>

<style scoped lang="scss">


/* 添加地址 */
.add-address .section {
  background-color: #ffffff;
}

.add-address .section + .section {
  margin-top: 23rpx;
}

.add-address .label {
  height: 90rpx;
  padding-right: 30rpx;
  padding-left: 30rpx;
  font-size: 30rpx;
}

.add-address .label + .label {
  border-top: 1px solid #eee;
}

.add-address .label .left-prop {
  width: 220rpx;
  color: #343434;
}

.add-address .label .address-icon {
  height: 38rpx;
  pointer-events: none;
  -webkit-touch-callout: none;
}

.add-address input::placeholder {
  color: #ccc;
}

.add-address input {
  flex: 1;
  font-family: inherit;
  font-size: 30rpx;
  color: #333;
}

.add-address .checkbox {
  width: 42rpx;
  height: 42rpx;
  margin-right: 25rpx;
}

.add-address .checkbox image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
  pointer-events: none;
}

.add-address .btn {
  padding: 30rpx;
  margin-top: 20rpx;
}

.add-address .save-btn {
  width: 100%;
  height: 86rpx;
  border-radius: 43rpx;
  background-color: #2a8eff;
  font-family: inherit;
  font-size: 32rpx;
  color: #ffffff;
}
</style>