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">封面<text>（建议图片尺寸为334*334）</text></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">视频<text>（建议视频时长在5分钟内，视频大小不超过100M）</text></view>
			<view class="videobox video-flex" 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 v-if="!is_video" :src="videopath" controls></video>
                <view v-else class="video-mode">
                    <image src="../../static/videoPlay.png" mode=""></image>
                </view>
            </view>
			<!-- 标签 -->
			<view>
				<view class="titles flex-title">
				    <text>标签</text>
				    <text @click="editing">{{ is_edit ? "取消编辑" : "编辑" }}</text>
				</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 }}
                    <u-icon v-show="is_edit && item.user_id != 0" class="close" name="close" color="#666" size="18" @click="isTable(item.id,index)"></u-icon>
				</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" v-if="userinfo.role != 4">
					选择商品
					<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://mall.dmygkeji.com/storeapi/Upload/uploadFile',
			fileListA: [],
			imgarrA: [],
			videopath: '', //视频链接
			fileListes: [],
			show: false,
            is_video: false,
			show_two: false,
			arres_list: [],
			shoplist: [], //选择商品列表
			list: [],
			scrollTop: 0,
			selectarr: [], //选中标签
			tagcontent: '', //新建标签名字
			selectvideo: '', //视频名字
			videostate: false, //视频状态
			progress: 0,
			is_edit: false, // 编辑标签
			userinfo:{}
		};
	},
	onLoad() {
		this.userinfo = uni.getStorageSync("userinfo")
		this.getLiveSpec();
		this.resetgood();
	},
    watch: {
      show() {
          let me = this;
          if (this.show) {
              this.is_video = true;
          } else {
              setTimeout(function() {
                  me.is_video = false;
              },600)
          }
      },
      immediate: true
    },
	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'
					// });
                    uni.showToast({
                        title: res.message,
                        icon: "none"
                    })
				} else {
					// this.$refs.uToast.show({
					// 	title: res.message,
					// 	type: 'success'
					// });
                    uni.showToast({
                        title: res.message,
                        icon: "none"
                    })
					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',
					// });
                    uni.showToast({
                        title: res.message,
                        icon: "none"
                    })
				} else {
					this.tagcontent = '';
					this.show = false;
                    res.data.state = false;
                    this.fileListes.push(res.data);
					// this.$refs.uToast.show({
					// 	title: res.message,
					// 	type: 'success'
					// });
                    uni.showToast({
                        title: res.message,
                        icon: "none"
                    })
				}
			});
		},
		// 获取标签
		getLiveSpec() {
			let that = this;
			this.$u.api.getLiveSpec({}).then(res => {
				if (res.errCode != 0) {
					// this.$refs.uToast.show({
					// 	title: res.message,
					// 	type: 'error'
					// });
                    uni.showToast({
                        title: res.message,
                        icon: "none"
                    })
				} else {
					let arr = res.data;
					for (let index in arr) {
						arr[index].state = false;
					}
					that.fileListes = arr;
				}
			});
		},
        // 删除标签
        isTable(id,index) {
            uni.showModal({
                title: "提示",
                content: "是否删除此标签？",
                success: (res) => {
                    if (res.confirm) {
                        this.delTable(id,index);
                    }
                }
            })
        },
        delTable(id,index) {
            let me = this;
            this.$u.post("Streaming/deltLabel", {label_id: id}).then(res => {
                if (res.errCode == 0) {
                    // this.$refs.uToast.show({
                    // 	title: res.message,
                    // 	type: 'success'
                    // });
                    uni.showToast({
                        title: res.message,
                        icon: "none"
                    })
                    this.fileListes.splice(index,1);
                }
            })
        },
		// 上传封面
		uploadcover(data) {
			let obj = data.data;
			obj.url = obj.file_path;
			this.imgarrA.push(obj);
		},
		// 上传视频
		uploadvideo() {
			cImage(this);
		},
		// 新建标签
		show_add() {
			this.show = !this.show;
		},
        // 编辑标签
        editing() {
            this.is_edit = !this.is_edit;
        },
		// 选择直播商品点击确定
		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;
    .flex-title {
        display: flex;
        justify-content: space-between;
    }
	.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;
        .close {
            margin-left: 10rpx;
            vertical-align: middle;
        }
	}
	.active {
		background: #ff780f;
	}
	.titles {
		font-size: 30rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		margin: 30rpx 0;
		>text{
			font-size: 20rpx;
			color: #999;
		}
	}
    .video-flex {
        flex-direction: column;
        font-size: 28rpx;
        color: #666;
    }
	.videobox {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f4f5f6;
		margin-left: 10rpx;
		border-radius: 10rpx;
        
        .video-mode {
            width: 200rpx;
            height: 200rpx;
            line-height: 280rpx;
            text-align: center;
            border-radius: 10rpx;
            background-color: #000;
            & > image {
                width: 100rpx;
                height: 100rpx;
            }
        }
	}
	.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>