添加客服页面
This commit is contained in:
熊丽君
BIN
src/assets/image/empty.png
Normal file
BIN
src/assets/image/empty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
src/assets/loading.gif
Normal file
BIN
src/assets/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
@ -131,6 +131,11 @@ export const constantRoutes = [
|
||||
component: resolve => require(['@/views/startEvaluation'], resolve),
|
||||
name: 'startEvaluation'
|
||||
},
|
||||
{
|
||||
path: '/customerService',
|
||||
component: resolve => require(['@/views/customerService'], resolve),
|
||||
name: 'customerService'
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: resolve => require(['@/views/error/404'], resolve),
|
||||
|
||||
611
src/views/customerService.vue
Normal file
611
src/views/customerService.vue
Normal file
@ -0,0 +1,611 @@
|
||||
<template>
|
||||
<div class="service_page">
|
||||
<div class="chatroom">
|
||||
<div class="header">
|
||||
<img src="@/assets/logo/logo.png" alt="嘉策人工logo" />
|
||||
<p>嘉策人工客服</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<!-- 聊天区域 -->
|
||||
<div class="chatBox">
|
||||
<!-- 聊天窗 -->
|
||||
<div class="chatWindow" id="chatWindow">
|
||||
<div class="loading" v-if="isLoading">
|
||||
<img
|
||||
class="loadingImg"
|
||||
src="../assets/loading.gif"
|
||||
alt="加载中"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="chatBubbleBox"
|
||||
v-for="(item, index) in chats"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="chatBubbleTime"
|
||||
v-if="item.send_timestamp && item.time_show"
|
||||
>
|
||||
<span>{{ item.show_time }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="chatBubble"
|
||||
:class="{ chatBubbleUser: item.sender != 0 }"
|
||||
>
|
||||
<div name="亮亮" class="avatar" v-if="item.sender == 0"></div>
|
||||
<div class="msgBox">
|
||||
<div class="bubbleBox" v-if="item.sender == 1">
|
||||
<p>{{ item.send_con }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="bubbleBox"
|
||||
v-else-if="item.sender == 0 && item.send_con[0].msgInfo"
|
||||
>
|
||||
<p
|
||||
v-for="(item_msg, index_msg) in item.send_con"
|
||||
:key="index_msg"
|
||||
>
|
||||
{{ item_msg.msgInfo }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="bubbleBox" v-else-if="item.sender == 0">
|
||||
<p>{{ item.send_con }}</p>
|
||||
</div>
|
||||
<div
|
||||
class="bubbleBox listBox"
|
||||
v-if="item.sender == 0 && item.list"
|
||||
>
|
||||
<div
|
||||
class="bubbleList"
|
||||
v-for="(item_list, index_list) in item.list"
|
||||
:key="index_list"
|
||||
@click="goDetail(item_list)"
|
||||
>
|
||||
<div class="listTitle">
|
||||
{{
|
||||
item_list.title ||
|
||||
item_list.lawTitle ||
|
||||
item_list.contractName ||
|
||||
item_list.caseTitle
|
||||
}}
|
||||
</div>
|
||||
<img src="@/assets/logo/logo.png" alt="查看详情" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 聊天输入框 -->
|
||||
<div class="chatInput">
|
||||
<textarea
|
||||
placeholder="请输入您的问题..."
|
||||
v-model="message"
|
||||
@keydown="stopEnter"
|
||||
@keyup.enter="send"
|
||||
></textarea>
|
||||
<div class="sendBtn" @click="send">发送</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 辅助工具 -->
|
||||
<!-- <div class="tools">
|
||||
<div class="toolsBox" v-if="tool_show == -1">
|
||||
<img
|
||||
v-for="(item, index) in tools"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
:alt="item.name"
|
||||
@click="getTool(index)"
|
||||
/>
|
||||
</div>
|
||||
<legislation v-else-if="tool_show == 0"></legislation>
|
||||
<lawcase v-else-if="tool_show == 1"></lawcase>
|
||||
<dispute v-else-if="tool_show == 2"></dispute>
|
||||
<aidedtools v-else-if="tool_show == 3"></aidedtools>
|
||||
<replayDetail
|
||||
:detail="replyDetail"
|
||||
v-else-if="tool_show == -2"
|
||||
></replayDetail>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userid: '23941',
|
||||
// 待发送信息
|
||||
message: '',
|
||||
isEnter: false, //是否处于停止回车
|
||||
// 聊天记录(假设)
|
||||
chats: [
|
||||
{
|
||||
sender: 0, //发送人，0机器人 1用户
|
||||
send_con: '你好，我是嘉策人工客服，有问题请咨询我!',
|
||||
send_timestamp: '1607731220000' //发送时间,存时间戳好进行判断，若聊天间隔3分钟内，不重复显示时间
|
||||
}
|
||||
],
|
||||
// 答复详情
|
||||
replyDetail: {},
|
||||
isLoading: 0 //是否正在加载中，0否1是
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// localStorage.removeItem("chatsHistory");
|
||||
this.chats = JSON.parse(localStorage.getItem('chatsHistory'));
|
||||
if (!this.chats) {
|
||||
var chat = [
|
||||
{
|
||||
sender: 0, //发送人，0机器人1用户
|
||||
send_con: '你好，我是嘉策人工客服，有问题请咨询我!'
|
||||
}
|
||||
];
|
||||
chat[0].send_timestamp = this.getTime();
|
||||
localStorage.setItem('chatsHistory', JSON.stringify(chat));
|
||||
this.chats = JSON.parse(localStorage.getItem('chatsHistory'));
|
||||
this.getIsShowTime();
|
||||
} else {
|
||||
this.getIsShowTime();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['avatar'])
|
||||
},
|
||||
mounted() {
|
||||
this.chatWindowActive();
|
||||
},
|
||||
methods: {
|
||||
// 原回车键失去回车功能
|
||||
stopEnter(event) {
|
||||
if (event.keyCode === 13) {
|
||||
event.preventDefault(); // 阻止浏览器默认换行操作
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// 获取当前时间戳
|
||||
getTime() {
|
||||
var now_timestamp = Date.parse(new Date());
|
||||
return now_timestamp;
|
||||
},
|
||||
// 获取是否展示时间的标志
|
||||
getIsShowTime() {
|
||||
var now_timestamp = Date.parse(new Date());
|
||||
var minute_timestamp = 3 * 60 * 1000; //3分钟
|
||||
var day_timestamp = 24 * 60 * 60 * 1000; //1天
|
||||
var week_timestamp = day_timestamp * 7; //7天
|
||||
|
||||
var i = 0;
|
||||
for (var chat of this.chats) {
|
||||
var howlong = now_timestamp - chat.send_timestamp;
|
||||
var time = new Date(parseInt(chat.send_timestamp));
|
||||
var hour = time.getHours().toString();
|
||||
if (hour.length < 2) {
|
||||
hour = '0' + hour;
|
||||
}
|
||||
var minute = time.getMinutes().toString();
|
||||
if (minute.length < 2) {
|
||||
minute = '0' + minute;
|
||||
}
|
||||
// 展示时间格式
|
||||
if (howlong > week_timestamp) {
|
||||
//距今7天以上，显示日期
|
||||
var year = time.getFullYear().toString();
|
||||
var month = (time.getMonth() + 1).toString();
|
||||
if (month.length < 2) {
|
||||
month = '0' + month;
|
||||
}
|
||||
var day = time.getDate().toString();
|
||||
if (day.length < 2) {
|
||||
day = '0' + day;
|
||||
}
|
||||
chat.show_time =
|
||||
year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
|
||||
} else if (howlong > day_timestamp) {
|
||||
// 距今7天以内超过1天，显示星期
|
||||
var weekdays = [
|
||||
'星期天',
|
||||
'星期一',
|
||||
'星期二',
|
||||
'星期三',
|
||||
'星期四',
|
||||
'星期五',
|
||||
'星期六'
|
||||
];
|
||||
var weekday = time.getDay().toString();
|
||||
chat.show_time = weekdays[weekday] + ' ' + hour + ':' + minute;
|
||||
} else {
|
||||
// 24小时内，显示今天
|
||||
var day_now = new Date(parseInt(now_timestamp)).getDate();
|
||||
var day_time = time.getDate();
|
||||
if (day_now == day_time) {
|
||||
chat.show_time = '今天 ' + hour + ':' + minute;
|
||||
} else {
|
||||
chat.show_time = '昨天 ' + hour + ':' + minute;
|
||||
}
|
||||
}
|
||||
// 是否展示时间
|
||||
this.chats[0].time_show = true;
|
||||
if (i > 0) {
|
||||
var interval = chat.send_timestamp - this.chats[i - 1].send_timestamp;
|
||||
if (interval > minute_timestamp) {
|
||||
chat.time_show = true;
|
||||
} else {
|
||||
chat.time_show = false;
|
||||
}
|
||||
}
|
||||
i++;
|
||||
}
|
||||
},
|
||||
// 查看详情
|
||||
goDetail(item) {
|
||||
if (item.contractName) {
|
||||
//答复类型为“合同”
|
||||
alert('程序员还在开发中...');
|
||||
return;
|
||||
} else {
|
||||
this.tool_show = -2;
|
||||
this.replyDetail = item;
|
||||
}
|
||||
},
|
||||
// 聊天窗内容置底
|
||||
chatWindowActive() {
|
||||
this.$nextTick(() => {
|
||||
var div = document.getElementById('chatWindow');
|
||||
div.scrollTop = div.scrollHeight;
|
||||
});
|
||||
},
|
||||
// 发送消息
|
||||
send() {
|
||||
if (this.message == '') {
|
||||
alert('不能发送空白信息');
|
||||
return;
|
||||
}
|
||||
this.chats.push({
|
||||
sender: 1,
|
||||
send_con: this.message,
|
||||
send_timestamp: this.getTime()
|
||||
});
|
||||
this.getIsShowTime();
|
||||
this.chatWindowActive();
|
||||
let message = this.message;
|
||||
this.message = '';
|
||||
this.isLoading = 1; //加载中
|
||||
this.$axios({
|
||||
url: 'http://rpai.365lawhelp.com/api/Reply/getReply',
|
||||
method: 'post',
|
||||
data: {
|
||||
message,
|
||||
appuid: '23941' //测试使用id
|
||||
}
|
||||
}).then(res => {
|
||||
var that = this;
|
||||
if (
|
||||
res.data.replayType == 'NEEDCONTRACTUSER' ||
|
||||
res.data.replayType == 'MSG' ||
|
||||
res.data.replayType == 'UNKNOWN'
|
||||
) {
|
||||
setTimeout(function() {
|
||||
that.chats.push({
|
||||
sender: 0,
|
||||
send_con: res.data.msgInfos,
|
||||
send_timestamp: that.getTime(),
|
||||
type: res.data.replayType
|
||||
});
|
||||
that.isLoading = 0;
|
||||
that.getIsShowTime();
|
||||
that.chatWindowActive();
|
||||
that.updateHistory(that.chats.length);
|
||||
}, 1000);
|
||||
} else {
|
||||
let all;
|
||||
if (res.data.replayType == 'QA') {
|
||||
//输入"你能做些什么"测试，右侧进入问答页面
|
||||
all = res.data.replyQADatas;
|
||||
} else if (res.data.replayType == 'CONTRACT') {
|
||||
//输入"劳动合同"测试，跳转下载链接
|
||||
all = res.data.replyContractDatas;
|
||||
} else if (res.data.replayType == 'LAW') {
|
||||
//输入"宪法"测试，右侧进入法律页面
|
||||
all = res.data.replyLawDatas;
|
||||
} else if (res.data.replayType == 'CASE') {
|
||||
//输入"强奸案案例"测试，右侧进入案例页面
|
||||
all = res.data.replyCaseDatas;
|
||||
}
|
||||
let list = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (all[i]) {
|
||||
list.push(all[i]);
|
||||
}
|
||||
}
|
||||
setTimeout(function() {
|
||||
that.chats.push({
|
||||
sender: 0,
|
||||
send_con: res.data.msgInfos,
|
||||
send_timestamp: that.getTime(),
|
||||
type: res.data.replayType,
|
||||
list
|
||||
});
|
||||
that.isLoading = 0;
|
||||
that.getIsShowTime();
|
||||
that.chatWindowActive();
|
||||
that.updateHistory(that.chats.length);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 更新聊天记录
|
||||
updateHistory(len) {
|
||||
let chats = [];
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
// unshift 将新项添加到数组起始位置
|
||||
// 这里是倒着把this.chats的最近20条数据作为历史记录插入chats数组
|
||||
if (this.chats[len - i]) {
|
||||
chats.unshift(this.chats[len - i]);
|
||||
}
|
||||
}
|
||||
localStorage.setItem('chatsHistory', JSON.stringify(chats));
|
||||
},
|
||||
// 获取工具
|
||||
getTool(index) {
|
||||
this.tool_show = index;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service_page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: #c0cad5;
|
||||
|
||||
.chatroom {
|
||||
width: 73%;
|
||||
min-width: 1000px;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 5px 24px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #3699ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
img {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: block;
|
||||
margin-left: 40px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 720px;
|
||||
display: flex;
|
||||
.chatBox {
|
||||
width: 100%;
|
||||
height: 720px;
|
||||
border-right: 4px solid #e6e6e6;
|
||||
.chatWindow {
|
||||
height: 586px;
|
||||
background: #f2f2f2;
|
||||
border-bottom: 4px solid #e6e6e6;
|
||||
overflow-y: scroll;
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
display: block;
|
||||
width: 240px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.chatBubbleBox {
|
||||
.chatBubbleTime {
|
||||
text-align: center;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 4px 0 16px;
|
||||
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
background: #dadada;
|
||||
border-radius: 4px;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.chatBubble {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.avatar {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
// background-color: #ffffff;
|
||||
background-image: url('~@/assets/logo/logo.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.msgBox {
|
||||
max-width: 50%;
|
||||
.bubbleBox {
|
||||
p {
|
||||
font-size: 15px;
|
||||
font-family: PingFang SC;
|
||||
color: #3b3b3b;
|
||||
display: inline-block;
|
||||
padding: 12.5px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.listBox {
|
||||
padding: 12.5px 20px;
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
.bubbleList {
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.listTitle {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC;
|
||||
color: #3699ff;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
img {
|
||||
width: 9px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chatBubbleUser {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.chatBubbleBox:first-child {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.chatWindow::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.chatWindow::-webkit-scrollbar-thumb {
|
||||
background-color: #d2d2d2;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.chatInput {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
position: relative;
|
||||
|
||||
textarea {
|
||||
width: 93%;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
display: block;
|
||||
border: 0;
|
||||
resize: none;
|
||||
outline: none;
|
||||
cursor: default;
|
||||
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
|
||||
textarea::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
textarea::-webkit-scrollbar-thumb {
|
||||
background-color: #d2d2d2;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.sendBtn {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
background: #3699ff;
|
||||
border-radius: 4px;
|
||||
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
bottom: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tools {
|
||||
width: 27%;
|
||||
min-width: 268px;
|
||||
height: 720px;
|
||||
.toolsBox {
|
||||
margin-top: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
img {
|
||||
width: 81px;
|
||||
height: 80px;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<!-- 筛选部分 -->
|
||||
<div class="screen">
|
||||
<div class="screen_l">
|
||||
<div class="screen_l" v-loading="loading">
|
||||
<!-- 检索条件 -->
|
||||
<div class="screen_l_t">
|
||||
<div class="screen_l_t_item">
|
||||
@ -93,6 +93,18 @@
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;margin:30px 0" v-show="!total">
|
||||
<div
|
||||
style="width:210px;height:210px;display: inline-block;color:#999"
|
||||
>
|
||||
<img
|
||||
style="width:100%;height:100%;"
|
||||
src="@/assets/image/empty.png"
|
||||
alt=""
|
||||
/>
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
@ -112,6 +124,7 @@ import { getScienceResultList } from '@/api/home/demand';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
@ -130,11 +143,24 @@ export default {
|
||||
computed: {
|
||||
...mapGetters(['token'])
|
||||
},
|
||||
watch: {
|
||||
'queryParams.field'() {
|
||||
this.getList();
|
||||
},
|
||||
'queryParams.maturityId'() {
|
||||
this.getList();
|
||||
},
|
||||
'queryParams.labelId'() {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getScienceResultList(this.queryParams).then(({ data }) => {
|
||||
this.listData = data.list;
|
||||
this.total = data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleClick() {},
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
</div>
|
||||
<!-- 筛选部分 -->
|
||||
<div class="screen">
|
||||
<div class="screen_l">
|
||||
<div class="screen_l" v-loading="loading">
|
||||
<!-- 检索条件 -->
|
||||
<div class="screen_l_t">
|
||||
<div class="screen_l_t_item">
|
||||
@ -69,8 +69,21 @@
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center;margin:30px 0" v-show="!total">
|
||||
<div
|
||||
style="width:210px;height:210px;display: inline-block;color:#999"
|
||||
>
|
||||
<img
|
||||
style="width:100%;height:100%;"
|
||||
src="@/assets/image/empty.png"
|
||||
alt=""
|
||||
/>
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-show="total > 0"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="queryParams.pageNum"
|
||||
@ -98,6 +111,7 @@ import { getEnterpriseNeedList } from '@/api/home/demand';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
activeName: '1',
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -115,11 +129,21 @@ export default {
|
||||
computed: {
|
||||
...mapGetters(['token'])
|
||||
},
|
||||
watch: {
|
||||
'queryParams.field'() {
|
||||
this.getList();
|
||||
},
|
||||
'queryParams.type'() {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true;
|
||||
getEnterpriseNeedList(this.queryParams).then(({ data }) => {
|
||||
this.demandData = data.list;
|
||||
this.total = data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
|
||||
@ -144,76 +144,166 @@
|
||||
<!-- 城市列表 -->
|
||||
<div class="city_list">
|
||||
<div>
|
||||
<img src="@/assets/image/city/01.png" alt="" />
|
||||
<span>安徽</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '1', val: '安徽' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/01.png" alt="" />
|
||||
<span>安徽</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/02.png" alt="" />
|
||||
<span>合肥</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '合肥' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/02.png" alt="" />
|
||||
<span>合肥</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/03.png" alt="" />
|
||||
<span>芜湖</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '芜湖' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/03.png" alt="" />
|
||||
<span>芜湖</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/04.png" alt="" />
|
||||
<span>蚌埠</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '蚌埠' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/04.png" alt="" />
|
||||
<span>蚌埠</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/05.png" alt="" />
|
||||
<span>淮南</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '淮南' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/05.png" alt="" />
|
||||
<span>淮南</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/06.png" alt="" />
|
||||
<span>马鞍山</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '马鞍山' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/06.png" alt="" />
|
||||
<span>马鞍山</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/07.png" alt="" />
|
||||
<span>淮北</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '淮北' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/07.png" alt="" />
|
||||
<span>淮北</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/08.png" alt="" />
|
||||
<span>铜陵</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '铜陵' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/08.png" alt="" />
|
||||
<span>铜陵</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/09.png" alt="" />
|
||||
<span>安庆</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '安庆' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/09.png" alt="" />
|
||||
<span>安庆</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/10.png" alt="" />
|
||||
<span>滁州</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '滁州' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/10.png" alt="" />
|
||||
<span>滁州</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/11.png" alt="" />
|
||||
<span>阜阳</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '阜阳' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/11.png" alt="" />
|
||||
<span>阜阳</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/12.png" alt="" />
|
||||
<span>宿州</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '宿州' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/12.png" alt="" />
|
||||
<span>宿州</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/13.png" alt="" />
|
||||
<span>六安</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '六安' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/13.png" alt="" />
|
||||
<span>六安</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/14.png" alt="" />
|
||||
<span>亳州</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '亳州' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/14.png" alt="" />
|
||||
<span>亳州</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/15.png" alt="" />
|
||||
<span>池州</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '池州' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/15.png" alt="" />
|
||||
<span>池州</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/16.png" alt="" />
|
||||
<span>宣城</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '宣城' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/16.png" alt="" />
|
||||
<span>宣城</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/17.png" alt="" />
|
||||
<span>黄山</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '2', val: '黄山' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/17.png" alt="" />
|
||||
<span>黄山</span>
|
||||
</router-link>
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/image/city/18.png" alt="" />
|
||||
<span>合肥高新区</span>
|
||||
<router-link
|
||||
target="_blank"
|
||||
:to="{ path: '/notice', query: { key: '3', val: '合肥高新区' } }"
|
||||
>
|
||||
<img src="@/assets/image/city/18.png" alt="" />
|
||||
<span>合肥高新区</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -240,7 +330,9 @@
|
||||
合肥嘉策信息技术服务有限公司于2018年05月2日成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
|
||||
</p>
|
||||
</div>
|
||||
<el-button type="warning">更多</el-button>
|
||||
<router-link to="">
|
||||
<el-button type="warning">更多</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,6 +50,12 @@ export default {
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let { path } = this.$route;
|
||||
this.index = this.list.findIndex(item => {
|
||||
return item.path == path;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
消息通知
|
||||
<div class="news_page">
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div class="item_icon">
|
||||
<div class="red"></div>
|
||||
</div>
|
||||
<div class="item_r">
|
||||
<div class="item_r_t">
|
||||
<div class="flex">
|
||||
<div class="col_333">新政策匹配通知</div>
|
||||
<div class="col_999">5-29</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_r_b">
|
||||
<div class="flex">
|
||||
<div class="col_999">
|
||||
现有一项新的符合贵公司条件的政策可申报，快查看详情吧！
|
||||
</div>
|
||||
<!-- 跳转详情 -->
|
||||
<router-link to="">
|
||||
<div class="col_333">
|
||||
查看详情<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.news_page {
|
||||
.list {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
.item_icon {
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5 url(~@/assets/image/icon11.png) no-repeat center
|
||||
center;
|
||||
background-size: 32%;
|
||||
.red {
|
||||
position: absolute;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background-color: red;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.item_r {
|
||||
flex: 1;
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.col_333 {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.col_999 {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item_r_b {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<!-- 筛选部分 -->
|
||||
<div class="screen">
|
||||
<div class="screen_l">
|
||||
<div class="screen_l" v-loading="loading">
|
||||
<!-- 检索条件 -->
|
||||
<div class="screen_l_t">
|
||||
<div class="screen_l_t_item">
|
||||
@ -117,6 +117,19 @@
|
||||
</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center;margin:30px 0" v-show="!total">
|
||||
<div
|
||||
style="width:210px;height:210px;display: inline-block;color:#999"
|
||||
>
|
||||
<img
|
||||
style="width:100%;height:100%;"
|
||||
src="@/assets/image/empty.png"
|
||||
alt=""
|
||||
/>
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
@ -168,7 +181,7 @@
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
v-show="portraitData.length <= 4"
|
||||
v-show="portraitData.length >= 4"
|
||||
>
|
||||
查看更多
|
||||
</el-button>
|
||||
@ -191,7 +204,9 @@ import { userInfo, getLabelSetting } from '@/api/home/info';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
activeName: '',
|
||||
activeID: '',
|
||||
city: '', // 临时城市
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@ -219,6 +234,8 @@ export default {
|
||||
}
|
||||
],
|
||||
levelList_2: [],
|
||||
levelList_3: [],
|
||||
levelList_4: [],
|
||||
// 归口选项
|
||||
attributeOptions: [
|
||||
{
|
||||
@ -251,27 +268,32 @@ export default {
|
||||
city(a, b) {
|
||||
if (a == '' || a == 1) {
|
||||
this.queryParams.city = this.city;
|
||||
this.getList();
|
||||
} else if (a == 2) {
|
||||
getDictListByStatus({ type: 5 }).then(({ data }) => {
|
||||
this.levelList_2 = data;
|
||||
this.queryParams.city = '1417717740679987200';
|
||||
});
|
||||
this.levelList_2 = this.levelList_3;
|
||||
this.queryParams.city = this.activeID || this.levelList_2[0].id;
|
||||
} else if (a == 3) {
|
||||
getDictListByStatus({ type: 6 }).then(({ data }) => {
|
||||
this.levelList_2 = data;
|
||||
this.queryParams.city = '1417719159088742400';
|
||||
});
|
||||
this.levelList_2 = this.levelList_4;
|
||||
this.queryParams.city = this.levelList_2[0].id;
|
||||
}
|
||||
},
|
||||
'queryParams.attribute'() {
|
||||
this.getList();
|
||||
},
|
||||
'queryParams.labelIds'() {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.queryParams.labelId = this.queryParams.labelIds.filter(item => {
|
||||
return item !== '';
|
||||
});
|
||||
getPolicyList(this.queryParams).then(({ data }) => {
|
||||
this.dataList = data.list;
|
||||
this.total = data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 获取企业画像数据列表
|
||||
@ -286,11 +308,69 @@ export default {
|
||||
this.portraitTotal = data.total;
|
||||
});
|
||||
},
|
||||
// 获取标签
|
||||
getLabelList(flag) {
|
||||
getLabel().then(({ data }) => {
|
||||
this.labelList = data;
|
||||
for (let i = 0; i < this.labelList.length; i++) {
|
||||
this.queryParams.labelIds.push('');
|
||||
}
|
||||
this.getCityList();
|
||||
flag ? this.getList() : '';
|
||||
});
|
||||
},
|
||||
handleClick() {
|
||||
this.getPortraitList();
|
||||
},
|
||||
// 获取所有城市列表
|
||||
getCityList() {
|
||||
getDictListByStatus({ type: 5 }).then(({ data }) => {
|
||||
this.levelList_3 = data;
|
||||
});
|
||||
getDictListByStatus({ type: 6 }).then(({ data }) => {
|
||||
this.levelList_4 = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const { key, val } = this.$route.query;
|
||||
if (key) {
|
||||
getLabel().then(({ data }) => {
|
||||
this.labelList = data;
|
||||
for (let i = 0; i < this.labelList.length; i++) {
|
||||
this.queryParams.labelIds.push('');
|
||||
}
|
||||
if (key == 2) {
|
||||
getDictListByStatus({ type: 5 }).then(({ data }) => {
|
||||
this.levelList_3 = data;
|
||||
this.city = key;
|
||||
this.activeID =
|
||||
data.find(item => {
|
||||
return item.name.indexOf(val) != -1;
|
||||
}).id || '';
|
||||
this.getList();
|
||||
});
|
||||
getDictListByStatus({ type: 6 }).then(({ data }) => {
|
||||
this.levelList_4 = data;
|
||||
});
|
||||
} else if (key == 3) {
|
||||
getDictListByStatus({ type: 5 }).then(({ data }) => {
|
||||
this.levelList_3 = data;
|
||||
});
|
||||
getDictListByStatus({ type: 6 }).then(({ data }) => {
|
||||
this.levelList_4 = data;
|
||||
this.city = key;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
this.city = key;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
// this.city = key;
|
||||
}
|
||||
// 获取标签和城市列表
|
||||
else this.getLabelList(true);
|
||||
// 企业画像
|
||||
if (this.token) {
|
||||
userInfo().then(({ data }) => {
|
||||
@ -311,14 +391,6 @@ export default {
|
||||
}
|
||||
});
|
||||
}
|
||||
// 获取标签
|
||||
getLabel().then(({ data }) => {
|
||||
this.labelList = data;
|
||||
for (let i = 0; i < this.labelList.length; i++) {
|
||||
this.queryParams.labelIds.push('');
|
||||
}
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -25,8 +25,10 @@
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="item-box">
|
||||
<img src="@/assets/image/service.png" />
|
||||
<div class="text">在线客服</div>
|
||||
<router-link to="/customerService" target="_blank">
|
||||
<img src="@/assets/image/service.png" />
|
||||
<div class="text">在线客服</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="img_box">
|
||||
|
||||
@ -326,7 +326,7 @@ export default {
|
||||
assetGrowth: 35,
|
||||
sellGrowth: 35
|
||||
}, // 创新指标评分
|
||||
status: 3,
|
||||
status: 1,
|
||||
rulesA: {
|
||||
companyName: [{ required: true, message: '请输入', trigger: 'blur' }],
|
||||
territoryId: [{ required: true, message: '请选择', trigger: 'change' }],
|
||||
|
||||
Reference in New Issue
Block a user