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>
|