Feat(订单):评价支持上传视频

This commit is contained in:
lifizer
2024-04-16 21:12:35 +08:00
parent 8f9eece29d
commit 6a270836d9
2 changed files with 46 additions and 23 deletions
+10 -1
View File
@@ -1,6 +1,11 @@
<template name="sunui-upimg"> <template name="sunui-upimg">
<view class="sunui-uploader-bd"> <view class="sunui-uploader-bd">
<view class="sunui-uploader-files"> <view class="sunui-uploader-files">
<view
v-if="showBlankPlaceholder"
:style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'"
class="sunui-uploader-file"
/>
<block v-for="(item, index) in upload_before_list" :key="index"> <block v-for="(item, index) in upload_before_list" :key="index">
<view class="sunui-uploader-file" :class="[item.upload_percent < 100 ? 'sunui-uploader-file-status' : '']" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'"> <view class="sunui-uploader-file" :class="[item.upload_percent < 100 ? 'sunui-uploader-file-status' : '']" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'">
<image class="sunui-uploader-img" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'" :src="item.path" mode="aspectFill" @tap="preview(index)" v-if="type === 'image'" /> <image class="sunui-uploader-img" :style="'width:' + upload_img_wh + 'rpx; height:' + upload_img_wh + 'rpx;'" :src="item.path" mode="aspectFill" @tap="preview(index)" v-if="type === 'image'" />
@@ -51,6 +56,11 @@ export default {
}, },
name: 'sunui-upimg', name: 'sunui-upimg',
props: { props: {
// 是否显示空白占位图,用于同时上传视频和图片,两个上传空间并列
showBlankPlaceholder: {
type: Boolean,
default: false
},
upload_video_max: { upload_video_max: {
type: Number, type: Number,
default: 30 // 最大上传容量(M) default: 30 // 最大上传容量(M)
@@ -421,7 +431,6 @@ export default {
color: #fff; color: #fff;
z-index: 9; z-index: 9;
} }
.sunui-uploader-bd { .sunui-uploader-bd {
padding: 0; padding: 0;
margin: 0; margin: 0;
+36 -22
View File
@@ -45,26 +45,31 @@
</text> </text>
</view> </view>
<view class="upload-wrapper"> <view class="upload-wrapper">
<tm-upload <view class="video-upload">
:dataList="videoArr" <tm-upload
:upload_img_wh="uploadImgWH" :dataList="videoArr"
:upload_max="1" :upload_img_wh="uploadImgWH"
:upload_count="1" :upload_max="1"
:url="uploadUrl" :upload_count="1"
:header="uploadHeader" :url="uploadUrl"
type='video' :header="uploadHeader"
@change="uploadedVideoChange" type='video'
/> @change="uploadedVideoChange"
<tm-upload />
:dataList="picArr" </view>
:upload_img_wh="uploadImgWH" <view class="pic-upload">
:upload_max="9 - videoArr.length" <tm-upload
:upload_count="9 - videoArr.length" :dataList="picArr"
:url="uploadUrl" :upload_img_wh="uploadImgWH"
:header="uploadHeader" :upload_max="9 - videoArr.length"
type='image' :upload_count="9 - videoArr.length"
@change="uploadedPicChange" :url="uploadUrl"
/> :header="uploadHeader"
:showBlankPlaceholder="true"
type='image'
@change="uploadedPicChange"
/>
</view>
</view> </view>
</view> </view>
<view class="evaluateBnt bg-color-red" @click="submit">立即评价</view> <view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
@@ -194,9 +199,18 @@ export default {
} }
} }
.upload-wrapper { .upload-wrapper {
display: flex; position: relative;
flex-wrap: wrap;
padding: 0 0 0 16rpx; padding: 0 0 0 16rpx;
.video-upload {
position: absolute;
top: 0;
left: 16rpx;
z-index: 5;
}
.pic-upload {
position: relative;
z-index: 2;
}
} }
.evaluate-con .score .textarea .list .pictrue.uploadBnt { .evaluate-con .score .textarea .list .pictrue.uploadBnt {
border: 1px solid #ddd; border: 1px solid #ddd;