新增客服提示

App.vue

@@ -189,6 +189,52 @@ export default {
   color: $text-color;
 }
 
+.circle-pulse {
+  background: red;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  position: absolute;
+  right: -10px;
+  top: 10px;
+}
+
+.circle-pulse:after {
+  background-color: red;
+  content: "";
+  display: table;
+  border-radius: 50%;
+  position: absolute;
+  animation-name: pulse1;
+  animation-duration: 0.9s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-out;
+}
+
+@keyframes pulse1 {
+  0% {
+    opacity: 1;
+    width: 7px;
+    height: 7px;
+    left: 0;
+    top: 0;
+  }
+  95% {
+    opacity: 0.1;
+    left: -10.5px;
+    top: -10.5px;
+    width: 28px;
+    height: 28px;
+  }
+  100% {
+    opacity: 0;
+    width: 7px;
+    height: 7px;
+    left: 0;
+    top: 0;
+  }
+}
+
 /* #ifdef H5 */
 .layout-page {
   height: 100%!important;

api/home.js

@@ -27,6 +27,18 @@ class Home {
 	static online(){
 		return Serve.get('/online')
 	}
+	/*
+	* 获取未读消息
+	*/
+	static chat(){
+		return Serve.get('/user/chat')
+	}
+	/*
+	* 已读消息
+	*/
+	static chatRead(){
+		return Serve.get('/user/chatRead')
+	}
 }
 
 export default Home;

pages/base/home.vue

@@ -5,6 +5,7 @@
 			<template #left>
 				<!-- <van-icon name="user-circle-o" class="fn-25 color-theme-1" style="color: #D0712F;" /> -->
 				<image src="@/assets/img/home/top.png" mode="aspectFit" style="width: 36rpx;height: 36rpx;"></image>
+				<span class="circle-pulse" v-if="newscount!==0"></span>
 			</template>
 			<template #title>
 				<view style="color: #ffffff; font-size: 30rpx;">{{$t("base.d0")}}</view>
@@ -636,8 +637,9 @@
 						<view class="color-light">{{ $t("base.c6") }}</view>
 					</v-link>
 					<!-- customer service -->
-					<v-link :to="isLogin?'/pages/oncs/onservice':'/pages/login/index'" tag="div" class="manage_text">
+					<v-link :to="isLogin?'/pages/oncs/onservice':'/pages/login/index'" tag="div" class="manage_text" style="position: relative;">
 						<img src="@/static/img/cs_w.svg">
+						<span class="circle-pulse1" v-if="newscount!==0">{{newscount>=100?'99+':newscount}}</span>
 						<view class="color-light">{{$t('common.service')}}</view>
 					</v-link>
 				</view>
@@ -691,6 +693,8 @@
 		},
 		data() {
 			return {
+				newscount:0,
+				chatcount:null,
 				infoActive: 1, // 详情选中
 				marketList: [],
 				marketListHe: [],
@@ -753,6 +757,13 @@
 		},
 		watch: {
 			isShow(n) {
+				if(n&&this.isLogin){
+					this.chatcount = setInterval(()=>{
+						this.chat()
+					},2000)
+				} else if(!n){
+					clearInterval(this.chatcount);
+				}
 				if (n) {
 					this.indexData()
 					this.ws.send({
@@ -1052,6 +1063,7 @@
 							})
 							.then(() => {
 								this.outLogin();
+								clearInterval(this.chatcount);
 							})
 							.catch(() => {});
 					})
@@ -1093,6 +1105,16 @@
 				// #ifdef H5
 				window.open('https://app.ajcoins.com/download/index.html', '_blank') // 打开一个新标签
 				// #endif
+			},
+			chat(){
+				Home.chat().then(res => {
+					if(res.code==200){
+						this.newscount = res.data.count;
+					}else{
+						console.log('1111');
+						clearInterval(this.chatcount);
+					}
+				})
 			}
 		},
 		mounted() {
@@ -1102,6 +1124,9 @@
 			this.getCurrencyExCny();
 			this.getHelpList();
 			if (this.isLogin) {
+				this.chatcount = setInterval(()=>{
+					this.chat()
+				},2000)
 				this.createWalletAddress();
 				this.getAuthInfo()
 				this.personalAssets();
@@ -1117,6 +1142,20 @@
 	};
 </script>
 <style lang="scss" scoped>
+	.circle-pulse1 {
+	  background: red;
+	  display: flex;
+	  justify-content: center;
+	  align-items: center;
+	  min-width: 20px;
+	  height: 20px;
+	  font-size: 12px;
+	  border-radius: 50%;
+	  position: absolute;
+	  right: 25%;
+	  top: -10px;
+	  color: #fff;
+	}
 	// .colbg {
 	//   background-color: $bg;
 	// }

pages/oncs/onservice.vue

@@ -13,6 +13,7 @@
 
 <script>
 	import Member from "@/api/member";
+	import Home from "@/api/home";
 	export default {
 		data() {
 			return {
@@ -38,9 +39,17 @@
 						// console.log("dd",chaturl);
 						this.csurl = chaturl;
 						this.isLoad = true;
+						if(this.isLoad===true){
+							this.chatRead()
+						}
 					})
 					console.log("user", this.csurl)
 				}
+			},
+			chatRead(){
+				Home.chatRead().then(res => {
+					console.log(res,'已读');
+				})
 			}
 		}
 	}