yikangyang-wx/package_sub/pages/UserAddress/AddUserAddress.vue

<template>
  <view>
    <u-navbar back-text="返回"
              is-back
              title="收货地址"
              back-icon-color="#fff"
              :back-text-style="{
                color: '#fff'
              }"
              title-color="#fff"
              :background="{
                backgroundImage: 'linear-gradient(0deg, #c10d12 0%, #c10d12 4%, #e26165 99%, #e26165 100%)'
              }">
    </u-navbar>

    <view class="wrap">
      <view class="top">
        <view class="item">
          <view class="left">收货人</view>
          <input v-model="form.name" type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
        </view>
        <view class="item">
          <view class="left">手机号码</view>
          <input v-model="form.mobile" type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
        </view>
        <view class="item" @tap="showRegionPicker">
          <view class="left">所在地区</view>
          <input :value="form.city" disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
        </view>
        <view class="item address">
          <view class="left">详细地址</view>
          <input v-model="form.address" class="flex1" type="text" placeholder-class="line" placeholder="街道、楼牌等" />
          <u-icon name="map" label="定位" color="#ba8b45" label-color="#000" label-pos="right" @click="getLoc"></u-icon>
        </view>
        <view class="item">
          <view class="left flex1">设置默认地址</view>
          <u-switch class="right" v-model="form.is_default" :active-value="1" :inactive-value="0" active-color="#b83630"></u-switch>
        </view>
      </view>
      <view class="bottom">
        <view class="by-wx" @tap="$u.throttle(chooseWXAddress, 500)">
          <u-icon name="weixin-circle-fill" :size="48" label="一键获取微信地址" color="#5fc157" label-color="#000" label-pos="right" :margin-left="22"></u-icon>
          <u-icon name="arrow-right" color="#000"></u-icon>
        </view>
        <view>
          <u-button
              shape="circle"
              ripple
              :custom-style="btnStyle"
              @click="submit"
          >保 存</u-button
          >
        </view>
      </view>
      <u-picker mode="region" ref="uPicker" v-model="show" @confirm="pickCity"/>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnStyle: {
        "background-image":
            "linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)",
        "font-weight": "500",
        "font-size": "28rpx",
        color: "#fff",
        width: "450rpx",
        "margin": "42rpx auto 0"
      },
      show: false,
      form: {
        id: '',
        name: '',
        mobile: '',
        city: '',
        address: '',
        is_default: 0
      },
	  type:''
    };
  },
  methods: {
    chooseWXAddress() {
      uni.chooseAddress({
        success:res => {
          this.form.name = res.userName
          this.form.mobile = res.telNumber
          this.form.city = `${res.provinceName}${res.cityName}${res.countyName}`
          this.form.address = res.detailInfo
        },
        fail: err => {
          console.log(err)
        }
      })
    },
    pickCity(e) {
      this.form.city = `${e.province.label}${e.city.label}${e.area.label}`
    },
    showRegionPicker() {
      this.show = true;
    },
    async getLoc() {
      try {
        const { address } = await this.$store.dispatch('getLocation')
        this.form.address = address?.result?.formatted_addresses?.standard_address
      } catch (err) {
        console.error(err)
      }
    },
    async getDetail(id) {
      try {
        const res = await this.$u.api.userAddressShow({ id })
        for (let key in this.form) {
          if (res.hasOwnProperty(key)) {
            this.form[key] = res[key]
          }
        }
      } catch (err) {
        console.error(err)
      }
    },
    async submit() {
      if (!this.form.name.trim()) {
        this.$refs.uToast.show({
          title: '请输入姓名',
          type: 'warning'
        })
        return
      }
      if (!this.$u.test.mobile(this.form.mobile)) {
        this.$refs.uToast.show({
          title: '手机号码不正确',
          type: 'warning'
        })
        return
      }
	  let that = this
      try {
        await this.$u.api.userAddressSave(this.form)
        this.$refs.uToast.show({
          title: '保存成功',
          type: 'success',
          back: true
        })
      } catch (err) {
        console.error(err)
      }
    }
  },
  onLoad(option) {
    if(option.id) {
      this.getDetail(option.id)
    }
	this.type = options.type?options.type:''
  }
};
</script>

<style lang="scss" scoped>
/deep/ .line {
  color: $u-light-color;
  font-size: 28rpx;
}
.wrap {
  background-color: #fff;
  margin: 26rpx 20rpx;
  border-radius: 10px;

  .top {
    background-color: #ffffff;
    border-top: solid 2rpx $u-border-color;
    padding: 22rpx;
    .item {
      display: flex;
      font-size: 32rpx;
      line-height: 100rpx;
      align-items: center;
      border-bottom: solid 2rpx $u-border-color;
      .left {
        color: #000;
        width: 180rpx;
      }
      .flex1 {
        flex: 1;
      }
      input {
        text-align: left;
      }
    }

    .address {
      padding: 20rpx 0;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
    }
    .site-clipboard {
      padding-right: 40rpx;
      textarea {
        // width: 100%;
        height: 150rpx;
        background-color: #f7f7f7;
        line-height: 60rpx;
        margin: 40rpx auto;
        padding: 20rpx;
      }
      .clipboard {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26rpx;
        color: $u-tips-color;
        height: 80rpx;
        .icon {
          margin-top: 6rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 34rpx 150rpx 0;
    padding-bottom: 20rpx;
    padding-bottom: calc(
        constant(safe-area-inset-bottom) + 20rpx
    );
    padding-bottom: calc(
        env(safe-area-inset-bottom) + 20rpx
    );

    .by-wx {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>