440 lines
13 KiB
Vue
440 lines
13 KiB
Vue
<template>
|
||
<view>
|
||
<form>
|
||
<view class="cu-bar bg-white margin-top">
|
||
<view class="action">
|
||
<text class='iconfont' style="margin-right: 10upx;font-size: 36upx;"></text>
|
||
发布状态
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="grid col-1 grid-square flex-sub">
|
||
<radio-group class="block" style="text-align: left;padding-left: 30upx;padding-bottom: 10upx;" @change="RadioChange">
|
||
<radio class='blue radio radio-my' :class="videoDate.status=='0'?'checked':''" :checked="videoDate.status=='0'?true:false" value="0">
|
||
<text style="padding-left: 10upx;">公开，所有人可观看</text>
|
||
</radio>
|
||
<radio class='red radio radio-my' :class="videoDate.status=='1'?'checked':''" :checked="videoDate.status=='1'?true:false" value="1">
|
||
<text style="padding-left: 10upx;">私密，只可自己观看</text>
|
||
</radio>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cu-bar bg-white margin-top">
|
||
<view class="action">
|
||
<text class='iconfont' style="margin-right: 10upx;font-size: 38upx;"></text>
|
||
视频描述
|
||
</view>
|
||
<view class="action">
|
||
{{videoDate.note.length}}/50
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group align-start">
|
||
<textarea style="border: 2rpx solid #EEEEEE; padding-top: 10rpx; padding-left: 10rpx;" :maxlength="50" @input="textareaBInput" placeholder="请输入视频描述" v-model="videoDate.note"></textarea>
|
||
</view>
|
||
|
||
<view class="cu-bar bg-white margin-top">
|
||
<view class="action" @tap="ChooseVideo">
|
||
<text class='iconfont' style="margin-right: 10upx; font-size: 38rpx;"></text>
|
||
选择视频(视频大小不超过{{videoSize}}M)
|
||
</view>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="grid col-1 grid-square flex-sub">
|
||
<view style="width: 100%;height: auto;height: auto;background-color: #eaeaea;padding-bottom: 0upx;" v-if="videoDate.url && videoDate.url.trim() != ''">
|
||
<view class="bg-img" @click="viewVideo(videoDate.url)">
|
||
<image :src="videoDate.imageOssUrl" mode="" style="width: 100%;" :style="{height:videoHeight+'px'}"></image>
|
||
<text class="iconfont icon"></text>
|
||
</view>
|
||
|
||
<button @tap.stop="ChooseVideo()" class="cu-btn bg-red margin-tb-sm lg" style="width: 50%;margin-left: 25%;">重新选择视频</button>
|
||
</view>
|
||
<view class="solids" @tap="ChooseVideo" v-if="!videoDate.url || videoDate.url.trim() == ''">
|
||
<text class='iconfont icon'></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view @click="sendVideo" class="bg-white uni-flex btns margin-top" style="text-align: center;padding: 0 30upx;background-color: unset;">
|
||
<button type="primary">
|
||
<text class="iconfont" style="font-size: 40upx;margin-right: 10upx;"></text>
|
||
{{videoBtnTitle}}
|
||
</button>
|
||
</view>
|
||
</form>
|
||
|
||
|
||
|
||
<view style="width: 100%;height: 50upx;"></view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import url from '@/common/http/url.js';
|
||
import publics from "@/common/utils/public.js"
|
||
import upload from "@/common/http/upload.js"
|
||
// 以下路径需根据项目实际情况填写
|
||
import { pathToBase64, base64ToPath } from '@/libs/gsq-image-tools.js'
|
||
|
||
// #ifdef APP-PLUS
|
||
const crop = uni.requireNativePlugin("Html5app-VideoCrop");
|
||
// #endif
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
videoBtnTitle:'发布视频',
|
||
videoHeight:'200',
|
||
videoSize:50,
|
||
videoType:{
|
||
store:false,
|
||
product:false,
|
||
dkUser:false
|
||
},
|
||
videoDate:{
|
||
id:0,
|
||
note:'',
|
||
duration:0,
|
||
url:'',
|
||
imageUrl:'',
|
||
imageOssUrl:'',
|
||
videoData:{cursorId:-1},
|
||
imageData:{cursorId:-1},
|
||
lng:'',
|
||
lat:'',
|
||
userType:0,
|
||
productId:null,
|
||
status:0
|
||
}
|
||
};
|
||
},
|
||
async onLoad(options){
|
||
if(options.videoId){
|
||
this.videoDate.id = options.videoId;
|
||
this.videoBtnTitle = "修改视频";
|
||
}
|
||
},
|
||
mounted() {
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
let windowWidth = systemInfo.windowWidth-60;//预算视频宽度
|
||
let autoHeight = (windowWidth/3)*5;//采用比例为5:3
|
||
this.videoHeight = parseInt(autoHeight);//取整
|
||
//获取视频编辑信息
|
||
this.videoInitConfig();
|
||
//判断是否设置地址
|
||
let _this = this;
|
||
let addressLngLat = publics.getMyaddressLngLat();
|
||
if(addressLngLat){
|
||
//设置地址
|
||
let myAddressData = JSON.parse(addressLngLat);
|
||
_this.videoDate.lng = myAddressData.longitude;
|
||
_this.videoDate.lat = myAddressData.latitude;
|
||
}else{
|
||
this.$msg("请先设置您当前的位置");
|
||
setTimeout(function(){
|
||
_this.openMap();
|
||
},500);
|
||
}
|
||
},
|
||
methods: {
|
||
async videoInitConfig(){
|
||
let that = this;
|
||
let res = await this.$http('get', url.interaction.videoConfig, {videoId:this.videoDate.id});
|
||
let data = res.data
|
||
that.videoSize = data.videoSize;
|
||
|
||
that.videoType.store = data.store;
|
||
that.videoType.product = data.product;
|
||
that.videoType.dkUser = data.dkUser;
|
||
|
||
if(that.videoDate.id != 0 && data.videoData){
|
||
let videoData = data.videoData;
|
||
that.videoDate.note = videoData.note;
|
||
that.videoDate.duration = videoData.duration;
|
||
that.videoDate.url = videoData.video;
|
||
that.videoDate.imageUrl = videoData.image;
|
||
that.videoDate.imageOssUrl = videoData.image;
|
||
that.videoDate.videoData = {cursorId:0};
|
||
that.videoDate.imageData = {cursorId:0};
|
||
that.videoDate.lng = videoData.lng;
|
||
that.videoDate.lat = videoData.lat;
|
||
that.videoDate.userType = videoData.userType;
|
||
that.videoDate.status = videoData.status;
|
||
if(videoData.videoUrl){
|
||
that.videoDate.productId = videoData.videoUrl.split("id=")[1];
|
||
}
|
||
}
|
||
},
|
||
videoCrop(){
|
||
let that = this;
|
||
publics.jiuYinVideoCrop(this.videoDate.url,res => {
|
||
if(res){
|
||
that.videoDate.url = res.mp4;
|
||
that.videoDate.imageUrl = res.image;
|
||
}
|
||
});
|
||
},
|
||
select(){
|
||
//打开视频选择
|
||
const _this=this;
|
||
plus.gallery.pick(function(e){
|
||
_this.setPath(e.files[0]);
|
||
}, function (e){
|
||
|
||
},{filter:"video",multiple:true,maximum:1,system:false,onmaxed:function(){
|
||
|
||
}});
|
||
},
|
||
setPath:function(url){
|
||
console.log(url);
|
||
const that=this;
|
||
crop.openCrop({
|
||
"url":url,
|
||
"resolution":"480p", //分辨率
|
||
"mode":"fill", //视频模式，填充、裁剪SCALE
|
||
"quality":"sd", // 高度质量
|
||
"ratio":"9/16", //视频比例
|
||
"mintime":2000, //限制最小时间
|
||
"codecs":2,//编码方式
|
||
"gop":"5",
|
||
"fps":"25"
|
||
},res=>{
|
||
console.log(JSON.stringify(res));
|
||
|
||
that.videoDate.url = 'file://'+res.mp4;
|
||
that.videoDate.duration = res.duration;
|
||
if(res.image.indexOf("?t=") != -1){
|
||
res.image = res.image.split("?t=")[0];
|
||
}
|
||
that.videoDate.imageUrl = 'file://'+res.image;
|
||
|
||
console.log(JSON.stringify(res));
|
||
|
||
that.uploadImageByUrl(that.videoDate.imageUrl);
|
||
});
|
||
},
|
||
viewVideo(url){
|
||
uni.setStorageSync('sendVideoUrl', url)
|
||
this.$navigateTo("../setting/video?sendVideo=true")
|
||
},
|
||
ChooseVideo() {
|
||
let that = this;
|
||
let itemList = ['从手机相册选择', '相机拍摄']
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
let brand = systemInfo.brand
|
||
console.log("--------当前手机品牌：", brand)
|
||
if (brand.indexOf('HUAWEI')>-1) {
|
||
itemList = ['从手机相册选择']
|
||
}
|
||
uni.showActionSheet({
|
||
itemList: itemList,
|
||
success: function (res) {
|
||
if(res.tapIndex == 0){//从手机相册选择
|
||
that.chooseVideoByType("album");
|
||
}else{//相机拍摄
|
||
that.chooseVideoByType("camera");
|
||
}
|
||
},
|
||
fail: function (res) {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
},
|
||
chooseVideoByType(type){
|
||
let that = this;
|
||
this.videoDate.url = '';
|
||
this.videoDate.imageUrl = '';
|
||
this.videoDate.imageOssUrl = '';
|
||
publics.uploadJiuYinVideo(this.videoSize,type,res => {
|
||
console.log("-------> ", res)
|
||
if(res){
|
||
//去除后面时间戳
|
||
if(res.mp4.indexOf("?t=") != -1){
|
||
res.mp4 = res.mp4.split("?t=")[0];
|
||
}
|
||
if(res.image.indexOf("?t=") != -1){
|
||
res.image = res.image.split("?t=")[0];
|
||
}
|
||
//判断第一个字符是否存在file://
|
||
if(res.mp4.indexOf("file://") == -1){
|
||
res.mp4 = 'file://'+res.mp4;
|
||
}
|
||
if(res.image.indexOf("file://") == -1){
|
||
res.image = 'file://'+res.image;
|
||
}
|
||
console.log("-------> ", res)
|
||
that.videoDate.url = res.mp4;
|
||
that.videoDate.duration = res.duration;
|
||
//+"?t="+new Date().getTime()
|
||
that.videoDate.imageUrl = res.image;
|
||
that.videoDate.imageOssUrl = res.image
|
||
console.log('111111111111111111111111111111111111')
|
||
// that.uploadImageByUrl(that.videoDate.imageUrl);
|
||
}
|
||
});
|
||
},
|
||
async uploadImageByUrl(url) {
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '视频解析中...'
|
||
});
|
||
let urls = url.split(".");
|
||
let fileType = urls[urls.length-1];
|
||
let res = await this.$http("GET", "single/home/policy", {type: 0, fileType:fileType})
|
||
let data = res.data
|
||
data.filePath = url;
|
||
that.videoDate.imageData = data;
|
||
upload.uploadImageOss([data]).then(doc =>{
|
||
if (doc) {
|
||
uni.hideLoading();
|
||
that.videoDate.imageOssUrl = that.videoDate.imageData.fileUrl;
|
||
}
|
||
})
|
||
},
|
||
async sendVideo(){
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '视频发布中...'
|
||
});
|
||
if(this.videoDate.videoData && this.videoDate.videoData.cursorId == 0){
|
||
uni.hideLoading();
|
||
this.saveVideo();//直接保存
|
||
return;
|
||
}
|
||
let url = this.videoDate.url;
|
||
let urls = url.split(".");
|
||
let fileType = urls[urls.length-1];
|
||
|
||
let res = await this.$http("GET", "single/home/policy", {type: 1, fileType:fileType})
|
||
let data = res.data
|
||
data.filePath = url;
|
||
that.videoDate.videoData = data;
|
||
console.log("上传视频。。。。。", data)
|
||
upload.uploadImageOss([data]).then(doc =>{
|
||
if (doc) {
|
||
uni.hideLoading();
|
||
that.saveVideo();
|
||
}
|
||
})
|
||
},
|
||
async saveVideo(){
|
||
let that = this;
|
||
if(!this.videoDate.videoData || this.videoDate.videoData.cursorId == -1){
|
||
this.$msg("获取不到视频信息,请您重新上传视频");
|
||
return;
|
||
}
|
||
if(!this.videoDate.note || this.videoDate.note.trim().length <= 0 || this.videoDate.note.trim().length > 50){
|
||
uni.hideLoading();
|
||
this.$msg("请您填写视频描述");
|
||
return true;
|
||
}
|
||
if(!this.videoDate.productId){
|
||
this.videoDate.productId = 0;
|
||
}
|
||
if(!this.videoDate.duration){
|
||
this.videoDate.duration = 0;
|
||
}
|
||
let paret = {
|
||
id:this.videoDate.id,
|
||
lng:this.videoDate.lng,
|
||
lat:this.videoDate.lat,
|
||
userType:this.videoDate.userType,
|
||
productId:this.videoDate.productId,
|
||
status:this.videoDate.status,
|
||
note:this.videoDate.note,
|
||
// imageId:this.videoDate.imageData.cursorId,
|
||
videoId:this.videoDate.videoData.cursorId,
|
||
duration:this.videoDate.duration
|
||
};
|
||
|
||
let res = await this.$http('post', url.interaction.saveOrUpdateVideo, paret);
|
||
let data = res.data
|
||
uni.hideLoading();
|
||
if(data){
|
||
if(data.trim() == "411"){
|
||
this.$msg("请先设置您当前的位置");
|
||
setTimeout(function(){
|
||
that.openMap();
|
||
},1500);
|
||
}else{
|
||
if(that.videoDate.id != 0){
|
||
this.$msg("修改成功");
|
||
}else{
|
||
this.$msg("发布成功");
|
||
}
|
||
that.videoDate = null;
|
||
// this.$navigateBack(1, 1000);
|
||
}
|
||
}
|
||
},
|
||
ViewVideo(index) {
|
||
let url = this.imgVideoList[index].url;
|
||
this.showModal('VideoShow');
|
||
},
|
||
showModal(e) {
|
||
this.modalName = e;
|
||
},
|
||
hideModal(e) {
|
||
this.modalName = null;
|
||
},
|
||
textareaBInput(e) {
|
||
this.videoDate.note = e.detail.value;
|
||
},
|
||
RadioChange(e) {
|
||
this.videoDate.status = parseInt(e.detail.value);
|
||
},
|
||
RadioChangeByUserType(e) {
|
||
this.videoDate.userType = parseInt(e.detail.value);
|
||
},
|
||
openMap(){
|
||
let _this = this;
|
||
uni.chooseLocation({
|
||
keyword: "",
|
||
success: function(res) {
|
||
_this.videoDate.lng = res.longitude;
|
||
_this.videoDate.lat = res.latitude;
|
||
publics.setMyaddressLngLat(JSON.stringify(res));
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url('../../common/main.css');
|
||
/* @import url('https://hejiume-public.oss-cn-chengdu.aliyuncs.com/app/resources/main.css'); */
|
||
</style>
|
||
<style scoped>
|
||
.bg-img{
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.bg-img .icon{
|
||
position: absolute;
|
||
font-size: 100rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
.cu-form-group .title {
|
||
min-width: calc(4em + 15px);
|
||
}
|
||
|
||
.radio-my {
|
||
width: 100%;
|
||
margin-bottom: 20upx;
|
||
}
|
||
.solids .icon{
|
||
font-size: 54rpx;
|
||
color: #b1b2b5;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-left: -27rpx;
|
||
margin-top: -27rpx;
|
||
}
|
||
</style>
|
||
|