Skip to content

C
confucius
Commit 1c35e185 authored by zhengke's avatar zhengke
Browse files
Options

1

parent a2580f43
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 259 deletions
src/components/global/notify.vue
View file @ 1c35e185
<template> <template>
<q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm" class="flex"> <q-dialog v-model="persistent" maximized full-height position="right" @hide="closeShenheForm" class="flex">
<q-card style="margin-top:61px;width:375px;height:calc(100% - 61px) !important;" class="no-border-radius flex column"> <q-card style="margin-top:61px;width:375px;height:calc(100% - 61px) !important;"
<q-tabs class="no-border-radius flex column">
v-model="tab" <q-tabs v-model="tab" class="text-grey" active-color="secondary" indicator-color="secondary" align="justify"
class="text-grey" narrow-indicator inline-label>
active-color="secondary" <q-tab alert="negative" name="msg" style="display:none;">
indicator-color="secondary" <inline-svg class="svg-icon q-mr-xs" :class="[tab=='msg'?'svg-icon-secondary':'svg-icon-grey']"
align="justify" src="icons/svg/Communication/Chat-check.svg"></inline-svg>
narrow-indicator <span>消息</span>
inline-label </q-tab>
> <q-tab name="notify">
<q-tab alert="negative" name="msg" style="display:none;"> <inline-svg class="svg-icon q-mr-xs" :class="[tab=='notify'?'svg-icon-secondary':'svg-icon-grey']"
<inline-svg class="svg-icon q-mr-xs" :class="[tab=='msg'?'svg-icon-secondary':'svg-icon-grey']" src="icons/svg/Communication/Chat-check.svg"></inline-svg> src="icons/svg/Communication/Urgent-mail.svg"></inline-svg>
<span>消息</span> <span>公告</span>
</q-tab> </q-tab>
<q-tab name="notify"> <q-tab name="work">
<inline-svg class="svg-icon q-mr-xs" :class="[tab=='notify'?'svg-icon-secondary':'svg-icon-grey']" src="icons/svg/Communication/Urgent-mail.svg"></inline-svg> <inline-svg class="svg-icon q-mr-xs" :class="[tab=='work'?'svg-icon-secondary':'svg-icon-grey']"
<span>公告</span> src="icons/svg/Files/Folder.svg"></inline-svg>
</q-tab> <span>工作</span>
<q-tab name="work"> </q-tab>
<inline-svg class="svg-icon q-mr-xs" :class="[tab=='work'?'svg-icon-secondary':'svg-icon-grey']" src="icons/svg/Files/Folder.svg"></inline-svg> </q-tabs>
<span>工作</span> <q-tab-panels v-model="tab" class="q-mt-none col" animated swipeable transition-prev="jump-up"
</q-tab> transition-next="jump-up">
</q-tabs> <q-tab-panel name="msg" class="scroll _scrollbar">
<q-tab-panels v-model="tab" class="q-mt-none col" animated swipeable transition-prev="jump-up" transition-next="jump-up"> <q-list v-if="dataList.length>0">
<q-tab-panel name="msg" class="scroll _scrollbar" > <q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in dataList" :key="i" clickable v-ripple
<q-list v-if="dataList.length>0"> @click="undefinedGongneng">
<q-item class="q-my-sm q-pa-xs items-start" v-for="(x,i) in dataList" :key="i" clickable v-ripple @click="undefinedGongneng"> <q-item-section avatar>
<q-item-section avatar> <q-avatar :style="{'background-color':x.icons.backgroundColor}" rounded size="40px"
<q-avatar :style="{'background-color':x.icons.backgroundColor}" rounded size="40px" :text-color="x.icons.color"> :text-color="x.icons.color">
<inline-svg :class="['svg-icon',`svg-icon-${x.icons.color}`]" :src="x.icons.icon" v-if="x.icons.icon.length>1"></inline-svg> <inline-svg :class="['svg-icon',`svg-icon-${x.icons.color}`]" :src="x.icons.icon"
<span v-else>{{x.icons.icon}}</span> v-if="x.icons.icon.length>1"></inline-svg>
</q-avatar> <span v-else>{{x.icons.icon}}</span>
</q-item-section> </q-avatar>
<q-item-section> </q-item-section>
<q-item-label class="text-weight-bold">{{x.Title}}</q-item-label> <q-item-section>
<q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label> <q-item-label class="text-weight-bold">{{x.Title}}</q-item-label>
</q-item-section> <q-item-label caption lines="3" class="remark-font">{{x.Content}}</q-item-label>
<q-item-section side class="remark-font">{{x.Time}}</q-item-section> </q-item-section>
</q-item> <q-item-section side class="remark-font">{{x.Time}}</q-item-section>
</q-list> </q-item>
<none-data v-else></none-data> </q-list>
</q-tab-panel> <none-data v-else></none-data>
<q-tab-panel name="notify" class="scroll _scrollbar" > </q-tab-panel>
<q-card flat class="relative-position overflow-hidden q-pa-md text-grey-1 cursor-pointer q-mb-md" style="height:130px" @click="undefinedGongneng"> <q-tab-panel name="notify" class="scroll _scrollbar">
<div class="gonggao-bg"> <q-card flat class="relative-position overflow-hidden q-pa-md text-grey-1 cursor-pointer q-mb-md"
<img src="../../assets/images/noticeBg.png"/> style="height:130px" @click="undefinedGongneng">
</div> <div class="gonggao-bg">
<div class="flex row items-center relative-position"> <img src="../../assets/images/noticeBg.png" />
<q-avatar size="30px" font-size="14px" rounded style="background:#C9F7F5" class="q-mr-md" text-color="secondary"> </div>
<img :src="showObj.UserIcon" v-if="showObj.UserIcon"> <div class="flex row items-center relative-position">
<span v-else>{{showObj.AccountName.substring(0,1)}}</span> <q-avatar size="30px" font-size="14px" rounded style="background:#C9F7F5" class="q-mr-md"
</q-avatar> text-color="secondary">
<div>{{showObj.AccountName}}</div> <img :src="showObj.UserIcon" v-if="showObj.UserIcon">
<div class="remark-font col text-right text-grey-3">5天前</div> <span v-else>{{showObj.AccountName.substring(0,1)}}</span>
</div> </q-avatar>
<div class="ellipsis relative-position q-mt-md" style="font-size:16px;"> <div>{{showObj.AccountName}}</div>
关于2021年春节放假的相关通知与安排关于2021年春节放假的相关通知与安排 <div class="remark-font col text-right text-grey-3">5天前</div>
</div> </div>
<div class="relative-position q-mt-md text-right text-grey-2 remark-font">甲鹤行2021-A-001</div> <div class="ellipsis relative-position q-mt-md" style="font-size:16px;">
</q-card> 关于2021年春节放假的相关通知与安排关于2021年春节放假的相关通知与安排
</q-tab-panel> </div>
<q-tab-panel name="work" class="scroll _scrollbar" > <div class="relative-position q-mt-md text-right text-grey-2 remark-font">甲鹤行2021-A-001</div>
<none-data></none-data> </q-card>
</q-tab-panel> </q-tab-panel>
</q-tab-panels> <q-tab-panel name="work" class="scroll _scrollbar">
<none-data></none-data>
</q-tab-panel>
</q-tab-panels>
</q-card> </q-card>
</q-dialog> </q-dialog>
</template> </template>
<script> <script>
import noneData from './none-data' import {
import NoneData from './none-data.vue' GetMyNoticePageList
export default { } from '../../api/course/index'
import noneData from './none-data'
import NoneData from './none-data.vue'
export default {
props: { props: {
showObj: { showObj: {
type: Object, type: Object,
default: null default: null
} }
}, },
components:{ components: {
noneData noneData
}, },
data() { data() {
return { return {
persistent: true, persistent: true,
saveLoading: false, saveLoading: false,
tab:"notify", tab: "notify",
icons:{ icons: {
'退':{ '退': {
backgroundColor: '#ffe2e5', backgroundColor: '#ffe2e5',
color: 'negative', color: 'negative',
icon:'icons/svg/Design/Stamp.svg' icon: 'icons/svg/Design/Stamp.svg'
}, },
'订':{ '订': {
backgroundColor: '#e1f0ff', backgroundColor: '#e1f0ff',
color: 'primary', color: 'primary',
icon:'icons/svg/Shopping/Bag2.svg' icon: 'icons/svg/Shopping/Bag2.svg'
}, },
'考':{ '考': {
backgroundColor: '#fff4de', backgroundColor: '#fff4de',
color: 'warning', color: 'warning',
icon:'icons/svg/Code/Time-schedule.svg' icon: 'icons/svg/Code/Time-schedule.svg'
}, },
'续':{ '续': {
backgroundColor: '#c9f7f5', backgroundColor: '#c9f7f5',
color: 'secondary', color: 'secondary',
icon:'icons/svg/General/Attachment1.svg' icon: 'icons/svg/General/Attachment1.svg'
}, },
'财':{ '财': {
backgroundColor: '#eee5ff', backgroundColor: '#eee5ff',
color: 'accent', color: 'accent',
icon:'icons/svg/Shopping/Dollar.svg' icon: 'icons/svg/Shopping/Dollar.svg'
} }
}, },
defaultIcon:{ defaultIcon: {
backgroundColor: '#f3f6f9', backgroundColor: '#f3f6f9',
color: 'primary' color: 'primary'
}, },
dataList:[ dataList: [{
{ Title: '财务单据结果通知',
Title:'财务单据结果通知', Content: "你参与的财务审核已完成！",
Content:"你参与的财务审核已完成！", Time: "1小时前"
Time:"1小时前" },
}, {
{ Title: '财务审批通知',
Title:'财务审批通知', Content: "你有待审批的财务单据",
Content:"你有待审批的财务单据", Time: "12小时前"
Time:"12小时前" },
}, {
{ Title: '考勤审批通知',
Title:'考勤审批通知', Content: "李思思发起请假申请，请尽快审批",
Content:"李思思发起请假申请，请尽快审批", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '订单通知',
Title:'订单通知', Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
Content:"你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '续费通知',
Title:'续费通知', Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
Content:"你的客户：“郑科”已申请续费课程，请尽快对接", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '退课通知',
Title:'退课通知', Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
Content:"你的客户：“郑科”退课申请已通过，请办理相关退款单据", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '工作审批通知',
Title:'工作审批通知', Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
Content:"你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '财务单据结果通知',
Title:'财务单据结果通知', Content: "你参与的财务审核已完成！",
Content:"你参与的财务审核已完成！", Time: "1小时前"
Time:"1小时前" },
}, {
{ Title: '财务审批通知',
Title:'财务审批通知', Content: "你有待审批的财务单据",
Content:"你有待审批的财务单据", Time: "12小时前"
Time:"12小时前" },
}, {
{ Title: '考勤审批通知',
Title:'考勤审批通知', Content: "李思思发起请假申请，请尽快审批",
Content:"李思思发起请假申请，请尽快审批", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '订单通知',
Title:'订单通知', Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
Content:"你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '续费通知',
Title:'续费通知', Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
Content:"你的客户：“郑科”已申请续费课程，请尽快对接", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '退课通知',
Title:'退课通知', Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
Content:"你的客户：“郑科”退课申请已通过，请办理相关退款单据", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '工作审批通知',
Title:'工作审批通知', Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
Content:"你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '财务单据结果通知',
Title:'财务单据结果通知', Content: "你参与的财务审核已完成！",
Content:"你参与的财务审核已完成！", Time: "1小时前"
Time:"1小时前" },
}, {
{ Title: '财务审批通知',
Title:'财务审批通知', Content: "你有待审批的财务单据",
Content:"你有待审批的财务单据", Time: "12小时前"
Time:"12小时前" },
}, {
{ Title: '考勤审批通知',
Title:'考勤审批通知', Content: "李思思发起请假申请，请尽快审批",
Content:"李思思发起请假申请，请尽快审批", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '订单通知',
Title:'订单通知', Content: "你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满",
Content:"你的订单：4257已被 刘小勇确认，请尽快上传收费单据，以免班级报满", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '续费通知',
Title:'续费通知', Content: "你的客户：“郑科”已申请续费课程，请尽快对接",
Content:"你的客户：“郑科”已申请续费课程，请尽快对接", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '退课通知',
Title:'退课通知', Content: "你的客户：“郑科”退课申请已通过，请办理相关退款单据",
Content:"你的客户：“郑科”退课申请已通过，请办理相关退款单据", Time: "1天前"
Time:"1天前" },
}, {
{ Title: '工作审批通知',
Title:'工作审批通知', Content: "你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息",
Content:"你的20210818工作计划已被：罗超审批通过，请按时上传工作任务信息", Time: "1天前"
Time:"1天前" },
}, ],
], imgCov: 'http://192.168.1.214:8130/Upload/studentIcon/20201201044129361.png',
imgCov:'http://192.168.1.214:8130/Upload/studentIcon/20201201044129361.png'
} //通知请求参数
noticeMsg:{
pageIndex:1,
pageSize:5
},
}
}, },
created() { created() {
this.init(); this.init();
this.getNotify();
}, },
methods: { methods: {
init(){ init() {
this.dataList.forEach(x=>{ this.dataList.forEach(x => {
x.icons=this.getIcon(x.Title.substring(0,1)) x.icons = this.getIcon(x.Title.substring(0, 1))
}); });
}, },
closeShenheForm() { closeShenheForm() {
this.$emit('close') this.$emit('close')
}, },
getIcon(t){ getIcon(t) {
if(this.icons[t]){ if (this.icons[t]) {
return this.icons[t] return this.icons[t]
}else{ } else {
let temp=JSON.parse(JSON.stringify(this.defaultIcon)) let temp = JSON.parse(JSON.stringify(this.defaultIcon))
temp.icon=t temp.icon = t
return temp return temp
} }
}, },
undefinedGongneng() { undefinedGongneng() {
this.$q.dialog({ this.$q.dialog({
title: '功能提示', title: '功能提示',
message: '灰度测试功能，即将在下版本中开启' message: '灰度测试功能，即将在下版本中开启'
}).onOk(() => { }).onOk(() => {
}); });
}, },
//请求公告数据
getNotify() {
GetMyNoticePageList(this.noticeMsg).then(res => {
if (res.Code == 1) {
console.log(res, 'notice数据');
// this.noticeObj = res.Data;
// if (res.Data.PageData.length > 0) {
// this.isShowNotice = true;
// }
}
})
}
}, },
} }
</script> </script>
<style> <style>
._scrollbar::-webkit-scrollbar{width: 6px;height: 8px;} ._scrollbar::-webkit-scrollbar {
._scrollbar::-webkit-scrollbar-thumb{border-radius: 2px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);background: rgba(0, 0, 0, 0.5);} width: 6px;
._scrollbar::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: transparent;display: none;} height: 8px;
.gonggao-bg{ }
._scrollbar::-webkit-scrollbar-thumb {
border-radius: 2px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.5);
}
._scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: transparent;
display: none;
}
.gonggao-bg {
position: absolute; position: absolute;
left: -10%; left: -10%;
width: 120%; width: 120%;
height: 130px; height: 130px;
} }
.gonggao-bg img{
width: 120%; .gonggao-bg img {
height: 120%; width: 120%;
/* filter: blur(20px); */ height: 120%;
overflow: hidden; /* filter: blur(20px); */
overflow: hidden;
margin-top: -8%; margin-top: -8%;
margin-left: -5%; margin-left: -5%;
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment