443 lines
9.5 KiB
Vue
443 lines
9.5 KiB
Vue
|
<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>
|