You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
416 lines
12 KiB
416 lines
12 KiB
<template>
|
|
<view class="burst-wrap">
|
|
<view class="burst-wrap-bg">
|
|
<view>
|
|
<!-- 信息提交 -->
|
|
<view class="burst-info">
|
|
<view class="uni-uploader-body">
|
|
<view class="uni-uploader__files">
|
|
<!-- 图片 -->
|
|
<block v-for="(image,index) in imageList" :key="index">
|
|
<view class="uni-uploader__file">
|
|
<view class="icon iconfont icon-cuo">
|
|
<!-- @tap="delect(index)" -->
|
|
<uni-icons type="closeempty" color="#000" size="15" class="closeempty_icons" @tap="delect(index)"></uni-icons>
|
|
</view>
|
|
<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
|
|
</view>
|
|
</block>
|
|
<!-- 视频 -->
|
|
<view v-if="src1.url" style="width: 100%;height: 100%;">
|
|
<view>
|
|
<!-- <video :src="src" id="myVideo" class="video" @play="playVideoFullscreen"></video>
|
|
<cover-view style="position: absolute;width: 160rpx;height: 160rpx;z-index: 999;color: #fff;display: flex;">
|
|
<cover-view style="width: 80%;" @click="playVideoFullscreen"></cover-view>
|
|
<cover-view style="width: 20%;height: 40rpx;font-size: 45rpx;" @click="delectVideo">×</cover-view>
|
|
</cover-view> -->
|
|
<view class='course-video' :style="src1.url ? $util.imageCoverStyle(270,480) : ''">
|
|
<view class="relative-shadow flex justify-center align-center" @tap="handlePlay(src1)">
|
|
<view class="cuIcon-video icon-center f-28 c-white"></view>
|
|
</view>
|
|
<image :src="src1.poster" mode="aspectFit" style="position: absolute;top: 0px;width: 100%;height: 100%;"></image>
|
|
<uni-icons @click="delectVideo" type="closeempty" size="30" style="position: absolute;top: 0px;right: 0px;z-index: 1;"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="uni-uploader__input-box" v-if="VideoOfImagesShow">
|
|
<view class="uni-uploader__input" @tap="chooseVideoImage">
|
|
<image src="/static/image/jiahao.png" mode="widthFix" style="width: 60rpx;"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/common/config.js'
|
|
import { chat } from '@/mixins/chat.js'
|
|
import imImage from '@/components/message/im-image.vue';
|
|
var sourceType = [
|
|
['camera'],
|
|
['album'],
|
|
['camera', 'album']
|
|
]
|
|
export default {
|
|
components:{
|
|
imImage
|
|
},
|
|
mixins:[chat],
|
|
props: {
|
|
img_arr1: { type: Array, default: ()=>[] }
|
|
},
|
|
data() {
|
|
return {
|
|
imageList:[],//图片
|
|
src1:{},//视频存放
|
|
sourceTypeIndex: 2,
|
|
checkedValue:true,
|
|
checkedIndex:0,
|
|
sourceType: ['拍摄', '相册', '拍摄或相册'],
|
|
cameraList: [{
|
|
value: 'back',
|
|
name: '后置摄像头',
|
|
checked: 'true'
|
|
},
|
|
{
|
|
value: 'front',
|
|
name: '前置摄像头'
|
|
},
|
|
],
|
|
cameraIndex: 0,
|
|
VideoOfImagesShow:true,
|
|
}
|
|
},
|
|
watch: {
|
|
img_arr1: {
|
|
immediate: true, // 立即触发初始值
|
|
handler(newVal) {
|
|
if(newVal.length > 0) {
|
|
// this.handleImageLoad(newVal); // 你的业务逻辑
|
|
newVal.forEach((res)=>{
|
|
if(res.type==1){
|
|
this.imageList.push(config.apiUrl+res.src)
|
|
}else if(res.type==2){
|
|
this.src1 = {url:config.apiUrl+res.src,poster:config.apiUrl+res.privacy};
|
|
this.VideoOfImagesShow = false;
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onUnload() {
|
|
this.src1 = {},
|
|
this.sourceTypeIndex = 2,
|
|
this.sourceType = ['拍摄', '相册', '拍摄或相册'];
|
|
},
|
|
methods: {
|
|
chooseVideoImage(){
|
|
if(this.imageList.length>0){
|
|
uni.showActionSheet({
|
|
title:"选择上传类型",
|
|
itemList: ['图片'],
|
|
success: (res) => {
|
|
console.log(res)
|
|
if(res.tapIndex == 0){
|
|
this.chooseImages()
|
|
} else {
|
|
this.chooseVideo()
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
uni.showActionSheet({
|
|
title:"选择上传类型",
|
|
itemList: ['图片','视频'],
|
|
success: (res) => {
|
|
console.log(res)
|
|
if(res.tapIndex == 0){
|
|
this.chooseImages()
|
|
} else {
|
|
this.chooseVideo()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
playVideoFullscreen(){
|
|
// 创建视频上下文
|
|
const videoContext = uni.createVideoContext('myVideo')
|
|
|
|
// 进入全屏
|
|
videoContext.requestFullScreen({direction: 0});
|
|
},
|
|
chooseImages(){
|
|
// 上传图片
|
|
uni.chooseImage({
|
|
count: 9, //默认9
|
|
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album','camera'], //从相册选择
|
|
success:(res)=> {
|
|
let igmFile = res.tempFilePaths;
|
|
console.log(igmFile,'123');
|
|
// 计算还能添加多少张（最多9张）
|
|
const remainingSlots = 9 - this.imageList.length;
|
|
if (remainingSlots <= 0) {
|
|
uni.showToast({ title: '最多上传9张图片', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
// 只处理剩余可添加的数量
|
|
const filesToUpload = igmFile.slice(0, remainingSlots);
|
|
|
|
filesToUpload.map(fileurl => {
|
|
uni.uploadFile({
|
|
url:config.apiUrl+'/common/upload/uploadPosts',
|
|
method:"POST",
|
|
header:{
|
|
'Authorization':uni.getStorageSync('authToken')
|
|
},
|
|
filePath:fileurl,
|
|
name:'file',
|
|
success: (res) =>{
|
|
let imgUrls = JSON.parse(res.data); //微信和头条支持
|
|
imgUrls.data.forEach((item)=>{
|
|
if (this.imageList.length < 9) {
|
|
this.imageList = this.imageList.concat(item.url);
|
|
}
|
|
})
|
|
this.$emit('send',this.imageList)
|
|
if(this.imageList.length>=9) {
|
|
this.VideoOfImagesShow = false;
|
|
} else {
|
|
this.VideoOfImagesShow = true;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
});
|
|
},
|
|
chooseVideo(){
|
|
// 上传视频
|
|
uni.chooseVideo({
|
|
maxDuration:60,
|
|
count: 9,
|
|
camera: this.cameraList[this.cameraIndex].value,
|
|
sourceType: ['album', 'camera'],
|
|
success: (responent) => {
|
|
let videoFile = responent.tempFilePath;
|
|
uni.uploadFile({
|
|
url:config.apiUrl+'/common/upload/uploadPosts',
|
|
method:"POST",
|
|
header:{
|
|
'Authorization':uni.getStorageSync('authToken')
|
|
},
|
|
filePath:videoFile,
|
|
name:'file',
|
|
success: (res) => {
|
|
let videoUrls = JSON.parse(res.data) //微信和头条支持
|
|
// console.info(videoUrls,'12345');
|
|
// let videoUrls = res.data //百度支持
|
|
// this.imagesUrlPath = this.imagesUrlPath.concat(videoUrls);
|
|
this.src1 = videoUrls.data[0]; //微信
|
|
this.$emit('videourl',this.src1)
|
|
if(this.src1.url) {
|
|
this.itemList = ['图片']
|
|
this.VideoOfImagesShow = false;
|
|
} else {
|
|
this.itemList = ['图片','视频']
|
|
}
|
|
|
|
}
|
|
})
|
|
// this.src = responent.tempFilePath; //头条
|
|
}
|
|
})
|
|
},
|
|
previewImage(e) {
|
|
//预览图片
|
|
var current = e.target.dataset.src
|
|
uni.previewImage({
|
|
current: current,
|
|
urls: [current]
|
|
})
|
|
},
|
|
delect(index){
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "是否要删除该图片",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.imageList.splice(index, 1)
|
|
if(this.imageList.length>=9) {
|
|
this.VideoOfImagesShow = false;
|
|
} else {
|
|
this.VideoOfImagesShow = true;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
delectVideo(){
|
|
uni.showModal({
|
|
title:"提示",
|
|
content:"是否要删除此视频",
|
|
success:(res) =>{
|
|
if(res.confirm){
|
|
this.src1 = {}
|
|
this.VideoOfImagesShow = true;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.burst-wrap{
|
|
width: 100%;
|
|
height: 100px;
|
|
margin-top: 20px;
|
|
}
|
|
/* .burst-wrap .burst-wrap-bg{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 320rpx;
|
|
background:linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
|
|
border-bottom-right-radius: 80rpx;
|
|
border-bottom-left-radius: 80rpx;
|
|
} */
|
|
.burst-wrap .burst-wrap-bg>view{
|
|
width: 100%;
|
|
height: 100%;
|
|
/* margin: 0 auto;
|
|
position: absolute;
|
|
top: 65rpx;
|
|
left: 0;
|
|
right: 0; */
|
|
}
|
|
|
|
.form-item{
|
|
width: 100%;
|
|
}
|
|
.form-item textarea{
|
|
display: block;
|
|
height: 220rpx;
|
|
width: 100%;
|
|
color: #AAAAAA;
|
|
font-size: 28rpx;
|
|
}
|
|
.uni-uploader__files{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.uni-uploader__file{
|
|
z-index: 999;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-right: 6px;
|
|
margin-top: 5px;
|
|
position: relative;
|
|
}
|
|
.uploader_video{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-right: 6px;
|
|
}
|
|
.uni-uploader__img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
.icon-cuo {
|
|
top: 5rpx;
|
|
right: 5px;
|
|
width: 20px;
|
|
height: 20px;
|
|
z-index: 999;
|
|
/* color: #FFFFFF; */
|
|
position: absolute;
|
|
border-radius: 20px;
|
|
/* background: linear-gradient(90deg,rgba(209, 209, 209, 1.0) 0%,rgba(209, 209, 209, 1.0) 100%); */
|
|
}
|
|
.video{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
|
|
.login-input-box{
|
|
position: relative;
|
|
border-bottom: 1rpx solid #EEEEEE;
|
|
}
|
|
.login-input-box .forget,.login-input-box .phone{
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
z-index: 100;
|
|
}
|
|
.login-input-box .phone{
|
|
width: 100rpx;
|
|
left: 0;
|
|
color: #666666;
|
|
font-weight: bold;
|
|
}
|
|
.login-input-box .phone-input{
|
|
padding-left: 100rpx;
|
|
}
|
|
.address-wrap,.open-info{
|
|
margin-top: 20rpx;
|
|
}
|
|
.open-info>view:last-child{
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
.address-wrap .address {
|
|
background: #F2F2F2;
|
|
border-radius: 40rpx;
|
|
padding: 0 20rpx;
|
|
}
|
|
.user-set-btn{
|
|
margin: 40rpx;
|
|
background: linear-gradient(90deg,rgba(251,91,80,1) 0%,rgba(240,45,51,1) 100%);
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
.uni-uploader__input-box{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
margin-top: 5px;
|
|
}
|
|
.uni-uploader__input{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #ebebeb;
|
|
}
|
|
.closeempty_icons{
|
|
display: flex;
|
|
line-height: 20px;
|
|
justify-content: center;
|
|
}
|
|
.course-video{
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.relative-shadow{
|
|
z-index:1;
|
|
width:100%;
|
|
height:100%;
|
|
height: 240px;
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|