fission-star-applet-250304/pages_order/record/videoSharing.vue

<template>
	<view class="page">
		<navbar title="视频分享" leftClick @leftClick="$utils.navigateBack" />

		<view class="content">
			<uv-form ref="form" :model="form" :rules="rules" labelPosition="left" labelWidth="340rpx" :labelStyle="{
          color: '#1B1B1B',
          fontSize: '32rpx',
          fontWeight: 'bold',
        }" errorType="toast">
				<view class="flex upload__view">
					<view class="upload upload-cover">
						<uv-form-item labelWidth="0" prop="indexImage">
							<formUpload v-model="form.indexImage">
								<template v-slot="{ value }">
									<!-- todo: 默认 -->
									<image :src="value" mode="aspectFill" style="width: 344rpx; height: 344rpx;"
										radius="14rpx" />
								</template>
							</formUpload>
							<view class="upload-cover-text flex">设置封面</view>
						</uv-form-item>
					</view>
					<view class="upload upload-video">
						<uv-form-item labelWidth="0" prop="vio">
							<formUpload v-model="form.vio" accept="video">
								<template v-slot>
									<video v-if="form.vio" :src="form.vio" style="width: 344rpx; height: 344rpx;"
										radius="14rpx" :controls="false" :autoplay="false"
										:show-center-play-btn="false"></video>
									<view v-else class="flex flex-column" style="width: 344rpx; height: 344rpx;">
										<image src="../static/record/icon-camera.png"
											style="width: 130rpx; height: 105rpx;"></image>
										<text class="upload-video-text">上传视频</text>
									</view>
								</template>
							</formUpload>
						</uv-form-item>
					</view>
				</view>
				<view class="form-item">
					<uv-form-item label="标题" labelWidth="84rpx" prop="headTitle">
						<view class="form-item-content">
							<formInput v-model="form.headTitle" placeholder="请输入你的视频名称" width="584rpx"></formInput>
						</view>
					</uv-form-item>
				</view>
				<view class="form-item">
					<uv-form-item label="设置广告弹出时间（s）" prop="timeNum">
						<view class="form-item-content">
							<formNumberBox v-model="form.timeNum"></formNumberBox>
						</view>
					</uv-form-item>
				</view>
				<view class="form-item">
					<uv-form-item label="设置转发次数（次）" prop="num">
						<view class="form-item-content">
							<formNumberBox v-model="form.num"></formNumberBox>
						</view>
					</uv-form-item>
				</view>
				<view class="form-item">
					<uv-form-item label="选择二维码" prop="wxCodeImage">
						<view class="form-item-content">
							<formUpload v-model="form.wxCodeImage">
								<template v-slot="{ value }">
									<view class="flex" style="min-width: 93rpx; height: 45rpx;">
										<image :src="value" mode="aspectFill" style="width: 45rpx; height: 45rpx;"
											radius="14rpx" />
										<uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000"
											size="28rpx"></uv-icon>
									</view>
								</template>
							</formUpload>
						</view>
					</uv-form-item>
				</view>
				<view class="form-item">
					<uv-form-item label="视频描述" prop="textDetails" labelPosition="top">
						<view style="margin-top: 32rpx;">
							<formTextarea v-model="form.textDetails" placeholder="请描述你的视频"></formTextarea>
						</view>
					</uv-form-item>
				</view>

			</uv-form>
		</view>

		<!-- 审核通过 -->
		<button v-if="status === 1" class="button-submit" open-type="share">
			发布
		</button>
		<!-- 不是 审核中 或 已发布 -> 即 创建分享 或 审核不通过 -->
		<button v-else-if="![0,1].includes(status)" class="button-submit" @click="preSubmit">
			提交审核
		</button>

		<autoCrop ref="autoCropRef" @change="onSubmit"></autoCrop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import shareLog from '@/utils/shareLog'

	import formUpload from '../components/formUpload.vue'
	import formInput from '../components/formInput.vue'
	import formNumberBox from '../components/formNumberBox.vue'
	import formTextarea from '../components/formTextarea.vue'
	import autoCrop from '../components/autoCrop.vue'

	export default {
		components: {
			formUpload,
			formInput,
			formNumberBox,
			formTextarea,
			autoCrop,
		},
		data() {
			return {
				id: null,
				status: null,
				form: {
					headTitle: null,
					indexImage: null,
					vio: null,
					timeNum: 0,
					num: 0,
					wxCodeImage: null,
					textDetails: null,
				},
				rules: {
					'indexImage': {
						type: 'string',
						required: true,
						message: '请设置封面',
					},
					'vio': {
						type: 'string',
						required: true,
						message: '请上传视频',
					},
					'headTitle': {
						type: 'string',
						required: true,
						message: '请输入你的视频名称',
					},
					'timeNum': {
						type: 'number',
						required: true,
						message: '请设置广告弹出时间（大于1）',
						validator: (rule, value, callback) => {
							if (value > 1) {
								return true
							}

							return false;
						},
					},
					'num': {
						type: 'number',
						required: true,
						message: '请设置转发次数（大于0）',
						validator: (rule, value, callback) => {
							if (value > 0) {
								return true
							}

							return false;
						},
					},
					'wxCodeImage': {
						type: 'string',
						required: true,
						message: '请选择二维码',
					},
					'textDetails': {
						type: 'string',
						required: true,
						message: '请描述你的视频',
					},
				},
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad(option) {
			const {
				id
			} = option

			if (!id) {
				return
			}

			this.id = id

			this.fetchDetails(id)
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onShareAppMessage(res) {
			const {
				headTitle,
				indexImage,
			} = this.form

			let o = {
				title: headTitle,
				imageUrl: indexImage,
				path: `/pages_order/sharing/video?id=${this.id}&state=1&shareId=${this.userInfo.id}`
			}

			//调用增加分享次数的方法
			const params = {
				id: this.id,
				state: "1",
			}
			this.$fetch('addLogShareInfo', params)
			// todo: get times and check is unlocked

			shareLog.insert(this.id)

			this.isLocked = false

			return o
		},
		methods: {
			async fetchDetails(id) {
				try {
					const result = await this.$fetch('getVideoShareInfo', {
						id
					})

					const {
						headTitle,
						indexImage,
						vio,
						timeNum,
						num,
						wxCodeImage,
						textDetails,
						status,
					} = result || {}

					this.form = {
						headTitle,
						indexImage,
						vio,
						timeNum,
						num,
						wxCodeImage,
						textDetails,
					}
					this.status = status
				} catch (err) {

				}
			},
			async preSubmit() {
				try {
					await this.$refs.form.validate()
					this.$refs.autoCropRef.set(this.form.indexImage)
				} catch (err) {

				}
			},
			async onSubmit(indexImage) {
				try {

					await this.$refs.form.validate()

					const {
						headTitle,
						vio,
						timeNum,
						num,
						wxCodeImage,
						textDetails,
					} = this.form

					const params = {
						headTitle,
						indexImage,
						vio,
						timeNum,
						num,
						wxCodeImage,
						textDetails,
					}

					if (this.id) {
						params.id = this.id
					}

					await this.$fetch('saveOrUpdateVideoShare', params)

					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})

					setTimeout(uni.navigateBack, 1000, -1)

				} catch (err) {

				}

			},
			onPublish() {
				// todo
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../styles/pageForm.scss';

	.upload__view {
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.upload {
		background-color: $uni-fg-color;
		border-radius: 12rpx;
		overflow: hidden;

		/deep/ .uv-form-item__body {
			padding: 0 !important;
		}
	}

	.upload-video {
		&-text {
			color: #1B1B1B;
			font-size: 32rpx;
			font-weight: 700;
			margin-top: 35rpx;
		}
	}

	.upload-cover {
		position: relative;

		&-text {
			position: absolute;
			bottom: 0;
			width: 100%;
			background-color: rgba($color: #000000, $alpha: 0.6);
			color: #FFFFFF;
			padding: 21rpx 0;
		}
	}
</style>