From a8c03746e6bd8ac1d46dc48c1b10bceff543664f Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 10 十二月 2024 20:16:12 +0800
Subject: [PATCH] ll
---
h5/pages/staff/task/vDangetAppr.vue | 233 ++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 160 insertions(+), 73 deletions(-)
diff --git a/h5/pages/staff/task/vDangetAppr.vue b/h5/pages/staff/task/vDangetAppr.vue
index 6a3b311..5dd7e69 100644
--- a/h5/pages/staff/task/vDangetAppr.vue
+++ b/h5/pages/staff/task/vDangetAppr.vue
@@ -9,10 +9,14 @@
class="status_img"></image>
<view>{{ info.content }}</view>
<view class="file_list">
- <view class="img_wrap" v-for="item in info.submitFileList" :key="item.id">
+ <view class="img_wrap" v-for="item,i in info.submitFileList" :key="item.id">
<image v-if="item.type == 0" :src="item.fileurlFull" @click="priviewImage(item.fileurlFull)" mode="widthFix"
class="img" />
- <video v-if="item.type == 1" :src="item.fileurlFull" class="video" controls />
+ <view v-if="item.type == 1" @click="videoClick(item, i)" class="video_wrap">
+ <video :id="'id' + i" :show-center-play-btn="false"
+ :src="item.fileurlFull" muted class="video" :controls="false" />
+ <image src="@/static/play.png" class="play" mode=""></image>
+ </view>
</view>
</view>
<view class="text_wrap">
@@ -28,8 +32,8 @@
</view>
<!-- -->
<view class="emyty"></view>
- <view v-if="info.status == 1 || info.status == 2" class="module_list">
- <view class="flow_title">澶勭悊缁撴灉</view>
+ <view v-if="info.status == 1 || info.status == 2" class="module_list">
+ <view class="title">澶勭悊缁撴灉</view>
<view class="item">
<view class="label">澶勭悊缁撴灉</view>
<view class="value primaryColor" :class="{ red: info.status == 2 }">{{ statusMap[info.status] }}</view>
@@ -39,7 +43,7 @@
<view class="value">
<view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.dealBeforeFileList" :key="i">
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
- <video v-if="item.type == 1" :src="item.fileurlFull"></video>
+ <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
</view>
</view>
</view>
@@ -48,7 +52,7 @@
<view class="value">
<view class="adduser_list_item_ipt1_upload" v-for="(item, i) in info.dealAfterFileList" :key="i">
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
- <video v-if="item.type == 1" :src="item.fileurlFull"></video>
+ <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
</view>
</view>
</view>
@@ -68,7 +72,7 @@
v-if="info.status == 1 || index < flowList.length - 1" />
<image src="@/static/staff/liucheng_fail@2x.png" class="status"
v-if="info.status == 2 && index == flowList.length - 1" />
- <image v-if="item.avatar != null && item.avatar != ''" :src="item.avatar" class="img" alt="" />
+ <image v-if="item.avatar != null && item.avatar != ''" :src="item.avatar" class="img" alt="" />
<!-- <image v-else src="@/static/default_avatar.png" class="img" mode=""></image> -->
<span v-if="item.avatar == null || item.avatar == ''"
class="img_name">{{ item.createUserName && item.createUserName.slice(0, 1) }}</span>
@@ -76,7 +80,7 @@
<view class="content">
<view class="head">
<view class="event">{{ item.title }}</view>
- <view class="time">{{ item.createDate }}</view>
+ <view class="time" v-if="item.createDate">{{ item.createDate.slice(0,16) }}</view>
</view>
<view class="line">
<view class="company">
@@ -97,9 +101,11 @@
</view>
<view class="emyty"></view>
<view class="main_footer">
- <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn" @click="handleBack">閫�鍥�</view>
- <view v-if="info.status==0 && info.checkUserId == userInfo.memberId" class="btn transfer" @click="handleTransfer">杞氦</view>
- <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn handle" @click="handleOpen">澶勭悊</view>
+ <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn" @click="handleBack">閫�鍥�</view>
+ <view v-if="info.status==0 && info.checkUserId == userInfo.memberId" class="btn transfer" @click="handleTransfer">
+ 杞氦</view>
+ <view v-if="info.status==0&& info.checkUserId == userInfo.memberId" class="btn handle" @click="handleOpen">澶勭悊
+ </view>
</view>
<!-- 閫�鍥� -->
@@ -128,7 +134,7 @@
<u-icon class="close" size="20" name="close-circle-fill" color="red"
@click="fileDel('dealBeforeFileList', i)"></u-icon>
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
- <video v-if="item.type == 1" :src="item.fileurlFull"></video>
+ <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
</view>
</view>
<view class="label">閫�鍥炶鏄�</view>
@@ -168,7 +174,7 @@
<u-icon class="close" size="20" name="close-circle-fill" color="red"
@click="fileDel('dealBeforeFileList', i)"></u-icon>
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
- <video v-if="item.type == 1" :src="item.fileurlFull"></video>
+ <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
</view>
</view>
<view class="label">
@@ -184,7 +190,7 @@
<u-icon class="close" size="20" name="close-circle-fill" color="red"
@click="fileDel('dealAfterFileList', i)"></u-icon>
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
- <video v-if="item.type == 1" :src="item.fileurlFull"></video>
+ <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
</view>
</view>
<view class="label">鏁存敼璇存槑</view>
@@ -226,8 +232,8 @@
<view class="member_list">
<view class="mt24 placeholder6">鍏眥{ memberList.length }}鏉℃暟鎹�</view>
<view v-for="item in memberList" :key="item.id" class="line">
- <image :src="item.faceImgFull ? item.faceImgFull : require('@/static/meeting/common/default_user@2x.png')"
- class="avatar" mode=""></image>
+ <image v-if="item.faceImgFull" :src="item.faceImgFull" class="avatar"></image>
+ <span v-else class="img_name">{{item.name && item.name.slice(0,1)}}</span>
<view class="content">
<view class="info">
<text class="name">{{ item.name }}</text>
@@ -235,10 +241,9 @@
</view>
<view class="depart">{{ item.companyName }}</view>
</view>
- <image @click="changeMem(item)" v-if="transferParam.id == item.id"
- src="@/static/checkbox_sel@2x.png" mode="widthFix" class="checked"></image>
- <image @click="changeMem(item)" v-else src="@/static/video@2x.png" mode="widthFix"
- class="checked"></image>
+ <image @click="changeMem(item)" v-if="transferParam.id == item.id" src="@/static/checkbox_sel@2x.png"
+ mode="widthFix" class="checked"></image>
+ <image @click="changeMem(item)" v-else src="@/static/video@2x.png" mode="widthFix" class="checked"></image>
<text></text>
</view>
<view class="empty"></view>
@@ -250,11 +255,17 @@
</view>
</u-popup>
<!-- 閫�鍥炴椂闂� -->
- <u-datetime-picker :show="isShowBackDate" @confirm="confirmBackDate" @cancel="isShowBackDate = false"
+ <u-datetime-picker :show="isShowBackDate" :minDate="new Date().getTime()" :closeOnClickOverlay="false"
+ @confirm="confirmBackDate" @close="isShowBackDate = false" @cancel="isShowBackDate = false"
mode="datetime"></u-datetime-picker>
<u-datetime-picker :minDate="new Date().getTime()" :show="isShowHandleDate" @confirm="confirmHandleDate"
@cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>
+ <!-- -->
+
+ <view v-if="videoPlay" class="video_app">
+ <video controls id="myvideo" :src="videoUrl" @fullscreenchange="screenChange"></video>
+ </view>
</view>
</template>
@@ -273,7 +284,7 @@
return {
isShowBack: false,
param: {},
- info: {},
+ info: {},
userInfo: this.$store.state.userInfo,
flowList: [],
@@ -325,7 +336,11 @@
page: 1,
capacity: 50
},
- memberList: []
+ memberList: [],
+
+ videoPlay: false,
+ videoContext: null,
+ videoUrl: ''
};
},
onLoad(op) {
@@ -339,16 +354,33 @@
urls: [url]
});
},
+ screenChange(e) {
+ let fullScreen = e.detail.fullScreen; // 鍊紅rue涓鸿繘鍏ュ叏灞忥紝false涓洪��鍑哄叏灞�
+ if (!fullScreen) {
+ //閫�鍑哄叏灞�
+ this.videoPlay = false; // 闅愯棌鎾斁鐩掑瓙
+ }
+ },
+ videoClick(item, i) {
+ this.videoContext = uni.createVideoContext("myvideo", this); // this杩欎釜鏄疄渚嬪璞� 蹇呬紶
+ console.log(item)
+ this.videoUrl = item.fileurlFull;
+ this.videoContext.requestFullScreen({
+ direction: 90
+ });
+ this.videoContext.play();
+ this.videoPlay = true;
+ },
handleOpen() {
this.isShowHandle = true;
- const submitFileList = this.info.submitFileList || []
+ const submitFileList = this.info.submitFileList || []
this.submitFileList = [...submitFileList];
this.$set(this.handleParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
},
handleBack() {
- this.isShowBack = true;
+ this.isShowBack = true;
// const submitFileList = this.info.submitFileList || []
- // this.submitFileList = [...submitFileList];
+ // this.submitFileList = [...submitFileList];
this.dealBeforeFileList = []
this.$set(this.backParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
},
@@ -435,10 +467,8 @@
},
getMemList() {
findHiddenAreaMemberList({
- model: {
- ...this.transferModel,
- id: this.info.areaId
- },
+ ...this.transferModel,
+ id: this.info.areaId,
...this.pagination
}).then(res => {
this.memberList = res.data || [];
@@ -482,7 +512,7 @@
this.showUploadBe = false;
let token = uni.getStorageSync('token') || '';
uni.chooseImage({
- count: 4,
+ count: 9,
success: chooseImageRes => {
uni.showLoading({
title: '涓婁紶涓�',
@@ -573,7 +603,7 @@
this.showUploadAf = false;
let token = uni.getStorageSync('token') || '';
uni.chooseImage({
- count: 4,
+ count: 9,
success: chooseImageRes => {
uni.showLoading({
title: '涓婁紶涓�',
@@ -661,7 +691,7 @@
this.showUpload = false;
let token = uni.getStorageSync('token') || '';
uni.chooseImage({
- count: 4,
+ count: 9,
success: chooseImageRes => {
uni.showLoading({
title: '涓婁紶涓�',
@@ -748,21 +778,27 @@
}
};
</script>
-<style>
+
+<style lang="scss">
page {
background-color: #f7f7f7;
+
+ ::v-deep .u-popup__content {
+ border-top: 1rpx solid #cccccc;
+ }
}
-</style>
-<style lang="scss">
+
.main_app {
background-color: #fff;
padding-bottom: 0;
- .flow_title {
- font-weight: 600;
- font-size: 32rpx;
- color: #222222;
- margin-bottom: 24rpx;
+
+ .flow_title {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #222222;
+ margin-bottom: 24rpx;
}
+
.flow_wrap {
padding: 30rpx 0;
@@ -831,17 +867,19 @@
}
}
- .line{
- .company{
- font-size: 26rpx;
- color: #777777;
- }
- .status-green{
- color: $uni-color-primary;
- }
- .status-red{
- color: red;
- }
+ .line {
+ .company {
+ font-size: 26rpx;
+ color: #777777;
+ }
+
+ .status-green {
+ color: $uni-color-primary;
+ }
+
+ .status-red {
+ color: red;
+ }
}
.remark {
@@ -889,9 +927,9 @@
}
.adduser_list_item_ipt1_upload {
- width: 120rpx;
- height: 120rpx;
- margin-right: 24rpx;
+ width: 156rpx;
+ height: 156rpx;
+ margin-right: 20rpx;
border: 2rpx solid #e5e5e5;
background: #f7f7f7;
color: #666666;
@@ -901,6 +939,10 @@
align-items: center;
justify-content: center;
position: relative;
+
+ &:nth-of-type(4n) {
+ margin-right: 0;
+ }
.close {
position: absolute;
@@ -916,14 +958,18 @@
video {
width: 100%;
- max-height: 120rpx;
+ max-height: 156rpx;
}
}
- .module_list {
- .title{
-
+ .module_list {
+ .title {
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #222222;
+ padding-top: 28rpx;
}
+
.item {
padding: 30rpx 0;
border-bottom: 1rpx solid #e5e5e5;
@@ -987,32 +1033,52 @@
.file_list {
display: flex;
margin-bottom: 20rpx;
- overflow-x: auto;
+ flex-wrap: wrap;
.img_wrap {
margin-top: 24rpx;
- min-width: 160rpx;
- height: 160rpx;
+ width: 156rpx;
+ height: 156rpx;
border: 2rpx solid #e5e5e5;
background: #f7f7f7;
color: #666666;
font-size: 22rpx;
- display: flex;
+ display: flex;
+ border-radius: 4rpx;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
- margin-right: 16rpx;
+ margin-right: 20rpx;
flex-shrink: 0;
- }
+ &:nth-of-type(4n) {
+ margin-right: 0;
+ }
+ }
+ .video_wrap{
+ position: relative;
+ border: 1px solid;
+ width: 156rpx;
+ height: 156rpx;
+ border-radius: 4rpx;
+ .play{
+ width: 60rpx;
+ height: 60rpx;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
.img {
width: 100%;
max-height: 100%;
}
.video {
- height: 160rpx;
+ width: 100%;
+ max-height: 100%;
}
}
@@ -1023,9 +1089,13 @@
margin-top: 20rpx;
.line {
- margin-bottom: 12rpx;
+ margin-bottom: 18rpx;
display: flex;
font-size: 24rpx;
+
+ &:nth-last-child(1) {
+ margin-bottom: 0;
+ }
.label {
color: #999999;
@@ -1042,7 +1112,7 @@
line-height: 60rpx;
padding: 0 32rpx;
border-radius: 0rpx 0rpx 0rpx 30rpx;
- background-color: #e9edff;
+ background: rgba(39, 155, 170, 0.12);
color: $uni-color-primary;
}
@@ -1156,10 +1226,10 @@
}
.adduser_list_item_ipt1_upload {
- margin-top: 24rpx;
- width: 120rpx;
- height: 120rpx;
- margin-right: 24rpx;
+ margin-top: 20rpx;
+ width: 156rpx;
+ height: 156rpx;
+ margin-right: 20rpx;
border: 2rpx solid #e5e5e5;
background: #f7f7f7;
color: #666666;
@@ -1169,6 +1239,10 @@
align-items: center;
justify-content: center;
position: relative;
+
+ &:nth-of-type(4n) {
+ margin-right: 0;
+ }
.close {
position: absolute;
@@ -1184,7 +1258,7 @@
video {
width: 100%;
- max-height: 120rpx;
+ height: 100%;
}
}
}
@@ -1227,6 +1301,19 @@
margin-right: 20rpx;
}
+ .img_name {
+ width: 64rpx;
+ height: 64rpx;
+ line-height: 64rpx;
+ text-align: center;
+ border-radius: 50%;
+ overflow: hidden;
+ margin-right: 20rpx;
+ background: $uni-color-primary;
+ color: #fff;
+ border: 1rpx solid $uni-color-primary;
+ }
+
.content {
flex: 1;
--
Gitblit v1.9.3