zhishifufei_uniapp/pages/my/edit_address.vue

<template>
  
  <BaseContainer class="add-address">
    <NavBar :title="title" />
    <view class="form">
			<view class="form-box">
				<view class="section">
					<view class="label flex flex-center-x">
						<view class="left-prop">姓名</view>
						<input v-model="realName" type="text" placeholder="请输入姓名" placeholder-class="input-placeholder"/>
					</view>
					<view class="label flex flex-center-x">
						<view class="left-prop">联系电话</view>
						<input v-model="phone" type="tel" maxlength="11" placeholder="请输入手机号" placeholder-class="input-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')"
						/> -->
						<text class="iconfont iconxiangyou" style="color: #CBCBCB"></text>
					</view>
					<view class="label flex flex-center-x"  v-else>
						<view class="left-prop">所在地区</view>
						<view @click="showPicker" style="flex: 1;">
							<input
								v-model="area"
								disabled
								placeholder="请选择"
								readonly
								style="pointer-events: none;"
								placeholder-class="input-placeholder"
							/>
						</view>
						<!-- <image
							class="address-icon"
							mode="heightFix"
							:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
						/> -->
						<text class="iconfont iconxiangyou" style="color: #CBCBCB"></text>
					</view>

					<view class="label flex flex-center-x" style="height: 132rpx;">
						<view class="left-prop">详细地址</view>
						<textarea
							v-model="detail"
							placeholder="请输入详细的地址信息，如道路、门牌号、小区、楼栋号、单元室等"
							placeholder-class="input-placeholder"
							style="height: 100%;padding: 28rpx 0;"
						/>
					</view>
				</view>
				<view class="section">
					<view class="label flex flex-center-x" style="border-bottom: none;justify-content: space-between;font-size: 28rpx;color:#333;">
						设置为默认地址
						<switch :checked="isDefault" @change="changeDefault" class="default-switch" />
					</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() {
			console.log(this.$refs.picker);
      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;
    },
		changeDefault(e) {
			console.log(e, this.isDefault);
			this.isDefault = e.detail.value;
		}
  },
};
</script>

<style scoped lang="scss">
.add-address {
	background: #f6f6f6;
}
.form-box {
	width: 690rpx;
	margin: 20rpx auto 0;
	border-radius: 10rpx;
	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.04);
}
/* 添加地址 */
.add-address .section {
  background-color: #ffffff;
	padding: 0 32rpx;
}

.add-address .label {
  height: 80rpx;
  font-size: 30rpx;
	position: relative;
  border-bottom: 1px solid #eee;
	text {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: -20rpx;
	}
	input, textarea {
		color: #333;
		font-size: 24rpx;
	}
	.input-placeholder {
		color: #999999;
		font-size: 24rpx;
	}
	.iconfont {
		font-size: 24rpx;
	}
}
::v-deep .default-switch {
	.uni-switch-input {
		width: 80rpx;
		height: 40rpx;
		&:before,
		&:after {
			width: 36rpx;
			height: 36rpx;
		}
	}
}
.add-address .label .left-prop {
  width: 220rpx;
  color: #333;
	font-size: 28rpx;
}

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

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

.add-address input,
.add-address textarea {
  flex: 1;
  font-family: inherit;
	text-align: right;
}

.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 {
  position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 690rpx;
	bottom: 44rpx;
}

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