105 lines
3.4 KiB
Vue
105 lines
3.4 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 为了兼容微信小程序，所以在此根据v-if写了两遍 v-model和value 也写了两边 -->
|
||
<uni-data-picker ref="dataPickerRef" v-if="props.code" :localdata="props.localdata" v-model="props.code" :value="props.code" @change="dataChange" v-slot:default="{data, error, options}" @popupopened="popupopened" @popupclosed="popupclosed" :map="props.mapText">
|
||
{{ data.length != 0 ? dataText(data) : '请选择' }}
|
||
</uni-data-picker>
|
||
<uni-data-picker ref="dataPickerRef" v-if="!props.code" :localdata="props.localdata" v-model="props.code" :value="props.code" @change="dataChange" v-slot:default="{data, error, options}" @popupopened="popupopened" @popupclosed="popupclosed" :map="props.mapText">
|
||
{{ data.length != 0 ? dataText(data) : '请选择' }}
|
||
</uni-data-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import { ref } from 'vue'
|
||
import useBackPress from '@/hooks/useBackPress.js' // 返回阻断函数
|
||
|
||
const props = defineProps({
|
||
code: {type: String, default: ''}, // 文字回显用到的码
|
||
localdata: {type: Array, default: () => [] }, // 级联选择用到的数据
|
||
paramType: {type: String, default: 'arr' }, // 参数类型
|
||
mapText: {type: Object, default:{text:'text',value:'value'}} // 映射字段
|
||
})
|
||
|
||
const emit = defineEmits(['change'])
|
||
|
||
// 保持与其他数据参数格式一致，所以也改成 e.detail.value的方式
|
||
let data = {
|
||
detail: {
|
||
value: ''
|
||
}
|
||
}
|
||
const dataPickerRef = ref()
|
||
/*
|
||
* 参数类型集合 默认为arr
|
||
* splicing 拼接模式 适用于支付宝官方行业mccCode 例：mccCode":"A0002_B0015"
|
||
* arr 数组模式 大部分省市区县选择，都需要数组 例 areaCode":["120000","120100","120112"]
|
||
* last 单值模式 适用于盛付通进件mccCode，它只需要最后一个code 例：mccCode":"4900"
|
||
* oneLevel 级联选择 只有一级 适用于云闪付mcc 拉卡拉pos类型等
|
||
*/
|
||
|
||
// 向父组件传递选择后的数据
|
||
const dataChange = e => {
|
||
let result = '' // 拿code值用
|
||
let resText = '' // 拿文字用
|
||
// 根据参数不同走不同分支
|
||
|
||
if (props.paramType === 'splicing') { // splicing 拼接
|
||
result = e.detail.value[0].value + '_' + e.detail.value[1].value
|
||
}
|
||
else if (props.paramType === 'arr') { // arr 数组
|
||
result = []
|
||
resText = []
|
||
e.detail.value.forEach(item => {
|
||
result.push(item.value)
|
||
resText.push(item.text)
|
||
})
|
||
}
|
||
else if (props.paramType === 'last') { // last 单值
|
||
result = e.detail.value[e.detail.value.length - 1].value
|
||
}
|
||
else if (props.paramType === 'oneLevel') { // oneLevel 只有一级
|
||
result = e.detail.value[0].value
|
||
}
|
||
|
||
// 父组件在拿到值之后，可以统一走 e.detail.value的方式拿值了
|
||
data.detail.value = result
|
||
data.detail.text = resText
|
||
emit('change', data)
|
||
}
|
||
|
||
// data-pciker 回显处理函数
|
||
const dataText = (data) => {
|
||
let result = ''
|
||
data.forEach(item => result += (item.text + '/'))
|
||
result = result.substr(0, result.length -1 ) // 截取掉最后一个斜杠
|
||
|
||
return result
|
||
}
|
||
/*
|
||
|
||
处理开启弹窗 与 关闭弹窗 的 阻断返回
|
||
|
||
*/
|
||
const popupopened = () => {
|
||
// #ifdef H5 || APP-PLUS
|
||
active()
|
||
// #endif
|
||
}
|
||
const popupclosed = () => {
|
||
// #ifdef H5 || APP-PLUS
|
||
inactive()
|
||
// #endif
|
||
}
|
||
const closeEd = () => dataPickerRef.value.hide()
|
||
|
||
// #ifdef H5 || APP-PLUS
|
||
const {active, inactive} = useBackPress(closeEd) // onBackPress 阻断返回
|
||
// #endif
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
</style> |