This commit is contained in:
aihe 2023-12-12 15:00:16 +08:00
parent 8b48fadb16
commit 1ed534cfa6
4 changed files with 76 additions and 23 deletions

View File

@ -16,7 +16,7 @@ const chooseFile = function (action = 'chooseImage', opt = {}) {
...opts, ...opts,
success: function (res) { success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths || [res.tempFilePath]debugger var tempFilePaths = res.tempFilePaths || [res.tempFilePath]
if (tempFilePaths.length > opts.count) { if (tempFilePaths.length > opts.count) {
reject() reject()
return showToast(`最多选择${opts.count}个`) return showToast(`最多选择${opts.count}个`)

View File

@ -1,15 +1,37 @@
<template> <template>
<image :src="src" :mode="mode" :hidden="!loadFlag" @load="bindload"></image> <image :src="src" :mode="mode" :hidden="!loadFlag" @load="bindload" :style="cusStyle"></image>
</template> </template>
<script> <script>
export default { export default {
computed: {
cusStyle() {
let s = ``
if(this.height) {
s+= `height:${this.height}rpx;`
}
if(this.width) {
s+= `width:${this.width}rpx;`
}
return s
},
},
props: { props: {
src: { src: {
default () { default () {
return '' return ''
} }
}, },
height: {
default () {
return ''
}
},
width: {
default () {
return ''
}
},
mode: { mode: {
default () { default () {
return 'aspectFit' // aspectFit | widthFix return 'aspectFit' // aspectFit | widthFix

View File

@ -1,25 +1,31 @@
<template> <template>
<view :style="`${customstyle}`"> <view :style="`${customstyle};flex-direction: ${direction};`" class="up-cont">
<view v-if="list.length < maxLen"> <view v-if="list.length < maxLen">
<view v-if="!isSlot" @click="handleChooseFile" class="cam" style=""> <view v-if="!isSlot" @click="handleChooseFile" class="camer-btn" :style="`width:${width}rpx;height:${height}rpx;`">
<view class=""> <template v-if="btnText">
<u-icon name="camera" size="50"></u-icon> <u-icon name="plus" size="40"></u-icon>
</view> <text class="pt-10">{{btnText}}</text>
<view class="font-22"> </template>
<text>上传</text> <template v-else>
<text v-if="fileType==fileTypeEnum.image">图片</text> <view class="">
<text v-if="fileType==fileTypeEnum.video">视频</text> <u-icon name="camera" size="50"></u-icon>
<text v-if="fileType==fileTypeEnum.all">文件</text> </view>
</view> <view class="font-22">
<text>上传</text>
<text v-if="fileType==fileTypeEnum.image">图片</text>
<text v-if="fileType==fileTypeEnum.video">视频</text>
<text v-if="fileType==fileTypeEnum.all">文件</text>
</view>
</template >
</view> </view>
<view v-if="isSlot" @click="handleChooseFile"> <view v-if="isSlot" @click="handleChooseFile">
<slot></slot> <slot></slot>
</view> </view>
</view> </view>
<view v-for="(item) in list" :style="`${itemstyle}`"> <view v-for="(item) in list" :style="`${compItemstyle}`">
<view class="cdimg" @click="handleItem" data-index="{{index}}"> <view class="cdimg" @click="handleItem" data-index="{{index}}">
<tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :mode="mode"></tpx-image> <tpx-image v-if="fileType==fileTypeEnum.image" :src="item" :height="height" :width="width"></tpx-image>
<video v-if="fileType==fileTypeEnum.video" :src="item"></video> <video v-if="fileType==fileTypeEnum.video" :src="item"></video>
<view v-if="fileType==fileTypeEnum.all">{{item}}</view> <view v-if="fileType==fileTypeEnum.all">{{item}}</view>
</view> </view>
@ -52,6 +58,13 @@
} }
return res return res
}, },
compItemstyle(){
let style = `margin-bottom: 20rpx;`
if(this.direction == "row") {
// style += `width:${this.width}rpx;height:${this.height}rpx;`
}
return `${this.itemstyle};${style};`
}
}, },
props: { props: {
customstyle: { customstyle: {
@ -64,7 +77,22 @@
return '' return ''
} }
}, },
value: { width: {
default () {
return 168
}
},
height: {
default () {
return 168
}
},
direction: {
default () {
return 'row'
}
},
btnText: {
default () { default () {
return '' return ''
} }
@ -195,9 +223,11 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.cam { .up-cont{
height: 168rpx; display: flex;
width: 168rpx; flex-wrap: wrap;
}
.camer-btn {
border: 2rpx solid #EFEFEF; border: 2rpx solid #EFEFEF;
border-radius: 6rpx; border-radius: 6rpx;
background: #F8F8F8; background: #F8F8F8;
@ -205,5 +235,6 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 20rpx;
} }
</style> </style>

View File

@ -20,13 +20,13 @@
<view class="mb-10"> <view class="mb-10">
<u-row justify="between"> <u-row justify="between">
<u-col span="5"> <u-col span="5">
<tpx-upload v-model:value="baseFormData.pic1"> <tpx-upload v-model:value="baseFormData.pic1" :btnText="'身份证人像面'" height="150" width="200">
<u-text :text="'身份证人像面'" size="28" :scale="[7, 10]"></u-text> <u-text :text="'身份证人像面'" size="28"></u-text>
</tpx-upload> </tpx-upload>
</u-col> </u-col>
<u-col span="5"> <u-col span="5">
<tpx-upload v-model:value="baseFormData.pic2"> <tpx-upload v-model:value="baseFormData.pic2" :btnText="'身份证国徽面'" height="150" width="200">
<u-text :text="'身份证人像面'" size="28" :scale="[7, 10]"></u-text> <u-text :text="'身份证国徽面'" size="28"></u-text>
</tpx-upload> </tpx-upload>
</u-col> </u-col>
</u-row> </u-row>