样式:聊天背景切换

This commit is contained in:
xiao12feng8 2026-02-01 11:05:35 +08:00
parent b6a36d2ff4
commit 3e6b6c361e
6 changed files with 3312 additions and 3 deletions

View File

@ -88,6 +88,15 @@
"navigationBarTextStyle": "black" "navigationBarTextStyle": "black"
} }
}, },
{
"path": "pages/chat/background",
"style": {
"navigationBarTitleText": "聊天背景",
"navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
}
},
{ {
"path": "pages/chat/loverMessage", "path": "pages/chat/loverMessage",
"style": { "style": {

View File

@ -0,0 +1,442 @@
<template>
<view class="page">
<view class="header">
<view class="back-btn" @click="goBack">
<image src="/static/images/chat_return.png" mode="widthFix"></image>
</view>
<view class="title">聊天背景</view>
</view>
<view class="content">
<!-- 当前背景预览 -->
<view class="current-bg-section">
<view class="section-title">当前背景</view>
<view class="current-bg-preview">
<image
:src="currentBackground || defaultBackgrounds[0].url"
mode="aspectFill"
class="preview-image">
</image>
</view>
</view>
<!-- 默认背景 -->
<view class="bg-section">
<view class="section-title">默认背景</view>
<view class="bg-grid">
<view
v-for="(bg, index) in defaultBackgrounds"
:key="index"
class="bg-item"
:class="{ 'active': currentBackground === bg.url }"
@click="selectBackground(bg.url)">
<image :src="bg.url" mode="aspectFill" class="bg-image"></image>
<view class="check-icon" v-if="currentBackground === bg.url">
<image src="/static/images/selectA.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
<!-- 自定义背景 (VIP功能) -->
<view class="bg-section">
<view class="section-title">
<text>自定义背景</text>
<text class="vip-tag">VIP</text>
</view>
<view class="bg-grid">
<!-- 已上传的自定义背景 -->
<view
v-for="(bg, index) in customBackgrounds"
:key="'custom-' + index"
class="bg-item"
:class="{ 'active': currentBackground === bg }"
@click="selectBackground(bg)">
<image :src="bg" mode="aspectFill" class="bg-image"></image>
<view class="check-icon" v-if="currentBackground === bg">
<image src="/static/images/selectA.png" mode="widthFix"></image>
</view>
<view class="delete-icon" @click.stop="deleteCustomBg(index)">
<image src="/static/images/close.png" mode="widthFix"></image>
</view>
</view>
<!-- 上传按钮 -->
<view class="bg-item upload-item" @click="uploadCustomBg">
<view class="upload-icon">+</view>
<view class="upload-text">上传背景</view>
</view>
</view>
</view>
<!-- 保存按钮 -->
<view class="save-btn" @click="saveBackground">保存设置</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
session_id: '',
currentBackground: '', //
originalBackground: '', //
//
defaultBackgrounds: [
{
name: '默认',
url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/39c6f8899c15f60fc59207835f95e07a.png'
},
{
name: '粉色渐变',
url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/008a06f2c3fccdac714f25e6577ccdc4.png'
},
{
name: '紫色梦幻',
url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/a6d2dae70029b6465ea1f1f605f77258.png'
},
{
name: '蓝色清新',
url: 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251231/69c72922c0e815086a30c370e7dbb42f.png'
}
],
//
customBackgrounds: []
}
},
onLoad(options) {
this.session_id = options.session_id || '';
this.loadBackground();
},
methods: {
//
loadBackground() {
//
const savedBg = uni.getStorageSync('chat_background');
const customBgs = uni.getStorageSync('custom_backgrounds');
if (savedBg) {
this.currentBackground = savedBg;
this.originalBackground = savedBg;
} else {
this.currentBackground = this.defaultBackgrounds[0].url;
this.originalBackground = this.defaultBackgrounds[0].url;
}
if (customBgs) {
this.customBackgrounds = JSON.parse(customBgs);
}
},
//
selectBackground(url) {
this.currentBackground = url;
},
//
uploadCustomBg() {
// TODO: VIP
const userInfo = uni.getStorageSync('userinfo');
// if (!userInfo.is_vip) {
// uni.showModal({
// title: '',
// content: 'VIPVIP',
// success: (res) => {
// if (res.confirm) {
// // VIP
// }
// }
// });
// return;
// }
uni.chooseImage({
count: 1,
sourceType: ['album', 'camera'],
success: (res) => {
const tempFilePath = res.tempFilePaths[0];
uni.showLoading({
title: '上传中...'
});
// 使
uni.uploadFile({
url: this.baseURL + '/api/common/upload',
header: {
token: uni.getStorageSync("token") || "",
'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
filePath: tempFilePath,
name: 'file',
success: (uploadRes) => {
uni.hideLoading();
const data = JSON.parse(uploadRes.data);
if (data.code === 1) {
const imageUrl = data.data.fullurl;
this.customBackgrounds.push(imageUrl);
//
uni.setStorageSync('custom_backgrounds', JSON.stringify(this.customBackgrounds));
uni.showToast({
title: '上传成功',
icon: 'success'
});
} else {
uni.showToast({
title: data.msg || '上传失败',
icon: 'none'
});
}
},
fail: (err) => {
uni.hideLoading();
console.error('上传失败', err);
uni.showToast({
title: '上传失败',
icon: 'none'
});
}
});
}
});
},
//
deleteCustomBg(index) {
uni.showModal({
title: '提示',
content: '确定要删除这个背景吗?',
success: (res) => {
if (res.confirm) {
const deletedBg = this.customBackgrounds[index];
this.customBackgrounds.splice(index, 1);
//
uni.setStorageSync('custom_backgrounds', JSON.stringify(this.customBackgrounds));
//
if (this.currentBackground === deletedBg) {
this.currentBackground = this.defaultBackgrounds[0].url;
}
uni.showToast({
title: '删除成功',
icon: 'success'
});
}
}
});
},
//
saveBackground() {
uni.setStorageSync('chat_background', this.currentBackground);
uni.showToast({
title: '保存成功',
icon: 'success',
duration: 1500
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
},
//
goBack() {
//
if (this.currentBackground !== this.originalBackground) {
uni.showModal({
title: '提示',
content: '背景设置未保存,确定要返回吗?',
success: (res) => {
if (res.confirm) {
uni.navigateBack();
}
}
});
} else {
uni.navigateBack();
}
}
},
computed: {
baseURL() {
return 'http://127.0.0.1:8080';
}
}
}
</script>
<style scoped>
.page {
min-height: 100vh;
background: #f5f5f5;
}
.header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 30rpx;
background: #fff;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.back-btn {
position: absolute;
left: 30rpx;
width: 48rpx;
height: 48rpx;
}
.back-btn image {
width: 100%;
height: 100%;
}
.title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.content {
padding: 30rpx;
}
.current-bg-section {
margin-bottom: 40rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
display: flex;
align-items: center;
}
.vip-tag {
margin-left: 10rpx;
padding: 4rpx 12rpx;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
color: #fff;
font-size: 20rpx;
border-radius: 8rpx;
}
.current-bg-preview {
width: 100%;
height: 400rpx;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.preview-image {
width: 100%;
height: 100%;
}
.bg-section {
margin-bottom: 40rpx;
}
.bg-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
}
.bg-item {
position: relative;
width: 100%;
height: 200rpx;
border-radius: 15rpx;
overflow: hidden;
border: 4rpx solid transparent;
transition: all 0.3s;
}
.bg-item.active {
border-color: #9F47FF;
box-shadow: 0 4rpx 12rpx rgba(159, 71, 255, 0.3);
}
.bg-image {
width: 100%;
height: 100%;
}
.check-icon {
position: absolute;
top: 10rpx;
right: 10rpx;
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.check-icon image {
width: 30rpx;
height: 30rpx;
}
.delete-icon {
position: absolute;
top: 10rpx;
left: 10rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.delete-icon image {
width: 20rpx;
height: 20rpx;
}
.upload-item {
background: #fff;
border: 2rpx dashed #ccc;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-icon {
font-size: 60rpx;
color: #999;
line-height: 1;
}
.upload-text {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
.save-btn {
width: 100%;
padding: 30rpx;
background: linear-gradient(135deg, #9F47FF 0%, #0053FA 100%);
color: #fff;
text-align: center;
border-radius: 50rpx;
font-size: 32rpx;
font-weight: bold;
margin-top: 40rpx;
}
</style>

View File

@ -26,7 +26,7 @@
</template> </template>
</uni-nav-bar> </uni-nav-bar>
<image class="back" <image class="back"
:src="loverBasicList.image_url ? loverBasicList.image_url : 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/39c6f8899c15f60fc59207835f95e07a.png'" :src="chatBackground"
mode="aspectFill"></image> mode="aspectFill"></image>
<scroll-view class="list" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" <scroll-view class="list" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true"
@scrolltoupper="onScrollToUpper"> @scrolltoupper="onScrollToUpper">
@ -324,7 +324,8 @@
bottomStats: false, bottomStats: false,
currentVideoUrl: '', // URL currentVideoUrl: '', // URL
singSongsList: [], // singSongsList: [], //
songId: 0 songId: 0,
chatBackground: '' //
} }
}, },
onLoad() { onLoad() {
@ -337,8 +338,11 @@
this.getMenuInfo() this.getMenuInfo()
// #endif // #endif
this.sessionInit() // this.sessionInit() //
this.initRecorder() // // #ifndef H5
this.initRecorder() //H5
// #endif
this.getSingSongs() // this.getSingSongs() //
this.loadChatBackground() //
// this.initAudio() // this.initAudio()
}, },
onUnload() { onUnload() {
@ -349,6 +353,16 @@
this.stopCurrentAudio(); this.stopCurrentAudio();
}, },
methods: { methods: {
//
loadChatBackground() {
const savedBg = uni.getStorageSync('chat_background');
if (savedBg) {
this.chatBackground = savedBg;
} else {
//
this.chatBackground = this.loverBasicList.image_url || 'https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/39c6f8899c15f60fc59207835f95e07a.png';
}
},
initAudio() { initAudio() {
// //
if (this.audioContext) { if (this.audioContext) {
@ -1018,6 +1032,11 @@
}, },
// //
initRecorder() { initRecorder() {
// #ifdef H5
console.log('H5环境不支持录音管理器');
return;
// #endif
this.recorderManager = uni.getRecorderManager(); this.recorderManager = uni.getRecorderManager();
console.log('this.recorderManager', ) console.log('this.recorderManager', )
this.recorderManager.onStart(() => { this.recorderManager.onStart(() => {

View File

@ -23,6 +23,10 @@
<view class="list_title">虚拟恋人音色</view> <view class="list_title">虚拟恋人音色</view>
<image src="/static/images/more.png" mode="widthFix"></image> <image src="/static/images/more.png" mode="widthFix"></image>
</view> </view>
<view class="list_content fa sb" @click="backgroundClick">
<view class="list_title">聊天背景</view>
<image src="/static/images/more.png" mode="widthFix"></image>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -106,6 +110,12 @@ export default {
url: '/pages/create/timbre?is_edit=1' url: '/pages/create/timbre?is_edit=1'
}) })
}, },
//
backgroundClick() {
uni.navigateTo({
url: '/pages/chat/background?session_id=' + this.form.session_id
})
},
} }
} }
</script> </script>

File diff suppressed because it is too large Load Diff

View File

@ -1,2 +1,4 @@
1. 将密码校验删除,因为无法生成模型,用最简单的方法来尝试这些内容。 1. 将密码校验删除,因为无法生成模型,用最简单的方法来尝试这些内容。
2. 将Hbuilder的AppId更换成自己的原本的保留(__UNI__1F3C178)。还是无法正常编译将下面的插件注释掉不用Agora-RTC音视频插件和AudioRecode录音插件。 2. 将Hbuilder的AppId更换成自己的原本的保留(__UNI__1F3C178)。还是无法正常编译将下面的插件注释掉不用Agora-RTC音视频插件和AudioRecode录音插件。
3. 增加tab栏但是还没有加上对应的功能
4. 增加聊天背景选择功能,会员可以自定义背景