<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"></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"></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>
uniapp发布视频
最新推荐文章于 2024-05-09 10:59:32 发布