合并冲突

src/App.vue

@@ -24,7 +24,7 @@ export default {
   data () {
     return {
       // 需要被缓存的组件，组件的name属性数组
-      cashViews: []
+      cashViews: ['home']
     }
   }
 }

src/router/modules/home.ts

@@ -10,9 +10,10 @@ export default [
   {
     path: '/home',
     name: 'home',
-    component: () => import(/* webpackChunkName: "index" */ '@/views/main/Home.vue'),
+    component: () => import(/* webpackChunkName: "home" */ '@/views/main/Home.vue'),
     meta: {
-      title: '数据报告'
+      title: '数据报告',
+      isBack: false
     }
   },
   {
@@ -40,17 +41,17 @@ export default [
     }
   },
   {
-    path: '/introducepage',
-    name: 'introducepage',
-    component: () => import(/* webpackChunkName: "pay" */ '@/views/main/IntroducePage.vue'),
+    path: '/introduce',
+    name: 'introduce',
+    component: () => import(/* webpackChunkName: "index" */ '@/views/main/IntroducePage.vue'),
     meta: {
       title: '数据报告'
     }
   },
   {
-    path: '/reportdetail/:id',
-    name: 'reportdetail',
-    component: () => import(/* webpackChunkName: "pay" */ '@/views/main/ReportDetail.vue'),
+    path: '/detail/:id',
+    name: 'detail',
+    component: () => import(/* webpackChunkName: "index" */ '@/views/main/ReportDetail.vue'),
     meta: {
       title: '数据报告'
     }

src/views/main/Home.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="report-home">
-    <div v-if="list.length && list.length > 0">
+  <div class="report-home" ref="wrapper">
+    <div v-if="listState.list.length && listState.list.length > 0">
       <van-list
-        v-model="loading"
-        :finished="finished"
+        v-model="listState.loading"
+        :finished="listState.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}`)">
+          <li class="item" v-for="item in listState.list" :key="item.id" @click="goDetail(item)">
             <div class="item-img">
               <img :src="item.img" alt="">
             </div>
@@ -53,57 +53,86 @@ import Empty from '@/components/common/Empty.vue'
 
 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 }
-  ]
+  listState = {
+    list: [],
+    loading: false,
+    finished: false,
+    currentPage: 1,
+    totalPage: 0,
+    scroll: 0
+  }
 
-  loading = false
-  finished = false
-  currentPage = 1
-  totalPage = 0
+  beforeRouteEnter (to, from, next) {
+    console.log(to, from)
+    if (from.name === 'detail') {
+      to.meta.isBack = true
+    } else {
+      to.meta.isBack = false
+    }
+    next()
+  }
 
   created () {
-    this.getReportList()
+    // this.getReportList()
+  }
+
+  activated () {
+    if (!this.$route.meta.isBack) {
+      this.listState = {
+        list: [],
+        loading: false,
+        finished: false,
+        currentPage: 1,
+        totalPage: 0,
+        scroll: 0
+      }
+      this.getReportList()
+    }
+    this.$route.meta.isBack = false
+    ;(this.$refs.wrapper as any).scrollTop = this.listState.scroll
+  }
+
+  beforeRouteLeave (to, form, next) {
+    console.log((this.$refs.wrapper as any).scrollTop)
+    this.listState.scroll = (this.$refs.wrapper as any).scrollTop
+    next()
   }
 
   getReportList () {
-    this.loading = true
-    this.getList(`page_index=${this.currentPage}`).then((res: any) => {
+    this.listState.loading = true
+    this.getList(`page_index=${this.listState.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
+        this.listState.loading = false
+        this.listState.totalPage = res.data.page_count
         if (rows === null || rows.length === 0) {
-          this.finished = true
+          this.listState.finished = true
           return
         }
-        if (this.currentPage >= this.totalPage) {
-          this.finished = true
+        if (this.listState.currentPage >= this.listState.totalPage) {
+          this.listState.finished = true
         }
-        if (this.currentPage === 1) {
-          this.list = rows
+        if (this.listState.currentPage === 1) {
+          this.listState.list = rows
         } else {
-          this.list = this.list.concat(rows)
+          this.listState.list = this.listState.list.concat(rows)
         }
       } else {
-        this.finished = true
+        this.listState.finished = true
       }
     }).catch(() => {
-      this.finished = true
+      this.listState.finished = true
     })
   }
 
   onLoad () {
-    this.currentPage++
+    this.listState.currentPage++
     this.getReportList()
   }
+
+  goDetail (item) {
+    this.$router.push(`/detail/${item.id}`)
+  }
 }
 </script>
 <style lang="scss">
@@ -122,14 +151,16 @@ export default class Home extends Vue {
           right: 16px;
           bottom: 0;
           left: 16px;
-          border-bottom: 1px solid #ebedf0;
-          -webkit-transform: scaleY(0.5);
-          transform: scaleY(0.5);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.02);
+          // -webkit-transform: scaleY(0.5);
+          // transform: scaleY(0.5);
         }
         .item-img{
           width: 80px;
           height: 80px;
+          border-radius: 4px;
           margin-right: 16px;
+          overflow: hidden;
           img{
             width: 100%;
             height: 100%;

src/views/main/IntroducePage.vue

@@ -1,9 +1,7 @@
 <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>
+      <div class="banner"></div>
       <ul class="list">
         <li class="item" v-for="(item,index) in list" :key='index'>
           <div class="item_icon">

src/views/main/ReportDetail.vue

@@ -29,7 +29,7 @@
           <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="before-price">原价: &yen; <em>{{detail.before_price}}</em></span>
               <span class="current-price">&yen; <em>{{detail.price}}</em></span>
             </div>
           </div>
@@ -41,7 +41,7 @@
       </div>
       <div class="j-footer">
         <div class="j-button-group">
-            <button class="j-button-confirm" @click="$router.push('/home')">立即购买</button>
+            <button class="j-button-confirm" @click="$router.push('/buy')">立即购买</button>
         </div>
       </div>
     </div>
@@ -147,10 +147,9 @@ export default class Home extends Vue {
               display: flex;
               align-items: center;
               font-size: 16px;
-              line-height: 24px;
               color: #FB483D;
               em{
-                margin-left: 2px;
+                margin-left: 4px;
                 font-size: 20px;
                 line-height: 30px;
               }
@@ -171,6 +170,7 @@ export default class Home extends Vue {
           line-height: 26px;
           color: #171826;
           font-weight: bold;
+          box-sizing: border-box;
           &:after{
             position: absolute;
             box-sizing: border-box;
@@ -183,6 +183,7 @@ export default class Home extends Vue {
             left: 0;
             top: 50%;
             transform: translateY(-50%);
+            margin-top: -1px;
           }
         }
         .m-html{