通知修改

src/router/index.ts

@@ -8,13 +8,13 @@ getModuleViewComponents();
 export const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/dashboard',
-	  meta: {},
+	  meta: {hidden:true},
     component: () => import('@/layout/index.vue'),
     children: [
       {
         path: '',
         name: 'Dashboard',
-        meta: { title: 'home', icon: 'home' },
+        meta: { title: 'home', icon: 'home',hidden:true },
         component: () => import('@/views/dashboard/index.vue')
       }
     ]

src/views/dashboard/index.vue

@@ -1,11 +1,4 @@
 <template>
-	<el-card style="padding: 5px; 15px">
-		<notice></notice>
-	</el-card>
-	
-	<el-card shadow="always" style="margin-top: 20px;">
-		<todayData></todayData>
-	</el-card>
 
   
 </template>
@@ -14,11 +7,10 @@
 
 import { checkPermission, getFirstPath } from '@/directives/permission';
 import router from '@/router';
-import notice from "./dataStatistics/notices.vue";
-import todayData from "./dataStatistics/todayData.vue";
+
 let path = getFirstPath(0);
 if (path) {
-  // router.push({ path: path });
+  router.push({ path: path });
 }
 console.log('path', path)
 </script>
@@ -79,4 +71,5 @@ p {
 	display: flex;
 	flex-direction: column;
 }
+
 </style>

src/views/notice/mynotice/dataStatistics/notices.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="noticebody">
+		<div class="notice-item" @click="titleClick(item)"  v-for="(item,index) in list" :key="index" >
+		 <el-badge v-if="item.is_read == 0" is-dot class="item">
+		    <el-image class="logo" src="./src/assets/icons/notice.png"></el-image>
+		  </el-badge>
+			   <el-image class="logo"  v-else   src="./src/assets/icons/notice.png"></el-image>
+			<label class="notices">{{item.title}}</label>
+		</div>
+	</div>
+	<div v-show="list.length < 1"  style="display: flex;justify-content: center;">
+			<label style="color: darkgray;"> 暂无新通知</label>
+	</div>
+	<el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
+		<div class="flex flex-wrap break-all" v-html="notice.content"></div>
+	  <template #footer>
+	    <span class="dialog-footer">
+	      <el-button @click="readNotice">我知道了</el-button>
+	    </span>
+	  </template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import { Bell } from '@element-plus/icons-vue';
+	import router from '@/router';
+	import { noticeListMine, noticeDetail, noticeRead } from '@/api/notice/index';
+	const centerDialogVisible = ref(false)
+	const notice = ref({})
+	const list = ref({});
+	const readNotice = () => {
+		if(notice.value.id > 0){
+			noticeRead(notice.value.id);
+		}
+	  centerDialogVisible.value = false
+	}
+	const getList = () => {
+		noticeListMine({limit:3}).then(res => {
+			list.value = res.data;
+		})
+	};
+	const titleClick = (e) => {
+	  noticeDetail(e.id).then(res => {
+	    centerDialogVisible.value = true;
+	    notice.value.id = res.data.id
+	    notice.value.title = res.data.title
+	    notice.value.content = res.data.content
+	  })
+	}
+	const go2page = () =>{
+		router.push({ path: "/notice/mynotice" });
+	}
+	onMounted(() => {
+		getList();
+	});
+</script>
+
+<style lang="scss" scoped>
+	
+	.header-title {
+	  display: flex;
+	  align-items: center;
+	  justify-content:space-between;
+	  h4{
+		  margin-right: 50px;
+		  color: #29d;;
+	  }
+	}
+	.notice-item{
+		display: flex;
+		margin-top: 5px;
+	}
+	.notices{
+		margin-left: 10px;
+		line-height: 18px;;
+	}
+	.logo{
+		width: 18px;
+		height: 18px;
+	}
+</style>

src/views/notice/mynotice/dataStatistics/todayData.vue

@@ -0,0 +1,162 @@
+<template>
+	<p class="title">今日数据 <label style="color: #909399; margin-left: 50px;">注: 以下数据为当日所有小程序的累计数据，如需查看各个小程序数据，可前往<span @click="go2tj" style="color: #29d;">数据统计</span>进行查看</label></p>
+	<div class="data-line">
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新增用户的定义：不在其他推广链接染色时间范围内且被成功绑定到当前链接的用户，即为当前链接对应优化师的新增用户<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户：</label>
+			<p class="text-base">{{ todayChargeData.new_user_num || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新增用户中今日充值的人数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户充值人数：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_num || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_num || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_vip_num || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新用户充值人数/新增用户<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户付费率：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_rate || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日新增用户的充值总额<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户充值金额：</label>
+			<p class="text-base">{{ todayChargeData.new_user_recharge_total || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.new_user_recharge_coin_total || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 新用户充值总额/新用户充值人数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">新增用户人均充值：</label>
+			<p class="text-base">{{ todayChargeData.new_user_mean || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日累计充值总金额<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值金额：</label>
+			<p class="text-base">{{ todayChargeData.recharge_total || '0' }}</p>
+			<p class="text-pt">普通：{{ todayChargeData.recharge_coin_total || '0' }}</p>
+			<p class="text-pt">会员：{{ todayChargeData.recharge_coin_total || '0' }}</p>
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 当日累计充值笔数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值笔数：</label>
+			<p class="text-base">{{ todayChargeData.recharge_num || '0' }}</p>
+			
+		</div>
+		<div class="box-card">
+			<el-tooltip placement="top">
+				<template #content> 充值金额/充值笔数<br /> </template>
+				<el-icon>
+					<InfoFilled />
+				</el-icon>
+			</el-tooltip>
+			<label class="text-sm">充值单价：</label>
+			<p class="text-base">{{ todayChargeData.recharge_mean || '0' }}</p>
+			
+		</div>
+		
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { checkPermission } from '@/directives/permission';
+import { InfoFilled } from '@element-plus/icons-vue';
+import Cache from '@/support/cache';
+import { statisticHomeTodayData } from '@/api/dataStatistics/userStatistics';
+import router from '@/router';
+const todayChargeData = ref({});
+const miniprogram_idJ = ref(0);
+
+const init = () => {
+	statisticHomeTodayData({ miniprogram_id: miniprogram_idJ.value }).then(
+		res => {
+			todayChargeData.value = res.data;
+		}
+	);
+};
+
+onMounted(() => {
+	if (JSON.parse(Cache.get('nav_data'))?.app.id) {
+		miniprogram_idJ.value = JSON.parse(Cache.get('nav_data'))?.app.id;
+	}
+	init();
+});
+
+const go2tj=()=>{
+	router.push({ path: "/statistic/userStatistical" });
+}
+</script>
+
+<style  lang="scss" scoped>
+.data-line{
+  display: flex;   /* flex布局 */
+  justify-content: space-between;   /* 左对齐 */
+  flex-wrap: wrap;   /* 换行 */
+}
+.title{
+	margin-left: 15px;
+}
+.box-card{
+	margin-top: 20px;
+	border-radius: 10px;
+	margin-right: 10px;
+	background-color: cornsilk;
+	padding:15px 20px;
+	height: 200px;
+	width: calc((100% - 60px) / 4);
+	justify-content: flex-start;
+
+
+}
+.box-card:nth-of-type(4n+0) {
+	 margin-right: 0;
+}
+.text-sm{
+
+}
+.text-base{
+	font-size:40px;
+	margin: 20px 0px;
+}
+.text-pt{
+	font-size:10px;
+	margin-top: 15px;
+}
+</style>

src/views/notice/mynotice/index.vue

@@ -1,18 +1,58 @@
 <template>
-  <el-tabs type="border-card" v-model="activeName" class="tabs" @tab-click="handleClick">
-    <el-tab-pane v-for="item in noticesTypes" :key="item.id" :label="item.name" :name="item.id">
-      <el-table :data="currentTableData" class="mt-3" v-loading="loading">
-        <el-table-column prop="created_at" width="200" label="时间" />
-        <el-table-column prop="title" label="标题">
-          <template #default="scope">
-            <el-tag type="success" class="title" size="default" effect="dark" @click="titleClick(scope.row)">{{
-              scope.row.title }}</el-tag>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Paginate />
-    </el-tab-pane>
-  </el-tabs>
+	
+	<div v-show="showAll == false"> 
+		<el-card style="padding: 5px; 15px">
+			<div class="header-title"> <h3>最新通知 </h3> <h4  @click="go2page">查看全部</h4></div>
+			<noticeBlock></noticeBlock>
+		</el-card>
+
+		<el-card shadow="always" style="margin-top: 20px;">
+			<todayData></todayData>
+		</el-card>
+	</div>
+	<div  v-show="showAll == true">
+		<el-row :gutter="20">
+			<el-col :span="8">
+				<el-tabs  type="border-card" v-model="activeName" class="tabs" @tab-click="handleClick">
+				  <el-tab-pane v-for="item in noticesTypes" :key="item.id" :label="item.name" :name="item.id">
+				<!-- 	<el-table style="height: 800px;" :data="currentTableData" class="mt-3" v-loading="loading">
+					  <el-table-column prop="created_at" width="200" label="时间" />
+					  <el-table-column prop="title" label="">
+						<template #default="scope">
+						  <el-tag type="success" class="title" size="default" effect="dark" @click="titleClick(scope.row)">{{
+							scope.row.title }}</el-tag>
+						</template>
+					  </el-table-column>
+					</el-table> -->
+						<div class="noticebody h-full">
+							<div class="notice-item itme" :class="item.id == notice.id ? 'active':'' " @click="titleClick(item)"  v-for="(item,index) in currentTableData" :key="index" >
+							 <el-badge v-if="item.is_read == 0" is-dot class="item">
+								<el-icon><Bell /></el-icon>
+							  </el-badge>
+							  <el-icon   v-else ><Bell /></el-icon>
+								<label class="notices" >
+								{{item.title}}
+								<p class="n-time-text">{{item.created_at}}</p>
+								</label>
+								
+							</div>
+						</div>
+						<div v-show="currentTableData.length < 1"  style="display: flex;justify-content: center;">
+							<label style="color: darkgray;"> 暂无新通知</label>
+						</div>
+				  </el-tab-pane>
+				  <Paginate />
+				</el-tabs>
+			</el-col>
+			<el-col :span="0"  >
+				<div > </div>
+			</el-col>
+			<el-col :span="16" style="background-color: #fff;">
+				<div style="width: 100%;height: 40px;background-color: #fff;"><el-button class="bak-txt" @click="go2page">返回</el-button></div>
+				 <div sclass="flex h-full flex-wrap break-all" v-html="notice.content"></div>
+			</el-col>
+		</el-row>
+	</div>
   <el-dialog draggable v-model="centerDialogVisible" :title="notice.title" width="30%" center>
     <div class="flex flex-wrap break-all" v-html="notice.content"></div>
     <template #footer>
@@ -23,20 +63,24 @@
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import {
-  useGetList
-} from '@/hook/curd/useGetList';
+import { useGetList} from '@/hook/curd/useGetList';
+import noticeBlock from "./dataStatistics/notices.vue";
+import todayData from "./dataStatistics/todayData.vue";
+import { Bell } from '@element-plus/icons-vue';
 import { ref } from 'vue'
+
 import type { TabsPaneContext } from 'element-plus'
 import { noticesTypesList, noticeDetail, noticeRead, noticePopup } from '@/api/notice/index';
+import showVue from '@/components/admin/buttons/show.vue';
 const api = 'system/notices/notice/mine';
-const { data, query, search, reset, loading } = useGetList(api, true);
-const currentTableData = computed(() => data.value?.data);
+
 const centerDialogVisible = ref(false)
 const notice = ref({})
 const noticesTypes = ref<object>([]);
 const activeName = ref(0)
-
+const showAll = ref(false)
+const { data, query, search, reset, loading } = useGetList(api, true);
+const currentTableData = computed(() => data.value?.data);
 const readNotice = () => {
   noticeRead(notice.value.id).then(res => {
     console.log(res);
@@ -51,14 +95,18 @@ const initNoticeOtion = (params: object) => {
     noticesTypes.value.unshift({ id: 0, name: '全部' })
   })
 }
+const go2page = () =>{
+	showAll.value = !showAll.value;
+}
 
 const titleClick = (e) => {
   noticeDetail(e.id).then(res => {
     console.log(res);
-    centerDialogVisible.value = true;
+    // centerDialogVisible.value = true;
     notice.value.id = res.data.id
     notice.value.title = res.data.title
     notice.value.content = res.data.content
+	readNotice();
   })
 }
 
@@ -83,14 +131,58 @@ onMounted(() => {
   initNoticeOtion({})
 });
 </script>
-<style>
+
+<style lang="scss" scoped>
+	
+.header-title {
+	margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content:space-between;
+  h4{
+	  margin-right: 50px;
+	  color: #29d;
+  }
+}
+.bak-txt{
+	border-color: aliceblue;
+	line-height: 40px;
+	float: right;
+	margin-top: 20px;
+	// color: #29d;;
+	margin-right: 40px;
+}
 .tabs>.el-tabs__content {
   color: #6b778c;
   font-size: 32px;
   font-weight: 600;
+  
 }
 
+
 .title {
   cursor: pointer;
 }
+.notice-item{
+	display: flex;
+	margin-top: 5px;
+}
+.active{
+	color:#29d;
+}
+.notices{
+	font-size: 20px;
+	margin-left: 10px;
+	line-height: 18px;;
+}
+.n-time-text{
+	margin-top: 5px;
+	font-size: 14px;
+}
+.logo{
+	width: 18px;
+}
+.h-full{
+	height: calc(60vh);
+}
 </style>