ソースを参照

Signed-off-by: liuboyan <632697560@qq.com>
1

liuboyan 4 年 前
コミット
b7e0cee800
1 ファイル変更67 行追加22 行削除
  1. 67 22
      pagesClass/classDetail.vue

+ 67 - 22
pagesClass/classDetail.vue

@@ -31,23 +31,22 @@
 		 title-size="32" margin="0px" :head-style="cardStyle" @sub-click="imgEdit = !imgEdit">
 			<view class="class-show-box" slot="body">
 				<view v-for="(item, index) in classShowList" :key="index" class="class-show-card">
-					<u-image :src="item.url" mode="aspectFill" height="30vw" border-radius="10px"></u-image>
+					<u-image :src="item.url" mode="aspectFill" height="30vw" border-radius="10px" v-if="item.type == 0"></u-image>
+					<view class="video-col" v-if="item.type == 1">
+						<video :src="item.url" object-fit="cover" controls :id="'video' + index"></video>
+					</view>
 					<view class="class-show-name">{{item.name}}</view>
 					<u-icon name="close-circle-fill" color="#fa3534" size="48" v-if="imgEdit" class="delete-icon" @click="deleteClassShow(item)"></u-icon>
 				</view>
-				<view class="class-show-card" style="width: calc(100% - 16px)" v-if="imgEdit">
-					<u-upload :action="uploadUrl" :header="uploadHeader" :show-upload-list="false" :custom-btn="true" @on-success="uploadSuccess"
-					 @on-error="uploadError">
-						<view slot="addBtn" style="width: calc(100vw - 32px);text-align: center;">
-							<u-icon name="plus-circle-fill" size="100" :color="mainColor"></u-icon>
-						</view>
-					</u-upload>
+				<view class="class-show-card" style="width: calc(100% - 16px);text-align: center;" v-if="imgEdit">
+					<u-icon name="plus-circle-fill" size="100" :color="mainColor" @click="uploadTypeShow = true"></u-icon>
 				</view>
 			</view>
 		</u-card>
 		<view class="handle-fix-box">
 			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="goToSignForm()">立即签到</u-button>
 		</view>
+		<u-action-sheet :list="uploadTypeList" v-model="uploadTypeShow" @click="selectUploadType"></u-action-sheet>
 		<u-top-tips ref="uTips"></u-top-tips>
 	</view>
 </template>
@@ -67,10 +66,6 @@
 		},
 		data() {
 			return {
-				uploadUrl: API.uploadFile,
-				uploadHeader: {
-					Authorization: uni.getStorageSync('token')
-				},
 				classId: '',
 				classInfo: {
 					name: '',
@@ -85,6 +80,14 @@
 					showList: [],
 				},
 				classShowList: [],
+				uploadTypeShow: false,
+				uploadTypeList: [{
+						text: '图片'
+					},
+					{
+						text: '视频'
+					}
+				],
 				imgEdit: false,
 				cardStyle: {
 					fontWeight: 'bold'
@@ -134,10 +137,49 @@
 					})
 				})
 			},
+			//  选择上传文件类型
+			selectUploadType(index) {
+				if (index == 0) {
+					uni.chooseImage({
+						count: 1,
+						success: (res) => {
+							this.uploadFile(res.tempFilePaths[0])
+						},
+						fail: (error) => {
+
+						}
+					});
+				} else if (index) {
+					uni.chooseVideo({
+						count: 1,
+						success: (res) => {
+							this.uploadFile(res.tempFilePath)
+						},
+						fail: (error) => {
+
+						}
+					});
+				}
+			},
+			//  上传文件
+			uploadFile(path) {
+				let that = this
+				uni.uploadFile({
+					url: API.uploadFile,
+					filePath: path,
+					name: 'file',
+					header: {
+						Authorization: uni.getStorageSync('token')
+					},
+					success: (uploadFileRes) => {
+						that.uploadSuccess(JSON.parse(uploadFileRes.data).data.id)
+					}
+				});
+			},
 			//  文件上传成功回调
-			uploadSuccess(res, index, lists, name) {
+			uploadSuccess(id) {
 				NET.request(API.insertClassShow, {
-					fileId: [res.data.id],
+					fileId: [id],
 					id: this.classId,
 				}, 'POST').then(res => {
 					this.getClassShow()
@@ -151,14 +193,6 @@
 						type: 'warning',
 					})
 				})
-				return true
-			},
-			//  文件上传失败回调
-			uploadError(res, index, lists, name) {
-				this.$refs.uTips.show({
-					title: error.message,
-					type: 'warning',
-				})
 			},
 			//  删除班级近况
 			deleteClassShow(site) {
@@ -267,6 +301,17 @@
 					right: -5px;
 					top: -5px;
 				}
+
+				.video-col {
+					width: 100%;
+					height: 30vw;
+					border-radius: 10px;
+
+					video {
+						width: 100%;
+						height: 30vw;
+					}
+				}
 			}
 		}
 	}