report

api/buy.js

@@ -0,0 +1,10 @@
+// 已购模块
+
+import { httpGet, httpPost } from "@/utils/request.js";
+
+/** 
+ * 已购列表
+ */
+export const apiBuyList=params=>{
+    return httpGet('/purchase/list',params)
+}

pages-buy/detail.vue

@@ -4,7 +4,9 @@
             <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="top-img">
+                        <text class="name">名称名称名称名称名称名称名称名称名称</text>
+                    </view>
                     <view class="title">坯布去库存顺畅，织造市场信心提振</view>
                     <view class="intro">【第19期|FICC|织造终端双周报】双周报</view>
                 </view>
@@ -103,19 +105,31 @@ page{
             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;
+                height: 230rpx;
+                background-color: #a1a1a1;
+                position: relative;
+                .name{
+                    display: block;
+                    width: 90%;
+                    text-align: center;
+                    color: #FFFFFF;
+                    font-size: 28rpx;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                }
             }
             .title{
-                padding: 20rpx 34rpx 10rpx 34rpx;
+                padding: 20rpx 30rpx 10rpx 30rpx;
                 font-weight: bold;
+                font-size: 32rpx;
             }
             .intro{
-                padding: 0 34rpx 20rpx 34rpx;
+                padding: 0 30rpx 24rpx 30rpx;
                 color: $global-text-color-grey;
             }
         }

pages-report/classify.vue

@@ -8,7 +8,9 @@
     <view class="list">
       <van-row gutter="20">
         <van-col span="6">
-          <view class="item"></view>
+          <view class="item">
+            
+          </view>
         </van-col>
         <van-col span="6">
           <view class="item"></view>

pages-report/reportDetail.vue

@@ -0,0 +1,13 @@
+<template>
+    <view class="report-detail-page"></view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

pages-report/search.vue

@@ -15,8 +15,12 @@
         </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 class="van-ellipsis title">{{item.title}}</view>
+                <view class="van-multi-ellipsis--l3 desc">{{item.desc}}</view>
+                <view class="flex bot">
+                    <view class="tags"><text>#双周报</text><text>#双周报</text></view>
+                    <view class="time">{{item.time}}</view>
+                </view>
             </view>
         </view>
     </view>
@@ -34,6 +38,12 @@ export default {
                     desc:'地产政策的拐点肯定是看到了，由小及大的趋势。目前按揭和开发贷放松，属于对前面过紧政策的修补。政策的影响是把之前过于悲观的预期做了纠正。市场把贴水修复一下。',
                     tags:['双周报','煤炭双周报'],
                     time:'2021年8月31日 15:30'
+                },
+                {
+                    title:"关注中美领导交流地产",
+                    desc:'地产政策的拐点肯定是看到了。',
+                    tags:['双周报'],
+                    time:'2021年8月31日 15:30'
                 }
             ]
         }
@@ -50,8 +60,37 @@ export default {
 .list-wrap{
     padding: 34rpx;
     .item{
-        border-bottom: 1px solid #f5f5ff;
-        padding: 20rpx 0;
+        padding: 30rpx;
+        background: #FFFFFF;
+        box-shadow: 3rpx 3rpx 12rpx 1rpx rgba(184, 184, 184, 0.16);
+        border-radius: 16rpx;
+        border: 1px solid #E5E5E5;
+        margin-bottom: 20rpx;
+        .title{
+            font-size: 32rpx;
+            font-weight: bold;
+        }
+        .desc{
+            color: #666666;
+            line-height: 1.5;
+            margin: 10rpx 0 20rpx 0;
+        }
+        .bot{
+            justify-content: space-between;
+            .time{
+                flex-shrink: 0;
+                color: #999999;
+                font-size: 24rpx;
+            }
+            .tags{
+                font-size: 28rpx;
+                color: #E3B377;
+                text{
+                    display: inline-block;
+                    margin-right: 30rpx;
+                }
+            }
+        }
     }
 }
 </style>

pages/buy/buy.vue

@@ -6,12 +6,10 @@
           <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 class="van-ellipsis title">{{item.name}}</view>
+          <view class="van-ellipsis intro">{{item.intro}}</view>
         </view>
+        <view class="time">{{item.time|showTime}}</view>
       </view>
     </view>
   </view>
@@ -20,6 +18,7 @@
 <script>
 const moment=require('@/utils/moment-with-locales.min')
 moment.locale('zh-cn');
+import {apiBuyList} from '@/api/buy.js'
 export default {
   filters: {
     showTime(e){
@@ -65,9 +64,15 @@ export default {
       ]
     }
   },
-  onLoad(){
+  onLoad(){},
+  onShow() {
+    // this.getList()
   },
   methods: {
+    async getList(){
+      const res=await apiBuyList()
+    },
+
     goDetail(){
       uni.navigateTo({ url: '/pages-buy/detail' })
     }
@@ -78,16 +83,19 @@ export default {
 <style lang="scss" scoped>
 .buy-page{
   .list-wrap{
+    padding: 30rpx 34rpx;
     .item{
-      padding: 34rpx 40rpx;
+      padding: 30rpx 0;
       border-bottom: 1px solid $global-border-color;
+      align-items: center;
       .img{
         flex-shrink: 0;
-        margin-right: 40rpx;
-        width: 100rpx;
-        height: 100rpx;
+        margin-right: 28rpx;
+        width: 120rpx;
+        height: 120rpx;
         background-color: $global-bg-color-grey;
         position: relative;
+        border-radius: 14rpx;
         .num{
           position: absolute;
           top: 0;
@@ -109,23 +117,21 @@ export default {
       .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;
-          }
+        .title{
+          font-size: 14px;
+          font-weight: bold;
+          margin-bottom: 18rpx;
         }
         .intro{
           color: $global-text-color-grey;
         }
       }
+      .time{
+        font-size: $global-font-size-sm;
+        color: $global-text-color-grey;
+        flex-shrink: 0;
+        margin-left: 20rpx;
+      }
     }
   }
 }

pages/report/report.vue

@@ -10,22 +10,20 @@
     </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 class="flex first-type-box">
+        <view class="item" v-for="item in 4" :key="item">
+          <image src="" mode="aspectFill"/>
+          <view>宏观经济</view>
+        </view>
+        <view class="item" @click="goClassify">
+          <image src="@/static/report-menu.png" mode="aspectFill"/>
+          <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 class="flex sub-type-box">
+        <view class="item active">宏观经济</view>
+        <view class="item">利率债</view>
       </view>
     </view>
     </van-sticky>
@@ -35,11 +33,12 @@
         <view class="content-list">
           <view class="content-item" v-for="citem in item.list" :key="citem">
             <view class="content-box">
+              <view class="all-btn">全部</view>
               <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>
+                <text style="margin-right:15px" v-for="tag in citem.tags" :key="tag">#{{tag}}</text>
               </view>
             </view>
             
@@ -62,7 +61,7 @@ export default {
       
       list:[
         {
-          time:'1.13 周四',
+          time:'1.13 周四da',
           list:[
             {
               time:'17:25:08',
@@ -79,7 +78,7 @@ export default {
           ]
         },
         {
-          time:'1.13 周四',
+          time:'1.13 周四f',
           list:[
             {
               time:'17:25:08',
@@ -90,7 +89,7 @@ export default {
           ]
         },
         {
-          time:'1.13 周四',
+          time:'1.13 周四d',
           list:[
             {
               time:'17:25:08',
@@ -174,54 +173,66 @@ export default {
   
 }
 .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;
-    }
-  }
+  // border-bottom: 1px solid $global-border-color;
+  padding: 20rpx 34rpx 0 34rpx;
+  box-shadow: 0px 4rpx 4rpx 1px rgba(198, 198, 198, 0.25);
   .first-type-box{
-    flex: 1;
-    overflow-x: auto;
-    &::-webkit-scrollbar{
-      display: none;
-    }
+    justify-content: space-between;
     .item{
       flex-shrink: 0;
-      margin-right: 20rpx;
       text-align: center;
       font-size: $global-font-size-sm;
       image{
-        width: 80rpx;
-        height: 80rpx;
+        width: 100rpx;
+        height: 100rpx;
         display: block;
-        margin: 0 auto 6rpx auto;
-        background-color: #f5f5f5;
+        margin: 0 auto 15rpx auto;
       }
     }
   }
+  .sub-type-box{
+    margin-top: 40rpx;
+    font-size: 28rpx;
+    color: #666666;
+    .item{
+      padding-bottom: 16rpx;
+      margin-right: 50rpx;
+    }
+    .active{
+      color: #E3B377;
+      border-bottom: 2px solid #E3B377;
+    }
+  }
 }
 
 .list-wrap{
   padding: 20rpx 34rpx;
   .list-item{
     margin-bottom: 40rpx;
+    .time{
+      margin-bottom: 32rpx;
+    }
   }
   .content-list{
     .content-box{
-      border-bottom: 1px solid $global-border-color;
-      padding: 0 20rpx 20rpx 20rpx;
+      padding: 0 0rpx 20rpx 20rpx;
+      position: relative;
+      .all-btn{
+        position: absolute;
+        right: 20rpx;
+        bottom: 20rpx;
+        width: 95rpx;
+        height: 34rpx;
+        background: linear-gradient(100deg, #E3B377 0%, #FFDDB1 100%);
+        border-radius: 17rpx;
+        color: #fff;
+        font-size: 24rpx;
+        text-align: center;
+      }
     }
     .content-item{
-      padding:0 20rpx;
-      border-left: 1px solid $global-border-color;
+      padding:0 0 50rpx 20rpx;
+      border-left: 1px solid #F4E1C9;
       position: relative;
       &:last-child{
         border-bottom: none;
@@ -229,30 +240,37 @@ export default {
       &::before{
         content: '';
         display: block;
-        width: 6rpx;
-        height: 6rpx;
+        box-sizing: border-box;
+        width: 24rpx;
+        height: 24rpx;
         border-radius: 50%;
-        border: 1px solid $global-border-color;
+        border: 6rpx solid #F4E1C9;
         position: absolute;
         left: 0;
         top: 0;
-        background-color: #fff;
+        background: #E3B377;
         transform: translate(-50%,-50%);
+        z-index: 2;
       }
-      &:last-child::after{
-        content: '';
+      &::after{
+        content:'';
         display: block;
-        width: 6rpx;
-        height: 6rpx;
-        border-radius: 50%;
-        border: 1px solid $global-border-color;
+        width: 34rpx;
+        height: 1rpx;
+        background-color: #F4E1C9;
         position: absolute;
+        top: 0;
         left: 0;
-        bottom: 0;
-        background-color: #fff;
-        transform: translate(-50%,50%);
+        z-index: 1;
+      }
+      .c-time{
+        position: relative;
+        top: -17rpx;
+        font-size: 24rpx;
+        color: #333333;
       }
     }
+
     .title{
       font-size: $global-font-size-lg;
       font-weight: bold;
@@ -260,6 +278,11 @@ export default {
     .desc{
       line-height: 1.5;
       margin-top: 10rpx;
+      color: #666666;
+    }
+    .tags{
+      margin-top: 20rpx;
+      color: #E3B377;
     }
   }
 }