Compare commits
No commits in common. "main" and "main-ai对话" have entirely different histories.
|
|
@ -1,3 +1,2 @@
|
||||||
# 忽略 unpackage 文件夹
|
# 忽略 unpackage 文件夹
|
||||||
/unpackage/
|
/unpackage/
|
||||||
/docs
|
|
||||||
|
|
@ -1,97 +1,98 @@
|
||||||
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
|
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token
|
||||||
// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
|
// 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
|
||||||
const install = (Vue, vm) => {
|
const install = (Vue, vm) => {
|
||||||
Vue.prototype.$u.http.setConfig({
|
Vue.prototype.$u.http.setConfig({
|
||||||
// baseUrl: 'https://xy.apps.service.zheke.com',
|
// baseUrl: 'https://xy.apps.service.zheke.com',
|
||||||
// imgUrl: 'https://xy.apps.service.zheke.com/',
|
// imgUrl: 'https://xy.apps.service.zheke.com/',
|
||||||
baseUrl: "http://120.55.234.65:8082",
|
baseUrl: 'http://120.55.234.65:8082',
|
||||||
imgUrl: "http://120.55.234.65:8082/",
|
imgUrl: 'http://120.55.234.65:8082/',
|
||||||
// imgUrl:'http://115.238.47.235:8987/',
|
// imgUrl:'http://115.238.47.235:8987/',
|
||||||
// baseUrl: 'http://115.238.47.235:8993',
|
// baseUrl: 'http://115.238.47.235:8993',
|
||||||
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
|
// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
|
||||||
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
|
// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
|
||||||
originalData: true,
|
originalData: true,
|
||||||
// 设置自定义头部content-type
|
// 设置自定义头部content-type
|
||||||
// header: {
|
// header: {
|
||||||
// 'content-type': 'xxx'
|
// 'content-type': 'xxx'
|
||||||
// }
|
// }
|
||||||
});
|
});
|
||||||
// 请求拦截，配置Token等参数
|
// 请求拦截，配置Token等参数
|
||||||
Vue.prototype.$u.http.interceptor.request = (config) => {
|
Vue.prototype.$u.http.interceptor.request = (config) => {
|
||||||
// config.header.Token = 'xxxxxx';
|
|
||||||
// 方式一，存放在vuex的token，假设 ，见：https://uviewui.com/components/globalVariable.html
|
|
||||||
config.header.Authorization = "Bearer " + vm.vuex_token;
|
|
||||||
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
|
|
||||||
// config.header.token = vm.$store.state.token;
|
|
||||||
|
|
||||||
// 方式三，如果token放在了globalData，通过getApp().globalData获取
|
// config.header.Token = 'xxxxxx';
|
||||||
// config.header.token = getApp().globalData.username;
|
// 方式一，存放在vuex的token，假设 ，见：https://uviewui.com/components/globalVariable.html
|
||||||
|
config.header.Authorization = 'Bearer ' + vm.vuex_token;
|
||||||
|
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
|
||||||
|
// config.header.token = vm.$store.state.token;
|
||||||
|
|
||||||
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的，所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
// 方式三，如果token放在了globalData，通过getApp().globalData获取
|
||||||
// const token = uni.getStorageSync('token');
|
// config.header.token = getApp().globalData.username;
|
||||||
// config.header.token = token;
|
|
||||||
|
|
||||||
// 注释 7/15
|
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的，所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
|
||||||
// uni.showLoading({
|
// const token = uni.getStorageSync('token');
|
||||||
// title: '请求中...'
|
// config.header.token = token;
|
||||||
// });
|
|
||||||
// 注释
|
// 注释 7/15
|
||||||
|
// uni.showLoading({
|
||||||
|
// title: '请求中...'
|
||||||
|
// });
|
||||||
|
// 注释
|
||||||
|
|
||||||
// setTimeout(function () {
|
// setTimeout(function () {
|
||||||
// uni.hideLoading();
|
// uni.hideLoading();
|
||||||
// }, 2000);
|
// }, 2000);
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
};
|
}
|
||||||
// 响应拦截，判断状态码是否通过
|
// 响应拦截，判断状态码是否通过
|
||||||
Vue.prototype.$u.http.interceptor.response = (res) => {
|
Vue.prototype.$u.http.interceptor.response = (res) => {
|
||||||
// uni.hideLoading();
|
// uni.hideLoading();
|
||||||
|
|
||||||
// 检查是否为401未授权错误
|
// 检查是否为401未授权错误
|
||||||
if (res.statusCode === 401) {
|
if (res.statusCode === 401) {
|
||||||
handleAuthError(vm);
|
handleAuthError(vm);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return res.data;
|
||||||
|
|
||||||
return res.data;
|
if (res.succeed == true || res.success == true) {
|
||||||
|
// return res.data || res;
|
||||||
if (res.succeed == true || res.success == true) {
|
return res;
|
||||||
// return res.data || res;
|
} else {
|
||||||
return res;
|
// uni.showToast({
|
||||||
} else {
|
// title: res.error,
|
||||||
// uni.showToast({
|
// duration: 2000,
|
||||||
// title: res.error,
|
// icon: 'none'
|
||||||
// duration: 2000,
|
// });
|
||||||
// icon: 'none'
|
// uni.navigateTo({
|
||||||
// });
|
// url: "/pages/login/login/login",
|
||||||
// uni.navigateTo({
|
// });
|
||||||
// url: "/pages/login/login/login",
|
|
||||||
// });
|
return false;
|
||||||
|
}
|
||||||
return false;
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 提取处理401错误的函数
|
// 提取处理401错误的函数
|
||||||
function handleAuthError(vm) {
|
function handleAuthError(vm) {
|
||||||
vm.$u.vuex("vuex_user", "");
|
vm.$u.vuex("vuex_user", "");
|
||||||
vm.$u.vuex("vuex_token", "");
|
vm.$u.vuex("vuex_token", "");
|
||||||
uni.clearStorage();
|
uni.clearStorage();
|
||||||
|
|
||||||
// 显示提示
|
// 显示提示
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: "登录已过期，请重新登录!",
|
title: '登录已过期，请重新登录!',
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
duration: 1500,
|
duration: 1500
|
||||||
});
|
});
|
||||||
|
|
||||||
// 延迟跳转到登录页
|
// 延迟跳转到登录页
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: "/pages/login/login/index",
|
url: '/pages/login/login/index'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
install,
|
install
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<view class="empty-container">
|
||||||
|
<image :src="getImage" class="empty-image" mode="widthFix"></image>
|
||||||
|
<text class="empty-text">{{ text }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 暂无数据
|
||||||
|
import noDataDefault from "@/static/common/img/noData/no-data.png";
|
||||||
|
// 暂无搜索
|
||||||
|
import noDataSearch from "@/static/common/img/noData/no-search.png";
|
||||||
|
// 暂无消息
|
||||||
|
import noDataMessage from "@/static/common/img/noData/no-message.png";
|
||||||
|
// 网络异常
|
||||||
|
import errorNet from "@/static/common/img/noData/error-net.png";
|
||||||
|
// 数据加载失败
|
||||||
|
import errorData from "@/static/common/img/noData/error-data.png";
|
||||||
|
// 维护中
|
||||||
|
import maintenance from "@/static/common/img/noData/maintenance.png";
|
||||||
|
// 暂无附件简历
|
||||||
|
import noAttachmentResume from "@/static/common/img/noData/no-attachment-resume.png";
|
||||||
|
// 暂无收藏
|
||||||
|
import noCollection from "@/static/common/img/noData/no-collection.png";
|
||||||
|
// 暂无评论
|
||||||
|
import noComments from "@/static/common/img/noData/no-comments.png";
|
||||||
|
// 暂无内容
|
||||||
|
import noContent from "@/static/common/img/noData/no-content.png";
|
||||||
|
// 暂无文件
|
||||||
|
import noFile from "@/static/common/img/noData/no-file.png";
|
||||||
|
// 暂无好友
|
||||||
|
import noFriends from "@/static/common/img/noData/no-friends.png";
|
||||||
|
// 暂无网络
|
||||||
|
import noInternet from "@/static/common/img/noData/no-internet.png";
|
||||||
|
// 暂无权限
|
||||||
|
import noPermissions from "@/static/common/img/noData/no-permissions.png";
|
||||||
|
// 暂无图片
|
||||||
|
import noPicture from "@/static/common/img/noData/no-picture.png";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "NoData",
|
||||||
|
props: {
|
||||||
|
// 图片类型
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: "default",
|
||||||
|
},
|
||||||
|
// 描述文字，默认值为"暂无数据"
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: "暂无数据",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getImage() {
|
||||||
|
const imageMap = {
|
||||||
|
default: noDataDefault,
|
||||||
|
search: noDataSearch,
|
||||||
|
message: noDataMessage,
|
||||||
|
errorNet: errorNet,
|
||||||
|
errorData: errorData,
|
||||||
|
maintenance: maintenance,
|
||||||
|
resume: noAttachmentResume,
|
||||||
|
collection: noCollection,
|
||||||
|
comments: noComments,
|
||||||
|
content: noContent,
|
||||||
|
file: noFile,
|
||||||
|
friends: noFriends,
|
||||||
|
internet: noInternet,
|
||||||
|
permissions: noPermissions,
|
||||||
|
picture: noPicture,
|
||||||
|
};
|
||||||
|
return imageMap[this.type] || imageMap.default;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
/*
|
||||||
|
<no-data type="default" text="暂无数据" />
|
||||||
|
<no-data type="errorNet" text="网络错误" />
|
||||||
|
<no-data type="search" text="暂无搜索内容" />
|
||||||
|
<no-data type="errorData" text="数据加载失败" />
|
||||||
|
<no-data type="message" text="暂无消息" />
|
||||||
|
<no-data type="maintenance" text="系统维护中" />
|
||||||
|
<no-data type="resume" text="暂无简历附件" />
|
||||||
|
<no-data type="collection" text="暂无收藏" />
|
||||||
|
<no-data type="comments" text="暂无评论" />
|
||||||
|
<no-data type="content" text="暂无内容" />
|
||||||
|
<no-data type="file" text="暂无文件" />
|
||||||
|
<no-data type="friends" text="暂无好友" />
|
||||||
|
<no-data type="internet" text="无网络连接" />
|
||||||
|
<no-data type="permissions" text="暂无权限" />
|
||||||
|
<no-data type="picture" text="暂无图片" /> */
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.empty-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-image {
|
||||||
|
width: 400rpx;
|
||||||
|
height: 400rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
<template>
|
|
||||||
<u-tabbar
|
|
||||||
v-if="show"
|
|
||||||
:value="currentIndex"
|
|
||||||
:show="true"
|
|
||||||
:bg-color="style.backgroundColor"
|
|
||||||
:border-top="style.borderTop"
|
|
||||||
:fixed="true"
|
|
||||||
:height="style.height"
|
|
||||||
:list="formattedTabList"
|
|
||||||
@change="handleTabChange"
|
|
||||||
>
|
|
||||||
</u-tabbar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import tabbarConfig from "@/config/tabbar.config.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "TabBar",
|
|
||||||
props: {
|
|
||||||
// 当前页面路径（可选）
|
|
||||||
currentPath: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
// 是否显示 TabBar
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
currentIndex: 0,
|
|
||||||
tabList: tabbarConfig.tabs,
|
|
||||||
style: tabbarConfig.style,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 格式化为 uview tabbar 所需格式
|
|
||||||
formattedTabList() {
|
|
||||||
return this.tabList.map((item) => ({
|
|
||||||
text: item.text,
|
|
||||||
iconPath: item.icon,
|
|
||||||
selectedIconPath: item.activeIcon,
|
|
||||||
pagePath: item.pagePath,
|
|
||||||
count: item.badge || 0,
|
|
||||||
isDot: item.dot || false,
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
// 监听 currentPath 变化
|
|
||||||
currentPath: {
|
|
||||||
handler(newPath) {
|
|
||||||
if (newPath) {
|
|
||||||
this.updateActiveTab(newPath);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.initActiveTab();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
|
||||||
* 初始化激活的 tab
|
|
||||||
*/
|
|
||||||
initActiveTab() {
|
|
||||||
const path = this.currentPath || this.getCurrentPagePath();
|
|
||||||
this.updateActiveTab(path);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 更新激活的 tab
|
|
||||||
*/
|
|
||||||
updateActiveTab(path) {
|
|
||||||
const index = this.tabList.findIndex((item) =>
|
|
||||||
this.isPathMatch(path, item.pagePath)
|
|
||||||
);
|
|
||||||
if (index !== -1) {
|
|
||||||
this.currentIndex = index;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 路径匹配判断
|
|
||||||
*/
|
|
||||||
isPathMatch(currentPath, targetPath) {
|
|
||||||
const normalize = (path) => path.replace(/^\//, "");
|
|
||||||
return normalize(currentPath) === normalize(targetPath);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 获取当前页面路径
|
|
||||||
*/
|
|
||||||
getCurrentPagePath() {
|
|
||||||
const pages = getCurrentPages();
|
|
||||||
console.log('pages',pages);
|
|
||||||
|
|
||||||
if (pages.length > 0) {
|
|
||||||
return "/" + pages[pages.length - 1].route;
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 处理 tab 切换
|
|
||||||
*/
|
|
||||||
handleTabChange(index) {
|
|
||||||
if (this.currentIndex === index) {
|
|
||||||
this.$emit("reclick", this.tabList[index].pagePath, index);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const targetTab = this.tabList[index];
|
|
||||||
if (!targetTab) return;
|
|
||||||
|
|
||||||
this.currentIndex = index;
|
|
||||||
this.$emit("change", targetTab.pagePath, index);
|
|
||||||
|
|
||||||
// 跳转
|
|
||||||
this.navigateToTab(targetTab.pagePath);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 跳转到 tab 页面
|
|
||||||
*/
|
|
||||||
navigateToTab(url) {
|
|
||||||
uni.switchTab({
|
|
||||||
url,
|
|
||||||
fail: () => {
|
|
||||||
// 降级方案
|
|
||||||
uni.reLaunch({ url });
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 设置角标
|
|
||||||
* @param {number} index - tab 索引
|
|
||||||
* @param {string|number} badge - 角标内容
|
|
||||||
*/
|
|
||||||
setBadge(index, badge) {
|
|
||||||
if (this.tabList[index]) {
|
|
||||||
this.$set(this.tabList[index], "badge", badge);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 显示/隐藏小红点
|
|
||||||
* @param {number} index - tab 索引
|
|
||||||
* @param {boolean} show - 是否显示
|
|
||||||
*/
|
|
||||||
setDot(index, show) {
|
|
||||||
if (this.tabList[index]) {
|
|
||||||
this.$set(this.tabList[index], "dot", show);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
|
||||||
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
/**
|
|
||||||
* TabBar 配置文件
|
|
||||||
* 集中管理底部导航栏配置
|
|
||||||
*/
|
|
||||||
|
|
||||||
export const TAB_BAR_CONFIG = [
|
|
||||||
{
|
|
||||||
text: "在线咨询",
|
|
||||||
icon: "/static/tabbar/tabbar-icon1.png",
|
|
||||||
activeIcon: "/static/tabbar/tabbar-icon1-active.png",
|
|
||||||
pagePath: "/pages/consultation/index",
|
|
||||||
// 可选配置
|
|
||||||
badge: "", // 角标文字
|
|
||||||
dot: false, // 是否显示小红点
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "人工转接",
|
|
||||||
icon: "/static/tabbar/tabbar-icon4.png",
|
|
||||||
activeIcon: "/static/tabbar/tabbar-icon4-active.png",
|
|
||||||
pagePath: "/pages/transfer/index",
|
|
||||||
badge: "",
|
|
||||||
dot: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: "我的",
|
|
||||||
icon: "/static/tabbar/tabbar-icon3.png",
|
|
||||||
activeIcon: "/static/tabbar/tabbar-icon3-active.png",
|
|
||||||
pagePath: "/pages/my/index",
|
|
||||||
badge: "",
|
|
||||||
dot: false,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// TabBar 样式配置
|
|
||||||
export const TAB_BAR_STYLE = {
|
|
||||||
color: "#999999", // 未激活颜色
|
|
||||||
selectedColor: "#4a6cf7", // 激活颜色
|
|
||||||
backgroundColor: "#ffffff", // 背景色
|
|
||||||
borderTop: false, // 是否显示顶部边框
|
|
||||||
height: 148, // 高度（rpx）
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
tabs: TAB_BAR_CONFIG,
|
|
||||||
style: TAB_BAR_STYLE,
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
/**
|
|
||||||
* WebSocket 配置文件
|
|
||||||
*
|
|
||||||
* 集中管理 WebSocket 相关配置
|
|
||||||
*/
|
|
||||||
|
|
||||||
// 根据环境选择 WebSocket 地址
|
|
||||||
const getWebSocketUrl = () => {
|
|
||||||
// #ifdef H5
|
|
||||||
// H5 开发环境
|
|
||||||
if (process.env.NODE_ENV === 'development') {
|
|
||||||
return 'ws://localhost:8082/ws/chat'
|
|
||||||
}
|
|
||||||
// H5 生产环境
|
|
||||||
return 'wss://120.55.234.65:8082/ws/chat'
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
// WebSocket 服务器地址（动态获取）
|
|
||||||
url: getWebSocketUrl(),
|
|
||||||
|
|
||||||
// 重连配置
|
|
||||||
reconnect: {
|
|
||||||
enabled: true, // 是否启用自动重连
|
|
||||||
maxAttempts: 10, // 最大重连次数
|
|
||||||
interval: 3000, // 重连间隔（毫秒）
|
|
||||||
incrementInterval: true, // 是否递增重连间隔
|
|
||||||
maxInterval: 30000 // 最大重连间隔
|
|
||||||
},
|
|
||||||
|
|
||||||
// 心跳配置
|
|
||||||
heartbeat: {
|
|
||||||
enabled: true, // 是否启用心跳
|
|
||||||
interval: 30000, // 心跳间隔（毫秒）
|
|
||||||
timeout: 10000, // 心跳超时时间
|
|
||||||
pingMessage: { // 心跳消息格式
|
|
||||||
type: 'ping',
|
|
||||||
timestamp: () => Date.now()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 消息队列配置
|
|
||||||
messageQueue: {
|
|
||||||
enabled: true, // 是否启用消息队列
|
|
||||||
maxSize: 100, // 队列最大长度
|
|
||||||
clearOnConnect: false // 连接成功后是否清空队列
|
|
||||||
},
|
|
||||||
|
|
||||||
// 日志配置
|
|
||||||
log: {
|
|
||||||
enabled: true, // 是否启用日志
|
|
||||||
level: 'info' // 日志级别：debug, info, warn, error
|
|
||||||
},
|
|
||||||
|
|
||||||
// 消息类型定义
|
|
||||||
messageTypes: {
|
|
||||||
// 文字消息
|
|
||||||
TEXT: 'text',
|
|
||||||
// 图片消息
|
|
||||||
IMAGE: 'image',
|
|
||||||
// 语音消息
|
|
||||||
VOICE: 'voice',
|
|
||||||
// 系统消息
|
|
||||||
SYSTEM: 'system',
|
|
||||||
// 心跳
|
|
||||||
PING: 'ping',
|
|
||||||
PONG: 'pong',
|
|
||||||
// 已读回执
|
|
||||||
READ: 'read',
|
|
||||||
// 输入中
|
|
||||||
TYPING: 'typing',
|
|
||||||
// 人工转接
|
|
||||||
TRANSFER: 'transfer'
|
|
||||||
},
|
|
||||||
|
|
||||||
// 事件名称定义
|
|
||||||
events: {
|
|
||||||
OPEN: 'open',
|
|
||||||
CLOSE: 'close',
|
|
||||||
ERROR: 'error',
|
|
||||||
MESSAGE: 'message',
|
|
||||||
RECONNECT: 'reconnect',
|
|
||||||
RECONNECT_FAILED: 'reconnect_failed'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
201
pages.json
201
pages.json
|
|
@ -11,30 +11,15 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"pages": [
|
"pages": [
|
||||||
{
|
{
|
||||||
"path": "pages/home/index/index",
|
"path": "pages/home/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "首页",
|
"navigationBarTitleText": "首页",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/test/websocket-test",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "WebSocket 测试",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/chat/chat-detail",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "聊天",
|
|
||||||
"navigationStyle": "custom",
|
|
||||||
"enablePullDownRefresh": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/home/messageBoard/index",
|
"path": "pages/home/messageBoard/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -42,7 +27,20 @@
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/notes/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "留言板",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/my/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "我的",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/my/personalInfo",
|
"path": "pages/my/personalInfo",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -53,7 +51,7 @@
|
||||||
{
|
{
|
||||||
"path": "pages/home/admissions/index",
|
"path": "pages/home/admissions/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "在线咨询",
|
"navigationBarTitleText": "招办在线",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
|
@ -67,28 +65,13 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/consultation/index",
|
"path": "pages/home/conversations/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "在线咨询",
|
"navigationBarTitleText": "会话列表",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/transfer/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "人工转接",
|
|
||||||
"enablePullDownRefresh": false,
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "pages/my/index",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "我的",
|
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/login/login/index",
|
"path": "pages/login/login/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -106,18 +89,138 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/home/history/history",
|
"path": "pages/login/login/login",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "登录",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/register/register",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "注册",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/perfect/perfect",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "",
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/graduateCertification/graduateCertification",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message/msgList/msgList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message/dialogBox/dialogBox",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message/interactionList/interactionList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "互动消息",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message/sysList/sysList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "系统消息",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message/attentionList/attentionList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "新增关注",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/message/adminList/adminList",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "管理列表",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/ForgetPassword/ForgetPassword",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/confirmPwd/confirmPwd",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "确认密码",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/roleSelection",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "角色选择",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/teacherCertification",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "教职工认证",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/recognitionResult/recognitionResult",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "提示",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/login/recognitionResult/recognitionFailed",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "认证失败",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"subPackages": [],
|
"subPackages": [],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"navigationBarTextStyle": "black",
|
"navigationBarTextStyle": "black",
|
||||||
"navigationBarTitleText": "源小新",
|
"navigationBarTitleText": "英星AI",
|
||||||
"navigationBarBackgroundColor": "#F8F8F8",
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
"backgroundColor": "#F8F8F8"
|
"backgroundColor": "#F8F8F8"
|
||||||
},
|
},
|
||||||
|
|
@ -128,16 +231,16 @@
|
||||||
"backgroundColor": "#ffffff",
|
"backgroundColor": "#ffffff",
|
||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"pagePath": "pages/consultation/index",
|
"pagePath": "pages/home/conversations/index",
|
||||||
"iconPath": "static/tabbar/icon_home.png",
|
"iconPath": "static/tabbar/icon_home.png",
|
||||||
"selectedIconPath": "static/tabbar/icon_home_active.png",
|
"selectedIconPath": "static/tabbar/icon_home_active.png",
|
||||||
"text": "在线咨询"
|
"text": "会话列表"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/transfer/index",
|
"pagePath": "pages/notes/index",
|
||||||
"iconPath": "static/tabbar/icon_message.png",
|
"iconPath": "static/tabbar/icon_message.png",
|
||||||
"selectedIconPath": "static/tabbar/icon_message_active.png",
|
"selectedIconPath": "static/tabbar/icon_message_active.png",
|
||||||
"text": "人工转接"
|
"text": "留言板"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pagePath": "pages/my/index",
|
"pagePath": "pages/my/index",
|
||||||
|
|
|
||||||
|
|
@ -1,379 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="chat-detail-page">
|
|
||||||
<!-- 顶部导航 -->
|
|
||||||
<view class="chat-header">
|
|
||||||
<view class="header-left" @click="goBack">
|
|
||||||
<u-icon name="arrow-left" color="#333" size="20"></u-icon>
|
|
||||||
</view>
|
|
||||||
<view class="header-title">{{ userName }}</view>
|
|
||||||
<view class="header-right" @click="showUserInfo">
|
|
||||||
<u-icon name="more-dot-fill" color="#333" size="20"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 消息列表 -->
|
|
||||||
<scroll-view
|
|
||||||
class="message-list"
|
|
||||||
scroll-y
|
|
||||||
:scroll-into-view="scrollIntoView"
|
|
||||||
scroll-with-animation
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
v-for="(msg, index) in messageList"
|
|
||||||
:key="msg.id"
|
|
||||||
:id="'msg-' + msg.id"
|
|
||||||
class="message-item"
|
|
||||||
>
|
|
||||||
<!-- 我发送的消息 -->
|
|
||||||
<view v-if="msg.isSelf" class="message-self">
|
|
||||||
<view class="message-content-wrapper">
|
|
||||||
<view class="message-content">{{ msg.content }}</view>
|
|
||||||
</view>
|
|
||||||
<image class="message-avatar" :src="myAvatar"></image>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 对方发送的消息 -->
|
|
||||||
<view v-else class="message-other">
|
|
||||||
<image class="message-avatar" :src="otherAvatar"></image>
|
|
||||||
<view class="message-content-wrapper">
|
|
||||||
<view class="message-content">{{ msg.content }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 空状态 -->
|
|
||||||
<view v-if="messageList.length === 0" class="empty-message">
|
|
||||||
<text>暂无消息</text>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
|
|
||||||
<!-- 输入栏 -->
|
|
||||||
<view class="input-bar">
|
|
||||||
<view class="input-wrapper">
|
|
||||||
<input
|
|
||||||
class="input-field"
|
|
||||||
v-model="inputValue"
|
|
||||||
placeholder="请输入消息..."
|
|
||||||
confirm-type="send"
|
|
||||||
@confirm="sendMessage"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="send-button" @click="sendMessage">
|
|
||||||
<text>发送</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'ChatDetail',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 用户信息
|
|
||||||
userId: '',
|
|
||||||
userName: '',
|
|
||||||
|
|
||||||
// 头像
|
|
||||||
myAvatar: '/static/avatar/default-avatar.png',
|
|
||||||
otherAvatar: '/static/avatar/default-avatar.png',
|
|
||||||
|
|
||||||
// 消息列表
|
|
||||||
messageList: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
content: '你好，请问学校的招生政策是怎样的？',
|
|
||||||
isSelf: false,
|
|
||||||
timestamp: '2024-01-15 09:45'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
content: '你好！我们学校今年的招生政策主要包括...',
|
|
||||||
isSelf: true,
|
|
||||||
timestamp: '2024-01-15 09:46'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
content: '好的，谢谢老师！那请问学费是多少呢？',
|
|
||||||
isSelf: false,
|
|
||||||
timestamp: '2024-01-15 09:47'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
// 输入框
|
|
||||||
inputValue: '',
|
|
||||||
|
|
||||||
// 滚动位置
|
|
||||||
scrollIntoView: '',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad(options) {
|
|
||||||
// 获取传入的用户信息
|
|
||||||
this.userId = options.userId || ''
|
|
||||||
this.userName = options.name || '用户'
|
|
||||||
|
|
||||||
console.log('[聊天详情] 用户ID:', this.userId)
|
|
||||||
console.log('[聊天详情] 用户名:', this.userName)
|
|
||||||
|
|
||||||
// 加载历史消息
|
|
||||||
this.loadHistoryMessages()
|
|
||||||
|
|
||||||
// 滚动到底部
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.scrollToBottom()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// 返回
|
|
||||||
goBack() {
|
|
||||||
uni.navigateBack()
|
|
||||||
},
|
|
||||||
|
|
||||||
// 显示用户信息
|
|
||||||
showUserInfo() {
|
|
||||||
uni.showToast({
|
|
||||||
title: '用户信息',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 发送消息
|
|
||||||
sendMessage() {
|
|
||||||
if (!this.inputValue.trim()) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '请输入消息内容',
|
|
||||||
icon: 'none'
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 构建消息对象
|
|
||||||
const message = {
|
|
||||||
id: Date.now(),
|
|
||||||
content: this.inputValue,
|
|
||||||
isSelf: true,
|
|
||||||
timestamp: this.formatTime(new Date())
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加到消息列表
|
|
||||||
this.messageList.push(message)
|
|
||||||
|
|
||||||
// 清空输入框
|
|
||||||
this.inputValue = ''
|
|
||||||
|
|
||||||
// 滚动到底部
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.scrollToBottom()
|
|
||||||
})
|
|
||||||
|
|
||||||
// TODO: 通过 WebSocket 发送消息
|
|
||||||
// wsManager.send({
|
|
||||||
// type: 'message',
|
|
||||||
// toUserId: this.userId,
|
|
||||||
// content: message.content
|
|
||||||
// })
|
|
||||||
|
|
||||||
console.log('[聊天详情] 发送消息:', message)
|
|
||||||
|
|
||||||
// 模拟对方回复
|
|
||||||
setTimeout(() => {
|
|
||||||
this.receiveMessage('收到，我马上处理')
|
|
||||||
}, 1000)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 接收消息
|
|
||||||
receiveMessage(content) {
|
|
||||||
const message = {
|
|
||||||
id: Date.now(),
|
|
||||||
content: content,
|
|
||||||
isSelf: false,
|
|
||||||
timestamp: this.formatTime(new Date())
|
|
||||||
}
|
|
||||||
|
|
||||||
this.messageList.push(message)
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.scrollToBottom()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 加载历史消息
|
|
||||||
loadHistoryMessages() {
|
|
||||||
// TODO: 从服务器加载历史消息
|
|
||||||
// this.$u.api.getChatHistory({
|
|
||||||
// userId: this.userId
|
|
||||||
// }).then(res => {
|
|
||||||
// this.messageList = res.data
|
|
||||||
// })
|
|
||||||
|
|
||||||
console.log('[聊天详情] 加载历史消息')
|
|
||||||
},
|
|
||||||
|
|
||||||
// 滚动到底部
|
|
||||||
scrollToBottom() {
|
|
||||||
if (this.messageList.length > 0) {
|
|
||||||
const lastMsg = this.messageList[this.messageList.length - 1]
|
|
||||||
this.scrollIntoView = 'msg-' + lastMsg.id
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 格式化时间
|
|
||||||
formatTime(date) {
|
|
||||||
const hours = date.getHours().toString().padStart(2, '0')
|
|
||||||
const minutes = date.getMinutes().toString().padStart(2, '0')
|
|
||||||
return `${hours}:${minutes}`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chat-detail-page {
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #f5f6fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 顶部导航 ===== */
|
|
||||||
.chat-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 44px;
|
|
||||||
padding: 0 15px;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1rpx solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-left,
|
|
||||||
.header-right {
|
|
||||||
width: 44px;
|
|
||||||
height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-title {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 消息列表 ===== */
|
|
||||||
.message-list {
|
|
||||||
flex: 1;
|
|
||||||
padding: 15px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-item {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 我发送的消息 */
|
|
||||||
.message-self {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-self .message-content-wrapper {
|
|
||||||
max-width: 70%;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-self .message-content {
|
|
||||||
background: #4a6cf7;
|
|
||||||
color: #fff;
|
|
||||||
padding: 12px 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 对方发送的消息 */
|
|
||||||
.message-other {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-other .message-content-wrapper {
|
|
||||||
max-width: 70%;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-other .message-content {
|
|
||||||
background: #fff;
|
|
||||||
color: #333;
|
|
||||||
padding: 12px 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 头像 */
|
|
||||||
.message-avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 空状态 */
|
|
||||||
.empty-message {
|
|
||||||
text-align: center;
|
|
||||||
padding: 100px 20px;
|
|
||||||
color: #999;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 输入栏 ===== */
|
|
||||||
.input-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 15px;
|
|
||||||
background: #fff;
|
|
||||||
border-top: 1rpx solid #e5e5e5;
|
|
||||||
padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrapper {
|
|
||||||
flex: 1;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 15px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
border-radius: 18px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-button {
|
|
||||||
width: 60px;
|
|
||||||
height: 36px;
|
|
||||||
background: #4a6cf7;
|
|
||||||
border-radius: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-button:active {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,346 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="page-container">
|
|
||||||
<view class="page-header">
|
|
||||||
<PageHeader title="在线咨询" :is-back="false" :border-bottom="false" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<scroll-view
|
|
||||||
class="page-main"
|
|
||||||
scroll-y
|
|
||||||
enable-back-to-top
|
|
||||||
>
|
|
||||||
<view class="main-content">
|
|
||||||
<!-- 聊天会话列表 -->
|
|
||||||
<view
|
|
||||||
class="chat-item"
|
|
||||||
v-for="(item, index) in chatList"
|
|
||||||
:key="item.id"
|
|
||||||
@click="openChat(item)"
|
|
||||||
>
|
|
||||||
<view class="chat-avatar-wrapper">
|
|
||||||
<image class="chat-avatar" :src="item.avatar"></image>
|
|
||||||
<!-- 未读数角标 -->
|
|
||||||
<view class="unread-badge" v-if="item.unreadCount > 0">
|
|
||||||
{{ item.unreadCount > 99 ? '99+' : item.unreadCount }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="chat-content">
|
|
||||||
<view class="chat-header">
|
|
||||||
<text class="chat-name">{{ item.name }}</text>
|
|
||||||
<text class="chat-time">{{ item.lastMessageTime }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="chat-preview">
|
|
||||||
<text class="preview-text">{{ item.lastMessage }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 无数据提示 -->
|
|
||||||
<view class="empty-container" v-if="chatList.length === 0">
|
|
||||||
<image class="empty-image" src="/static/common/icon/empty-chat.png"></image>
|
|
||||||
<text class="empty-text">暂无咨询消息</text>
|
|
||||||
<text class="empty-hint">学生咨询后会显示在这里</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
|
|
||||||
<view class="page-tabbar">
|
|
||||||
<TabBar :currentPath="'/pages/consultation/index'" @change="handleTabChange" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import TabBar from "@/components/TabBar-optimized.vue";
|
|
||||||
import PageHeader from "@/components/PageHeader.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "ConsultationPage",
|
|
||||||
components: {
|
|
||||||
TabBar,
|
|
||||||
PageHeader,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 聊天会话列表（模拟数据）
|
|
||||||
chatList: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
userId: 'user_001',
|
|
||||||
name: '山东考生1',
|
|
||||||
avatar: '/static/avatar/default-avatar.png',
|
|
||||||
lastMessage: '你好，在吗',
|
|
||||||
lastMessageTime: '09:50',
|
|
||||||
unreadCount: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
userId: 'user_002',
|
|
||||||
name: '河北考生2',
|
|
||||||
avatar: '/static/avatar/default-avatar.png',
|
|
||||||
lastMessage: '我是保研的是否了解到了后续计划，谁信谁的呢们爱国士...',
|
|
||||||
lastMessageTime: '09:50',
|
|
||||||
unreadCount: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
userId: 'user_003',
|
|
||||||
name: '山东考生34523',
|
|
||||||
avatar: '/static/avatar/default-avatar.png',
|
|
||||||
lastMessage: '请问，学校宿舍几人间？',
|
|
||||||
lastMessageTime: '09:50',
|
|
||||||
unreadCount: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
userId: 'user_004',
|
|
||||||
name: '招办王老师',
|
|
||||||
avatar: '/static/avatar/default-avatar.png',
|
|
||||||
lastMessage: '你好，在吗',
|
|
||||||
lastMessageTime: '09:50',
|
|
||||||
unreadCount: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
userId: 'user_005',
|
|
||||||
name: '山东考生34523',
|
|
||||||
avatar: '/static/avatar/default-avatar.png',
|
|
||||||
lastMessage: '请问，学校宿舍几人间？',
|
|
||||||
lastMessageTime: '09:50',
|
|
||||||
unreadCount: 3,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
userId: 'user_006',
|
|
||||||
name: '招办王老师',
|
|
||||||
avatar: '/static/avatar/default-avatar.png',
|
|
||||||
lastMessage: '你好，在吗',
|
|
||||||
lastMessageTime: '09:50',
|
|
||||||
unreadCount: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad() {
|
|
||||||
// 加载聊天列表
|
|
||||||
this.loadChatList();
|
|
||||||
},
|
|
||||||
|
|
||||||
onShow() {
|
|
||||||
// 页面显示时刷新列表
|
|
||||||
this.refreshChatList();
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
handleTabChange(path, index) {
|
|
||||||
console.log("切换到标签页:", path, index);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 打开聊天页面
|
|
||||||
openChat(item) {
|
|
||||||
console.log('打开聊天:', item);
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/pages/chat/chat-detail?userId=${item.userId}&name=${item.name}`
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 加载聊天列表
|
|
||||||
loadChatList() {
|
|
||||||
// TODO: 接入真实API
|
|
||||||
// this.$u.api.getChatList().then(res => {
|
|
||||||
// this.chatList = res.data;
|
|
||||||
// });
|
|
||||||
|
|
||||||
console.log('[在线咨询] 加载聊天列表');
|
|
||||||
},
|
|
||||||
|
|
||||||
// 刷新聊天列表
|
|
||||||
refreshChatList() {
|
|
||||||
console.log('[在线咨询] 刷新聊天列表');
|
|
||||||
// TODO: 刷新数据
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* ===== 页面容器 - 主流三段式布局 ===== */
|
|
||||||
.page-container {
|
|
||||||
/* 固定定位，占满整个视口 */
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
/* Flex 布局 */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
/* 背景色 */
|
|
||||||
background-color: #f5f6fa;
|
|
||||||
|
|
||||||
/* 防止溢出 */
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 头部导航 ===== */
|
|
||||||
.page-header {
|
|
||||||
/* 不收缩，固定高度 */
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
/* 层级 */
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 内容区域 ===== */
|
|
||||||
.page-main {
|
|
||||||
/* 占据剩余空间 */
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
/* 重要：防止 flex 子元素溢出 */
|
|
||||||
height: 0;
|
|
||||||
|
|
||||||
/* 允许滚动 */
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
/* iOS 滚动优化 */
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 内容内层 ===== */
|
|
||||||
.main-content {
|
|
||||||
/* 内边距 */
|
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
/* 底部留出 TabBar 空间 + 安全区域 */
|
|
||||||
padding-bottom: calc(50px + env(safe-area-inset-bottom) + 10px);
|
|
||||||
|
|
||||||
/* 最小高度（确保可以滚动） */
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 底部导航 ===== */
|
|
||||||
.page-tabbar {
|
|
||||||
/* 不收缩，固定高度 */
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
/* 层级 */
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 聊天列表项 ===== */
|
|
||||||
.chat-item {
|
|
||||||
display: flex;
|
|
||||||
padding: 15px;
|
|
||||||
background: #fff;
|
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-item:active {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-avatar-wrapper {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-avatar {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: #e8e8e8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: -5px;
|
|
||||||
right: -5px;
|
|
||||||
min-width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
padding: 0 5px;
|
|
||||||
background: #ff4d4f;
|
|
||||||
border-radius: 9px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 11px;
|
|
||||||
line-height: 18px;
|
|
||||||
text-align: center;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-name {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
max-width: 200px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-time {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-preview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-text {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 空状态 ===== */
|
|
||||||
.empty-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 100px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-image {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-text {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-hint {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,26 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="admissions-container">
|
<view class="admissions-container">
|
||||||
<header-bar title="在线咨询" @leftClick="handleLeftClick"></header-bar>
|
<view class="header">
|
||||||
|
<div class="header-left">
|
||||||
|
<u-icon
|
||||||
|
class="header-left-icon"
|
||||||
|
name="arrow-left"
|
||||||
|
@click="handleLeftClick"
|
||||||
|
></u-icon>
|
||||||
|
</div>
|
||||||
|
<text class="header-title">招办在线</text>
|
||||||
|
<div></div>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="admissions-content">
|
<view class="admissions-content">
|
||||||
<!-- 自定义tab -->
|
|
||||||
<view class="custom-tab">
|
|
||||||
<view
|
|
||||||
v-for="tab in tabList"
|
|
||||||
:key="tab.id"
|
|
||||||
:class="['tab-item', { active: activeTab === tab.id }]"
|
|
||||||
@click="switchTab(tab.id)"
|
|
||||||
>
|
|
||||||
<text class="tab-text">{{ tab.name }}</text>
|
|
||||||
<view class="tab-underline" v-if="activeTab === tab.id"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="teacher-list">
|
<view class="teacher-list">
|
||||||
<!-- 教师列表 -->
|
<!-- 教师列表 -->
|
||||||
<view
|
<view
|
||||||
class="teacher-item"
|
class="teacher-item"
|
||||||
v-for="(teacher, index) in currentList"
|
v-for="(teacher, index) in teacherList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<image class="teacher-avatar" :src="teacher.avatar"></image>
|
<image class="teacher-avatar" :src="teacher.avatar"></image>
|
||||||
|
|
@ -35,9 +32,9 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="teacher-department">{{ teacher.department }}</view>
|
<view class="teacher-department">{{ teacher.department }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="ask-button" @click="handleAskQuestion(teacher)">
|
<view class="ask-button" @click="handleAskQuestion(teacher)">{{
|
||||||
立即提问
|
teacher.online ? "立即提问" : "留言"
|
||||||
</view>
|
}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -53,21 +50,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import HeaderBar from "@/components/HeaderBar.vue"; // 导入头部组件
|
|
||||||
import LeaveMessage from "@/components/LeaveMessage.vue";
|
import LeaveMessage from "@/components/LeaveMessage.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
HeaderBar, // 注册头部组件
|
|
||||||
LeaveMessage,
|
LeaveMessage,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeTab: "1", // 当前激活的tab
|
|
||||||
tabList: [
|
|
||||||
{ id: "1", name: "招生在线", key: "admissions" },
|
|
||||||
{ id: "2", name: "迎新在线", key: "welcome" },
|
|
||||||
],
|
|
||||||
showLeaveMessage: false,
|
showLeaveMessage: false,
|
||||||
teacherList: [
|
teacherList: [
|
||||||
{
|
{
|
||||||
|
|
@ -99,41 +89,10 @@ export default {
|
||||||
online: false,
|
online: false,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
welcomeList: [
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: "李老师",
|
|
||||||
department: "学生处",
|
|
||||||
avatar: "/static/common/images/avatar.png",
|
|
||||||
online: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: "张老师",
|
|
||||||
department: "宿管中心",
|
|
||||||
avatar: "/static/common/images/student.png",
|
|
||||||
online: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: "迎新办陈老师",
|
|
||||||
department: "后勤服务中心",
|
|
||||||
avatar: "/static/common/images/student.png",
|
|
||||||
online: false,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
currentTeacher: null,
|
currentTeacher: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
currentList() {
|
|
||||||
return this.activeTab === "1" ? this.teacherList : this.welcomeList;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
switchTab(tab) {
|
|
||||||
this.activeTab = tab;
|
|
||||||
},
|
|
||||||
handleLeftClick() {
|
handleLeftClick() {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
},
|
},
|
||||||
|
|
@ -200,44 +159,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.admissions-content {
|
.admissions-content {
|
||||||
.custom-tab {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
margin: 24rpx 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tab-item {
|
|
||||||
position: relative;
|
|
||||||
padding: 12rpx 0;
|
|
||||||
margin-right: 60rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.tab-text {
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #505866;
|
|
||||||
letter-spacing: 0.04rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .tab-text {
|
|
||||||
color: #4f6aff;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-underline {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
right: 0;
|
|
||||||
width: 80rpx;
|
|
||||||
height: 4rpx;
|
|
||||||
background-color: #4f6aff;
|
|
||||||
border-radius: 2rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.teacher-list {
|
.teacher-list {
|
||||||
.teacher-item {
|
.teacher-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -1,655 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="history-page">
|
|
||||||
<header-bar title="历史记录" @leftClick="handleLeftClick"></header-bar>
|
|
||||||
|
|
||||||
<view class="tab-container">
|
|
||||||
<view class="custom-tab">
|
|
||||||
<view
|
|
||||||
v-for="tab in tabList"
|
|
||||||
:key="tab.id"
|
|
||||||
:class="['tab-item', { active: activeTab === tab.id }]"
|
|
||||||
@click="switchTab(tab.id)"
|
|
||||||
>
|
|
||||||
<text class="tab-text">{{ tab.name }}</text>
|
|
||||||
<view class="tab-underline" v-if="activeTab === tab.id"></view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="more-icon-container" @click="toggleMoreMenu">
|
|
||||||
<image
|
|
||||||
class="more-icon"
|
|
||||||
src="/static/common/images/icon-more.png"
|
|
||||||
mode="scaleToFill"
|
|
||||||
></image>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 右上角弹出菜单：批量删除 -->
|
|
||||||
<view v-if="isMoreMenuVisible" class="more-menu" @click.stop>
|
|
||||||
<view class="menu-card" @click="handleBatchDeleteClick">
|
|
||||||
<!-- <image
|
|
||||||
class="menu-icon"
|
|
||||||
src="/static/common/images/icon_delete.png"
|
|
||||||
mode="widthFix"
|
|
||||||
/> -->
|
|
||||||
<u-icon name="trash" color="#FF647D" size="28"></u-icon>
|
|
||||||
<text class="menu-text">批量删除</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 点击其他区域关闭弹层 -->
|
|
||||||
<view v-if="isMoreMenuVisible" class="overlay" @click="hideMoreMenu"></view>
|
|
||||||
|
|
||||||
<!-- 内容区域包装器 -->
|
|
||||||
<view class="content-wrapper">
|
|
||||||
<!-- 历史记录列表（按日期分组，日期固定在上方） -->
|
|
||||||
<view class="history-list">
|
|
||||||
<view
|
|
||||||
class="date-group"
|
|
||||||
v-for="group in groupedHistoryList"
|
|
||||||
:key="group.header"
|
|
||||||
>
|
|
||||||
<view class="date-header">{{ group.header }}</view>
|
|
||||||
|
|
||||||
<view class="history-item" v-for="item in group.items" :key="item.id">
|
|
||||||
<!-- 批量删除模式下的选择框 -->
|
|
||||||
<view
|
|
||||||
class="item-checkbox"
|
|
||||||
v-if="isBatchDeleteMode"
|
|
||||||
@click="toggleItemSelection(item.id)"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="checkbox"
|
|
||||||
:class="{ checked: selectedItems.includes(item.id) }"
|
|
||||||
>
|
|
||||||
<text class="checkmark" v-if="selectedItems.includes(item.id)"
|
|
||||||
>✓</text
|
|
||||||
>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 历史记录内容 -->
|
|
||||||
<view class="item-content">
|
|
||||||
<view class="item-header">
|
|
||||||
<view class="item-icon">
|
|
||||||
<text class="icon-text">B</text>
|
|
||||||
</view>
|
|
||||||
<view class="item-title">{{ item.title }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="item-description">{{ item.content }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 批量删除操作栏 -->
|
|
||||||
<view class="batch-actions" v-if="isBatchDeleteMode">
|
|
||||||
<view class="select-all-container" @click="toggleSelectAll">
|
|
||||||
<view class="checkbox" :class="{ checked: selectAll }">
|
|
||||||
<text class="checkmark" v-if="selectAll">✓</text>
|
|
||||||
</view>
|
|
||||||
<text class="select-all-text">全选</text>
|
|
||||||
</view>
|
|
||||||
<view class="function-btn">
|
|
||||||
<view class="cancel-btn" @click="cancelBatchDelete">取消</view>
|
|
||||||
<view class="delete-btn" @click="batchDelete">删除</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 提示 -->
|
|
||||||
<u-toast ref="uToast" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import HeaderBar from "@/components/HeaderBar.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
HeaderBar,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
activeTab: "1", // 当前激活的tab
|
|
||||||
tabList: [
|
|
||||||
{ id: "1", name: "AI咨询" },
|
|
||||||
{ id: "2", name: "人工咨询" },
|
|
||||||
],
|
|
||||||
isBatchDeleteMode: false, // 是否为批量删除模式
|
|
||||||
isMoreMenuVisible: false, // 右上角更多菜单是否可见
|
|
||||||
selectedItems: [], // 选中的项目
|
|
||||||
selectAll: false, // 是否全选
|
|
||||||
historyList: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime(), // 今天
|
|
||||||
type: "ai",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime(), // 今天
|
|
||||||
type: "ai",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime(), // 今天
|
|
||||||
type: "ai",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime(), // 今天
|
|
||||||
type: "ai",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime() - 24 * 60 * 60 * 1000 * 2, // 2天前
|
|
||||||
type: "ai",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime() - 365 * 24 * 60 * 60 * 1000, // 去年
|
|
||||||
type: "human",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
title: "学校哪些专业比较好？",
|
|
||||||
content:
|
|
||||||
"学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？学校哪些专业比较好？",
|
|
||||||
time: new Date().getTime() - 24 * 60 * 60 * 1000 * 5, // 5天前
|
|
||||||
type: "human",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// 根据当前tab过滤历史记录
|
|
||||||
filteredHistoryList() {
|
|
||||||
return this.historyList.filter((item) => {
|
|
||||||
if (this.activeTab === "1") {
|
|
||||||
return item.type === "ai";
|
|
||||||
} else {
|
|
||||||
return item.type === "human";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 按日期分组后的历史记录（日期标题固定在上方）
|
|
||||||
groupedHistoryList() {
|
|
||||||
// 先按时间倒序
|
|
||||||
const list = [...this.filteredHistoryList].sort(
|
|
||||||
(a, b) => b.time - a.time
|
|
||||||
);
|
|
||||||
const groups = [];
|
|
||||||
let currentHeader = null;
|
|
||||||
let currentItems = [];
|
|
||||||
|
|
||||||
list.forEach((item) => {
|
|
||||||
const header = this.formatTime(item.time);
|
|
||||||
if (header !== currentHeader) {
|
|
||||||
if (currentItems.length) {
|
|
||||||
groups.push({ header: currentHeader, items: currentItems });
|
|
||||||
}
|
|
||||||
currentHeader = header;
|
|
||||||
currentItems = [item];
|
|
||||||
} else {
|
|
||||||
currentItems.push(item);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (currentItems.length) {
|
|
||||||
groups.push({ header: currentHeader, items: currentItems });
|
|
||||||
}
|
|
||||||
return groups;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 格式化时间显示
|
|
||||||
formatTime(timestamp) {
|
|
||||||
const now = new Date();
|
|
||||||
const date = new Date(timestamp);
|
|
||||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
||||||
const itemDate = new Date(
|
|
||||||
date.getFullYear(),
|
|
||||||
date.getMonth(),
|
|
||||||
date.getDate()
|
|
||||||
);
|
|
||||||
|
|
||||||
// 计算时间差
|
|
||||||
const diffTime = today.getTime() - itemDate.getTime();
|
|
||||||
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
|
||||||
|
|
||||||
// 今天
|
|
||||||
if (diffDays === 0) {
|
|
||||||
return `${String(date.getMonth() + 1).padStart(2, "0")}/${String(
|
|
||||||
date.getDate()
|
|
||||||
).padStart(2, "0")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 本周内（1-6天前）
|
|
||||||
if (diffDays > 0 && diffDays <= 6) {
|
|
||||||
const weekdays = [
|
|
||||||
"周日",
|
|
||||||
"周一",
|
|
||||||
"周二",
|
|
||||||
"周三",
|
|
||||||
"周四",
|
|
||||||
"周五",
|
|
||||||
"周六",
|
|
||||||
];
|
|
||||||
return weekdays[date.getDay()];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 今年但不是本周
|
|
||||||
if (date.getFullYear() === now.getFullYear()) {
|
|
||||||
return `${String(date.getMonth() + 1).padStart(2, "0")}/${String(
|
|
||||||
date.getDate()
|
|
||||||
).padStart(2, "0")}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 往年
|
|
||||||
return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(
|
|
||||||
2,
|
|
||||||
"0"
|
|
||||||
)}/${String(date.getDate()).padStart(2, "0")}`;
|
|
||||||
},
|
|
||||||
|
|
||||||
handleLeftClick() {
|
|
||||||
uni.navigateBack();
|
|
||||||
},
|
|
||||||
|
|
||||||
switchTab(tab) {
|
|
||||||
this.activeTab = tab;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 显示/隐藏右上角更多菜单
|
|
||||||
toggleMoreMenu() {
|
|
||||||
this.isMoreMenuVisible = !this.isMoreMenuVisible;
|
|
||||||
},
|
|
||||||
// 点击蒙层隐藏更多菜单
|
|
||||||
hideMoreMenu() {
|
|
||||||
this.isMoreMenuVisible = false;
|
|
||||||
},
|
|
||||||
// 取消批量删除模式
|
|
||||||
cancelBatchDelete() {
|
|
||||||
this.isBatchDeleteMode = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 点击“批量删除”菜单项，进入批量删除模式
|
|
||||||
handleBatchDeleteClick() {
|
|
||||||
this.isMoreMenuVisible = false;
|
|
||||||
if (!this.isBatchDeleteMode) {
|
|
||||||
this.toggleBatchDeleteMode();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 切换批量删除模式
|
|
||||||
toggleBatchDeleteMode() {
|
|
||||||
this.isBatchDeleteMode = !this.isBatchDeleteMode;
|
|
||||||
if (!this.isBatchDeleteMode) {
|
|
||||||
// 退出批量删除模式时清空选中项
|
|
||||||
this.selectedItems = [];
|
|
||||||
this.selectAll = false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 切换单个项目选中状态
|
|
||||||
toggleItemSelection(itemId) {
|
|
||||||
const index = this.selectedItems.indexOf(itemId);
|
|
||||||
if (index > -1) {
|
|
||||||
this.selectedItems.splice(index, 1);
|
|
||||||
} else {
|
|
||||||
this.selectedItems.push(itemId);
|
|
||||||
}
|
|
||||||
// 更新全选状态
|
|
||||||
this.selectAll =
|
|
||||||
this.selectedItems.length === this.filteredHistoryList.length;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 切换全选状态
|
|
||||||
toggleSelectAll() {
|
|
||||||
this.selectAll = !this.selectAll;
|
|
||||||
if (this.selectAll) {
|
|
||||||
this.selectedItems = this.filteredHistoryList.map((item) => item.id);
|
|
||||||
} else {
|
|
||||||
this.selectedItems = [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 批量删除选中项
|
|
||||||
batchDelete() {
|
|
||||||
if (this.selectedItems.length === 0) {
|
|
||||||
this.$refs.uToast.show({
|
|
||||||
title: "请选择要删除的项目",
|
|
||||||
type: "warning",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 删除选中的项目
|
|
||||||
this.historyList = this.historyList.filter(
|
|
||||||
(item) => !this.selectedItems.includes(item.id)
|
|
||||||
);
|
|
||||||
|
|
||||||
// 重置状态
|
|
||||||
this.selectedItems = [];
|
|
||||||
this.selectAll = false;
|
|
||||||
this.isBatchDeleteMode = false;
|
|
||||||
|
|
||||||
this.$refs.uToast.show({
|
|
||||||
title: "删除成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handleDelete(item, callback) {
|
|
||||||
console.log("handleDelete", item);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
this.$refs.uToast.show({
|
|
||||||
title: "撤回成功",
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
callback(true);
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.history-page {
|
|
||||||
height: 100vh;
|
|
||||||
background-color: #ffffff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
padding-top: 88rpx;
|
|
||||||
|
|
||||||
.tab-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-tab {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
margin: 24rpx 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.tab-item {
|
|
||||||
position: relative;
|
|
||||||
padding: 12rpx 0;
|
|
||||||
margin-right: 80rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.tab-text {
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #505866;
|
|
||||||
letter-spacing: 0.04rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .tab-text {
|
|
||||||
color: #4f6aff;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-underline {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
right: 0;
|
|
||||||
width: 80rpx;
|
|
||||||
height: 4rpx;
|
|
||||||
background-color: #4f6aff;
|
|
||||||
border-radius: 2rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-icon-container {
|
|
||||||
width: 50rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
margin-right: 30rpx;
|
|
||||||
|
|
||||||
.more-icon {
|
|
||||||
width: 50rpx;
|
|
||||||
height: 10rpx;
|
|
||||||
margin-right: 30rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右上角更多菜单弹层 */
|
|
||||||
.more-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 80rpx;
|
|
||||||
right: 30rpx;
|
|
||||||
z-index: 100;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1rpx solid rgba(79, 106, 255, 0.12);
|
|
||||||
border-radius: 24rpx;
|
|
||||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
|
|
||||||
padding: 24rpx 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6rpx;
|
|
||||||
|
|
||||||
// .menu-icon {
|
|
||||||
// color: #FF647D;
|
|
||||||
// width: 32rpx;
|
|
||||||
// height: 32rpx;
|
|
||||||
// margin-right: 12rpx;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.menu-text {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #ff647d;
|
|
||||||
letter-spacing: 2rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 点击其它区域关闭的遮罩（透明） */
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 99;
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-wrapper {
|
|
||||||
padding: 30rpx;
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-list {
|
|
||||||
.date-group {
|
|
||||||
margin-bottom: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-header {
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #9aa0a8;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.history-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
padding: 24rpx 0;
|
|
||||||
|
|
||||||
.item-checkbox {
|
|
||||||
margin-right: 24rpx;
|
|
||||||
padding-top: 8rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 48rpx;
|
|
||||||
flex: 0 0 48rpx; /* 固定宽度，避免内容因显隐而抖动 */
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
border: 2rpx solid #d9d9d9;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
&.checked {
|
|
||||||
background-color: #ff4757;
|
|
||||||
border-color: #ff4757;
|
|
||||||
|
|
||||||
.checkmark {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 22rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.item-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 24rpx;
|
|
||||||
|
|
||||||
.item-icon {
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
background-color: #4f6aff;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
|
|
||||||
.icon-text {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333333;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-description {
|
|
||||||
letter-spacing: 0.04rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #666666;
|
|
||||||
line-height: 1.5;
|
|
||||||
margin-bottom: 12rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.batch-actions {
|
|
||||||
height: 130rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
border-top: 1rpx solid #eeeeee;
|
|
||||||
|
|
||||||
.select-all-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
border: 2rpx solid #d9d9d9;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #ffffff;
|
|
||||||
|
|
||||||
&.checked {
|
|
||||||
background-color: #ff4757;
|
|
||||||
border-color: #ff4757;
|
|
||||||
|
|
||||||
.checkmark {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 22rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-all-text {
|
|
||||||
margin-left: 16rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.function-btn {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20rpx;
|
|
||||||
|
|
||||||
.cancel-btn {
|
|
||||||
background-color: #e5e3e3e4;
|
|
||||||
color: #333333;
|
|
||||||
padding: 16rpx 32rpx;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.delete-btn {
|
|
||||||
background-color: #ff4757;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 16rpx 32rpx;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="qa-section">
|
<!-- <view class="qa-section">
|
||||||
<view class="qa-header">
|
<view class="qa-header">
|
||||||
<text class="qa-title">大家都在问</text>
|
<text class="qa-title">大家都在问</text>
|
||||||
<view class="more-link">
|
<view class="more-link">
|
||||||
|
|
@ -37,6 +37,16 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<button class="chat-button" @click="isChat = true">
|
||||||
|
<image
|
||||||
|
class="chat-icon"
|
||||||
|
src="/static/common/images/icon_chat.png"
|
||||||
|
></image>
|
||||||
|
<text class="chat-text">开启对话</text>
|
||||||
|
</button>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<view class="start-chat">
|
||||||
<button class="chat-button" @click="handleStartChat">
|
<button class="chat-button" @click="handleStartChat">
|
||||||
<image
|
<image
|
||||||
class="chat-icon"
|
class="chat-icon"
|
||||||
|
|
@ -51,9 +61,6 @@
|
||||||
class="feature-item"
|
class="feature-item"
|
||||||
v-for="(item, index) in features"
|
v-for="(item, index) in features"
|
||||||
:key="index"
|
:key="index"
|
||||||
:style="{
|
|
||||||
background: item.background,
|
|
||||||
}"
|
|
||||||
@click="handleFeatureClick(item)"
|
@click="handleFeatureClick(item)"
|
||||||
>
|
>
|
||||||
<image :src="item.icon" class="feature-icon"></image>
|
<image :src="item.icon" class="feature-icon"></image>
|
||||||
|
|
@ -104,7 +111,7 @@
|
||||||
<view class="loading-more" v-if="isLoading">
|
<view class="loading-more" v-if="isLoading">
|
||||||
<u-loading mode="circle" color="#4370fe"></u-loading>
|
<u-loading mode="circle" color="#4370fe"></u-loading>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 到顶部提示 -->
|
<!-- 到顶部提示 -->
|
||||||
<view class="no-more-data" v-if="noMoreData">
|
<view class="no-more-data" v-if="noMoreData">
|
||||||
<text>已经到顶了</text>
|
<text>已经到顶了</text>
|
||||||
|
|
@ -272,7 +279,7 @@ export default {
|
||||||
isLoadingMore: false, // 是否正在加载更多的标志位
|
isLoadingMore: false, // 是否正在加载更多的标志位
|
||||||
noMoreData: false, // 是否已加载全部历史消息
|
noMoreData: false, // 是否已加载全部历史消息
|
||||||
isSwitchingConversation: false, // 是否正在切换对话的标志位
|
isSwitchingConversation: false, // 是否正在切换对话的标志位
|
||||||
|
|
||||||
pageQuery: {
|
pageQuery: {
|
||||||
PageIndex: 1,
|
PageIndex: 1,
|
||||||
PageSize: 20,
|
PageSize: 20,
|
||||||
|
|
@ -287,20 +294,18 @@ export default {
|
||||||
],
|
],
|
||||||
features: [
|
features: [
|
||||||
{
|
{
|
||||||
title: "在线咨询",
|
title: "招办在线",
|
||||||
icon: "/static/common/images/icon_admissions.png",
|
icon: "/static/common/images/icon_admissions.png",
|
||||||
path: "/pages/home/admissions/index",
|
path: "/pages/home/admissions/index",
|
||||||
background: "linear-gradient(0deg, #F4FBFE 0%, #F4FBFE 100%)",
|
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// title: "留言板",
|
title: "留言板",
|
||||||
// icon: "/static/common/images/icon_messageBoard.png",
|
icon: "/static/common/images/icon_messageBoard.png",
|
||||||
// path: "/pages/home/messageBoard/index",
|
path: "/pages/home/messageBoard/index",
|
||||||
// },
|
},
|
||||||
{
|
{
|
||||||
title: "电话咨询",
|
title: "电话咨询",
|
||||||
icon: "/static/common/images/icon_phone.png",
|
icon: "/static/common/images/icon_phone.png",
|
||||||
background: "linear-gradient(0deg, #F4FBF9 0%, #F4FBF9 100%)",
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
popupShow: false,
|
popupShow: false,
|
||||||
|
|
@ -500,7 +505,7 @@ export default {
|
||||||
// 添加到消息列表
|
// 添加到消息列表
|
||||||
this.messageGroups.push(userMessage);
|
this.messageGroups.push(userMessage);
|
||||||
this.messageValue = "";
|
this.messageValue = "";
|
||||||
|
|
||||||
// 立即添加一个AI回复的加载状态消息
|
// 立即添加一个AI回复的加载状态消息
|
||||||
const loadingMessage = {
|
const loadingMessage = {
|
||||||
id: "loading_" + Math.random().toString(36).substring(2, 15),
|
id: "loading_" + Math.random().toString(36).substring(2, 15),
|
||||||
|
|
@ -514,7 +519,7 @@ export default {
|
||||||
displayTime: "",
|
displayTime: "",
|
||||||
isLoading: true, // 标记为加载状态
|
isLoading: true, // 标记为加载状态
|
||||||
};
|
};
|
||||||
|
|
||||||
// 添加加载状态消息到列表
|
// 添加加载状态消息到列表
|
||||||
this.messageGroups.push(loadingMessage);
|
this.messageGroups.push(loadingMessage);
|
||||||
|
|
||||||
|
|
@ -554,12 +559,12 @@ export default {
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error("API请求失败:", error);
|
console.error("API请求失败:", error);
|
||||||
|
|
||||||
// 从消息列表中移除加载状态消息
|
// 从消息列表中移除加载状态消息
|
||||||
this.messageGroups = this.messageGroups.filter(
|
this.messageGroups = this.messageGroups.filter(
|
||||||
(msg) => !msg.isLoading
|
(msg) => !msg.isLoading
|
||||||
);
|
);
|
||||||
|
|
||||||
// 添加错误消息
|
// 添加错误消息
|
||||||
const errorMessage = {
|
const errorMessage = {
|
||||||
id: "error_" + Math.random().toString(36).substring(2, 15),
|
id: "error_" + Math.random().toString(36).substring(2, 15),
|
||||||
|
|
@ -572,7 +577,7 @@ export default {
|
||||||
timeLabel: 0,
|
timeLabel: 0,
|
||||||
displayTime: "",
|
displayTime: "",
|
||||||
};
|
};
|
||||||
|
|
||||||
this.messageGroups.push(errorMessage);
|
this.messageGroups.push(errorMessage);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
@ -640,18 +645,18 @@ export default {
|
||||||
// 关闭弹窗
|
// 关闭弹窗
|
||||||
this.popupShow = false;
|
this.popupShow = false;
|
||||||
this.isChat = true;
|
this.isChat = true;
|
||||||
|
|
||||||
// 设置切换对话标志位，防止触发上拉刷新
|
// 设置切换对话标志位，防止触发上拉刷新
|
||||||
this.isSwitchingConversation = true;
|
this.isSwitchingConversation = true;
|
||||||
|
|
||||||
this.currentConversationId = "";
|
this.currentConversationId = "";
|
||||||
this.messageGroups = [];
|
this.messageGroups = [];
|
||||||
|
|
||||||
// 重置分页和加载状态
|
// 重置分页和加载状态
|
||||||
this.pageQuery.PageIndex = 1;
|
this.pageQuery.PageIndex = 1;
|
||||||
this.isLoadingMore = false;
|
this.isLoadingMore = false;
|
||||||
this.noMoreData = false;
|
this.noMoreData = false;
|
||||||
|
|
||||||
// 延迟重置切换对话标志位
|
// 延迟重置切换对话标志位
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.isSwitchingConversation = false;
|
this.isSwitchingConversation = false;
|
||||||
|
|
@ -661,18 +666,18 @@ export default {
|
||||||
// 开始新对话
|
// 开始新对话
|
||||||
handleStartChat() {
|
handleStartChat() {
|
||||||
this.isChat = true;
|
this.isChat = true;
|
||||||
|
|
||||||
// 设置切换对话标志位，防止触发上拉刷新
|
// 设置切换对话标志位，防止触发上拉刷新
|
||||||
this.isSwitchingConversation = true;
|
this.isSwitchingConversation = true;
|
||||||
|
|
||||||
this.currentConversationId = "";
|
this.currentConversationId = "";
|
||||||
this.messageGroups = [];
|
this.messageGroups = [];
|
||||||
|
|
||||||
// 重置分页和加载状态
|
// 重置分页和加载状态
|
||||||
this.pageQuery.PageIndex = 1;
|
this.pageQuery.PageIndex = 1;
|
||||||
this.isLoadingMore = false;
|
this.isLoadingMore = false;
|
||||||
this.noMoreData = false;
|
this.noMoreData = false;
|
||||||
|
|
||||||
// 延迟重置切换对话标志位
|
// 延迟重置切换对话标志位
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.isSwitchingConversation = false;
|
this.isSwitchingConversation = false;
|
||||||
|
|
@ -687,7 +692,7 @@ export default {
|
||||||
// 滚动到顶部事件处理
|
// 滚动到顶部事件处理
|
||||||
onScrollToUpper() {
|
onScrollToUpper() {
|
||||||
console.log("触发上拉刷新");
|
console.log("触发上拉刷新");
|
||||||
|
|
||||||
// 如果已经没有更多数据或正在切换对话，不再触发上拉刷新
|
// 如果已经没有更多数据或正在切换对话，不再触发上拉刷新
|
||||||
if (this.noMoreData || this.isSwitchingConversation) {
|
if (this.noMoreData || this.isSwitchingConversation) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -766,7 +771,7 @@ export default {
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
padding: 30rpx;
|
padding: 30rpx;
|
||||||
padding-top: 60rpx;
|
padding-top: 100rpx;
|
||||||
|
|
||||||
.welcome-message {
|
.welcome-message {
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
|
|
@ -779,8 +784,8 @@ export default {
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 50rpx;
|
width: 42rpx;
|
||||||
height: 44rpx;
|
height: 34rpx;
|
||||||
margin-right: 12rpx;
|
margin-right: 12rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -889,19 +894,20 @@ export default {
|
||||||
gap: 30rpx;
|
gap: 30rpx;
|
||||||
|
|
||||||
.feature-item {
|
.feature-item {
|
||||||
height: 150rpx;
|
height: 210rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
|
background-color: #fafafc;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 30rpx;
|
justify-content: center;
|
||||||
gap: 20rpx;
|
// gap: 20rpx;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.feature-icon {
|
.feature-icon {
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
margin-top: 16rpx;
|
margin-bottom: 12rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-text {
|
.feature-text {
|
||||||
|
|
@ -976,7 +982,7 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 32rpx;
|
margin-bottom: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-more-data {
|
.no-more-data {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
|
|
@ -1024,7 +1030,7 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 12rpx;
|
width: 12rpx;
|
||||||
|
|
@ -1034,20 +1040,20 @@ export default {
|
||||||
margin: 0 6rpx;
|
margin: 0 6rpx;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
animation: dot-flashing 1.5s infinite linear alternate;
|
animation: dot-flashing 1.5s infinite linear alternate;
|
||||||
|
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
animation-delay: 0s;
|
animation-delay: 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
animation-delay: 0.5s;
|
animation-delay: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
animation-delay: 1s;
|
animation-delay: 1s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes dot-flashing {
|
@keyframes dot-flashing {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,425 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<!-- <image src="/static/common/img/16530269846087107196.png" class="image"/> -->
|
||||||
|
<u-navbar title="重置密码"></u-navbar>
|
||||||
|
<view class="flex-col group" v-if="state === 1">
|
||||||
|
<text class="text">重置密码</text>
|
||||||
|
<view class="flex-col group_7">
|
||||||
|
<view class="flex-col">
|
||||||
|
<!-- <text class="text_1">手机号</text> -->
|
||||||
|
<view class="text-wrapper flex-row view">
|
||||||
|
<u-input
|
||||||
|
v-model="phone"
|
||||||
|
:disabled="disabled"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_6">
|
||||||
|
<!-- <text class="text_1">短信验证码</text> -->
|
||||||
|
<view class="text-wrapper flex-row view" style="padding: 0">
|
||||||
|
<u-input
|
||||||
|
v-model="code"
|
||||||
|
placeholder="请输入短信验证码"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
<u-button
|
||||||
|
:disabled="!(send == '发送验证码')"
|
||||||
|
class="custom-style"
|
||||||
|
style="background: transparent"
|
||||||
|
@click="sendCode"
|
||||||
|
>{{ send }}
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <navigator class="text_6" url="/pages/login/login/login">登录</navigator> -->
|
||||||
|
<u-button
|
||||||
|
class="flex-col items-center text-wrapper_1"
|
||||||
|
shape="circle"
|
||||||
|
type="primary"
|
||||||
|
@click="login"
|
||||||
|
>
|
||||||
|
<text class="text_7">重置密码</text>
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group" v-if="state === 2">
|
||||||
|
<text class="text">遇见身边的校友</text>
|
||||||
|
<view class="flex-col group_7">
|
||||||
|
<view class="flex-col">
|
||||||
|
<u-input
|
||||||
|
v-model="passWord"
|
||||||
|
class="view text-wrapper"
|
||||||
|
placeholder="请输入新密码"
|
||||||
|
type="password"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_6">
|
||||||
|
<u-input
|
||||||
|
v-model="passWordTwo"
|
||||||
|
class="view text-wrapper"
|
||||||
|
placeholder="请确认新密码"
|
||||||
|
type="password"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tips">
|
||||||
|
<image src="/static/common/img/infoCircle.png"></image>
|
||||||
|
提示：密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
|
||||||
|
</view>
|
||||||
|
<u-button
|
||||||
|
class="flex-col items-center text-wrapper_1"
|
||||||
|
shape="circle"
|
||||||
|
throttle-time="1000"
|
||||||
|
type="primary"
|
||||||
|
@click="login"
|
||||||
|
>
|
||||||
|
<text class="text_7">立即重置</text>
|
||||||
|
</u-button>
|
||||||
|
<u-button
|
||||||
|
class="flex-col items-center text-wrapper_1"
|
||||||
|
shape="circle"
|
||||||
|
style=" margin-top: 10px"
|
||||||
|
type="primary"
|
||||||
|
@click="state = 1"
|
||||||
|
>
|
||||||
|
<text class="text_7">返回</text>
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
||||||
|
<u-toast ref="uToast"/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import md5 from "js-md5";
|
||||||
|
import {aesEncrypt} from "@/utils/encrypt.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
phone: "",
|
||||||
|
passWord: "",
|
||||||
|
code: "",
|
||||||
|
passWordTwo: "",
|
||||||
|
agreement: false,
|
||||||
|
disabled: false,
|
||||||
|
send: "发送验证码",
|
||||||
|
state: 1,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 提示
|
||||||
|
tips(title, type, time) {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: title ? title : "",
|
||||||
|
type: type ? type : "success",
|
||||||
|
duration: time ? time + "" : "1500",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 发送验证码
|
||||||
|
sendCode() {
|
||||||
|
var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
|
||||||
|
if (this.phone === "" || !reg.test(this.phone)) {
|
||||||
|
// this.$tips("请输入正确的手机号码", "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '请输入正确的手机号码',
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const timestamp = Date.now();
|
||||||
|
const base64Key = btoa('xiaoyout!#@12345');
|
||||||
|
const signStr = this.phone + timestamp + base64Key;
|
||||||
|
const sign = md5(signStr);
|
||||||
|
|
||||||
|
this.$u.apiList
|
||||||
|
.GetAppValidateCode({
|
||||||
|
phone: this.phone,
|
||||||
|
t: timestamp.toString(),
|
||||||
|
sign: sign,
|
||||||
|
type: 2,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
//中间数字加密
|
||||||
|
// let result =this.userName.replace(this.userName.substring(3,7),"****")
|
||||||
|
// this.userName = result
|
||||||
|
this.disabled = true;
|
||||||
|
// this.$tips("发送成功");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '发送成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
var second = 60;
|
||||||
|
this.send = second + "秒后重试";
|
||||||
|
var time = setInterval(() => {
|
||||||
|
this.send = second + "秒后重试";
|
||||||
|
second--;
|
||||||
|
if (second <= 0) {
|
||||||
|
this.disabled = false;
|
||||||
|
this.send = "发送验证码";
|
||||||
|
clearInterval(time);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
// this.$tips(err.error, "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.error,
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
login() {
|
||||||
|
if (this.state == 1) {
|
||||||
|
if (this.phone === "") {
|
||||||
|
return this.tips("请输入手机号", "error");
|
||||||
|
}
|
||||||
|
if (this.code === "") {
|
||||||
|
return this.tips("请输入验证码", "error");
|
||||||
|
}
|
||||||
|
this.$u.apiList.ForgotPasswordValidate({
|
||||||
|
phone: this.phone,
|
||||||
|
code: this.code,
|
||||||
|
}).then((res) => {
|
||||||
|
console.info("🚀 ~ file:ForgetPassword method: line:189 -----", res)
|
||||||
|
this.state = 2;
|
||||||
|
}).catch((err) => {
|
||||||
|
this.tips(err.error, "error");
|
||||||
|
});
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.state == 2) {
|
||||||
|
if (this.passWord === "") {
|
||||||
|
return this.tips("请输入新密码", "error");
|
||||||
|
}
|
||||||
|
let reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[\W_]).{5,}$/;
|
||||||
|
if (!reg.test(this.passWord)) {
|
||||||
|
/* return this.$tips(
|
||||||
|
"密码必须包含字母、数字、特殊字符，且不能包含中文!",
|
||||||
|
"error"
|
||||||
|
); */
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: "密码必须包含字母、数字、特殊字符，且不能包含中文!",
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.passWordTwo === "") {
|
||||||
|
return this.tips("请确认新密码", "error");
|
||||||
|
}
|
||||||
|
if (this.passWord != this.passWordTwo) {
|
||||||
|
return this.tips("请检查两次密码是否一致", "error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const req = {
|
||||||
|
phone: this.phone,
|
||||||
|
code: this.code,
|
||||||
|
newPassWord: aesEncrypt(this.passWord),
|
||||||
|
};
|
||||||
|
console.log(req, "res-");
|
||||||
|
// return
|
||||||
|
this.$u.apiList
|
||||||
|
.ForgotPassword(req)
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res, "res---");
|
||||||
|
uni.showToast({
|
||||||
|
title: "重置成功",
|
||||||
|
duration: 2000,
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/",
|
||||||
|
});
|
||||||
|
}, 2000);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err, "err---");
|
||||||
|
// this.$tips(err.error, "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.error,
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.custom-style {
|
||||||
|
color: #3cb5fb !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
height: 70rpx !important;
|
||||||
|
line-height: 60rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-style::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding-bottom: 0.015rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
width: 102%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
padding: 1.0rem 0.29rem;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
align-self: left;
|
||||||
|
// color: rgb(46, 155, 255);
|
||||||
|
color: #000;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.17rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
margin-top: 0.29rem;
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
border: solid 2rpx #dcdfe6;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
background: #f6f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
margin-left: 0.01rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx 50rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
margin-left: 0.01rem;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: #1F2232;
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_1 {
|
||||||
|
margin: 50rpx 0rpx 40rpx;
|
||||||
|
padding: 50rpx 0 50rpx;
|
||||||
|
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
|
||||||
|
background: #3cb4fb;
|
||||||
|
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
|
||||||
|
border-radius: 100rpx;
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_1 {
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-left: 0.035rem;
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
margin-top: 0.36rem;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.section_1 {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 0.17rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-left: 0.11rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
line-height: 0.18rem;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_13 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #EF3920;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-top: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
<template>
|
||||||
|
<view class="authentication-page">
|
||||||
|
<u-navbar title="身份认证"> </u-navbar>
|
||||||
|
|
||||||
|
<view class="title">请填写您的真实信息</view>
|
||||||
|
|
||||||
|
<view class="form-container">
|
||||||
|
<view class="input-item">
|
||||||
|
<text>姓名</text>
|
||||||
|
<input
|
||||||
|
v-model="name"
|
||||||
|
maxlength="20"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="input-item">
|
||||||
|
<text>身份证号</text>
|
||||||
|
<input
|
||||||
|
v-model="idCard"
|
||||||
|
maxlength="18"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入"
|
||||||
|
placeholder-class="placeholder"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-container">
|
||||||
|
<button class="next-btn" @click="handleNext">下一步</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import test from "@/uview-ui/libs/function/test.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: "",
|
||||||
|
idCard: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleNext() {
|
||||||
|
// 调用后端API获取token
|
||||||
|
this.getTokenFromBackend();
|
||||||
|
|
||||||
|
if (!this.name) {
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: "请输入姓名",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (!this.idCard) {
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: "请输入身份证号",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 验证身份证号码格式
|
||||||
|
if (!test.idCard(this.idCard)) {
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: "请输入正确的身份证号码",
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 处理下一步逻辑
|
||||||
|
// console.log("提交信息", this.name, this.idCard);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取token
|
||||||
|
getTokenFromBackend() {
|
||||||
|
this.$u.api.getAPIToken().then((res) => {
|
||||||
|
const token = res.verifyToken
|
||||||
|
|
||||||
|
// 跳转到百度人脸核验页面
|
||||||
|
this.redirectToBaiduVerification(token);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
redirectToBaiduVerification(token) {
|
||||||
|
// 获取当前域名
|
||||||
|
const currentDomain = window.location.origin;
|
||||||
|
|
||||||
|
// 编码回调URL
|
||||||
|
// const callbackUrl = encodeURIComponent(`${currentDomain}/success.html`);
|
||||||
|
const callbackUrl = "/pages/login/recognitionResult/recognitionResult";
|
||||||
|
|
||||||
|
// 构建跳转URL
|
||||||
|
const verifyUrl = `https://brain.baidu.com/face/print/verify/verify?token=${token}&successUrl=${callbackUrl}&failedUrl=${callbackUrl}`;
|
||||||
|
|
||||||
|
const verifyObj = {
|
||||||
|
url: verifyUrl,
|
||||||
|
name:'身份认证'
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在uni-app中跳转
|
||||||
|
this.$u.route({
|
||||||
|
url: `/pages/webview/index?data=${encodeURIComponent(
|
||||||
|
JSON.stringify(verifyObj)
|
||||||
|
)}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.authentication-page {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.9);
|
||||||
|
line-height: 52rpx;
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
margin-bottom: 60rpx;
|
||||||
|
|
||||||
|
.input-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-container {
|
||||||
|
.next-btn {
|
||||||
|
background-color: #45b5ff;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,338 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<!-- <image src="/static/common/img/16530269846087107196.png" class="image" /> -->
|
||||||
|
<u-navbar title="确认密码"></u-navbar>
|
||||||
|
<view class="flex-col group">
|
||||||
|
<text class="text">确认密码后登录</text>
|
||||||
|
<view class="flex-col group_7">
|
||||||
|
<view class="flex-col">
|
||||||
|
<view class="flex-row" style="padding: 0">
|
||||||
|
<u-input type="password" v-model="user.passWord" placeholder="请输入密码" class="view text-wrapper"/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_6">
|
||||||
|
<u-input type="password" v-model="isPassWord" placeholder="请确认密码" class="view text-wrapper" />
|
||||||
|
</view>
|
||||||
|
<view class="tips">
|
||||||
|
<image src="/static/common/img/infoCircle.png"></image> 提示：密码长度应该大于5，必须包含字母、数字、特殊字符，且不能包含中文!
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-button class="flex-col items-center text-wrapper_1" throttle-time="1000" type="primary" shape="circle"
|
||||||
|
@click="login"><text class="text_7">确定</text></u-button>
|
||||||
|
<!-- 此次接入人脸验证 登录 ==> 确定 -->
|
||||||
|
</view>
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {aesEncrypt} from '@/utils/encrypt.js'
|
||||||
|
import md5 from "js-md5";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
userName: "",
|
||||||
|
isPassWord: "",
|
||||||
|
agreement: false,
|
||||||
|
user: {
|
||||||
|
phone: '',
|
||||||
|
passWord: '',
|
||||||
|
code:''
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
if (e.phone) {
|
||||||
|
this.user.phone = e.phone
|
||||||
|
this.user.code = e.code
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "../register/register",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login() {
|
||||||
|
if (this.user.passWord === "") {
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: '请输入密码',
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.user.passWord.length < 5) {
|
||||||
|
// return this.$tips("您的密码长度应该大于5", "error");
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: '您的密码长度应该大于5',
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (this.isPassWord === "") {
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: '请确认密码',
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
// return this.$tips("请确认密码", "error");
|
||||||
|
}
|
||||||
|
if (this.isPassWord !== this.user.passWord) {
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: '请确认两次密码是否一致',
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
// return this.$tips("请确认两次密码是否一致", "error");
|
||||||
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
title: "注册中",
|
||||||
|
});
|
||||||
|
const req = {...this.user}
|
||||||
|
req.passWord = aesEncrypt(this.user.passWord)
|
||||||
|
// 生成13位时间戳
|
||||||
|
const timestamp = Date.now();
|
||||||
|
// 生成签名
|
||||||
|
const base64Key = btoa('xiaoyout!#@12345');
|
||||||
|
const signStr = this.user.phone + timestamp + base64Key;
|
||||||
|
const sign = md5(signStr);
|
||||||
|
req.timeStamp = timestamp.toString();
|
||||||
|
req.sign = sign;
|
||||||
|
console.log(req,'req')
|
||||||
|
// return
|
||||||
|
this.$u.api.RegisterUser(req).then((res) => {
|
||||||
|
const newReq = {...this.user}
|
||||||
|
newReq.passWord = aesEncrypt(this.user.passWord)
|
||||||
|
this.$u.api.LoginApp(newReq).then((ress) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
// 保存登录后得到的用户数据
|
||||||
|
this.$u.vuex('vuex_user', ress.user)
|
||||||
|
this.$u.vuex('vuex_token', ress.token)
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '注册成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "../perfect/perfect",
|
||||||
|
// });
|
||||||
|
setTimeout(()=>{
|
||||||
|
// 这里改为进行人脸识别
|
||||||
|
this.toBaiduApi();
|
||||||
|
return
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/roleSelection",
|
||||||
|
});
|
||||||
|
},300)
|
||||||
|
|
||||||
|
}).catch((e) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
});
|
||||||
|
|
||||||
|
}).catch((e) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
// this.$tips( e.error, 'error')
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: e.error,
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// 跳转至人脸验证
|
||||||
|
toBaiduApi(){
|
||||||
|
this.$u.api.getAPIToken().then((res) => {
|
||||||
|
const token = res.result.verify_token;
|
||||||
|
|
||||||
|
// 跳转到百度人脸核验页面
|
||||||
|
this.redirectToBaiduVerification(token);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
redirectToBaiduVerification(token) {
|
||||||
|
// 获取当前域名
|
||||||
|
const currentDomain = window.location.origin;
|
||||||
|
|
||||||
|
// 编码回调URL - 使用相对路径，让uni-app处理路由
|
||||||
|
// 百度人脸核验会在回调URL后附加verify_result和verify_info参数
|
||||||
|
const successUrl = encodeURIComponent(
|
||||||
|
`${currentDomain}/#/pages/login/recognitionResult/recognitionResult?token=${token}`
|
||||||
|
);
|
||||||
|
const failedUrl = encodeURIComponent(
|
||||||
|
`${currentDomain}/#/pages/login/recognitionResult/recognitionFailed?token=${token}`
|
||||||
|
);
|
||||||
|
|
||||||
|
// 构建跳转URL
|
||||||
|
const verifyUrl = `https://brain.baidu.com/face/print/verify/verify?token=${token}&successUrl=${successUrl}&failedUrl=${failedUrl}`;
|
||||||
|
|
||||||
|
console.log("跳转到百度人脸核验页面:", verifyUrl);
|
||||||
|
|
||||||
|
// 直接跳转到百度人脸核验页面
|
||||||
|
window.location.href = verifyUrl;
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.custom-style {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-style::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding-bottom: 0.015rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
width: 102%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
padding: 0.15rem 0.29rem;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-family: PingFang;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #000000;
|
||||||
|
margin-top: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
margin-top: 0.29rem;
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
border: solid 2rpx #dcdfe6;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
background: #f6f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
margin-left: 0.01rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx 50rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-left: 0.01rem;
|
||||||
|
margin-top: 0.13rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_1 {
|
||||||
|
margin: 0.35rem 0rem 0;
|
||||||
|
padding: 20rpx 50rpx;
|
||||||
|
height: 108rpx;
|
||||||
|
/* background-image: linear-gradient(90deg,
|
||||||
|
rgb(135, 230, 254) 0%,
|
||||||
|
rgb(91, 192, 254) 52%,
|
||||||
|
rgb(46, 155, 255) 100%);
|
||||||
|
box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
|
||||||
|
background: #3cb5fb;
|
||||||
|
border-radius: 0.23rem;
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.16rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_1 {
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-left: 0.035rem;
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
margin-top: 0.36rem;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.section_1 {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 0.17rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-left: 0.11rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
line-height: 0.18rem;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_13 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tips{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #EF3920;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
image{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -69,17 +69,12 @@
|
||||||
</view>
|
</view>
|
||||||
<view class="input-wrapper">
|
<view class="input-wrapper">
|
||||||
<input
|
<input
|
||||||
:password="!isShowPassword"
|
|
||||||
type="text"
|
type="text"
|
||||||
class="form-input"
|
class="form-input"
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
v-model="loginParams.password"
|
v-model="loginParams.password"
|
||||||
@blur="validatePassword"
|
@blur="validatePassword"
|
||||||
/>
|
/>
|
||||||
<view class="show-password-icon" @click="toggleShowPassword">
|
|
||||||
<u-icon v-show="!isShowPassword" name="eye-fill" color="#2979ff" size="32"></u-icon>
|
|
||||||
<u-icon v-show="isShowPassword" name="eye-off" color="#2979ff" size="32"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
<text v-if="errors.password" class="error-tip">{{
|
<text v-if="errors.password" class="error-tip">{{
|
||||||
errors.password
|
errors.password
|
||||||
|
|
@ -162,7 +157,6 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isTeacher: false, // 是否是教师
|
isTeacher: false, // 是否是教师
|
||||||
isShowPassword: false, // 是否显示密码
|
|
||||||
|
|
||||||
// 登录参数
|
// 登录参数
|
||||||
loginParams: {
|
loginParams: {
|
||||||
|
|
@ -203,17 +197,11 @@ export default {
|
||||||
this.clearErrors();
|
this.clearErrors();
|
||||||
this.clearLoginParams();
|
this.clearLoginParams();
|
||||||
this.loginType = type;
|
this.loginType = type;
|
||||||
this.isShowPassword = false;
|
|
||||||
if (this.loginType === "code") {
|
if (this.loginType === "code") {
|
||||||
this.refreshCaptcha();
|
this.refreshCaptcha();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 切换显示密码
|
|
||||||
toggleShowPassword() {
|
|
||||||
this.isShowPassword = !this.isShowPassword;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 刷新图形验证码
|
// 刷新图形验证码
|
||||||
refreshCaptcha() {
|
refreshCaptcha() {
|
||||||
// 获取图形验证码
|
// 获取图形验证码
|
||||||
|
|
@ -456,7 +444,7 @@ export default {
|
||||||
|
|
||||||
// 跳转至首页
|
// 跳转至首页
|
||||||
const url = this.isTeacher
|
const url = this.isTeacher
|
||||||
? "/pages/consultation/index"
|
? "/pages/notes/index"
|
||||||
: "/pages/home/index/index";
|
: "/pages/home/index/index";
|
||||||
uni.reLaunch({
|
uni.reLaunch({
|
||||||
url: url,
|
url: url,
|
||||||
|
|
@ -706,18 +694,6 @@ export default {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-password-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 10rpx;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
height: 60rpx;
|
|
||||||
width: 60rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,532 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<!-- <image src="/static/common/img/loginBg.png" class="image" /> -->
|
||||||
|
<view class="img-box">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="login-box">
|
||||||
|
<view class="tab-list">
|
||||||
|
<view v-for="tab in tabList" :key="tab.id" class="tab-item"
|
||||||
|
:class="activeTab === tab.id ? 'tab-selected' : 'not-selected'" @click="onTab(tab.id)">
|
||||||
|
<text class="tab-text">{{tab.label}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group">
|
||||||
|
<text class="text"></text>
|
||||||
|
|
||||||
|
<view class="flex-col group_7">
|
||||||
|
<view class="flex-col">
|
||||||
|
<!-- <text class="text_1">手机号</text> -->
|
||||||
|
<!-- @input="changeInput($event)" -->
|
||||||
|
<!-- <u-input type="number" v-model="userName" placeholder="请输入手机号" class="view text-wrapper" /> -->
|
||||||
|
<u-input type="number" v-model="userName" placeholder="请输入手机号" class="view text-wrapper" maxlength="11"/>
|
||||||
|
</view>
|
||||||
|
<view class="error-tips" v-if="errorPhone"><image class="error-img" src="/static/common/img/infoCircle.png"></image> 请输入正确手机号</view>
|
||||||
|
<view style="height: 0;width: 0;border: 0;padding: 0;margin: 0;overflow: hidden;">
|
||||||
|
<u-input placeholder='' />
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_6">
|
||||||
|
<!-- <text class="text_1">密码</text> -->
|
||||||
|
<u-input type="password" v-model="passWord" placeholder="请输入密码" class="view text-wrapper" />
|
||||||
|
</view>
|
||||||
|
<!-- 密码必须包含字母、数字、特殊字符，且不能包含中文 -->
|
||||||
|
<view class="error-tips" v-if="errorPwd"><image class="error-img" src="/static/common/img/infoCircle.png"></image> {{errormsg}}</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<navigator class="text_6" style="width: 100%; text-align: right;" url="/pages/login/ForgetPassword/ForgetPassword">忘记密码？</navigator>
|
||||||
|
<u-button class="flex-col items-center text-wrapper_1" throttle-time='1000' type="primary" shape="circle"
|
||||||
|
@click="login"><text class="text_7">登录</text></u-button>
|
||||||
|
<view class="justify-center group_1">
|
||||||
|
<text class="text_8">还没有账号？</text>
|
||||||
|
<navigator class="text_9" url="/pages/login/register/register">立即注册</navigator>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="flex-row group_2">
|
||||||
|
<u-checkbox-group class="section_1" :size='34'>
|
||||||
|
<u-checkbox v-model="agreement"> </u-checkbox>
|
||||||
|
</u-checkbox-group>
|
||||||
|
<view class="group_3">
|
||||||
|
<text class="text_10">已阅读并同意</text>
|
||||||
|
<text class="text_11">《用户服务协议》</text>
|
||||||
|
<text class="text_12">＆</text>
|
||||||
|
<text class="text_13">《用户隐私保护政策》</text>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<u-top-tips ref="uTips" :navbar-height='0'></u-top-tips>
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
toBaiduApi
|
||||||
|
} from '@/utils/faceVerify.js'
|
||||||
|
import {
|
||||||
|
aesEncrypt
|
||||||
|
} from '@/utils/encrypt.js'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
userName: "",
|
||||||
|
passWord: "",
|
||||||
|
agreement: true,
|
||||||
|
tabList: [{
|
||||||
|
id: 1,
|
||||||
|
label: '密码登录'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
label: '验证码登录'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
activeTab: 1,
|
||||||
|
errorPhone: false,
|
||||||
|
errorPwd: false,
|
||||||
|
errormsg: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {},
|
||||||
|
onHide(){
|
||||||
|
this.userName= ""
|
||||||
|
this.passWord= ""
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.userName= ""
|
||||||
|
this.passWord= ""
|
||||||
|
setTimeout(() => {
|
||||||
|
const lifeData = uni.getStorageSync('lifeData');
|
||||||
|
if (lifeData.vuex_user && lifeData.vuex_token) {
|
||||||
|
this.$u.api.getUser().then(res => {
|
||||||
|
// if(!this.vuex_user.isCard){
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: '/pages/Face/index/index'
|
||||||
|
// });
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
uni.switchTab({
|
||||||
|
url: '../../main/index/index'
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeInput(e){
|
||||||
|
setTimeout(() => {
|
||||||
|
this.userName = e.target.value
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
onTab(id) {
|
||||||
|
if(id == 1){
|
||||||
|
this.activeTab = id
|
||||||
|
}else{
|
||||||
|
/* uni.showToast({
|
||||||
|
title: '暂未开放',
|
||||||
|
icon: 'none'
|
||||||
|
}) */
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '暂未开放',
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
login() {
|
||||||
|
// this.$u.vuex("vuex_msgList", '');
|
||||||
|
// this.$u.vuex('vuex_user', '')
|
||||||
|
// this.$u.vuex('vuex_token', '')
|
||||||
|
// uni.clearStorage();
|
||||||
|
if (!/^1[3-9]\d{9}$/.test(this.userName)) {
|
||||||
|
// 校验手机号格式是否正确
|
||||||
|
this.errorPhone = true;
|
||||||
|
// return this.$tips("请输入正确的手机号", "error");
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.errorPhone = false;
|
||||||
|
}
|
||||||
|
// 校验密码格式先注释掉 因为重置密码的时候密码是1q2w3e
|
||||||
|
// if (!/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&.])[A-Za-z\d@$!%*?&.]{5,}$/.test(this.passWord)) {
|
||||||
|
/* if (this.passWord.length < 6) {
|
||||||
|
// 校验密码是否包含字母、数字、特殊字符，且长度至少为6
|
||||||
|
this.errorPwd = true;
|
||||||
|
// return this.$tips("密码必须包含字母、数字、特殊字符，且不能包含中文", "error");
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.errorPwd = false;
|
||||||
|
} */
|
||||||
|
/* if (!this.agreement) {
|
||||||
|
return this.$tips("请同意用户服务协议及用户隐私保护政策", "error");
|
||||||
|
} */
|
||||||
|
if (this.passWord.length===0) {
|
||||||
|
this.errorPwd = true;
|
||||||
|
this.errormsg = "请输入密码";
|
||||||
|
console.log("请输入密码");
|
||||||
|
return
|
||||||
|
}else if (this.passWord.length>0&&this.passWord.length < 6) {
|
||||||
|
this.errorPwd = true;
|
||||||
|
this.errormsg = "密码长度不能少于6位";
|
||||||
|
console.log("密码长度不能少于6位");
|
||||||
|
return
|
||||||
|
}else{
|
||||||
|
this.errorPwd = false;
|
||||||
|
this.errormsg = "";
|
||||||
|
}
|
||||||
|
uni.showLoading({
|
||||||
|
title: "登录中",
|
||||||
|
});
|
||||||
|
//
|
||||||
|
let data = {
|
||||||
|
phone: this.userName,
|
||||||
|
password: aesEncrypt(this.passWord),
|
||||||
|
}
|
||||||
|
this.$u.api.LoginApp(data).then((res) => {
|
||||||
|
uni.hideLoading();
|
||||||
|
if (!res.succeed && !res.token) {
|
||||||
|
/* uni.showToast({
|
||||||
|
title: res.error,
|
||||||
|
duration: 2000,
|
||||||
|
icon: 'none'
|
||||||
|
}); */
|
||||||
|
// this.$tips(res.error, "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.error,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// this.$tips("登录成功", "success")
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: "登录成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
/* uni.showToast({
|
||||||
|
title: "登录成功",
|
||||||
|
duration: 2000,
|
||||||
|
}); */
|
||||||
|
// 保存登录后得到的用户数据
|
||||||
|
this.$u.vuex('vuex_user', res.user)
|
||||||
|
this.$u.vuex('vuex_token', res.token)
|
||||||
|
this.$u.vuex('vuex_glyType', res.glyType)
|
||||||
|
// if(!res.user.isCard){
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: '/pages/Face/index/index'
|
||||||
|
// });
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
if (res.user.isFill) {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '/pages/home/home/home'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// uni.navigateTo({
|
||||||
|
// // url: "../perfect/perfect",
|
||||||
|
// url: "../roleSelection",
|
||||||
|
// });
|
||||||
|
|
||||||
|
// 没认证先前往人脸识别
|
||||||
|
toBaiduApi(this);
|
||||||
|
|
||||||
|
return
|
||||||
|
// 这里先注释
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/roleSelection?source=login",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
// this.$tips(err.error, "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.error,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
/* uni.showToast({
|
||||||
|
title: err.error,
|
||||||
|
icon: 'none'
|
||||||
|
}) */
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.page {
|
||||||
|
padding-bottom: 30rpx;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
|
background: url(/static/common/img/loginBg.png);
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top;
|
||||||
|
|
||||||
|
.img-box {
|
||||||
|
height: 420rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
width: 102%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20rpx 25rpx;
|
||||||
|
width: calc(100% - 50rpx);
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
align-self: center;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
border: solid 2rpx #dcdfe6;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
background: #f6f8fa;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx 50rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-left: 5rpx;
|
||||||
|
margin-top: 50rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
// color: rgb(25, 140, 255);
|
||||||
|
color:#1F2232;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_1 {
|
||||||
|
margin: 50rpx 0rpx 40rpx;
|
||||||
|
padding: 50rpx 0 50rpx;
|
||||||
|
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
|
||||||
|
background: #3cb4fb;
|
||||||
|
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
|
||||||
|
border-radius: 100rpx;
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_1 {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
color: #8697AC;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-left: 0.035rem;
|
||||||
|
color: #2E9CFE;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.section_1 {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-left: 24rpx;
|
||||||
|
height: 24rpx;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_13 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-box{
|
||||||
|
background: #fff;
|
||||||
|
width: calc(100% - 50rpx);
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
// height: calc(100% - 350rpx);
|
||||||
|
overflow: hidden;
|
||||||
|
padding-bottom:100rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
$tab-height: 52px;
|
||||||
|
$active-color: #fff;
|
||||||
|
$default-color: #90ecf1;
|
||||||
|
$primary-color: #666;
|
||||||
|
|
||||||
|
.tab-list {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
border-radius: 30rpx 30rpx 0 0;
|
||||||
|
background-color: $default-color;
|
||||||
|
overflow: hidden; // 重点
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
height: $tab-height;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 30rpx;
|
||||||
|
// opacity: 0.65; // 暂时删除，不选中样式需要重新编写
|
||||||
|
|
||||||
|
font-weight: 600;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tab-selected {
|
||||||
|
color:#3cb5fb;
|
||||||
|
opacity: 1;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 24rpx 24rpx 0 0;
|
||||||
|
box-shadow: 48rpx 80rpx 0 $active-color, -34rpx 90rpx 0 0 $active-color; // 重点
|
||||||
|
.tab-text::after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 160rpx;
|
||||||
|
bottom: 10rpx;
|
||||||
|
width: 32rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #3CB5FB;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-selected::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: -12rpx;
|
||||||
|
bottom: 0;
|
||||||
|
width: 24rpx;
|
||||||
|
height: $tab-height;
|
||||||
|
border-top-left-radius: 48rpx;
|
||||||
|
background-color: $active-color;
|
||||||
|
transform: skewX(-15deg); // 重点
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-selected::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: -12rpx;
|
||||||
|
bottom: 0;
|
||||||
|
width: 24rpx;
|
||||||
|
height: $tab-height;
|
||||||
|
border-top-right-radius: 24rpx;
|
||||||
|
background-color: $active-color;
|
||||||
|
transform: skewX(15deg); // 重点
|
||||||
|
}
|
||||||
|
.not-selected {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-selected::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 12rpx;
|
||||||
|
bottom: 0;
|
||||||
|
width: 24rpx;
|
||||||
|
height: $tab-height;
|
||||||
|
background: $default-color;
|
||||||
|
border-bottom-left-radius: 24rpx;
|
||||||
|
transform: skewX(15deg); // 重点
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-selected::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 12rpx;
|
||||||
|
bottom: 0;
|
||||||
|
width: 24rpx;
|
||||||
|
height: $tab-height;
|
||||||
|
background: $default-color;
|
||||||
|
border-bottom-right-radius: 24rpx;
|
||||||
|
transform: skewX(-15deg); // 重点
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.error-tips{
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #EF3920;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
// padding-left: 30rpx;
|
||||||
|
.error-img{
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,158 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<u-navbar :border-bottom="false" :background="background"> </u-navbar>
|
||||||
|
<view class="flex-col group_3">
|
||||||
|
<h3 class="text_3">填写学校信息</h3>
|
||||||
|
<view class="flex-col group_4">
|
||||||
|
<view class="justify-between list-item group_5">
|
||||||
|
<text class="text_8">学历</text>
|
||||||
|
<u-input v-model="form.educational" placeholder="请选择学历" type="select" @click="show = true" />
|
||||||
|
<u-action-sheet :list="educationalList" v-model="show" @click="educationalSelect()" ></u-action-sheet>
|
||||||
|
</view>
|
||||||
|
<view class="justify-between list-item">
|
||||||
|
<text class="text_8">学校</text>
|
||||||
|
<u-input v-model="form.shool" placeholder="请选择学校" type="select" @click="show = true" />
|
||||||
|
</view>
|
||||||
|
<view class="justify-between list-item">
|
||||||
|
<text class="text_8">学院</text>
|
||||||
|
<u-input v-model="form.college" placeholder="请选择学院" type="select" @click="show = true" />
|
||||||
|
</view>
|
||||||
|
<view class="justify-between list-item">
|
||||||
|
<text class="text_8">专业</text>
|
||||||
|
<u-input v-model="form.major" placeholder="请选择专业" type="select" @click="show = true" />
|
||||||
|
<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback()" ></u-action-sheet>
|
||||||
|
</view>
|
||||||
|
<view class="justify-between list-item">
|
||||||
|
<text class="text_8">时间</text>
|
||||||
|
<u-input v-model="form.time" placeholder="请选择时间" type="select" @click="show = true" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-button shape="circle" class="button text-wrapper_1" type="primary"
|
||||||
|
>完成</u-button
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uButton from "../../../uview-ui/components/u-button/u-button.vue";
|
||||||
|
export default {
|
||||||
|
components: { uButton },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form:{
|
||||||
|
educational:'',//学历
|
||||||
|
shool:'',//学校
|
||||||
|
college:'',//学院
|
||||||
|
major:'',//专业
|
||||||
|
time:'',//时间
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
},
|
||||||
|
value: "",
|
||||||
|
show: false,
|
||||||
|
educationalList:[//学历选择列表
|
||||||
|
{
|
||||||
|
text:'专科',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text:'本科',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text:'专科',
|
||||||
|
}
|
||||||
|
],
|
||||||
|
actionSheetList: [
|
||||||
|
{
|
||||||
|
text: "男",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "女",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "保密",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
educationalSelect(index){
|
||||||
|
this.form.educational = this.actionSheetList[index].text;
|
||||||
|
},
|
||||||
|
actionSheetCallback(index) {
|
||||||
|
|
||||||
|
this.form.major = this.actionSheetList[index].text;
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/main/index/index",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
skip() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/main/index/index",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.page {
|
||||||
|
background: #fff;
|
||||||
|
height: 100%;
|
||||||
|
.text-wrapper_1 {
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#87e6fe 0%,
|
||||||
|
#5bc0fe 52%,
|
||||||
|
#2e9bff 100%
|
||||||
|
);
|
||||||
|
box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34);
|
||||||
|
border-radius: 0.23rem;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
margin: 0.6rem 0.15rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
padding-left: 0.16rem;
|
||||||
|
padding-top: 0.3rem;
|
||||||
|
.text_3 {
|
||||||
|
align-self: center;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.17rem;
|
||||||
|
}
|
||||||
|
.group_4 {
|
||||||
|
margin-top: 0.44rem;
|
||||||
|
.list-item {
|
||||||
|
padding: 0.1rem 0.2rem 0.09rem 0;
|
||||||
|
border-bottom: solid 0.005rem rgb(199, 199, 204);
|
||||||
|
.text_8 {
|
||||||
|
color: #000;
|
||||||
|
font-size: 0.18rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.38rem;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
.text_26 {
|
||||||
|
color: #000;
|
||||||
|
font-size: 0.17rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.group_5 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
<template>
|
||||||
|
<view class="recognition-result-page">
|
||||||
|
<u-navbar title="认证结果" :is-back="false"></u-navbar>
|
||||||
|
|
||||||
|
<view class="result-container">
|
||||||
|
<image
|
||||||
|
:src="isSuccess ? resultSuccess : resultError"
|
||||||
|
class="result-image"
|
||||||
|
mode="widthFix"
|
||||||
|
></image>
|
||||||
|
<text class="result-text">{{
|
||||||
|
isSuccess ? "认证通过" : "认证未通过"
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-container">
|
||||||
|
<button class="next-btn" @click="handleNext">
|
||||||
|
{{ isSuccess ? "进入系统" : "重新识别" }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import resultSuccess from "@/static/common/img/result-success.png";
|
||||||
|
import resultError from "@/static/common/img/result-error.png";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
resultSuccess,
|
||||||
|
resultError,
|
||||||
|
isSuccess: false,
|
||||||
|
verifyResult: null,
|
||||||
|
verifyInfo: null,
|
||||||
|
token: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 获取token参数
|
||||||
|
if (options && options.token) {
|
||||||
|
this.token = options.token;
|
||||||
|
console.log("获取到token:", this.token);
|
||||||
|
// 使用token查询认证结果
|
||||||
|
this.queryVerificationResult();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询认证结果
|
||||||
|
queryVerificationResult() {
|
||||||
|
if (!this.token) {
|
||||||
|
console.error("token为空，无法查询认证结果");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用API查询认证结果
|
||||||
|
this.$u.api
|
||||||
|
.getVerifyInfo(this.token)
|
||||||
|
.then((res) => {})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log("API调用过程中出错:", err);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleNext() {
|
||||||
|
if (this.isSuccess) {
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/main/index/index",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.toBaiduApi();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toBaiduApi() {
|
||||||
|
this.$u.api.getAPIToken().then((res) => {
|
||||||
|
const token = res.result.verify_token;
|
||||||
|
|
||||||
|
// 跳转到百度人脸核验页面
|
||||||
|
this.redirectToBaiduVerification(token);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
redirectToBaiduVerification(token) {
|
||||||
|
// 获取当前域名
|
||||||
|
const currentDomain = window.location.origin;
|
||||||
|
|
||||||
|
// 编码回调URL - 使用相对路径，让uni-app处理路由
|
||||||
|
// 百度人脸核验会在回调URL后附加verify_result和verify_info参数
|
||||||
|
const successUrl = encodeURIComponent(
|
||||||
|
`${currentDomain}/#/pages/login/recognitionResult/recognitionResult?token=${token}`
|
||||||
|
);
|
||||||
|
const failedUrl = encodeURIComponent(
|
||||||
|
`${currentDomain}/#/pages/login/recognitionResult/recognitionFailed?token=${token}`
|
||||||
|
);
|
||||||
|
|
||||||
|
// 构建跳转URL
|
||||||
|
const verifyUrl = `https://brain.baidu.com/face/print/verify/verify?token=${token}&successUrl=${successUrl}&failedUrl=${failedUrl}`;
|
||||||
|
|
||||||
|
console.log("跳转到百度人脸核验页面:", verifyUrl);
|
||||||
|
|
||||||
|
// 直接跳转到百度人脸核验页面
|
||||||
|
window.location.href = verifyUrl;
|
||||||
|
|
||||||
|
return;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.recognition-result-page {
|
||||||
|
padding: 0 24rpx;
|
||||||
|
|
||||||
|
.result-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 130rpx 0 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.result-image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-text {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-container {
|
||||||
|
.next-btn {
|
||||||
|
background-color: #45b5ff;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
<template>
|
||||||
|
<view class="recognition-result-page">
|
||||||
|
<u-navbar title="认证结果" :is-back="false"></u-navbar>
|
||||||
|
|
||||||
|
<view class="result-container">
|
||||||
|
<image
|
||||||
|
:src="isSuccess ? resultSuccess : resultError"
|
||||||
|
class="result-image"
|
||||||
|
mode="widthFix"
|
||||||
|
></image>
|
||||||
|
<text class="result-text">{{
|
||||||
|
isSuccess ? "认证通过" : "认证未通过"
|
||||||
|
}}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-container">
|
||||||
|
<button class="next-btn" @click="handleNext">
|
||||||
|
{{ isSuccess ? "进入系统" : "重新识别" }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import resultSuccess from "@/static/common/img/result-success.png";
|
||||||
|
import resultError from "@/static/common/img/result-error.png";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
resultSuccess,
|
||||||
|
resultError,
|
||||||
|
isSuccess: true,
|
||||||
|
token: null,
|
||||||
|
userInfo: {
|
||||||
|
realName: "", // 姓名
|
||||||
|
// idCard: "", // 身份证号
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
// 获取token参数
|
||||||
|
if (options && options.token) {
|
||||||
|
this.token = options.token;
|
||||||
|
console.log("获取到token:", this.token);
|
||||||
|
// 使用token查询认证结果
|
||||||
|
this.queryVerificationResult();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询认证结果
|
||||||
|
queryVerificationResult() {
|
||||||
|
if (!this.token) {
|
||||||
|
console.log("token为空，无法查询认证结果");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 调用API查询认证结果
|
||||||
|
this.$u.api.getVerifyInfo(this.token).then((res) => {
|
||||||
|
const result = res.result.idcard_confirm;
|
||||||
|
this.userInfo.realName = result.name;
|
||||||
|
// this.userInfo.idCard = result.idcard_number;
|
||||||
|
// console.log("this.userInfo", this.userInfo);
|
||||||
|
|
||||||
|
if (result.idcard_number) {
|
||||||
|
this.getSchoolInfo(result.idcard_number);
|
||||||
|
this.updateCardFn(result.idcard_number);
|
||||||
|
} else {
|
||||||
|
this.$u.vuex("vuex_userInfo", this.userInfo);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// .catch((err) => {
|
||||||
|
// console.log("API调用过程中出错:", err);
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据身份证号获取学校信息
|
||||||
|
getSchoolInfo(card) {
|
||||||
|
this.$u.api
|
||||||
|
.getInfoByCard({
|
||||||
|
card,
|
||||||
|
// card: "362429199209242513",
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
// console.log("返回结果:", res);
|
||||||
|
if (res.length > 0) {
|
||||||
|
this.userInfo = {
|
||||||
|
...this.userInfo,
|
||||||
|
...res[0],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$u.vuex("vuex_userInfo", this.userInfo);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 更新idCard
|
||||||
|
updateCardFn(card) {
|
||||||
|
this.$u.api
|
||||||
|
.updateCard({
|
||||||
|
userId: this.vuex_user.id,
|
||||||
|
idCode: card,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
console.log("返回结果:", res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleNext() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/roleSelection",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.recognition-result-page {
|
||||||
|
padding: 0 24rpx;
|
||||||
|
|
||||||
|
.result-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 130rpx 0 36rpx;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.result-image {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
margin-bottom: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-text {
|
||||||
|
font-family: PingFang SC, PingFang SC;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-container {
|
||||||
|
.next-btn {
|
||||||
|
background-color: #45b5ff;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,633 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<!-- <image src="/static/common/img/16530269846087107196.png" class="image" /> -->
|
||||||
|
<u-navbar title="注册"></u-navbar>
|
||||||
|
<view class="flex-col group">
|
||||||
|
<text class="text">手机号注册</text>
|
||||||
|
<view class="flex-col group_7">
|
||||||
|
<view class="flex-col">
|
||||||
|
<!-- <text class="text_1">手机号</text> -->
|
||||||
|
<view class="text-wrapper flex-row view" style="padding: 0">
|
||||||
|
<u-input type="number" v-model="userName" placeholder="请输入手机号" maxlength="11" :disabled="disabled" />
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_6" v-show="showCap">
|
||||||
|
<view class="text-wrapper flex-row view" style="padding: 0">
|
||||||
|
<u-input type="text" v-model="captchaCode" placeholder="请输入图形验证码" />
|
||||||
|
<image :src="captchaImg" class="captcha-img" @click="refreshCaptcha" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_6">
|
||||||
|
<!-- <text class="text_1">短信验证码</text> -->
|
||||||
|
<view class="text-wrapper flex-row view" style="padding: 0">
|
||||||
|
<u-input type="text" v-model="passWord" placeholder="请输入短信验证码" />
|
||||||
|
<u-button style='background:transparent;' class="custom-style" :disabled="!(send == '获取验证码')" @click="sendCode">{{ send }}
|
||||||
|
</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-button class="flex-col items-center text-wrapper_1" throttle-time="1000" type="primary" shape="circle"
|
||||||
|
@click="login"><text class="text_7">注册</text></u-button>
|
||||||
|
<view class="justify-center group_1">
|
||||||
|
<text class="text_8">已有账号</text>
|
||||||
|
<navigator class="text_9" url="/pages/login/login/login">立即登录</navigator>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="flex-row group_2">
|
||||||
|
<u-checkbox-group class="section_1" :size="34">
|
||||||
|
<u-checkbox v-model="agreement"> </u-checkbox>
|
||||||
|
</u-checkbox-group>
|
||||||
|
<view class="group_3">
|
||||||
|
<text class="text_10">已阅读并同意</text>
|
||||||
|
<text class="text_11">《用户服务协议》</text>
|
||||||
|
<text class="text_12">＆</text>
|
||||||
|
<text class="text_13">《用户隐私保护政策》</text>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
<u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import md5 from "js-md5";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
userName: "",
|
||||||
|
passWord: "",
|
||||||
|
agreement: false,
|
||||||
|
send: "获取验证码",
|
||||||
|
disabled: false,
|
||||||
|
captchaCode: "", // 图形验证码
|
||||||
|
captchaImg: "", // 验证码图片
|
||||||
|
captchaId: "", // 验证码ID
|
||||||
|
showCap: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
// this.refreshCaptcha();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 刷新验证码
|
||||||
|
refreshCaptcha() {
|
||||||
|
const timestamp = Date.now();
|
||||||
|
this.captchaId = timestamp;
|
||||||
|
uni.request({
|
||||||
|
url: 'http://sl.vrgon.com:8003/api/Token/Captcha?id=' + timestamp,
|
||||||
|
method: 'GET',
|
||||||
|
responseType: 'arraybuffer',
|
||||||
|
headers: {
|
||||||
|
'Accept': '*/*',
|
||||||
|
},
|
||||||
|
success: (res) => {
|
||||||
|
if (res.statusCode === 200 && res.data) {
|
||||||
|
// res.data 是 ArrayBuffer 类型，将其转换为 Blob
|
||||||
|
const blob = new Blob([res.data], { type: 'image/gif' }); // 根据实际图片类型调整
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = () => {
|
||||||
|
// 将 Blob 读取为 Data URL (Base64 编码的图片)
|
||||||
|
this.captchaImg = reader.result;
|
||||||
|
};
|
||||||
|
reader.onerror = (e) => {
|
||||||
|
console.error("FileReader error:", e);
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '图片转换失败',
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(blob);
|
||||||
|
} else {
|
||||||
|
console.error('获取验证码失败，状态码或数据异常:', res);
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '获取验证码失败',
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
console.error('验证码请求失败:', err);
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '获取验证码失败，请检查网络或CORS设置',
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取验证码
|
||||||
|
sendCode() {
|
||||||
|
var reg = new RegExp("^[1][3,4,5,6,7,8,9][0-9]{9}$", "g"); //手机号
|
||||||
|
if (this.userName === "" || !reg.test(this.userName)) {
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: "请输入正确的手机号码",
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if (!this.captchaCode) {
|
||||||
|
// this.$refs.uToast.show({
|
||||||
|
// title: "请输入图形验证码",
|
||||||
|
// type: "error",
|
||||||
|
// });
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 生成13位时间戳
|
||||||
|
const timestamp = Date.now();
|
||||||
|
// 生成签名
|
||||||
|
const base64Key = btoa('xiaoyout!#@12345');
|
||||||
|
const signStr = this.userName + timestamp + base64Key;
|
||||||
|
const sign = md5(signStr);
|
||||||
|
|
||||||
|
this.$u.apiList.GetPhoneValidateCode({
|
||||||
|
phone: this.userName,
|
||||||
|
t: timestamp.toString(),
|
||||||
|
sign: sign,
|
||||||
|
captchaCode: this.showCap ? this.captchaCode : '' ,
|
||||||
|
captchaId: this.showCap ? this.captchaId.toString() : ''
|
||||||
|
}).then((res)=>{
|
||||||
|
//中间数字加密
|
||||||
|
// let result =this.userName.replace(this.userName.substring(3,7),"****")
|
||||||
|
// this.userName = result
|
||||||
|
this.disabled = true
|
||||||
|
// this.$tips("发送成功");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: "发送成功",
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
var second = 60;
|
||||||
|
this.send = second + "秒后重试";
|
||||||
|
var time = setInterval(() => {
|
||||||
|
this.send = second + "秒后重试";
|
||||||
|
second--;
|
||||||
|
if (second <= 0) {
|
||||||
|
this.disabled = false
|
||||||
|
this.send = "获取验证码";
|
||||||
|
clearInterval(time);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
.catch((err)=>{
|
||||||
|
console.log('err-----',err)
|
||||||
|
if(err?.data?.needcap && !this.showCap) {
|
||||||
|
this.showCap = true
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '请输入图形验证码',
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
this.refreshCaptcha()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.error,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
this.refreshCaptcha()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
login() {
|
||||||
|
// uni.navigateTo({
|
||||||
|
// url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName,
|
||||||
|
// });
|
||||||
|
// return
|
||||||
|
var reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
|
||||||
|
if (this.userName === "" || !reg.test(this.userName)) {
|
||||||
|
// this.$tips("请输入正确的手机号码", "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: "请输入正确的手机号码",
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.passWord === "") {
|
||||||
|
// return this.$tips("请输入验证码", "error");
|
||||||
|
return this.$refs.uToast.show({
|
||||||
|
title: "请输入验证码",
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// if (!this.agreement) {
|
||||||
|
// return this.$tips("请同意用户服务协议及用户隐私保护政策", "error");
|
||||||
|
// }
|
||||||
|
const data = {
|
||||||
|
phone:this.userName,
|
||||||
|
code : this.passWord
|
||||||
|
}
|
||||||
|
this.$u.apiList.IsPhoneCode(data).then((res)=>{
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/confirmPwd/confirmPwd?phone="+this.userName+"&code="+this.passWord,
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
.catch((err)=>{
|
||||||
|
// this.$tips(err.error, "error");
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: err.error,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.custom-style {
|
||||||
|
color: #3CB5FB !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
height: 70rpx !important;
|
||||||
|
line-height: 60rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-style::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding-bottom: 0.015rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.image {
|
||||||
|
flex-shrink: 0;
|
||||||
|
align-self: flex-start;
|
||||||
|
width: 102%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
padding: 0.7rem 0.29rem;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
align-self: left;
|
||||||
|
// color: rgb(46, 155, 255);
|
||||||
|
color: #000;
|
||||||
|
font-size: 0.22rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.17rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
margin-top: 0.29rem;
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
border: solid 2rpx #dcdfe6;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
background: #f6f8fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
margin-left: 0.01rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx 50rpx !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-left: 0.01rem;
|
||||||
|
margin-top: 0.13rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.13rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_1 {
|
||||||
|
margin: 50rpx 0rpx 40rpx;
|
||||||
|
padding: 50rpx 0 50rpx;
|
||||||
|
// background-image: linear-gradient(90deg, rgb(135, 230, 254) 0%, rgb(91, 192, 254) 52%, rgb(46, 155, 255) 100%);
|
||||||
|
background: #3cb4fb;
|
||||||
|
box-shadow: 0px 6rpx 9rpx rgba(38, 122, 199, 0.34);
|
||||||
|
border-radius: 100rpx;
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_1 {
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-left: 0.035rem;
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
margin-top: 0.36rem;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.section_1 {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 0.17rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-left: 0.11rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
line-height: 0.18rem;
|
||||||
|
font-size: 0;
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
color: rgb(153, 153, 153);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
color: rgb(102, 102, 102);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_13 {
|
||||||
|
color: rgb(25, 140, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
font-family: PingFang;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.captcha-img {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- <template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<view class="flex-col group">
|
||||||
|
<text class="text">注册账号</text>
|
||||||
|
<view class="flex-col group_1">
|
||||||
|
<view class="flex-col group_2">
|
||||||
|
<u-select
|
||||||
|
@click="show = true"
|
||||||
|
:mode="'single-column'"
|
||||||
|
v-model="show"
|
||||||
|
:list="shoolList"
|
||||||
|
@confirm="confirm"
|
||||||
|
@cancel="cancel"
|
||||||
|
></u-select>
|
||||||
|
<view class="justify-between section_1" @click="show = true">
|
||||||
|
<text
|
||||||
|
:style="{ color: this.shoolname !== '' ? '#000' : '#c1c4cc' }"
|
||||||
|
>{{ this.shoolname != "" ? this.shoolname : "请选择学校" }}</text
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
src="/static/common/img/select.png"
|
||||||
|
class="image_1"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="text-wrapper flex-col">
|
||||||
|
<u-input
|
||||||
|
v-model="userName"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="text-wrapper flex-col view_1">
|
||||||
|
<u-input
|
||||||
|
v-model="passWord"
|
||||||
|
type="password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
<view class="text-wrapper flex-col">
|
||||||
|
<u-input
|
||||||
|
v-model="twopassWord"
|
||||||
|
type="password"
|
||||||
|
placeholder="请确认密码"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-row group_3">
|
||||||
|
<view class="flex-col text-wrapper_1">
|
||||||
|
<u-input
|
||||||
|
v-model="Code"
|
||||||
|
type="text"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
/>
|
||||||
|
<text class="text_6"></text>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col items-end text-wrapper_2">
|
||||||
|
<text>6789</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<u-button class="flex-col items-center text-wrapper_3" @click="register" :throttle-time='1000'>注册</u-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
userName: "",
|
||||||
|
passWord: "",
|
||||||
|
twopassWord: "",
|
||||||
|
Code: "",
|
||||||
|
shoolname: "",
|
||||||
|
shoolList: [
|
||||||
|
{
|
||||||
|
value: "1",
|
||||||
|
label: "学校一",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "2",
|
||||||
|
label: "学校二",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "3",
|
||||||
|
label: "学校三",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "4",
|
||||||
|
label: "学校四",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
confirm(e) {
|
||||||
|
this.shoolname = "";
|
||||||
|
e.map((val, index) => {
|
||||||
|
this.shoolname += this.shoolname == "" ? val.label : "-" + val.label;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
cancel(e) {
|
||||||
|
;
|
||||||
|
},
|
||||||
|
register(){
|
||||||
|
uni.showLoading({
|
||||||
|
title: '注册中'
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(()=>{
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '注册成功',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
},1000)
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
.text-wrapper {
|
||||||
|
margin-top: 0.095rem;
|
||||||
|
padding: 0.03rem 0.17rem;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
}
|
||||||
|
.text_2 {
|
||||||
|
margin-left: 0.17rem;
|
||||||
|
}
|
||||||
|
.page {
|
||||||
|
padding: 0.045rem 0 1.5rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.image {
|
||||||
|
margin-left: 0.26rem;
|
||||||
|
margin-right: 0.23rem;
|
||||||
|
width: 3.27rem;
|
||||||
|
height: 0.09rem;
|
||||||
|
}
|
||||||
|
.group {
|
||||||
|
margin-top: 0.72rem;
|
||||||
|
padding-left: 0.34rem;
|
||||||
|
padding-right: 0.31rem;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
margin-left: 0.045rem;
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
font-size: 0.24rem;
|
||||||
|
line-height: 0.23rem;
|
||||||
|
letter-spacing: 0.024rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.group_1 {
|
||||||
|
margin-top: 0.67rem;
|
||||||
|
}
|
||||||
|
.text-wrapper_3 {
|
||||||
|
margin-top: 0.54rem;
|
||||||
|
padding: 0.13rem 0;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.03rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(46, 155, 255, 0.5);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
}
|
||||||
|
.group_2 {
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.group_3 {
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
}
|
||||||
|
.section_1 {
|
||||||
|
padding: 0.13rem 0.17rem;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
}
|
||||||
|
.view_1 {
|
||||||
|
margin-top: 0.09rem;
|
||||||
|
}
|
||||||
|
.text-wrapper_1 {
|
||||||
|
padding: 0 0.17rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
.text-wrapper_2 {
|
||||||
|
margin-left: 0.08rem;
|
||||||
|
padding: 0.14rem 0.1rem ;
|
||||||
|
color: rgb(106, 134, 241);
|
||||||
|
font-size: 0.18rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.036rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(211, 220, 255, 0.5);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
.image_1 {
|
||||||
|
margin-right: 0.035rem;
|
||||||
|
margin-top: 0.05rem;
|
||||||
|
width: 0.14rem;
|
||||||
|
height: 0.09rem;
|
||||||
|
}
|
||||||
|
.text_6 {
|
||||||
|
margin-left: 0.17rem;
|
||||||
|
}
|
||||||
|
</style> -->
|
||||||
|
|
@ -0,0 +1,242 @@
|
||||||
|
<template>
|
||||||
|
<view class="flex-col page">
|
||||||
|
<u-navbar
|
||||||
|
:custom-back="backFn"
|
||||||
|
:background="background"
|
||||||
|
:border-bottom="false"
|
||||||
|
title=""
|
||||||
|
></u-navbar>
|
||||||
|
<view>
|
||||||
|
<view class="title">
|
||||||
|
<h3>请选择登录角色</h3>
|
||||||
|
<text class="tips"
|
||||||
|
>温馨提示：因为系统中存在多个角色，请选择角色后再登录</text
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="selectList">
|
||||||
|
<view
|
||||||
|
class="item flex-row"
|
||||||
|
:class="{ 'item-selected': [0,2].includes(vuex_user.userType) }"
|
||||||
|
@click="goStudent"
|
||||||
|
>
|
||||||
|
<view class="name">
|
||||||
|
<text class="text">我是学生</text>
|
||||||
|
<text class="text text-en">Student</text>
|
||||||
|
</view>
|
||||||
|
<view class="student"></view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="item flex-row"
|
||||||
|
:class="{ 'item-selected': vuex_user.userType == '1' }"
|
||||||
|
@click="goTeacher"
|
||||||
|
>
|
||||||
|
<view class="name">
|
||||||
|
<text class="text">我是教师</text>
|
||||||
|
<text class="text text-en">Teacher</text>
|
||||||
|
</view>
|
||||||
|
<view class="teacher"></view>
|
||||||
|
</view>
|
||||||
|
<!-- <view
|
||||||
|
class="item flex-row"
|
||||||
|
:class="{ 'item-selected': vuex_user.userType == '2' }"
|
||||||
|
@click="goGraduate"
|
||||||
|
>
|
||||||
|
<view class="name">
|
||||||
|
<text class="text">我是毕业生</text>
|
||||||
|
<text class="text text-en">Graduate</text>
|
||||||
|
</view>
|
||||||
|
<view class="graduate"></view>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import uButton from "../../uview-ui/components/u-button/u-button.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { uButton },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
background: {
|
||||||
|
backgroundColor: "transparent",
|
||||||
|
},
|
||||||
|
source: "",
|
||||||
|
userRole: uni.getStorageSync("role"),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(e) {
|
||||||
|
console.log(e, "e");
|
||||||
|
this.source = e.source;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
backFn() {
|
||||||
|
console.log(this.source, "source---");
|
||||||
|
if (this.source === "my") {
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/my/my/my",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.source === "login") {
|
||||||
|
this.$u.vuex("vuex_msgList", "");
|
||||||
|
this.$u.vuex("vuex_user", "");
|
||||||
|
this.$u.vuex("vuex_token", "");
|
||||||
|
this.$u.vuex("vuex_userInfo", "");
|
||||||
|
uni.clearStorage();
|
||||||
|
this.$u.route({
|
||||||
|
url: "/pages/login/login/login",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
async goTeacher() {
|
||||||
|
const res = await this.$u.apiList.SelectUserTypeApi();
|
||||||
|
console.log(res, "res---");
|
||||||
|
const jzgFlag = res.jzgFlag;
|
||||||
|
// const studentFlag = res.studentFlag
|
||||||
|
if (jzgFlag === false) {
|
||||||
|
uni.setStorageSync("role", "teacher");
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/teacherCertification",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const req = {
|
||||||
|
userType: 1,
|
||||||
|
};
|
||||||
|
const result = await this.$u.apiList.UpdateUserTypeApi(req);
|
||||||
|
console.log(result, "result---");
|
||||||
|
this.vuex_user.userType = 1;
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/my/my/my",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async goStudent() {
|
||||||
|
const res = await this.$u.apiList.SelectUserTypeApi();
|
||||||
|
console.log(res, "res---");
|
||||||
|
// const jzgFlag = res.jzgFlag;
|
||||||
|
const studentFlag = res.studentFlag;
|
||||||
|
if (studentFlag === false) {
|
||||||
|
uni.setStorageSync("role", "student");
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/perfect/perfect",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const req = {
|
||||||
|
userType: 0,
|
||||||
|
};
|
||||||
|
const result = await this.$u.apiList.UpdateUserTypeApi(req);
|
||||||
|
console.log(result, "result---");
|
||||||
|
this.vuex_user.userType = 0;
|
||||||
|
uni.switchTab({
|
||||||
|
url: "/pages/my/my/my",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async goGraduate() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "/pages/login/graduateCertification/graduateCertification",
|
||||||
|
});
|
||||||
|
// uni.$u.toast("功能开发中");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page {
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(80, 123, 244, 0) 80%,
|
||||||
|
rgba(95, 147, 238, 0.3) 100%
|
||||||
|
);
|
||||||
|
height: 100%;
|
||||||
|
.button {
|
||||||
|
margin: 0.6rem 0.15rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectList {
|
||||||
|
width: calc(100% - 30rpx);
|
||||||
|
margin: 0 auto;
|
||||||
|
.item {
|
||||||
|
height: 278rpx;
|
||||||
|
padding: 15rpx;
|
||||||
|
margin-bottom: 15rpx;
|
||||||
|
box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
|
||||||
|
border-radius: 32rpx;
|
||||||
|
border: 4rpx solid #e7ecf0;
|
||||||
|
.name {
|
||||||
|
width: 60%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 20rpx;
|
||||||
|
padding-left: 100rpx;
|
||||||
|
.text {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
font-size: 48rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
// margin-right: 200rpx;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
}
|
||||||
|
.text-en {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #666;
|
||||||
|
letter-spacing: 2rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-selected {
|
||||||
|
border: 4rpx solid #8ad3fd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
width: calc(100% - 60rpx);
|
||||||
|
margin: 70rpx auto 100rpx;
|
||||||
|
h3 {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #000;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
.tips {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.teacher {
|
||||||
|
width: 256rpx;
|
||||||
|
height: 256rpx;
|
||||||
|
-moz-background-image: url("/static/common/img/teacher.png");
|
||||||
|
-webkit-background-image: url("/static/common/img/teacher.png");
|
||||||
|
background-image: url("/static/common/img/teacher.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.student {
|
||||||
|
width: 256rpx;
|
||||||
|
height: 256rpx;
|
||||||
|
-moz-background-image: url("/static/common/img/student.png");
|
||||||
|
-webkit-background-image: url("/static/common/img/student.png");
|
||||||
|
background-image: url("/static/common/img/student.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.graduate {
|
||||||
|
width: 256rpx;
|
||||||
|
height: 256rpx;
|
||||||
|
-moz-background-image: url("/static/common/img/graduate.png");
|
||||||
|
-webkit-background-image: url("/static/common/img/graduate.png");
|
||||||
|
background-image: url("/static/common/img/graduate.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,234 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-navbar title="管理列表" :border-bottom="false"></u-navbar>
|
||||||
|
<scroll-view scroll-y="true" class="scroll">
|
||||||
|
<view class="flex-col list" v-if='list.length'>
|
||||||
|
<view class="flex-row list_item" v-for="(item, i) in list" @click="GoChat(item)" :key="i">
|
||||||
|
<u-avatar class="image" :show-sex="vuex_msgList.indexOf(item.fromUserId+'admin,')>=0" sex-icon=""
|
||||||
|
sex-bg-color="red" :src="$u.http.config.imgUrl+item.fromUserHead"></u-avatar>
|
||||||
|
<view class="right-section flex-col">
|
||||||
|
<view class="top-group justify-between view_1">
|
||||||
|
<view class="flex-row">
|
||||||
|
<text class="text_1">{{item.fromUserName}}</text>
|
||||||
|
<view class="right-text-wrapper flex-col items-end">
|
||||||
|
<text class="text_3">{{item.schoolName}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
v-if='new Date(item.sendDate) - 0 + (3600000*24)> new Date()&&new Date(item.sendDate).getDate()==new Date().getDate()'
|
||||||
|
class="text_5">{{ item.sendDate.slice(10,16)}}</text>
|
||||||
|
<text v-else class="text_5">{{ item.sendDate.slice(0,10)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-group justify-between">
|
||||||
|
<text class="text_7">{{item.message}}</text>
|
||||||
|
<text class="text_9" v-if="item.messageState == 0">未读</text>
|
||||||
|
<text class="text_9" v-if="item.messageState == 1">已读</text>
|
||||||
|
<text class="text_10" v-if="item.messageState == 2">待回复</text>
|
||||||
|
<text class="text_10" v-if="item.messageState == 3">回复中...</text>
|
||||||
|
<text class="text_10" v-if="item.messageState == 4">已回复</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else style='padding-top:30vh'>
|
||||||
|
<!-- <u-empty text="暂无消息列表" mode="message"></u-empty> -->
|
||||||
|
<no-data text="暂无消息列表"></no-data>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<u-toast ref="uToast" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NoData from 'components/NoData.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
NoData
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {},
|
||||||
|
onShow() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 去聊天
|
||||||
|
GoChat(data) {
|
||||||
|
//管理员聊天绑定
|
||||||
|
this.$u.api.toBind({
|
||||||
|
manageUser: this.vuex_user.id,
|
||||||
|
lockUser: data.fromUserId
|
||||||
|
}).then(res => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '../dialogBox/dialogBox?id=admin' + '&shoolid=' + data.schoolId + '&fromid=' + data
|
||||||
|
.fromUserId
|
||||||
|
});
|
||||||
|
}).catch(err=>{
|
||||||
|
/* uni.showToast({
|
||||||
|
title: '已有老师回复',
|
||||||
|
duration: 2000,
|
||||||
|
icon:'none'
|
||||||
|
}); */
|
||||||
|
this.$refs.uToast.show({
|
||||||
|
title: '已有老师回复',
|
||||||
|
type: 'warning',
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.$u.api.getAdminList().then(res => {
|
||||||
|
this.list = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//返回上一级
|
||||||
|
router() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '../../message/msgList/msgList'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .u-avatar__sex {
|
||||||
|
width: 0.1rem !important;
|
||||||
|
height: 0.1rem !important;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 0.44rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
border-bottom: 1px solid rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-section {
|
||||||
|
margin-left: 0.14rem;
|
||||||
|
padding: 0.13rem 0.015rem 0.15rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
height: 0.66rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.list_item:last-child .right-section {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-group {
|
||||||
|
margin-top: 0.09rem;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-group {
|
||||||
|
margin-top: 0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
margin-top: 0.02rem;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.095rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
margin-top: 0.035rem;
|
||||||
|
color: rgb(177, 179, 182);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-right: 0.085rem;
|
||||||
|
margin-bottom: 0.035rem;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 0.5rem;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
color: rgb(177, 179, 182);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 0.5rem;
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
margin-top: 0.035rem;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
margin: 0.02rem 0;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 0.65rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
margin-left: 0.045rem;
|
||||||
|
padding: 0.035rem 0.08rem;
|
||||||
|
color: rgb(115, 129, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding-top: 0.01rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_1 {
|
||||||
|
margin-top: initial;
|
||||||
|
width: initial;
|
||||||
|
height: initial;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,673 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-navbar back-text="" title="新增关注"></u-navbar>
|
||||||
|
<scroll-view scroll-y="true" class="scroll">
|
||||||
|
<view class="guanzhu">
|
||||||
|
<view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY&& false">
|
||||||
|
<view class="flex-col section_4">
|
||||||
|
<view class="flex-row section_5">
|
||||||
|
<text class="text_3">待认证，请先完成认证~</text>
|
||||||
|
<text class="text_4" @click="onAuto">去认证 >></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_3">
|
||||||
|
<view class="flex-col">
|
||||||
|
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
|
||||||
|
</view>
|
||||||
|
<text class="text_5">暂无数据，请尽快认证补充资料~</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_2" v-else>
|
||||||
|
<view class="flex-col list">
|
||||||
|
<view class="list-item flex-row group_3" v-for="(item, index) in UserFollowList" :key='index'
|
||||||
|
@click='toDetail(item.carewUserId, item.userRole, item.carewUserHead)'>
|
||||||
|
<u-avatar :src="$u.http.config.imgUrl + item.carewUserHead" class="text_3 image_1"></u-avatar>
|
||||||
|
<view class="bottom-text-wrapper justify-between view_1">
|
||||||
|
<view class="">
|
||||||
|
<text class="text_5 text_7"><text>{{ item.carewUserName }}</text><text>{{
|
||||||
|
"(" + item.carewName +
|
||||||
|
")" }}</text></text>
|
||||||
|
<view class="center-text-wrapper flex-col items-end">
|
||||||
|
<text class="text_8">{{ item.school }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if='item.carewType == 2 && item.carewName != "管理员"'
|
||||||
|
class="right-text-wrapper flex-col items-center">
|
||||||
|
<text class="text_10">互相关注</text>
|
||||||
|
</view>
|
||||||
|
<view v-if='item.carewType == 1 && item.carewName != "管理员"'
|
||||||
|
class="right-text-wrapper flex-col items-center view_21">
|
||||||
|
<text class="text_10">已关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!UserFollowList.length"
|
||||||
|
style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
||||||
|
<image src="/static/common/img/empty.png" class="image" />
|
||||||
|
<view style="color:grey;margin-top: -5vh;">暂无关注</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import noData from '@/components/NoData.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
noData
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
UserFollowList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// this.getList()
|
||||||
|
//接收系统消息
|
||||||
|
this.$connection.on("SystemMessage", (title, content, time) => {
|
||||||
|
if (this.route.indexOf('sysList') >= 0) {
|
||||||
|
this.list.unshift({
|
||||||
|
messageDate: time,
|
||||||
|
title: title,
|
||||||
|
message: content
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.FollowList()
|
||||||
|
|
||||||
|
if (this.vuex_msgList) {
|
||||||
|
var msgList = this.vuex_msgList;
|
||||||
|
msgList = msgList.replace('SystemMessage,', '')
|
||||||
|
this.$u.vuex('vuex_msgList', msgList)
|
||||||
|
if (!msgList) {
|
||||||
|
var tab = this.vuex_tabbar;
|
||||||
|
tab[1].isDot = false;
|
||||||
|
this.$u.vuex('vuex_tabbar', tab);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
FollowList() {
|
||||||
|
this.$u.api.getFollowList().then(res => {
|
||||||
|
|
||||||
|
this.UserFollowList = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toDetail(id, role, head) {
|
||||||
|
if (role == 0) {
|
||||||
|
this.$u.route({
|
||||||
|
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id + '&type=0'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "../dialogBox/dialogBox?id=" + id + '&chatType=1&type=0&head=' + head,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.$u.api.getSysList().then(res => {
|
||||||
|
this.list = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//返回上一级
|
||||||
|
router() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '../../message/msgList/msgList'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.scroll {
|
||||||
|
// background-color: rgb(246, 247, 250);
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 0.44rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-title {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #F6F8F9;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-time {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 5rpx 0;
|
||||||
|
// align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
// align-self: center;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.095rem;
|
||||||
|
// letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section {
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
// letter-spacing: 0.018rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.015rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
color: #908a8a;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
// letter-spacing: 0.01rem;
|
||||||
|
// text-indent: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-left: 0.015rem;
|
||||||
|
text-indent: 0.3rem;
|
||||||
|
display: block;
|
||||||
|
color: #908a8a;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0rem 0.15rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.guanzhu {
|
||||||
|
.list-item {
|
||||||
|
padding: 0.14rem 0 0.1rem;
|
||||||
|
align-self: flex-end;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
width: 3.02rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-text-wrapper {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
padding: 0.035rem 0;
|
||||||
|
// color: rgb(115, 129, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
// background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
color: #3CB5FB;
|
||||||
|
background-color: rgba(60,181,251,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-text-wrapper {
|
||||||
|
padding: 0.035rem 0.08rem;
|
||||||
|
color: #3CB5FB;
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(60,181,251,0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
// margin-right: 0.06rem;
|
||||||
|
// margin-top: 0.03rem;
|
||||||
|
// margin-left: 0.06rem;
|
||||||
|
// padding: 0.085rem 0.08rem;
|
||||||
|
color: #3CB5FB;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 58rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
// background-color: rgb(46, 155, 255);
|
||||||
|
border-radius: 0.15rem;
|
||||||
|
border: 2rpx #3CB5FB solid;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
margin-left: 0.05rem;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_14 {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
// padding: 0.11rem 0 4.94rem;
|
||||||
|
// flex: 1 1 auto;
|
||||||
|
// overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
// margin-left: 0.17rem;
|
||||||
|
padding: 0.11rem 0 0.12rem;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.18rem;
|
||||||
|
line-height: 0.17rem;
|
||||||
|
letter-spacing: 0.018rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
background: #6574fc;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
text {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {}
|
||||||
|
|
||||||
|
.text_2 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
// box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
// padding-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_4 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
margin-top: 0.015rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_5 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_8 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_9 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
// margin-top: 0.12rem;
|
||||||
|
margin-top: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_1 {
|
||||||
|
margin-top: initial;
|
||||||
|
// padding: 0.1rem 0;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.08rem;
|
||||||
|
margin-right: 0.04rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_2 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_4 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.14rem 0 0.1rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_3 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_8 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.13rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_4 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_12 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.17rem 0 0.08rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_5 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_16 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.15rem 0 0.11rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_6 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_19 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.18rem 0 0.18rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
height: 0.67rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: initial;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
// letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
text:nth-child(1) {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 0.9rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_26 {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: initial;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_20 {
|
||||||
|
left: -0.03rem;
|
||||||
|
bottom: 0.075rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_21 {
|
||||||
|
// margin-right: 0.06rem;
|
||||||
|
// margin-top: initial;
|
||||||
|
// padding: 0.09rem 0 0.06rem;
|
||||||
|
color: rgb(73, 76, 87);
|
||||||
|
background-color: initial;
|
||||||
|
border: solid 0.01rem rgb(185, 185, 185);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.renzheng {
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
|
||||||
|
.section_4 {
|
||||||
|
padding: 0.33rem 0 0.34rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
|
||||||
|
.section_5 {
|
||||||
|
margin-left: 0.18rem;
|
||||||
|
margin-right: 0.24rem;
|
||||||
|
padding: 0.2rem 0.18rem 0.18rem 0.24rem;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
justify-between: space-between;
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(160, 162, 172);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_4 {
|
||||||
|
margin-left: 0.05rem;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-top: 0.76rem;
|
||||||
|
padding-left: 0.8rem;
|
||||||
|
padding-right: 0.69rem;
|
||||||
|
color: rgb(163, 182, 202);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.02rem;
|
||||||
|
margin-top: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
margin-right: 0.14rem;
|
||||||
|
width: 2.12rem;
|
||||||
|
height: 1.89rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,438 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-navbar title="互动消息" :border-bottom="false"></u-navbar>
|
||||||
|
<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" :is-scroll="false"
|
||||||
|
:active-item-style="{ color: '#3CB5FB', fontSize: '0.15rem' }" :bar-style="{ background: '#3CB5FB' }"
|
||||||
|
@change="tabsChange"></u-tabs-swiper>
|
||||||
|
<scroll-view scroll-y="true" class="scroll">
|
||||||
|
<view class="flex-col list" v-if='list.length'>
|
||||||
|
<template v-for="(item, i) in list">
|
||||||
|
<view v-if='item.interType != 3' class="list-item flex-col section_4" :key="i">
|
||||||
|
<view class="image_2 flex-row view_14">
|
||||||
|
<u-avatar :src="$u.http.config.imgUrl + item.userHead"
|
||||||
|
@click='toDetil(item.interUserId)' class="image_2"></u-avatar>
|
||||||
|
<view class="flex-col group_2">
|
||||||
|
<view class="flex-row group_3">
|
||||||
|
<text class="text_16">{{ item.interUserName }}</text>
|
||||||
|
<text class="text_18">{{ item.interDate }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="right-text-wrapper">
|
||||||
|
<text v-if="item.interType == 0">点赞了你的作品</text>
|
||||||
|
<text v-if="item.interType == 1">收藏了你的作品</text>
|
||||||
|
<text v-if="item.interType == 2">转发了你的作品</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-section flex-row">
|
||||||
|
<image v-if='item.dynamicHead' :src="$u.http.config.imgUrl + item.dynamicHead.split(',')[0]"
|
||||||
|
class="image_4" />
|
||||||
|
<text v-if="item.interType == 0" class="text_6">{{ item.commentContent }}</text>
|
||||||
|
<text v-if="item.interType == 1" class="text_6">{{ item.dynamicTitle }}</text>
|
||||||
|
<text v-if="item.interType == 2" class="text_6">{{ item.dynamicTitle }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex-row group_4">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else class="list-item flex-col section_4">
|
||||||
|
<view class="top-group flex-row view_13">
|
||||||
|
<view class="image_2 flex-row view_14">
|
||||||
|
<u-avatar :src="$u.http.config.imgUrl + item.userHead"
|
||||||
|
@click='toDetil(item.interUserId)' class="image_2"></u-avatar>
|
||||||
|
<view class="flex-col group_2">
|
||||||
|
<view class="flex-row group_3">
|
||||||
|
<text class="text_16">{{ item.interUserName }}</text>
|
||||||
|
<!-- <view class="flex-col items-center text-wrapper_1">
|
||||||
|
<text>{{ item.commentContent == '【我的评论】' ? '评论' : '回复' }}了</text>
|
||||||
|
</view> -->
|
||||||
|
<text class="text_18">{{ item.interDate }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="text_20">{{ item.commentContent == '【我的评论】' ? '评论' :
|
||||||
|
'回复' }}了你:{{ item.content }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <view class="right-group flex-col items-center view_15">
|
||||||
|
<text class="top-group_2">回复</text>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="bottom-section flex-row">
|
||||||
|
<text v-if="item.commentContent == '【我的评论】'" class="text_6">{{ item.dynamicTitle }}</text>
|
||||||
|
<text v-else class="text_6">{{ item.commentContent }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex-row group_4">
|
||||||
|
<!-- <image
|
||||||
|
src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6216dee45a7e3f031061d0f1/621c59e162a7d90011002985/16460348611151830106.png"
|
||||||
|
class="image_11" />
|
||||||
|
<text class="text_22">还有10条评论 ></text> -->
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
<view v-else style='padding-top:30vh'>
|
||||||
|
<!-- <u-empty text="暂无消息列表" mode="message"></u-empty> -->
|
||||||
|
<no-data text="暂无消息列表"></no-data>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import NoData from 'components/NoData.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
NoData
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: [],
|
||||||
|
tabList: [
|
||||||
|
{
|
||||||
|
name: "全部",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "评论",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "点赞",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "收藏",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "转发",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
current:0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getList(-1)
|
||||||
|
//接收互动消息
|
||||||
|
this.$connection.on("InteractMessage", (data, type) => {
|
||||||
|
if (this.route.indexOf('interactionList') >= 0) {
|
||||||
|
this.list.unshift(data.data)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
if (this.vuex_msgList) {
|
||||||
|
var msgList = this.vuex_msgList;
|
||||||
|
msgList = msgList.replace('InteractMessage,', '')
|
||||||
|
this.$u.vuex('vuex_msgList', msgList)
|
||||||
|
if (!msgList) {
|
||||||
|
var tab = this.vuex_tabbar;
|
||||||
|
tab[1].isDot = false;
|
||||||
|
this.$u.vuex('vuex_tabbar', tab);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// tabschange
|
||||||
|
tabsChange(i) {
|
||||||
|
// this.current 0=全部 1=评论 2=点赞 3=收藏 4=转发
|
||||||
|
if (this.current !== i) {
|
||||||
|
this.current = i;
|
||||||
|
if (this.current == 0) {
|
||||||
|
this.getList(-1)
|
||||||
|
} else if (this.current == 1) {
|
||||||
|
this.getList(3)
|
||||||
|
} else {
|
||||||
|
this.getList(this.current - 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//type 0=点赞 1=收藏 2=转发 3=评论
|
||||||
|
getList(type) {
|
||||||
|
this.$u.api.getinteractionList(type).then(res => {
|
||||||
|
this.list = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//返回上一级
|
||||||
|
router() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '../../message/msgList/msgList'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toDetil(id) {
|
||||||
|
this.$u.route({
|
||||||
|
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.scroll {
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 0.44rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
padding: 0 0.14rem 0.17rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border-radius: 0.1rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-group {
|
||||||
|
padding: 0.12rem 0 0.085rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section {
|
||||||
|
margin-top: 10rpx;
|
||||||
|
margin-right: 0.055rem;
|
||||||
|
padding: 0.07rem 0.025rem 0.08rem 0.14rem;
|
||||||
|
color: rgb(54, 54, 54);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
// letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color:#F6F8F9;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
// margin-left: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_2 {
|
||||||
|
margin-bottom: 0.025rem;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-group {
|
||||||
|
// margin-left: 0.12rem;
|
||||||
|
// margin-top: 0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_4 {
|
||||||
|
width: 0.35rem;
|
||||||
|
height: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-left: 0.025rem;
|
||||||
|
align-self: center;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 84%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-group_1 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_4 {
|
||||||
|
margin-left: 0.02rem;
|
||||||
|
margin-top: 0.085rem;
|
||||||
|
color: rgb(177, 179, 182);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
// margin: 0.02rem 0;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
// line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
// margin-left: 0.015rem;
|
||||||
|
padding: 0.03rem 0 0.04rem;
|
||||||
|
// color: rgb(46, 155, 255);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
// line-height: 0.12rem;
|
||||||
|
// letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
// background-color: rgba(46, 155, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
// width: 0.65rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
color: #000;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0.14rem 0.14rem 0.14rem 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_2 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-group {
|
||||||
|
padding: 0.12rem 0 0.085rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_2 {
|
||||||
|
margin-bottom: 0.025rem;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-group {
|
||||||
|
// margin-left: 0.12rem;
|
||||||
|
// margin-top: 0.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section_4 {
|
||||||
|
padding: 0.15rem 0.16rem 0;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_13 {
|
||||||
|
padding: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_20 {
|
||||||
|
margin-right: initial;
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
background-color: initial;
|
||||||
|
// margin-left: 0.53rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 80%;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.9);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_2 {
|
||||||
|
margin-right: 0.05rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
padding: 0.18rem 0 0.2rem;
|
||||||
|
color: rgb(54, 54, 54);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
max-width: 84%;
|
||||||
|
min-width: 84%;
|
||||||
|
margin-left: 0.53rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_4 {
|
||||||
|
padding: 0.1rem 0.52rem 0.1rem;
|
||||||
|
color: rgb(177, 179, 182);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_14 {
|
||||||
|
margin-bottom: initial;
|
||||||
|
width: initial;
|
||||||
|
height: initial;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_15 {
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
margin-top: initial;
|
||||||
|
margin-right: 0.07rem;
|
||||||
|
padding: 0.07rem 0;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgb(46, 155, 255);
|
||||||
|
border-radius: 0.13rem;
|
||||||
|
width: 0.56rem;
|
||||||
|
height: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_15:active {
|
||||||
|
background: #fff;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
border: 1px solid rgb(46, 155, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_21 {
|
||||||
|
margin-left: 0.14rem;
|
||||||
|
margin-right: 0.12rem;
|
||||||
|
max-width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_11 {
|
||||||
|
width: 0.2rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_22 {
|
||||||
|
margin: 0.05rem 0 0.04rem 0.09rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_10 {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
margin-left: 0.11rem;
|
||||||
|
margin-bottom: 0.045rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
padding-left: 0.01rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_18 {
|
||||||
|
// margin-top: 0.055rem;
|
||||||
|
color: rgb(177, 179, 182);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
// line-height: 0.12rem;
|
||||||
|
// letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_16 {
|
||||||
|
margin-bottom: 0.03rem;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size:28rpx;
|
||||||
|
// line-height: 0.14rem;
|
||||||
|
// letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper_1 {
|
||||||
|
margin-left: 0.04rem;
|
||||||
|
padding: 0.03rem 0 0.04rem;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(46, 155, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
width: 0.65rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,938 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-navbar :is-back="false" title="">
|
||||||
|
<view class="slot-wrap">
|
||||||
|
<u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="false"
|
||||||
|
:active-item-style="{ color: '#3CB5FB', fontSize: '0.18rem' }"
|
||||||
|
:bar-style="{ background: '#3CB5FB' }" @change="tabsChange"></u-tabs-swiper>
|
||||||
|
</view>
|
||||||
|
</u-navbar>
|
||||||
|
<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
|
||||||
|
style="height: calc(100vh - 0.95rem); width: 100%">
|
||||||
|
<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
|
||||||
|
style="height: calc(100vh - 0.95rem); width: 100%">
|
||||||
|
<scroll-view scroll-y="true" style="height: calc(100vh - 0.95rem); width: 100%"
|
||||||
|
@scrolltolower="onreachBottom">
|
||||||
|
<!-- 消息 -->
|
||||||
|
<view class="msg" v-if="index == 0">
|
||||||
|
<view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY&&false">
|
||||||
|
<view class="flex-col section_4">
|
||||||
|
<view class="flex-row section_5">
|
||||||
|
<text class="text_3">待认证，请先完成认证~</text>
|
||||||
|
<text class="text_4" @click="onAuto">去认证 >></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_3">
|
||||||
|
<view class="flex-col">
|
||||||
|
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
|
||||||
|
</view>
|
||||||
|
<text class="text_5">暂无数据，请尽快认证补充资料~</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_2">
|
||||||
|
<view class="flex-col list">
|
||||||
|
<navigator url="../adminList/adminList" class="list-item flex-row"
|
||||||
|
style='box-shadow: 0px 0.005rem #eaeaea;' v-if='vuex_user.isAttestationGLY'>
|
||||||
|
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('admin')>=0" sex-icon=""
|
||||||
|
size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
src="/static/common/img/adminHeaderImg.png">
|
||||||
|
</u-avatar>
|
||||||
|
<view class="right-section flex-col">
|
||||||
|
<view class="top-group justify-between">
|
||||||
|
<text class="text_2">管理列表</text>
|
||||||
|
<!-- <text class="text_4">8:52</text> -->
|
||||||
|
</view>
|
||||||
|
<text class="text_6" v-if="vuex_msgList.indexOf('admin')>=0">你有新通知</text>
|
||||||
|
<text class="text_6" v-else>暂无新通知</text>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<navigator v-if='interInfo' url="../interactionList/interactionList"
|
||||||
|
class="list-item flex-row" style='box-shadow: 0px 0.005rem #eaeaea;'>
|
||||||
|
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('InteractMessage')>=0"
|
||||||
|
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
src="/static/common/img/interactionhiderimg.png"></u-avatar>
|
||||||
|
<view class="right-section flex-col">
|
||||||
|
<view class="top-group justify-between">
|
||||||
|
<text class="text_2">互动消息</text>
|
||||||
|
<view style='display:none'>
|
||||||
|
{{interInfo.interDate?interInfo.interDate = interInfo.interDate.replace(/-/g, "/"):''}}
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
v-if='new Date(interInfo.interDate) - 0 + (3600000*24)> new Date()&&new Date(interInfo.interDate).getDate()==new Date().getDate()'
|
||||||
|
class="text_4">{{interInfo.interDate.slice(10,16)}}</text>
|
||||||
|
<text v-else class="text_4">{{ interInfo.interDate.slice(5,10)}}</text>
|
||||||
|
<!-- <text class="text_4">{{interInfo.interDate}}</text> -->
|
||||||
|
</view>
|
||||||
|
<text v-if='interInfo.interType==0'
|
||||||
|
class="text_4 text_15">{{interInfo.interUserName+' 点赞了 '+interInfo.dynamicTitle}}</text>
|
||||||
|
<text v-if='interInfo.interType==1'
|
||||||
|
class="text_4 text_15">{{interInfo.interUserName+' 收藏了 '+interInfo.dynamicTitle}}</text>
|
||||||
|
<text v-if='interInfo.interType==2'
|
||||||
|
class="text_4 text_15">{{interInfo.interUserName+' 转发了 '+interInfo.dynamicTitle}}</text>
|
||||||
|
<text v-if='interInfo.interType==3'
|
||||||
|
class="text_4 text_15">{{interInfo.interUserName+' 评论了 '+interInfo.dynamicTitle}}</text>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<navigator v-if='sysInfo' url="../sysList/sysList" class="list-item flex-row group_4">
|
||||||
|
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('SystemMessage')>=0"
|
||||||
|
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
src="/static/common/img/systemHeaderimg.png">
|
||||||
|
</u-avatar>
|
||||||
|
<view class="right-section flex-col view_2">
|
||||||
|
<view class="top-group justify-between view_3">
|
||||||
|
<text class="text_2 text_8">系统消息</text>
|
||||||
|
<view style='display:none'>
|
||||||
|
{{sysInfo.messageDate?sysInfo.messageDate = sysInfo.messageDate.replace(/-/g, "/"):''}}
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
v-if='new Date(sysInfo.messageDate) - 0 + (3600000*24)> new Date()&&new Date(sysInfo.messageDate).getDate()==new Date().getDate()'
|
||||||
|
class="text_6 text_16">{{ sysInfo.messageDate.slice(10,16)}}</text>
|
||||||
|
<text v-else class="text_6 text_16">{{
|
||||||
|
sysInfo.messageDate.slice(5,10)}}</text>
|
||||||
|
</view>
|
||||||
|
<text class="text_4 text_15">{{sysInfo.title}} </text>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<view v-if="!sysInfo" style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;" >
|
||||||
|
<image src="/static/common/img/empty.png" class="image" />
|
||||||
|
<view style="color:grey;margin-top: -5vh;">暂无消息</view>
|
||||||
|
</view>
|
||||||
|
<template v-for="(v, i) in UserMsgList">
|
||||||
|
<view class="list-item flex-row group_5" :key="i"
|
||||||
|
@click="GoChat(v.userId,v.chatType,v.userHead)">
|
||||||
|
<u-avatar v-if='v.chatType==0' class="image_1"
|
||||||
|
:show-sex="vuex_msgList.indexOf(v.userId+',')>=0" sex-icon="" size="0.4rem"
|
||||||
|
sex-bg-color="red" mode="circle" :src="$u.http.config.imgUrl+v.userHead">
|
||||||
|
</u-avatar>
|
||||||
|
<u-avatar v-else class="image_1" :show-sex="vuex_msgList.indexOf('admin,')>=0"
|
||||||
|
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
:src="$u.http.config.imgUrl+v.userHead">
|
||||||
|
</u-avatar>
|
||||||
|
<view class="right-section justify-between view_4">
|
||||||
|
<view class="top-group flex-col view_5">
|
||||||
|
<view class="text_2 flex-row view_6">
|
||||||
|
<text class="text_11">{{v.userNetName}}</text>
|
||||||
|
<view class="right-text-wrapper flex-col items-end">
|
||||||
|
<text class="text_13">{{ v.userSchoolName }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="text_4 text_15">{{v.message}}</text>
|
||||||
|
</view>
|
||||||
|
<view style='display:none'>
|
||||||
|
{{v.sendDate?v.sendDate = v.sendDate.replace(/-/g, "/"):''}}</view>
|
||||||
|
<text
|
||||||
|
v-if='new Date(v.sendDate) - 0 + (3600000*24)> new Date()&&new Date(v.sendDate).getDate()==new Date().getDate()'
|
||||||
|
class="text_6 text_16">{{ v.sendDate.slice(10,16)}}</text>
|
||||||
|
<text v-else class="text_6 text_16">{{ v.sendDate.slice(5,10)}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- 关注 -->
|
||||||
|
<view class="guanzhu" v-else>
|
||||||
|
<view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY&&false">
|
||||||
|
<view class="flex-col section_4">
|
||||||
|
<view class="flex-row section_5">
|
||||||
|
<text class="text_3">待认证，请先完成认证~</text>
|
||||||
|
<text class="text_4" @click="onAuto">去认证 >></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_3">
|
||||||
|
<view class="flex-col">
|
||||||
|
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
|
||||||
|
</view>
|
||||||
|
<text class="text_5">暂无数据，请尽快认证补充资料~</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_2">
|
||||||
|
<view class="flex-col list">
|
||||||
|
<!-- <view class="list-item flex-row group_3">
|
||||||
|
<view class="flex-col items-end text-wrapper text_3">
|
||||||
|
<text class="text_2">浙</text>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-text-wrapper justify-between view_1">
|
||||||
|
<text class="text_5 text_7">学校管理员</text>
|
||||||
|
<view class="center-text-wrapper flex-col items-end">
|
||||||
|
<text class="text_8">浙江大学</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
<view class="list-item flex-row group_3" v-for="(item,index) in UserFollowList"
|
||||||
|
:key='index' @click='toDetail(item.carewUserId,item.userRole,item.carewUserHead)'>
|
||||||
|
<u-avatar :src="$u.http.config.imgUrl+item.carewUserHead" class="text_3 image_1"></u-avatar>
|
||||||
|
<view class="bottom-text-wrapper justify-between view_1">
|
||||||
|
<view class="">
|
||||||
|
<text
|
||||||
|
class="text_5 text_7"><text>{{item.carewUserName}}</text><text>{{"("+item.carewName+")"}}</text></text>
|
||||||
|
<view class="center-text-wrapper flex-col items-end">
|
||||||
|
<text class="text_8">{{item.school}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if='item.carewType==2&&item.carewName!="管理员"'
|
||||||
|
class="right-text-wrapper flex-col items-center">
|
||||||
|
<text class="text_10">互相关注</text>
|
||||||
|
</view>
|
||||||
|
<view v-if='item.carewType==1&&item.carewName!="管理员"'
|
||||||
|
class="right-text-wrapper flex-col items-center view_21">
|
||||||
|
<text class="text_10">已关注</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!UserFollowList.length" style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;" >
|
||||||
|
<image src="/static/common/img/empty.png" class="image" />
|
||||||
|
<view style="color:grey;margin-top: -5vh;">暂无关注</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<u-tabbar :list="vuex_tabbar" :class="{phone:vuex_iPhone}"></u-tabbar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabbar: "",
|
||||||
|
swiperCurrent: 0,
|
||||||
|
current: 0,
|
||||||
|
UserMsgList: [],
|
||||||
|
UserFollowList: [],
|
||||||
|
navList: [{
|
||||||
|
name: "消息",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "关注",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
interInfo: '',
|
||||||
|
sysInfo: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 和onShow 重复
|
||||||
|
// this.getList()
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
//接收数据
|
||||||
|
this.$connection.on("ReceiveMessage", (user, message) => {
|
||||||
|
this.getList()
|
||||||
|
});
|
||||||
|
this.$connection.on("InteractMessage", (data, type) => {
|
||||||
|
this.getList()
|
||||||
|
});
|
||||||
|
this.$connection.on("SystemMessage", (title, content, time) => {
|
||||||
|
this.getList()
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getList()
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toDetail(id, role, head) {
|
||||||
|
if (role == 0) {
|
||||||
|
this.$u.route({
|
||||||
|
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id + '&type=0'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "../dialogBox/dialogBox?id=" + id + '&chatType=1&type=0&head=' + head,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
if (this.current == 0) {
|
||||||
|
this.charList();
|
||||||
|
} else {
|
||||||
|
this.FollowList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onAuto() {
|
||||||
|
this.$u.route({
|
||||||
|
url: "pages/my/ShoolList/ShoolList"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
charList() {
|
||||||
|
const data = {
|
||||||
|
id: this.vuex_user.id,
|
||||||
|
userRole: this.vuex_user.isAttestationGLY ? 1 : 0
|
||||||
|
}
|
||||||
|
this.$u.api.getcharList(data).then(res => {
|
||||||
|
this.UserMsgList = res
|
||||||
|
})
|
||||||
|
this.$u.api.getinteractionList().then(res => {
|
||||||
|
this.interInfo = res[0]
|
||||||
|
})
|
||||||
|
this.$u.api.getSysList().then(res => {
|
||||||
|
this.sysInfo = res[0]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
FollowList() {
|
||||||
|
this.$u.api.getFollowList().then(res => {
|
||||||
|
|
||||||
|
this.UserFollowList = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 去聊天
|
||||||
|
GoChat(id, chatType, head) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "../dialogBox/dialogBox?id=" + id + '&chatType=' + chatType + '&type=0&head=' + head,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// tabs通知swiper切换
|
||||||
|
tabsChange(index) {
|
||||||
|
this.swiperCurrent = index;
|
||||||
|
},
|
||||||
|
// swiper-item左右移动，通知tabs的滑块跟随移动
|
||||||
|
transition(e) {
|
||||||
|
let dx = e.detail.dx;
|
||||||
|
this.$refs.uTabs.setDx(dx);
|
||||||
|
},
|
||||||
|
// 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
|
||||||
|
// swiper滑动结束，分别设置tabs和swiper的状态
|
||||||
|
animationfinish(e) {
|
||||||
|
let current = e.detail.current;
|
||||||
|
this.$refs.uTabs.setFinishCurrent(current);
|
||||||
|
this.swiperCurrent = current;
|
||||||
|
this.current = current;
|
||||||
|
},
|
||||||
|
// scroll-view到底部加载更多
|
||||||
|
onreachBottom() {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .u-avatar__sex {
|
||||||
|
width: 0.1rem !important;
|
||||||
|
height: 0.1rem !important;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg {
|
||||||
|
.list-item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-section {
|
||||||
|
margin-left: 0.15rem;
|
||||||
|
padding: 0.14rem 0 0.18rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
height: 0.66rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-group {
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-top: 0.09rem;
|
||||||
|
color: rgb(180, 182, 189);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_2 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_4 {
|
||||||
|
margin-bottom: 0.05rem;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.095rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
margin-bottom: 0.03rem;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
padding: 0.035rem 0.08rem;
|
||||||
|
color: rgb(115, 129, 255);
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_13 {
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .group_2 {
|
||||||
|
// padding-bottom: 0.15rem;
|
||||||
|
// flex: 1 1 auto;
|
||||||
|
// overflow-y: auto;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.group_4 {
|
||||||
|
padding: 0 0.01rem;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_5 {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
margin-top: 0.015rem;
|
||||||
|
box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_4:active,
|
||||||
|
.group_5:active {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_8 {
|
||||||
|
padding-left: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_2 {
|
||||||
|
margin-left: 0.15rem;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_4 {
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_3 {
|
||||||
|
margin-right: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_5 {
|
||||||
|
margin-right: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_16 {
|
||||||
|
margin-top: 0.0rem;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
line-height: 0.095rem;
|
||||||
|
margin-right: 0.095rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_28 {
|
||||||
|
margin-top: initial;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0.17rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
line-height: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-right: 0.025rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_6 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_15 {
|
||||||
|
margin-bottom: initial;
|
||||||
|
color: rgb(180, 182, 189);
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
width: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_19 {
|
||||||
|
margin-left: 0.045rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guanzhu {
|
||||||
|
.list-item {
|
||||||
|
padding: 0.14rem 0 0.1rem;
|
||||||
|
align-self: flex-end;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
width: 3.02rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-text-wrapper {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
padding: 0.035rem 0;
|
||||||
|
color: rgb(115, 129, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-text-wrapper {
|
||||||
|
padding: 0.035rem 0.08rem;
|
||||||
|
color: rgb(115, 129, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
margin-right: 0.06rem;
|
||||||
|
margin-top: 0.03rem;
|
||||||
|
margin-left: 0.06rem;
|
||||||
|
padding: 0.085rem 0.08rem;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgb(46, 155, 255);
|
||||||
|
border-radius: 0.15rem;
|
||||||
|
width: 0.85rem;
|
||||||
|
height: 0.3rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
margin-left: 0.05rem;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_14 {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
// padding: 0.11rem 0 4.94rem;
|
||||||
|
// flex: 1 1 auto;
|
||||||
|
// overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
// margin-left: 0.17rem;
|
||||||
|
padding: 0.11rem 0 0.12rem;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.18rem;
|
||||||
|
line-height: 0.17rem;
|
||||||
|
letter-spacing: 0.018rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
background: #6574fc;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
text {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {}
|
||||||
|
|
||||||
|
.text_2 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_4 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
margin-top: 0.015rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_5 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_8 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_9 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_1 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
margin-right: 0.04rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_2 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_4 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.14rem 0 0.1rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_3 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_8 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.13rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_4 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_12 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.17rem 0 0.08rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_5 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_16 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.15rem 0 0.11rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_6 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_19 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.18rem 0 0.18rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
height: 0.67rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: initial;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
text:nth-child(1) {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 0.9rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_26 {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: initial;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_20 {
|
||||||
|
left: -0.03rem;
|
||||||
|
bottom: 0.075rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_21 {
|
||||||
|
margin-right: 0.06rem;
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.09rem 0 0.06rem;
|
||||||
|
color: rgb(73, 76, 87);
|
||||||
|
background-color: initial;
|
||||||
|
border: solid 0.01rem rgb(185, 185, 185);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.renzheng {
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
|
||||||
|
.section_4 {
|
||||||
|
padding: 0.33rem 0 0.34rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
|
||||||
|
.section_5 {
|
||||||
|
margin-left: 0.18rem;
|
||||||
|
margin-right: 0.24rem;
|
||||||
|
padding: 0.2rem 0.18rem 0.18rem 0.24rem;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
justify-between: space-between;
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(160, 162, 172);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_4 {
|
||||||
|
margin-left: 0.05rem;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-top: 0.76rem;
|
||||||
|
padding-left: 0.8rem;
|
||||||
|
padding-right: 0.69rem;
|
||||||
|
color: rgb(163, 182, 202);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.02rem;
|
||||||
|
margin-top: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
margin-right: 0.14rem;
|
||||||
|
width: 2.12rem;
|
||||||
|
height: 1.89rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,908 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view class="page-title">消息</view>
|
||||||
|
<view class="slot-wrap">
|
||||||
|
<!-- <u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="false"
|
||||||
|
:active-item-style="{ color: '#3CB5FB', fontSize: '0.18rem' }"
|
||||||
|
:bar-style="{ background: '#3CB5FB' }" @change="tabsChange"></u-tabs-swiper> -->
|
||||||
|
|
||||||
|
<view class="tabs-item" v-for="(item, index) in navList" :key="index" @click="tabsClick(item.type)">
|
||||||
|
<image :src="item.image"></image>
|
||||||
|
<text>{{ item.name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
|
||||||
|
style="height: calc(100vh - 2.1rem); width: 100%">
|
||||||
|
<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
|
||||||
|
style="height: calc(100vh - 2.1rem); width: 100%"> -->
|
||||||
|
<scroll-view scroll-y="true" style="height: calc(100vh - 2.5rem - 56px); width: 100%"
|
||||||
|
@scrolltolower="onreachBottom">
|
||||||
|
<!-- 消息 -->
|
||||||
|
<view class="msg" >
|
||||||
|
<view class="flex-col renzheng" v-if="!vuex_user.isAttestationXY && false">
|
||||||
|
<view class="flex-col section_4">
|
||||||
|
<view class="flex-row section_5">
|
||||||
|
<text class="text_3">待认证，请先完成认证~</text>
|
||||||
|
<text class="text_4" @click="onAuto">去认证 >></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_3">
|
||||||
|
<view class="flex-col">
|
||||||
|
<image src="/static/common/img/16535374500948048054.png" class="image_1" />
|
||||||
|
</view>
|
||||||
|
<text class="text_5">暂无数据，请尽快认证补充资料~</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex-col group_2">
|
||||||
|
<view class="flex-col list">
|
||||||
|
<navigator url="../adminList/adminList" class="list-item flex-row"
|
||||||
|
style='box-shadow: 0px 0.005rem #eaeaea;' v-if='vuex_user.isAttestationGLY'>
|
||||||
|
<u-avatar class="image_1" :show-sex="vuex_msgList.indexOf('admin') >= 0" sex-icon=""
|
||||||
|
size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
src="/static/common/img/adminHeaderImg.png">
|
||||||
|
</u-avatar>
|
||||||
|
<view class="right-section flex-col">
|
||||||
|
<view class="top-group justify-between">
|
||||||
|
<text class="text_2">管理列表</text>
|
||||||
|
<!-- <text class="text_4">8:52</text> -->
|
||||||
|
</view>
|
||||||
|
<text class="text_6" v-if="vuex_msgList.indexOf('admin') >= 0">你有新通知</text>
|
||||||
|
<text class="text_6" v-else>暂无管理消息</text>
|
||||||
|
</view>
|
||||||
|
</navigator>
|
||||||
|
<!-- <view v-if="!sysInfo"
|
||||||
|
style="margin-top:20vh;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
||||||
|
<image src="/static/common/img/empty.png" class="image" />
|
||||||
|
<view style="color:grey;margin-top: -5vh;">暂无消息</view>
|
||||||
|
</view> -->
|
||||||
|
<view v-if="UserMsgList.length">
|
||||||
|
<view v-for="(v, i) in UserMsgList" :key="i" class="list-item flex-row group_5"
|
||||||
|
@click="GoChat(v.userId, v.chatType, v.userHead)">
|
||||||
|
<u-avatar v-if='v.chatType == 0' class="image_1"
|
||||||
|
:show-sex="vuex_msgList.indexOf(v.userId + ',') >= 0" sex-icon=""
|
||||||
|
size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
:src="$u.http.config.imgUrl + v.userHead">
|
||||||
|
</u-avatar>
|
||||||
|
<u-avatar v-else class="image_1" :show-sex="vuex_msgList.indexOf('admin,') >= 0"
|
||||||
|
sex-icon="" size="0.4rem" sex-bg-color="red" mode="circle"
|
||||||
|
:src="$u.http.config.imgUrl + v.userHead">
|
||||||
|
</u-avatar>
|
||||||
|
<view class="right-section justify-between view_4">
|
||||||
|
<view class="top-group flex-col view_5">
|
||||||
|
<view class="text_2 flex-row view_6">
|
||||||
|
<text class="text_11">{{ v.userNetName }}</text>
|
||||||
|
<view class="right-text-wrapper flex-col items-end">
|
||||||
|
<text class="text_13">{{ v.userSchoolName }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="text_4 text_15">{{ v.message }}</text>
|
||||||
|
</view>
|
||||||
|
<view style='display:none'>
|
||||||
|
{{ v.sendDate ? v.sendDate = v.sendDate.replace(/-/g, "/") : '' }}
|
||||||
|
</view>
|
||||||
|
<text
|
||||||
|
v-if='new Date(v.sendDate) - 0 + (3600000 * 24) > new Date() && new Date(v.sendDate).getDate() == new Date().getDate()'
|
||||||
|
class="text_6 text_16">{{ v.sendDate.slice(10, 16) }}</text>
|
||||||
|
<text v-else class="text_6 text_16">{{ v.sendDate.slice(5, 10) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<no-data v-else type="message"></no-data>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<!-- </swiper-item>
|
||||||
|
</swiper> -->
|
||||||
|
|
||||||
|
<!-- 使用自定义TabBar -->
|
||||||
|
<custom-tab-bar></custom-tab-bar>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import noData from '@/components/NoData.vue'
|
||||||
|
import CustomTabBar from '@/components/custom-tab-bar/custom-tab-bar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
noData,
|
||||||
|
CustomTabBar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabbar: "",
|
||||||
|
swiperCurrent: 0,
|
||||||
|
current: 0,
|
||||||
|
UserMsgList: [],
|
||||||
|
UserFollowList: [],
|
||||||
|
navList: [{
|
||||||
|
name: "互动消息",
|
||||||
|
image: "/static/common/img/message/interactive.png",
|
||||||
|
type: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "系统消息",
|
||||||
|
image: "/static/common/img/message/system.png",
|
||||||
|
type: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "新增关注",
|
||||||
|
image: "/static/common/img/message/attention.png",
|
||||||
|
type: 2
|
||||||
|
},
|
||||||
|
],
|
||||||
|
interInfo: '',
|
||||||
|
sysInfo: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
current() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// 和onShow 重复
|
||||||
|
// this.getList()
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
//接收数据
|
||||||
|
this.$connection.on("ReceiveMessage", (user, message) => {
|
||||||
|
this.getList()
|
||||||
|
});
|
||||||
|
this.$connection.on("InteractMessage", (data, type) => {
|
||||||
|
this.getList()
|
||||||
|
});
|
||||||
|
this.$connection.on("SystemMessage", (title, content, time) => {
|
||||||
|
this.getList()
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getList()
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tabsClick(type) {
|
||||||
|
switch (type) {
|
||||||
|
case 0:
|
||||||
|
this.$u.route({url:'/pages/message/interactionList/interactionList'})
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
this.$u.route({url:'/pages/message/sysList/sysList'})
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
this.$u.route({url:'/pages/message/attentionList/attentionList'})
|
||||||
|
break;
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
toDetail(id, role, head) {
|
||||||
|
if (role == 0) {
|
||||||
|
this.$u.route({
|
||||||
|
url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id + '&type=0'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "../dialogBox/dialogBox?id=" + id + '&chatType=1&type=0&head=' + head,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
if (this.current == 0) {
|
||||||
|
this.charList();
|
||||||
|
} else {
|
||||||
|
this.FollowList();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onAuto() {
|
||||||
|
this.$u.route({
|
||||||
|
url: "pages/my/ShoolList/ShoolList"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
charList() {
|
||||||
|
const data = {
|
||||||
|
id: this.vuex_user.id,
|
||||||
|
userRole: this.vuex_user.isAttestationGLY ? 1 : 0
|
||||||
|
}
|
||||||
|
this.$u.api.getcharList(data).then(res => {
|
||||||
|
this.UserMsgList = res
|
||||||
|
})
|
||||||
|
this.$u.api.getinteractionList(-1).then(res => {
|
||||||
|
this.interInfo = res[0]
|
||||||
|
})
|
||||||
|
this.$u.api.getSysList().then(res => {
|
||||||
|
this.sysInfo = res[0]
|
||||||
|
})
|
||||||
|
},
|
||||||
|
FollowList() {
|
||||||
|
this.$u.api.getFollowList().then(res => {
|
||||||
|
|
||||||
|
this.UserFollowList = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 去聊天
|
||||||
|
GoChat(id, chatType, head) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "../dialogBox/dialogBox?id=" + id + '&chatType=' + chatType + '&type=0&head=' + head,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// tabs通知swiper切换
|
||||||
|
tabsChange(index) {
|
||||||
|
this.swiperCurrent = index;
|
||||||
|
},
|
||||||
|
// swiper-item左右移动，通知tabs的滑块跟随移动
|
||||||
|
transition(e) {
|
||||||
|
let dx = e.detail.dx;
|
||||||
|
this.$refs.uTabs.setDx(dx);
|
||||||
|
},
|
||||||
|
// 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
|
||||||
|
// swiper滑动结束，分别设置tabs和swiper的状态
|
||||||
|
animationfinish(e) {
|
||||||
|
let current = e.detail.current;
|
||||||
|
this.$refs.uTabs.setFinishCurrent(current);
|
||||||
|
this.swiperCurrent = current;
|
||||||
|
this.current = current;
|
||||||
|
},
|
||||||
|
// scroll-view到底部加载更多
|
||||||
|
onreachBottom() { },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
::v-deep .u-avatar__sex {
|
||||||
|
width: 0.1rem !important;
|
||||||
|
height: 0.1rem !important;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg {
|
||||||
|
.list-item {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-section {
|
||||||
|
margin-left: 0.15rem;
|
||||||
|
padding: 0.14rem 0 0.18rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
height: 0.66rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-group {
|
||||||
|
margin-right: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-top: 0.09rem;
|
||||||
|
color: rgb(180, 182, 189);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.12rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_2 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_4 {
|
||||||
|
margin-bottom: 0.05rem;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.095rem;
|
||||||
|
letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_11 {
|
||||||
|
// margin-bottom: 0.03rem;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 36rpx;
|
||||||
|
// letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
padding: 0.035rem 0.08rem;
|
||||||
|
color: #3CB5FB;
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(60,181,251,0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
height: 0.18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_13 {
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .group_2 {
|
||||||
|
// padding-bottom: 0.15rem;
|
||||||
|
// flex: 1 1 auto;
|
||||||
|
// overflow-y: auto;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.group_4 {
|
||||||
|
padding: 0 0.01rem;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_5 {
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
margin-top: 0.015rem;
|
||||||
|
box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_4:active,
|
||||||
|
.group_5:active {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_8 {
|
||||||
|
padding-left: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_2 {
|
||||||
|
margin-left: 0.15rem;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_4 {
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_3 {
|
||||||
|
margin-right: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_5 {
|
||||||
|
margin-right: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_16 {
|
||||||
|
margin-top: 0.0rem;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
line-height: 0.095rem;
|
||||||
|
margin-right: 0.095rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_28 {
|
||||||
|
margin-top: initial;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0.17rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
line-height: 0.14rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_9 {
|
||||||
|
margin-right: 0.025rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_6 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_15 {
|
||||||
|
margin-bottom: initial;
|
||||||
|
color: rgb(180, 182, 189);
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
width: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_19 {
|
||||||
|
margin-left: 0.045rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.guanzhu {
|
||||||
|
.list-item {
|
||||||
|
padding: 0.14rem 0 0.1rem;
|
||||||
|
align-self: flex-end;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
width: 3.02rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-text-wrapper {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
padding: 0.035rem 0;
|
||||||
|
color: rgb(115, 129, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-text-wrapper {
|
||||||
|
padding: 0.035rem 0.08rem;
|
||||||
|
color: rgb(115, 129, 255);
|
||||||
|
font-size: 0.11rem;
|
||||||
|
line-height: 0.11rem;
|
||||||
|
letter-spacing: 0.011rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgba(115, 129, 255, 0.1);
|
||||||
|
border-radius: 0.09rem;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-text-wrapper {
|
||||||
|
margin-right: 0.06rem;
|
||||||
|
margin-top: 0.03rem;
|
||||||
|
margin-left: 0.06rem;
|
||||||
|
padding: 0.085rem 0.08rem;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.14rem;
|
||||||
|
line-height: 0.13rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: rgb(46, 155, 255);
|
||||||
|
border-radius: 0.15rem;
|
||||||
|
width: 0.85rem;
|
||||||
|
height: 0.3rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_8 {
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_10 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_12 {
|
||||||
|
margin-left: 0.05rem;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_14 {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
margin-right: 0.03rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_2 {
|
||||||
|
// padding: 0.11rem 0 4.94rem;
|
||||||
|
// flex: 1 1 auto;
|
||||||
|
// overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrapper {
|
||||||
|
// margin-left: 0.17rem;
|
||||||
|
padding: 0.11rem 0 0.12rem;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 0.18rem;
|
||||||
|
line-height: 0.17rem;
|
||||||
|
letter-spacing: 0.018rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin-top: 0.08rem;
|
||||||
|
background: #6574fc;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
text {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {}
|
||||||
|
|
||||||
|
.text_2 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
box-shadow: 0px 0.005rem #eaeaea;
|
||||||
|
padding-left: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_4 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
margin-top: 0.015rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_5 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_6 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_7 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_8 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_9 {
|
||||||
|
padding: initial;
|
||||||
|
align-self: initial;
|
||||||
|
box-shadow: initial;
|
||||||
|
width: initial;
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 0.12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_1 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
margin-right: 0.04rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_2 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_4 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.14rem 0 0.1rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_3 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_8 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.15rem 0 0.14rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.13rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_4 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_12 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.17rem 0 0.08rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.12rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_5 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_16 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.15rem 0 0.11rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
height: 0.67rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_6 {
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
align-self: center;
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_19 {
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.18rem 0 0.18rem;
|
||||||
|
color: initial;
|
||||||
|
font-size: initial;
|
||||||
|
line-height: initial;
|
||||||
|
letter-spacing: initial;
|
||||||
|
white-space: initial;
|
||||||
|
background-color: initial;
|
||||||
|
border-radius: initial;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
box-shadow: 0px 0.005rem rgb(234, 234, 234);
|
||||||
|
height: 0.67rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_7 {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: initial;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
text:nth-child(1) {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
max-width: 0.9rem;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_26 {
|
||||||
|
margin-left: initial;
|
||||||
|
margin-right: initial;
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.14rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_20 {
|
||||||
|
left: -0.03rem;
|
||||||
|
bottom: 0.075rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_21 {
|
||||||
|
margin-right: 0.06rem;
|
||||||
|
margin-top: initial;
|
||||||
|
padding: 0.09rem 0 0.06rem;
|
||||||
|
color: rgb(73, 76, 87);
|
||||||
|
background-color: initial;
|
||||||
|
border: solid 0.01rem rgb(185, 185, 185);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.renzheng {
|
||||||
|
padding-bottom: 0rem;
|
||||||
|
|
||||||
|
.section_4 {
|
||||||
|
padding: 0.33rem 0 0.34rem;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
|
||||||
|
.section_5 {
|
||||||
|
margin-left: 0.18rem;
|
||||||
|
margin-right: 0.24rem;
|
||||||
|
padding: 0.2rem 0.18rem 0.18rem 0.24rem;
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
justify-between: space-between;
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(160, 162, 172);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
letter-spacing: 0.015rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_4 {
|
||||||
|
margin-left: 0.05rem;
|
||||||
|
color: rgb(46, 155, 255);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.group_3 {
|
||||||
|
margin-top: 0.76rem;
|
||||||
|
padding-left: 0.8rem;
|
||||||
|
padding-right: 0.69rem;
|
||||||
|
color: rgb(163, 182, 202);
|
||||||
|
font-size: 0.15rem;
|
||||||
|
line-height: 0.15rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.02rem;
|
||||||
|
margin-top: 0.13rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image_1 {
|
||||||
|
margin-right: 0.14rem;
|
||||||
|
width: 2.12rem;
|
||||||
|
height: 1.89rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page-title{
|
||||||
|
padding: 50rpx ;
|
||||||
|
color: #000;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
background: #ceedff; /* fallback for old browsers */
|
||||||
|
background: -webkit-linear-gradient(to top,#f6f7fa, #ceedff); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
|
background: linear-gradient(to top,#f6f7fa, #ceedff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.slot-wrap {
|
||||||
|
// height: 220rpx;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 60rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-item {
|
||||||
|
width: 112rpx;
|
||||||
|
height: 168rpx;
|
||||||
|
// padding-top: 50rpx;
|
||||||
|
// margin-bottom: 50rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 104rpx;
|
||||||
|
height: 104rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-navbar back-text="" title="系统消息"></u-navbar>
|
||||||
|
<scroll-view scroll-y="true" class="scroll">
|
||||||
|
<view class="flex-col list" v-if='list.length'>
|
||||||
|
<view class="list-item flex-col group_1" :key="i" v-for="(item, i) in list">
|
||||||
|
<view class="items-title">
|
||||||
|
<image src="/static/common/img/message/system.png" mode=""></image>
|
||||||
|
<view class="title-time">
|
||||||
|
<text class="title-text">系统消息</text>
|
||||||
|
<text class="text_1">{{ item.messageDate }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bottom-section flex-col">
|
||||||
|
<text class="text_3">{{ item.title }}</text>
|
||||||
|
<text class="text_5">{{ item.message.split(',未通过原因:')[0] }}</text>
|
||||||
|
<text v-if="item.message.split(',未通过原因:').length >= 2" class="text_6">驳回理由：<text>{{
|
||||||
|
item.message.split(',未通过原因:')[1] }}</text></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else style='padding-top:30vh'>
|
||||||
|
<no-data text="暂无系统消息"></no-data>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import noData from '@/components/NoData.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
noData
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getList()
|
||||||
|
//接收系统消息
|
||||||
|
this.$connection.on("SystemMessage", (title, content, time) => {
|
||||||
|
if (this.route.indexOf('sysList') >= 0) {
|
||||||
|
this.list.unshift({
|
||||||
|
messageDate: time,
|
||||||
|
title: title,
|
||||||
|
message: content
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
if (this.vuex_msgList) {
|
||||||
|
var msgList = this.vuex_msgList;
|
||||||
|
msgList = msgList.replace('SystemMessage,', '')
|
||||||
|
this.$u.vuex('vuex_msgList', msgList)
|
||||||
|
if (!msgList) {
|
||||||
|
var tab = this.vuex_tabbar;
|
||||||
|
tab[1].isDot = false;
|
||||||
|
this.$u.vuex('vuex_tabbar', tab);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.$u.api.getSysList().then(res => {
|
||||||
|
this.list = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//返回上一级
|
||||||
|
router() {
|
||||||
|
uni.switchTab({
|
||||||
|
url: '../../message/msgList/msgList'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.scroll {
|
||||||
|
background-color: rgb(246, 247, 250);
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100vh - 0.44rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
padding: 20rpx;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-title {
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-bottom: 2rpx solid #F6F8F9;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-time {
|
||||||
|
margin-left: 0.1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 5rpx 0;
|
||||||
|
// align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: rgba(0, 0, 0, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_1 {
|
||||||
|
// align-self: center;
|
||||||
|
color: rgb(193, 196, 204);
|
||||||
|
font-size: 0.12rem;
|
||||||
|
line-height: 0.095rem;
|
||||||
|
// letter-spacing: 0.012rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section {
|
||||||
|
padding-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_3 {
|
||||||
|
color: rgb(2, 2, 2);
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
// letter-spacing: 0.018rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_5 {
|
||||||
|
margin-left: 0.015rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
color: #908a8a;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
// letter-spacing: 0.01rem;
|
||||||
|
// text-indent: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_6 {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
font-size: 0.16rem;
|
||||||
|
line-height: 0.16rem;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
|
||||||
|
text {
|
||||||
|
margin-left: 0.015rem;
|
||||||
|
text-indent: 0.3rem;
|
||||||
|
display: block;
|
||||||
|
color: #908a8a;
|
||||||
|
font-size: 0.14rem;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
padding: 0.18rem 0.15rem;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,84 +1,89 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="page-container">
|
<div class="my-page">
|
||||||
<view class="page-header">
|
<PageHeader
|
||||||
<PageHeader
|
title="我的"
|
||||||
title="我的"
|
:is-back="false"
|
||||||
:is-back="false"
|
:border-bottom="false"
|
||||||
:border-bottom="false"
|
:background="headerBackground"
|
||||||
:background="headerBackground"
|
/>
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<scroll-view
|
<div class="content-wrapper">
|
||||||
class="page-main"
|
<div class="user-info">
|
||||||
scroll-y
|
<div class="avatar">
|
||||||
enable-back-to-top
|
<!-- <img src="" alt="用户头像" /> -->
|
||||||
>
|
</div>
|
||||||
<view class="main-content">
|
<div class="info">
|
||||||
<div class="user-info">
|
<div class="name">{{ teacherInfo.name }}</div>
|
||||||
<div class="avatar">
|
<div class="tag">
|
||||||
<image :src="teacherInfo.avatar" class="avatar-img"></image>
|
<image
|
||||||
|
class="tag-icon"
|
||||||
|
src="@/static/notes/collage-icon.png"
|
||||||
|
></image>
|
||||||
|
{{ teacherInfo.collegeName }}
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="tag">
|
||||||
<div class="name">{{ teacherInfo.name }}</div>
|
<image class="tag-icon" src="@/static/notes/major-icon.png"></image>
|
||||||
<div class="tag">
|
{{ teacherInfo.professionalName }}
|
||||||
<image
|
|
||||||
class="tag-icon"
|
|
||||||
src="@/static/notes/collage-icon.png"
|
|
||||||
></image>
|
|
||||||
{{ teacherInfo.collegeName }}
|
|
||||||
</div>
|
|
||||||
<div class="tag">
|
|
||||||
<image class="tag-icon" src="@/static/notes/major-icon.png"></image>
|
|
||||||
{{ teacherInfo.professionalName }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="banner">
|
<div class="statistics">
|
||||||
<img src="@/static/notes/banner.png" alt="banner" />
|
<div class="stat-item">
|
||||||
|
<div class="stat-num">36</div>
|
||||||
|
<div class="stat-label">总答题</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
<div class="menu-list">
|
<div class="stat-num">10</div>
|
||||||
<div class="menu-item" @click="navigateTo('personal-info')">
|
<div class="stat-label">已完成</div>
|
||||||
<div class="menu-icon">
|
|
||||||
<image src="@/static/notes/menu1.png" class="menu-icon-img"></image>
|
|
||||||
</div>
|
|
||||||
<div class="menu-text">个人信息</div>
|
|
||||||
<view class="arrow-icon">
|
|
||||||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
||||||
</view>
|
|
||||||
</div>
|
|
||||||
<div class="menu-item" @click="navigateTo('change-password')">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<image src="@/static/notes/menu2.png" class="menu-icon-img"></image>
|
|
||||||
</div>
|
|
||||||
<div class="menu-text">修改密码</div>
|
|
||||||
<view class="arrow-icon">
|
|
||||||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
||||||
</view>
|
|
||||||
</div>
|
|
||||||
<div class="menu-item" @click="navigateTo('logout-records')">
|
|
||||||
<div class="menu-icon">
|
|
||||||
<image src="@/static/notes/menu3.png" class="menu-icon-img"></image>
|
|
||||||
</div>
|
|
||||||
<div class="menu-text">退出登录</div>
|
|
||||||
<view class="arrow-icon">
|
|
||||||
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
|
||||||
</view>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</view>
|
<div class="stat-item">
|
||||||
</scroll-view>
|
<div class="stat-num">26</div>
|
||||||
|
<div class="stat-label">未回复</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<view class="page-tabbar">
|
<div class="banner">
|
||||||
<TabBar :currentPath="'/pages/my/index'" @change="handleTabChange" />
|
<img src="@/static/notes/banner.png" alt="banner" />
|
||||||
</view>
|
</div>
|
||||||
</view>
|
|
||||||
|
<div class="menu-list">
|
||||||
|
<div class="menu-item" @click="navigateTo('personal-info')">
|
||||||
|
<div class="menu-icon">
|
||||||
|
<image src="@/static/notes/menu1.png" class="menu-icon-img"></image>
|
||||||
|
</div>
|
||||||
|
<div class="menu-text">个人信息</div>
|
||||||
|
<view class="arrow-icon">
|
||||||
|
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item" @click="navigateTo('change-password')">
|
||||||
|
<div class="menu-icon">
|
||||||
|
<image src="@/static/notes/menu2.png" class="menu-icon-img"></image>
|
||||||
|
</div>
|
||||||
|
<div class="menu-text">修改密码</div>
|
||||||
|
<view class="arrow-icon">
|
||||||
|
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
<div class="menu-item" @click="navigateTo('logout-records')">
|
||||||
|
<div class="menu-icon">
|
||||||
|
<image src="@/static/notes/menu3.png" class="menu-icon-img"></image>
|
||||||
|
</div>
|
||||||
|
<div class="menu-text">退出登录</div>
|
||||||
|
<view class="arrow-icon">
|
||||||
|
<u-icon name="arrow-right" color="#999" size="24"></u-icon>
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TabBar :currentPath="'/pages/my/index'" @change="handleTabChange" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import TabBar from "@/components/TabBar-optimized.vue";
|
import TabBar from "@/components/TabBar.vue";
|
||||||
import PageHeader from "@/components/PageHeader.vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -92,12 +97,7 @@ export default {
|
||||||
headerBackground: {
|
headerBackground: {
|
||||||
background: "transparent",
|
background: "transparent",
|
||||||
},
|
},
|
||||||
teacherInfo: {
|
teacherInfo: {},
|
||||||
name:'孙老师',
|
|
||||||
collegeName:'生命科学与工程学院·生物工程专业',
|
|
||||||
professionalName:'生物工程专业',
|
|
||||||
avatar:'/static/common/images/avatar_default.jpg',
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -149,69 +149,24 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
/* ===== 页面容器 - 主流三段式布局 ===== */
|
.my-page {
|
||||||
.page-container {
|
height: 100vh;
|
||||||
/* 固定定位，占满整个视口 */
|
/* background-color: #f5f6fa; */
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
/* Flex 布局 */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
/* 背景图片（保留特色） */
|
|
||||||
background-image: url("@/static/notes/bg.png");
|
background-image: url("@/static/notes/bg.png");
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 100% auto;
|
background-size: 100% auto; /* 以宽度为基准等比例缩放 */
|
||||||
|
display: flex;
|
||||||
/* 防止溢出 */
|
flex-direction: column;
|
||||||
overflow: hidden;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== 头部导航 ===== */
|
.content-wrapper {
|
||||||
.page-header {
|
|
||||||
/* 不收缩，固定高度 */
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
/* 层级 */
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 内容区域 ===== */
|
|
||||||
.page-main {
|
|
||||||
/* 占据剩余空间 */
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
/* 重要：防止 flex 子元素溢出 */
|
flex-direction: column;
|
||||||
height: 0;
|
padding-bottom: 60px; /* 为底部导航栏预留空间 */
|
||||||
|
overflow: hidden; /* 防止滚动条出现 */
|
||||||
/* 允许滚动 */
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
/* iOS 滚动优化 */
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 内容内层 ===== */
|
|
||||||
.main-content {
|
|
||||||
/* 底部留出 TabBar 空间 + 安全区域 */
|
|
||||||
padding-bottom: calc(50px + env(safe-area-inset-bottom));
|
|
||||||
|
|
||||||
/* 最小高度（确保可以滚动） */
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 底部导航 ===== */
|
|
||||||
.page-tabbar {
|
|
||||||
/* 不收缩，固定高度 */
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
/* 层级 */
|
|
||||||
z-index: 100;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-info {
|
.user-info {
|
||||||
|
|
@ -255,6 +210,13 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.statistics {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
/* margin-top: 5px;
|
||||||
|
padding: 15px 0; */
|
||||||
|
}
|
||||||
|
|
||||||
.stat-item {
|
.stat-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,466 @@
|
||||||
|
<template>
|
||||||
|
<view class="notes-page">
|
||||||
|
<PageHeader title="留言板" :is-back="false" :border-bottom="false" />
|
||||||
|
<view class="custom-tabs-box">
|
||||||
|
<u-tabs
|
||||||
|
:list="tabList"
|
||||||
|
:current="tabCurrent"
|
||||||
|
@change="onTabChange"
|
||||||
|
:is-scroll="false"
|
||||||
|
:height="80"
|
||||||
|
:font-size="28"
|
||||||
|
active-color="#4A6CF7"
|
||||||
|
inactive-color="#333333"
|
||||||
|
:bar-width="120"
|
||||||
|
:bar-height="4"
|
||||||
|
bg-color="#ffffff"
|
||||||
|
:item-width="200"
|
||||||
|
></u-tabs>
|
||||||
|
<view class="space"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容区域包装器 -->
|
||||||
|
<view class="content-wrapper">
|
||||||
|
<!-- 留言列表 -->
|
||||||
|
<scroll-view class="message-list" scroll-y>
|
||||||
|
<view v-for="(item, index) in currentMessages" :key="index">
|
||||||
|
<u-swipe-action
|
||||||
|
:options="swipeOptions"
|
||||||
|
:show="item.show"
|
||||||
|
:index="index"
|
||||||
|
@click="handleSwipeClick"
|
||||||
|
@open="(e) => handleSwipeOpen(e, index)"
|
||||||
|
@close="(e) => handleSwipeClose(e, index)"
|
||||||
|
@content-click="() => closeOther(index)"
|
||||||
|
:btn-width="80"
|
||||||
|
:disabled="false"
|
||||||
|
>
|
||||||
|
<view class="message-item">
|
||||||
|
<view class="message-header">
|
||||||
|
<view class="user-info">
|
||||||
|
<image
|
||||||
|
class="avatar"
|
||||||
|
:src="item.avatar || defaultAvatar"
|
||||||
|
></image>
|
||||||
|
<text class="username">{{ item.username }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="message-time">{{ item.time }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="message-content">
|
||||||
|
<view class="question">
|
||||||
|
<view class="question-icon">问</view>
|
||||||
|
<view class="question-text">{{ item.question }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="reply-button"
|
||||||
|
@click.stop="handleReply(item)"
|
||||||
|
v-if="!item.reply"
|
||||||
|
>
|
||||||
|
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
|
||||||
|
<text>回复</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="reply-content" v-if="item.reply">
|
||||||
|
<view class="reply-header">
|
||||||
|
<view class="reply-icon">答</view>
|
||||||
|
<view class="reply-info">
|
||||||
|
<text>{{ item.replyUser }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="reply-text"
|
||||||
|
:class="{ expanded: item.expanded }"
|
||||||
|
>{{ item.reply }}</view
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="expand-button"
|
||||||
|
v-if="item.reply.length > 100"
|
||||||
|
@click.stop="toggleExpand(item)"
|
||||||
|
>
|
||||||
|
{{ item.expanded ? "收起" : "展开" }}
|
||||||
|
<u-icon
|
||||||
|
:name="item.expanded ? 'arrow-up' : 'arrow-down'"
|
||||||
|
size="12"
|
||||||
|
></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
class="reply-button"
|
||||||
|
@click.stop="handleReply(item)"
|
||||||
|
v-if="item.reply"
|
||||||
|
>
|
||||||
|
<u-icon name="chat" color="#4a6cf7" size="16"></u-icon>
|
||||||
|
<text>回复</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-swipe-action>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 无数据提示 -->
|
||||||
|
<view class="empty-tip" v-if="currentMessages.length === 0">
|
||||||
|
暂无留言数据
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 使用TabBar组件 -->
|
||||||
|
<TabBar :currentPath="'/pages/notes/index'" @change="handleTabChange" />
|
||||||
|
|
||||||
|
<!-- 开发中提示弹窗 -->
|
||||||
|
<u-modal
|
||||||
|
v-model="showDevModal"
|
||||||
|
:show-cancel-button="false"
|
||||||
|
title="提示"
|
||||||
|
content="该功能正在开发中，敬请期待！"
|
||||||
|
@confirm="showDevModal = false"
|
||||||
|
></u-modal>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TabBar from "@/components/TabBar.vue";
|
||||||
|
import PageHeader from "@/components/PageHeader.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "NotesPage",
|
||||||
|
components: {
|
||||||
|
TabBar,
|
||||||
|
PageHeader,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList: [{ name: "未回复" }, { name: "已回复" }],
|
||||||
|
tabCurrent: 0,
|
||||||
|
activeTab: "unread",
|
||||||
|
showDevModal: false,
|
||||||
|
defaultAvatar: "/static/avatar/default-avatar.png",
|
||||||
|
unreadMessages: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
avatar: "",
|
||||||
|
username: "浙江理工生13024",
|
||||||
|
time: "2023/6/26 15:45:12",
|
||||||
|
question: "学校在录取时有没有一些专业会有特殊要求?",
|
||||||
|
reply: "",
|
||||||
|
expanded: false,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
avatar: "",
|
||||||
|
username: "理工13024",
|
||||||
|
time: "2023/6/26 15:45:12",
|
||||||
|
question: "在录取时有没有一些专业会有特殊要求?",
|
||||||
|
reply: "",
|
||||||
|
expanded: false,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
repliedMessages: [
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
avatar: "",
|
||||||
|
username: "浙江理工生13024",
|
||||||
|
time: "2023/6/26 15:45:12",
|
||||||
|
question: "学校在录取时有没有一些专业会有特殊要求?",
|
||||||
|
reply:
|
||||||
|
"学生与体健康状况必须符合教育部、卫生部、中国残疾人联合会印发的《普通高等学校招生体检工作指导意见》和人力资源社会保障部、原卫生部、原教育部、原公安部、原国家人口计划生育委员会制定的有关规定。原卫生部、原教育部、原公安部、原国家人口计划生育委员会制定的有关规定。",
|
||||||
|
replyUser: "系统回复",
|
||||||
|
expanded: false,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
swipeOptions: [
|
||||||
|
{
|
||||||
|
text: "删除",
|
||||||
|
style: {
|
||||||
|
backgroundColor: "#fa3534",
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: "15px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentMessages() {
|
||||||
|
return this.activeTab === "unread"
|
||||||
|
? this.unreadMessages
|
||||||
|
: this.repliedMessages;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onTabChange(index) {
|
||||||
|
this.tabCurrent = index;
|
||||||
|
// 根据索引设置activeTab值
|
||||||
|
this.activeTab = index === 0 ? "unread" : "replied";
|
||||||
|
// 切换选项卡时关闭所有打开的滑动按钮
|
||||||
|
this.closeAllSwipe();
|
||||||
|
},
|
||||||
|
switchTab(tab) {
|
||||||
|
this.activeTab = tab;
|
||||||
|
// 更新tabCurrent以匹配activeTab
|
||||||
|
this.tabCurrent = tab === "unread" ? 0 : 1;
|
||||||
|
// 切换选项卡时关闭所有打开的滑动按钮
|
||||||
|
this.closeAllSwipe();
|
||||||
|
},
|
||||||
|
handleTabChange(path, index) {
|
||||||
|
console.log("切换到标签页:", path, index);
|
||||||
|
},
|
||||||
|
handleReply(item) {
|
||||||
|
this.showDevModal = true;
|
||||||
|
},
|
||||||
|
toggleExpand(item) {
|
||||||
|
item.expanded = !item.expanded;
|
||||||
|
},
|
||||||
|
handleSwipeClick(e) {
|
||||||
|
const { index } = e; // 当前点击的滑动单元格索引
|
||||||
|
const btnIndex = e.index; // 点击的按钮索引
|
||||||
|
|
||||||
|
if (btnIndex === 0) {
|
||||||
|
// 删除按钮
|
||||||
|
// 删除当前消息
|
||||||
|
if (this.activeTab === "unread") {
|
||||||
|
this.unreadMessages.splice(index, 1);
|
||||||
|
} else {
|
||||||
|
this.repliedMessages.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSwipeOpen(e, index) {
|
||||||
|
// 打开滑动按钮时，关闭其他打开的滑动按钮
|
||||||
|
this.closeOther(index);
|
||||||
|
},
|
||||||
|
handleSwipeClose(e, index) {
|
||||||
|
// 处理滑动关闭事件
|
||||||
|
if (this.activeTab === "unread") {
|
||||||
|
this.unreadMessages[index].show = false;
|
||||||
|
} else {
|
||||||
|
this.repliedMessages[index].show = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeOther(index) {
|
||||||
|
// 关闭除当前外的所有滑动按钮
|
||||||
|
if (this.activeTab === "unread") {
|
||||||
|
this.unreadMessages.forEach((item, idx) => {
|
||||||
|
if (idx !== index) {
|
||||||
|
item.show = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.repliedMessages.forEach((item, idx) => {
|
||||||
|
if (idx !== index) {
|
||||||
|
item.show = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeAllSwipe() {
|
||||||
|
// 关闭所有滑动按钮
|
||||||
|
this.unreadMessages.forEach((item) => {
|
||||||
|
item.show = false;
|
||||||
|
});
|
||||||
|
this.repliedMessages.forEach((item) => {
|
||||||
|
item.show = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.notes-page {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f5f6fa;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.custom-tabs-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.space {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tabs-box >>> .u-tabs__wrapper__nav__item {
|
||||||
|
padding: 0 20px 0 0 !important; /* 调整标签项的padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tabs-box >>> .u-tabs__wrapper__nav__line {
|
||||||
|
bottom: 0 !important; /* 确保下划线位于底部 */
|
||||||
|
height: 4px !important; /* 设置下划线高度 */
|
||||||
|
border-radius: 2px !important; /* 圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-bottom: 60px; /* 为底部导航栏预留空间 */
|
||||||
|
overflow-y: auto; /* 允许内容滚动 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 留言列表样式 */
|
||||||
|
.message-list {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-item {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 15px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #4a6cf7;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.question-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-button {
|
||||||
|
height: 32px;
|
||||||
|
background-color: #f0f2fd;
|
||||||
|
color: #4a6cf7;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-button text {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-content {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ff9500;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-info {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #333;
|
||||||
|
margin-left: 28px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reply-text.expanded {
|
||||||
|
-webkit-line-clamp: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-button {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4a6cf7;
|
||||||
|
margin-top: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,533 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="test-page">
|
|
||||||
<view class="test-header">
|
|
||||||
<text class="title">WebSocket 测试工具</text>
|
|
||||||
<text class="subtitle">实时测试 WebSocket 连接和消息</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 连接状态 -->
|
|
||||||
<view class="status-card">
|
|
||||||
<view class="status-item">
|
|
||||||
<text class="label">连接状态：</text>
|
|
||||||
<text :class="['value', connectionStatus.class]">{{ connectionStatus.text }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="status-item">
|
|
||||||
<text class="label">队列消息：</text>
|
|
||||||
<text class="value">{{ queueLength }} 条</text>
|
|
||||||
</view>
|
|
||||||
<view class="status-item">
|
|
||||||
<text class="label">重连次数：</text>
|
|
||||||
<text class="value">{{ reconnectAttempts }} 次</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 连接控制 -->
|
|
||||||
<view class="control-card">
|
|
||||||
<view class="control-title">连接控制</view>
|
|
||||||
<input
|
|
||||||
class="url-input"
|
|
||||||
v-model="wsUrl"
|
|
||||||
placeholder="输入 WebSocket 地址"
|
|
||||||
/>
|
|
||||||
<view class="button-group">
|
|
||||||
<button class="btn btn-primary" @click="handleConnect" :disabled="isConnected">
|
|
||||||
连接
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-danger" @click="handleDisconnect" :disabled="!isConnected">
|
|
||||||
断开
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 消息发送 -->
|
|
||||||
<view class="message-card">
|
|
||||||
<view class="control-title">发送消息</view>
|
|
||||||
<textarea
|
|
||||||
class="message-input"
|
|
||||||
v-model="messageToSend"
|
|
||||||
placeholder="输入消息内容（JSON 格式）"
|
|
||||||
:rows="5"
|
|
||||||
></textarea>
|
|
||||||
<view class="button-group">
|
|
||||||
<button class="btn btn-success" @click="handleSendMessage" :disabled="!isConnected">
|
|
||||||
发送消息
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-secondary" @click="handleSendPing" :disabled="!isConnected">
|
|
||||||
发送心跳
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 快速测试 -->
|
|
||||||
<view class="quick-test-card">
|
|
||||||
<view class="control-title">快速测试</view>
|
|
||||||
<view class="button-group">
|
|
||||||
<button class="btn btn-info" @click="testEcho">
|
|
||||||
Echo 服务测试
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-info" @click="testLocalServer">
|
|
||||||
本地服务器测试
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 日志显示 -->
|
|
||||||
<view class="log-card">
|
|
||||||
<view class="log-header">
|
|
||||||
<text class="control-title">日志 ({{ logs.length }})</text>
|
|
||||||
<button class="btn-clear" @click="clearLogs">清空</button>
|
|
||||||
</view>
|
|
||||||
<scroll-view class="log-content" scroll-y>
|
|
||||||
<view
|
|
||||||
v-for="(log, index) in logs"
|
|
||||||
:key="index"
|
|
||||||
:class="['log-item', `log-${log.type}`]"
|
|
||||||
>
|
|
||||||
<text class="log-time">{{ log.time }}</text>
|
|
||||||
<text class="log-type">{{ log.typeText }}</text>
|
|
||||||
<text class="log-message">{{ log.message }}</text>
|
|
||||||
</view>
|
|
||||||
<view v-if="logs.length === 0" class="empty-log">
|
|
||||||
暂无日志
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import wsManager from '@/utils/websocket-manager.js'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'WebSocketTest',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// WebSocket URL
|
|
||||||
wsUrl: 'wss://echo.websocket.org',
|
|
||||||
|
|
||||||
// 连接状态
|
|
||||||
isConnected: false,
|
|
||||||
reconnectAttempts: 0,
|
|
||||||
queueLength: 0,
|
|
||||||
|
|
||||||
// 消息
|
|
||||||
messageToSend: JSON.stringify({
|
|
||||||
type: 'test',
|
|
||||||
content: 'Hello WebSocket!',
|
|
||||||
timestamp: Date.now()
|
|
||||||
}, null, 2),
|
|
||||||
|
|
||||||
// 日志
|
|
||||||
logs: [],
|
|
||||||
|
|
||||||
// 计时器
|
|
||||||
startTime: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
connectionStatus() {
|
|
||||||
if (this.isConnected) {
|
|
||||||
return { text: '已连接', class: 'status-connected' }
|
|
||||||
} else if (this.reconnectAttempts > 0) {
|
|
||||||
return { text: '重连中...', class: 'status-reconnecting' }
|
|
||||||
} else {
|
|
||||||
return { text: '未连接', class: 'status-disconnected' }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onLoad() {
|
|
||||||
this.setupEventListeners()
|
|
||||||
this.addLog('info', '测试工具已加载')
|
|
||||||
},
|
|
||||||
|
|
||||||
onUnload() {
|
|
||||||
// 清理事件监听
|
|
||||||
wsManager.off('open', this.handleOpen)
|
|
||||||
wsManager.off('close', this.handleClose)
|
|
||||||
wsManager.off('error', this.handleError)
|
|
||||||
wsManager.off('message', this.handleMessage)
|
|
||||||
wsManager.off('reconnect', this.handleReconnect)
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
// 设置事件监听
|
|
||||||
setupEventListeners() {
|
|
||||||
this.handleOpen = () => {
|
|
||||||
this.isConnected = true
|
|
||||||
this.reconnectAttempts = 0
|
|
||||||
const duration = Date.now() - this.startTime
|
|
||||||
this.addLog('success', `连接成功 (耗时 ${duration}ms)`)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handleClose = (res) => {
|
|
||||||
this.isConnected = false
|
|
||||||
this.addLog('warning', `连接关闭 (code: ${res.code})`)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handleError = (err) => {
|
|
||||||
this.addLog('error', `连接错误: ${JSON.stringify(err)}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handleMessage = (data) => {
|
|
||||||
this.addLog('message', `收到消息: ${JSON.stringify(data, null, 2)}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
this.handleReconnect = (attempts) => {
|
|
||||||
this.reconnectAttempts = attempts
|
|
||||||
this.addLog('info', `正在重连 (第 ${attempts} 次)`)
|
|
||||||
}
|
|
||||||
|
|
||||||
wsManager.on('open', this.handleOpen)
|
|
||||||
wsManager.on('close', this.handleClose)
|
|
||||||
wsManager.on('error', this.handleError)
|
|
||||||
wsManager.on('message', this.handleMessage)
|
|
||||||
wsManager.on('reconnect', this.handleReconnect)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 连接
|
|
||||||
handleConnect() {
|
|
||||||
if (!this.wsUrl) {
|
|
||||||
uni.showToast({ title: '请输入 WebSocket 地址', icon: 'none' })
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.addLog('info', `开始连接: ${this.wsUrl}`)
|
|
||||||
this.startTime = Date.now()
|
|
||||||
|
|
||||||
wsManager.connect(this.wsUrl, {
|
|
||||||
reconnectInterval: 3000,
|
|
||||||
maxReconnectAttempts: 5,
|
|
||||||
heartbeatInterval: 30000
|
|
||||||
})
|
|
||||||
|
|
||||||
this.updateState()
|
|
||||||
},
|
|
||||||
|
|
||||||
// 断开连接
|
|
||||||
handleDisconnect() {
|
|
||||||
this.addLog('info', '手动断开连接')
|
|
||||||
wsManager.close(true)
|
|
||||||
this.isConnected = false
|
|
||||||
this.reconnectAttempts = 0
|
|
||||||
},
|
|
||||||
|
|
||||||
// 发送消息
|
|
||||||
handleSendMessage() {
|
|
||||||
try {
|
|
||||||
const message = JSON.parse(this.messageToSend)
|
|
||||||
this.addLog('send', `发送消息: ${JSON.stringify(message)}`)
|
|
||||||
wsManager.send(message)
|
|
||||||
} catch (e) {
|
|
||||||
this.addLog('error', `消息格式错误: ${e.message}`)
|
|
||||||
uni.showToast({ title: 'JSON 格式错误', icon: 'none' })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 发送心跳
|
|
||||||
handleSendPing() {
|
|
||||||
const ping = {
|
|
||||||
type: 'ping',
|
|
||||||
timestamp: Date.now()
|
|
||||||
}
|
|
||||||
this.addLog('send', `发送心跳: ${JSON.stringify(ping)}`)
|
|
||||||
wsManager.send(ping)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Echo 服务测试
|
|
||||||
testEcho() {
|
|
||||||
this.wsUrl = 'wss://echo.websocket.org'
|
|
||||||
this.messageToSend = JSON.stringify({
|
|
||||||
type: 'test',
|
|
||||||
content: 'Echo 测试消息',
|
|
||||||
timestamp: Date.now()
|
|
||||||
}, null, 2)
|
|
||||||
|
|
||||||
this.addLog('info', '开始 Echo 服务测试')
|
|
||||||
uni.showToast({ title: '点击"连接"开始测试', icon: 'none' })
|
|
||||||
},
|
|
||||||
|
|
||||||
// 本地服务器测试
|
|
||||||
testLocalServer() {
|
|
||||||
this.wsUrl = 'ws://localhost:8082/ws/chat?token=test-token'
|
|
||||||
this.messageToSend = JSON.stringify({
|
|
||||||
type: 'message',
|
|
||||||
fromUserId: 'test_user',
|
|
||||||
toUserId: 'admin',
|
|
||||||
content: '本地服务器测试',
|
|
||||||
timestamp: Date.now()
|
|
||||||
}, null, 2)
|
|
||||||
|
|
||||||
this.addLog('info', '开始本地服务器测试')
|
|
||||||
uni.showToast({ title: '点击"连接"开始测试', icon: 'none' })
|
|
||||||
},
|
|
||||||
|
|
||||||
// 更新状态
|
|
||||||
updateState() {
|
|
||||||
const state = wsManager.getState()
|
|
||||||
this.isConnected = state.isConnected
|
|
||||||
this.reconnectAttempts = state.reconnectAttempts
|
|
||||||
this.queueLength = state.queueLength
|
|
||||||
},
|
|
||||||
|
|
||||||
// 添加日志
|
|
||||||
addLog(type, message) {
|
|
||||||
const typeMap = {
|
|
||||||
info: 'ℹ️ 信息',
|
|
||||||
success: '✅ 成功',
|
|
||||||
warning: '⚠️ 警告',
|
|
||||||
error: '❌ 错误',
|
|
||||||
send: '📤 发送',
|
|
||||||
message: '📩 接收'
|
|
||||||
}
|
|
||||||
|
|
||||||
const now = new Date()
|
|
||||||
const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
|
|
||||||
|
|
||||||
this.logs.unshift({
|
|
||||||
type,
|
|
||||||
typeText: typeMap[type] || type,
|
|
||||||
message,
|
|
||||||
time
|
|
||||||
})
|
|
||||||
|
|
||||||
// 最多保留 100 条日志
|
|
||||||
if (this.logs.length > 100) {
|
|
||||||
this.logs.pop()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// 清空日志
|
|
||||||
clearLogs() {
|
|
||||||
this.logs = []
|
|
||||||
this.addLog('info', '日志已清空')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.test-page {
|
|
||||||
padding: 20rpx;
|
|
||||||
background-color: #f5f6fa;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.test-header {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40rpx 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card,
|
|
||||||
.control-card,
|
|
||||||
.message-card,
|
|
||||||
.quick-test-card,
|
|
||||||
.log-card {
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
padding: 30rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-connected {
|
|
||||||
color: #52c41a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-reconnecting {
|
|
||||||
color: #faad14;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-disconnected {
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.control-title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-input,
|
|
||||||
.message-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 20rpx;
|
|
||||||
border: 1rpx solid #d9d9d9;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-input {
|
|
||||||
min-height: 200rpx;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
flex: 1;
|
|
||||||
height: 80rpx;
|
|
||||||
line-height: 80rpx;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #1890ff;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: #ff4d4f;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-success {
|
|
||||||
background: #52c41a;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: #d9d9d9;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info {
|
|
||||||
background: #722ed1;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
padding: 10rpx 20rpx;
|
|
||||||
background: #f0f0f0;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-content {
|
|
||||||
height: 600rpx;
|
|
||||||
border: 1rpx solid #f0f0f0;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
padding: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-item {
|
|
||||||
padding: 20rpx;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 1.6;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-info {
|
|
||||||
background: #e6f7ff;
|
|
||||||
border-left: 4rpx solid #1890ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-success {
|
|
||||||
background: #f6ffed;
|
|
||||||
border-left: 4rpx solid #52c41a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-warning {
|
|
||||||
background: #fffbe6;
|
|
||||||
border-left: 4rpx solid #faad14;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-error {
|
|
||||||
background: #fff2f0;
|
|
||||||
border-left: 4rpx solid #ff4d4f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-send {
|
|
||||||
background: #f9f0ff;
|
|
||||||
border-left: 4rpx solid #722ed1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-message {
|
|
||||||
background: #fff0f6;
|
|
||||||
border-left: 4rpx solid #eb2f96;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-time {
|
|
||||||
color: #999;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-type {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-message {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-log {
|
|
||||||
text-align: center;
|
|
||||||
padding: 100rpx 0;
|
|
||||||
color: #999;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,310 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="page-container">
|
|
||||||
<view class="page-header">
|
|
||||||
<PageHeader title="人工转接" :is-back="false" :border-bottom="false" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<scroll-view
|
|
||||||
class="page-main"
|
|
||||||
scroll-y
|
|
||||||
enable-back-to-top
|
|
||||||
>
|
|
||||||
<view class="main-content">
|
|
||||||
<!-- 服务状态卡片 -->
|
|
||||||
<view class="status-card">
|
|
||||||
<view class="status-title">人工服务</view>
|
|
||||||
<view class="status-content">
|
|
||||||
<view class="status-badge" :class="isOnline ? 'online' : 'offline'">
|
|
||||||
{{ isOnline ? '在线' : '离线' }}
|
|
||||||
</view>
|
|
||||||
<view class="status-desc">
|
|
||||||
{{ isOnline ? '客服正在为您服务' : '当前暂无客服在线' }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 人工客服列表 -->
|
|
||||||
<view class="section-title">在线客服</view>
|
|
||||||
<view class="agent-list">
|
|
||||||
<view class="agent-item" v-for="(agent, index) in agentList" :key="index" @click="handleTransfer(agent)">
|
|
||||||
<view class="agent-avatar-wrapper">
|
|
||||||
<image class="agent-avatar" :src="agent.avatar || defaultAvatar"></image>
|
|
||||||
<view class="online-dot" v-if="agent.online"></view>
|
|
||||||
</view>
|
|
||||||
<view class="agent-info">
|
|
||||||
<view class="agent-name">{{ agent.name }}</view>
|
|
||||||
<view class="agent-status">{{ agent.statusText }}</view>
|
|
||||||
</view>
|
|
||||||
<view class="agent-action">
|
|
||||||
<u-button
|
|
||||||
size="mini"
|
|
||||||
type="primary"
|
|
||||||
:disabled="!agent.online"
|
|
||||||
@click.stop="handleTransfer(agent)"
|
|
||||||
>
|
|
||||||
{{ agent.online ? '转接' : '离线' }}
|
|
||||||
</u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 无数据提示 -->
|
|
||||||
<view class="empty-tip" v-if="agentList.length === 0">
|
|
||||||
暂无客服在线
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
|
|
||||||
<view class="page-tabbar">
|
|
||||||
<TabBar :currentPath="'/pages/manual-transfer/index'" @change="handleTabChange" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<u-modal
|
|
||||||
v-model="showModal"
|
|
||||||
:show-cancel-button="true"
|
|
||||||
title="人工转接"
|
|
||||||
:content="modalContent"
|
|
||||||
@confirm="confirmTransfer"
|
|
||||||
@cancel="showModal = false"
|
|
||||||
></u-modal>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import TabBar from "@/components/TabBar-optimized.vue";
|
|
||||||
import PageHeader from "@/components/PageHeader.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "TransferPage",
|
|
||||||
components: {
|
|
||||||
TabBar,
|
|
||||||
PageHeader,
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
showModal: false,
|
|
||||||
modalContent: '',
|
|
||||||
selectedAgent: null,
|
|
||||||
defaultAvatar: "/static/avatar/default-avatar.png",
|
|
||||||
isOnline: true,
|
|
||||||
agentList: [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "客服小王",
|
|
||||||
avatar: "",
|
|
||||||
online: true,
|
|
||||||
statusText: "空闲中",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "客服小李",
|
|
||||||
avatar: "",
|
|
||||||
online: true,
|
|
||||||
statusText: "忙碌中",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "客服小张",
|
|
||||||
avatar: "",
|
|
||||||
online: false,
|
|
||||||
statusText: "离线",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleTabChange(path, index) {
|
|
||||||
console.log("切换到标签页:", path, index);
|
|
||||||
},
|
|
||||||
handleTransfer(agent) {
|
|
||||||
if (!agent.online) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '该客服当前离线',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.selectedAgent = agent;
|
|
||||||
this.modalContent = `确认转接到${agent.name}吗？`;
|
|
||||||
this.showModal = true;
|
|
||||||
},
|
|
||||||
confirmTransfer() {
|
|
||||||
// 这里可以执行实际的转接逻辑
|
|
||||||
uni.showToast({
|
|
||||||
title: '正在为您转接...',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
this.showModal = false;
|
|
||||||
|
|
||||||
// 模拟跳转到聊天页面
|
|
||||||
setTimeout(() => {
|
|
||||||
// uni.navigateTo({
|
|
||||||
// url: '/pages/message/dialogBox/dialogBox?agentId=' + this.selectedAgent.id
|
|
||||||
// });
|
|
||||||
}, 1000);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* ===== 页面容器 - 主流三段式布局 ===== */
|
|
||||||
.page-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #f5f6fa;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 头部导航 ===== */
|
|
||||||
.page-header {
|
|
||||||
flex-shrink: 0;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 内容区域 ===== */
|
|
||||||
.page-main {
|
|
||||||
flex: 1;
|
|
||||||
height: 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 内容内层 ===== */
|
|
||||||
.main-content {
|
|
||||||
padding: 10px;
|
|
||||||
padding-bottom: calc(50px + env(safe-area-inset-bottom) + 10px);
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 底部导航 ===== */
|
|
||||||
.page-tabbar {
|
|
||||||
flex-shrink: 0;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-card {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.online {
|
|
||||||
background-color: #52c41a;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.offline {
|
|
||||||
background-color: #999;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-desc {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(255, 255, 255, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin: 15px 0 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-list {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 15px;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-avatar-wrapper {
|
|
||||||
position: relative;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.online-dot {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 2px;
|
|
||||||
right: 2px;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background-color: #52c41a;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-name {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-status {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.agent-action {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.empty-tip {
|
|
||||||
text-align: center;
|
|
||||||
padding: 50px 20px;
|
|
||||||
color: #999;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<!-- 图标文件内容，这是二进制文件，实际使用时需要上传真实图片 -->
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// 这是一个占位文件，需要替换为实际的AI头像图标
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
// 这是一个占位文件，需要替换为实际的聊天图标
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 541 B |
Binary file not shown.
|
After Width: | Height: | Size: 654 B |
Binary file not shown.
|
After Width: | Height: | Size: 703 B |
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
Binary file not shown.
|
After Width: | Height: | Size: 745 B |
Binary file not shown.
|
After Width: | Height: | Size: 749 B |
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
Binary file not shown.
|
After Width: | Height: | Size: 707 B |
Binary file not shown.
|
After Width: | Height: | Size: 742 B |
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
Binary file not shown.
|
After Width: | Height: | Size: 597 B |
Binary file not shown.
|
After Width: | Height: | Size: 662 B |
Binary file not shown.
|
After Width: | Height: | Size: 659 B |
Binary file not shown.
|
After Width: | Height: | Size: 761 B |
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 789 B |
Binary file not shown.
|
After Width: | Height: | Size: 375 B |
Binary file not shown.
|
After Width: | Height: | Size: 352 B |
Binary file not shown.
|
After Width: | Height: | Size: 364 B |
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
Binary file not shown.
|
After Width: | Height: | Size: 338 B |
Binary file not shown.
|
After Width: | Height: | Size: 382 B |
Binary file not shown.
|
After Width: | Height: | Size: 389 B |
Binary file not shown.
|
After Width: | Height: | Size: 313 B |
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
Binary file not shown.
|
After Width: | Height: | Size: 384 B |
Binary file not shown.
|
After Width: | Height: | Size: 377 B |
Binary file not shown.
|
After Width: | Height: | Size: 399 B |
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 310 B |
Binary file not shown.
|
Before Width: | Height: | Size: 262 B |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 412 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
After Width: | Height: | Size: 796 B |
Binary file not shown.
|
After Width: | Height: | Size: 419 B |
Binary file not shown.
|
After Width: | Height: | Size: 743 B |
Binary file not shown.
|
After Width: | Height: | Size: 524 B |
Binary file not shown.
|
After Width: | Height: | Size: 206 B |
Binary file not shown.
|
After Width: | Height: | Size: 514 B |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 212 B |
Binary file not shown.
|
After Width: | Height: | Size: 239 B |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 402 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue