report

api/buy.js

@@ -5,6 +5,15 @@ import { httpGet, httpPost } from "@/utils/request.js";
 /** 
  * 已购列表
  */
-export const apiBuyList=params=>{
-    return httpGet('/purchase/list',params)
+export const apiBuyList=()=>{
+    return httpGet('/purchase/list',{})
+}
+
+/** 
+ * 已购详情消息列表
+ * @param {classify_id_first} 一级分类id
+ * @param {activity_id} 活动id
+ */
+export const apiBuyDetail=params=>{
+    return httpGet('/purchase/detail',params)
 }

pages-buy/detail.vue

@@ -1,14 +1,14 @@
 <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="item" v-for="item in list" :key="item.report_id" :id="`msg${item.report_id}`" @click="goDetail(item)">
+                <view class="msg-time">{{formatMsgTime(item.time)}}</view>
                 <view class="content">
-                    <view class="top-img">
-                        <text class="name">名称名称名称名称名称名称名称名称名称</text>
+                    <view class="top-img" :style="'backgroundImage:url('+item.img_url+')'">
+                        <text class="name">{{item.top_name}}</text>
                     </view>
-                    <view class="title">坯布去库存顺畅，织造市场信心提振</view>
-                    <view class="intro">【第19期|FICC|织造终端双周报】双周报</view>
+                    <view class="title">{{item.title}}</view>
+                    <view class="intro">{{item.content}}</view>
                 </view>
             </view>
         </view>
@@ -18,14 +18,77 @@
 <script>
 const moment=require('@/utils/moment-with-locales.min')
 moment.locale('zh-cn');
+import {apiBuyDetail} from '@/api/buy'
 export default {
     data () {
         return {
             scrollViewId:'',
-
+            classify_id_first:0,
+            activity_id:0,
+            page:1,
+            pageSize:20,
+            list:[
+                {
+				"report_id": 1742,
+				"activity_id": 0,
+				"classify_id_first": 84,
+				"classify_name_first": "周报",
+				"classify_id_second": 0,
+				"classify_name_second": "",
+				"title": "迁移测试周报1【美债收益率“迷之跳水”】",
+				"content": "【第2期|FICC】迁移测试周报1【美债收益率“迷之跳水”】",
+				"stage": 2,
+				"time": "2022-03-09T13:19:14+08:00",
+				"img_url": "",
+				"top_name": "迁移测试周报1【美债收益率“迷之跳水”】"
+			},
+			{
+				"report_id": 1751,
+				"activity_id": 252,
+				"classify_id_first": 84,
+				"classify_name_first": "周报",
+				"classify_id_second": 0,
+				"classify_name_second": "",
+				"title": "迁移测试周报1",
+				"content": "【第2期|FICC】迁移测试周报1",
+				"stage": 2,
+				"time": "2022-03-08T00:00:00+08:00",
+				"img_url": "",
+				"top_name": "迁移测试周报1"
+			},
+			{
+				"report_id": 1748,
+				"activity_id": 0,
+				"classify_id_first": 84,
+				"classify_name_first": "周报",
+				"classify_id_second": 0,
+				"classify_name_second": "",
+				"title": "迁移测试周报1",
+				"content": "【第2期|FICC】迁移测试周报1",
+				"stage": 2,
+				"time": "2022-03-08T00:00:00+08:00",
+				"img_url": "",
+				"top_name": "迁移测试周报1"
+			}
+            ]
         }
     },
+    onLoad(options) {
+        this.classify_id_first=options.classify_id_first
+        this.activity_id=options.activity_id
+        this.getDetail()
+    },
     methods: {
+        async getDetail(){
+            const res=await apiBuyDetail({
+                classify_id_first:Number(this.classify_id_first),
+                activity_id:Number(this.activity_id),
+                current_index:this.page,
+                page_size:this.pageSize
+            })
+
+        },
+
         onScrollTop(){
             
         },
@@ -79,6 +142,14 @@ export default {
             return `${moment(e).format('YYYY年MM月DD日')} ${dayStr}`
 
 
+        },
+
+        goDetail(item){
+            if(item.activity_id){
+                uni.navigateTo({url: '/pages-activity/detail?id=' + item.activity_id })
+            }else{
+                uni.navigateTo({url:'/pages-report/reportDetail'})
+            }
         }
     }
 }
@@ -110,6 +181,7 @@ page{
                 width: 100%;
                 height: 230rpx;
                 background-color: #a1a1a1;
+                background-size: cover;
                 position: relative;
                 .name{
                     display: block;

pages-report/chapterDetail.vue

@@ -0,0 +1,183 @@
+<template>
+  <view class="chapter-detail-page">
+    <view class="main-box">
+      <view class="title">【第1期 | 原油周报】关注中美贸易政策</view>
+      <view class="flex time">
+        <text>FICC团队</text>
+        <text>2021.11.18 08:40:00</text>
+      </view>
+      <view class="flex audio-wrap">
+        <image src="" mode="aspectFill" />
+        <view>
+          <view>关注中美贸易政策变化</view>
+          <view style="color: #999999">1分31秒</view>
+        </view>
+      </view>
+      <view class="tips">
+        <text>注：请务必阅读</text>
+        <text style="color: #e3b377; margin-left: 20rpx" @click="showDisclaimers = true">免责声明</text>
+      </view>
+
+      <view class="rich-content">
+        <mp-html :content="html" />
+      </view>
+    </view>
+    <!-- 章节详情底部快速切换 -->
+    <view class="chapter-list-wrap">
+      <view class="top-text">更多</view>
+      <van-row gutter="10">
+        <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>
+
+    <!-- 返回顶部 -->
+    <image @click="handleBackTop" class="back-top-img" src="./static/back-top.png" mode="aspectFill" />
+
+    <!-- 免责声明 -->
+    <van-popup :show="showDisclaimers" @close="showDisclaimers = false" round closeable>
+      <view class="disclaimers-box">
+        <view style="text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 20rpx">免责声明</view>
+        <view style="margin-bottom: 10rpx">1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</view>
+        <view style="margin-bottom: 10rpx"
+          >2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</view
+        >
+        <view style="margin-bottom: 10rpx"
+          >3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</view
+        >
+        <view style="margin-bottom: 10rpx">4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</view>
+      </view>
+    </van-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showDisclaimers: false, //显示免责声明
+      html: "<h1>Hello World!</h1>",
+    };
+  },
+  methods: {
+    handleBackTop() {
+      uni.pageScrollTo({ scrollTop: 0 });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.chapter-detail-page {
+  .main-box{
+        padding: 34rpx;
+    }
+    .title{
+        font-size: 36rpx;
+        font-weight: bold;
+        margin-bottom: 30rpx;
+    }
+    .time{
+        justify-content: space-between;
+        font-size: 28rpx;
+    }
+    .audio-wrap{
+        height: 160rpx;
+        background: #FAF7EE;
+        border-radius: 16rpx;
+        margin-top: 20rpx;
+        padding: 10rpx 31rpx;
+        margin-bottom: 31rpx;
+        align-items: center;
+        image{
+            width: 110rpx;
+            height: 110rpx;
+            display: block;
+            background-color: rgb(233, 230, 230);
+            margin-right: 16rpx;
+        }
+    }
+
+    .tips{
+        font-size: 34rpx;
+        margin-bottom: 51rpx;
+        &::before{
+            content: '';
+            width: 10rpx;
+            height: 50rpx;
+            display: inline-block;
+            background-color: #E3B377;
+            margin-right: 20rpx;
+            position: relative;
+            top: 10rpx;
+        }
+    }
+
+    .disclaimers-box{
+        width: 94vw;
+        padding: 32rpx;
+    }
+
+    .rich-content{
+        line-height: 1.7;
+    }
+
+    .back-top-img{
+        position: fixed;
+        z-index: 99;
+        width: 76rpx;
+        height: 76rpx;
+        right: 34rpx;
+        bottom: 100rpx;
+    }
+  .chapter-list-wrap {
+    background-color: #f5f6fa;
+    padding: 34rpx;
+    min-height: 300px;
+    .top-text {
+      text-align: center;
+      color: #666666;
+      margin-bottom: 30rpx;
+      &::before {
+        content: "";
+        width: 90rpx;
+        height: 1px;
+        background-color: #999;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10rpx;
+      }
+      &::after {
+        content: "";
+        width: 90rpx;
+        height: 1px;
+        background-color: #999;
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 10rpx;
+      }
+    }
+    .item {
+      background-color: #fff;
+      height: 160rpx;
+      margin-bottom: 20rpx;
+    }
+  }
+}
+</style>

pages-report/chapterList.vue

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

pages-report/classify.vue

@@ -6,7 +6,7 @@
       </swiper-item>
     </swiper>
     <view class="list">
-      <van-row gutter="20">
+      <van-row gutter="10">
         <van-col span="6">
           <view class="item">
             
@@ -77,7 +77,7 @@ export default {
       width: 100%;
       height: 150rpx;
       background-color: #ccc;
-      margin-bottom: 20rpx;
+      margin-bottom: 30rpx;
     }
   }
 }

pages-report/components/searchBox.vue

@@ -24,13 +24,17 @@
             v-if="searchVal"
             @click="handleClearSearch"
         />
-        <view class="right-btn" v-if="searchVal" @click="handleSearch">搜索</view>
+        <view class="right-btn" v-if="hasRightBtn&&searchVal" @click="handleSearch">搜索</view>
     </view>
 </template>
 
 <script>
 export default {
     props: {
+        hasRightBtn:{
+            type:Boolean,
+            default:true
+        },
         placeholder:{
             type:String,
             default:'请输入搜索关键词'

pages-report/reportDetail.vue

@@ -1,51 +1,54 @@
 <template>
     <view class="report-detail-page">
-        <view class="main-box">
-        <view class="title">【第1期 | 原油周报】关注中美贸易政策</view>
-        <view class="flex time">
-            <text>FICC团队</text>
-            <text>2021.11.18   08:40:00</text>
-        </view>
-        <view class="flex audio-wrap">
-            <image src="" mode="aspectFill"/>
-            <view>
-                <view>关注中美贸易政策变化</view>
-                <view style="color:#999999">1分31秒</view>
+        <!-- 报告详情 -->
+        <view class="main-box" v-if="false">
+            <view class="title">【第1期 | 原油周报】关注中美贸易政策</view>
+            <view class="flex time">
+                <text>FICC团队</text>
+                <text>2021.11.18   08:40:00</text>
+            </view>
+            <view class="flex audio-wrap">
+                <image src="" mode="aspectFill"/>
+                <view>
+                    <view>关注中美贸易政策变化</view>
+                    <view style="color:#999999">1分31秒</view>
+                </view>
+            </view>
+            <view class="tips">
+                <text>注：请务必阅读</text>
+                <text style="color:#E3B377;margin-left:20rpx" @click="showDisclaimers=true">免责声明</text>
             </view>
-        </view>
-        <view class="tips">
-            <text>注：请务必阅读</text>
-            <text style="color:#E3B377;margin-left:20rpx" @click="showDisclaimers=true">免责声明</text>
-        </view>
 
-        <view class="rich-content">
-            <mp-html :content="html"/>
-        </view>
+            <view class="rich-content">
+                <mp-html :content="html"/>
+            </view>
         </view>
-
-        <!-- 章节详情底部快速切换 -->
+        <!-- 晨报、周报章节 -->
         <view class="chapter-list-wrap">
-            <view class="top-text">更多</view>
-            <van-row gutter="10">
-                <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 class="top-box">
+                <view class="title">晨报</view>
+                <view class="sub-title">鲍威尔调控市场加息预期</view>
+                <view class="flex top-bot">
+                    <view class="flex time-box">
+                        <view class="day">14</view>
+                        <view>
+                            <view>周三</view>
+                            <view>2022-03</view>
+                        </view>
+                    </view>
+                    <view class="num">第249期</view>
+                </view>
+            </view>
+            <view class="list-box">
+                <view class="flex item" v-for="item in 7" :key="item" @click="goChapterDetail">
+                    <image class="img" src="" mode="aspectFill" />
+                    <view class="con">
+                        <view class="title">宏观 <text class="tag">谨慎</text></view>
+                        <view class="van-multi-ellipsis--l2 sub-title">非美市场供应端呈不稳定性</view>
+                        <view class="update-time">更新至：2022-01-12</view>
+                    </view>
+                </view>
+            </view>
         </view>
 
         <!-- 返回顶部 -->
@@ -76,6 +79,10 @@ export default {
     methods: {
         handleBackTop(){
             uni.pageScrollTo({ scrollTop: 0 })
+        },
+
+        goChapterDetail(){
+            uni.navigateTo({ url: '/pages-report/chapterDetail' })
         }
     }
 }
@@ -146,36 +153,91 @@ export default {
     }
 
     .chapter-list-wrap{
-        background-color: #F5F6FA;
-        padding: 34rpx;
-        min-height: 300px;
-        .top-text{
-            text-align: center;
-            color: #666666;
-            margin-bottom: 30rpx;
-            &::before{
-                content: '';
-                width: 90rpx;
-                height: 1px;
-                background-color: #999;
-                display: inline-block;
-                vertical-align: middle;
-                margin-right: 10rpx;
+        .top-box{
+            height: 418rpx;
+            background-color: rgba($color: #000000, $alpha: 0.7);
+            color: #fff;
+            position: relative;
+            .title{
+                text-align: center;
+                font-size: 34rpx;
+                font-weight: 600;
+                padding-top: 78rpx;
+            }
+            .sub-title{
+                font-size: 32rpx;
+                text-align: center;
+                width: 70%;
+                margin-left: auto;
+                margin-right: auto;
             }
-            &::after{
-                content: '';
-                width: 90rpx;
-                height: 1px;
-                background-color: #999;
-                display: inline-block;
-                vertical-align: middle;
-                margin-left: 10rpx;
+            .top-bot{
+                position: absolute;
+                bottom: 70rpx;
+                left: 34rpx;
+                right: 34rpx;
+                justify-content: space-between;
+                align-items: flex-end;
+                .time-box{
+                    align-items: center;
+                    font-size: 24rpx;
+                    .day{
+                        font-size: 32rpx;
+                        border-right: 1px solid #fff;
+                        padding-right: 15rpx;
+                        margin-right: 15rpx;
+                    }
+                }
+                
             }
         }
-        .item{
+        .list-box{
+            margin-top: -50rpx;
+            border-top-left-radius: 40rpx;
+            border-top-right-radius: 40rpx;
+            min-height: 200rpx;
             background-color: #fff;
-            height: 160rpx;
-            margin-bottom: 20rpx;
+            position: relative;
+            z-index: 2;
+            .item{
+                padding: 50rpx 34rpx;
+                border-bottom: 1px solid #E5E5E5;
+                .img{
+                    width: 112rpx;
+                    height: 112rpx;
+                    background-color: #f5f5f5;
+                    flex-shrink: 0;
+                    margin-right: 20rpx;
+                }
+                .con{
+                    flex: 1;
+                    .title{
+                        font-size: 32rpx;
+                        color: #57768D;
+                        font-weight: bold;
+                        margin-bottom: 10rpx;
+                        .tag{
+                            font-size: 20rpx;
+                            color: #fff;
+                            font-weight: normal;
+                            display: inline-block;
+                            background-color: #1E88E5;
+                            line-height: 37rpx;
+                            padding: 0 6rpx;
+                            border-radius: 4rpx;
+                            margin-left: 10rpx;
+                        }
+                    }
+                    .sub-title{
+                        color: #999;
+                    }
+                    .update-time{
+                        float: right;
+                        color: #D4D4D4;
+                        font-size: 20rpx;
+                    }
+                }
+            }
         }
     }
 }

pages-report/reportList.vue

@@ -1,74 +1,163 @@
 <template>
-    <view class="report-list-page">
-        <van-sticky style="background: #fff">
-            <view class="flex search-wrap">
-                <van-search
-                    shape="round"
-                    :value="searchVal"
-                    placeholder="图表名称搜索"
-                    @change="searchValChange"
-                    @search="onSearch"
-                    @clear="onClearSearch"
-                    clear-trigger="always"
-                    style="flex:1"
-                />
-                <view class="filter-box">
-                    <image src="./static/filter-icon.png" mode="aspectFill"></image>
-                    <text>筛选</text>
-                </view>
+  <view class="report-list-page">
+    <van-sticky style="background: #fff">
+      <view class="flex search-wrap">
+        <searchBox style="flex: 1" :focus="focus" placeholder="请输入报告标题或关键字" :hasRightBtn="false" @change="onChange" @search="onSearch"></searchBox>
+        <view class="filter-box" @click="showFilter=true">
+          <image src="./static/filter-icon.png" mode="aspectFill"></image>
+          <text>筛选</text>
+        </view>
+      </view>
+    </van-sticky>
+    <view class="report-list-wrap">
+      <view class="flex item" v-for="item in 10" :key="item">
+        <image class="img" src="" mode="aspectFill" />
+        <view class="con">
+          <view class="title">【第16期|FICC】宏观商品复盘</view>
+          <view class="tips">摘要：市场风险偏好正面</view>
+          <view class="time">2021.11.22 18:00</view>
+          <view class="audio-box grey-audio-box">
+            <text>播放</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 筛选 -->
+    <van-popup :show="showFilter" position="bottom" round>
+        <view class="filter-wrap">
+            <view class="flex top">
+                <text style="color:#000">筛选</text>
+                <text style="color:#E3B377" @click="showFilter=false">取消</text>
             </view>
-        </van-sticky>
-        <view class="list-wrap">
-            <view class="global-list-card flex list-item" v-for="item in 10" :key="item">
-                <image class="img" src="" mode="aspectFill"/>
-                <view class="content">
-                    <view class="title">【第1期|FICC|橡胶双周报】人民币在博弈的逻辑</view>
-                </view>
+            <view class="list-box">
+                <van-row gutter="10">
+                    <van-col span="8" v-for="item in 17" :key="item">
+                        <view class="item active">item</view>
+                    </van-col>
+                </van-row>
             </view>
+            <view class="btn">完成</view>
         </view>
-    </view>
+    </van-popup>
+  </view>
 </template>
 
 <script>
+import searchBox from "./components/searchBox.vue";
 export default {
-
-}
+  components: {
+    searchBox,
+  },
+  data() {
+    return {
+      searchVal: "",
+      showFilter:true
+    };
+  },
+  methods: {
+    onChange(e) {
+      this.searchVal = e;
+    },
+    onSearch() {
+      console.log("搜索", this.searchVal);
+    },
+  },
+};
 </script>
-<style>
-.van-search{
-    padding: 0 !important;
-}
-</style>
+
 <style lang="scss" scoped>
 .search-wrap {
-    background-color: #fff;
-    padding: 30rpx 34rpx;
-    align-items: center;
-    .filter-box{
-        image{
-            width: 48rpx;
-            height: 48rpx;
-            vertical-align: middle;
-        }
-        text{
-            vertical-align: middle;
-        }
+  background-color: #fff;
+  padding: 30rpx 34rpx;
+  align-items: center;
+  .filter-box {
+    image {
+      width: 52rpx;
+      height: 52rpx;
+      vertical-align: middle;
+    }
+    text {
+      vertical-align: middle;
+      color: #e3b377;
+      font-size: 32rpx;
+    }
+  }
+}
+.report-list-wrap {
+    padding: 0 34rpx;
+  .item {
+    margin-bottom: 30rpx;
+    .img {
+      width: 120rpx;
+      height: 160rpx;
+      border-radius: 16rpx;
+      background-color: #f5f5f5;
+      flex-shrink: 0;
+      margin-right: 20rpx;
+    }
+    .con {
+      flex: 1;
+      position: relative;
+      .title {
+        font-size: 32rpx;
+        font-weight: bold;
+        margin-bottom: 8rpx;
+      }
+      .tips {
+        color: #666666;
+        margin-bottom: 10rpx;
+      }
+      .time {
+        color: #666666;
+      }
+      .audio-box {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 99rpx;
+        height: 39rpx;
+        background: linear-gradient(100deg, #e3b377 0%, #ffddb1 100%);
+        border-radius: 20rpx;
+        color: #fff;
+        font-size: 24rpx;
+      }
+      .grey-audio-box {
+        background: linear-gradient(114deg, #b0b0b0 0%, #e5e2e2 100%);
+      }
     }
+  }
 }
-.list-wrap{
-    padding: 34rpx;
-    .list-item{
-        padding: 20rpx;
+.filter-wrap{
+    min-height: 30vh;
+    background-color: #fff;
+    padding-top: 53rpx;
+    .top{
+        font-size: 32rpx;
+        justify-content: space-between;
         margin-bottom: 40rpx;
-        .img{
-            width: 200rpx;
-            height: 260rpx;
-            display: block;
-            flex-shrink: 0;
-            margin-right: 30rpx;
-            background-color: #f5f5f5;
+        padding: 0 34rpx;
+    }
+    .list-box{
+        padding: 0 34rpx;
+        .item{
+            background-color: #F6F6F6;
+            color: #000000;
+            text-align: center;
+            line-height: 76rpx;
+            margin-bottom: 20rpx;
+        }
+        .active{
+            background-color: #FAEEDE;
         }
     }
+    .btn{
+        text-align: center;
+        color: #fff;
+        font-size: 32rpx;
+        background-color: #E6B77D;
+        line-height: 80rpx;
+        margin-top: 50rpx;
+    }
 }
-
-</style>
+</style>

pages-report/specialColumn/detail.vue

@@ -7,7 +7,32 @@
                 <text>王沛</text>
                 <text class="tag">弘则研究董事长</text>
             </view>
+            <view class="user-title">首席宏观商品分析师</view>
+            <view class="user-intro">北京航空航天大学获得学士学位，清华大学获得硕士学位。负责弘则研究的周期品研究和大类资产配置，并与商品私募、国内大型大宗商品贸易企业有深入的沟通与合作。</view>
         </view>
+        <van-sticky>
+        <view class="flex tab-box">
+            <view :class="['item',tabActive=='专栏介绍'&&'tab-acitve']" @click="tabChange('专栏介绍')">专栏介绍</view>
+            <view :class="['item',tabActive=='报告目录'&&'tab-acitve']" @click="tabChange('报告目录')">报告目录</view>
+        </view>
+        </van-sticky>
+        <view class="section column-intro-wrap" v-if="tabActive=='专栏介绍'">
+            专栏介绍
+        </view>
+        <view class="section report-list-wrap" v-if="tabActive=='报告目录'">
+            <view class="flex item" v-for="item in 10" :key="item">
+                <image class="img" src="" mode="aspectFill"/>
+                <view class="con">
+                    <view class="title">【第16期|FICC】宏观商品复盘</view>
+                    <view class="tips">摘要：市场风险偏好正面</view>
+                    <view class="time">2021.11.22  18:00</view>
+                    <view class="audio-box grey-audio-box">
+                        <text>播放</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="contact-box">联系我们</view>
     </view>
 </template>
 
@@ -15,10 +40,13 @@
 export default {
     data () {
         return {
-        
+            tabActive:'报告目录'
         }
     },
     methods: {
+        tabChange(e){
+            this.tabActive=e
+        }
     }
 }
 </script>
@@ -32,6 +60,7 @@ export default {
     }
     .user-wrap{
         padding: 0 34rpx;
+        margin-bottom: 34rpx;
         .avatar{
             width: 140rpx;
             height: 140rpx;
@@ -49,9 +78,122 @@ export default {
                 font-weight: bold;
             }
             .tag{
-                background-color: #fff;
+                background-color: #FAF7EE;
+                margin-left: 20rpx;
+                padding: 6rpx 16rpx;
+                border-radius: 30rpx;
+                font-size: 24rpx;
+                display: inline-block;
+                &::before{
+                    content: '';
+                    display: inline-block;
+                    width: 30rpx;
+                    height: 30rpx;
+                    background-image: url('../static/tag.png');
+                    background-size: cover;
+                    position: relative;
+                    top: 4rpx;
+                }
             }
         }
+        .user-title{
+            color: #666666;
+            margin: 20rpx 0;
+        }
+        .user-intro{
+            font-size: 24rpx;
+            color: #666666;
+            line-height: 1.5;
+        }
+    }
+    .tab-box{
+        align-items: center;
+        height: 78rpx;
+        background: #FFFFFF;
+        position: relative;
+        box-shadow: 0px 4rpx 4rpx 1px rgba(198, 198, 198, 0.16);
+        .item{
+            flex: 1;
+            text-align: center;
+            font-size: 32rpx;
+        }
+        &::after{
+            content: '';
+            position: absolute;
+            display: inline-block;
+            width: 1rpx;
+            height: 78rpx;
+            top: 0;
+            left: 50%;
+            background-color: #F6F6F6;
+        }
+        .tab-acitve{
+            color: #E3B377;
+        }
+    }
+    .section{
+        padding: 34rpx;
+        line-height: 1.7;
+        color: #666666;
+        padding-bottom: 90rpx;
+    }
+
+    .report-list-wrap{
+        .item{
+            margin-bottom: 30rpx;
+            .img{
+                width: 120rpx;
+                height: 160rpx;
+                border-radius: 16rpx;
+                background-color: #f5f5f5;
+                flex-shrink: 0;
+                margin-right: 20rpx;
+            }
+            .con{
+                flex: 1;
+                position: relative;
+                .title{
+                    font-size: 32rpx;
+                    font-weight: bold;
+                    margin-bottom: 8rpx;
+                }
+                .tips{
+                    color: #666666;
+                    margin-bottom: 10rpx;
+                }
+                .time{
+                    color: #666666;
+                }
+                .audio-box{
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                    width: 99rpx;
+                    height: 39rpx;
+                    background: linear-gradient(100deg, #E3B377 0%, #FFDDB1 100%);
+                    border-radius: 20rpx;
+                    color: #fff;
+                    font-size: 24rpx;
+                }
+                .grey-audio-box{
+                    background: linear-gradient(114deg, #B0B0B0 0%, #E5E2E2 100%);
+                }
+            }
+        }
+    }
+
+    .contact-box{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80rpx;
+        background: #E6B77D;
+        line-height: 80rpx;
+        text-align: center;
+        color: #FFFFFF;
+        font-size: 32rpx;
+        z-index: 10;
     }
 }
 </style>

pages.json

@@ -153,13 +153,6 @@
 						"navigationBarTitleText":"FICC研报"
 					}
 				},
-				// 章节列表
-				{
-					"path": "chapterList",
-					"style":{
-						"navigationBarTitleText": ""
-					}
-				},
 				// 专栏列表
 				{
 					"path": "specialColumn/list"
@@ -175,6 +168,10 @@
 				//报告详情
 				{
 					"path": "reportDetail"
+				},
+				// 章节详情
+				{
+					"path": "chapterDetail"
 				}
 			]
 		}

pages/buy/buy.vue

@@ -1,13 +1,13 @@
 <template>
   <view class="buy-page">
     <view class="list-wrap">
-      <view class="flex item" v-for="item in list" :key="item.name" @click="goDetail">
+      <view class="flex item" v-for="item in list" :key="item.report_id" @click="goDetail(item)">
         <view class="img">
-          <text class="num">{{item.num}}</text>
+          <text class="num" v-if="item.stage">{{item.stage}}</text>
         </view>
         <view class="content-box">
-          <view class="van-ellipsis title">{{item.name}}</view>
-          <view class="van-ellipsis intro">{{item.intro}}</view>
+          <view class="van-ellipsis title">{{item.title}}</view>
+          <view class="van-ellipsis intro">{{item.content}}</view>
         </view>
         <view class="time">{{item.time|showTime}}</view>
       </view>
@@ -40,27 +40,62 @@ export default {
   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:''
-        },
+       {
+			"report_id": 1631,
+			"report_chapter_id": 0,
+			"activity_id": 0,
+			"classify_id_first": 75,
+			"classify_name_first": "双周报",
+			"classify_id_second": 76,
+			"classify_name_second": "橡胶双周报",
+			"title": "橡胶双周报",
+			"content": "【第1期|FICC| 橡胶双周报】双周报",
+			"stage": 1,
+			"time": "2022-03-09T13:19:13+08:00",
+			"unread": 3
+		},
+		{
+			"report_id": 0,
+			"report_chapter_id": 0,
+			"activity_id": 253,
+			"classify_id_first": 0,
+			"classify_name_first": "",
+			"classify_id_second": 0,
+			"classify_name_second": "",
+			"title": "防守打法发水电费",
+			"content": "主讲：秦钏",
+			"stage": 0,
+			"time": "2022-03-09T09:59:47+08:00",
+			"unread": 0
+		},
+		{
+			"report_id": 836,
+			"report_chapter_id": 0,
+			"activity_id": 0,
+			"classify_id_first": 52,
+			"classify_name_first": "行业调研",
+			"classify_id_second": 53,
+			"classify_name_second": "寻根知本",
+			"title": "寻根知本（10月第一期）",
+			"content": "【第1期|FICC| 寻根知本】行业调研",
+			"stage": 1,
+			"time": "2022-03-03T14:18:24+08:00",
+			"unread": 4
+		},
+		{
+			"report_id": 1073,
+			"report_chapter_id": 0,
+			"activity_id": 0,
+			"classify_id_first": 56,
+			"classify_name_first": "权益研报",
+			"classify_id_second": 57,
+			"classify_name_second": "近期路演精华",
+			"title": "短保早餐行业龙头商业模式分析",
+			"content": "【第1期|FICC| 近期路演精华】权益研报",
+			"stage": 1,
+			"time": "2022-03-02T15:41:29+08:00",
+			"unread": 1
+		}
       ]
     }
   },
@@ -71,10 +106,11 @@ export default {
   methods: {
     async getList(){
       const res=await apiBuyList()
+
     },
 
-    goDetail(){
-      uni.navigateTo({ url: '/pages-buy/detail' })
+    goDetail(item){
+      uni.navigateTo({ url: `/pages-buy/detail?classify_id_first=${item.classify_id_first}&activity_id=${item.activity_id}` })
     }
   }
 }

pages/login.vue

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