report

pages-buy/detail.vue

@@ -0,0 +1,124 @@
+<template>
+    <scroll-view scroll-y="true" :scroll-into-view="scrollViewId" @scrolltoupper="onScrollTop" style="height: 100vh;">
+        <view class="list">
+            <view class="item" v-for="item in 10">
+                <view class="msg-time">{{formatMsgTime('2021-01-08T03:24:06+08:00')}}</view>
+                <view class="content">
+                    <view class="top-img"></view>
+                    <view class="title">坯布去库存顺畅，织造市场信心提振</view>
+                    <view class="intro">【第19期|FICC|织造终端双周报】双周报</view>
+                </view>
+            </view>
+        </view>
+    </scroll-view>
+</template>
+
+<script>
+const moment=require('@/utils/moment-with-locales.min')
+moment.locale('zh-cn');
+export default {
+    data () {
+        return {
+            scrollViewId:'',
+
+        }
+    },
+    methods: {
+        onScrollTop(){
+            
+        },
+
+        // 格式化消息时间
+        formatMsgTime(e){
+            const hour=moment(e).hour()//获取小时
+            const dayTime=moment(e).format('hh:mm')
+            let dayStr=''
+            if(hour>=0&&hour<5){
+                dayStr=`凌晨 ${moment(e).format('HH:mm')}`
+            }else if(hour>=5&&hour<7){
+                dayStr=`清晨 ${dayTime}`
+            }else if(hour>=7&&hour<9){
+                dayStr=`早上 ${dayTime}`
+            }else if(hour>=9&&hour<11){
+                dayStr=`上午 ${dayTime}`
+            }else if(hour>=11&&hour<13){
+                dayStr=`中午 ${dayTime}`
+            }else if(hour>=13&&hour<17){
+                dayStr=`下午 ${dayTime}`
+            }else if(hour>=17&&hour<19){
+                dayStr=`傍晚 ${dayTime}`
+            }else if(hour>=19&&hour<23){
+                dayStr=`晚上 ${dayTime}`
+            }else if(hour>=23&&hour<24){
+                dayStr=`午夜 ${dayTime}`
+            }
+
+            // 判断是否为今天
+            if(moment(new Date()).isSame(e, 'day')){
+                return dayStr
+            }
+            // 判断昨天
+            if(moment(moment().subtract(1, 'day')).isSame(e,'day')){
+                return `昨天 ${dayStr}`
+            }
+            // 前天
+            if(moment(moment().subtract(2, 'day')).isSame(e,'day')){
+                return `前天 ${dayStr}`
+            }
+            // 周内
+            if(moment(new Date()).isSame(e, 'week')){
+                return `${moment(e).format('ddd')} ${dayStr}`
+            }
+            //年内
+            if(moment(new Date()).isSame(e, 'year')){
+                return `${moment(e).format('MM月DD日')} ${dayStr}`
+            }
+
+            return `${moment(e).format('YYYY年MM月DD日')} ${dayStr}`
+
+
+        }
+    }
+}
+</script>
+
+<style>
+page{
+    min-height: 100vh;
+    padding-bottom: 0;
+}
+</style>
+<style lang="scss" scoped>
+.list{
+    // min-height: 100vh;
+    // flex-direction: column;
+    // justify-content: flex-end;
+    .item{
+        padding: 34rpx;
+        .msg-time{
+            text-align: center;
+            padding: 20rpx;
+        }
+        .content{
+            background: #FFFFFF;
+            box-shadow: 3rpx 3rpx 12rpx 0px rgba(161,161,161,0.14);
+            border-radius: 16rpx;
+            border: 1px solid rgba(112, 112, 112, 0.2);
+            overflow: hidden;
+            .top-img{
+                width: 100%;
+                height: 200rpx;
+                background-color: #f5f5f5;
+            }
+            .title{
+                padding: 20rpx 34rpx 10rpx 34rpx;
+                font-weight: bold;
+            }
+            .intro{
+                padding: 0 34rpx 20rpx 34rpx;
+                color: $global-text-color-grey;
+            }
+        }
+    }
+}
+</style>

pages-report/chapterList.vue

@@ -0,0 +1,13 @@
+<template>
+  <view>chapter</view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

pages-report/classify.vue

@@ -0,0 +1,82 @@
+<template>
+  <view class="classify-page">
+    <swiper class="swiper" autoplay interval>
+      <swiper-item>
+        <image src="https://hzstatic.hzinsights.com/static/icon/hzyb/idcard_exp.jpg" mode="aspectFill"/>
+      </swiper-item>
+    </swiper>
+    <view class="list">
+      <van-row gutter="20">
+        <van-col span="6">
+          <view class="item"></view>
+        </van-col>
+        <van-col span="6">
+          <view class="item"></view>
+        </van-col>
+        <van-col span="6">
+          <view class="item"></view>
+        </van-col>
+        <van-col span="6">
+          <view class="item"></view>
+        </van-col>
+        <van-col span="6">
+          <view class="item"></view>
+        </van-col>
+        <van-col span="6">
+          <view class="item"></view>
+        </van-col>
+      </van-row>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      list:[
+        {
+          name:"晨报",
+          img:''
+        },
+        {
+          name:"周报",
+          img:''
+        },
+        {
+          name:"双周报",
+          img:''
+        },
+        {
+          name:"月报",
+          img:''
+        },
+      ]
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.classify-page {
+  padding: 34rpx;
+  .swiper{
+    height: 300rpx;
+    overflow: hidden;
+    image{
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+  .list{
+    margin-top: 40rpx;
+    .item{
+      width: 100%;
+      height: 150rpx;
+      background-color: #ccc;
+      margin-bottom: 20rpx;
+    }
+  }
+}
+</style>

pages-report/search.vue

@@ -0,0 +1,57 @@
+<template>
+    <view class="report-search-page">
+        <van-sticky style="background: #fff">
+            <van-search
+                :value="searchVal"
+                placeholder="请输入搜索关键词"
+                use-action-slot
+                bind:change="onChange"
+                bind:search="onSearch"
+                shape="round"
+                :focus="focus"
+            >
+                <view slot="action" bind:tap="onSearch">搜索</view>
+            </van-search>
+        </van-sticky>
+        <view class="list-wrap">
+            <view class="item" v-for="item in list" :key="item">
+                <view>{{item.title}}</view>
+                <view>{{item.desc}}</view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            searchVal:'',
+            focus:true,
+            list:[
+                {
+                    title:"关注中美领导交流地产",
+                    desc:'地产政策的拐点肯定是看到了，由小及大的趋势。目前按揭和开发贷放松，属于对前面过紧政策的修补。政策的影响是把之前过于悲观的预期做了纠正。市场把贴水修复一下。',
+                    tags:['双周报','煤炭双周报'],
+                    time:'2021年8月31日 15:30'
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+.van-sticky-wrap--fixed{
+  background-color: #fff;
+}
+</style>
+<style lang="scss" scoped>
+.list-wrap{
+    padding: 34rpx;
+    .item{
+        border-bottom: 1px solid #f5f5ff;
+        padding: 20rpx 0;
+    }
+}
+</style>

pages.json

@@ -1,16 +1,10 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/activity/activity",
-			"style": {
-				"navigationBarTitleText": "报告及活动",
-				"enablePullDownRefresh": true
-			}
-		},
 		{
 			"path": "pages/report/report",
 			"style": {
-				"navigationBarTitleText": "报告"
+				"navigationBarTitleText": "报告",
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -26,6 +20,13 @@
 				"enablePullDownRefresh": true
 			}
 		},
+		{
+			"path": "pages/activity/activity",
+			"style": {
+				"navigationBarTitleText": "报告及活动",
+				"enablePullDownRefresh": true
+			}
+		},
 		{
 			"path": "pages/user/user",
 			"style": {
@@ -117,6 +118,43 @@
 					}
 				}
 			]
+		},
+		//已购模块
+		{
+			"root": "pages-buy",
+			"pages": [
+				{
+					"path":"detail",
+					"style":{
+						"navigationBarTitleText":""
+					}
+				}
+			]
+		},
+		// 研报模块
+		{
+			"root": "pages-report",
+			"pages": [
+				{
+					"path":"classify",
+					"style":{
+						"navigationBarTitleText":"FICC研报分类"
+					}
+				},
+				{
+					"path":"search",
+					"style":{
+						"navigationBarTitleText":"FICC研报"
+					}
+				},
+				// 章节列表
+				{
+					"path": "chapterList",
+					"style":{
+						"navigationBarTitleText": ""
+					}
+				}
+			]
 		}
 	],
 		
@@ -181,7 +219,10 @@
 			"van-checkbox": "/wxcomponents/vant/checkbox/index",
 			"van-transition": "/wxcomponents/vant/transition/index",
 			"van-collapse": "/wxcomponents/vant/collapse/index",
-  		"van-collapse-item": "/wxcomponents/vant/collapse-item/index"
+  		"van-collapse-item": "/wxcomponents/vant/collapse-item/index",
+			"van-tag": "/wxcomponents/vant/tag/index",
+			"van-row": "/wxcomponents/vant/row/index",
+  		"van-col": "/wxcomponents/vant/col/index"
 		}
 	}
 }

pages/buy/buy.vue

@@ -1,14 +1,132 @@
 <template>
-  <view>buy</view>
+  <view class="buy-page">
+    <view class="list-wrap">
+      <view class="flex item" v-for="item in list" :key="item.name" @click="goDetail">
+        <view class="img">
+          <text class="num">{{item.num}}</text>
+        </view>
+        <view class="content-box">
+          <view class="flex title-box">
+            <text class="van-ellipsis title">{{item.name}}</text>
+            <text class="time">{{item.time|showTime}}</text>
+          </view>
+          <view class="intro">{{item.intro}}</view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
+const moment=require('@/utils/moment-with-locales.min')
+moment.locale('zh-cn');
 export default {
+  filters: {
+    showTime(e){
+      // 判断是否为今年
+      const isYear=moment(e).isBefore(new Date(), 'year');
+      if(isYear){
+        return moment(e).format("YYYY年MM月DD日");
+      }else{
+        const isDay=moment(e).isBefore(new Date(), 'day');
+        if(isDay){
+          return moment(e).format("MM月DD日");
+        }else{
+          const hour=moment(e).hour()
+          return hour<12?`上午 ${moment(e).format('hh:mm')}`:`下午 ${moment(e).format('hh:mm')}`
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      list:[
+        {
+          name:"坯布去库存顺畅，织造市场信心提振",
+          intro:"【第17期|FICC|钢材周度数据点评】数据点评",
+          time:"2022-01-18T17:24:06+08:00",
+          num:10,
+          img:''
+        },
+        {
+          name:"坯布去库存顺畅，织造市场信心提振",
+          intro:"【第17期|FICC|钢材周度数据点评】数据点评",
+          time:"2021-01-18T17:24:06+08:00",
+          num:10,
+          img:''
+        },
+        {
+          name:"坯布去库存顺畅，织造市场信心提振",
+          intro:"【第17期|FICC|钢材周度数据点评】数据点评",
+          time:"2022-02-10T09:24:06+08:00",
+          num:10,
+          img:''
+        },
+      ]
+    }
+  },
   onLoad(){
+  },
+  methods: {
+    goDetail(){
+      uni.navigateTo({ url: '/pages-buy/detail' })
+    }
   }
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+.buy-page{
+  .list-wrap{
+    .item{
+      padding: 34rpx 40rpx;
+      border-bottom: 1px solid $global-border-color;
+      .img{
+        flex-shrink: 0;
+        margin-right: 40rpx;
+        width: 100rpx;
+        height: 100rpx;
+        background-color: $global-bg-color-grey;
+        position: relative;
+        .num{
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translate(50%,-50%);
+          display: inline-block;
+          box-sizing: border-box;
+          min-width: 20rpx;
+          padding: var(--van-badge-padding);
+          color: #fff;
+          font-size: $global-font-size-mini;
+          line-height: 1.2;
+          text-align: center;
+          background: #ee0a24;
+          border-radius: 28rpx;
+          padding: 2rpx 4rpx;
+        }
+      }
+      .content-box{
+        flex: 1;
+        overflow: hidden;
+        .title-box{
+          justify-content: space-between;
+          .title{
+            font-size: 14px;
+            font-weight: bold;
+          }
+          .time{
+            font-size: $global-font-size-sm;
+            color: $global-text-color-grey;
+            flex-shrink: 0;
+            margin-left: 20rpx;
+          }
+        }
+        .intro{
+          color: $global-text-color-grey;
+        }
+      }
+    }
+  }
+}
 </style>

pages/login.vue

@@ -133,7 +133,7 @@ export default {
             })
             if(res.code===200){
                 uni.switchTab({
-                    url: '/pages/activity/activity'
+                    url: '/pages/report/report'
                 })
                 this.$store.dispatch('getUserInfo')
                 this.$store.dispatch('getTabBar')

pages/report/report.vue

@@ -1,14 +1,263 @@
 <template>
-  <view>report</view>
+  <view class="report-page">
+    <van-sticky style="background: #fff">
+    <!-- 导航 -->
+    <view class="nav-bar-wrap" :style="{height:navBarStyle.height,paddingTop:navBarStyle.paddingTop}">
+      <view class="content">
+        <van-icon custom-class="search-icon" name="search" size="24px" @click="goSearch" />
+        <view class="text">FICC研报</view>
+      </view>
+    </view>
+    <!-- 分类 -->
+    <view class="type-wrap">
+      <view class="flex top">
+        <view class="flex first-type-box">
+          <view class="item" v-for="item in 7">
+            <image src="" mode="scaleToFill"/>
+            <view>宏观经济</view>
+          </view>
+        </view>
+        <image
+          src="../../static/chart/menu.png"
+          mode="widthFix"
+          class="menu-icon"
+          @click="goClassify"
+        />
+      </view>
+      <view class="sub-type-box">
+        <van-button color="#D5AD79" plain round size="mini">宏观经济</van-button>
+      </view>
+    </view>
+    </van-sticky>
+    <view class="list-wrap">
+      <view class="list-item" v-for="item in list" :key="item">
+        <view class="time">{{item.time}}</view>
+        <view class="content-list">
+          <view class="content-item" v-for="citem in item.list" :key="citem">
+            <view class="c-time">{{citem.time}}</view>
+            <view class="title">{{citem.title}}</view>
+            <view class="van-multi-ellipsis--l3 desc">{{citem.desc}}</view>
+            <view class="tags">
+              <van-tag style="margin-right:5px" color="#D5AD79" type="primary" v-for="tag in citem.tags">{{tag}}</van-tag>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
 export default {
-  onLoad(){
+  data () {
+    return {
+      navBarStyle:{
+        height:60+'px',
+        paddingTop:40+'px'
+      },
+      
+      list:[
+        {
+          time:'1.13 周四',
+          list:[
+            {
+              time:'17:25:08',
+              desc:'地产政策的拐点肯定是看到了，由小及大的趋势。目前按揭和开发贷放松，属于对前面过紧政策的修补。政策的影响是把之前过于悲观的预期做了纠正。市场把贴水修复一下',
+              title:"地产政策的变化和影响",
+              tags:['双周报','煤炭双周报']
+            },
+            {
+              time:'17:25:08',
+              desc:'地产政策的拐点肯定是看到了，由小及大的趋势。目前按揭和开发贷放松，属于对前面过紧政策的修补。政策的影响是把之前过于悲观的预期做了纠正。市场把贴水修复一下',
+              title:"地产政策的变化和影响",
+              tags:['双周报','煤炭双周报']
+            }
+          ]
+        },
+        {
+          time:'1.13 周四',
+          list:[
+            {
+              time:'17:25:08',
+              desc:'地产政策的拐点肯定是看到了，由小及大的趋势。目前按揭和开发贷放松，属于对前面过紧政策的修补。政策的影响是把之前过于悲观的预期做了纠正。市场把贴水修复一下',
+              title:"地产政策的变化和影响",
+              tags:['双周报','煤炭双周报']
+            }
+          ]
+        },
+        {
+          time:'1.13 周四',
+          list:[
+            {
+              time:'17:25:08',
+              desc:'地产政策的拐点肯定是看到了，由小及大的趋势。目前按揭和开发贷放松，属于对前面过紧政策的修补。政策的影响是把之前过于悲观的预期做了纠正。市场把贴水修复一下',
+              title:"地产政策的变化和影响",
+              tags:['双周报','煤炭双周报']
+            }
+          ]
+        },
+      ]
+    }
+  },
+  onLoad(){ 
+    this.initNavBar()
+  },
+  methods: {
+    initNavBar(){
+      uni.getSystemInfo({
+        success: (result) => {
+          this.navBarStyle={
+            height:(result.statusBarHeight+result.safeArea.top)+'px',
+            paddingTop:result.safeArea.top+'px'
+          }
+        },
+        fail: (error) => {}
+      })
+    },
+
+    // 跳转分类
+    goClassify(){
+      uni.navigateTo({ url: '/pages-report/classify' })
+    },
+
+    //跳转搜索
+    goSearch(){
+      uni.navigateTo({url:'/pages-report/search'})
+    }
   }
 }
 </script>
 
-<style>
+<style lang="scss">
+.van-sticky-wrap--fixed{
+  background-color: #fff;
+}
+.nav-bar-wrap{
+  .content{
+    position: relative;
+    height: 100%;
+    .search-icon{
+      position: absolute;
+      left: 34rpx;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+  
+}
+</style>
+
+<style lang="scss" scoped>
+.fix-top{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  background-color: #fff;
+}
+.nav-bar-wrap{
+  border-bottom: 1px solid $global-border-color;
+  .content{
+    .text{
+      text-align: center;
+      width: 50vw;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      font-weight: bold;
+      font-size: 16px;
+    }
+  }
+  
+}
+.type-wrap{
+  border-bottom: 1px solid $global-border-color;
+  padding: 20rpx 34rpx;
+  .top{
+    overflow: hidden;
+    .menu-icon{
+      margin-top: 21rpx;
+      width: 52rpx;
+      height: 40rpx;
+      display: block;
+      flex-shrink: 0;
+      margin-left: 30rpx;
+    }
+  }
+  .first-type-box{
+    flex: 1;
+    overflow-x: auto;
+    &::-webkit-scrollbar{
+      display: none;
+    }
+    .item{
+      flex-shrink: 0;
+      margin-right: 20rpx;
+      text-align: center;
+      font-size: $global-font-size-sm;
+      image{
+        width: 80rpx;
+        height: 80rpx;
+        display: block;
+        margin: 0 auto 6rpx auto;
+        background-color: #f5f5f5;
+      }
+    }
+  }
+}
+
+.list-wrap{
+  padding: 20rpx 34rpx;
+  .list-item{
+    margin-bottom: 40rpx;
+  }
+  .content-list{
+    .content-item{
+      padding: 20rpx 0 20rpx 20rpx;
+      border-bottom: 1px solid $global-border-color;
+      border-left: 1px solid $global-border-color;
+      position: relative;
+      &:last-child{
+        border-bottom: none;
+      }
+      &::before{
+        content: '';
+        display: block;
+        width: 6rpx;
+        height: 6rpx;
+        border-radius: 50%;
+        border: 1px solid $global-border-color;
+        position: absolute;
+        left: 0;
+        top: 0;
+        background-color: #fff;
+        transform: translate(-50%,-50%);
+      }
+      &:last-child::after{
+        content: '';
+        display: block;
+        width: 6rpx;
+        height: 6rpx;
+        border-radius: 50%;
+        border: 1px solid $global-border-color;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        background-color: #fff;
+        transform: translate(-50%,50%);
+      }
+    }
+    .title{
+      font-size: $global-font-size-lg;
+      font-weight: bold;
+    }
+    .desc{
+      line-height: 1.5;
+      margin-top: 10rpx;
+    }
+  }
+}
 
 </style>

utils/config.js

@@ -33,13 +33,6 @@ const globalImgUrls={
 
 // 默认tabbar数据
 const defaultTabBarListConfig=[
-    {
-        key: "activity",
-        pagePath: "pages/activity/activity",
-        text: "报告及活动",
-        iconPath: "../static/tabbar/activity.png",
-        selectedIconPath: "../static/tabbar/activity-s.png",
-    },
     {
         key: "report",
         pagePath: "pages/report/report",
@@ -61,6 +54,13 @@ const defaultTabBarListConfig=[
         iconPath: "../static/tabbar/chart.png",
         selectedIconPath: "../static/tabbar/chart-s.png",
     },
+    {
+        key: "activity",
+        pagePath: "pages/activity/activity",
+        text: "报告及活动",
+        iconPath: "../static/tabbar/activity.png",
+        selectedIconPath: "../static/tabbar/activity-s.png",
+    },
     {
         key: "user",
         pagePath: "pages/user/user",