paper-shopkeeper-H5/pages/add-address-manage/index.vue

<template>
  <view class="warpper">
    <view>
      <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed :title="titleText"></uni-nav-bar>
    </view>
    <view class="qn-form-item">
      <view class="label"><text class="label__text">收货人</text></view>
      <view class="value">
        <qn-easyinput
          :maxlength="20"
          @blur="showCompany"
          v-model="form.receiver"
          :inputBorder="false"
          text="left"
          placeholder="请填写收货人姓名"
        ></qn-easyinput>
      </view>
    </view>
    <view class="qn-form-item">
      <view class="label"><text class="label__text">手机号</text></view>
      <view class="value">
        <qn-easyinput
          :maxlength="11"
          type="number"
          v-model="form.receiverMobile"
          :inputBorder="false"
          text="left"
          placeholder="请填写收货人手机号"
        ></qn-easyinput>
      </view>
    </view>
    <view class="qn-form-item">
      <view class="label"><text class="label__text">所在地区</text></view>
      <view class="value">
        <!-- <qn-easyinput v-model="form.shortName" :inputBorder="false" text="right" placeholder="选择所在区域"></qn-easyinput> -->
        <qn-data-picker
          :readonly="hasSelected"
          text="left"
          :border="false"
          class="qn-picker"
          placeholder="点击选择"
          popup-title="请选择城市"
          :map="{ text: 'name', value: 'id' }"
          @change="onAreaChange"
          :clear-icon="true"
          :localdata="items"
        >
          <text v-if="form.districtId">{{ `${form.provinceName || ''}/${form.cityName || ''}/${form.districtName || ''}/${form.streetName || ''}` }}</text>
        </qn-data-picker>
      </view>
    </view>
    <view class="qn-form-item">
      <view class="label"><text class="label__text">详细地址</text></view>
      <view class="value">
        <qn-easyinput
          :maxlength="120"
          @blur="showCompany"
          v-model="form.detail"
          :inputBorder="false"
          text="left"
          placeholder="街道/门牌号/小区/乡镇/村等"
        ></qn-easyinput>
      </view>
    </view>
    <uGap></uGap>
    <view class="default-address">
      <view class="">
        <view class="title">设置为默认地址</view>
        <view class="tip">提醒：每次下单会默认使用该地址</view>
      </view>
      <view class=""><switch :checked="form.isDefault == 1" @change="switchChange" style="transform: scale(0.8)" /></view>
    </view>
    <qn-footer fixed height="120rpx">
      <view class="button-area">
        <!-- <view class="button button__cancel" @click="back">
		  <text class="text">取消</text>
		</view> -->
        <view class="button button__submit" @click="addTap"><text class="text" style="color: white">保存</text></view>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import uGap from '@/components/u-gap/u-gap.vue'
import { getArea } from '@/apis/commonApi.js'
import { back } from '@/utils/hook.js'
import qnFooter from '@/components/qn-footer/qn-footer.vue'
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue'
import { createAddress, getAddressDetail } from '@/apis/addressManageApi.js'
export default {
  components: { uGap, qnFooter, qnDataPicker },
  data() {
    return {
      form: {
        cityId: '',
        cityName: '',
        detail: '',
        districtId: '',
        districtName: '',
        enterpriseId: this.$store.state.companyInfo.id,
        id: '',
        isDefault: '0',
        provinceId: '',
        provinceName: '',
        receiver: '',
        receiverMobile: '',
        streetId: '',
        streetName: ''
      },
      hasSelected: false,
      items: [],
      id: null
    }
  },
  mounted() {
    getArea().then((res) => {
      if (res) {
        this.items = res
      }
    })
  },
  onLoad(option) {
    this.titleText = option.type
    if (option.id) {
      this.id = option.id
      this.getAddressDetail()
    }
  },
  methods: {
    back,
    // 通过id查询收货地址
    getAddressDetail() {
      getAddressDetail({ id: this.id }).then((res) => {
        // console.log('收货地址详情', res)
        if (res) {
          this.form = Object.assign({}, res)
        }
      })
    },
    onAreaChange(e) {
      if (e.detail.value && e.detail.value.length > 0) {
        const [province, city, district, street] = e.detail.value
        this.form.provinceId = province.value
        this.form.provinceName = province.text
        this.form.cityId = city.value
        this.form.cityName = city.text
        this.form.districtId = district.value
        this.form.districtName = district.text
        this.form.streetId = street.value
        this.form.streetName = street.text
      } else {
        this.form.provinceId = null
        this.form.provinceName = null
        this.form.cityId = null
        this.form.cityName = null
        this.form.districtId = null
        this.form.districtName = null
        this.form.streetId = null
        this.form.streetName = null
      }
    },
    // 设置默认地址
    switchChange(e) {
      this.form.isDefault = e.target.value ? '1' : '0'
    },
    showCompany() {},
    // 保存
    addTap() {
      createAddress(this.form).then((res) => {
        if (res) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          setTimeout(() => {
            back()
          }, 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.warpper {
  .warpper-title {
    width: 100%;
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .qn-form-item {
    width: 750rpx;
    padding: 0rpx 32rpx;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    border-bottom: 2rpx solid rgba(221, 221, 221, 0.5);
    min-height: 88rpx;
    .label {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-right: 20rpx;
      .label__text {
        font-size: 28rpx;
        color: #000000;
      }
    }
    .value {
      flex-grow: 1;
      flex-shrink: 1;
      text-align: right;
    }
  }
  .default-address {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 32rpx;
    height: 133rpx;
    background: #ffffff;
    .title {
      font-size: 30rpx;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
    }
    .tip {
      padding-top: 10rpx;
      font-size: 24rpx;
      color: #888888;
      letter-spacing: 0;
      font-weight: 400;
    }
  }
  .button-area {
    width: 750rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    .button {
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      .text {
        font-size: 30rpx;
        font-weight: 500;
        text-align: center;
      }
    }
    .button__cancel {
      width: 270rpx;
      height: 88rpx;
      border: 2rpx solid #979797;
    }
    .button__submit {
      width: 100%;
      height: 88rpx;
      background: #007aff;
    }
  }
}
</style>