提交

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/components/page/footer.vue

@@ -5,7 +5,7 @@
         <van-tabbar-item :name="item.pathName" :icon="item.icon" v-if="item.pathName != 'news'">{{ item.title
           }}</van-tabbar-item>
         <van-tabbar-item :name="item.pathName" :icon="item.icon"
-          :badge="userInfo.numberOfMessages" v-else>{{ item.title }}</van-tabbar-item>
+          :dot="userInfo.numberOfMessages > 0 ? true : false" v-else>{{ item.title }}</van-tabbar-item>
       </template>
     </van-tabbar>
   </div>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/my/index.vue

@@ -1,7 +1,25 @@
 <template>
-  <Page title="我的">
+  <Page title="我的" styleReset="backNone">
     <template v-slot:body>
-      <van-button type="primary" @click="signOut">退出</van-button>
+      <div class="w-full h-full flex flex-col items-center">
+        <div class="headPortrait">
+          <img src="/src/assets/image/camera.png" class="w-full h-full">
+        </div>
+        <div class="flex-1">
+          <div class="xinming">
+            <TranslationComponent :openId="userInfo.userInfo.name" />
+          </div>
+          <div class="flex flex-col justify-center text-[#5D5D5D] leading-6">
+            <div class="text-center">公司: {{ userInfo.userInfo?.company?.companyName }}</div>
+            <div class="text-center">角色: {{ userInfo.userInfo?.roleName }}</div>
+          </div>
+        </div>
+        
+        <div class="w-full mb-40 px-24">
+          <van-button type="primary" @click="signOut" class="w-full">退出登录</van-button>
+        </div>
+      </div>
+      <!-- <van-button type="primary" @click="signOut">退出</van-button> -->
     </template>
 
     <template v-slot:footer>
@@ -14,10 +32,11 @@
 import { ref } from "vue";
 import { useLifecycle } from "@hooks/useCommon.js";
 import useRouterStore from "@store/useRouterStore.js";
+import useInfoStore from "@store/useInfoStore.js";
 import Footer from "@components/page/footer.vue";
 
 const router = useRouterStore()
-
+const userInfo = useInfoStore()
 function signOut() {
   router.redirectTo({
     pathName: 'login',
@@ -35,4 +54,44 @@ useLifecycle({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.backNone {
+  background: linear-gradient(to bottom, #E0EFFF, #F8F8F8 30%) !important;
+
+  :deep(.van-nav-bar) {
+    background: none;
+  }
+}
+
+.headPortrait {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: relative;
+  margin-top: 20px;
+  margin-bottom: 10px;
+
+  &::after {
+    content: "";
+    width: 24px;
+    height: 24px;
+    background-image: url('@/assets/image/camera.png');
+    background-size: cover;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.xinming {
+  color: #000000;
+  font-family: PingFang SC;
+  font-weight: semibold;
+  font-size: 18px;
+  line-height: normal;
+  letter-spacing: 0px;
+  text-align: left;
+  margin-bottom: 6px;
+  text-align: center;
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm-h5/src/pages/tabbar/news/index.vue

@@ -1,28 +1,44 @@
 <template>
   <Page title="消息">
+    <template v-slot:headerRight>
+      <div class="oneClickRead-box" @click="oneClickRead()">
+        <img src="/src/assets/image/oneClickRead.png" alt="">
+        一键已读
+      </div>
+    </template>
     <template v-slot:body>
-      <div v-for="item in messageList">
-        <div class="p-[10px] bg-white my-[8px]" @click="toDetail(item)">
-          <span :class="`${item.checked ? 'text-[#07C160]' : 'themeTextColor'}`">{{ item.msg }}</span>  
+      <template v-for="item in messageList">
+        <div class="rounded bg-white mb-3 py-4 px-5" @click="toDetail(item)">
+          <div :class="`${item.checked ? 'opacity-30' : 'pseudoElements'} flex justify-between items-center flex-row relative`">
+            <div class="imgBox">
+              <img src="/src/assets/image/news.png" alt="">
+            </div>
+            <div class="flex-1">
+              <div class="text-size-in text-[#000]">{{ item.msg }}</div>
+              <div class="text-[#B9B9B9]">{{ item.timeStr }}</div>
+            </div>
+            <van-icon name="arrow" color="#D4D4D4" size="1.2rem" />
+          </div>
         </div>
-      </div>
+      </template>
     </template>
 
     <template v-slot:footer>
-      <Footer />
-    </template>
+      <Footer /> 
+    </template> 
   </Page>
 </template>
 
 <script setup>
 import { ref } from "vue";
 import { useLifecycle } from "@hooks/useCommon.js";
-import { GET_MESSAGE_LIST, ONE_CLICK_READ } from "@hooks/useApi";
+import { GET_MESSAGE_LIST, READ_MESSAGE } from "@hooks/useApi";
 import useShowToast from "@hooks/useToast";
 import useRouterStore from "@store/useRouterStore.js";
 import useInfoStore from "@store/useInfoStore.js";
 import requests from "@common/requests";
 import { routingInfos } from "@utility/generalVariables" 
+import dayjs from "dayjs";
 const { toastLoading, toastSuccess, toastFail } = useShowToast();
 
 const router = useRouterStore()
@@ -32,7 +48,12 @@ const messageList = ref([]);
 
 function getMessageList() {
   requests.post(GET_MESSAGE_LIST, {}).then(({ data = [] }) => {
-    messageList.value = data || []
+    messageList.value = (data || []).map(item => {
+      return {
+        ...item,
+        timeStr: dayjs(item.time).format('YYYY-MM-DD HH:mm')
+      }
+    })
     userInfo.updateState({
       numberOfMessages: data.filter((item) => !item.checked)?.length || ''
     })
@@ -72,4 +93,37 @@ function longPress(row, item) {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.imgBox {
+  position: relative;
+  width: 40px;
+  margin-right: 10px;;
+  img {
+    width: 100%;
+  }
+}
+
+.pseudoElements {
+  .imgBox::after {
+    content: '';
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: red;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+.oneClickRead-box {
+  font-size: 12px;
+  color: #747474;
+  display: flex;
+  align-items: center;
+  img {
+    margin-right: 3.12px;
+    width: 13.55px;
+  }
+}
+</style>