property/property_ui/manage/pages/community/newsaddvideo.vue

<template>
	<view class="check">
		<uni-forms ref="form" :model="datainfo">
			<view class="cbox">
				<view class="chmain">
					<uni-forms-item label="发布时间" name="publishTime">
						<picker mode="date" :disabled="isdisabled" @change='bindDateChangeb'>
							<view class="flexc">
								<view class="flex1 txr f13"  :class="datainfo.publishTime?'co27':'coa'">{{datainfo.publishTime||"请选择发布时间"}}</view>
								<view class="rimg"><image :src="rimg"></image></view>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item label="是否启用" name="status">
						<view class="flexc" @click="getChangeFn">
							<view class="flex1"></view>
							<image :src="check" v-if="datainfo.status=='0'" class="checkimg"></image>
							<image :src="ncheck" v-else class="checkimg"></image>
						</view>
					</uni-forms-item>
				</view>
			</view>
			<view class="cbox">
				<view class="chmain">
					<uni-forms-item label-width='0'  name="manualTitle">
						<uni-easyinput :disabled="isdisabled" type="textarea" autoHeight v-model="datainfo.manualTitle" :inputBorder='false' placeholder="输入标题" />
					</uni-forms-item>
					<view class="addbox">
						<!-- <lsj-upload ref="lsjUpload" childId="upload1"  :width="width" :height="height" :option="option" :size="size" :formats="formats" :debug="debug" :instantly="instantly" bigType=''
							    @progress="" @uploadEnd="onuploadEnd" >
							<view class="flexdcc" :style="{width: width,height: height}">
								<image :src="video"></image>
								<view>添加视频</view>
							</view>
						</lsj-upload> -->
						<view class="flexdcc" @click="getchooseVideo" :style="{width: width,height: height}">
							<image :src="video"></image>
							<view>添加视频</view>
						</view>
					</view>
					
					
					<view class="flexcw" v-if="datainfo.videoUrl">
						<view class="imgs">
							<video class="img" id="myVideo" :src="baseUrl+datainfo.videoUrl"
							      @error="videoErrorCallback"  controls></video>
							<cover-image :src="del" class="del" @click.stop="getDelFn"></cover-image>
						</view>
					</view>
				</view>
			</view>
		</uni-forms>
		<view class="rfbtn" @click="getEditFn" v-if="isdisabled">修改</view>
		<view class="rfbtn" @click="getSubmit" v-else>发布</view>
		<loading></loading>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	const Clientid = config.Clientid
	import { getToken } from '@/utils/auth'
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import {manualAdd,manualPut,manualDet} from "@/api/work/manage.js"
	import {uploadVideo} from '@/utils/common.js'
	export default {
		components: {},
		data() {
			return {
				//附件
				option: {
				    // 上传服务器地址，需要替换为你的接口地址
				    url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
				    // 上传附件的key
				    name: 'file',
				    // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				    header: {
				        // 示例参数可删除
				        'Authorization':  'Bearer ' + getToken(),
						'Clientid':  Clientid,
				    },
				    // 根据你接口需求自定义body参数
				    formData: {
					}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: '642rpx',
				height: '190rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: 'MP4',
				// 文件上传大小限制
				size: 100,
				// 文件数量限制 默认10
				count: 5,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: false,
				filelist:[],
				rimg: require('@/people/static/people/rimg.png'),
				video: require('@/manage/static/community/video.png'),
				del: require('@/car/static/car/del.png'),
				baseUrl: config.baseUrl,
				checkflag:true,
				check: require('@/people/static/people/check.png'),
				ncheck: require('@/people/static/people/ncheck.png'),
				datainfo: {
					// "manualId":"员工培训手册ID",
					"manualTitle":"",//员工培训手册标题
					"manualType":"2",//员工培训手册类型（1：图片 2:视频）
					"manualContent":"",//员工培训手册内容
					"status":"0",//员工培训手册状态（0正常 1关闭）
					"publishTime":"",//发布时间
					"videoUrl":"",//视频地址URL
					// "coverImage":"封面图片",
					// "author":"作者",
					// "source":"来源",
					// "viewCount":"浏览次数",
					// "isTop":"是否置顶：Y（置顶）、N（不置顶）"
				},
				id:'',
				ptype:"add",
				isdisabled:false,
				editinfo:'',
				videofile:[],
			}
		},
		onLoad: function(e) {
			if(e.id){
				this.id=e.id;
				this.ptype='edit';
				// this.isdisabled=true;
				this.getDetailFn()
			}else{
				this.datainfo.publishTime=this.time()
			}
		},
		methods: {
			checkPermi,
			checkRole,
			time(){
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				var d = date.getDate();
				var h = date.getHours();
				var min = date.getMinutes();
				var s = date.getSeconds();
				var yearStr = y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d)
				// var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
				// 	'0' + s) : s);
				// var kaTime = yearStr + ' ' + timeStr;
				return yearStr
			},
			bindDateChangeb(e){
				var val=e.detail.value;
				this.datainfo.publishTime=val;
			},
			getEditFn(){
				this.isdisabled=false;
			},
			getDelFn(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.datainfo.videoUrl='';
						} else if (res.cancel) {
						}
					}
				});
			},
			getChangeFn(){
				if(this.isdisabled){
					return
				}
				console.log(this.datainfo.status)
				if(this.datainfo.status=='1'){
					this.datainfo.status='2'
				}else{
					this.datainfo.status='1'
				}
			},
			getchooseVideo(e){
				var that=this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
				success: function (res) {
					let img= res.tempFilePath;
					var fuwufile = [];
					uploadVideo('/common/upload',img,fuwufile,function(rs){
						var resurl=rs[0];
						that.datainfo.videoUrl=resurl.fileName
					})
				}
			});
			},
			// 上传
			onuploadEnd(item,fileVal,bigType) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				if(responseText.code==200){
					this.datainfo.videoUrl=responseText.data.fileName
					// newobj.name=responseText.newFileName;
					// newobj.oldName=responseText.originalFilename;
					// newobj.url=responseText.fileName;
					// newobj.type=fileVal;
					// newobj.bigType=bigType;
					// newobj.suggestionId=this.suggestionId;
					// this.filelist.push(newobj)
				}else{
					this.$toast(responseText.msg)
				}
			},
			getDetailFn(){
				var that=this;
				manualDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
					}
				})
			},
			getSubmit(){
				var that=this;
				this.$refs.form.validate().then(res => {
					var params=JSON.parse(JSON.stringify(this.datainfo))
					if(!params.publishTime){
						this.$toast('请选择发布时间')
						return
					}
					if(!params.manualTitle){
						this.$toast('请输入标题')
						return
					}
					if(!params.videoUrl){
						this.$toast('请上传视频')
						return
					}
					if(this.ptype=='add'){
						manualAdd(params).then(res=>{
							if(res.code==200){
								this.$toast("新增成功")
								setTimeout(function(){
									uni.$emit("newsygList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}else{
						manualPut(params).then(res=>{
							if(res.code==200){
								this.$toast("修改成功")
								setTimeout(function(){
									uni.$emit("newsygList")
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						})
					}
					
				})
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.check /deep/ .uni-forms-item{min-height: 106rpx;box-sizing: border-box;display: flex;align-items: center;margin-bottom: 0;border-bottom: 2rpx solid #E6E6E6;padding:10rpx 0;}
.check .cbox /deep/ .uni-forms-item:last-child{border: none;}
.check /deep/ .uni-forms-item__label{font-weight: bold;font-size: 26rpx;color: #222327;flex: 0 0 auto;width: auto !important;}
.check /deep/ .uni-easyinput{flex: 1;text-align: left;font-size: 26rpx;color: #222327;}
.check /deep/ .uni-easyinput__content-textarea{min-height: 40rpx;font-size: 26rpx;}
.check /deep/ .uni-easyinput__placeholder-class{font-size: 26rpx;color: #AAAAAA;}
.check /deep/ .uni-easyinput__content-input{padding-left: 0 !important;}
.check /deep/ .uni-input-input{font-size: 26rpx;}
.check /deep/ .uni-textarea-textarea{font-size: 26rpx;}
.check /deep/ .is-disabled{color: #222327;background-color: #ffffff !important;}
.check /deep/ .uni-data-checklist .checklist-group .checklist-box{margin:10rpx 8rpx 10rpx 16rpx;}
.check /deep/ .uni-data-checklist{flex: 0 0 auto;}
.check{min-height: 100vh;padding: 20rpx 18rpx 110rpx;box-sizing: border-box;}
.cbox{background: #FFFFFF;border-radius: 20rpx;flex: 1;margin-bottom: 24rpx;

	.chmain{
		padding: 0 32rpx 10rpx;box-sizing: border-box;
		.rimg{width: 16rpx;height: 28rpx;flex: 0 0 auto;margin-left: 20rpx;
			image{width: 100%;height: 100%;}
		}
		.checkimg{width: 80rpx;height: 40rpx;margin-right: 8rpx;}
	}
	
}
.addbox{height: 190rpx;background: #FFFFFF;border-radius: 10rpx;border: 2rpx dashed #A7A7A7;margin: 48rpx 0 56rpx;
	image{width: 54rpx;height: 46rpx;margin-bottom: 16rpx;}
	view{font-weight: bold;font-size: 26rpx;color: #272727;}
}
.imgs{
	width: 310rpx;height: 186rpx;position: relative;margin: 0 10rpx 10rpx 0;
	.img{width: 100%;height: 100%;}
	.del{width: 24rpx;height: 24rpx;position: absolute;right: 0;top: 0;z-index: 2;}
}
</style>