odd_job_applet/pages/video/video.vue

<template>
	<view>
		<scroll-view scroll-x class="bg-white nav solid-bottom echo-fixed-top">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="wtype==1?'text-blue cur':''" @tap="tabSelect" data-wtype="1">发布视频</view>
				<view class="cu-item flex-sub" :class="wtype==2?'text-blue cur':''" @tap="tabSelect" data-wtype="2">我发布的</view>
			</view>
		</scroll-view>
		<view class="echo-fixed-top-empty"></view>
		
		<view v-if="wtype==1">
			<form>
				<view class="echo-formmain padding bg-white" style="min-height: calc(100vh - 100rpx);">
					<view>
						<view class="cu-bar bg-white">
							<view class="action" style="margin-left: 0rpx;">
								<text class="text-bold text-black">视频标题</text>
							</view>
						</view>
						<view class="padding-sm radius bg-white solid-bottom">
							<input name="title" @input="setInput" placeholder="请输入..." :value="videoinfo.title"></input>
						</view>
					</view>
					
					<view>
						<view class="cu-bar bg-white">
							<view class="action" style="margin-left: 0rpx;">
								<text class="text-bold text-black">上传视频文件</text>
							</view>
						</view>
						<!-- <view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-if="videoinfo.imageurl!=''">
								<image :src="videoinfo.imageurl" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="delVideo">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" v-if="videoinfo.imageurl==''" @click="chooseVideo">
								<text class='cuIcon-record'></text>
							</view> 
						</view> -->
						
						<view class="grid col-4 grid-square flex-sub" v-if="videoinfo.videourl==''">
							<view class="solids" @click="chooseVideo">
								<text class='cuIcon-record'></text>
							</view> 
						</view>
						<view class="grid col-1 grid-square flex-sub" v-if="videoinfo.videourl!=''">
							<view class="bg-img">
								<video id="myVideo" class="myVideo" :src="videoinfo.videourl" enable-danmu controls></video>
								<view class="cu-tag bg-red" @tap.stop="udelVideo">
									<text class='cuIcon-close'></text>
								</view>
							</view>
						</view>
						
					</view>
					<view class="flex flex-direction padding-top-xl">
						<button class="cu-btn lg bg-blue" @tap="formSubmit">立即提交</button>
					</view>
				</view>
			</form>
		</view>
		
		<view v-if="wtype==2">
			<view class="listbox">
				<block v-for="(item,index) in plist" :key="index">
					<view class="cu-card case vitembox">
						<view class="cu-item shadow">
							<view class="image" @tap="goDetail(item.id)">
								<image :src="item.imageurl" mode="aspectFill" style="height: 500rpx;"></image>
								<view class="cu-tag bg-blue">{{item.status_text}}</view>
								<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
							</view>
							<!-- <view class="text-content padding-lr-sm padding-top-xs text-cut">{{item.title}}</view> -->
							<view class="cu-list menu-avatar">
								<view class="cu-item">
									<view class="cu-avatar round lg" @tap="goDetail(item.id)" :style="'background-image:url('+item.worker.tilpic+');'"></view>
									<view class="content flex-sub">
										<view class="text-grey text-cur flex justify-between">
											<text>{{item.worker.title}}</text>
										</view> 
										<view class="text-gray text-sm flex justify-between"> 
											{{item.createtime}}
											<view class="text-gray text-sm" :data-index="index" @tap="delVideo">
												<text class="cuIcon-delete margin-lr-xs"></text> 删除
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="pstatus"></uni-load-more>
		</view>
		
		
		<view class="padding-sm"></view>
		<view class="padding-xl"></view>
		<view class="cu-bar tabbar bg-white foot">
			<view class="action text-gray" @tap="goNavPage('/pages/worker/worker')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/windex.png"></image>
				</view>
				首页
			</view>
			<view class="action text-gray" @tap="goNavPage('/pages/demand/demand')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/wdemand.png"></image>
				</view>
				订单
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="action text-blue videoimg" @tap="goNavPage('/pages/video/video')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/video.png"></image>
				</view>
				录视频
			</view>
			<!-- #endif -->
			<view class="action text-gray" @tap="goNavPage('/pages/supply/supply')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/wsupply.png"></image>
				</view>
				供人
			</view>
			<!--
			<view class="action text-gray" @tap="goNavPage('/pages/worker/workerlist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/wworker.png"></image>
				</view>
				企业1
			</view>
			-->
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				isRotate: false,
				userinfo: false,
				workerinfo: null,
				wtype: 1,
				videoinfo:{
					title: "",
					videourl: ""
				},
				
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: [],
				
			}
		},
		onLoad: function(option) {
			_this = this;
			_this = this;
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			_this.workerinfo = uni.getStorageSync('workerinfo') || false;
			if (_this.workerinfo === false) {
				uni.reLaunch({
					url: "/pages/my/my"
				});
				return false;
			}
			_this.getMore();
		},
		onPullDownRefresh: function() {
			_this.pageRefresh();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			goDetail: function(videoid) {
				uni.navigateTo({
					url: '/pages/video/detail?videoid=' + videoid
				});
			},
			
			
			udelVideo: function(e) {
				uni.showModal({
					title: '信息提示',
					content: "删除后不可恢复，确认要删除吗？",
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							_this.videoinfo.videourl = "";
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			
			delVideo: function(e) {
				var index = e.currentTarget.dataset.index;
				uni.showModal({
					title: '信息提示',
					content: "删除后不可恢复，确认要删除吗？",
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							_this.$req.ajax({
								path: "video/delvideo",
								data: {
									videoid: _this.plist[index].id,
									workerid: _this.workerinfo.id
								}
							}).then((data) => {
								uni.showModal({
									title: '信息提示',
									content: "视频信息删除成功。",
									showCancel: false
								});
								_this.plist.splice(index, 1);
							}).catch((err) => {
								uni.showModal({
									title: '信息提示',
									content: err,
									showCancel: false
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			tabSelect: function(e) {
				_this.wtype = e.currentTarget.dataset.wtype;
			},
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "video/listvideo",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						workerid: _this.workerinfo.id
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			
			// 提交表单
			formSubmit: function(e) {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "video/setvideo",
					data: {
						workerid: _this.workerinfo.id,
						title: _this.videoinfo.title,
						videourl: _this.videoinfo.videourl,
					},
				}).then((data) => {
					_this.isRotate = false;
					uni.showModal({
						title: '信息提示',
						content: "提交成功。",
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								_this.wtype = 2;
								_this.videoinfo = {
									title: "",
									videourl: ""
								};
								_this.pageRefresh();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}).catch((err) => {
					_this.isRotate = false;
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			setInput: function(e) {
				_this.videoinfo.title = e.detail.value;
			},
			
			chooseVideo: function(e) {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						_this.$req.ajaxFile({
							path: "attachment/tplfieldvideo",
							title: '正在上传',
							filePath: res.tempFilePath,
							fileName: 'file',
						}).then((vfiledata) => {
							var vdata = JSON.parse(vfiledata.data);
							_this.videoinfo.videourl = vdata.data.src;
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
						});
						
						
					}
				});
			},
			
			goNavPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo === false) {
					return false;
				}
				uni.redirectTo({
					url: pageurl
				});
			},
		}
	} 
</script>


<style lang="scss">
	
	// .vitembox{ width: 360rpx; }
	// .vitembox image{ width: 360rpx; height: 165rpx; }
	.myVideo{ width: 690rpx; height: 690rpx; }
</style>