样式：聊天背景切换
This commit is contained in:
xiao12feng8
parent
b6a36d2ff4
commit
3e6b6c361e
|
|
@ -88,6 +88,15 @@
|
|||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chat/background",
|
||||
"style": {
|
||||
"navigationBarTitleText": "聊天背景",
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/chat/loverMessage",
|
||||
"style": {
|
||||
|
|
|
|||
442
xuniYou/pages/chat/background.vue
Normal file
442
xuniYou/pages/chat/background.vue
Normal 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: '自定义背景是VIP专属功能，是否前往开通VIP？',
|
||||
// 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>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</template>
|
||||
</uni-nav-bar>
|
||||
<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>
|
||||
<scroll-view class="list" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true"
|
||||
@scrolltoupper="onScrollToUpper">
|
||||
|
|
@ -324,7 +324,8 @@
|
|||
bottomStats: false,
|
||||
currentVideoUrl: '', // 添加当前视频URL变量
|
||||
singSongsList: [], //歌曲列表
|
||||
songId: 0
|
||||
songId: 0,
|
||||
chatBackground: '' // 聊天背景
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -337,8 +338,11 @@
|
|||
this.getMenuInfo()
|
||||
// #endif
|
||||
this.sessionInit() //恋人聊天初始化
|
||||
this.initRecorder() //初始化录音管理器
|
||||
// #ifndef H5
|
||||
this.initRecorder() //初始化录音管理器（H5不支持）
|
||||
// #endif
|
||||
this.getSingSongs() //歌曲列表
|
||||
this.loadChatBackground() //加载聊天背景
|
||||
// this.initAudio()
|
||||
},
|
||||
onUnload() {
|
||||
|
|
@ -349,6 +353,16 @@
|
|||
this.stopCurrentAudio();
|
||||
},
|
||||
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() {
|
||||
// 销毁旧的音频上下文（如果存在）
|
||||
if (this.audioContext) {
|
||||
|
|
@ -1018,6 +1032,11 @@
|
|||
},
|
||||
// 初始化录音管理器
|
||||
initRecorder() {
|
||||
// #ifdef H5
|
||||
console.log('H5环境不支持录音管理器');
|
||||
return;
|
||||
// #endif
|
||||
|
||||
this.recorderManager = uni.getRecorderManager();
|
||||
console.log('this.recorderManager', )
|
||||
this.recorderManager.onStart(() => {
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@
|
|||
<view class="list_title">虚拟恋人音色</view>
|
||||
<image src="/static/images/more.png" mode="widthFix"></image>
|
||||
</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>
|
||||
|
|
@ -106,6 +110,12 @@ export default {
|
|||
url: '/pages/create/timbre?is_edit=1'
|
||||
})
|
||||
},
|
||||
// 聊天背景
|
||||
backgroundClick() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chat/background?session_id=' + this.form.session_id
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,2 +1,4 @@
|
|||
1. 将密码校验删除，因为无法生成模型，用最简单的方法来尝试这些内容。
|
||||
2. 将Hbuilder的AppId更换成自己的，原本的保留(__UNI__1F3C178)。还是无法正常编译，将下面的插件注释掉不用，Agora-RTC：音视频插件和AudioRecode：录音插件。
|
||||
3. 增加tab栏但是还没有加上对应的功能
|
||||
4. 增加聊天背景选择功能，会员可以自定义背景
|
||||
Loading…
Reference in New Issue
Block a user