baiyuApp/pages_enter/activity/publishWork.vue

<template>
	<view class="post-work-page">
		<view class="content-box">
			<view class="upload-area u-f u-f-ajc u-f-column" @click="chooseVideo">
				<view class="u-f-ajc es-ver" v-if="!videoUrl">
					<view class="u-f-ajc">
						<image src="/static/images/enter/activity/icon_upload_video.png" class="camera-icon"
							mode="aspectFit"></image>
					</view>
					<view class="upload-view es-mt-18">上传视频</view>
				</view>
				<video v-else :src="videoUrl" class="video-preview" object-fit="cover"
					:show-center-play-btn="false"></video>
				<view v-if="videoUrl" class="re-upload-btn" @click.stop="chooseVideo">重新上传</view>
			</view>

			<view class="form-item">
				<view class="label">标题</view>
				<u-input v-model="title" placeholder="请输入标题" border="none" clearable></u-input>
			</view>

			<view class="submit-btn" @click="handleSubmit">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadVideo
	} from '@/api/activity.js';

	export default {
		data() {
			return {
				videoUrl: '',
				coverUrl: '',
				title: '',
				teamId: '',
				loading: false,
				id: '',
			}
		},
		onLoad(options) {
			if (options.teamId) {
				this.teamId = options.teamId
			}
			if (options.id) {
				this.id = options.id
			}
		},
		methods: {
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '上传中',
					})
					this.loading = true
					uni.uploadFile({
						url: uni.getStorageSync('requestPath') +
							'/app/talent/uploadOSSTalent',
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(JSON.parse(res.data))
						},
						fail: (err) => {
							uni.showToast({
								title: '上传视频失败',
								icon: 'error'
							})
						},
						complete: () => {
							uni.hideLoading()
							this.loading = false
						}
					});
				})
			},

			chooseVideo() {
				uni.chooseVideo({
					sourceType: ['album'],
					success: async (res) => {
						const result = await this.uploadFilePromise(res.tempFilePath)
						this.videoUrl = result.url
						this.coverUrl = result.thumbnailUrl
					}
				});
			},
			handleSubmit() {
				if (!this.videoUrl) {
					uni.showToast({
						title: '请上传视频',
						icon: 'none'
					});
					return;
				}
				if (!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '发布中...'
				});

				uploadVideo({
					coverUrl: this.coverUrl,
					videoUrl: this.videoUrl,
					workName: this.title,
					teamId: this.teamId,
					activityId: getApp().globalData.activityId,
				}).then(res => {
					uni.hideLoading();
					if (res.code === 200) {
						uni.showToast({
							title: '发布成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '发布失败',
							icon: 'none'
						});
					}
				}).catch(() => {
					uni.hideLoading();
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.post-work-page {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding: 40rpx;
	}

	.content-box {
		margin-top: 40rpx;
	}

	.upload-area {
		width: 100%;
		height: 400rpx;
		background-color: #EBF5FF;
		border: 2rpx dashed #2583EB;
		border-radius: 24rpx;
		margin-bottom: 40rpx;
		position: relative;
		overflow: hidden;

		.camera-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 20rpx;
		}

		.upload-text {
			font-size: 28rpx;
			color: #333;
		}

		.video-preview {
			width: 100%;
			height: 100%;
		}

		.re-upload-btn {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			font-size: 24rpx;
			padding: 8rpx 20rpx;
			border-radius: 30rpx;
			z-index: 10;
		}
	}

	.form-item {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 80rpx;

		.label {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
		}

		:deep(.u-input) {
			padding: 0 !important;
		}
	}

	.submit-btn {
		height: 90rpx;
		background: #2583EB;
		border-radius: 45rpx;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(37, 131, 235, 0.3);

		&:active {
			opacity: 0.8;
		}
	}
</style>