资讯消息

package.json

@@ -15,6 +15,7 @@
     "axios": "^0.21.1",
     "bitcoinjs-lib": "^5.2.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.7",
     "dexie": "^3.0.3",
     "enc-utils": "^3.0.0",
     "prepend-http": "^4.0.0",

src/components/HotNews/index.vue

 <template>
   <div class="mx-5">
-    <div class="wrap22 flex items-center">
+    <div class="wrap22 flex items-center" @click="$router.push({path: 'NewsDetail', query: { uuid: info.uuid, type: 'news' }})">
       <div class="box1 flex-col flex-grow">
-        <span class="info8">建信银行为您量身定做打造良好的信贷体验</span>
+        <span class="info8">{{ info.title }}</span>
         <div class="layer4 flex-row">
-          <span class="info9">建信个人贷</span>
-          <span class="word24">2021-07-10</span>
+          <span class="info9">{{ info.writer }}</span>
+          <span class="word24">{{ $format(info.created_at, 'YYYY-MM-DD') }}</span>
         </div>
       </div>
       <div class="box2 flex-col ml-4 flex-shrink-0">
         <img
           class="pic3"
           referrerpolicy="no-referrer"
-          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge2c0a67c1d16ceff7bcf9fba3660fffcbd22643881df43f966f78f68c95b4907"
+          :src="`/proxyApi/api/v1/image/show?file_hash=${info.file_name}`"
         />
       </div>
     </div>
@@ -21,7 +21,13 @@
 </template>
 <script lang="ts">
 import Vue, {defineComponent} from "vue";
-export default defineComponent({});
+export default defineComponent({
+  props: {
+    info: {
+      type: Object
+    }
+  }
+});
 </script>
 <style scoped>
 .wrap22 {

src/components/Mine/Msg/index.vue

 <template>
   <div>
     <div class=" flex justify-between py-5 border-b border-gray-200"
-         @click="$router.push('msgDetail')">
-      <span class=" text-sm text-left font-semibold" :class="isRead?'text-gray-400':'text-gray-800'">系统消息提示的标题</span>
-      <span class=" text-sm text-right text-gray-400">2018/12/03 12:58:23</span>
+         @click="$router.push({path: 'msgDetail', query: { info: JSON.stringify(info) }})">
+      <span class=" text-sm text-left font-semibold" :class="isRead?'text-gray-400':'text-gray-800'">{{ info.title }}</span>
+      <span class=" text-sm text-right text-gray-400">{{ $format(info.created_at, 'YYYY-MM-DD HH:mm:ss') }}</span>
     </div>
   </div>
 </template>
@@ -17,10 +17,16 @@ export default defineComponent({
       return false
     }
   },
+  props: {
+    info: {
+      type: Object
+    }
+  },
   setup () {
-  
 
-    return {}
+    return {
+      
+    }
   }
 })
 </script>

src/components/NavBar/index.vue

@@ -25,7 +25,7 @@
           name="icon-sousuo"
           class="absolute left-11"
           size="18"
-          @click="$router.push('Search')"
+          @click="$router.push(path)"
           :color="iconColor"
         />
         <div class="title">{{ title }}</div>
@@ -63,6 +63,12 @@ export default defineComponent({
     showSearchIcon: {
       type: Boolean,
       default: false,
+    },
+    path: {
+      type: Object,
+      default: () => {
+        return { path: '/Search' }
+      }
     }
   },
 });

src/components/PolicyCard/index.vue

 <template>
-  <div>
-    <p class=" text-base text-gray-800 font-semibold pt-5">商业银行互联网贷款监管再升级</p>
-    <p class=" text-xs text-gray-400 pt-5">银保监会《通知》明确出资比例、集中度及限额三项定量指标</p>
-    <p class=" text-sm text-gray-800 text-justify pt-5">时隔半年，商业银行互联网贷款业务员升级。2月20日，中国银保监会发布《关于进一步规范商业银行互联网贷款业务的通知》（以下称《通知》），针对去年7月……      </p>
-    <p class=" text-xs text-gray-400 py-5">发布时间：2021-07-01</p>
+  <div @click="$router.push({path: 'NewsDetail', query: { uuid: info.uuid, type: 'policy' }})">
+    <p class=" text-base text-gray-800 font-semibold pt-5">{{ info.title }}</p>
+    <!-- <p class=" text-xs text-gray-400 pt-5">{{ info.desc }}</p> -->
+    <div class=" text-sm text-gray-800 text-justify pt-5" v-html="info.desc"></div>
+    <p class=" text-xs text-gray-400 py-5">发布时间：{{ $format(info.created_at, 'YYYY-MM-DD') }} &nbsp;&nbsp;&nbsp;作者: {{ info.writer }}</p>
   </div>
 </template>
 
@@ -11,6 +11,11 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
+  props: {
+    info: {
+      type: Object
+    }
+  },
   setup () {
     
 

src/main.ts

@@ -26,8 +26,12 @@ import '@quasar/extras/ionicons-v4/ionicons-v4.css'
 // import '@quasar/extras/mdi-v4/mdi-v4.css'
 import '@quasar/extras/eva-icons/eva-icons.css'
 import longPress from '@/plugins/longPress'
+import { format } from '@/utils/time'
 
-createApp(App)
+const app = createApp(App)
+app.config.globalProperties.$format = format
+
+app
   .use(router)
   .use(NoticeBar)
   .use(Swipe)

src/service/MsgService/index.ts

+
+import baseAxios from '../index'
+
+const prefix = '/notify'
+
+
+export function getNotifyList (
+  notify_type: string
+) {
+  return baseAxios({
+    method: 'get',
+    url: prefix + '/query/list',
+    params: {
+      notify_type
+    },
+  })
+}
+
+export function searchNotify(title: string) {
+  return baseAxios({
+    method: 'post',
+    url: prefix + '/query/fuzzy/news',
+    params: {
+      title
+    }
+  })
+}
+
+export function getDetails(uuid: string) {
+  return baseAxios({
+    method: 'get',
+    url: prefix + '/query/news',
+    params: {
+      uuid
+    }
+  })
+}

src/service/NewsService/index.ts

+
+import baseAxios from '../index'
+
+const prefix = '/article'
+
+
+export function getNewsList (data: {
+  limit: number,
+  offset: number
+}) {
+  return baseAxios({
+    method: 'post',
+    url: prefix + '/query/news/list',
+    data,
+  })
+}
+
+export function searchNews(title: string) {
+  return baseAxios({
+    method: 'get',
+    url: prefix + '/query/fuzzy/news',
+    params: {
+      title
+    }
+  })
+}
+
+export function getDetails(uuid: string) {
+  return baseAxios({
+    method: 'get',
+    url: prefix + '/query/news',
+    params: {
+      uuid
+    }
+  })
+}
+
+export function getPolicyList (data: {
+  limit: number,
+  offset: number
+}) {
+  return baseAxios({
+    method: 'post',
+    url: prefix + '/query/policy/list',
+    data,
+  })
+}
+
+export function searchPolicy(title: string) {
+  return baseAxios({
+    method: 'get',
+    url: prefix + '/query/fuzzy/policy',
+    params: {
+      title
+    }
+  })
+}
+
+export function getPolicyDetails(uuid: string) {
+  return baseAxios({
+    method: 'get',
+    url: prefix + '/query/policy',
+    params: {
+      uuid
+    }
+  })
+}

src/utils/time.ts

+import 'dayjs'
+import dayjs from 'dayjs'
+
 export function timestampFormat(timestamp: number) {
   if (String(timestamp).length === new Date().getTime().toString().length) {
     timestamp /= 1000
@@ -59,3 +62,7 @@ export function timestampFormat(timestamp: number) {
     }
   }
 }
+
+export function format(timestamp: string, format: string) {
+  return dayjs(timestamp).format(format)
+}

src/views/News/NewsList/index.vue

 <template>
-  <div @click="$router.push('NewsDetail')">
-    <p class=" text-base text-gray-800 font-semibold pt-5">银保监会、人民银行联合出台现金管理类理财产品监管规则</p>
-    <p class=" text-xs text-gray-400 pt-5">新华社北京6月11日电（记者 李延霞）银保监会、人民银行11日联合对外发布通知……</p>
-    <div v-if="showImg" class=" h-32 bg-app-blue mt-5"></div>
-    <p class=" text-xs text-gray-400 py-5">发布时间：2021-07-01</p>
+  <div @click="$router.push({path: 'NewsDetail', query: { uuid: info.uuid, type: 'news' }})">
+    <p class=" text-base text-gray-800 font-semibold pt-5">{{ info.title }}</p>
+    <p class=" text-xs text-gray-400 pt-5">{{ info.desc }}</p>
+    <div
+      v-if="showImg"
+      class=" h-32 bg-app-blue mt-5 bg-cover bg-center bg-no-repeat"
+      :style="{'background-image': `url('/proxyApi/api/v1/image/show?file_hash=${info.file_name}')`}"></div>
+    <p class=" text-xs text-gray-400 py-5">发布时间：{{ $format(info.created_at, 'YYYY-MM-DD') }}</p>
   </div>
 </template>
 
@@ -15,6 +18,9 @@ export default defineComponent({
     showImg:{
       type:Boolean,
       default:true
+    },
+    info: {
+      type: Object
     }
   },
   setup () {

src/views/News/index.vue

 <template>
   <div>
-    <nav-bar title="新闻动态" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true"/>
+    <nav-bar title="新闻动态" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true" :path="{path: '/Search', query: { type: 'news' }}"/>
     <div class=" mx-5 pt-3 divide-y">
-      <news-list v-for="n in 3" :key="n"/>
+      <van-pull-refresh v-model="loading" @refresh="onRefresh">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text=""
+          @load="onLoad">
+          <news-list v-for="(item, n) in lists" :key="n" :info="item" />
+        </van-list>
+      </van-pull-refresh>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, reactive } from 'vue'
 import NavBar from "@/components/NavBar/index.vue"
 import NewsList from "./NewsList/index.vue"
+import { PullRefresh, List } from 'vant'
+import { getNewsList } from '@/service/NewsService/index'
 export default defineComponent({
-  components:{ NavBar,NewsList },
+  components:{
+    NavBar, 
+    NewsList,
+    'van-pull-refresh': PullRefresh,
+    'van-list': List
+  },
   setup () {
-    
+    let lists = ref([] as any)
+    const pagination = reactive({
+      page: 1,
+      pageSize: 10,
+      total: 0
+    })
+    const loading = ref(false)
+    const finished = ref(false)
+    const refreshing = ref(false)
+
+    const onLoad = () => {
+      getLists()
+    }
+    const onRefresh = () => {
+      // 清空列表数据
+      finished.value = false
+      pagination.page = 1
 
-    return {}
+      lists.value = []
+      loading.value = true
+      onLoad()
+    }
+    function getLists() {
+      if (refreshing.value) {
+        lists.value = [];
+        refreshing.value = false;
+      }
+      getNewsList({
+        limit: pagination.pageSize,
+        offset: (pagination.page - 1) * pagination.pageSize
+      }).then(res => {
+        lists.value.push(...res.data.items)
+        pagination.total = res.data.total
+        pagination.page++
+        //
+        loading.value = false
+        //
+        if (lists.value.length >= pagination.total) {
+          finished.value = true
+        }
+      })
+    }
+    
+    return {
+      lists,
+      pagination,
+      loading,
+      finished,
+      refreshing,
+      onLoad,
+      onRefresh
+    }
   }
+  
 })
 </script>
 

src/views/NewsDetail/index.vue

 <template>
-  <nav-bar title="动态详情" :style="{ 'background-color':'#F7F7FA'}" />
+  <nav-bar :title="title" :style="{ 'background-color':'#F7F7FA'}" />
   <div class=" px-5 py-8">
-    <p class=" text-base text-gray-800 font-semibold">银保监会、人民银行联合出台现金管理类理财产品监管规则</p>
-    <p class=" text-xs text-gray-400 mt-5 ">发布时间：2021-07-01</p>
-    <div class=" text-sm text-gray-800 text-justify mt-5">
-      <p>
-      “中国冰雪大篷车”是国家体育总局深入推进冰雪运动“南展西扩东进”战略，落实“带动三亿人参与冰雪运动”目标的重要群众性活动之一。“中国冰雪大篷车”将在为期半年的时间里，深入全国30余个城市，举办100场线下活动，同时结合持续的线上互动，以创新的体验模式、丰富的活动内容和众多的展示渠道，普及冰雪运动常识，推广冰雪运动理念，让普通大众在家门口就能感受冰雪运动的乐趣。
-      </p>
-      <div class=" bg-app-blue h-32 my-5"></div>
-      <p>
-      “中国冰雪大篷车”是国家体育总局深入推进冰雪运动“南展西扩东进”战略，落实“带动三亿人参与冰雪运动”目标的重要群众性活动之一。“中国冰雪大篷车”将在为期半年的时间里，深入全国30余个城市，举办100场线下活动，同时结合持续的线上互动，以创新的体验模式、丰富的活动内容和众多的展示渠道，普及冰雪运动常识，推广冰雪运动理念，让普通大众在家门口就能感受冰雪运动的乐趣。
-      </p>
-    </div>
+    <p class=" text-base text-gray-800 font-semibold">{{ info.title }}</p>
+    <p class=" text-xs text-gray-400 mt-5 ">发布时间：{{ $format(info.created_at, 'YYYY-MM-DD') }} <span v-if="title === '政策详情'" class="inline-block ml-8">作者：{{ info.writer }}</span> </p>
+    <div class=" text-sm text-gray-800 text-justify mt-5" v-html="info.content"></div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import NavBar from "@/components/NavBar/index.vue"
+import { getDetails, getPolicyDetails } from '@/service/NewsService/index'
 
 export default defineComponent({
   components:{ NavBar },
   setup () {
-    
-
-    return {}
+    let info = ref({})
+    let title = ref('')
+    const route = useRoute()
+    const request = route.query.type === 'news' ? getDetails : getPolicyDetails
+    title.value = route.query.type === 'news' ? '新闻详情' : '政策详情'
+    const getDetail = () => {
+      const uuid = route.query.uuid as string || ''
+      request(uuid).then(res => {
+        info.value = res.data
+      })
+    }
+    getDetail()
+    return {
+      info,
+      title
+    }
   }
 })
 </script>

src/views/PolicySupport/index.vue

 <template>
   <div>
-    <nav-bar title="政策支持" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true"/>
+    <nav-bar title="政策支持" :style="{ 'background-color':'#F7F7FA'}" :showSearchIcon="true" :path="{path: '/Search', query: {type: 'policy'}}" />
     <div class=" mx-5 pt-3 divide-y">
-      <policy-card v-for="n in 3" :key="n" class=""/>
+      <van-pull-refresh v-model="loading" @refresh="onRefresh">
+        <van-list
+          v-model:loading="loading"
+          :finished="finished"
+          finished-text=""
+          @load="onLoad">
+          <policy-card v-for="n in lists" :key="n.uuid" :info="n" class=""/>
+        </van-list>
+      </van-pull-refresh>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { List, PullRefresh } from 'vant'
 import NavBar from "@/components/NavBar/index.vue"
 import PolicyCard from '@/components/PolicyCard/index.vue'
+import { getPolicyList } from '@/service/NewsService/index'
 
 export default defineComponent({
-  components:{ NavBar,PolicyCard },
+  components:{
+    NavBar,
+    PolicyCard,
+    'van-list': List,
+    'van-pull-refresh': PullRefresh
+  },
+  
   setup () {
-    
+    let lists = ref([] as any)
+    const pagination = reactive({
+      page: 1,
+      pageSize: 10,
+      total: 0
+    })
+    const loading = ref(false)
+    const finished = ref(false)
+    const refreshing = ref(false)
 
-    return {}
+    const onLoad = () => {
+      getLists()
+    }
+    const onRefresh = () => {
+      // 清空列表数据
+      finished.value = false
+      pagination.page = 1
+
+      lists.value = []
+      loading.value = true
+      onLoad()
+    }
+    function getLists() {
+      if (refreshing.value) {
+        lists.value = [];
+        refreshing.value = false;
+      }
+      getPolicyList({
+        limit: pagination.pageSize,
+        offset: (pagination.page - 1) * pagination.pageSize
+      }).then(res => {
+        lists.value.push(...res.data.items)
+        pagination.total = res.data.total
+        pagination.page++
+        //
+        loading.value = false
+        //
+        if (lists.value.length >= pagination.total) {
+          finished.value = true
+        }
+      })
+    }
+
+    return {
+      lists,
+      pagination,
+      loading,
+      finished,
+      refreshing,
+      onLoad,
+      onRefresh
+    }
   }
 })
 </script>

src/views/Search/components/Result/index.vue

 <template>
   <div class=" pt-4 px-5 divide-y">
-    <component :is="type"></component>
+    <component :is="type" v-for="item in lists" :key="item.uuid" :info="item"></component>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent,ref } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import NewsList from "@/views/News/NewsList/index.vue"
 import PolicyCard from '@/components/PolicyCard/index.vue'
 
 export default defineComponent({
   components:{ NewsList,PolicyCard },
+  props: {
+    lists: {
+      type: String
+    }
+  },
   setup () {
-    let result = ref("NewsList")
+    const route = useRoute()
+    const types = route.query.type
+    let result = types === 'news' ? ref("NewsList") : ref('PolicyCard')
     const type = computed(()=>{
       return result.value
     })

src/views/Search/index.vue

@@ -2,29 +2,40 @@
   <div>
     <nav-bar title="搜索" :style="{ 'background-color':'#F7F7FA'}" />
     <search-bar @onSearch="onSearch" @onCancel="onCancel"/>
-    <component v-if="showResult" :is="searchResult"></component>
+    <component v-if="showResult" :is="searchResult" :lists="lists"></component>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent,computed,ref } from 'vue'
 import NavBar from "@/components/NavBar/index.vue"
+import { useRoute } from 'vue-router'
 import SearchBar from './components/SearchBar/index.vue'
 import Empty from './components/Empty/index.vue'
 import Result from './components/Result/index.vue'
+import { searchNews, searchPolicy } from '@/service/NewsService/index'
 
 export default defineComponent({
   components:{ NavBar,SearchBar,Empty,Result },
   setup () {
+    const route = useRoute()
+    const types = route.query.type
     let isEmpty = ref(true)
-    const searchResult = computed(()=>{ 
+    let lists = ref([] as any)
+    const searchResult = computed(()=>{
       return isEmpty.value ? 'Empty':'Result'
     })
 
     let showResult = ref(false)
+    const request = types === 'news' ? searchNews : searchPolicy
     const onSearch = (visible:boolean,val:string)=>{
       showResult.value = visible
-      console.log(val)
+      request(val).then(res => {
+        lists.value = res.data.items
+        if (lists.value.length > 0) {
+          isEmpty.value = false
+        }
+      })
     } 
     const onCancel = (visible:boolean)=>{
       showResult.value = visible
@@ -33,6 +44,7 @@ export default defineComponent({
       isEmpty,
       searchResult,
       showResult,
+      lists,
       onSearch,
       onCancel
     }

src/views/withMenu/Home/index.vue

@@ -20,7 +20,7 @@
         @click="$router.push('ActivityDetail')"
       />
       <group-title class="mt-7" title="热门资讯"  @click="$router.push('News')" />
-      <HotNews v-for="n in 2" :key="n" />
+      <HotNews v-for="n in hotNews" :key="n.uuid" :info="n" />
     </div>
   </div>
 </template>
@@ -37,6 +37,7 @@ import FnsCard from "./FnsCard/index.vue";
 import LoanCard from "@/components/Loan/LoanCard/index.vue";
 import LiveCard from "@/components/LiveCard/index.vue";
 import HotNews from "@/components/HotNews/index.vue";
+import { getNewsList } from '@/service/NewsService/index'
 
 export default defineComponent({
   components: {
@@ -74,8 +75,22 @@ export default defineComponent({
         },
       ],
       constants: {},
+      hotNews: []
     };
   },
+  methods: {
+    getHotNews() {
+      getNewsList({
+        limit: 2,
+        offset: 0
+      }).then(res => {
+        this.hotNews = res.data.items
+      })
+    }
+  },
+  created() {
+    this.getHotNews()
+  }
 });
 </script>
 <style scoped>

src/views/withMenu/Mine/msg.vue

@@ -2,23 +2,33 @@
   <div>
     <nav-bar title="消息" :style="{ 'background-color':'#F7F7FA'}"/>
     <div class=" px-5">
-      <msg v-for="i in 10" :key="i"/>
+      <msg v-for="i in list" :key="i.uuid" :info="i" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import NavBar from "@/components/NavBar/index.vue"
 import msg from "@/components/Mine/Msg/index.vue"
+import { getNotifyList } from '@/service/MsgService/index'
 
 export default defineComponent({
   components:{ NavBar,msg },
 
   setup () {
-    
+    const list = ref([])
+    const type = '2'
+    const notifyList = () => {
+      getNotifyList(type).then(res => {
+        list.value = res.data.items
+      })
+    }
+    notifyList()
 
-    return {}
+    return {
+      list
+    }
   }
 })
 </script>

src/views/withMenu/Mine/msgDetail.vue

 <template>
   <div class=" text-center">
     <nav-bar title="消息" :style="{ 'background-color':'#F7F7FA'}"/>
-    <p class=" text-gray-800 text-sm font-semibold mt-7">系统消息提供的标题</p>
-    <p class=" text-gray-400 text-xs mt-3">2018/12/03 12:58:23</p>
-    <p class=" text-gray-800 text-sm text-justify mx-5 mt-6">这里是消息的详情内容，这里消息的详情内容，这里是消息的详情内容。</p>
+    <p class=" text-gray-800 text-sm font-semibold mt-7">{{ info.title }}</p>
+    <p class=" text-gray-400 text-xs mt-3">{{ $format(info.created_at, 'YYYY-MM-DD HH:mm:ss') }}</p>
+    <p class=" text-gray-800 text-sm text-justify mx-5 mt-6">{{ info.content }}</p>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import NavBar from "@/components/NavBar/index.vue"
 
 export default defineComponent({
   components:{ NavBar },
   setup () {
-    
+    const route = useRoute()
+    const info = ref({} as any)
+    info.value = JSON.parse(route.query.info as string)
 
-    return {}
+
+    return {
+      info
+    }
   }
 })
 </script>