171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<script setup>
|
|
import { uploadSingleFile } from '@/utils/uploadFile'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'image'
|
|
},
|
|
/** 身份证正面 */
|
|
isFront: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
/** 身份证反面 */
|
|
isBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
limit: {
|
|
type: String,
|
|
default: '1'
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
const imageValue = defineModel({
|
|
type: [String, Array],
|
|
default: () => []
|
|
})
|
|
|
|
/** 图片回显列表 */
|
|
const fileLists = defineModel('list', {
|
|
type: Array,
|
|
default: () => []
|
|
})
|
|
|
|
/** 是否为身份证状态 */
|
|
const isIdCard = computed(() => props.isFront || props.isBack)
|
|
|
|
const imageStyles = computed(() => {
|
|
let styles = {
|
|
width: '200rpx',
|
|
height: '200rpx',
|
|
border: {
|
|
color: '#00D993',
|
|
style: 'dashed'
|
|
}
|
|
}
|
|
if (isIdCard.value) {
|
|
styles = {
|
|
width: '295rpx',
|
|
height: '176rpx',
|
|
border: {
|
|
width: '0rpx'
|
|
}
|
|
}
|
|
}
|
|
return styles
|
|
})
|
|
|
|
/** 上传 */
|
|
const uploadFile = async file => {
|
|
const url = await uploadSingleFile(file, {
|
|
url: '/api/common/admin/upload/up/single'
|
|
})
|
|
imageValue.value.push(url)
|
|
}
|
|
|
|
const onSelect = async e => {
|
|
if (props.limit === '1') {
|
|
const upData = e.tempFiles.map(v => v.path)[0]
|
|
imageValue.value = await uploadSingleFile(upData, {
|
|
url: '/api/common/admin/upload/up/single'
|
|
})
|
|
} else {
|
|
e.tempFiles.forEach(v => {
|
|
uploadFile(v.path)
|
|
})
|
|
}
|
|
}
|
|
|
|
const onDelete = e => {
|
|
if (props.limit === '1') {
|
|
imageValue.value = ''
|
|
} else {
|
|
imageValue.value.splice(e.index, 1)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view :class="{ 'file_card-box': isIdCard }" class="cb-file-picker">
|
|
<uni-file-picker
|
|
v-model="fileLists"
|
|
:readonly="props.readonly"
|
|
:file-mediatype="props.type"
|
|
:image-styles="imageStyles"
|
|
:limit="props.limit"
|
|
@select="onSelect"
|
|
@delete="onDelete"
|
|
>
|
|
<!-- 身份证模式 -->
|
|
<view v-if="isIdCard">
|
|
<image
|
|
v-if="props.isFront"
|
|
src="/static/images/my-index/id-front.png"
|
|
mode="widthFix"
|
|
class="card-img"
|
|
></image>
|
|
<image
|
|
v-if="props.isBack"
|
|
src="/static/images/my-index/id-opposite.png"
|
|
mode="widthFix"
|
|
class="card-img"
|
|
></image>
|
|
</view>
|
|
<!-- 图片上传 -->
|
|
<view v-else class="img-box">
|
|
<uni-icons type="plusempty" size="18" color="#00D993"></uni-icons>
|
|
<text class="name">上传</text>
|
|
</view>
|
|
</uni-file-picker>
|
|
<text v-if="isIdCard" class="bottom-text">
|
|
身份证{{ props.isFront ? '人像面' : '国徽面' }}
|
|
</text>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.cb-file-picker {
|
|
.card-img {
|
|
width: 295rpx;
|
|
}
|
|
.bottom-text {
|
|
margin-top: 16rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.img-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.name {
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
color: #00d993;
|
|
}
|
|
}
|
|
}
|
|
|
|
.file_card-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|