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)
}
}