源文件
This commit is contained in:
120
jeepay-ui-uapp-agent/components/applyComponents/JeePayForm.vue
Normal file
120
jeepay-ui-uapp-agent/components/applyComponents/JeePayForm.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<view class="item" :style="{backgroundColor: props.backColor}" :class="[props.border]">
|
||||
|
||||
<!-- 左侧内容 即标题 -->
|
||||
<view class="title">
|
||||
<text v-if="props.start" class="require">*</text>
|
||||
<text style="color:#666f80"> {{ props.text }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧内容 父组件替换此插槽，可以转变为上传图片等左右结构的布局 -->
|
||||
<slot>
|
||||
<input type="text" :value="props.value" @input="onChange" :placeholder="placeholderText" :disabled="props.disabled" />
|
||||
</slot>
|
||||
|
||||
</view>
|
||||
<view v-if="props.tipText" class="tipText">
|
||||
({{ props.tipText }})
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
value: {type: String, default: ''},
|
||||
text: {type: String, default: ''},
|
||||
tipText: {type: String, default: ''}, // 自定义的提示文字
|
||||
start: {type: Boolean, default: true }, // 代表必填项的小星星
|
||||
disabled: {type: Boolean, default: false}, // 是否禁止填写
|
||||
backColor: {type: String, default: '#fafbfc'}, // 背景颜色
|
||||
border: {type: String, default: 'top-border'}, // border位置 上或下
|
||||
tipHolder: {type: String, default: ''} // 自定义placeholder
|
||||
})
|
||||
|
||||
// 自定义placeholder
|
||||
let placeholderText = props.tipHolder ? props.tipHolder : `请输入${props.text}`
|
||||
|
||||
const emit = defineEmits(['update:value'])
|
||||
|
||||
const onChange = e => emit('update:value', e.detail.value)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.item{
|
||||
box-sizing: border-box;
|
||||
//height: 110rpx;
|
||||
width: 100%;
|
||||
// background-color: #fafbfc;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #000;
|
||||
.title{
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #666f80;
|
||||
margin-right: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
input, textarea {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.imgupload{
|
||||
position: relative;
|
||||
height: 120rpx;
|
||||
width: 120rpx;
|
||||
background-color: #E6E9ED;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.delate{
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
left: -20rpx;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
border-radius: 5rpx;
|
||||
background-color: #ff0000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 星号
|
||||
.require {
|
||||
width: 20rpx;
|
||||
color: red;
|
||||
}
|
||||
|
||||
// 禁止标题换行
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.top-border {
|
||||
border-top: 1rpx solid #e8e8e8;
|
||||
}
|
||||
.bottom-border {
|
||||
border-bottom: 1rpx solid #e8e8e8;
|
||||
}
|
||||
.tipText {
|
||||
margin: 8rpx 20rpx 10rpx;
|
||||
color: #808080;
|
||||
}
|
||||
</style>
|
||||
16
jeepay-ui-uapp-agent/components/applyComponents/README.md
Normal file
16
jeepay-ui-uapp-agent/components/applyComponents/README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
## 进件板块通用组件
|
||||
|
||||
## JeePayForm
|
||||
- 通用的左右结构布局
|
||||
- 单标签模式适用于普通输入框
|
||||
- 通过传参，适用于文本域
|
||||
- 通过插槽，适用于进件板块绝大部分左右结构布局
|
||||
|
||||
## termOfValidity
|
||||
- 选择证件的有效期
|
||||
- 默认是选结束时间
|
||||
|
||||
## dataPicker
|
||||
- 由uni官方的 uni-data-picker二次封装而来
|
||||
- 主要适用于进行选择行业mcc 省市区县等级联选择框
|
||||
- 由于不同进件渠道所需要的值不同，需要根据不同的参数来返回不同的值 （有的行业mcc码只要最后一个，有的需要用_拼接） (省市区，有的只选择到市，绝大部分需要选择到县)
|
||||
105
jeepay-ui-uapp-agent/components/applyComponents/dataPicker.vue
Normal file
105
jeepay-ui-uapp-agent/components/applyComponents/dataPicker.vue
Normal file
@@ -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>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<view>
|
||||
<picker mode="date" fields="day" :value="props.defaultDate" @change="bindDateChange" v-show="props.defaultDate != '长期'">
|
||||
<view class="uni-input" style="text-align: right;">{{props.defaultDate ? props.defaultDate : '请选择'}}</view>
|
||||
</picker>
|
||||
<checkbox-group @change="end" v-if="props.isEnd">
|
||||
<label><checkbox value="长期" :checked="props.defaultDate == '长期' " color="#FFCC33" />长期</label>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { ref } from 'vue'
|
||||
import useBackPress from '@/hooks/useBackPress.js' // 返回阻断函数
|
||||
|
||||
const props = defineProps({
|
||||
isEnd: { type: Boolean, default: true } , // 默认为选择结束时间
|
||||
defaultDate: {type: String, default: ''}, // 传入的默认时间
|
||||
})
|
||||
|
||||
const emit = defineEmits(['publicSelect'])
|
||||
|
||||
// 保持与其他数据参数格式一致，所以也改成 e.detail.value的方式
|
||||
let data = {
|
||||
detail: {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
|
||||
// 普通日期选择
|
||||
const bindDateChange = e => emit('publicSelect', e)
|
||||
|
||||
// 点击长期
|
||||
const end = e => {
|
||||
data.detail.value = e.detail.value[0] ? '长期' : ''
|
||||
emit('publicSelect', data)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user