🐞 fix: 修复数字更新和样式问题

src/assets/icon/svg/edit.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>编辑</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="工作台" transform="translate(-1881.000000, -278.000000)" fill-rule="nonzero">
+            <g id="编辑" transform="translate(1880.000000, 277.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <path d="M18.0820312,8.68359375 C17.8125,8.68359375 17.59375,8.90234375 17.59375,9.171875 L17.59375,15.5546875 C17.59375,16.9003906 16.4980469,17.9960938 15.1523438,17.9960938 L4.7734375,17.9960938 C3.42773438,17.9960938 2.33203125,16.9003906 2.33203125,15.5546875 L2.33203125,4.67773438 C2.33203125,3.33203125 3.42773438,2.23632812 4.7734375,2.23632812 L11.15625,2.23632812 C11.4257813,2.23632812 11.6445313,2.01757812 11.6445313,1.74804688 C11.6445313,1.47851562 11.4257813,1.25976562 11.15625,1.25976562 L4.7734375,1.25976562 C2.88867188,1.25976562 1.35546875,2.79296875 1.35546875,4.67773438 L1.35546875,15.5527344 C1.35546875,17.4375 2.88867188,18.9707031 4.7734375,18.9707031 L15.1523438,18.9707031 C17.0371094,18.9707031 18.5703125,17.4375 18.5703125,15.5527344 L18.5703125,9.171875 C18.5703125,8.90234375 18.3515625,8.68359375 18.0820312,8.68359375 Z M18.6816406,3.65429687 L16.3417969,1.3984375 C16.2480469,1.30859375 16.1230469,1.25976562 15.9941406,1.26166234 C15.8652344,1.26367187 15.7421875,1.31835937 15.6523438,1.41015625 L14.359375,2.75195312 C14.3515625,2.7578125 14.3457031,2.765625 14.3378906,2.7734375 L6.95898438,10.421875 C6.9296875,10.453125 6.90429688,10.4863281 6.88476563,10.5214844 C6.85742188,10.5605469 6.8359375,10.6035156 6.82226563,10.6484375 L5.66015625,14.2382812 C5.6015625,14.4179687 5.65234375,14.6152344 5.7890625,14.7441406 C5.88085938,14.8300781 6.00195313,14.8769531 6.12304688,14.8769531 C6.18359375,14.8769531 6.24414063,14.8652344 6.30078125,14.84375 L9.73828125,13.4980469 C9.83398438,13.4804687 9.92773438,13.4335937 10,13.3574219 L17.3085937,5.78125 C17.3164062,5.77539062 17.3222656,5.76757812 17.3300781,5.76171875 L18.6953125,4.34570312 C18.8828125,4.15039062 18.8769531,3.84179687 18.6816406,3.65429687 Z M14.6484375,3.85546875 L16.2851562,5.43554688 L9.63671875,12.3300781 L8,10.75 L14.6484375,3.85546875 Z M6.90625,13.5585938 L7.51367188,11.6816406 L8.74609375,12.8378906 L6.90625,13.5585938 Z M17.0175781,4.67773438 L15.3808594,3.09765625 L16.0175781,2.4375 L17.6542969,4.01757813 L17.0175781,4.67773438 Z" id="形状" fill="#666666"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/views/components/roleInfo/roleInfoPanel.vue

@@ -50,11 +50,7 @@
                       >申诉</el-button
                     >
                     <el-badge
-                      :value="
-                        roleRecentActivityNotPushNumInstance?.getNumByRoleId(
-                          items.role_id
-                        )
-                      "
+                      :value="getNumRoleIdList(items.role_id)"
                       class="text-center leading-[0] ml-[8px]"
                     >
                       <el-button
@@ -204,6 +200,7 @@ export default {
       infoList: [],
       recentActivitiesPopupInstance: null, //近期要开模块弹框
       roleRecentActivityNotPushNumInstance: null, //侧边栏计数弹框
+      numRoleIdList: [],
     };
   },
   computed: {
@@ -217,11 +214,25 @@ export default {
     this.initInstance();
   },
   methods: {
+    getNumRoleIdList(role_id) {
+      return (
+        this.numRoleIdList.find((item) => item.role_id == role_id)?.num || null
+      );
+    },
     //初始化创建模块
     async initInstance() {
       this.recentActivitiesPopupInstance = createDetails();
       this.roleRecentActivityNotPushNumInstance =
         await createRoleRecentActivityNotPushNum(this.accountSelect);
+      this.numRoleIdList =
+        this.roleRecentActivityNotPushNumInstance.getRoleNum();
+
+      this.roleRecentActivityNotPushNumInstance.roleRecentActivitySubscription(
+        (v) => {
+          this.numRoleIdList = v.roleNum;
+        },
+        this
+      );
     },
     handleChange() {},
     memberChange() {

src/views/hooks/useGetCount.js

 import { getRoleRecentActivityNotPushNumApi } from '@/api/game';
 // 账号近期要开活动数
 let roleRecentActivityNotPushNum = null;
-let cacheMemberId = null;
+let cacheMemberId = null; //缓存请求id
+const computedMap = new Map([]); //观察者列表
+// 观察者收集
+export function roleRecentActivitySubscription(fn, key) {
+  computedMap.set(key, fn);
+}
+//通知所有观察者
+function roleRecentActivityRelease() {
+  computedMap.forEach((fn) => {
+    fn(roleRecentActivityNotPushNum);
+  });
+}
+
 function setCacheMemberId(member_id) {
   cacheMemberId = member_id;
 }
-export async function queryRoleRecentActivityNotPushNum(member_id) {
+//获取数据
+export async function queryRoleRecentActivityNotPushNum(
+  member_id = cacheMemberId
+) {
   const { data } = await getRoleRecentActivityNotPushNumApi({
     member_id: member_id,
   });
   roleRecentActivityNotPushNum = data.data;
+  roleRecentActivityRelease();
 }
 function validate(v) {
   if (!roleRecentActivityNotPushNum)
     throw new Error(`执行${v}前请先调用createRoleRecentActivityNotPushNum方法`);
 }
-
+//获取总数量
 export function getTotalNum() {
   validate('getTotalNum');
+
   return roleRecentActivityNotPushNum?.totalNum || null;
 }
-export function getNumByRoleId(role_id) {
-  validate('getNumByRoleId');
-  return (
-    roleRecentActivityNotPushNum?.roleNum.find(
-      (item) => item.role_id == role_id
-    )?.num || null
-  );
+//获取列表
+export function getRoleNum() {
+  validate('getRoleNum');
+
+  return roleRecentActivityNotPushNum?.roleNum;
 }
+//销毁
 export function destroy() {
   roleRecentActivityNotPushNum = null;
   cacheMemberId = null;
+  computedMap.clear();
 }
-
+//初始化
 export async function createRoleRecentActivityNotPushNum(member_id) {
-  if (member_id || member_id !== cacheMemberId) {
+  if (member_id && member_id !== cacheMemberId) {
     setCacheMemberId(member_id);
+
     await queryRoleRecentActivityNotPushNum(member_id);
   }
   return {
+    roleRecentActivitySubscription,
     queryRoleRecentActivityNotPushNum,
     getTotalNum,
-    getNumByRoleId,
+    getRoleNum,
     destroy,
   };
 }

src/views/popup/RecentActivitiesPopup/components/ActivityConfigurationList.vue

@@ -10,10 +10,14 @@
           <div
             class="text-[#131920] pb-[8px] text-[14px] border-b-[1px] border-solid border-[#E5E5E6]"
           >
-            主服 {{ item.main_server_day }} 天开启{{ item.name }}活动
+            <div>{{ item.name }}活动</div>
+            <div class="text-[#86909C] text-[12px]">
+              主服 {{ item.main_server_day }} 天开启
+            </div>
           </div>
+
           <div class="text-[13px] flex pt-[8px]">
-            <div class="text-[#6D7176] mr-[16px] flex-shrink-0">活动详情</div>
+            <!-- <div class="text-[#6D7176] mr-[16px] flex-shrink-0">活动详情</div> -->
             <div class="text-[#131920]">{{ item.detail }}</div>
           </div>
         </div>

src/views/popup/RecentActivitiesPopup/templates/RecentActivities.vue

@@ -20,8 +20,8 @@
     <div>
       <span class="label">关联客服：</span><span>{{ item.cser_name }}</span>
     </div>
-    <div class="group">
-      <span class="label">备注：</span
+    <div class="group flex items-center">
+      <span class="label flex-shrink-0">备注：</span
       ><span v-show="!editShow">{{ item.remark }}</span>
       <el-input
         @blur="updated"
@@ -88,6 +88,8 @@
 import { getRoleRecentActivityEditApi } from '@/api/game.js';
 import { getGenerateProcedureApi } from '@/api/skill';
 import { mapState } from 'vuex';
+import { queryRoleRecentActivityNotPushNum } from '@/views/hooks/useGetCount';
+
 const UpdateType = {
   PUSH: 1, //修改推送
   REMARK: 2, //修改备注
@@ -106,7 +108,7 @@ export default {
     };
   },
   computed: {
-    ...mapState('common', ['zqUserInfo']),
+    ...mapState('user', ['cser_id', 'cser_name']),
     ...mapState('game', ['accountSelect', 'bindGameUserList']),
     nowGameUserInfo() {
       return {
@@ -139,10 +141,12 @@ export default {
           remark: this.textarea,
           activity_rule_id: this.item.activity_rule_id,
           is_push: 2,
-          user_id: this.zqUserInfo.zq_user_id,
-          user_name: this.zqUserInfo.name,
+          user_id: this.cser_id,
+          user_name: this.cser_name,
         });
         this.$message.success('修改成功');
+        queryRoleRecentActivityNotPushNum(this.accountSelect);
+
         this.$emit('handleUpdate');
       } catch (error) {
         this.$message.error(error);
@@ -208,7 +212,7 @@ export default {
   animation: rotate 0.5s linear infinite;
 }
 .refreshList {
-  color: #00bf8a;
+  color: #3491fa;
   cursor: pointer;
   font-size: 18px;
 }

src/views/userInfo/userInfo.vue

@@ -32,12 +32,14 @@ export default {
     roleInfo,
     orderList,
   },
-  mounted() { },
+  mounted() {},
   watch: {
     async accountSelect(newVal) {
       await this.initInstance();
-      console.log(this.instance.getTotalNum(), '+++++++++++++++++++++++');
       this.totalNum = this.instance.getTotalNum();
+      this.instance.roleRecentActivitySubscription(() => {
+        this.totalNum = this.instance.getTotalNum();
+      }, this);
     },
   },
   data() {