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

View File

@ -1,15 +1,37 @@
<template>
<image :src="src" :mode="mode" :hidden="!loadFlag" @load="bindload"></image>
<image :src="src" :mode="mode" :hidden="!loadFlag" @load="bindload" :style="cusStyle"></image>
</template>
<script>
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: {
src: {
default () {
return ''
}
},
height: {
default () {
return ''
}
},
width: {
default () {
return ''
}
},
mode: {
default () {
return 'aspectFit' // aspectFit | widthFix

View File

@ -1,25 +1,31 @@
<template>
<view :style="`${customstyle}`">
<view :style="`${customstyle};flex-direction: ${direction};`" class="up-cont">
<view v-if="list.length < maxLen">
<view v-if="!isSlot" @click="handleChooseFile" class="cam" style="">
<view class="">
<u-icon name="camera" size="50"></u-icon>
</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>
<view v-if="!isSlot" @click="handleChooseFile" class="camer-btn" :style="`width:${width}rpx;height:${height}rpx;`">
<template v-if="btnText">
<u-icon name="plus" size="40"></u-icon>
<text class="pt-10">{{btnText}}</text>
</template>
<template v-else>
<view class="">
<u-icon name="camera" size="50"></u-icon>
</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 v-if="isSlot" @click="handleChooseFile">
<slot></slot>
</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}}">
<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>
<view v-if="fileType==fileTypeEnum.all">{{item}}</view>
</view>
@ -52,6 +58,13 @@
}
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: {
customstyle: {
@ -64,7 +77,22 @@
return ''
}
},
value: {
width: {
default () {
return 168
}
},
height: {
default () {
return 168
}
},
direction: {
default () {
return 'row'
}
},
btnText: {
default () {
return ''
}
@ -195,9 +223,11 @@
</script>
<style scoped lang="scss">
.cam {
height: 168rpx;
width: 168rpx;
.up-cont{
display: flex;
flex-wrap: wrap;
}
.camer-btn {
border: 2rpx solid #EFEFEF;
border-radius: 6rpx;
background: #F8F8F8;
@ -205,5 +235,6 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20rpx;
}
</style>

View File

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