源文件

jeepay-ui-uapp-agent/components/applyComponents/dataPicker.vue

@@ -0,0 +1,105 @@
+<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>