pxl/tk-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
pengxiaolong
2025-07-25 16:39:52 +08:00
parent 7116e57fc3
commit 8580cd18fa
128 changed files with 2991 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/index/chat/messageComponent/customPKMessage.vue
View File

@@ -13,7 +13,7 @@
export default {
props: {
message: {
type: String,
type: Object,
default: ''
}
},

114
pages/index/chat/messageComponent/fullscreen/imagePreview.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<view class="image-preview" @click="goBack">
<view></view>
<image class="image" :src="url" mode="aspectFill"></image>
<view class="Localbtn" @click.stop>
<image
class="Local"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Local.png"
mode="aspectFit"
@click="saveImage"
></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url: "",
};
},
onLoad(options) {
this.url = options.url;
},
methods: {
//返回上一页
goBack() {
wx.navigateBack({
delta: 1,
});
},
//保存图片
saveImage() {
uni.showLoading({
title: '正在下载图片...',
mask: true
});
// 下载网络图片到临时文件
uni.downloadFile({
url: this.url,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
// 保存到相册
uni.saveImageToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功',
icon: 'none',
duration: 2000
});
},
fail: (saveErr) => {
uni.hideLoading();
uni.showToast({
title: '保存失败: ' + saveErr.errMsg,
icon: 'none',
duration: 2000
});
}
});
} else {
uni.hideLoading();
uni.showToast({
title: '下载失败',
icon: 'none',
duration: 2000
});
}
},
fail: (downloadErr) => {
uni.hideLoading();
uni.showToast({
title: '下载失败: ' + downloadErr.errMsg,
icon: 'none',
duration: 2000
});
}
});
},
},
};
</script>
<style scoped>
.image-preview {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.image {
width: 100vw;
object-fit: contain;
}
.Localbtn {
width: 100vw;
height: 50rpx;
margin-bottom: 50rpx;
display: flex;
flex-direction: row-reverse;
}
.Local {
width: 50rpx;
height: 50rpx;
margin-right: 50rpx;
}
</style>

130
pages/index/chat/messageComponent/fullscreen/videoPreview.vue Normal file
View File

@@ -0,0 +1,130 @@
<template>
<view class="image-preview">
<view class="top">
<image
class="Fork"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/crossCross.png"
mode="scaleToFill"
@click="goBack() "
/>
</view>
<video class="image" :src="url" mode="aspectFill"></video>
<view class="Localbtn" @click.stop>
<image
class="Local"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Local.png"
mode="aspectFit"
@click="saveImage"
></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url: "",
};
},
onLoad(options) {
this.url = options.url;
},
methods: {
//返回上一页
goBack() {
wx.navigateBack({
delta: 1,
});
},
//保存图片
saveImage() {
uni.showLoading({
title: "正在下载视频...",
mask: true,
});
// 下载网络图片到临时文件
uni.downloadFile({
url: this.url,
success: (downloadRes) => {
if (downloadRes.statusCode === 200) {
// 保存到相册
uni.saveVideoToPhotosAlbum({
filePath: downloadRes.tempFilePath,
success: () => {
uni.hideLoading();
uni.showToast({
title: "保存成功",
icon: "none",
duration: 2000,
});
},
fail: (saveErr) => {
uni.hideLoading();
uni.showToast({
title: "保存失败: " + saveErr.errMsg,
icon: "none",
duration: 2000,
});
},
});
} else {
uni.hideLoading();
uni.showToast({
title: "下载失败",
icon: "none",
duration: 2000,
});
}
},
fail: (downloadErr) => {
uni.hideLoading();
uni.showToast({
title: "下载失败: " + downloadErr.errMsg,
icon: "none",
duration: 2000,
});
},
});
},
},
};
</script>
<style scoped>
.image-preview {
width: 100vw;
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.image {
width: 100vw;
object-fit: contain;
}
.Localbtn {
width: 100vw;
height: 50rpx;
margin-bottom: 50rpx;
display: flex;
flex-direction: row-reverse;
}
.Local {
width: 50rpx;
height: 50rpx;
margin-right: 50rpx;
}
.Fork{
width: 60rpx;
height: 60rpx;
margin-left: 50rpx;
}
.top{
margin-top: 110rpx;
width: 100vw;
}
</style>

55
pages/index/chat/messageComponent/imageMessage.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<view class="image-message" @click="imadeFullScreen">
<image class="image" :style="{width: imageWidth + 'rpx', height: imageHeight + 'rpx'}" @load="load" :src="message.url" mode="aspectFit"></image>
</view>
</template>
<script>
export default {
props: {
message: {
type: Object,
default: ''
}
},
data() {
return {
imageHeight: 0,
imageWidth: 0,
}
},
onLoad() {
// 页面加载时执行
},
methods: {
load(event) {
if (event.detail.height > 400){
this.imageHeight = 400;
}else{
this.imageHeight = event.detail.height
}
if (event.detail.width > 400){
this.imageWidth = 400;
}else{
this.imageWidth = event.detail.width
}
},
// 点击图片全屏显示
imadeFullScreen(){
wx.navigateTo({
url: '/pages/index/chat/messageComponent/fullscreen/imagePreview?url=' + this.message.url
})
}
}
}
</script>
<style scoped>
.image-message{
width: 100%;
height: 100%;
}
.image{
border-radius: 20rpx;
}
</style>

58
pages/index/chat/messageComponent/videoMessage.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<view class="video-message" @click="onTap">
<image class="video-player" :src="message.thumbnail.url" mode="scaleToFill" />
<image
class="Play"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Play.png"
mode="scaleToFill"
/>
</view>
</template>
<script>
export default {
props: {
message: {
type: Object,
default: "",
},
},
data() {
return {
title: "Hello",
};
},
onLoad() {
// 页面加载时执行
},
methods: {
onTap() {
wx.navigateTo({
url:
"/pages/index/chat/messageComponent/fullscreen/videoPreview?url=" +
this.message.video.url,
});
},
},
};
</script>
<style scoped>
.video-message {
width: 450rpx;
height: 300rpx;
border-radius: 20px;
display: flex;
}
.video-player {
width: 100%;
height: 100%;
border-radius: 20px;
}
.Play {
width: 200rpx;
height: 200rpx;
margin-left: -330rpx;
margin-top: 50rpx;
}
</style>

121
pages/index/chat/messageComponent/voiceMessage.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<view class="voice-message" @click="Play">
<view class="voice-message-content" v-if="senderId == userId">
<view>{{ floor(message.duration) }}"</view>
<image
v-if="NumberClicks == 0"
class="voice-message-avatar"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/voice.png"
mode="scaleToFill"
/>
<view class="voice-message-name" v-if="NumberClicks == 1">播放中...</view>
<view class="voice-message-name" v-if="NumberClicks == 2">暂停中...</view>
</view>
<view class="voice-message-content" v-else>
<image
v-if="NumberClicks == 0"
class="voice-message-avatar"
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/voice.png"
mode="scaleToFill"
/>
<view class="voice-message-name" v-if="NumberClicks == 1">播放中...</view>
<view class="voice-message-name" v-if="NumberClicks == 2">暂停中...</view>
<view>"{{ floor(message.duration) }}"</view>
</view>
</view>
</template>
<script>
export default {
props: {
message: {
type: Object,
default: () => ({}),
},
senderId: {
type: String,
default: "",
},
userId: {
type: Number,
},
playbackStatus: {
type: Boolean,
},
},
data() {
return {
innerAudioContext: null,
NumberClicks: 0,
};
},
watch: {
playbackStatus(newVal) {
if (!newVal) {
if (this.innerAudioContext) {
this.innerAudioContext.pause();
this.innerAudioContext.destroy();
this.innerAudioContext = null;
this.NumberClicks = 0;
this.$emit("notplayVoice", true);
} else {
this.$emit("notplayVoice", true);
}
} else {
this.$emit("notplayVoice", true);
}
},
},
methods: {
floor(num) {
return Math.floor(num);
},
Play() {
this.$emit("notplayVoice", false);
setTimeout(() => {
this.innerAudioContext = uni.createInnerAudioContext();
this.innerAudioContext.src = this.message.url;
this.innerAudioContext.onEnded(() => {
this.NumberClicks = 0;
this.innerAudioContext.destroy();
this.innerAudioContext = null;
});
this.innerAudioContext.onError((res) => {
this.NumberClicks = 0;
this.innerAudioContext.destroy();
this.innerAudioContext = null;
});
this.innerAudioContext.play();
this.NumberClicks = 1;
}, 500);
},
},
};
</script>
<style scoped>
.voice-message {
padding: 0 20rpx 0 20rpx;
}
.voice-message-avatar {
width: 100rpx;
height: 80rpx;
margin-left: 10rpx;
}
.voice-message-content {
display: flex;
align-items: center;
}
.voice-message-name {
height: 80rpx;
margin-left: 10rpx;
font-size: 28rpx;
color: #999;
line-height: 80rpx;
}
</style>