Compare commits
5 Commits
d897dc1079
...
980555212b
| Author | SHA1 | Date | |
|---|---|---|---|
| 980555212b | |||
| e10abd5403 | |||
| ccbeddbb83 | |||
| 4de66f880f | |||
| 31e30eb446 |
16
api/finnancial.js
Normal file
16
api/finnancial.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import {
|
||||||
|
http
|
||||||
|
} from "../util/api"
|
||||||
|
|
||||||
|
const baseURL = "http://192.168.0.15:3008"
|
||||||
|
|
||||||
|
// 项目相关API
|
||||||
|
export const financeAPI = {
|
||||||
|
// 列表
|
||||||
|
getList: (params) => http.get(baseURL + '/financial/list', params),
|
||||||
|
getProgram: (id) => http.get(baseURL + "/financial/" + id),
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
financeAPI
|
||||||
|
}
|
||||||
72
pages.json
72
pages.json
@@ -40,9 +40,27 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/finance/finance",
|
"path": "pages/finance/finance",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "金融"
|
"navigationBarTitleText": "金融理财",
|
||||||
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path":"pages/finance/production",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "金融产品详情",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"path":"pages/finance/service",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "客服中心",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
"path": "pages/register/register",
|
"path": "pages/register/register",
|
||||||
"style": {
|
"style": {
|
||||||
@@ -58,58 +76,48 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/mall/mall",
|
"path" : "pages/mall/mall",
|
||||||
"style": {
|
"style" :
|
||||||
"navigationBarTitleText": "商城",
|
{
|
||||||
|
"navigationBarTitleText" : "商城",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/message/chat",
|
"path" : "pages/message/chat",
|
||||||
"style": {
|
"style" :
|
||||||
"navigationBarTitleText": "聊天页面",
|
{
|
||||||
|
"navigationBarTitleText" : "聊天页面",
|
||||||
"navigationStyle": "custom",
|
"navigationStyle": "custom",
|
||||||
"enablePullDownRefresh": true
|
"enablePullDownRefresh": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/message/systemMessage",
|
"path": "pages/message/information",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "系统通知",
|
"navigationBarTitleText": "聊天页面设置",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/message/systemMessage",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "系统通知",
|
||||||
"navigationBarBackgroundColor": "#F0F3FF",
|
"navigationBarBackgroundColor": "#F0F3FF",
|
||||||
"navigationBarTextStyle": "#000",
|
"navigationBarTextStyle": "#000",
|
||||||
"app-plus": {
|
"app-plus": {
|
||||||
"titleNView": {
|
"titleNView": {
|
||||||
"buttons": [{
|
"buttons": [
|
||||||
|
{
|
||||||
"type": "menu",
|
"type": "menu",
|
||||||
"color": "#000"
|
"color": "#000"
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/mallDetail",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "商品详情",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/home/mallCategory",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "商品分类",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/my/shippingAddress",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "收获地址",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -1,10 +1,217 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tabbar></Tabbar>
|
<view class="finance-container">
|
||||||
|
<u-navbar :is-back="false" title="金融理财" :background="{ background: 'transparent' }" title-color="#FFFFFF"></u-navbar>
|
||||||
|
<!-- 可滚动的内容区域 -->
|
||||||
|
<view class="content-container" :style="'height:'+height+'px'">
|
||||||
|
<view class="searchFilter" id="searchFilterId">
|
||||||
|
<view class="search">
|
||||||
|
<u-search :show-action="false" placeholder="输入产品名称" v-model="params.keyword" bgColor="#CADBFF"
|
||||||
|
@search="handleSearch"></u-search>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="product-list" :style="'height:'+scrollHeight+'px'">
|
||||||
|
<scroll-view scroll-y="true" style="height: 100%;" v-if="productList.length!=0" @scrolltolower="loadData">
|
||||||
|
<view class="product-item" v-for="item in productList" >
|
||||||
|
|
||||||
|
<view class="product-name">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
<view class="product-rate">
|
||||||
|
利率：{{item.rate}}%
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="product-intro">
|
||||||
|
产品简介：{{item.introduction }}
|
||||||
|
</view>
|
||||||
|
<view class="product-detail-link" @click="handleproduction" >
|
||||||
|
查看详情
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-loadmore color="#666" :status="status" />
|
||||||
|
<view class="box-div"></view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<view style="height: 100%;" v-else>
|
||||||
|
<u-empty></u-empty>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<Tabbar id="tabbarId"></Tabbar>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { ref, computed, getCurrentInstance, onMounted } from 'vue';
|
||||||
|
import { onReady, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||||
|
import { financeAPI } from '../../api/finnancial';
|
||||||
|
|
||||||
|
const instance = getCurrentInstance();
|
||||||
|
const height = ref(0)
|
||||||
|
const scrollHeight = ref(0)
|
||||||
|
|
||||||
|
const loadHeight = () => {
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success(res) {
|
||||||
|
let screenHeight = res.screenHeight
|
||||||
|
uni.createSelectorQuery().in(instance?.proxy).select("#tabbarId").boundingClientRect((data: any) => {
|
||||||
|
height.value = screenHeight - data.height
|
||||||
|
}).exec()
|
||||||
|
uni.createSelectorQuery().in(instance?.proxy).select("#searchFilterId").boundingClientRect((data: any) => {
|
||||||
|
scrollHeight.value = height.value - data.height
|
||||||
|
}).exec()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 产品列表
|
||||||
|
const productList = ref<any[]>([])
|
||||||
|
const defaultSize = 10
|
||||||
|
const params = ref({
|
||||||
|
page: 1,
|
||||||
|
size: defaultSize,
|
||||||
|
keyword: ''
|
||||||
|
})
|
||||||
|
const status = ref('loadmore')
|
||||||
|
|
||||||
|
// 加载数据
|
||||||
|
const loadData = () => {
|
||||||
|
if (status.value == 'nomore') return
|
||||||
|
|
||||||
|
financeAPI.getList(params.value).then(res => {
|
||||||
|
console.log('API返回数据:', res)
|
||||||
|
|
||||||
|
if (res.data && res.data.list) {
|
||||||
|
// 检查数据结构并映射字段
|
||||||
|
const mappedList = res.data.list.map((item: any) => ({
|
||||||
|
name: item.productName || item.name || '未知产品',
|
||||||
|
rate: item.interestRate || item.rate || '0',
|
||||||
|
introduction: item.desc || item.introduction || item.productDesc || '暂无简介'
|
||||||
|
}))
|
||||||
|
|
||||||
|
productList.value = productList.value.concat(mappedList)
|
||||||
|
console.log('当前产品列表:', productList.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
status.value = 'nomore'
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('API调用失败:', err)
|
||||||
|
status.value = 'nomore'
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看详情
|
||||||
|
const handleproduction = (item: any) => {
|
||||||
|
console.log('查看产品详情:', item)
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/finance/production?name=${encodeURIComponent(item.name)}&rate=${item.rate}&intro=${encodeURIComponent(item.introduction)}`
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询
|
||||||
|
const handleSearch = () => {
|
||||||
|
params.value = {
|
||||||
|
page: 1,
|
||||||
|
size: defaultSize,
|
||||||
|
keyword: params.value.keyword
|
||||||
|
}
|
||||||
|
productList.value = []
|
||||||
|
loadData()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
onPullDownRefresh(async () => {
|
||||||
|
params.value = {
|
||||||
|
page: 1,
|
||||||
|
size: defaultSize,
|
||||||
|
keyword: ''
|
||||||
|
}
|
||||||
|
productList.value = []
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadData()
|
||||||
|
})
|
||||||
|
|
||||||
|
onReady(() => {
|
||||||
|
loadHeight()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss" scoped>
|
||||||
|
.finance-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(270deg, #65A7FF 0%, #458CF9 23.08%, #3F82FF 50%, #458CF9 71.15%, #65A7FF 100%);
|
||||||
|
|
||||||
|
/* 内容滚动区域 */
|
||||||
|
.content-container {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.searchFilter {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
.search {
|
||||||
|
padding: 20rpx 42rpx 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-list {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
|
||||||
|
.product-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.product-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-rate {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ff6b6b;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-intro {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-detail-link {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #458cf9;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-div {
|
||||||
|
padding: 30rpx 0rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
238
pages/finance/production.vue
Normal file
238
pages/finance/production.vue
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<view class="detail-container">
|
||||||
|
<u-navbar :is-fixed="false" title="产品详情" :background="{background: 'transparent' }" :border-bottom="false"
|
||||||
|
back-icon-color="#fff" title-color="#fff">
|
||||||
|
</u-navbar>
|
||||||
|
|
||||||
|
<!-- 产品头部信息 -->
|
||||||
|
<view class="product-header">
|
||||||
|
<view class="product-name">
|
||||||
|
理财产品名称
|
||||||
|
</view>
|
||||||
|
<view class="product-date">
|
||||||
|
开始时间：2025/09/13
|
||||||
|
</view>
|
||||||
|
<view class="profit-info">
|
||||||
|
近期盈亏：XXXX
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 基本信息卡片 -->
|
||||||
|
<view class="card">
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" class="card-name">所在地</u-col>
|
||||||
|
<u-col span="6" class="card-value">浙江-宁波</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" class="card-name">详细地址</u-col>
|
||||||
|
<u-col span="6" class="card-value">xx区xx路xxx号</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" class="card-name">联系人</u-col>
|
||||||
|
<u-col span="6" class="card-value">XXX</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" class="card-name">结算方式</u-col>
|
||||||
|
<u-col span="6" class="card-value">按月结算，次月支付50%</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row>
|
||||||
|
<u-col span="6" class="card-name">产品企业</u-col>
|
||||||
|
<u-col span="6" class="card-value">xxxx公司</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 产品需求 -->
|
||||||
|
<view class="card">
|
||||||
|
<view class="card-title">
|
||||||
|
产品需求<span>（4）</span>
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<u-row class="sub-title u-m-b-20">
|
||||||
|
<u-col span="12">需求名称</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" text-align="left" class="card-name">限制</u-col>
|
||||||
|
<u-col span="6" class="card-value">详情</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" text-align="left" class="card-name">限价</u-col>
|
||||||
|
<u-col span="6" class="card-value">详情</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" text-align="left" class="card-name">时间</u-col>
|
||||||
|
<u-col span="6" class="card-value">详情</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
|
||||||
|
<u-col span="6" class="card-value">详情</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 产品动态 -->
|
||||||
|
<view class="card">
|
||||||
|
<view class="card-title">
|
||||||
|
产品动态
|
||||||
|
</view>
|
||||||
|
<view class="card-body">
|
||||||
|
<u-row class="u-m-b-20">
|
||||||
|
<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
|
||||||
|
<u-col span="6" class="card-value">2025-09-13</u-col>
|
||||||
|
</u-row>
|
||||||
|
<u-row>
|
||||||
|
<u-col span="6" text-align="left" class="card-name">年化增长</u-col>
|
||||||
|
<u-col span="6" class="card-value">xxx%</u-col>
|
||||||
|
</u-row>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="bottom-actions">
|
||||||
|
<u-button class="consult-btn" @click="handleConsult">立即咨询</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import { onMounted, ref } from 'vue';
|
||||||
|
import { getUserInfo } from '../../util/common';
|
||||||
|
import { programAPI } from '../../api/program';
|
||||||
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
|
import { groupAPI } from '../../api/group';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 立即咨询 - 跳转到客服中心页面
|
||||||
|
const handleConsult = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/finance/service'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad((val) => {
|
||||||
|
// 如果有传递产品ID，可以在这里加载具体产品数据
|
||||||
|
if (val.productId) {
|
||||||
|
// loadProductData(val.productId)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.detail-container {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
|
||||||
|
// 产品头部信息
|
||||||
|
.product-header {
|
||||||
|
background: transparent;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0 80rpx;
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-date {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profit-info {
|
||||||
|
font-size: 28rpx;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 卡片样式 - 调整为白色背景
|
||||||
|
.card {
|
||||||
|
margin: 20rpx 30rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 25rpx;
|
||||||
|
padding-bottom: 15rpx;
|
||||||
|
border-bottom: 2rpx solid #f0f0f0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 25rpx;
|
||||||
|
|
||||||
|
.sub-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
padding-bottom: 15rpx;
|
||||||
|
border-bottom: 1rpx solid #e8e8e8;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-value {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 底部按钮 - 调整为深蓝色
|
||||||
|
.bottom-actions {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-top: 1rpx solid #f0f0f0;
|
||||||
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.consult-btn {
|
||||||
|
background: #1a5fd8;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(26, 95, 216, 0.3);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #164db3;
|
||||||
|
transform: translateY(1rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 通用样式调整
|
||||||
|
.u-m-b-20 {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
587
pages/finance/service.vue
Normal file
587
pages/finance/service.vue
Normal file
@@ -0,0 +1,587 @@
|
|||||||
|
<template>
|
||||||
|
<view class="customer-service-container">
|
||||||
|
<u-navbar title="客服中心" :background="{ background: '#458CF9' }" title-color="#FFFFFF"></u-navbar>
|
||||||
|
|
||||||
|
<view class="content">
|
||||||
|
<!-- 快速服务区域 -->
|
||||||
|
<view class="quick-service">
|
||||||
|
<view class="section-title">快速服务</view>
|
||||||
|
<view class="service-grid">
|
||||||
|
<view class="service-item" v-for="item in quickServices" :key="item.id" @click="handleServiceClick(item)">
|
||||||
|
<view class="service-icon">
|
||||||
|
<text class="icon">{{ item.icon }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="service-name">{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 常见问题区域 -->
|
||||||
|
<view class="faq-section">
|
||||||
|
<view class="section-title">常见问题</view>
|
||||||
|
|
||||||
|
<!-- 分类标签 -->
|
||||||
|
<view class="category-tabs">
|
||||||
|
<view
|
||||||
|
class="tab-item"
|
||||||
|
v-for="(tab, index) in categories"
|
||||||
|
:key="tab.id"
|
||||||
|
:class="{ active: activeCategory === tab.id }"
|
||||||
|
@click="switchCategory(tab.id)"
|
||||||
|
>
|
||||||
|
{{ tab.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 四列网格 -->
|
||||||
|
<view class="grid-section">
|
||||||
|
<view class="grid-container">
|
||||||
|
<view
|
||||||
|
class="grid-item"
|
||||||
|
v-for="item in gridItems"
|
||||||
|
:key="item.id"
|
||||||
|
@click="handleGridItemClick(item)"
|
||||||
|
>
|
||||||
|
<text class="grid-text">{{ item.title }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 问题列表 -->
|
||||||
|
<view class="question-list">
|
||||||
|
<view
|
||||||
|
class="question-item"
|
||||||
|
v-for="question in currentQuestions"
|
||||||
|
:key="question.id"
|
||||||
|
@click="handleQuestionClick(question)"
|
||||||
|
>
|
||||||
|
<view class="question-content">
|
||||||
|
<text class="question-text">{{ question.title }}</text>
|
||||||
|
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 人工客服区域 -->
|
||||||
|
<view class="human-service">
|
||||||
|
<!-- 输入框模式 -->
|
||||||
|
<view class="input-mode" v-if="isInputMode">
|
||||||
|
<view class="input-container">
|
||||||
|
<u-input
|
||||||
|
v-model="inputText"
|
||||||
|
placeholder="请在这里输入文字"
|
||||||
|
:border="false"
|
||||||
|
:clearable="false"
|
||||||
|
class="custom-input"
|
||||||
|
:custom-style="{
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: '44rpx',
|
||||||
|
padding: '0 30rpx',
|
||||||
|
height: '88rpx',
|
||||||
|
fontSize: '28rpx'
|
||||||
|
}"
|
||||||
|
></u-input>
|
||||||
|
<view class="switch-icon" @click="toggleInputMode">
|
||||||
|
<u-icon name="chat" color="#458CF9" size="40"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-button
|
||||||
|
class="send-btn"
|
||||||
|
@click="handleSendMessage"
|
||||||
|
:custom-style="{
|
||||||
|
background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
|
||||||
|
color: '#fff',
|
||||||
|
border: 'none',
|
||||||
|
height: '60rpx',
|
||||||
|
borderRadius: '30rpx',
|
||||||
|
fontSize: '26rpx',
|
||||||
|
fontWeight: '500',
|
||||||
|
marginTop: '20rpx'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
发送
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 按钮模式 -->
|
||||||
|
<view class="button-mode" v-else>
|
||||||
|
<view class="switch-icon" @click="toggleInputMode">
|
||||||
|
<u-icon name="keyboard" color="#458CF9" size="40"></u-icon>
|
||||||
|
</view>
|
||||||
|
<u-button
|
||||||
|
class="consult-btn"
|
||||||
|
@click="handleHumanService"
|
||||||
|
:custom-style="{
|
||||||
|
background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
|
||||||
|
color: '#fff',
|
||||||
|
border: 'none',
|
||||||
|
height: '88rpx',
|
||||||
|
borderRadius: '44rpx',
|
||||||
|
fontSize: '32rpx',
|
||||||
|
fontWeight: '500',
|
||||||
|
flex: 1,
|
||||||
|
marginLeft: '20rpx'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<u-icon name="server-fill" color="#fff" size="36" class="btn-icon"></u-icon>
|
||||||
|
咨询人工客服
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
|
||||||
|
// 快速服务数据
|
||||||
|
const quickServices = ref([
|
||||||
|
{ id: 1, name: '问题反馈', icon: '💬' },
|
||||||
|
{ id: 2, name: '投资理财', icon: '💰' },
|
||||||
|
{ id: 3, name: '项目咨询', icon: '📋' },
|
||||||
|
{ id: 4, name: '余额查询', icon: '🏦' },
|
||||||
|
{ id: 5, name: '催促发货', icon: '🚚' },
|
||||||
|
{ id: 6, name: '退款', icon: '↩️' },
|
||||||
|
{ id: 7, name: '购买咨询', icon: '🛒' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 分类数据
|
||||||
|
const categories = ref([
|
||||||
|
{ id: 'guess', name: '猜你想问' },
|
||||||
|
{ id: 'hot', name: '热门活动' },
|
||||||
|
{ id: 'intro', name: '商城介绍' },
|
||||||
|
{ id: 'after-sale', name: '售后问题' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 四列网格数据
|
||||||
|
const gridItems = ref([
|
||||||
|
{ id: 1, title: '融豆获取' },
|
||||||
|
{ id: 2, title: '物流信息' },
|
||||||
|
{ id: 3, title: '版本信息' },
|
||||||
|
{ id: 4, title: '项目介绍' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 所有问题数据 - 为每个分类都添加问题
|
||||||
|
const allQuestions = ref([
|
||||||
|
// 猜你想问
|
||||||
|
{ id: 1, category: 'guess', title: '系统版本更新有哪些内容？' },
|
||||||
|
{ id: 2, category: 'guess', title: '普通会员体验有哪些内容？如何成为正式会员？' },
|
||||||
|
{ id: 3, category: 'guess', title: '如何参与项目？如何成为代理？' },
|
||||||
|
|
||||||
|
// 热门活动
|
||||||
|
{ id: 4, category: 'hot', title: '最新投资活动有哪些？' },
|
||||||
|
{ id: 5, category: 'hot', title: '如何参与限时优惠理财？' },
|
||||||
|
{ id: 6, category: 'hot', title: '会员专享福利包含哪些内容？' },
|
||||||
|
{ id: 7, category: 'hot', title: '新用户专享优惠如何获取？' },
|
||||||
|
|
||||||
|
// 商城介绍
|
||||||
|
{ id: 8, category: 'intro', title: '平台的主要服务有哪些？' },
|
||||||
|
{ id: 9, category: 'intro', title: '如何保障投资安全？' },
|
||||||
|
{ id: 10, category: 'intro', title: '平台的资质和认证情况？' },
|
||||||
|
{ id: 11, category: 'intro', title: '用户资金如何管理？' },
|
||||||
|
|
||||||
|
// 售后问题
|
||||||
|
{ id: 12, category: 'after-sale', title: '投资后如何申请退款？' },
|
||||||
|
{ id: 13, category: 'after-sale', title: '遇到问题如何投诉？' },
|
||||||
|
{ id: 14, category: 'after-sale', title: '售后服务流程是怎样的？' },
|
||||||
|
{ id: 15, category: 'after-sale', title: '投资纠纷如何处理？' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 当前激活的分类
|
||||||
|
const activeCategory = ref('guess');
|
||||||
|
|
||||||
|
// 输入模式状态
|
||||||
|
const isInputMode = ref(false);
|
||||||
|
const inputText = ref('');
|
||||||
|
|
||||||
|
// 计算当前分类的问题列表
|
||||||
|
const currentQuestions = computed(() => {
|
||||||
|
return allQuestions.value.filter(question => question.category === activeCategory.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 切换输入模式
|
||||||
|
const toggleInputMode = () => {
|
||||||
|
isInputMode.value = !isInputMode.value;
|
||||||
|
if (!isInputMode.value) {
|
||||||
|
inputText.value = ''; // 切换回按钮模式时清空输入内容
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送消息
|
||||||
|
const handleSendMessage = () => {
|
||||||
|
if (!inputText.value.trim()) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请输入内容',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('发送消息:', inputText.value);
|
||||||
|
uni.showToast({
|
||||||
|
title: '消息已发送',
|
||||||
|
icon: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
// 模拟发送消息后的处理
|
||||||
|
setTimeout(() => {
|
||||||
|
inputText.value = '';
|
||||||
|
isInputMode.value = false;
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换分类
|
||||||
|
const switchCategory = (categoryId: string) => {
|
||||||
|
activeCategory.value = categoryId;
|
||||||
|
console.log('切换到分类:', categoryId, '问题数量:', currentQuestions.value.length);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理网格项点击
|
||||||
|
const handleGridItemClick = (item: any) => {
|
||||||
|
console.log('点击网格项:', item.title);
|
||||||
|
|
||||||
|
// 显示对应问题的答案
|
||||||
|
const answers: any = {
|
||||||
|
1: '融豆可以通过以下方式获取：\n\n• 每日签到获得融豆奖励\n• 完成投资任务获得融豆\n• 参与平台活动赢取融豆\n• 邀请好友注册获得融豆\n• 首次投资赠送融豆',
|
||||||
|
2: '物流信息查询：\n\n• 在"我的订单"中查看物流状态\n• 联系客服查询具体物流信息\n• 物流一般3-7个工作日内送达\n• 如有延迟可联系客服催促',
|
||||||
|
3: '版本信息：\n\n当前版本：V2.5.1\n\n更新内容：\n• 优化投资理财功能\n• 新增融豆奖励系统\n• 改善用户体验\n• 修复已知问题',
|
||||||
|
4: '项目介绍：\n\n我们平台提供多种投资项目：\n• 短期理财产品（1-3个月）\n• 中长期投资项目（6-12个月）\n• 高风险高收益项目\n• 稳健保本型项目'
|
||||||
|
};
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: item.title,
|
||||||
|
content: answers[item.id] || '相关信息正在完善中，如需详细了解请咨询人工客服。',
|
||||||
|
confirmText: '知道了',
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理快速服务点击
|
||||||
|
const handleServiceClick = (service: any) => {
|
||||||
|
console.log('点击服务:', service.name);
|
||||||
|
uni.showToast({
|
||||||
|
title: `进入${service.name}`,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理问题点击
|
||||||
|
const handleQuestionClick = (question: any) => {
|
||||||
|
console.log('点击问题:', question.title);
|
||||||
|
|
||||||
|
// 显示问题答案
|
||||||
|
uni.showModal({
|
||||||
|
title: question.title,
|
||||||
|
content: getAnswerByQuestion(question),
|
||||||
|
confirmText: '知道了',
|
||||||
|
showCancel: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 根据问题获取答案（为所有分类的问题都添加答案）
|
||||||
|
const getAnswerByQuestion = (question: any) => {
|
||||||
|
const answers: any = {
|
||||||
|
// 猜你想问
|
||||||
|
1: '本次系统版本更新主要包含以下内容：\n\n1. 优化了用户界面设计\n2. 新增了投资理财功能\n3. 修复了已知的系统问题\n4. 提升了系统性能和稳定性\n5. 增加了融豆奖励系统',
|
||||||
|
2: '普通会员可以体验基础的投资理财服务，查看部分项目信息。\n\n成为正式会员需要：\n• 完成实名认证\n• 满足投资条件\n• 通过风险评估\n• 具体请查看会员升级页面',
|
||||||
|
3: '参与项目流程：\n\n1. 在平台完成实名认证\n2. 通过风险评估测试\n3. 选择适合的投资项目\n4. 确认投资金额\n\n成为代理：\n• 联系客服申请\n• 满足相关条件\n• 开通代理权限',
|
||||||
|
|
||||||
|
// 热门活动
|
||||||
|
4: '最新投资活动包括：\n\n• 新用户专享高收益理财\n• 限时加息活动（年化+1%）\n• 投资返现优惠\n• 邀请好友得奖励活动\n• 节假日特别活动',
|
||||||
|
5: '参与限时优惠理财：\n\n1. 登录平台查看活动页面\n2. 选择限时优惠产品\n3. 确认投资金额\n4. 享受额外优惠收益\n* 活动期间投资可享受额外奖励',
|
||||||
|
6: '会员专享福利：\n\n• 专属高收益理财产品\n• 优先参与新项目投资\n• 专属客服服务\n• 投资手续费优惠\n• 定期投资分析报告',
|
||||||
|
7: '新用户专享优惠：\n\n1. 注册即送融豆奖励\n2. 首次投资享受额外收益\n3. 新手专享理财产品\n4. 邀请好友获得更多奖励',
|
||||||
|
|
||||||
|
// 商城介绍
|
||||||
|
8: '平台主要服务：\n\n• 理财产品投资\n• 项目融资服务\n• 财富管理咨询\n• 风险评估服务\n• 资产配置建议',
|
||||||
|
9: '投资安全保障：\n\n• 银行级资金存管\n• 多重风险控制体系\n• 专业风控团队\n• 合规运营监管\n• 投资者保护机制',
|
||||||
|
10: '平台资质认证：\n\n• 金融监管部门备案\n• 信息安全等级保护\n• 第三方审计认证\n• 合法经营许可\n• 行业协会会员',
|
||||||
|
11: '用户资金管理：\n\n• 资金第三方存管\n• 实时资金流向监控\n• 多重身份验证\n• 交易密码保护\n• 资金变动实时通知',
|
||||||
|
|
||||||
|
// 售后问题
|
||||||
|
12: '退款申请流程：\n\n1. 提交退款申请\n2. 客服审核处理（1-3个工作日）\n3. 退款到账（3-7个工作日）\n4. 如有问题联系客服',
|
||||||
|
13: '投诉渠道：\n\n• 在线客服即时沟通\n• 客服热线400-123-4567\n• 官方邮箱投诉\n• 在线留言反馈\n• 工作时间：9:00-18:00',
|
||||||
|
14: '售后服务流程：\n\n1. 问题反馈\n2. 客服受理\n3. 问题处理\n4. 结果反馈\n5. 满意度调查',
|
||||||
|
15: '投资纠纷处理：\n\n• 首先联系客服协商解决\n• 提供相关证据材料\n• 平台调解处理\n• 必要时转交监管部门\n• 法律途径解决'
|
||||||
|
};
|
||||||
|
|
||||||
|
return answers[question.id] || '相关问题解答正在完善中，如需详细了解请咨询人工客服。';
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理人工客服咨询
|
||||||
|
const handleHumanService = () => {
|
||||||
|
console.log('咨询人工客服');
|
||||||
|
|
||||||
|
uni.showModal({
|
||||||
|
title: '联系人工客服',
|
||||||
|
content: '您即将联系人工客服，客服工作时间：9:00-18:00',
|
||||||
|
confirmText: '立即联系',
|
||||||
|
cancelText: '取消',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
// 模拟拨打客服电话
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: '400-123-4567'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.customer-service-container {
|
||||||
|
background: #f5f5f5;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-left: 10rpx;
|
||||||
|
border-left: 6rpx solid #458CF9;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 快速服务样式
|
||||||
|
.quick-service {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.service-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 30rpx;
|
||||||
|
|
||||||
|
.service-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
|
||||||
|
.service-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: linear-gradient(135deg, #65A7FF 0%, #458CF9 100%);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 常见问题样式
|
||||||
|
.faq-section {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.category-tabs {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 10rpx;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #e8e8e8;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20rpx 0;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 1rpx solid #e8e8e8;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #458CF9;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
border-color: #458CF9;
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 四列网格样式
|
||||||
|
.grid-section {
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #e8e8e8;
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 15rpx;
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 25rpx 10rpx;
|
||||||
|
text-align: center;
|
||||||
|
border: 1rpx solid #e8e8e8;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #e9ecef;
|
||||||
|
transform: scale(0.98);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-list {
|
||||||
|
.question-item {
|
||||||
|
padding: 25rpx 0;
|
||||||
|
border-bottom: 1rpx solid #f0f0f0;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.question-text {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 人工客服区域样式
|
||||||
|
.human-service {
|
||||||
|
padding: 20rpx 0 40rpx;
|
||||||
|
|
||||||
|
// 输入框模式
|
||||||
|
.input-mode {
|
||||||
|
.input-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.custom-input {
|
||||||
|
flex: 1;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-btn {
|
||||||
|
width: 200rpx;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按钮模式
|
||||||
|
.button-mode {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.switch-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.consult-btn {
|
||||||
|
.btn-icon {
|
||||||
|
margin-right: 15rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 响应式调整
|
||||||
|
@media (max-width: 750rpx) {
|
||||||
|
.quick-service .service-grid {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-section .category-tabs {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faq-section .grid-section .grid-container {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -3,7 +3,8 @@
|
|||||||
<u-navbar :title="chatTitle" id="navBarId" :background="{background: 'transparent' }" :border-bottom="false"
|
<u-navbar :title="chatTitle" id="navBarId" :background="{background: 'transparent' }" :border-bottom="false"
|
||||||
back-icon-color="#000" title-color="#000">
|
back-icon-color="#000" title-color="#000">
|
||||||
<template v-slot:right>
|
<template v-slot:right>
|
||||||
<image class="collection" src="/static/icon/More horizontal.png" mode=""></image>
|
<image class="collection" @click="handleinformation" src="/static/icon/More horizontal.png" mode="">
|
||||||
|
</image>
|
||||||
</template>
|
</template>
|
||||||
</u-navbar>
|
</u-navbar>
|
||||||
|
|
||||||
@@ -305,6 +306,11 @@
|
|||||||
text.value = ''
|
text.value = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleinformation = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/message/information'
|
||||||
|
});
|
||||||
|
}
|
||||||
// 文本放大
|
// 文本放大
|
||||||
const handleMagnify = () => {
|
const handleMagnify = () => {
|
||||||
showLongText.value = true
|
showLongText.value = true
|
||||||
|
|||||||
63
pages/message/information.vue
Normal file
63
pages/message/information.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<u-navbar back-text="" title="聊天信息" :background="{ background: 'transparent' }" :title-style="{ fontweight:'bold'}" ></u-navbar>
|
||||||
|
|
||||||
|
<!-- 功能菜单区域 -->
|
||||||
|
<u-cell-group class="cell-group">
|
||||||
|
<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;font-weight: bold;" title="查找聊天记录" :arrow="true"
|
||||||
|
:border-bottom="false"></u-cell-item>
|
||||||
|
</u-cell-group>
|
||||||
|
|
||||||
|
<u-cell-group class="cell-group u-m-b-20" style="font-weight: bold;">
|
||||||
|
<u-cell-item bg-color="#fff" title="消息免打扰" :arrow="false"><u-switch v-model="disturb"></u-switch></u-cell-item>
|
||||||
|
<u-cell-item bg-color="#fff" title="置顶聊天" :arrow=" false"><u-switch v-model="topChat"></u-switch></u-cell-item>
|
||||||
|
<u-cell-item bg-color="#fff" title="项目提醒" :arrow=" false"><u-switch v-model="projectRemind"></u-switch></u-cell-item>
|
||||||
|
</u-cell-group>
|
||||||
|
|
||||||
|
<u-cell-group class="cell-group" style="font-weight: bold;">
|
||||||
|
<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;" title="清空聊天记录" :arrow="true"
|
||||||
|
:border-bottom="false"></u-cell-item>
|
||||||
|
</u-cell-group>
|
||||||
|
|
||||||
|
<u-cell-group class="cell-group" style="font-weight: bold;">
|
||||||
|
<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;" title="联系客服" :arrow="true"
|
||||||
|
:border-bottom="false"></u-cell-item>
|
||||||
|
</u-cell-group>
|
||||||
|
|
||||||
|
<u-cell-group class="cell-group" style="font-weight: bold;">
|
||||||
|
<u-cell-item bg-color="#fff" class="u-m-b-20" style="margin-bottom: 40px;" title="投诉" :arrow="true"
|
||||||
|
:border-bottom="false"></u-cell-item>
|
||||||
|
</u-cell-group>
|
||||||
|
|
||||||
|
|
||||||
|
<u-link href="#" :under-line="false" class="u-m-b-44" style="position: absolute;bottom: 0;left: 0;right: 0;text-align: center;">标记为 不感兴趣</u-link>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
// 为每个 switch 创建响应式数据
|
||||||
|
const disturb = ref(false)
|
||||||
|
const topChat = ref(false)
|
||||||
|
const projectRemind = ref(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
background: var(--bottom, #F0F3FF);
|
||||||
|
background-blend-mode: lighten;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
::v-deep .cell-group {
|
||||||
|
.u-cell-item-box{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user