demingshangjia/pages/release/video.vue

<template>
	<view id="release" >
		<u-form :model="form" ref="uForm">
			<u-form-item label="标题" label-position="right"><u-input v-model="form.name" placeholder="请输入标题" /></u-form-item>
			<view class="titles">封面</view>
			<u-upload
				:form-data="coverformdata"
				:max-count="1"
				:header="header"
				name="article_cover"
				:action="action"
				del-color="#ececec"
				upload-text="选择图片"
				del-bg-color="#fff"
				:file-list="fileListA"
				@on-success="uploadcover"
			></u-upload>
			<view class="titles">视频</view>
			<view class="videobox" v-if="videostate == false" @click="uploadvideo">
				<u-icon name="plus" class="u-add-btn" size="40"></u-icon>
				<view class="videotext">选择视频</view>
			</view>
			<view class="videobox" v-else @click="uploadvideo"><video :src="videopath" controls></video></view>
			<!-- 标签 -->
			<view>
				<view class="titles">标签</view>
				<view class="form-view active" @click="show_add()">+ 新建标签</view>
				<view :class="['form-view', item.state == true ? 'active' : '']" v-for="(item, index) in fileListes" :key="index" @click="changeselect(index)">
					{{ item.name }}
				</view>
			</view>
			<!-- 简介 -->
			<view class="titles">正文</view>
			<view class="titles_border"><textarea placeholder="请输入内容..." v-model="form.intro"></textarea></view>
			<view class="show_two">
				<u-popup v-model="show_two" mode="bottom" :closeable="true">
					<view class="title"><text>选择商品</text></view>
					<!-- 商品列表 -->
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll">
						<view class="listes_shoping" v-for="(item, index) in list" :key="index">
							<view>
								<u-checkbox-group>
									<u-checkbox shape="circle" size="40" active-color="#FF780F" v-model="item.checked" :name="index" @change="checkboxChange"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view><image :src="item.goods_image" mode="widthFix"></image></view>
							<view class="contentes">{{ item.goods_name }}</view>
						</view>
					</scroll-view>

					<!-- 提交按钮 -->
					<view class="u-button" @click="changes()">确定</view>
				</u-popup>
				<!-- 底部选择商品列表 -->
				<view @click="show_two = true">
					选择商品
					<image class="images" src="../../static/image/tosign/bhottom.png"></image>
				</view>
				<!-- 选择后的列表 -->
				<view class="List_tosign" v-for="list in shoplist">
					<view><image :src="list.goods_image" mode="scaleToFill"></image></view>
					<view>{{ list.goods_name }}</view>
					<view><image src="../../static/image/tosign/delete.png" mode="widthFix" @click="delarr(list.goods_id)"></image></view>
				</view>
			</view>
			<!-- 提交 -->
			<u-button class="custom-style" shape="circle" size="default"  :hair-line="false" @click="publish">发表</u-button>
		</u-form>
		<!-- 添加标签的按钮 -->
		<u-popup v-model="show" mode="center" border-radius="14" :closeable="true">
			<view class="text">创建属于你的标签吧</view>
			<view class="u-inputes"><u-input v-model="tagcontent" /></view>
			<u-button  :hair-line="false" class="custom-style-button" shape="circle" size="default" @click="addLiveSpec">确定</u-button>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
let COS = require('../../common/cos-wx-sdk-v5.js');
// 上传文件
const upload_file_server = (_this, filepath) => {
	// 腾讯云配置
	let cosConfig = {
		Bucket: 'dmmall-1300406074', //replace with yours
		Region: 'ap-shanghai', //replace with yours
		SecretId: 'AKIDjDPJhni9gTzEB9iGNWQ3PTVGjv74q7EL', //replace with yours
		SecretKey: 'ye3SZOvAQO5X5LK3Vy933h6G86h4mqpG' //replace with yours
	};
	// 获取本地文件
	let filePath = filepath;
	// 自定义文件名以及路径
	let time = new Date();
	var y = time.getFullYear();
	var m = time.getMonth() + 1;
	m = m < 10 ? '0' + m : m;
	var d = time.getDate();
	d = d < 10 ? '0' + d : d;
	let str = y + m + d;
	let Key = 'video/' + str + '/' + filePath.substr(filePath.lastIndexOf('/') + 1);
	// 初始化凭证
	var cos = new COS({
		SecretId: cosConfig.SecretId,
		SecretKey: cosConfig.SecretKey
	});
	//上传文件
	cos.postObject(
		{
			Bucket: cosConfig.Bucket,
			Region: cosConfig.Region,
			Key: Key,
			StorgeClass: 'STANDARD', //存储方式
			FilePath: filePath
		},
		(err, data) => {
			console.log(err, data, 12345);
			if (err == null) {
				if (data.statusCode == 200) {
					_this.videopath = 'https://dmmall-1300406074.cos.ap-shanghai.myqcloud.com/' + Key;
					uni.hideLoading();
					_this.videostate = true;
				} else {
					uni.showToast({
						title: '上传失败！',
						icon: 'none'
					});
				}
			} else {
				return;
			}
		}
	);
};
// 选择图片(通用)
const cImage = _this => {
	uni.chooseVideo({
		count: 1,
		sourceType: ['camera', 'album'],
		success: function(res) {
			uni.showLoading({
				title: '上传中'
			});
			const tempFilePaths = res.tempFilePath;
			console.log(tempFilePaths);
			upload_file_server(_this, tempFilePaths);
		}
	});
};
export default {
	data() {
		return {
			form: {
				name: '',
				intro: '',
				sex: ''
			},
			coverformdata: {
				name: 'article_cover'
			},
			header: {
				Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
			},
			// 演示地址，请勿直接使用
			action: 'https://dmmall.sdbairui.com/storeapi/Upload/uploadFile',
			fileListA: [],
			imgarrA: [],
			videopath: '', //视频链接
			fileListes: [],
			show: false,
			show_two: false,
			arres_list: [],
			shoplist: [], //选择商品列表
			list: [],
			scrollTop: 0,
			selectarr: [], //选中标签
			tagcontent: '', //新建标签名字
			selectvideo: '', //视频名字
			videostate: false, //视频状态
			progress: 0
		};
	},
	onLoad() {
		this.getLiveSpec();
		this.resetgood();
	},
	methods: {
		// 获取可以推荐的商品
		resetgood() {
			this.$u.api.canselectgood({}).then(res => {
				if (res.data.live_stataes == 0) {
					this.$u.route({
						url: `/pages/${url}`
					});
				} else {
					let arr = res.data.list;
					for (let index in arr) {
						arr[index].checked = false;
					}
					this.list = arr;
				}
			});
		},
		// 发布短视频
		publish() {
			this.$u.api.publishvideo({
				article_title: this.form.name,
				article_content: this.form.intro,
				article_pic: this.imgarrA[0].file_name,
				video_path: this.videopath,
				goods_id_arr: this.arres_list,
				label_arr: this.selectarr
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				}
			});
		},
		// 获取商品数组变化
		getshoplist() {
			let arr = this.arres_list;
			let newarr = this.list;
			this.shoplist = [];
			for (let index in arr) {
				for (let i in newarr) {
					if (arr[index] == newarr[i].goods_id) {
						this.shoplist.push(newarr[i]);
					}
				}
			}
		},
		// 改变选中状态
		changeselect(num) {
			if (this.fileListes[num].state == true) {
				this.fileListes[num].state = false;
				let index = this.selectarr.indexOf(this.fileListes[num].id);
				this.selectarr.splice(index, 1);
			} else {
				this.fileListes[num].state = true;
				this.selectarr.push(this.fileListes[num].id);
			}
		},
		// 创建标签
		addLiveSpec() {
			this.$u.api.createLivesp({
				spec_name: this.tagcontent
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.tagcontent = '';
					this.show = false;
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					});
				}
			});
		},
		// 获取标签
		getLiveSpec() {
			let that = this;
			this.$u.api.getLiveSpec({}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data;
					for (let index in arr) {
						arr[index].state = false;
					}
					that.fileListes = arr;
				}
			});
		},
		// 上传封面
		uploadcover(data) {
			let obj = data.data;
			obj.url = obj.file_path;
			this.imgarrA.push(obj);
		},
		// 上传视频
		uploadvideo() {
			cImage(this);
		},
		// 新建标签
		show_add() {
			this.show = !this.show;
		},
		// 选择直播商品点击确定
		changes() {
			let that = this;
			that.show_two = false;
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			let that = this;
			let num = Number(e.name);
			if (e.value == true) {
				that.pushes(that.list[num].goods_id);
				that.list[num].checked = true;
			} else {
				that.delarr(that.list[num].goods_id);
				that.list[num].checked = false;
			}
		},
		// 删除直播商品
		delarr(id) {
			var that = this;
			if (id == '') {
				console.log('为空');
			} else {
				let index = that.arres_list.indexOf(id);
				that.arres_list.splice(index, 1);
				that.getshoplist();
			}
		},
		// 增加直播商品
		pushes(id) {
			var that = this;
			if (id == '') {
				console.log('为空');
			} else {
				that.arres_list.push(id);
				that.getshoplist();
			}
		}
	},
	components: {}
};
</script>

<style lang="scss" scoped>
#release {
	width: 690rpx;
	margin: 0 auto;
	padding-bottom:20rpx;
	.titles_border,
	.uni-textarea-compute {
		border: 1px #bababa solid !important;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.show_two {
		padding: 30rpx 0 70rpx 0;
	}
	.scroll {
		width: 100%;
		height: 400px;
	}
	.u-button {
		background: #ff780f;
		width: 690rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: rgba(255, 120, 15, 1);
		border-radius: 49px;
		font-size: 36rpx;
		color: #ffffff;
		text-align: center;
		margin: 0 auto 20rpx;
	}
	.show_two .title {
		width: 100%;
		border-bottom: solid 1px #ececec;
		margin-bottom: 30rpx;
	}

	.show_two .title > text {
		font-size: 30rpx;
		padding: 30rpx;
		display: block;
	}
	.show_two > view {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.show_two .images {
		width: 22rpx;
		height: 12rpx;
		float: right;
		top: 14rpx;
	}
	.List_tosign {
		overflow: hidden;
		zoom: 1;
		margin-top: 21rpx;
		position: relative;
	}
	.List_tosign > view {
		float: left;
	}
	.List_tosign > view:nth-child(1) {
		width: 180rpx;
		height: 160rpx;
		margin-bottom: 30rpx;
		image {
			border-radius: 15rpx;
			width: 100%;
			height: 100%;
		}
	}
	.List_tosign > view:nth-child(2) {
		width: 420rpx;
		height: 76rpx;
		margin: 43rpx 43rpx 0 21rpx;
	}
	.List_tosign > view:nth-child(3) {
		width: 26rpx;
		height: 27rpx;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		image {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	.listes_shoping {
		overflow: hidden;
		zoom: 1;
		margin-bottom: 30rpx;
		height: 160rpx;
		position: relative;
	}

	.listes_shoping > view {
		float: left;
	}

	.listes_shoping > view:nth-child(1) {
		width: 36rpx;
		height: 36rpx;
		margin-top: 62rpx;
		margin-left: 30rpx;
	}

	.listes_shoping > view:nth-child(2) {
		width: 180rpx;
		height: 160rpx;
		margin: 0 31rpx 0 19rpx;
	}

	.listes_shoping > view:nth-child(2) image {
		width: 100%;
	}

	.listes_shoping > view:nth-child(3) {
		width: 425rpx;
		margin-top: 43rpx;
		overflow: hidden;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.form-view {
		background: #cdc7c8;
		border-radius: 6rpx;
		margin-right: 20rpx;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		display: inline-block;
		margin-bottom: 28rpx;
		color: #fff;
	}
	.active {
		background: #ff780f;
	}
	.titles {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin: 30rpx 0;
	}
	.videobox {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #f4f5f6;
		margin-left: 10rpx;
		border-radius: 10rpx;
	}
	.videotext {
		margin-top: 10rpx;
	}
	.videobox video {
		width: 200rpx;
		height: 200rpx;
	}
	textarea {
		font-size: 26rpx;
	}
	.custom-style {
		background: rgba(255, 120, 15, 1) !important;
		color: #fff !important;
		// font-size: 36rpx;
	}
	.u-btn {
		width: 628rpx;
		height: 98rpx;
		background: rgba(255, 120, 15, 1) !important;
		border-radius: 49rpx;
		margin: 0 auto;
		font-size: 36rpx;
		color: rgba(255, 255, 255, 1) !important;
		line-height: 36px;
		border: 1px #ff780f solid;
		outline: none;
		border-color: rgba(255, 120, 15, 1) !important;
	}
	.custom-style-button {
		background: rgba(255, 120, 15, 1) !important;
		color: #fff !important;
		font-size: 28rpx;
		width: 200rpx;
		margin-bottom: 23rpx;
		line-height: 60rpx;
		height: 60rpx;
	}
}
.u-mode-center-box {
	padding: 120rpx;
	.text {
		font-size: 30rpx;
		margin-top: 74rpx;
		text-align: center;
		font-weight: 500;
		color: #333;
	}
}
.u-inputes {
	margin: 30rpx 0;
	border: 1px #ececec solid;
	padding-left: 14rpx;
	width: 420rpx;
}
</style>