新闻详情

src/main.js

@@ -65,6 +65,7 @@ export default {
             'pages/home',
             'pages/car',
             'pages/tuxiang',
+            'pages/ArticleDetail',
             'pages/my',
             'pages/register',
             'pages/login',

src/pages/ArticleDetail.vue

@@ -0,0 +1,70 @@
+<config>
+{
+'navigationBarTitleText': '活动详情',
+}
+</config>
+<template>
+    <div class="content">
+        <div class="title">
+            {{ info.articleKeyword }}
+        </div>
+        <div class="time">
+            {{ info.createTime }}
+        </div>
+        <rich-text :nodes="content" space="nbsp"></rich-text>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            info: '',
+            content: ''
+        };
+    },
+    onShow() {
+        this.$http.get(`https://www.jetour.com.cn/cmsapi/business/Article/get/${this.$mp.query.id}`).then(res => {
+            this.content = res.data.articleContent.replace(/<img /g, '<img class="rich-text-img"');
+            this.info = res.data;
+        });
+    }
+};
+</script>
+
+<style lang="less">
+.content {
+    padding: 30px;
+}
+rich-text {
+    width: 100%;
+    background: white;
+}
+.rich-text-img {
+    width: 100% !important;
+    height: auto;
+}
+.p1 {
+    font-size: 13px;
+    line-height: 24px;
+    padding: 10px 0;
+}
+
+.s1 {
+    font-weight: bold;
+}
+
+.title {
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    padding-top: 20px;
+}
+
+.time {
+    font-size: 12px;
+    color: #666;
+    text-align: center;
+    padding-bottom: 10px;
+    margin-top: 5px;
+}
+</style>

src/pages/order/evaluation.vue

@@ -71,11 +71,11 @@
                 show-word-limit
                 :autosize="true"
             />
-            <van-cell title="添加晒单图片(最多上传5张)" use-label-slot>
+            <!-- <van-cell title="添加晒单图片(最多上传5张)" use-label-slot>
                 <div style="padding:10px 0 5px" slot="label">
                     <van-uploader multiple :file-list="item.commentPics" :max-count="5" @after-read="afterRead" />
                 </div>
-            </van-cell>
+            </van-cell> -->
             <van-cell>
                 <div slot="title">
                     <van-checkbox

src/pages/order/evaluationInfo.vue

@@ -71,7 +71,7 @@
                 :autosize="true"
                 readonly
             />
-            <van-cell title="评价图片:" use-label-slot v-if="item.commentPics.length > 0">
+            <!-- <van-cell title="评价图片:" use-label-slot v-if="item.commentPics.length > 0">
                 <div style="padding:10px 0 5px" class="imgsList" slot="label">
                     <van-image
                         v-for="(img, index) in item.commentPics"
@@ -81,7 +81,7 @@
                         :src="img"
                     />
                 </div>
-            </van-cell>
+            </van-cell> -->
         </div>
     </div>
 </template>

src/pages/tuxiang.vue

@@ -9,29 +9,29 @@
             </van-tabs>
         </van-sticky>
         <div class="event-list" v-if="tab === '1'">
-            <div class="event-item">
-                <img class="cover" mode="aspectFill" src="https://shopimg.jetour.com.cn/20200629/1593415720737.jpg" />
-                <div class="title">全新一代X90 8.99万起 全球首发 限量预售</div>
-                <div class="time">2020/09/07</div>
+            <div class="event-item" v-for="item in list" :key="item.id" @click="goArticleDetail(item.id)">
+                <img class="cover" mode="aspectFill" :src="item.thumbnail" />
+                <div class="title">{{ item.articleKeyword }}</div>
+                <div class="time">{{ item.createTime }}</div>
             </div>
         </div>
         <div class="video-list" v-if="tab === '2'">
-            <div class="video-item">
-                <img class="cover" mode="aspectFill" src="https://shopimg.jetour.com.cn/20200629/1593415720737.jpg" />
+            <div class="video-item" v-for="item in list" :key="item.id">
+                <img class="cover" mode="aspectFill" :src="item.thumbnail" />
                 <img class="icon-play" src="../static/imgs/icon_play.png" />
-                <div class="time">2020/09/07</div>
-                <div class="title">全新一代X90 8.99万起 全球首发 限量预售</div>
+                <div class="time">{{ item.createTime }}</div>
+                <div class="title">{{ item.name }}</div>
                 <div class="desc">
-                    <div class="col1">播放次数：10999次</div>
-                    <div class="col2">视频时长：2份19秒</div>
+                    <div class="col1">播放次数：{{ item.videoCount }}次</div>
+                    <div class="col2">视频时长：{{ item.times }}</div>
                 </div>
             </div>
         </div>
         <div class="event-list" v-if="tab === '3'">
-            <div class="event-item">
-                <img class="cover" mode="aspectFill" src="https://shopimg.jetour.com.cn/20200629/1593415720737.jpg" />
-                <div class="title">全新一代X90 8.99万起 全球首发 限量预售</div>
-                <div class="time">2020/09/07</div>
+            <div class="event-item" v-for="item in list" :key="item.id" @click="goArticleDetail(item.id)">
+                <img class="cover" mode="aspectFill" :src="item.thumbnail" />
+                <div class="title">{{ item.articleKeyword }}</div>
+                <div class="time">{{ item.createTime }}</div>
             </div>
         </div>
         <div class="tour" v-if="tab === '4'">
@@ -311,22 +311,21 @@ export default {
             showDialog2: false,
             showDialog3: false,
             showDialog4: false,
-            current: 0
+            current: 0,
+            currentPage: 0,
+            finish: false,
+            list: []
         };
     },
     created() {
         const sysInfo = wx.getSystemInfoSync();
         this.windowWidth = sysInfo.windowWidth;
+        this.getData();
     },
     computed: {
         hotspot() {
             // eslint-disable-next-line prettier/prettier
-            return [
-                [42, 1256],
-                [386, 1256],
-                [42, 1484],
-                [386, 1484]
-            ].map(i => {
+            return [[42, 1256], [386, 1256], [42, 1484], [386, 1484]].map(i => {
                 let left = (i[0] / 750) * this.windowWidth;
                 let top = (i[1] / i[0]) * left;
                 return {
@@ -334,11 +333,26 @@ export default {
                     top: top + 'px'
                 };
             });
+        },
+        url() {
+            if (this.tab === '1') {
+                return 'https://www.jetour.com.cn/cmsapi/business/Article/page?articleType=2';
+            } else if (this.tab === '2') {
+                return 'https://www.jetour.com.cn/cmsapi/business/Carousel/page?resourceType=2&videoType=1';
+            } else if (this.tab === '3') {
+                return 'https://www.jetour.com.cn/cmsapi/business/Article/page?articleType=1';
+            } else {
+                return '';
+            }
         }
     },
     methods: {
         onTabChange(e) {
             this.tab = e.detail.name;
+            this.currentPage = 0;
+            this.finish = false;
+            this.list = [];
+            this.getData();
         },
         hotspotClick(i) {
             this.$set(this, `showDialog${i + 1}`, true);
@@ -355,6 +369,38 @@ export default {
             } else {
                 this.current = c;
             }
+        },
+        getData() {
+            if (!this.url) {
+                return;
+            }
+
+            this.loading = true;
+            this.$http
+                .get(this.url, {
+                    currentPage: this.currentPage,
+                    pageNumber: 10
+                })
+                .then(res => {
+                    this.list = [...res.data.pp, ...this.list];
+                    if (res.data.page.totalPage > this.currentPage) {
+                        this.finish = false;
+                    } else {
+                        this.finish = true;
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        goArticleDetail(id) {
+            this.goNext('/pages/ArticleDetail?id=' + id);
+        }
+    },
+    onReachBottom() {
+        if (!this.finish && !this.loading && this.url) {
+            this.currentPage++;
+            this.getData();
         }
     }
 };