app内嵌H5的上传图片的功能

1.上传组件

<!--
  - hasBorder {Boolean} cell底部边框，oneline 为 true 有效
  - inlineBorder {Boolean} cell底部短边框
  - height
  - titleColor {String} 标题颜色
  - readOnly {Boolean} date/radio/address 类型只读
  - inputData @updateValue传递value 获取 输出String或Number，address类型输出 [provinceId, cityId]
  以下参数只用于 radio 类型
  - radioValues {Array} 单选选项数组，["苹果","橘子"] 或 [{name: "苹果",value: "apple"}]（updateValue传递value）
  - labelKey {String} 数组项为对象类型时要显示值的 key
  - emitObject {Boolean} 数组项为对象时决定是否将选中的整个对象上报
  - radio 示例
    <form-cell title="单选"
              :readOnly="false"
              :value="radioValue"
              titleColor="#575fb6"
              inputType="radio"
              :oneLine="true"
              :arrow="true"
              :radio-values="[{name:'苹果', value:'apple'},{name:'桔子', value:'orange'}]"
              @updateValue="val => {radioValue = val}"
              ></form-cell>
  - address 示例
    <form-cell title="省市选择"
              :readOnly="false" // true 不可点击，可返回绑定 value 对应的 name
              :value="addressIdArr" // {Array || ''} 数组前两项必须为[provinceId,cityId]，输出第三项为'广东省广州市'
              titleColor="#575fb6"
              inputType="address"
              :oneLine="true"
              :arrow="true"
              @updateValue="val => {addressIdArr = val}"
              ></form-cell>
-->
<template>
  <div>
    <div class="cell-wrapper new-line" v-if="!oneLine">
      <span class="title"
            @click="activeInput"
            :style="{ color: titleColor, lineHeight: height }">{{ title }}</span>
      <span class="value value-single-line"
            v-if="inputType === 'number'">
        <span class="icon-edit" v-if="!disabled"></span>
        <input v-if="!disabled"
               v-model="inputData"
               ref="numberInput"
               :style="{'text-align': textAlign}"
               @change="updateValue"
               type="number"
               :placeholder="placeholder">
        <span v-else>{{ inputData }}</span>
        <span v-show="inputData && !disabled"
              @click="emptyInput"
              class="btn__empty"></span>
        <!-- <span v-show="inputData"
              class="icon-empty__inline-text"
              @click="emptyInput"
              ></span> -->
        <span class="input-unit">{{unit}}</span>
      </span>
      <span class="value value-single-line"
            v-if="inputType === 'text'">
        <span class="icon-edit" v-if="!disabled"></span>
        <input v-if="!disabled"
               v-model="inputData"
               ref="textInput"
               :style="{'text-align': textAlign}"
               @change="updateValue"
               @blur="handleInputBlur"
               type="text"
               :placeholder="placeholder">
        <span v-else>{{ inputData }}</span>
        <span v-show="inputData && !disabled"
              @click="emptyInput"
              class="btn__empty"></span>
        <!-- <span v-show="inputData"
              class="icon-empty__inline-text"
              @click="emptyInput"
              ></span> -->
      </span>
      <span v-if="inputType === 'textarea'"
            v-show="inputData && !disabled"
            @click="emptyInput"
            class="btn__empty-textarea">清除</span>
      <span class="value"
            v-if="inputType === 'textarea'">
            <span class="icon-edit"
                  v-if="showIcon && !disabled"></span>
            <!-- <div class="auto-height">
              <pre><br>{{ inputData }}</pre> -->
            <span class="icon-history" v-if="showHistory" @click="selectHistory"></span>
            <textarea v-if="!disabled" ref="remark" v-autosize="inputData" v-model="inputData" @change="updateValue" :rows="rows" :placeholder="placeholder"
            :style="fixHistory"></textarea>
            <span v-else>{{ inputData }}</span>
            <!-- </div> -->
      </span>
      <div v-if="inlineBorder"
          class="inline-border"></div>
      <slot></slot>
    </div>
    <div class="cell-wrapper one-line" v-else
         :class="{ 'has-border': hasBorder}"
         :style="{ minHeight: height }">
      <span class="title"
            v-if="!multiLine"
            @click="activeInput"
            :style="{ color: titleColor, width: titleWidth, lineHeight: height }">{{ title }}</span>
      <span class="title-multiLine"
            v-else
            :style="{ color: titleColor}">{{ title }}</span>
      <span class="value"
            :style="{ lineHeight: height, color: valueColor }"
            v-if="readOnly && !multiLine && !isLabelShowing">{{ value }}</span>
      <span class="value value-multiLine"
            :style="{ color: valueColor }"
            v-if="readOnly && multiLine && !isLabelShowing">{{ value }}</span>
      <span class="value switch-wrapper"
            v-if="inputType === 'switch' && !readOnly">
        <mt-switch v-model="inputData" @change="updateValue"></mt-switch>
      </span>
      <span v-if="inputType === 'date' && !readOnly"
            class="value date">
        <input v-model="inputData"
               @click="selectDate"
               :style="{ lineHeight: height }">
        <mt-datetime-picker
          :value="startDate"
          ref="picker"
          type="date"
          @confirm="updateDate"
          @touchmove.prevent.stop.native>
        </mt-datetime-picker>
      </span>
      <span v-if="inputType === 'time' && !readOnly"
            class="value date">
        <input v-model="inputData"
               @click="selectDate"
               :style="{ lineHeight: height }">
        <mt-datetime-picker
          :value="startDate"
          ref="picker"
          type="dateTime"
          @confirm="updateDate"
          @touchmove.prevent.stop.native>
        </mt-datetime-picker>
      </span>
      <span v-if="inputType === 'radio'"
            class="value date">
        <input v-model="popupLabel"
               @click="showPopup"
               :style="{ lineHeight: height }">
        <popup-picker ref="radio"
                      :picker-type="inputType"
                      :radio-values="radioValues"
                      :label-key="labelKey"
                      :value="value"
                      :emitObject="emitObject"
                      @updateLabel="setLabelandArrow"
                      @confirm="confirmPopup">
        </popup-picker>
      </span>
      <span v-if="inputType === 'address'"
            class="value date">
        <input v-model="popupLabel"
               @click="showPopup"
               :style="{ lineHeight: height }">
        <popup-picker ref="address"
                      :picker-type="inputType"
                      :value="value"
                      :provinceList="provinceList"
                      :cityList="cityList"
                      :label-key="labelKey"
                      :addressSlotsObject="addressSlotsObject"
                      @updateLabel="setLabelandArrow"
                      @confirm="confirmPopup">
        </popup-picker>
      </span>
      <span v-if="inputType === 'counties'"
            class="value date">
        <input v-model="popupLabel"
               @click="showPopup"
               :style="{ lineHeight: height }">
        <popup-picker ref="counties"
                      :picker-type="inputType"
                      :value="value"
                      :saveCityMap="saveCityMap"
                      :needCounties="needCounties"
                      @updateLabel="setLabelandArrow"
                      @confirm="confirmPopup">
        </popup-picker>
      </span>
      <span v-if="inputType === 'dateTime'"
            class="value date">
        <input v-model="value"
               @click="showPopup"
               :style="{ lineHeight: height }">
        <popup-picker ref="dateTime"
                      :picker-type="inputType"
                      :value="value"
                      @updateLabel="setLabelandArrow"
                      @confirm="confirmPopup">
        </popup-picker>
      </span>
      <span class="arrow" v-show="arrow"></span>
      <div v-if="inlineBorder"
          class="inline-border"></div>
    </div>
  </div>
</template>

<script>
import PopupPicker from './formCellPicker'
export default {
  name: 'formCell',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    hasBorder: {
      type: Boolean,
      default: false
    },
    inlineBorder: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '1.333rem'
    },
    titleColor: {
      type: String,
      default: '#999999'
    },
    readOnly: {
      type: Boolean,
      default: true
    },
    unit: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      required: true
    },
    titleWidth: {
      type: String
    },
    value: {
      require: true
    },
    valueColor: {
      type: String,
      default: '#4a4a4a'
    },
    multiLine: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    arrow: {
      type: Boolean,
      default: false
    },
    inputType: {
      type: String,
      default: 'text'
    },
    oneLine: {
      type: Boolean,
      defalut: false
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    textAlign: {
      type: String,
      default: 'left'
    },
    radioValues: {
      type: Array
    },
    labelKey: {
      type: String
    },
    rows: {
      type: Number,
      default: 1
    },
    reportFocusAndBlur: {
      type: Boolean,
      defalut: false
    },
    showHistory: {
      type: Boolean,
      default: false
    },
    saveCityMap: {
      type: Boolean,
      default: false
    },
    needCounties: {
      type: Boolean,
      default: false
    },
    provinceList: {
      type: Array,
      defalut: () => { return [] }
    },
    cityList: {
      type: Object,
      defalut: () => { return {} }
    },
    emitObject: {
      type: Boolean,
      defalut: false
    },
    addressSlotsObject: {
      type: String,
      default: 'NONE'
    }
  },
  components: {
    PopupPicker
  },
  data () {
    return {
      inputData: '',
      showArrow: false,
      startDate: new Date(),
      popupLabel: '',
      isIos: /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent),
      isAndroid: /(Android)/i.test(navigator.userAgent),
      fixHistory: {
        paddingRight: this.showHistory ? '1rem' : 0
      }
    }
  },
  computed: {
    isLabelShowing () {
      return this.inputType === 'radio' || this.inputType === 'address' || this.inputType === 'counties' || this.inputType === 'dateTime'
    }
  },
  created () {
    this.inputData = this.value
    this.showArrow = this.arrow
  },
  mounted () {
    this.inputData = this.value
    this.showArrow = this.arrow
    if (this.inputData && (this.inputType === 'time' || this.inputType === 'date')) {
      this.startDate = new Date(this.inputData.replace('-', '/'))
    }
    if (this.reportFocusAndBlur) {
      let inputEl = 'textInput'
      if (this.inputType === 'number') {
        inputEl = 'numberInput'
      }
      if (this.inputType === 'textarea') {
        inputEl = 'remark'
      }
      let that = this
      this.$refs[inputEl].addEventListener('focus', () => {
        setTimeout(() => {
          that.$emit('inputFocus')
        }, 100)
      })
      this.$refs[inputEl].addEventListener('blur', () => {
        setTimeout(() => {
          that.$emit('inputBlur')
        }, 100)
      })
    }
    if (this.inputType === 'number') {
      this.$refs['numberInput'].addEventListener('paste', (e) => {
        if (!(e.clipboardData && e.clipboardData.items)) {
          return
        }
        let that = this
        for (let i = 0, len = e.clipboardData.items.length; i < len; i++) {
          let item = e.clipboardData.items[i]
          if (item.kind === 'string') {
            item.getAsString((string) => {
              that.inputData = string ? string.replace(/[^\d]/g, '') : ''
            })
          }
        }
      })
    }
  },
  watch: {
    value: function () {
      this.inputData = this.value
    },
    inputData: function () {
      this.$emit('updateValue', this.inputData)
    }
  },
  methods: {
    updateValue () {
      this.$emit('updateValue', this.inputData)
    },
    handleInputBlur () {
      this.$emit('handleBlur')
    },
    selectHistory () {
      this.$emit('history')
    },
    activeInput () {
      if (this.inputType === 'date') {
        this.selectDate()
      }
      if (this.inputType === 'radio' || this.inputType === 'address' || this.inputType === 'counties' || this.inputType === 'dateTime') {
        this.showPopup()
      }
      if (this.inputType === 'textarea') {
        this.$refs.remark.focus()
      }
      if (this.inputType === 'number') {
        this.$refs.numberInput.focus()
      }
      if (this.inputType === 'text') {
        this.$refs.textInput.focus()
      }
    },
    emptyInput () {
      this.inputData = ''
      this.activeInput()
    },
    selectDate () {
      document.activeElement.blur()
      this.$mint.delayWhileInputFocus(() => {
        this.$refs.picker.open()
      })
    },
    updateDate (value) {
      let year = value.getFullYear()
      let month = value.getMonth() + 1
      let day = value.getDate()
      if (this.inputType === 'date') {
        this.inputData = year + '-' + month + '-' + day
      }
      if (this.inputType === 'time') {
        let hour = value.getHours() < 10 ? '0' + value.getHours() : value.getHours()
        let minute = value.getMinutes() < 10 ? '0' + value.getMinutes() : value.getMinutes()
        this.inputData = year + '-' + month + '-' + day + ' ' + hour + ':' + minute
      }
      this.$emit('updateValue', this.inputData)
    },
    showPopup () {
      document.activeElement.blur()
      if (this.readOnly) {
        return
      }
      this.$mint.delayWhileInputFocus(() => {
        if (this.inputType === 'radio') {
          this.$refs.radio.open()
        } else if (this.inputType === 'address') {
          this.$refs.address.open()
        } else if (this.inputType === 'counties') {
          this.$refs.counties.open()
        } else if (this.inputType === 'dateTime') {
          this.$refs.dateTime.open()
        }
      })
    },
    confirmPopup (obj) {
      this.inputData = obj.val
      // this.showArrow = obj.showArrow
      this.$emit('updateValue', this.inputData)
    },
    setLabelandArrow (val) {
      this.popupLabel = val
      this.$emit('updateLabel', val)
      // this.$nextTick(()=>{this.showArrow = !val})
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~@/assets/mixin.stylus"
.cell-wrapper{
  position relative
  font-dpr(16px)
  padding 0 .5rem
  background-color white
  vertical-align middle
  box-sizing border-box
  .title{
    width 3.5rem
  }
  .title-multiLine{
    display inline-block
    width 3.5rem
    height 1.2rem
    line-height 1.2rem
  }
  .value{
    position relative
    display inline-block
    width 5.5rem
    // color #4A4A4A
    .auto-height{
      position relative
      padding .1rem 0
      pre{
        display block
        visibility hidden
        line-height normal
      }
    }
  }
  .switch-wrapper{
    display flex
    justify-content flex-end
  }
  .btn__empty-textarea {
    position absolute
    top .4rem
    right .5rem
    display inline-block
    width 1.2rem
    height .5rem
    line-height .5rem
    text-align center
    border-radius .3rem
    background-color #D8D8D8
    font-dpr(12px)
    color #4a4a4a
  }
  .value-multiLine{
    padding .32rem 0
    word-wrap break-word
    // line-height .7rem
  }
  .arrow{
    position relative
    top .45rem
    display inline-block
    width .2rem
    height .4rem
    bg-image('~@/assets/img/arrow')
    background-size contain
    margin-left .3rem
  }
  .inline-border{
    position absolute
    bottom 0
    left .4rem
    width 9.6rem
    height 1px
    background-color #ECECEC
  }
}
.new-line{
  .value{
    display flex
    width 100%
    padding-bottom .3rem
    .icon-edit{
      position relative
      top .05rem
      display inline-block
      width .45rem
      height .45rem
      padding-right .3rem
      bg-image('img/pen')
      background-size contain
    }
    .icon-history{
      position absolute
      right 0
      bottom .3rem
      display inline-block
      width .56rem
      height .56rem
      bg-image('img/record')
      background-size contain
      z-index 11
    }
    input{
      height .6rem
      width 100%
      margin-right .2rem
      text-align left
      color #4a4a4a
      &:placeholder {
        font-dpr(16px)
        color #979797
      }
      &::-webkit-input-placeholder {
        font-dpr(16px)
        color #979797
      }
      &:-moz-placeholder {
        font-dpr(16px)
        color #979797
      }
      &::-moz-placeholder {
        font-dpr(16px)
        color #979797
      }
      &:-ms-input-placeholder {
        font-dpr(16px)
        color #979797
      }
    }
    .btn__empty {
      display inline-block
      width .5rem
      height .5rem
      bg-image('./img/close')
      background-size contain
      position relative
      top .08rem
    }
    .icon-empty__inline-text {
      float right
      position relative
      display inline-block
      height .6rem
      width .6rem
      margin-right .2rem
      bg-image('~@detailComponents/img/delete')
      background-size contain
    }
    textarea{
      font-dpr(16px)
      position relative
      width 100%
      color #4a4a4a
      &:placeholder {
        font-dpr(16px)
        color #979797
      }
      &::-webkit-input-placeholder {
        font-dpr(16px)
        color #979797
      }
      &:-moz-placeholder {
        font-dpr(16px)
        color #979797
      }
      &::-moz-placeholder {
        font-dpr(16px)
        color #979797
      }
      &:-ms-input-placeholder {
        font-dpr(16px)
        color #979797
      }
    }
  }
}
.one-line{
  display flex
  .value{
    text-align right
  }
  .switch-wrapper{
    display flex
    justify-content flex-end
  }
  .date{
    input{
      width 100%
      text-align right
    }
  }
}
.has-border{
  border-bottom 1px solid #ECECEC
}
</style>

<template>
  <div>
    <mt-popup v-if="pickerType === 'radio'"
      v-model="popupVisible"
      class="lx-popup"
      position="bottom">
      <mt-picker @touchmove.prevent.stop.native
        ref="radio"
        :slots="radioSlots"
        :value-key="labelKey"
        show-toolbar>
        <span class="mint-datetime-action mint-datetime-cancel" @click="popupVisible=false">取消</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click="confirmRadio">确认</span>
      </mt-picker>
    </mt-popup>
    <mt-popup v-else-if="pickerType === 'address'"
      v-model="popupVisible"
      class="lx-popup"
      position="bottom">
      <mt-picker @touchmove.prevent.stop.native
        ref="address"
        @change="onAddressChange"
        :slots="addressSlots"
        :value-key="labelKey"
        show-toolbar>
        <span class="mint-datetime-action mint-datetime-cancel" @click="popupVisible=false">取消</span>
        <span class="mint-datetime-action mint-datetime-confirm" @click="confirmAddress">确认</span>
      </mt-picker>
    </mt-popup>
    <mt-popup v-else-if="pickerType === 'counties'"
      v-model="popupVisible"
      class="lx-popup"
      position="bottom">
      <mt-picker @touchmove.prevent.stop.native
        ref="counties"
        @change="onCountiesChange"
        :slots="countiesSlots"
        value-key="name"
        show-toolbar>
        <span class="mint-datetime-action mint-datetime-cancel"
              :class="{'lx-action__with-title': title}" @click="popupVisible=false">取消</span>
        <span class="lx-picker-title" v-if="title">{{title}}</span>
        <span class="mint-datetime-action mint-datetime-confirm"
              :class="{'lx-action__with-title': title}"  @click="confirmCounties">确认</span>
      </mt-picker>
    </mt-popup>
    <mt-popup v-else-if="pickerType === 'dateTime'"
      v-model="popupVisible"
      class="lx-popup"
      position="bottom">
      <mt-picker @touchmove.prevent.stop.native
        ref="dateTime"
        @change="onTimeChange"
        :slots="dateTimeSlots"
        show-toolbar>
        <span class="mint-datetime-action mint-datetime-cancel"
              :class="{'lx-action__with-title': title}" @click="popupVisible=false">取消</span>
        <span class="lx-picker-title" v-if="title">{{title}}</span>
        <span class="mint-datetime-action mint-datetime-confirm"
              :class="{'lx-action__with-title': title}"  @click="confirmTime">确认</span>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import store from '@/utils/store'
import mapCity from '@/api/mapAsk'
let loadingAddress = false

export default {
  name: 'PopupPicker',
  props: {
    pickerType: {
      type: String
    },
    radioValues: {
      type: Array
    },
    labelKey: {
      type: String,
      default: 'name'
    },
    value: {
      default: ''
    },
    title: {
      default: ''
    },
    saveCityMap: {
      type: Boolean,
      default: false
    },
    needCounties: {
      type: Boolean,
      default: false
    },
    provinceList: {
      type: Array,
      default: () => { return [] }
    },
    cityList: {
      type: Object,
      default: () => { return {} }
    },
    emitObject: {
      type: Boolean,
      default: false
    },
    /**
     *  address picker 组件判断各slot内部选项是否为对象 NONE--都不是  FIRST--第一个slot为对象 LAST--最后一个slot为对象
     *  BOTH--都是对象
     */
    addressSlotsObject: {
      type: String,
      default: 'NONE'
    }
  },
  data () {
    return {
      popupVisible: false,
      selectedRadioIndex: 0,
      selectAddressIndex: [0, 0],
      selectCountiesIndex: [0, 0, 0],
      selectTimeIndex: [0, 0, 0],
      dateForOddMonth: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
      dateForEvenMonth: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
      addressData: [],
      addressSlots: [
        {
          flex: 1,
          values: [],
          textAlign: 'center'
        }, {
          divider: true,
          content: '-'
        }, {
          flex: 1,
          values: [],
          textAlign: 'center'
        }
      ],
      countiesSlots: [
        {
          flex: 1,
          values: [],
          textAlign: 'center'
        }, {
          flex: 1,
          values: [],
          textAlign: 'center'
        }, {
          flex: 1,
          values: [],
          textAlign: 'center'
        }
      ],
      dateTimeSlots: [
        {
          flex: 0.5,
          values: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          textAlign: 'right'
        },
        {
          flex: 0.5,
          values: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
          textAlign: 'left'
        },
        {
          flex: 1,
          values: ['0:00 - 0:30', '0:30 - 1:00', '1:00 - 1:30', '1:30 - 2:00', '2:00 - 2:30', '2:30 - 3:00', '3:00 - 3:30', '3:30 - 4:00', '4:00 - 4:30', '4:30 - 5:00', '5:00 - 5:30', '5:30 - 6:00', '6:00 - 6:30', '6:30 - 7:00', '7:00 - 7:30', '7:30 - 8:00', '8:00 - 8:30', '8:30 - 9:00', '9:00 - 9:30', '9:30 - 10:00', '10:00 - 10:30', '10:30 - 11:00', '11:00 - 11:30', '11:30 - 12:00', '12:00 - 12:30', '12:30 - 13:00', '13:00 - 13:30', '13:30 - 14:00', '14:00 - 14:30', '14:30 - 15:00', '15:00 - 15:30', '15:30 - 16:00', '16:00 - 16:30', '16:30 - 17:00', '17:00 - 17:30', '17:30 - 18:00', '18:00 - 18:30', '18:30 - 19:00', '19:00 - 19:30', '19:30 - 20:00', '20:00 - 20:30', '20:30 - 21:00', '21:00 - 21:30', '21:30 - 22:00', '22:00 - 22:30', '22:30 - 23:00', '23:00 - 23:30', '23:30 - 24:00'],
          textAlign: 'center'
        }
      ]
    }
  },
  computed: {
    dateForFeb () {
      let year = new Date().getFullYear()
      if (year % (year % 100 ? 4 : 400)) {
        return ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日']
      } else {
        return ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日']
      }
    },
    radioSlots () {
      if (this.pickerType !== 'radio') {
        return []
      }
      const arr = this.radioValues.slice()
      if (arr.length === 0) {
        return []
      }
      if (typeof arr[0] !== 'object') {
        // if (arr[0] !== '请选择') {arr.splice(0,0,'请选择')}
        return [{
          flex: 1,
          values: arr
        }]
      } else {
        // if (arr[0][this.labelKey] !== '请选择') {
        //   const obj ={}
        //   obj[this.labelKey] = '请选择'
        //   obj.value = ''
        //   arr.splice(0,0,obj)
        // }
        return [{
          flex: 1,
          values: arr
        }]
      }
    },
    label () {
      if (this.pickerType === 'radio') {
        if (this.radioValues.length === 0) {
          return ''
        }
        // radioValues 数组元素不是对象直接返回
        if (Object.prototype.toString.call(this.radioValues[0]) !== '[object Object]') {
          this.selectedRadioIndex = this.radioValues.indexOf(this.value)
          return this.value
        }
        // 是对象进行对比
        const values = this.radioValues
        for (let i = 0; i < values.length; i++) {
          const obj = values[i]
          if (obj.value && this.value === obj.value) {
            this.selectedRadioIndex = i
            return obj[this.labelKey]
          } else if (this.value === obj[this.labelKey]) {
            this.selectedRadioIndex = i
            return obj[this.labelKey]
          }
        }
      } else if (this.pickerType === 'counties') {
        if (this.addressData.length === 0 || !this.isArray(this.value)) {
          return ''
        }
        const selectedProvinceId = this.value[0]
        const selectedCityId = this.value[1]
        const selectedCountyId = this.value[2]
        for (var i = 0; i < this.addressData.length; i++) {
          const province = this.addressData[i]
          if (selectedProvinceId === province.id) {
            for (var j = 0; j < province.cities.length; j++) {
              const city = province.cities[j]
              if (selectedCityId === city.id) {
                if (this.pickerType === 'address') {
                  this.selectAddressIndex = [i, j]
                  return `${province.name} ${city.name}`
                } else {
                  for (var k = 0; k < city.counties.length; k++) {
                    const county = city.counties[k]
                    if (selectedCountyId === county.id) {
                      this.selectCountiesIndex = [i, j, k]
                      return `${province.name} ${city.name} ${county.name !== '暂不选择' ? county.name : ''}`
                    }
                  }
                }
              }
            }
          }
        }
      } else if (this.pickerType === 'address') {
        if (this.provinceList.length === 0 || !this.isArray(this.value)) {
          return ''
        }
        const values = this.value
        let label = ''
        switch (this.addressSlotsObject) {
          case 'NONE':
            label = `${values[0]}${values[1]}`
            break
          case 'FIRST':
            label = `${values[0][this.labelKey]}${values[1]}`
            break
          case 'LAST':
            label = `${values[0]}${values[1][this.labelKey]}`
            break
          case 'BOTH':
            label = `${values[0][this.labelKey]}${values[1][this.labelKey]}`
            break
          default:
            label = `${values[0]}${values[1]}`
            break
        }
        return label
      }
      return ''
    }
  },
  watch: {
    label (val) {
      this.$emit('updateLabel', val)
    }
  },
  methods: {
    open () {
      if (this.pickerType === 'radio') {
        this.$nextTick(() => {
          this.$refs.radio.setValues([this.radioValues[this.selectedRadioIndex]])
        })
        this.popupVisible = true
        // if (this.selectedRadioIndex < 0) return
      } else if (this.pickerType === 'address') {
        if (this.provinceList && this.provinceList.length > 0) {
          this.addressSlots[0].values = this.provinceList
          this.addressSlots[2].values = this.cityList[this.provinceList[0]]
          if (this.value[0]) {
            this.addressSlots[2].values = this.cityList[this.value[0]]
          }
          this.popupVisible = true
        }
        const values = this.value.length === 0 ? [this.provinceList[0], this.cityList[this.provinceList[0]][0]] : this.value
        this.$refs.address.setValues(values)
      } else if (this.pickerType === 'counties') {
        if (this.addressData.length === 0) {
          loadingAddress = true
          this.$indicator.open()
          this.getAddressData()
        } else {
          this.popupVisible = true
        }
        if (!this.isArray(this.selectCountiesIndex)) {
          return
        }
        // if (this.selectCountiesIndex[0] < 0&&this.selectCountiesIndex[1] < 0) {return}
        const selectedProvince = this.addressData[this.selectCountiesIndex[0]]
        const selectedCity = selectedProvince.cities[this.selectCountiesIndex[1]]
        const selectCounty = selectedCity.counties[this.selectCountiesIndex[2]]
        this.$refs.counties.setValues([selectedProvince, selectedCity, selectCounty])
      } else if (this.pickerType === 'dateTime') {
        this.popupVisible = true
        if (this.value) {
          const month = this.value.split('月')[0] === this.value ? '1月' : this.value.split('月')[0] + '月'
          let day = '1日'
          if (this.value.split('月')[1]) {
            day = this.value.split('月')[1].split('日')[0] + '日'
          }
          let time = '0:00 - 0:30'
          let values = this.value.split('')
          if (values.length === 4) {
            time = `${values[1]} - ${values[3]}`
          }
          this.$refs.dateTime.setValues([month, day, time])
        } else {
          let month = new Date().getMonth() + 1 + '月'
          let date = new Date().getDate() + '日'
          this.$refs.dateTime.setValues([month, date, '0:00 - 0:30'])
        }
      }
    },
    confirmRadio () {
      let val
      const valArr = this.$refs.radio.getValues()
      const temVal = valArr[0]
      if (typeof temVal === 'undefined') {
        this.popupVisible = false
        return
      }
      if (this.emitObject) {
        val = typeof temVal === 'object' ? temVal : {}
      } else {
        val = typeof temVal === 'object' ? temVal.value : temVal
        val = val === '请选择' ? '' : val
      }
      this.popupVisible = false
      this.$emit('confirm', {
        val
      })
    },
    confirmAddress () {
      const values = this.$refs.address.getValues()
      // const pickerSlots = this.$refs.address.$children
      // this.selectAddressIndex = [pickerSlots[0].valueIndex, pickerSlots[2].valueIndex]
      this.popupVisible = false
      this.$emit('confirm', {
        val: [values[0], values[1]]
        // label: `${values[0].name} ${values[1].name}`,
        // showArrow: false
      })
    },
    onAddressChange (picker, values) {
      for (let i = 0; i < this.provinceList.length; i++) {
        if (values[0] === this.provinceList[i]) {
          picker.setSlotValues(1, this.cityList[values[0]])
          break
        }
      }
    },
    confirmCounties () {
      const values = this.$refs.counties.getValues()
      const label = `${values[0].name}${values[1].name}${values[2].name !== '暂不选择' ? values[2].name : ''}`
      this.popupVisible = false
      this.$emit('confirm', {
        val: [values[0].id, values[1].id, values[2].id, label]
      })
    },
    onCountiesChange (picker, values) {
      for (let i = 0; i < this.addressData.length; i++) {
        if (values[0].id === this.addressData[i].id) {
          const cities = this.addressData[i].cities
          picker.setSlotValues(1, cities)
          for (let j = 0; j < cities.length; j++) {
            if (!values[1]) return
            if (values[1].id === cities[j].id) {
              // 增加区暂不选择选项
              if (cities[j].counties[0].name !== '暂不选择' && !this.needCounties) {
                cities[j].counties.unshift({id: '', name: '暂不选择'})
              }
              picker.setSlotValues(2, cities[j].counties)
              break
            }
          }
        }
      }
    },
    onTimeChange (picker, values) {
      if (values[0] === '2月') {
        picker.setSlotValues(1, this.dateForFeb)
        return
      }
      if (values[0] === '4月' || values[0] === '6月' || values[0] === '9月' || values[0] === '11月') {
        picker.setSlotValues(1, this.dateForEvenMonth)
        return
      }
      picker.setSlotValues(1, this.dateForOddMonth)
    },
    confirmTime () {
      const values = this.$refs.dateTime.getValues()
      const value = `${values[0]}${values[1]} ${values[2]}`
      this.popupVisible = false
      this.$emit('confirm', {
        val: value
      })
    },
    getAddressData () {
      if (!this.pickerType || this.pickerType === 'radio' || this.pickerType === 'dateTime') {
        return
      }
      mapCity().then(res => {
        this.$indicator.close()
        if (res.status === 200) {
          if (loadingAddress) {
            this.popupVisible = true
            loadingAddress = false
          }
          this.addressData = res.data.data
          if (this.saveCityMap) {
            store.set('vehicle-map-city', this.addressData)
          }
          if (this.pickerType === 'address') {
            const slots = this.addressSlots
            slots[0].values = this.addressData
          } else if (this.pickerType === 'counties') {
            const slots = this.countiesSlots
            slots[0].values = this.addressData
          }
        } else {
          if (loadingAddress) {
            this.$toast({
              message: '获取地址列表失败，请稍后重试',
              iconClass: 'icon icon-warning'
            })
            loadingAddress = false
          }
          console.log(res.data.message)
        }
      })
    },
    isArray (item) {
      return Object.prototype.toString.call(item) === '[object Array]'
    }
  },
  created () {
    if (this.pickerType === 'counties') {
      this.getAddressData()
    }
  },
  mounted () {
    this.$emit('updateLabel', this.label)
  }
}
</script>

<style lang="stylus" scoped>
  @import "~@/assets/mixin.stylus"
  .lx-popup {
    width: 100%
    // 取消确定键栏
    >>> .picker-toolbar {
      border-bottom 1px solid #eaeaea
    }
  }
  .lx-picker-title
    display inline-block
    width 60%
    line-height 40px
    text-align center
    font-dpr(16px)
  .lx-action__with-title
    width 20%
</style>

<image-cell @click.native="uploadImage('idCardPics', '身份证正反面')"
                :imageTitle="'身份证正反面'"
                :titleColor="titleColor"
                :image="searchCar.idCardPics"
                :hasBorder="true">
    </image-cell>

   uploadImage (tag, title) {
      const that = this
      let images = that.searchCar[tag] || []
      let data = {
        functionName: 'sendImage',
        data: {
          tag: tag,
          imageUrl: images,
          countLimit: 9,
          title: title,
          compression: 0.8,
          editable: true
        }
      }
      try {
        window.JSBridge.navigationTo('imagePick', JSON.stringify(data))
      } catch (error) {
        console.error(error)
      }
    }