wxhuanart/miniprogram/pages/mine/myaddr/edit/index.ts

//@ts-ignore
import Toast from 'tdesign-miniprogram/toast/index'
import AddressApi from '../../../../services/address'
import { areaData } from '../../../../utils/area'
import checkauth from '../../../../utils/checkauth'

const innerPhoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$'
const innerNameReg = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$'
const labelsOptions = [
  { id: 0, name: '家' },
  { id: 1, name: '公司' },
]

let privateData = {
  verifyTips: '',
}

Page({
  options: {
    multipleSlots: true,
  },
  externalClasses: ['theme-wrapper-class'],

  behaviors: [checkauth],

  /**
   * 页面的初始数据
   */
  data: {
    wait: false,
    locationState: {
      id: null,
      addressTag: '',
      cityCode: '',
      cityName: '',
      detailAddress: '',
      districtCode: '',
      districtName: '',
      isDefault: false,
      name: '',
      phone: '',
      provinceCode: '',
      provinceName: '',
      isEdit: false,
      isOrderDetail: false,
      isOrderSure: false,
      labelIndex: null,
    },
    areaData: areaData,
    labels: labelsOptions,
    areaPickerVisible: false,
    submitActive: false,
    visible: false,
    labelValue: '',
    columns: 3,
  },

  init() {
    const id = this.data.locationState.id
    if (id && Number(id) > 0) {
      this.setData({
        wait: true,
      })
      AddressApi.GetForEdit({
        id,
      })
        .then((rsp) => {
          const { result } = rsp
          if (result && result.wxAddress) {
            const addr = result.wxAddress

            const tag = addr.addressTag
            let labelIndex = null
            if (tag && tag.length > 0) {
              const { labels } = this.data
              const find = labels.filter((o) => o.name === tag)
              console.log('find', find)
              if (!find || find.length === 0) {
                console.log('create')
                labelIndex = labels[labels.length - 1].id + 1
                this.setData({
                  labels: [...labels, { id: labelIndex, name: tag }],
                })
              } else {
                labelIndex = find[0].id
              }
            }

            this.setData(
              {
                wait: false,
                locationState: {
                  ...addr,
                  labelIndex,
                },
              },
              () => {
                const { isLegal, tips } = this.onVerifyInputLegal()
                this.setData({
                  submitActive: isLegal,
                })
                privateData.verifyTips = tips
              },
            )
          }
        })
        .catch(() => {
          this.setData({
            wait: false,
          })
        })
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  //@ts-ignore
  onLoad(query: { id: number }) {
    const { id = -1 } = query
    this.setData({
      'locationState.id': id,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const self = this
    //@ts-ignore
    this.afterAuth(() => {
      self.init()
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {},
  onPickArea() {
    this.setData({ areaPickerVisible: true })
  },
  onPickLabels(e: WechatMiniprogram.CustomEvent<{}, {}, { item: any }>) {
    const { item } = e.currentTarget.dataset
    const {
      locationState: { labelIndex = undefined },
      labels = [],
    } = this.data
    let payload = {
      labelIndex: item,
      addressTag: labels[item].name,
    }
    if (item === labelIndex) {
      payload = { labelIndex: null, addressTag: '' }
    }
    this.setData({
      'locationState.labelIndex': payload.labelIndex,
      'locationState.addressTag': payload.addressTag,
    })
    this.triggerEvent('triggerUpdateValue', payload)
  },
  addLabels() {
    this.setData({
      visible: true,
    })
  },
  confirmHandle() {
    const { labels, labelValue } = this.data
    this.setData({
      visible: false,
      labels: [...labels, { id: labels[labels.length - 1].id + 1, name: labelValue }],
      labelValue: '',
    })
  },
  cancelHandle() {
    this.setData({
      visible: false,
      labelValue: '',
    })
  },
  onCheckDefaultAddress({ detail }: { detail: { value: boolean } }) {
    const { value } = detail
    this.setData({
      'locationState.isDefault': value,
    })
  },
  onInputValue(
    e: WechatMiniprogram.CustomEvent<
      { value: string; areas: { code: string; name: string }[] },
      {},
      { item: string }
    >,
  ) {
    const { item } = e.currentTarget.dataset
    const { value = '', areas = [] } = e.detail
    if (item === 'address') {
      this.setData(
        {
          'locationState.provinceCode': areas[0].code,
          'locationState.provinceName': areas[0].name,
          'locationState.cityName': areas[1].name,
          'locationState.cityCode': areas[1].code,
          'locationState.districtCode': areas[2].code,
          'locationState.districtName': areas[2].name,
          areaPickerVisible: false,
        },
        () => {
          const { isLegal, tips } = this.onVerifyInputLegal()
          this.setData({
            submitActive: isLegal,
          })
          privateData.verifyTips = tips
        },
      )
    } else {
      this.setData(
        {
          [`locationState.${item}`]: value,
        },
        () => {
          const { isLegal, tips } = this.onVerifyInputLegal()
          this.setData({
            submitActive: isLegal,
          })
          privateData.verifyTips = tips
        },
      )
    }
  },
  onVerifyInputLegal() {
    const { name, phone, detailAddress, districtName } = this.data.locationState
    const nameRegExp = new RegExp(innerNameReg)
    const phoneRegExp = new RegExp(innerPhoneReg)

    if (!name || !name.trim()) {
      return {
        isLegal: false,
        tips: '请填写收货人',
      }
    }
    if (!nameRegExp.test(name)) {
      return {
        isLegal: false,
        tips: '收货人仅支持输入中文、英文（区分大小写）、数字',
      }
    }
    if (!phone || !phone.trim()) {
      return {
        isLegal: false,
        tips: '请填写手机号',
      }
    }
    if (!phoneRegExp.test(phone)) {
      return {
        isLegal: false,
        tips: '请填写正确的手机号',
      }
    }
    if (!districtName || !districtName.trim()) {
      return {
        isLegal: false,
        tips: '请选择省市区信息',
      }
    }
    if (!detailAddress || !detailAddress.trim()) {
      return {
        isLegal: false,
        tips: '请完善详细地址',
      }
    }
    if (detailAddress && detailAddress.trim().length > 50) {
      return {
        isLegal: false,
        tips: '详细地址不能超过50个字符',
      }
    }
    return {
      isLegal: true,
      tips: '',
    }
  },
  formSubmit() {
    const { submitActive } = this.data
    if (!submitActive) {
      Toast({
        context: this,
        selector: '#t-toast',
        message: privateData.verifyTips,
        icon: '',
        duration: 1000,
      })
      return
    }
    const { locationState } = this.data

    const bag = {
      id: null,
      phone: locationState.phone,
      name: locationState.name,
      provinceName: locationState.provinceName,
      provinceCode: locationState.provinceCode,
      cityName: locationState.cityName,
      cityCode: locationState.cityCode,
      districtName: locationState.districtName,
      districtCode: locationState.districtCode,
      detailAddress: locationState.detailAddress,
      isDefault: locationState.isDefault,
      addressTag: locationState.addressTag,
      // latitude: locationState.latitude,
      // longitude: locationState.longitude,
    }

    if (Number(locationState.id) > 0) {
      bag.id = locationState.id
    }

    this.setData({
      wait: true,
    })

    AddressApi.CreateOrUpdate({
      wxAddress: bag,
    })
      .then((rsp) => {
        this.setData({
          wait: false,
        })
        if (rsp.result > 0) {
          wx.navigateBack({ delta: 1 })
        }
      })
      .catch(() => {
        this.setData({
          wait: false,
        })
      })
  },
})