- 发布：2021-11-22 11:03
- 更新：2021-11-22 11:06
- 阅读：427
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win 10 2004
HBuilderX类型： 正式
HBuilderX版本号： 3.2.15
手机系统： 全部
手机厂商： 苹果
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<view class="focusfans_box" :style="{marginTop:statusBarHeight+ 'rpx'}">
<view class="header" :style="{height:150 - statusBarHeight+'rpx',lineHeight:150 - statusBarHeight+'rpx'}">
<image @click='back' src="../../static/image/return.png" mode=""></image>
<view :class="{'header_list':true, 'focus_title':true,'title_active':switchs}" @click="handleSwitch(0)">
照片
</view>
<view :class="{'header_list':true,'title_active':!switchs}" @click="handleSwitch(1)">
视频
</view>
</view>
<view class="blankArea" @click="hideDelete">
<!-- 照片 -->
<view class='scroll' v-show="switchs">
<view class="img" v-for="(item,index) in imagesUrl" :key="item.id" @click="preImages(index)">
<!-- <image :src="item.imgurl" mode="aspectFill" @longpress="logoTime" :lazy-load="true"></image> -->
<u-image :showLoading="true" :src="item.imgurl" width="220" height="220" mode="aspectFill" @longpress="logoTime" :lazyLoad="true"></u-image>
<!-- <image src="../static/image/commentsDelete.png" class="delete" @click.stop="deleteImage(item.id)"
mode="" v-show="showDelete"></image> -->
</view>
<image src="../../static/image/add.png" mode="widthFix" @click="chooseImage(0)"></image>
</view>
<!-- 视频 -->
<view class='scroll' v-show="!switchs">
<view class="img" v-if="videoUrl">
<video :src="videoUrl" id="video_play" :poster="videoImg" :show-center-play-btn="!controls" :controls="controls" @play="playVideo"
@fullscreenchange="fullscreenchange"></video>
</view>
<image src="../../static/image/add.png" mode="widthFix" @click="chooseImage(1)"></image>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
images: [], //待更新的图片本地路径
statusBarHeight: '', //导航栏高度
switchs: true, //切换视频和图片
imagesUrl: [], //获取到的图片地址
videoUrl: '', //获取到的视频地址
videoImg: '', //待上传的视频封面
upImages: [], //待上传的图片列表
upVideo: {}, //待上传的视频列表
isUpload: false, //监听是否已经上传完成
showDelete: false, //是否显示删除按钮
controls: false //控制是否显示控制按钮
}
},
onLoad() {
// 顶部导航渲染
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2
this.getList()
// 获取 video 上下文 videoContext 对象
this.videoContext = uni.createVideoContext('video_play');
},
methods: {
hideDelete(){
this.showDelete = false
},
// 进入和退出全屏触发
fullscreenchange(e) {
console.log(e);
if (e.detail.fullScreen) {
this.controls = true
} else {
this.controls = false
this.videoContext.stop()
}
},
// 播放时自动进入全屏
playVideo() {
// 进入全屏状态
this.videoContext.requestFullScreen(0);
},
logoTime() {
this.showDelete = true
},
// 预览图片
preImages(index) {
let preImgs = []
for (let image of this.imagesUrl) {
preImgs.push(image.imgurl)
}
uni.previewImage({
current: index,
urls: preImgs,
longPressActions:{
itemList:['删除图片','保存图片'],
success:res=>{
if(res.tapIndex==0){
this.$HTTP('/api/technician_index/my_photo', {
type:4,
photo: this.imagesUrl[index].id
}, 'POST', true).then(res => {
console.log(res);
if (res.data.code == 1000) {
this.imagesUrl.splice(index, 1)
uni.showToast({
title:'删除成功',
icon:'none'
})
uni.closePreviewImage({
complete:ret=>{
console.log(ret);
}
})
}
})
return
}
if(res.tapIndex==1){
uni.downloadFile({
url:preImgs[res.index],
timeout:800,
success:res=>{
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success:res=>{
uni.showToast({
title:'保存成功',
icon:'none'
})
console.log(res);
}
})
}
})
}
}
}
})
},
// 选择图片或视频
chooseImage(i) {
if (i == 0) {
this.images = []
this.upImages = []
uni.chooseImage({
count: 9,
sizeType: ['compressed'],
success: res => {
this.images.push(...res.tempFilePaths)
let num = 0
for (var i = 0; i < this.images.length; i++) {
uni.uploadFile({
url: this.$baseUrl + '/api/common/file_upload',
filePath: this.images[i],
name: 'image',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
res.data = JSON.parse(res.data)
this.upImages.push(res.data.data)
num++
if (num >= this.images.length) {
this.isUpload == true ? this.isUpload = false : this
.isUpload = true
}
},
fail(rej) {
console.log(rej);
}
})
}
}
})
} else if (i == 1) {
this.upVideo = {}
uni.chooseVideo({
maxDuration:15,
// compressed:false,
success: res => {
uni.showLoading({
title:'上传中，请稍后...',
mask:true
})
// console.log(res);
uni.uploadFile({
url: this.$baseUrl + '/api/common/video_upload',
filePath: res.tempFilePath,
name: 'videourl',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
res.data = JSON.parse(res.data)
if (res.data.code != 1000) {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
} else {
this.upVideo = res.data.data
// console.log(this.upVideo);
this.isUpload == true ? this.isUpload = false : this
.isUpload =
true
}
},
complete:rep=>{
uni.hideLoading()
},
fail(rej) {
console.log(rej);
}
})
}
})
}
},
// 删除图片
deleteImage(index) {
this.$HTTP('/api/technician_index/my_photo', {
photo: id
}, 'POST', true).then(res => {
if (res.data.code == 1000) {
this.images.splice(index, 1)
}
})
},
back() {
uni.navigateBack({
delta: 1
})
},
handleSwitch(index) {
index == 0 ? this.switchs = true : this.switchs = false
},
getList() {
this.$HTTP('/api/technician_index/my_photo', {
type: 3
}, 'POST', true).then(res => {
// console.log(res.data);
res.data.data.user_photo.length ? this.imagesUrl = res.data.data.user_photo : true
res.data.data.video_url ? this.videoUrl = res.data.data.video_url : this.videoUrl
res.data.data.video_img ? this.videoImg = res.data.data.video_img : this.videoImg
})
},
},
watch: {
isUpload() {
let obj = {}
console.log(this.upVideo);
if (JSON.stringify(this.upVideo)!='{}') {
obj = {
type: 1,
video_url: this.upVideo.video_url,
video_img: this.upVideo.img_url
}
} else {
obj = {
type: 2,
photo: this.upImages.join(';')
}
}
console.log(obj);
this.$HTTP('/api/technician_index/my_photo', obj, 'POST', true).then(res => {
if (res.data.code == 1000) {
this.videoUrl = this.upVideo.video
this.videoImg = this.upVideo.video_img
this.imagesUrl.push(...this.upImages)
this.getList()
this.$setData()
}
uni.showToast({
title: res.data.msg,
icon: 'none'
})
console.log(res);
this.upImages = []
this.upVideo = {}
})
}
},
}
</script>
<style lang="less">
.focusfans_box {
width: 100%;
height: 100%;
box-sizing: border-box;
.blankArea {
min-height: 100%;
.scroll {
left: 0;
right: 0;
padding: 30rpx 0;
width: 100%;
.img {
float: left;
width: 220rpx;
height: 220rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
overflow: hidden;
position: relative;
.delete {
position: absolute;
right: 0;
width: 40rpx;
height: 40rpx;
}
>video {
width: 100%;
height: 100%;
}
}
>image {
margin-left: 20rpx;
width: 220rpx;
}
}
}
.header {
height: 100%;
width: 100%;
text-align: center;
position: relative;
background: #FFFFFF;
box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.04);
image {
position: absolute;
left: 24rpx;
bottom: 33rpx;
width: 18.18rpx;
height: 32.12rpx;
}
.header_list {
display: inline-block;
margin: 0 auto;
font-size: 36rpx;
font-weight: 400;
color: #000000;
}
.focus_title {
margin-right: 126rpx;
}
.title_active {
color: #6FECE4;
}
}
}
</style>
<template>
<view class="focusfans_box" :style="{marginTop:statusBarHeight+ 'rpx'}">
<view class="header" :style="{height:150 - statusBarHeight+'rpx',lineHeight:150 - statusBarHeight+'rpx'}">
<image @click='back' src="../../static/image/return.png" mode=""></image>
<view :class="{'header_list':true, 'focus_title':true,'title_active':switchs}" @click="handleSwitch(0)">
照片
</view>
<view :class="{'header_list':true,'title_active':!switchs}" @click="handleSwitch(1)">
视频
</view>
</view>
<view class="blankArea" @click="hideDelete">
<!-- 照片 -->
<view class='scroll' v-show="switchs">
<view class="img" v-for="(item,index) in imagesUrl" :key="item.id" @click="preImages(index)">
<!-- <image :src="item.imgurl" mode="aspectFill" @longpress="logoTime" :lazy-load="true"></image> -->
<u-image :showLoading="true" :src="item.imgurl" width="220" height="220" mode="aspectFill" @longpress="logoTime" :lazyLoad="true"></u-image>
<!-- <image src="../static/image/commentsDelete.png" class="delete" @click.stop="deleteImage(item.id)"
mode="" v-show="showDelete"></image> -->
</view>
<image src="../../static/image/add.png" mode="widthFix" @click="chooseImage(0)"></image>
</view>
<!-- 视频 -->
<view class='scroll' v-show="!switchs">
<view class="img" v-if="videoUrl">
<video :src="videoUrl" id="video_play" :poster="videoImg" :show-center-play-btn="!controls" :controls="controls" @play="playVideo"
@fullscreenchange="fullscreenchange"></video>
</view>
<image src="../../static/image/add.png" mode="widthFix" @click="chooseImage(1)"></image>
</view>
</view>
</view> </template>
<script>
export default {
components: {},
data() {
return {
images: [], //待更新的图片本地路径
statusBarHeight: '', //导航栏高度
switchs: true, //切换视频和图片
imagesUrl: [], //获取到的图片地址
videoUrl: '', //获取到的视频地址
videoImg: '', //待上传的视频封面
upImages: [], //待上传的图片列表
upVideo: {}, //待上传的视频列表
isUpload: false, //监听是否已经上传完成
showDelete: false, //是否显示删除按钮
controls: false //控制是否显示控制按钮
}
},
onLoad() {
// 顶部导航渲染
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2
this.getList()
// 获取 video 上下文 videoContext 对象
this.videoContext = uni.createVideoContext('video_play');
},
methods: {
hideDelete(){
this.showDelete = false
},
// 进入和退出全屏触发
fullscreenchange(e) {
console.log(e);
if (e.detail.fullScreen) {
this.controls = true
} else {
this.controls = false
this.videoContext.stop()
}
},
// 播放时自动进入全屏
playVideo() {
// 进入全屏状态
this.videoContext.requestFullScreen(0);
},
logoTime() {
this.showDelete = true
},
// 预览图片
preImages(index) {
let preImgs = []
for (let image of this.imagesUrl) {
preImgs.push(image.imgurl)
}
uni.previewImage({
current: index,
urls: preImgs,
longPressActions:{
itemList:['删除图片','保存图片'],
success:res=>{
if(res.tapIndex==0){
this.$HTTP('/api/technician_index/my_photo', {
type:4,
photo: this.imagesUrl[index].id
}, 'POST', true).then(res => {
console.log(res);
if (res.data.code == 1000) {
this.imagesUrl.splice(index, 1)
uni.showToast({
title:'删除成功',
icon:'none'
})
uni.closePreviewImage({
complete:ret=>{
console.log(ret);
}
})
}
})
return
}
if(res.tapIndex==1){
uni.downloadFile({
url:preImgs[res.index],
timeout:800,
success:res=>{
uni.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success:res=>{
uni.showToast({
title:'保存成功',
icon:'none'
})
console.log(res);
}
})
}
})
}
}
}
})
},
// 选择图片或视频
chooseImage(i) {
if (i == 0) {
this.images = []
this.upImages = []
uni.chooseImage({
count: 9,
sizeType: ['compressed'],
success: res => {
this.images.push(...res.tempFilePaths)
let num = 0
for (var i = 0; i < this.images.length; i++) {
uni.uploadFile({
url: this.$baseUrl + '/api/common/file_upload',
filePath: this.images[i],
name: 'image',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
res.data = JSON.parse(res.data)
this.upImages.push(res.data.data)
num++
if (num >= this.images.length) {
this.isUpload == true ? this.isUpload = false : this
.isUpload = true
}
},
fail(rej) {
console.log(rej);
}
})
}
}
})
} else if (i == 1) {
this.upVideo = {}
uni.chooseVideo({
maxDuration:15,
// compressed:false,
success: res => {
uni.showLoading({
title:'上传中，请稍后...',
mask:true
})
// console.log(res);
uni.uploadFile({
url: this.$baseUrl + '/api/common/video_upload',
filePath: res.tempFilePath,
name: 'videourl',
header: {
'content-type': 'multipart/form-data'
},
success: res => {
res.data = JSON.parse(res.data)
if (res.data.code != 1000) {
uni.showToast({
title: res.data.msg,
icon: 'none'
})
} else {
this.upVideo = res.data.data
// console.log(this.upVideo);
this.isUpload == true ? this.isUpload = false : this
.isUpload =
true
}
},
complete:rep=>{
uni.hideLoading()
},
fail(rej) {
console.log(rej);
}
})
}
})
}
},
// 删除图片
deleteImage(index) {
this.$HTTP('/api/technician_index/my_photo', {
photo: id
}, 'POST', true).then(res => {
if (res.data.code == 1000) {
this.images.splice(index, 1)
}
})
},
back() {
uni.navigateBack({
delta: 1
})
},
handleSwitch(index) {
index == 0 ? this.switchs = true : this.switchs = false
},
getList() {
this.$HTTP('/api/technician_index/my_photo', {
type: 3
}, 'POST', true).then(res => {
// console.log(res.data);
res.data.data.user_photo.length ? this.imagesUrl = res.data.data.user_photo : true
res.data.data.video_url ? this.videoUrl = res.data.data.video_url : this.videoUrl
res.data.data.video_img ? this.videoImg = res.data.data.video_img : this.videoImg
})
},
},
watch: {
isUpload() {
let obj = {}
console.log(this.upVideo);
if (JSON.stringify(this.upVideo)!='{}') {
obj = {
type: 1,
video_url: this.upVideo.video_url,
video_img: this.upVideo.img_url
}
} else {
obj = {
type: 2,
photo: this.upImages.join(';')
}
}
console.log(obj);
this.$HTTP('/api/technician_index/my_photo', obj, 'POST', true).then(res => {
if (res.data.code == 1000) {
this.videoUrl = this.upVideo.video
this.videoImg = this.upVideo.video_img
this.imagesUrl.push(...this.upImages)
this.getList()
this.$setData()
}
uni.showToast({
title: res.data.msg,
icon: 'none'
})
console.log(res);
this.upImages = []
this.upVideo = {}
})
}
},
} </script>
<style lang="less">
.focusfans_box {
width: 100%;
height: 100%;
box-sizing: border-box;
.blankArea {
min-height: 100%;
.scroll {
left: 0;
right: 0;
padding: 30rpx 0;
width: 100%;
.img {
float: left;
width: 220rpx;
height: 220rpx;
margin-left: 20rpx;
margin-bottom: 20rpx;
overflow: hidden;
position: relative;
.delete {
position: absolute;
right: 0;
width: 40rpx;
height: 40rpx;
}
>video {
width: 100%;
height: 100%;
}
}
>image {
margin-left: 20rpx;
width: 220rpx;
}
}
}
.header {
height: 100%;
width: 100%;
text-align: center;
position: relative;
background: #FFFFFF;
box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.04);
image {
position: absolute;
left: 24rpx;
bottom: 33rpx;
width: 18.18rpx;
height: 32.12rpx;
}
.header_list {
display: inline-block;
margin: 0 auto;
font-size: 36rpx;
font-weight: 400;
color: #000000;
}
.focus_title {
margin-right: 126rpx;
}
.title_active {
color: #6FECE4;
}
}
} </style>
操作步骤：
直接运行即可
直接运行即可
预期结果：
关闭预览
关闭预览
实际结果：
没有触发3
没有触发3
bug描述：
closePreview不进入回调，也不触发
陈大雷Q (作者)
啊这，这种不应该是包含吗
2021-11-22 11:53
陈大雷Q (作者)
而且现在最新版本就是3.2.15，预览版也是，都没版本为什么要写上
2021-11-22 11:54
DCMarvel
回复 陈大雷Q: 写文档的人可能以为写个+号就能清楚的表达是15版本之后的版本吧.我也不是很清楚这个脑回路
2021-11-22 11:56
陈大雷Q (作者)
回复 DCMarvel: 就是bug，3.2.15版本已经有了这个功能，我看了看更新文档
2021-11-23 08:38
陈大雷Q (作者)
回复 DCMarvel: 现在我已经更新到3.2.16了，还是有bug
2021-11-23 08:43