首页滚动消息

src/api/home-page.js

@@ -1,8 +1,8 @@
 import request from '../utils/request'
 
-export function selectHomePageDoctors() {
+export function getScrollNews() {
   return request({
-    url: '/homepage/selectHomePageDoctors',
+    url: '/homepage/getScrollNews',
     method: 'get',
   })
 }

src/views/hospital-service/HospitalServiceHome.vue

@@ -162,7 +162,25 @@
         </van-col>
       </van-row>
     </div>
-    <div style="width: 90%; margin-left: 5%; margin-top: 15px">
+    <van-notice-bar
+        v-if="allNews.length > 0"
+        mode="link"
+        speed="45"
+        :scrollable="true"
+        delay="1"
+        @replay="onNewsReplay"
+        style="margin: 15px 18px 5px 18px"
+        @click="handleClickNews"
+        background="#8059a1"
+        color="gold"
+    >
+      <template #default>
+        <div style="font-size: 16px">
+          {{currentNews.name}}
+        </div>
+      </template>
+    </van-notice-bar>
+    <div style="width: 90%; margin-left: 5%; margin-top: 12px">
       <van-tag size="large" type="warning">名医直达</van-tag>
     </div>
     <div :style="swipeStyle">
@@ -223,6 +241,7 @@ import {getDate} from '@/utils/date'
 import router from '@/router'
 import axios from 'axios'
 import {submitComplaintsAndSuggestions} from "@/api/assessments";
+import {getScrollNews} from '@/api/home-page'
 import {showDialog} from "vant";
 import qrcode from '@/assets/qrcode2.png'
 import healthcard from '@/assets/healthcard.png'
@@ -234,15 +253,15 @@ const swipeStyle = {
   width: '90%',
   marginLeft: '5%',
   marginTop: '5px',
-  height: screenSize.h - 460 + 'px',
-  h: screenSize.h - 460,
+  height: screenSize.h - 500 + 'px',
+  h: screenSize.h - 500,
   w: screenSize.w * 0.9,
 }
 
 const swipeRowStyle = {
   width: '100%',
   height: swipeStyle.h / 3 - 5 + 'px',
-  marginBottom: '5px',
+  marginBottom: '1px',
   borderRadius: '8px',
   backgroundColor: '#00525e',
   backgroundImage: 'linear-gradient(to bottom right, #03a0b8, #00525e)',
@@ -339,8 +358,30 @@ const confirmComplaints = () => {
   })
 }
 
+const allNews = ref([])
+const currentNews = ref({})
+
+function onNewsReplay() {
+  let nextIndex = currentNews.value.sortNo
+  if (nextIndex === allNews.value.length) {
+    nextIndex = 0
+  }
+  currentNews.value = allNews.value[nextIndex]
+}
+
+function handleClickNews() {
+  store.commit('SET_LOADING', true);
+  location.href = currentNews.value.code
+}
+
 const loading = ref(false)
 onMounted(() => {
+  getScrollNews().then((res) => {
+    allNews.value = res
+    if (allNews.value.length > 0) {
+      currentNews.value = allNews.value[0]
+    }
+  })
   homepageDoctors.value = store.state.homePageDoctors
   if (homepageDoctors.value.length === 0) {
     loading.value = true
@@ -371,38 +412,6 @@ onMounted(() => {
   justify-content: space-between;
 }
 
-.big-box {
-  margin-top: 10px;
-  width: 90%;
-  margin-left: 5%;
-  height: 70px;
-  background-size: 100%;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-}
-
-.hsjctext {
-  font-size: 36px;
-  color: rgba(4, 59, 104, 0.9);
-  font-weight: bold;
-  padding-left: 8px;
-}
-
-.large-icon {
-  margin-left: 10px;
-  margin-top: 11px;
-}
-
-.xinguanjiance {
-  background: url('@/assets/hospital-service/xinguanjiancebackground.png') no-repeat !important;
-  background-size: 100% !important;
-}
-
-.bold-text {
-  font-weight: bold;
-}
-
 #router-lane .van-col {
   text-align: center;
 }
@@ -415,18 +424,5 @@ onMounted(() => {
 .icon-label {
   font-size: 13px;
   color: #333;
-  /* color:#048a9e; */
-}
-
-.doctor-loading-box {
-  position: fixed;
-  display: inline-block;
-  width: 120px;
-  padding: 15px 0;
-  vertical-align: middle;
-  background-color: #fff;
-  border-radius: 4px;
-  border: 1px solid #ebeef5;
-  box-shadow: 1px 2px 9px 5px rgba(0, 0, 0, 0.1);
 }
 </style>