436 lines
11 KiB
Vue
436 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="发布动态" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='46' id="navbar">
|
||
</u-navbar>
|
||
<view class="topcont">
|
||
<view class="title">
|
||
<input type="text" v-model="title" placeholder="添加标题"/>
|
||
</view>
|
||
<textarea class="cont" name="" v-model="cont" placeholder="写下自己的感受，分享给更多的人" id="" cols="30" rows="10"></textarea>
|
||
<view class="imglist">
|
||
<view class="mediaitem" v-for="(item,index) in mediaList" :key="index">
|
||
<!-- 图片预览 -->
|
||
<image v-if="item.type === 'image'" class="media-preview" :src="item.url" mode="aspectFill" @click="previewMedia(index)"></image>
|
||
<!-- 视频预览 -->
|
||
<video v-else-if="item.type === 'video'" class="media-preview" :src="item.url" :poster="item.poster" controls="true" :show-play-btn="true" :show-center-play-btn="true" :enable-progress-gesture="true" :enable-fullscreen="true" @click="previewMedia(index)">
|
||
<!-- <cover-view class="play-icon" @click.stop="previewMedia(index)">▶</cover-view> -->
|
||
</video>
|
||
<!-- 删除按钮 -->
|
||
<view class="delete-btn" @click="deleteMedia(index)">
|
||
<text class="delete-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<view class="upload-btn" @click="btnsc">
|
||
<image class="sc" src="https://api.ccttiot.com/smartmeter/img/static/u3z28zohbXoJ5kWcR6X1" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="weizhi">
|
||
<view class="lt" @click="btnweizhi">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u89SQe8SWGXW1jH3VghJ" mode=""></image> <text v-if="xqdz == ''">你在哪里 </text>
|
||
<input v-if="xqdz == ''" style="width: 400rpx;" type="text" :disabled="true" v-model="xqdz" placeholder="(必填.越详细越易被推荐)" value="" />
|
||
<input v-else type="text" :disabled="true" v-model="xqdz" placeholder="(必填.越详细越易被推荐)" value="" />
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uP31r333Y9Uu7hsl05TB" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="botanniu">
|
||
<view class="an" @click="btnfb">
|
||
发布
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
title:'',
|
||
cont:'',
|
||
token:'',
|
||
mediaList:[] ,// 改为媒体列表，包含图片和视频
|
||
xqdz:'',
|
||
latitude:'',
|
||
longitude:''
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getqiniuyun()
|
||
},
|
||
methods: {
|
||
// 点击发布动态
|
||
btnfb(){
|
||
let picture = []
|
||
this.mediaList.forEach(item =>{
|
||
picture.push(item.url)
|
||
})
|
||
let data = {
|
||
picture:picture,
|
||
content:this.cont,
|
||
title:this.title,
|
||
latitude:this.latitude,
|
||
longitude:this.longitude,
|
||
location:this.xqdz
|
||
}
|
||
this.$u.post("/app/feed/add",data).then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({ title: '发布成功', icon: 'success',duration:3000 })
|
||
setTimeout(()=>{
|
||
uni.navigateBack()
|
||
},1500)
|
||
}else{
|
||
uni.showToast({ title: res.msg, icon: 'none',duration:3000 })
|
||
}
|
||
})
|
||
},
|
||
// 点击选择位置
|
||
btnweizhi(){
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
this.latitude = res.latitude
|
||
this.longitude = res.longitude
|
||
this.xqdz = res.name
|
||
},
|
||
fail: function(err) {
|
||
console.log('选择位置失败', err)
|
||
},
|
||
complete: (res) => {
|
||
if (res.errMsg === 'chooseLocation:ok') {} else if (res.errMsg.indexOf('chooseLocation:cancel') === 0) {
|
||
uni.showToast({
|
||
title: '您取消了位置选择',
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取七牛云上传token
|
||
getqiniuyun(){
|
||
this.$u.get("/common/qiniuToken").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.data
|
||
}
|
||
})
|
||
},
|
||
// 点击上传媒体文件
|
||
btnsc(){
|
||
if(this.mediaList.length >= 9){
|
||
return uni.showToast({ title: '最多选择九张图片或视频', icon: 'none',duration:3000 })
|
||
}
|
||
let _this = this
|
||
// 使用 uni.chooseMedia 从手机相册选择图片和视频
|
||
uni.chooseMedia({
|
||
count: 9 - this.mediaList.length, // 剩余可选择的数量
|
||
mediaType: ['image', 'video'], // 允许选择图片和视频
|
||
sourceType: ['album', 'camera'], // 允许从相册和相机选择
|
||
camera: 'back', // 默认后置摄像头
|
||
success(res) {
|
||
const tempFiles = res.tempFiles
|
||
tempFiles.forEach(file => {
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: file.tempFilePath, //文件路径
|
||
formData: {
|
||
token: _this.token, //后端返回的token
|
||
key: _this.getUploadFileName(file.tempFilePath) //传的文件名称
|
||
},
|
||
success: function(res) {
|
||
let str = JSON.parse(res.data)
|
||
let fileUrl = 'https://api.ccttiot.com/' + str.key
|
||
// 根据文件后缀名判断类型
|
||
let fileType = _this.getFileType(file.tempFilePath)
|
||
// 添加到媒体列表
|
||
_this.mediaList.push({
|
||
url: fileUrl,
|
||
type: fileType,
|
||
poster: fileType === 'video' ? null : null // 视频不设置poster，避免加载失败
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
fail(err) {
|
||
console.log('选择媒体失败:', err)
|
||
uni.showToast({
|
||
title: '选择失败',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取上传的文件名
|
||
getUploadFileName(fileName) {
|
||
return fileName.slice(fileName.lastIndexOf("/") + 1, fileName.length);
|
||
},
|
||
// 根据文件路径判断文件类型
|
||
getFileType(filePath) {
|
||
const extension = filePath.toLowerCase().split('.').pop()
|
||
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
|
||
const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv']
|
||
if (imageExtensions.includes(extension)) {
|
||
return 'image'
|
||
} else if (videoExtensions.includes(extension)) {
|
||
return 'video'
|
||
} else {
|
||
return 'image' // 默认当作图片处理
|
||
}
|
||
},
|
||
// 预览媒体文件 - 图文混合预览
|
||
previewMedia(index) {
|
||
const media = this.mediaList[index]
|
||
console.log('预览媒体:', media)
|
||
console.log('当前索引:', index)
|
||
// 统一在微信小程序端使用 previewMedia 实现图文混合预览
|
||
// #ifdef MP-WEIXIN
|
||
const sources = this.mediaList.map((item) => {
|
||
if (item.type === 'video') {
|
||
return {
|
||
url: item.url,
|
||
type: 'video',
|
||
poster: item.poster || ''
|
||
}
|
||
}
|
||
return {
|
||
url: item.url,
|
||
type: 'image'
|
||
}
|
||
})
|
||
console.log('预览源数据:', sources)
|
||
uni.previewMedia({
|
||
current: index,
|
||
sources,
|
||
success: (res) => {
|
||
console.log('预览成功:', res)
|
||
},
|
||
fail: (err) => {
|
||
console.error('预览失败:', err)
|
||
uni.showToast({
|
||
title: '预览失败',
|
||
icon: 'none',
|
||
duration:3000
|
||
})
|
||
}
|
||
})
|
||
return
|
||
// #endif
|
||
// 其他平台回退为仅图片可预览
|
||
if (media.type === 'video') {
|
||
// 视频全屏播放
|
||
this.playVideo(index)
|
||
return
|
||
}
|
||
// 图片预览
|
||
const urls = this.mediaList.filter(item => item.type === 'image').map(item => item.url)
|
||
if (!urls.length) return
|
||
uni.previewImage({
|
||
urls: urls,
|
||
current: media.url
|
||
})
|
||
},
|
||
// 播放视频
|
||
playVideo(index) {
|
||
const media = this.mediaList[index]
|
||
console.log(media);
|
||
if (media.type == 'video') {
|
||
// 使用uni.previewVideo进行全屏播放
|
||
uni.previewVideo({
|
||
sources: [{
|
||
src: media.url,
|
||
type: 'mp4'
|
||
}],
|
||
autoplay: true,
|
||
loop: false,
|
||
defaultMuted: false,
|
||
showPlayBtn: true,
|
||
showCenterPlayBtn: true,
|
||
enableProgressGesture: true,
|
||
showFullscreenBtn: true,
|
||
showMuteBtn: true
|
||
})
|
||
}
|
||
},
|
||
// 删除媒体文件
|
||
deleteMedia(index) {
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: '确定要删除这个文件吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.mediaList.splice(index, 1)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
::v-deep .u-iconfont,
|
||
::v-deep .u-title{
|
||
padding-bottom: 22rpx !important;
|
||
}
|
||
.botanniu{
|
||
width: 750rpx;
|
||
height: 152rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
padding-top: 34rpx;
|
||
.an{
|
||
width: 698rpx;
|
||
height: 86rpx;
|
||
background: #1EC28B;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
margin: auto;
|
||
text-align: center;
|
||
line-height: 86rpx;
|
||
}
|
||
}
|
||
.weizhi{
|
||
width: 698rpx;
|
||
height: 112rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
.lt{
|
||
display: flex;
|
||
align-items: center;
|
||
text{
|
||
margin-left: 10rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
image{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
input{
|
||
width: 530rpx;
|
||
}
|
||
}
|
||
.rt{
|
||
image{
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
.topcont{
|
||
width: 698rpx;
|
||
max-height: 2580rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 40rpx;
|
||
box-sizing: border-box;
|
||
.imglist{
|
||
display: flex;
|
||
width: 620rpx;
|
||
margin: auto;
|
||
gap: 32rpx;
|
||
flex-wrap: wrap;
|
||
margin-top: 30rpx;
|
||
.upload-btn{
|
||
.sc{
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 20rpx;
|
||
border: 2rpx dashed #E0E0E0;
|
||
}
|
||
}
|
||
|
||
.mediaitem{
|
||
position: relative;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.media-preview{
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.play-icon{
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.delete-btn{
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
background: #ff4757;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.delete-icon{
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.cont{
|
||
width: 644rpx;
|
||
margin: auto;
|
||
margin-top: 24rpx;
|
||
}
|
||
.title{
|
||
input{
|
||
width: 644rpx;
|
||
height: 100rpx;
|
||
font-size: 36rpx;
|
||
border-bottom: 1px dashed #D8D8D8;
|
||
margin: auto;
|
||
}
|
||
}
|
||
}
|
||
page {
|
||
background: #F6F6F6;
|
||
padding-bottom:500rpx;
|
||
}
|
||
|
||
</style> |