qjd-shell-uniapp/pagesMedia/liveOption.vue

<template>
	<view class="container">
		<u-cell-group class="form-info" :border="false">
			<u-field label="直播名称" placeholder="请输入直播名称" label-width="180" v-model="videoInfo.liveName"></u-field>
			<u-cell-item title="请上传直播海报" :arrow="false">
				<view slot="label">
					<u-upload :action="uploadUrl" :file-list="defaultList" :form-data="uploadData" @on-success="uploadSuccess"
					 @on-error="uploadError" @on-remove="uploadRemove" max-count="1"></u-upload>
				</view>
			</u-cell-item>
			<u-cell-item title="直播起始时间" :value="videoInfo.liveStartTime" @click="dateShow1 = true"></u-cell-item>
			<u-cell-item title="直播结束时间" :value="videoInfo.liveEndTime" @click="dateShow2 = true"></u-cell-item>
			<u-cell-item title="日期选择（可多选）" :arrow="false">
				<view slot="label">
					<u-checkbox-group>
						<u-checkbox v-model="item.checked" v-for="(item, index) in checkList" :key="index" :name="item.value" shape="circle"
						 active-color="#51A539">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="form-handle">
			<u-button type="success" shape="circle" :ripple="true" @click="submitData" :disabled="getPermit()" class="handle-custom">提交</u-button>
		</view>
		<u-picker mode="time" v-model="dateShow1" :start-year="startYear" :params="params" @confirm="setDate1"></u-picker>
		<u-picker mode="time" v-model="dateShow2" :start-year="startYear" :params="params" @confirm="setDate2"></u-picker>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				type: 'add',
				videoInfo: {
					liveName: '',
					liveStartTime: '',
					liveEndTime: '',
				},
				checkList: [{
						name: '星期一',
						value: '1',
						checked: false,
						disabled: false
					},
					{
						name: '星期二',
						value: '2',
						checked: false,
						disabled: false
					},
					{
						name: '星期三',
						value: '3',
						checked: false,
						disabled: false
					},
					{
						name: '星期四',
						value: '4',
						checked: false,
						disabled: false
					},
					{
						name: '星期五',
						value: '5',
						checked: false,
						disabled: false
					},
					{
						name: '星期六',
						value: '6',
						checked: false,
						disabled: false
					},
					{
						name: '星期天',
						value: '7',
						checked: false,
						disabled: false
					}
				],
				dateShow1: false,
				dateShow2: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				startYear: '',
				uploadData: {
					folderId: 0,
				},
				uploadUrl: '',
				fileList: [],
				defaultList: [],
			}
		},
		onLoad(options) {
			this.uploadUrl = API.uploadFile
			this.startYear = new Date().getFullYear()
			NET.request(API.getLiveId, {}, 'GET').then(res => {
				if (res.data && res.data != 0) {
					this.type = 'edit'
					this.videoInfo.liveId = res.data
					this.getLiveDetail()
				}
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取直播ID失败',
					type: 'warning',
				})
			})
		},
		methods: {
			//  直播详情
			getLiveDetail() {
				NET.request(API.getLiveData + this.videoInfo.liveId, {}, 'POST').then(res => {
					this.videoInfo = {
						liveId: res.data.liveId,
						liveName: res.data.liveName,
						liveStartTime: res.data.liveStartTime,
						liveEndTime: res.data.liveEndTime,
					}
					this.fileList = [res.data.imgUrl]
					this.defaultList = [{
						url: res.data.imgUrl
					}]
					res.data.liveWeek.split(',').forEach(site => {
						this.checkList[parseInt(site) - 1].checked = true
					})
				}).catch(res => {
					this.$refs.uTips.show({
						title: '获取直播设置参数失败',
						type: 'warning',
					})
				})
			},
			//  文件上传成功回调
			uploadSuccess(res, index, lists, name) {
				this.fileList.push(res.data.url)
				this.$refs.uTips.show({
					title: '文件上传成功',
					type: 'success',
				})
				return true
			},
			//  文件上传失败回调
			uploadError(res, index, lists, name) {
				this.$refs.uTips.show({
					title: '文件上传失败',
					type: 'warning',
				})
			},
			//  移除文件回调
			uploadRemove(index, lists, name) {
				this.fileList.splice(index, 1)
			},
			//  设置时间
			setDate1(data) {
				this.videoInfo.liveStartTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data.minute +
					':' + data.second
			},
			//  设置时间
			setDate2(data) {
				this.videoInfo.liveEndTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data.minute +
					':' + data.second
			},
			//  检查必填项
			getPermit() {
				if (!this.videoInfo.liveName || !this.videoInfo.liveStartTime || !this.videoInfo.liveEndTime || !this.fileList.length ||
					!this.checkList.filter(site => site.checked).length) {
					return true
				}
				return false
			},
			//  提交
			submitData() {
				if (this.type == 'add') {
					NET.request(API.setLiveData, {
						...this.videoInfo,
						imgUrl: this.fileList[0],
						liveWeek: this.checkList.filter(site => site.checked).map(site => {
							return site.value
						}).join(',')
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '新增直播设置成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(res => {
						this.$refs.uTips.show({
							title: res.data.msg,
							type: 'warning',
						})
					})
				} else {
					NET.request(API.editLiveData, {
						...this.videoInfo,
						imgUrl: this.fileList[0],
						liveWeek: this.checkList.filter(site => site.checked).map(site => {
							return site.value
						}).join(',')
					}, 'POST').then(res => {
						this.$refs.uTips.show({
							title: '编辑直播设置成功',
							type: 'success',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}).catch(res => {
						this.$refs.uTips.show({
							title: res.data.msg,
							type: 'warning',
						})
					})
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		box-sizing: border-box;
		padding-bottom: 70px;
		overflow-y: auto;

		.form-info {
			width: 100%;
			float: left;

			/deep/.u-label-text {
				color: #333333;
			}

			/deep/.u-cell_title {
				color: #333333;
			}

			.good-img {
				float: left;
				margin: 5px;
			}
		}

		.form-handle {
			width: calc(100% - 30px);
			height: 40px;
			position: fixed;
			bottom: 20px;
			left: 15px;
			background-color: #FFFFFF;

			.handle-custom {
				background-color: #51A539;

				/deep/button {
					background-color: #56a83a;
				}

				/deep/.u-btn--success--disabled {
					background-color: #74bd60 !important;
				}
			}
		}
	}
</style>