uniapp发布视频

<template>
	<view>
		<u-navbar title="我要发布" :custom-back="back" :border-bottom="false" :background="background" :title-bold="true"
			title-color="#000">
		</u-navbar>
		<custom-tabs type="c1" :value="tabs" @change="changeIndex">
			<custom-tab-pane label="照片" name="c1_1">
				<yq-upload class="u-p-l-20 u-m-b-20" :file-list="sub.images" :custom="6" :count="6"
					@get_imgs="get_wximg">
				</yq-upload>
				<u-input placeholder="选择发布类型" class="u-m-r-20 u-m-l-20" v-model="label" type="select"
					@click="classShow = true" />
				<textarea class="textarea u-m-t-20" rows="3" cols="20" v-model="edit.content" placeholder="添加描述">
				</textarea>
			</custom-tab-pane>
			<custom-tab-pane label="视频" name="c1_2">






				<view class="upload u-m-l-20">
					<view v-if="edit.video == ''" class="file videoFile" @tap="chooseVideo">
						<view class="u-m-t-70">
							<i class="iconfont u-font-19">&#xe6c9;</i>
							<view class="gray">添加视频</view>
						</view>
						<image style="width:112upx;height:98upx;" :src="app + '/xj.png'" mode=""></image>
					</view>
					<view v-else class="file videoFile video_Box">
						<video :src="edit.video" controls></video>
						<view class="closeA" @tap="deleteVideo">&#xe6de;</view>
					</view>
				</view>






				<u-input placeholder="选择发布类型" class="u-m-r-20 u-m-l-20" v-model="label" type="select"
					@click="classShow = true" />
				<textarea class="textarea u-m-t-20" rows="3" cols="20" v-model="edit.content" placeholder="添加描述">
				</textarea>
			</custom-tab-pane>
		</custom-tabs>
		<u-select v-model="classShow" :list="classList" @confirm="clickClass" value-name="fTypeId"
			label-name="typeName"></u-select>
		<view class="release" @click="add()">
			<view class="bottom-btn">发布</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	let baseUrl = getApp().globalData.api_url; //域名





	import yqUpload from '@/components/yq-upload/index.vue'
	export default {
		components: {
			yqUpload
		},
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				tabs: 0,
				sub: {
					wximg: '',
					images: []
				},
				introduction: '',
				edit: {
					content: '',
					fShopId: '',
					type: 0,
					fTypeId: '',
					video: '',




					adressList: [],
				},
				label: '',
				// 类型相关
				classList: [],
				classShow: false,





				app: getApp().globalData.peiImg, //图片
				videoFile: '',
				videoSrc: '', // 视频资源路径
				photosSrc: [], //照片的路径
				pic_tempFilePath: [], //上转图片的数组
				video_tempFilePath: '', //上传视频的地址
				file: '',
				thumbTempFilePath: '', // 视频缩略图临时地址
				tempFilePath: [], // 视频资源临时地址
				shuiyinpath: '', // 带水印的视频缩略图
				mobile1_wx: 1,
				imageLists: [],
			};
		},
		onLoad(options) {
			this.edit.fShopId = options.fShopId
			console.log(options.fShopId)
		},
		mounted() {
			this.$api.foodTwoTypeList().then(res => {
				this.classList = res.data
			})
		},
		methods: {
			// 类型
			clickClass(e) {
				this.label = e[0].label
				this.edit.fTypeId = e[0].value
			},
			add() {
				console.log(this.edit.adressList)
				this.$api.release(this.edit).then(res => {
					if (res.code == 200) {
						this.$until.success('发布成功');
						setTimeout(() => {
							uni.navigateTo({
								url: 'vip'
							})
						}, 600)
					} else {
						this.$until.error('请填写完整信息');
					}
				})
			},
			back() {
				uni.navigateTo({
					url: 'vip'
				})
			},
			changeIndex() {
				this.edit.content = ''
				if (this.edit.type == 0) {
					this.edit.type = 1
				} else {
					this.edit.type = 0
				}
			},
			get_imgs(res) {
				this.edit.adressList.push(res[0].data.picture[0])
			},
			get_wximg(res) {
				this.edit.adressList.push(res[0].data.picture[0])
			},





			/* 删除视频 */
			deleteVideo() {
				this.edit.adressList = []
			},
			// 选择视频   并上传
			chooseVideo() {
				var that = this;
				uni.chooseVideo({
					count: 1, //选择多少个视频
					sourceType: ['album', 'camera'], //视频来源相册和相机都可以
					maxDuration: 30, //相机拍摄最大时长为30S
					camera: 'back', //默认摄像头是后置摄像头
					success: res => {
						console.log('打印视频');
						console.log(res);
						console.log(res.tempFilePath);
						this.edit.video = res.tempFilePath;
						this.edit.adressList.push(res.tempFilePath)
						this.video_tempFilePath = res.tempFilePath;
						uni.uploadFile({
							url: baseUrl + '/app/file/uploadVideo',
							filePath: res.tempFilePath,
							name: 'file',
							success: res => {
								//console.log('上',res.data)
								let data = JSON.parse(res.data)
								that.pic_tempFilePath = data.data.file_url
							}
						})
						this.pic_tempFilePath = res.tempFilePath;
					},
					fail: res => {
						uni.showModal({
							content: '视频格式不正确,请重新选择',
							showCancel: false
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.release {
		display: flex;
		position: absolute;
		width: 100%;
		bottom: 100rpx;
		justify-content: center;

		.bottom-btn {
			width: 90%;
			height: 96rpx;
			color: #fff;
			font-size: 32rpx;
			line-height: 96rpx;
			text-align: center;
			background: #F54319;
			border-radius: 48rpx;
		}
	}

	.tit {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		margin: 20rpx 0;
	}

	.textarea {
		// margin: 20rpx;
		margin: 0 auto;
		padding: 20rpx;
		width: 90%;
		font-size: 12px;
		border-radius: 8rpx;
		border-top: 1px solid #e6e6e6;
		border-bottom: 1px solid #e6e6e6;
	}

	.map-bom {
		height: 90rpx;
		margin: 20rpx;
		border-bottom: 2rpx solid #000;
	}

	.upload {
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #e6e6e6;
	}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值