合并冲突

src/api/home.ts

@@ -1,27 +1,28 @@
 import request from '@/api/config.ts'
 import qs from 'qs'
 
-// 我的企业列表
-export function entList (data: any) {
-  data = qs.stringify(data)
+// 数据报告列表接口
+export function getReportList (data: any) {
   return request({
-    url: '/entbase/ent/myents',
+    url: '/datareport/getList',
     method: 'post',
     data
   })
 }
 
-export function entList2 (params: any) {
+// 数据报告详情页
+export function getReportDetail (data: any) {
   return request({
-    url: '/entbase/ent/myents',
-    method: 'get',
-    params
+    url: '/datareport/getDetail',
+    method: 'post',
+    data
   })
 }
 
 export function serviceTerms () {
+  // data = qs.stringify(data)
   return request({
     url: '/jyapp/front/staticPage/dataExport_serviceterms.html',
     method: 'get'
   })
-}
+}

src/router/modules/home.ts

@@ -12,7 +12,7 @@ export default [
     name: 'home',
     component: () => import(/* webpackChunkName: "index" */ '@/views/main/Home.vue'),
     meta: {
-      title: '首页'
+      title: '数据报告'
     }
   },
   {
@@ -38,5 +38,21 @@ export default [
     meta: {
       title: '支付结果'
     }
+  },
+  {
+    path: '/introducepage',
+    name: 'introducepage',
+    component: () => import(/* webpackChunkName: "pay" */ '@/views/main/IntroducePage.vue'),
+    meta: {
+      title: '数据报告'
+    }
+  },
+  {
+    path: '/reportdetail/:id',
+    name: 'reportdetail',
+    component: () => import(/* webpackChunkName: "pay" */ '@/views/main/ReportDetail.vue'),
+    meta: {
+      title: '数据报告'
+    }
   }
 ]

src/store/modules/home.ts

@@ -1,4 +1,6 @@
 import {
+  getReportList,
+  getReportDetail,
   serviceTerms
 } from '@/api/home'
 
@@ -19,5 +21,28 @@ export default {
       sessionStorage.setItem('activity-x-dataList', JSON.stringify({}))
     }
   },
+  actions: {
+    // 数据报告列表接口
+    async getReportList (state, data: any) {
+      try {
+        const res = await getReportList(data)
+        return res.data
+      } catch (error) {}
+    },
+    // 数据报告详情页接口
+    async getReportDetail (state, data: any) {
+      try {
+        const res = await getReportDetail(data)
+        return res.data
+      } catch (error) {}
+    },
+    // 测试-获取条款html页面
+    async getServiceTerms (state) {
+      try {
+        const res = await serviceTerms()
+        return res.data
+      } catch (error) {}
+    }
+  },
   getters: {}
 }

src/views/main/Home.vue

@@ -1,23 +1,185 @@
 <template>
   <div class="report-home">
-    <div class="j-main">
-      介绍页面
-    </div>
-    <div class="j-button-group j-footer">
-      <button class="j-button-confirm">立即支付</button>
+    <div v-if="list.length && list.length > 0">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        :immediate-check="false"
+        finished-text="没有更多了"
+        @load="onLoad"
+        :offset="50"
+      >
+        <ul class="list">
+          <li class="item" v-for="item in list" :key="item.id" @click="$router.push(`/reportdetail/${item.id}`)">
+            <div class="item-img">
+              <img :src="item.img" alt="">
+            </div>
+            <div class="item-cont">
+              <p class="ellipsis-2 title">{{item.title}}</p>
+              <div class="desc">
+                <div class="left">{{item.publishtime* 1000 | dateFormatter('yyyy/MM/dd')}}</div>
+                <div class="right">
+                  <span class="before-price">&yen; <em>{{item.before_price}}</em></span>
+                  <span class="current-price">&yen; <em>{{item.price}}</em> </span>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </van-list>
     </div>
+    <Empty v-else>
+      <div class="tip-sub-text">暂无数据</div>
+    </Empty>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-
+import { mapActions } from 'vuex'
+import { List } from 'vant'
+import Empty from '@/components/common/Empty.vue'
 @Component({
-  name: 'home'
+  name: 'home',
+  components: {
+    [List.name]: List,
+    Empty
+  },
+  methods: {
+    ...mapActions({
+      getList: 'home/getReportList'
+    })
+  }
 })
 
-export default class Home extends Vue {}
-</script>
+export default class Home extends Vue {
+  protected getList!: any
+  list = []
+  data = [
+    { id: 1, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5fgl6.png', price: 199, before_price: 299, pushtime: 1577780169 },
+    { id: 2, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5fROO.png', price: 199, before_price: 299, pushtime: 1577780169 },
+    { id: 3, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5fcSx.png', price: 199, before_price: 299, pushtime: 1577780169 },
+    { id: 4, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5fyf1.png', price: 199, before_price: 299, pushtime: 1577780169 },
+    { id: 5, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5f26K.png', price: 199, before_price: 299, pushtime: 1577780169 },
+    { id: 6, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5ffmD.png', price: 199, before_price: 299, pushtime: 1577780169 },
+    { id: 7, title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告', img: 'https://s1.ax1x.com/2020/05/19/Y5fh0e.png', price: 199, before_price: 299, pushtime: 1577780169 }
+  ]
+
+  loading = false
+  finished = false
+  currentPage = 1
+  totalPage = 0
 
+  created () {
+    this.getReportList()
+  }
+
+  getReportList () {
+    this.loading = true
+    this.getList(`page_index=${this.currentPage}`).then((res: any) => {
+      if (res.error_code === 0 && res.data.list) {
+        const rows = res.data.list
+        this.loading = false
+        this.totalPage = res.data.page_count
+        if (rows === null || rows.length === 0) {
+          this.finished = true
+          return
+        }
+        if (this.currentPage >= this.totalPage) {
+          this.finished = true
+        }
+        if (this.currentPage === 1) {
+          this.list = rows
+        } else {
+          this.list = this.list.concat(rows)
+        }
+      } else {
+        this.finished = true
+      }
+    }).catch(() => {
+      this.finished = true
+    })
+  }
+
+  onLoad () {
+    this.currentPage++
+    this.getReportList()
+  }
+}
+</script>
 <style lang="scss">
-  .report-home {}
+  .report-home {
+    .list{
+      .item{
+        position: relative;
+        display: flex;
+        padding: 20px 16px;
+        background-color: #fff;
+        &:after{
+          position: absolute;
+          box-sizing: border-box;
+          content: ' ';
+          pointer-events: none;
+          right: 16px;
+          bottom: 0;
+          left: 16px;
+          border-bottom: 1px solid #ebedf0;
+          -webkit-transform: scaleY(0.5);
+          transform: scaleY(0.5);
+        }
+        .item-img{
+          width: 80px;
+          height: 80px;
+          margin-right: 16px;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .item-cont{
+          flex: 1;
+          .title{
+            font-size: 16px;
+            line-height: 24px;
+            color: #171826;
+          }
+          .desc{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 13px;
+            .left{
+              font-size: 12px;
+              line-height: 18px;
+              color: #9B9CA3;
+            }
+            .right{
+              display: flex;
+              align-items: center;
+            }
+            .before-price{
+              font-size: 12px;
+              line-height: 18px;
+              color: #9B9CA3;
+              margin-right: 6px;
+              em{
+                text-decoration: line-through;
+              }
+            }
+            .current-price{
+              display: flex;
+              align-items: center;
+              color: #FB483D;
+              font-size: 14px;
+              line-height: 20px;
+              em{
+                margin-left: 2px;
+                font-size: 16px;
+                line-height: 24px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 </style>

src/views/main/IntroducePage.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="introduce">
+    <div style="flex:1;overflow-y:scroll;">
+      <div class="banner">
+        <img class="text" src="@/assets/image/data_report_txt.png" alt="">
+      </div>
+      <ul class="list">
+        <li class="item" v-for="(item,index) in list" :key='index'>
+          <div class="item_icon">
+            <img :src="item.src" alt="">
+          </div>
+          <div class="item_txt">
+            <p class="title">{{item.title}}</p>
+            <p class="desc">{{item.desc}}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="j-footer">
+      <div class="j-button-group">
+            <button class="j-button-confirm" @click="$router.push('/home')">立即使用</button>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+// import { mapState, mapActions, mapMutations } from 'vuex'
+
+@Component({
+  name: 'introduce',
+  methods: {
+  }
+})
+
+export default class Introduce extends Vue {
+  list = [
+    { src: require('../../assets/image/dujiafabu.png'), title: '独家发布', desc: '剑鱼标讯官方独家跟进剑鱼标讯数据，定期制作 高质量的行业数据报告' },
+    { src: require('../../assets/image/hongguanjiaodu.png'), title: '宏观视角', desc: '剑鱼标讯参照政治、经济、文化等多角度宏观视角去分析行业特性和未来趋势' },
+    { src: require('../../assets/image/shangjijiazhi.png'), title: '商机价值', desc: '通过剑鱼标讯数据报告分析，针对每个行业的独特视角，寻找适合企业发展的商机价值' }
+  ]
+}
+</script>
+
+<style lang="scss">
+  .introduce{
+    height: 100%;
+    overflow: hidden!important;
+    .banner{
+      position: relative;
+      width: 100%;
+      height: 300px;
+      background: url(~@/assets/image/data_report_bg.png) no-repeat center center #fff;
+      background-size: cover;
+      .text{
+        position: absolute;
+        top: 35px;
+        left: 30px;
+        width: 148px;
+      }
+    }
+    .list{
+      padding-top: 24px;
+      background: #fff;
+      .item{
+        display: flex;
+        align-items: center;
+        padding: 0 36px 32px 39px;
+        .item_icon{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 56px;
+          height: 56px;
+          margin-right: 25px;
+          border-radius: 28px;
+          background-color: rgba(208, 222, 252, 0.3);
+          img{
+            width: 32px;
+            height: 32px;
+          }
+        }
+        .item_txt{
+          flex: 1;
+          .title{
+            font-size: 18px;
+            line-height: 26px;
+            color: #171826;
+          }
+          .desc{
+            margin-top: 4px;
+            font-size: 13px;
+            line-height: 20px;
+            color: #5F5E64;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/main/ReportDetail.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="report-detail">
+    <!-- 骨架屏 -->
+    <div class="skeleton" v-if="skeletonShow">
+      <div class="skeleton-main">
+        <div style="padding:20px 0">
+          <van-skeleton :row="2" />
+        </div>
+        <div style="display: flex;justify-content: space-between;align-items: center;">
+          <van-skeleton :row="1" row-width="80" />
+          <van-skeleton :row="1" row-width="140" />
+        </div>
+        <div style="height:8px;background-color:#f2f3f5;margin:20px 0"></div>
+        <div>
+          <van-skeleton title :row="10" />
+        </div>
+      </div>
+      <div class="skeleton-bottom">
+        <van-skeleton title title-width="100%" />
+        <van-skeleton title title-width="100%" />
+        <van-skeleton title title-width="100%" />
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div class="content" v-else>
+      <div class="c-main">
+        <div class="top">
+          <div class="title">{{detail.title}}</div>
+          <div class="info">
+            <div class="i-left">{{detail.publishtime* 1000 | dateFormatter('yyyy/MM/dd')}}</div>
+            <div class="i-right">
+              <span class="before-price">原价:&yen; <em>{{detail.before_price}}</em></span>
+              <span class="current-price">&yen; <em>{{detail.price}}</em></span>
+            </div>
+          </div>
+        </div>
+        <div class="middle">
+          <div class="m-title">详情</div>
+          <div class="m-html" v-html="detail.content"></div>
+        </div>
+      </div>
+      <div class="j-footer">
+        <div class="j-button-group">
+            <button class="j-button-confirm" @click="$router.push('/home')">立即购买</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { mapActions } from 'vuex'
+import { Skeleton } from 'vant'
+@Component({
+  name: 'detail',
+  components: {
+    [Skeleton.name]: Skeleton
+  },
+  methods: {
+    ...mapActions({
+      getDetail: 'home/getReportDetail'
+    })
+  }
+})
+
+export default class Home extends Vue {
+  protected getDetail!: any
+  skeletonShow = true
+  detail = {
+    id: 12,
+    title: '2019-2020年城际高速铁路和城际轨道交通市场研究报告',
+    img: '/upload/datareport/2020051500263.png',
+    price: 199,
+    before_price: 299,
+    pushtime: 1577780169,
+    content: '<p>城际高速铁路是指在人口稠密的都市圈或者城市带（城市群）中，规划和修建的高速铁路客运专线运输系统，主要运营于城市群或城市带，线路总长一般不超过200千米，允许列车行驶的最大速度在250km/h以上。城际轨道交通是指以城际运输为主的轨道交通客运系统，相当于低速版的城际高铁。凭借人均能耗低、承载量大、互通互联等诸多优点，成为助力绿色出行、创建智慧城市、缓解拥堵等的重要手段。<br> 城际高速铁路和城际轨道交通产业链可分为上游（施工准备）、中游（建设施工）以及下游（运营维护）。上游施工准备主要包括设计咨询、原材料、机械设备；中游建设施工主要包括建筑施工和智能化设备；下游运营维护主要包括运营维护，产业应用于检修设备及运营。</p>'
+  }
+
+  mounted () {
+    this.getDetail(`id=${this.$route.params.id}`).then((res: any) => {
+      if (res.error_code === 0 && res.data) {
+        this.detail = res.data
+        this.skeletonShow = false
+      }
+    })
+  }
+}
+</script>
+<style lang="scss">
+  .report-detail {
+    height: 100%;
+    .skeleton{
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background-color: #fff;
+      .skeleton-main{
+        flex: 1;
+        overflow-y: scroll;
+      }
+      .skeleton-bottom{
+        padding: 20px 0;
+      }
+    }
+    .content{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+      overflow: hidden;
+      .c-main{
+        flex: 1;
+        overflow-y: scroll;
+      }
+      .top{
+        padding: 20px 16px;
+        background-color: #fff;
+        .title{
+          font-size: 20px;
+          line-height: 30px;
+          color: #171826;
+        }
+        .info{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 13px;
+          .i-left{
+            font-size: 12px;
+            line-height: 18px;
+            color: #9B9CA3;
+          }
+          .i-right{
+            display: flex;
+            align-items: center;
+            .before-price{
+              margin-right: 6px;
+              font-size: 12px;
+              line-height: 18px;
+              color: #9B9CA3;
+              em{
+                text-decoration: line-through;
+              }
+            }
+            .current-price{
+              display: flex;
+              align-items: center;
+              font-size: 16px;
+              line-height: 24px;
+              color: #FB483D;
+              em{
+                margin-left: 2px;
+                font-size: 20px;
+                line-height: 30px;
+              }
+            }
+          }
+        }
+      }
+      .middle{
+        margin-top: 8px;
+        padding: 16px 16px 20px;
+        background-color: #fff;
+        .m-title{
+          position: relative;
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+          font-size: 18px;
+          line-height: 26px;
+          color: #171826;
+          font-weight: bold;
+          &:after{
+            position: absolute;
+            box-sizing: border-box;
+            content: ' ';
+            pointer-events: none;
+            width: 3px;
+            height: 16px;
+            background: #2ABED1;
+            border-radius: 8px;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+          }
+        }
+        .m-html{
+          padding-top: 14px;
+          font-size: 15px;
+          line-height: 22px;
+          color: #5F5E64;
+          text-align: justify;
+        }
+      }
+    }
+  }
+</style>

vue.config.js

@@ -44,8 +44,8 @@ module.exports = {
   devServer: {
     proxy: {
       '^/testServer': {
-        // target: 'http://192.168.3.207:8181/',
-        target: 'http://app2-jytest.jianyu360.cn',
+        target: 'http://192.168.20.241:92/',
+        // target: 'http://app2-jytest.jianyu360.cn'，
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
@@ -122,6 +122,9 @@ module.exports = {
         .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
     }
 
+    // 修复HMR
+    config.resolve.symlinks(true)
+
     config.module
       .rule('ts')
       .use('ts-loader')