news

src/main.js

@@ -90,7 +90,6 @@ export default {
             'pages/order/logistics',
             'pages/order/transparent',
             'pages/order/refundOrder',
-            'pages/video'
             'pages/video',
             'pages/coupe'
         ],
@@ -158,7 +157,8 @@ export default {
             'van-stepper': '/vant/stepper/index',
             'van-steps': '/vant/steps/index',
             'van-rate': '/vant/rate/index',
-            'van-popup': '/vant/popup/index'
+            'van-popup': '/vant/popup/index',
+            'van-transition': '/vant/transition/index'
         },
         permission: {
             'scope.userLocation': {

src/mixins/OrderDefault.js

@@ -104,6 +104,6 @@ export default {
         },
         toCheckLogistics() {},
         toevaluation() {},
-        toevaluationDetail() {},
+        toevaluationDetail() {}
     }
 };

src/pages/car.vue

@@ -12,7 +12,7 @@
             </van-tabs>
         </van-sticky>
         <div class="model-list" v-if="tab === 'all'">
-            <div class="model" v-for="item in carModels" :key="item.skuId">
+            <div class="model" v-for="item in carModels" :key="item.skuId" @click="detail(item)">
                 <img :src="item.appToImgurl" class="cover" mode="aspectFill" />
                 <div class="info">
                     <div class="name">{{ item.name }}</div>
@@ -227,6 +227,11 @@ export default {
         onTabChange(e) {
             this.tab = e.detail.name;
         },
+        detail(item) {
+            wx.navigateTo({
+                url: '/pages/detail?id=' + item.skuId
+            });
+        },
         chooseColor(i) {
             if (!this.colorList[i]) return;
             console.log('chooseColor::', this.colorList[i]);

src/pages/eventList.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="event-list" style="padding-bottom:10px">
+        <div class="event-item" v-for="item in list" :key="item.id" @click="detail(item)">
+            <img class="cover" mode="aspectFill" :src="item.thumbnail" />
+            <div class="title">{{ item.articleKeyword }}</div>
+            <div class="time">{{ fmt(item.createTime) }}</div>
+        </div>
+    </div>
+</template>
+<script>
+import format from 'date-fns/format';
+import parse from 'date-fns/parse';
+export default {
+    data() {
+        return {
+            page: 1,
+            size: 20,
+            last: false,
+            list: [],
+            loading: false
+        };
+    },
+    created() {
+        this.getData();
+    },
+    methods: {
+        fmt(time) {
+            return format(parse(time, 'yyyy-MM-dd HH:mm:ss', new Date()), 'yyyy/MM/dd');
+        },
+        getData() {
+            if (this.loading) return;
+            this.loading = true;
+            this.$http
+                .get('https://www.jetour.com.cn/cmsapi/business/Article/page', {
+                    currentPage: this.page,
+                    pageNumber: this.size,
+                    articleType: 2
+                })
+                .then(res => {
+                    this.loading = false;
+                    if (res.success) {
+                        if (res.data.page.currentPage === 1) {
+                            this.list = [];
+                        }
+                        this.list = this.list.concat(res.data.pp);
+                        this.last = res.data.page.currentPage === res.data.page.totalPage;
+                    }
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (!this.loading && !this.last) {
+                this.page++;
+                this.getData();
+            }
+        },
+        detail(item) {}
+    }
+};
+</script>
+<style lang="less">
+.event-item {
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 10px 20px 0 20px;
+    padding-bottom: 15px;
+    overflow: hidden;
+    .flex-col();
+    .cover {
+        width: calc(100vw - 40px);
+        height: calc(150 / 355 * (100vw - 40px));
+    }
+    .title {
+        margin: 12px 15px 0 15px;
+        color: @text1;
+        font-size: 14px;
+    }
+    .time {
+        font-size: 11px;
+        color: @text3;
+        margin: 7px 15px 0 15px;
+    }
+}
+</style>

src/pages/home.vue

@@ -181,13 +181,15 @@ export default {
 }
 .menus {
     .flex();
-    justify-content: space-around;
     height: 96px;
     background: white;
     border-bottom: 10px solid @bg;
+    padding: 0 12px;
     .menu-item {
         .flex-col();
         align-items: center;
+        flex-basis: 0;
+        flex-grow: 1;
         .icon {
             width: 45px;
             height: 45px;

src/pages/newsList.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="event-list" style="padding-bottom:10px">
+        <div class="event-item" v-for="item in list" :key="item.id" @click="detail(item)">
+            <img class="cover" mode="aspectFill" :src="item.thumbnail" />
+            <div class="title">{{ item.articleKeyword }}</div>
+            <div class="time">{{ fmt(item.createTime) }}</div>
+        </div>
+    </div>
+</template>
+<script>
+import format from 'date-fns/format';
+import parse from 'date-fns/parse';
+export default {
+    data() {
+        return {
+            page: 1,
+            size: 20,
+            last: false,
+            list: [],
+            loading: false
+        };
+    },
+    created() {
+        this.getData();
+    },
+    methods: {
+        fmt(time) {
+            return format(parse(time, 'yyyy-MM-dd HH:mm:ss', new Date()), 'yyyy/MM/dd');
+        },
+        getData() {
+            if (this.loading) return;
+            this.loading = true;
+            this.$http
+                .get('https://www.jetour.com.cn/cmsapi/business/Article/page', {
+                    currentPage: this.page,
+                    pageNumber: this.size,
+                    articleType: 1
+                })
+                .then(res => {
+                    this.loading = false;
+                    if (res.success) {
+                        if (res.data.page.currentPage === 1) {
+                            this.list = [];
+                        }
+                        this.list = this.list.concat(res.data.pp);
+                        this.last = res.data.page.currentPage === res.data.page.totalPage;
+                    }
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (!this.loading && !this.last) {
+                this.page++;
+                this.getData();
+            }
+        },
+        detail(item) {}
+    }
+};
+</script>
+<style lang="less">
+.event-item {
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 10px 20px 0 20px;
+    padding-bottom: 15px;
+    overflow: hidden;
+    .flex-col();
+    .cover {
+        width: calc(100vw - 40px);
+        height: calc(150 / 355 * (100vw - 40px));
+    }
+    .title {
+        margin: 12px 15px 0 15px;
+        color: @text1;
+        font-size: 14px;
+    }
+    .time {
+        font-size: 11px;
+        color: @text3;
+        margin: 7px 15px 0 15px;
+    }
+}
+</style>

src/pages/tour.vue

@@ -0,0 +1,480 @@
+<template>
+    <div class="tour">
+        <img class="tour-img" src="https://shopimg.jetour.com.cn/20200926/tour01.jpg" mode="widthFix" />
+        <div class="tabs">
+            <div class="tab left" :class="{ active: tourTab === 0 }" @click="tourTab = 0">
+                旅行就是一往无前，<br />无后顾之忧
+            </div>
+            <div class="tab right" :class="{ active: tourTab === 1 }" @click="tourTab = 1">
+                旅行就是放松身心，<br />享受惬意与舒适
+            </div>
+        </div>
+        <div v-if="tourTab === 0">
+            <div class="h2">
+                增值服务、智慧展厅、服务救援、物资补给，给您的旅行带来360度的关怀和服务
+            </div>
+            <div class="h1">增值服务</div>
+            <div class="p">
+                将联合全国途居露营地、方特欢乐世界、携程网、各地旅游景点等打造旅行生态联盟，为客户提供优惠增值权益。
+            </div>
+            <div class="hotspots">
+                <img
+                    :src="`https://shopimg.jetour.com.cn/20200926/tour0${n + 1}.jpg`"
+                    mode="widthFix"
+                    @click="hotspotClick(n - 1)"
+                    v-for="n in 4"
+                    :key="n"
+                />
+            </div>
+            <div class="h1">智慧展厅</div>
+            <div class="p">
+                运用大数据、人工智能、VR/AR等为客户提供最先进的互动体验服务，打造一个汽车新零售平台。
+            </div>
+            <img
+                class="tour-img"
+                src="https://shopimg.jetour.com.cn/20200926/tour06.jpg"
+                mode="widthFix"
+                style="margin-top:24px"
+            />
+        </div>
+        <div v-if="tourTab === 1">
+            <div class="h2">
+                多变大空间、强动力、智能互联给您带来旅行的便捷和惬意
+            </div>
+            <div class="h1">行驶的功能和动力</div>
+            <div class="p">
+                超大20寸轮毂、255/45赛车级扁宽胎、210MM离地间隙高通过性、8AT强劲动力、带稳定杆的多连杆后悬架、智能启动发动机（声纹识别启动、手环/手机钥匙、第三代全新PEPS无钥
+                匙一键启动），打造畅行无忧的旅行舒适体验。
+            </div>
+            <div class="swiper-wrapper">
+                <swiper class="swiper" :current="current" @change="swiperChange" autoplay circular>
+                    <swiper-item>
+                        <div class="swiper-item">
+                            <img
+                                src="https://shopimg.jetour.com.cn/20200926/traveex021.jpg"
+                                class="img100"
+                                mode="aspectFill"
+                            />
+                            <p class="p">1.5T+8AT强劲动力</p>
+                        </div>
+                    </swiper-item>
+                    <swiper-item>
+                        <div class="swiper-item">
+                            <img
+                                src="https://shopimg.jetour.com.cn/20200926/traveex0211.jpg"
+                                class="img100"
+                                mode="aspectFill"
+                            />
+                            <p class="p">210MM离地间隙高通过性</p>
+                        </div>
+                    </swiper-item>
+                    <swiper-item>
+                        <div class="swiper-item">
+                            <img
+                                src="https://shopimg.jetour.com.cn/20200926/traveex0212.jpg"
+                                class="img100"
+                                mode="aspectFill"
+                            />
+                            <p class="p">第三代全新PEPS无钥匙一键启动</p>
+                        </div>
+                    </swiper-item>
+                    <swiper-item>
+                        <div class="swiper-item">
+                            <img
+                                src="https://shopimg.jetour.com.cn/20200926/traveex0213.jpg"
+                                class="img100"
+                                mode="aspectFill"
+                            />
+                            <p class="p">超大20寸轮毂</p>
+                        </div>
+                    </swiper-item>
+
+                    <swiper-item>
+                        <div class="swiper-item">
+                            <img
+                                src="https://shopimg.jetour.com.cn/20200926/traveex0214.jpg"
+                                class="img100"
+                                mode="aspectFill"
+                            />
+                            <p class="p">带稳定杆的多连杆后悬架</p>
+                        </div>
+                    </swiper-item>
+                </swiper>
+                <img src="../static/imgs/content_left.png" class="icon-left" @click="slideSwiper(-1)" />
+                <img src="../static/imgs/content_right.png" class="icon-right" @click="slideSwiper(1)" />
+            </div>
+            <div class="h1">
+                通信的分享和互动
+            </div>
+            <div class="p">
+                智能语音对话、4G快速上网、车载无线WIFI、车内/车外智能拍照，满足出行中的分享和互动。
+            </div>
+            <img
+                class="tour-img"
+                src="https://shopimg.jetour.com.cn/20200926/tour08.jpg"
+                mode="widthFix"
+                style="margin-top:24px"
+            />
+        </div>
+        <van-dialog
+            class="dialog"
+            use-slot
+            close-on-click-overlay
+            :show="showDialog1"
+            @close="showDialog1 = false"
+            :show-confirm-button="false"
+        >
+            <div class="dialog-body">
+                <div class="close-wrapper" @click="showDialog1 = false">
+                    <img src="../static/imgs/close.png" class="icon-close" />
+                </div>
+                <div class="title">途居权益及实现方式</div>
+                <div class="sub-title">一、捷途车主途居权益：</div>
+                <div class="content">
+                    途居提供所有捷途车主金卡会员的权益：<br />
+                    1 游“途居”200元畅享1080元精致房车体验；<br />
+
+                    2 营地内餐饮消费八五折（烟酒、套餐除外）；<br />
+
+                    3 捷途爱车享免费检测（限黄山）；<br />
+
+                    4 入住即获伴手礼一份；<br />
+
+                    5 行程提醒服务；<br />
+
+                    6 延迟退房时间14：00；<br />
+
+                    7 免查房<br />
+                </div>
+                <div class="sub-title">二、捷途车主途居权益实现方式：</div>
+                <div class="content" style="padding-bottom: 20px;">
+                    车主凭行驶证、身份证在途居露营地前台（限 芜湖、黄山、扬州、南通、镇江、湘潭地区）
+                    直接享金卡级别权益。
+                </div>
+            </div>
+        </van-dialog>
+
+        <van-dialog
+            class="dialog"
+            use-slot
+            close-on-click-overlay
+            :show="showDialog2"
+            @close="showDialog2 = false"
+            :show-confirm-button="false"
+        >
+            <div class="dialog-body">
+                <div class="close-wrapper" @click="showDialog2 = false">
+                    <img src="../static/imgs/close.png" class="icon-close" />
+                </div>
+                <div class="title">浙江富春江权益</div>
+                <div class="sub-title">一、捷途车主浙江富春江权益：</div>
+                <div class="content">
+                    捷途车主凭行驶证可享受捷途车主专属优惠 价（门市价8~8.5折），具体优惠价格如下：
+                </div>
+                <div class="table">
+                    <div class="row header">
+                        <div class="col">景区</div>
+                        <div class="col">门市价（元）</div>
+                        <div class="col">优惠价（元）</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">瑶琳仙境</div>
+                        <div class="col">116</div>
+                        <div class="col">92</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">富春江小三峡</div>
+                        <div class="col">125</div>
+                        <div class="col">100</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">印象富春江</div>
+                        <div class="col">80</div>
+                        <div class="col">65</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">红灯笼乡村家园</div>
+                        <div class="col">50</div>
+                        <div class="col">40</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">天目溪竹筏漂流</div>
+                        <div class="col">65</div>
+                        <div class="col">4500</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">桐君山七里扬帆</div>
+                        <div class="col">40</div>
+                        <div class="col">32</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">大奇山</div>
+                        <div class="col">65</div>
+                        <div class="col">52</div>
+                    </div>
+                    <div class="row">
+                        <div class="col">红石湾</div>
+                        <div class="col">80</div>
+                        <div class="col">65</div>
+                    </div>
+                </div>
+                <div class="sub-title">二、捷途车主途居权益实现方式：</div>
+                <div class="content" style="padding-bottom: 20px;">
+                    车主凭行驶证、身份证在途居露营地前台（限
+                    芜湖、黄山、扬州、南通、镇江、湘潭地区）直接享金卡级别权益。
+                </div>
+            </div>
+        </van-dialog>
+
+        <van-dialog
+            class="dialog"
+            use-slot
+            close-on-click-overlay
+            :show="showDialog3"
+            @close="showDialog3 = false"
+            :show-confirm-button="false"
+        >
+            <div class="dialog-body">
+                <div class="close-wrapper" @click="showDialog3 = false">
+                    <img src="../static/imgs/close.png" class="icon-close" />
+                </div>
+                <div class="error" style="border: none;">
+                    尊敬的捷途车主：方特权益正在升级中，敬请期待，谢谢。
+                </div>
+            </div>
+        </van-dialog>
+
+        <van-dialog
+            class="dialog"
+            use-slot
+            close-on-click-overlay
+            :show="showDialog4"
+            @close="showDialog4 = false"
+            :show-confirm-button="false"
+        >
+            <div class="dialog-body">
+                <div class="close-wrapper" @click="showDialog4 = false">
+                    <img src="../static/imgs/close.png" class="icon-close" />
+                </div>
+                <div class="error" style="border: none;">
+                    尊敬的捷途车主：携程权益正在升级中，敬请期待，谢谢。
+                </div>
+            </div>
+        </van-dialog>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tourTab: 0,
+            windowWidth: 375,
+            showDialog1: false,
+            showDialog2: false,
+            showDialog3: false,
+            showDialog4: false,
+            current: 0
+        };
+    },
+    methods: {
+        hotspotClick(i) {
+            this.$set(this, `showDialog${i + 1}`, true);
+        },
+        swiperChange(e) {
+            this.current = e.detail.current;
+        },
+        slideSwiper(d) {
+            let c = this.current + d;
+            if (c > 4) {
+                this.current = c % 5;
+            } else if (c < 0) {
+                this.current = c + 5;
+            } else {
+                this.current = c;
+            }
+        }
+    }
+};
+</script>
+<style lang="less">
+.tour {
+    font-size: 0;
+    width: 100%;
+    position: relative;
+    background: white;
+    .bg {
+        width: 100%;
+        height: calc(4230 / 750 * 100vw);
+    }
+    .tabs {
+        .flex();
+        align-items: flex-end;
+        margin-top: 22px;
+        height: 110px;
+        .tab {
+            flex-basis: 0;
+            flex-grow: 1;
+            font-size: 14px;
+            color: white;
+            .flex-col();
+            justify-content: center;
+            padding-left: 18px;
+            height: 75px;
+            transition: all 0.3s;
+            &.active {
+                height: 110px;
+            }
+        }
+        .left {
+            background: #eeb64c;
+        }
+        .right {
+            background: @prim;
+        }
+    }
+    .h2 {
+        margin: 45px 32px 0 32px;
+        font-size: 14px;
+        color: @text1;
+        text-align: center;
+    }
+    .h1 {
+        margin-top: 40px;
+        text-align: center;
+        font-size: 18px;
+        color: @prim;
+        letter-spacing: 1px;
+    }
+    .p {
+        font-size: 12px;
+        color: @text1;
+        margin: 14px 28px 0 28px;
+        line-height: 22px;
+        text-align: center;
+    }
+    .hotspots {
+        .flex();
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 0 21px;
+        margin-top: 28px;
+        img {
+            width: calc((100vw - 54px) / 2);
+            height: auto;
+            margin-bottom: 11px;
+        }
+    }
+    .swiper {
+        width: 100%;
+        height: 285px;
+        margin-top: 24px;
+        .swiper-item {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            .img100 {
+                width: 100%;
+                height: 285px;
+            }
+            .p {
+                margin: 0;
+                height: 50px;
+                color: white;
+                background: rgba(0, 0, 0, 0.6);
+                .flex();
+                justify-content: center;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+    .swiper-wrapper {
+        position: relative;
+        .icon-left {
+            position: absolute;
+            left: 15px;
+            top: 0;
+            bottom: 0;
+            width: 25px;
+            height: 40px;
+            margin: auto;
+        }
+        .icon-right {
+            position: absolute;
+            right: 15px;
+            top: 0;
+            bottom: 0;
+            width: 25px;
+            height: 40px;
+            margin: auto;
+        }
+    }
+}
+.tour-img {
+    width: 100%;
+    height: auto;
+}
+.hotspot {
+    position: absolute;
+    width: calc(321 / 750 * 100vw);
+    height: calc(206 / 321 * (321 / 750 * 100vw));
+}
+.dialog {
+    position: relative;
+    color: @text2;
+    .close-wrapper {
+        padding: 10px;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        .icon-close {
+            width: 13px;
+            height: 13px;
+        }
+    }
+    .title {
+        color: @prim;
+        font-size: 15px;
+        font-weight: bold;
+        margin: 15px 0;
+        padding-top: 15px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid #dddddd;
+        text-align: center;
+    }
+    .sub-title {
+        color: @prim;
+        font-size: 12px;
+        margin: 16px 10px 0 10px;
+    }
+    .content {
+        font-size: 12px;
+        margin: 10px 10px 0 10px;
+    }
+    .table {
+        font-size: 10px;
+        color: @text1;
+        margin: 0 10px;
+        line-height: 1.4;
+        .row {
+            .flex();
+        }
+        .col {
+            flex-basis: 0;
+            flex-grow: 1;
+        }
+        .header {
+            color: @prim;
+        }
+    }
+    .error {
+        padding: 60px 30px 30px 30px;
+        font-size: 15px;
+        color: @text2;
+        font-weight: bold;
+        text-align: center;
+    }
+}
+</style>

src/pages/tuxiang.vue

@@ -8,353 +8,50 @@
                 <van-tab title="旅行+" name="4"></van-tab>
             </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>
-        </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" />
-                <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="desc">
-                    <div class="col1">播放次数：10999次</div>
-                    <div class="col2">视频时长：2份19秒</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>
-        </div>
-        <div class="tour" v-if="tab === '4'">
-            <img class="tour-img" src="https://shopimg.jetour.com.cn/20200926/tour01.jpg" mode="widthFix" />
-            <div class="tabs">
-                <div class="tab left" :class="{ active: tourTab === 0 }" @click="tourTab = 0">
-                    旅行就是一往无前，<br />无后顾之忧
-                </div>
-                <div class="tab right" :class="{ active: tourTab === 1 }" @click="tourTab = 1">
-                    旅行就是放松身心，<br />享受惬意与舒适
-                </div>
-            </div>
-            <div v-if="tourTab === 0">
-                <div class="h2">
-                    增值服务、智慧展厅、服务救援、物资补给，给您的旅行带来360度的关怀和服务
-                </div>
-                <div class="h1">增值服务</div>
-                <div class="p">
-                    将联合全国途居露营地、方特欢乐世界、携程网、各地旅游景点等打造旅行生态联盟，为客户提供优惠增值权益。
-                </div>
-                <div class="hotspots">
-                    <img
-                        :src="`https://shopimg.jetour.com.cn/20200926/tour0${n + 1}.jpg`"
-                        mode="widthFix"
-                        @click="hotspotClick(n - 1)"
-                        v-for="n in 4"
-                        :key="n"
-                    />
-                </div>
-                <div class="h1">智慧展厅</div>
-                <div class="p">
-                    运用大数据、人工智能、VR/AR等为客户提供最先进的互动体验服务，打造一个汽车新零售平台。
-                </div>
-                <img
-                    class="tour-img"
-                    src="https://shopimg.jetour.com.cn/20200926/tour06.jpg"
-                    mode="widthFix"
-                    style="margin-top:24px"
-                />
-            </div>
-            <div v-if="tourTab === 1">
-                <div class="h2">
-                    多变大空间、强动力、智能互联给您带来旅行的便捷和惬意
-                </div>
-                <div class="h1">行驶的功能和动力</div>
-                <div class="p">
-                    超大20寸轮毂、255/45赛车级扁宽胎、210MM离地间隙高通过性、8AT强劲动力、带稳定杆的多连杆后悬架、智能启动发动机（声纹识别启动、手环/手机钥匙、第三代全新PEPS无钥
-                    匙一键启动），打造畅行无忧的旅行舒适体验。
-                </div>
-                <div class="swiper-wrapper">
-                    <swiper class="swiper" :current="current" @change="swiperChange" autoplay circular>
-                        <swiper-item>
-                            <div class="swiper-item">
-                                <img
-                                    src="https://shopimg.jetour.com.cn/20200926/traveex021.jpg"
-                                    class="img100"
-                                    mode="aspectFill"
-                                />
-                                <p class="p">1.5T+8AT强劲动力</p>
-                            </div>
-                        </swiper-item>
-                        <swiper-item>
-                            <div class="swiper-item">
-                                <img
-                                    src="https://shopimg.jetour.com.cn/20200926/traveex0211.jpg"
-                                    class="img100"
-                                    mode="aspectFill"
-                                />
-                                <p class="p">210MM离地间隙高通过性</p>
-                            </div>
-                        </swiper-item>
-                        <swiper-item>
-                            <div class="swiper-item">
-                                <img
-                                    src="https://shopimg.jetour.com.cn/20200926/traveex0212.jpg"
-                                    class="img100"
-                                    mode="aspectFill"
-                                />
-                                <p class="p">第三代全新PEPS无钥匙一键启动</p>
-                            </div>
-                        </swiper-item>
-                        <swiper-item>
-                            <div class="swiper-item">
-                                <img
-                                    src="https://shopimg.jetour.com.cn/20200926/traveex0213.jpg"
-                                    class="img100"
-                                    mode="aspectFill"
-                                />
-                                <p class="p">超大20寸轮毂</p>
-                            </div>
-                        </swiper-item>
-
-                        <swiper-item>
-                            <div class="swiper-item">
-                                <img
-                                    src="https://shopimg.jetour.com.cn/20200926/traveex0214.jpg"
-                                    class="img100"
-                                    mode="aspectFill"
-                                />
-                                <p class="p">带稳定杆的多连杆后悬架</p>
-                            </div>
-                        </swiper-item>
-                    </swiper>
-                    <img src="../static/imgs/content_left.png" class="icon-left" @click="slideSwiper(-1)" />
-                    <img src="../static/imgs/content_right.png" class="icon-right" @click="slideSwiper(1)" />
-                </div>
-                <div class="h1">
-                    通信的分享和互动
-                </div>
-                <div class="p">
-                    智能语音对话、4G快速上网、车载无线WIFI、车内/车外智能拍照，满足出行中的分享和互动。
-                </div>
-                <img
-                    class="tour-img"
-                    src="https://shopimg.jetour.com.cn/20200926/tour08.jpg"
-                    mode="widthFix"
-                    style="margin-top:24px"
-                />
-            </div>
-        </div>
-
-        <van-dialog
-            class="dialog"
-            use-slot
-            close-on-click-overlay
-            :show="showDialog1"
-            @close="showDialog1 = false"
-            :show-confirm-button="false"
-        >
-            <div class="dialog-body">
-                <div class="close-wrapper" @click="showDialog1 = false">
-                    <img src="../static/imgs/close.png" class="icon-close" />
-                </div>
-                <div class="title">途居权益及实现方式</div>
-                <div class="sub-title">一、捷途车主途居权益：</div>
-                <div class="content">
-                    途居提供所有捷途车主金卡会员的权益：<br />
-                    1 游“途居”200元畅享1080元精致房车体验；<br />
-
-                    2 营地内餐饮消费八五折（烟酒、套餐除外）；<br />
-
-                    3 捷途爱车享免费检测（限黄山）；<br />
-
-                    4 入住即获伴手礼一份；<br />
-
-                    5 行程提醒服务；<br />
-
-                    6 延迟退房时间14：00；<br />
-
-                    7 免查房<br />
-                </div>
-                <div class="sub-title">二、捷途车主途居权益实现方式：</div>
-                <div class="content" style="padding-bottom: 20px;">
-                    车主凭行驶证、身份证在途居露营地前台（限 芜湖、黄山、扬州、南通、镇江、湘潭地区）
-                    直接享金卡级别权益。
-                </div>
-            </div>
-        </van-dialog>
-
-        <van-dialog
-            class="dialog"
-            use-slot
-            close-on-click-overlay
-            :show="showDialog2"
-            @close="showDialog2 = false"
-            :show-confirm-button="false"
-        >
-            <div class="dialog-body">
-                <div class="close-wrapper" @click="showDialog2 = false">
-                    <img src="../static/imgs/close.png" class="icon-close" />
-                </div>
-                <div class="title">浙江富春江权益</div>
-                <div class="sub-title">一、捷途车主浙江富春江权益：</div>
-                <div class="content">
-                    捷途车主凭行驶证可享受捷途车主专属优惠 价（门市价8~8.5折），具体优惠价格如下：
-                </div>
-                <div class="table">
-                    <div class="row header">
-                        <div class="col">景区</div>
-                        <div class="col">门市价（元）</div>
-                        <div class="col">优惠价（元）</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">瑶琳仙境</div>
-                        <div class="col">116</div>
-                        <div class="col">92</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">富春江小三峡</div>
-                        <div class="col">125</div>
-                        <div class="col">100</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">印象富春江</div>
-                        <div class="col">80</div>
-                        <div class="col">65</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">红灯笼乡村家园</div>
-                        <div class="col">50</div>
-                        <div class="col">40</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">天目溪竹筏漂流</div>
-                        <div class="col">65</div>
-                        <div class="col">4500</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">桐君山七里扬帆</div>
-                        <div class="col">40</div>
-                        <div class="col">32</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">大奇山</div>
-                        <div class="col">65</div>
-                        <div class="col">52</div>
-                    </div>
-                    <div class="row">
-                        <div class="col">红石湾</div>
-                        <div class="col">80</div>
-                        <div class="col">65</div>
-                    </div>
-                </div>
-                <div class="sub-title">二、捷途车主途居权益实现方式：</div>
-                <div class="content" style="padding-bottom: 20px;">
-                    车主凭行驶证、身份证在途居露营地前台（限
-                    芜湖、黄山、扬州、南通、镇江、湘潭地区）直接享金卡级别权益。
-                </div>
-            </div>
-        </van-dialog>
-
-        <van-dialog
-            class="dialog"
-            use-slot
-            close-on-click-overlay
-            :show="showDialog3"
-            @close="showDialog3 = false"
-            :show-confirm-button="false"
-        >
-            <div class="dialog-body">
-                <div class="close-wrapper" @click="showDialog3 = false">
-                    <img src="../static/imgs/close.png" class="icon-close" />
-                </div>
-                <div class="error" style="border: none;">
-                    尊敬的捷途车主：方特权益正在升级中，敬请期待，谢谢。
-                </div>
-            </div>
-        </van-dialog>
-
-        <van-dialog
-            class="dialog"
-            use-slot
-            close-on-click-overlay
-            :show="showDialog4"
-            @close="showDialog4 = false"
-            :show-confirm-button="false"
-        >
-            <div class="dialog-body">
-                <div class="close-wrapper" @click="showDialog4 = false">
-                    <img src="../static/imgs/close.png" class="icon-close" />
-                </div>
-                <div class="error" style="border: none;">
-                    尊敬的捷途车主：携程权益正在升级中，敬请期待，谢谢。
-                </div>
-            </div>
-        </van-dialog>
+        <event-list v-if="tab === '1'" ref="eventList"></event-list>
+        <video-list v-if="tab === '2'" ref="videoList"></video-list>
+        <news-list v-if="tab === '3'" ref="newsList"></news-list>
+        <tour v-if="tab === '4'"></tour>
     </div>
 </template>
 <script>
+import eventList from './eventList';
+import newsList from './newsList';
+import tour from './tour';
+import videoList from './videoList';
 export default {
+    components: {
+        eventList,
+        tour,
+        newsList,
+        videoList
+    },
     data() {
         return {
             tab: '1',
-            tourTab: 0,
-            windowWidth: 375,
-            showDialog1: false,
-            showDialog2: false,
-            showDialog3: false,
-            showDialog4: false,
-            current: 0
+            loading: 0,
+            page: 1,
+            size: 20,
+            last: false
         };
     },
-    created() {
-        const sysInfo = wx.getSystemInfoSync();
-        this.windowWidth = sysInfo.windowWidth;
-    },
-    computed: {
-        hotspot() {
-            // eslint-disable-next-line prettier/prettier
-            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 {
-                    left: left + 'px',
-                    top: top + 'px'
-                };
-            });
+    onReachBottom(e) {
+        console.log('onReachBottom::', e);
+        switch (this.tab) {
+            case '1':
+                this.$refs.eventList.loadmore();
+                break;
+            case '2':
+                this.$refs.videoList.loadmore();
+                break;
+            case '3':
+                this.$refs.newsList.loadmore();
+                break;
         }
     },
     methods: {
         onTabChange(e) {
             this.tab = e.detail.name;
-        },
-        hotspotClick(i) {
-            this.$set(this, `showDialog${i + 1}`, true);
-        },
-        swiperChange(e) {
-            this.current = e.detail.current;
-        },
-        slideSwiper(d) {
-            let c = this.current + d;
-            if (c > 4) {
-                this.current = c % 5;
-            } else if (c < 0) {
-                this.current = c + 5;
-            } else {
-                this.current = c;
-            }
         }
     }
 };
@@ -368,250 +65,4 @@ export default {
 page {
     background: @bg;
 }
-.event-item {
-    background: #ffffff;
-    border-radius: 4px;
-    margin: 10px 20px 0 20px;
-    padding-bottom: 15px;
-    overflow: hidden;
-    .flex-col();
-    .cover {
-        width: calc(100vw - 40px);
-        height: calc(150 / 355 * (100vw - 40px));
-    }
-    .title {
-        margin: 12px 15px 0 15px;
-        color: @text1;
-        font-size: 14px;
-    }
-    .time {
-        font-size: 11px;
-        color: @text3;
-        margin: 7px 15px 0 15px;
-    }
-}
-.video-item {
-    background: #ffffff;
-    border-radius: 4px;
-    margin: 10px 20px 0 20px;
-    padding-bottom: 20px;
-    overflow: hidden;
-    position: relative;
-    .flex-col();
-    .cover {
-        width: calc(100vw - 40px);
-        height: calc(150 / 355 * (100vw - 40px));
-    }
-    .icon-play {
-        width: 75px;
-        height: 75px;
-        position: absolute;
-        left: 0;
-        top: 35px;
-        right: 0;
-        margin: auto;
-    }
-    .time {
-        font-size: 11px;
-        color: @text3;
-        margin: 18px 15px 0 15px;
-        line-height: 1;
-    }
-    .title {
-        margin: 9px 15px 0 15px;
-        color: @text1;
-        font-size: 14px;
-    }
-    .desc {
-        font-size: 11px;
-        color: @text3;
-        font-weight: bold;
-        line-height: 1;
-        margin: 9px 15px 0 15px;
-        .flex();
-        .col1 {
-            width: 124px;
-        }
-    }
-}
-.tour {
-    font-size: 0;
-    width: 100%;
-    position: relative;
-    background: white;
-    .bg {
-        width: 100%;
-        height: calc(4230 / 750 * 100vw);
-    }
-    .tabs {
-        .flex();
-        align-items: flex-end;
-        margin-top: 22px;
-        height: 110px;
-        .tab {
-            flex-basis: 0;
-            flex-grow: 1;
-            font-size: 14px;
-            color: white;
-            .flex-col();
-            justify-content: center;
-            padding-left: 18px;
-            height: 75px;
-            transition: all 0.3s;
-            &.active {
-                height: 110px;
-            }
-        }
-        .left {
-            background: #eeb64c;
-        }
-        .right {
-            background: @prim;
-        }
-    }
-    .h2 {
-        margin: 45px 32px 0 32px;
-        font-size: 14px;
-        color: @text1;
-        text-align: center;
-    }
-    .h1 {
-        margin-top: 40px;
-        text-align: center;
-        font-size: 18px;
-        color: @prim;
-        letter-spacing: 1px;
-    }
-    .p {
-        font-size: 12px;
-        color: @text1;
-        margin: 14px 28px 0 28px;
-        line-height: 22px;
-        text-align: center;
-    }
-    .hotspots {
-        .flex();
-        justify-content: space-between;
-        flex-wrap: wrap;
-        padding: 0 21px;
-        margin-top: 28px;
-        img {
-            width: calc((100vw - 54px) / 2);
-            height: auto;
-            margin-bottom: 11px;
-        }
-    }
-    .swiper {
-        width: 100%;
-        height: 285px;
-        margin-top: 24px;
-        .swiper-item {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            .img100 {
-                width: 100%;
-                height: 285px;
-            }
-            .p {
-                margin: 0;
-                height: 50px;
-                color: white;
-                background: rgba(0, 0, 0, 0.6);
-                .flex();
-                justify-content: center;
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-            }
-        }
-    }
-    .swiper-wrapper {
-        position: relative;
-        .icon-left {
-            position: absolute;
-            left: 15px;
-            top: 0;
-            bottom: 0;
-            width: 25px;
-            height: 40px;
-            margin: auto;
-        }
-        .icon-right {
-            position: absolute;
-            right: 15px;
-            top: 0;
-            bottom: 0;
-            width: 25px;
-            height: 40px;
-            margin: auto;
-        }
-    }
-}
-.tour-img {
-    width: 100%;
-    height: auto;
-}
-.hotspot {
-    position: absolute;
-    width: calc(321 / 750 * 100vw);
-    height: calc(206 / 321 * (321 / 750 * 100vw));
-}
-.dialog {
-    position: relative;
-    color: @text2;
-    .close-wrapper {
-        padding: 10px;
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        .icon-close {
-            width: 13px;
-            height: 13px;
-        }
-    }
-    .title {
-        color: @prim;
-        font-size: 15px;
-        font-weight: bold;
-        margin: 15px 0;
-        padding-top: 15px;
-        padding-bottom: 15px;
-        border-bottom: 1px solid #dddddd;
-        text-align: center;
-    }
-    .sub-title {
-        color: @prim;
-        font-size: 12px;
-        margin: 16px 10px 0 10px;
-    }
-    .content {
-        font-size: 12px;
-        margin: 10px 10px 0 10px;
-    }
-    .table {
-        font-size: 10px;
-        color: @text1;
-        margin: 0 10px;
-        line-height: 1.4;
-        .row {
-            .flex();
-        }
-        .col {
-            flex-basis: 0;
-            flex-grow: 1;
-        }
-        .header {
-            color: @prim;
-        }
-    }
-    .error {
-        padding: 60px 30px 30px 30px;
-        font-size: 15px;
-        color: @text2;
-        font-weight: bold;
-        text-align: center;
-    }
-}
 </style>

src/pages/video.vue

@@ -1,28 +1,138 @@
 <config>
 {
-    "navigationStyle": "custom"
+    "navigationStyle": "custom",
+    "disableScroll": true
 }
 </config>
 <template>
-    <div>
-        <video :style="{ height: height + 'px' }" src="http://shopimg.jetour.com.cn/20200919/videoplayback.mp4"></video>
+    <div class="container" :style="{ height: height + 'px' }">
+        <video
+            :style="{ height: height + 'px' }"
+            :src="video.path"
+            :poster="video.thumbnail"
+            @controlstoggle="controlstoggle"
+        >
+            <van-transition :show="showTitle" custom-class="block" duration="250">
+                <div class="bar" style="height: 44px;">
+                    <div class="back-wrapper" style="padding: 10px 14px" @click="back">
+                        <img src="../static/imgs/back.png" class="icon-back" style="width: 24px;height: 24px;" />
+                    </div>
+                </div>
+                <div class="info">
+                    <div class="col1">
+                        <div class="title">{{ video.name }}</div>
+                        <div class="desc">视频时长{{ video.times }}</div>
+                    </div>
+                    <div class="col2">
+                        <img src="../static/imgs/view.png" class="icon" />
+                        <div class="num">{{ count(video.videoCount) }}</div>
+                    </div>
+                </div>
+            </van-transition>
+        </video>
     </div>
 </template>
 <script>
 export default {
     data() {
         return {
-            height: 100
+            height: 100,
+            video: {},
+            showTitle: true
         };
     },
     created() {
         this.height = wx.getSystemInfoSync().windowHeight;
+        this.$http
+            .get(`https://www.jetour.com.cn/cmsapi/business/Carousel/get/${this.$mp.query.id || 99}`)
+            .then(res => {
+                console.log(res);
+                this.video = res.data;
+            });
+    },
+    methods: {
+        count(c) {
+            if (c > 10000) {
+                return (c / 10000).toFixed(1).replace('.0', '') + 'w';
+            } else if (c > 1000) {
+                return (c / 1000).toFixed(1).replace('.0', '') + 'k';
+            } else {
+                return c;
+            }
+        },
+        controlstoggle(e) {
+            console.log(e);
+            this.showTitle = e.detail.show;
+        },
+        back() {
+            wx.navigateBack();
+        }
     }
 };
 </script>
 <style lang="less">
+.container {
+    position: relative;
+}
 video {
     width: 100%;
     height: 100%;
+    z-index: 1;
+    position: relative;
+}
+.info {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 40px;
+    bottom: calc(40px + env(safe-area-inset-bottom));
+    padding-left: 20px;
+    padding-right: 10px;
+    z-index: 2;
+    line-height: 1;
+    .flex();
+    .col1 {
+        flex-grow: 1;
+        height: 48px;
+        .flex-col();
+        justify-content: space-between;
+        .title {
+            font-size: 19px;
+            color: white;
+            font-weight: bold;
+        }
+        .desc {
+            font-size: 15px;
+            color: white;
+        }
+    }
+    .col2 {
+        .flex-col();
+        align-items: center;
+        width: 50px;
+        min-width: 50px;
+        margin-left: 10px;
+        .icon {
+            width: 29px;
+            height: 29px;
+        }
+        .num {
+            font-size: 15px;
+            color: white;
+            margin-top: 2px;
+        }
+    }
+}
+.bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    .flex();
+    padding-top: env(safe-area-inset-top);
+    .back-wrapper {
+        .icon-back {
+        }
+    }
 }
 </style>

src/pages/videoList.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="video-list">
+        <div class="video-item" v-for="item in list" :key="item.id" @click="detail(item)">
+            <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">{{ item.name }}</div>
+            <div class="desc">
+                <div class="col1">播放次数：{{ item.videoCount }}次</div>
+                <div class="col2">视频时长：{{ item.times }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import format from 'date-fns/format';
+import parse from 'date-fns/parse';
+export default {
+    data() {
+        return {
+            page: 1,
+            size: 20,
+            last: false,
+            list: [],
+            loading: false
+        };
+    },
+    created() {
+        this.getData();
+    },
+    methods: {
+        fmt(time) {
+            return format(parse(time, 'yyyy-MM-dd HH:mm:ss', new Date()), 'yyyy/MM/dd');
+        },
+        getData() {
+            if (this.loading) return;
+            this.loading = true;
+            this.$http
+                .get('https://www.jetour.com.cn/cmsapi/business/Carousel/page', {
+                    currentPage: this.page,
+                    pageNumber: this.size,
+                    resourceType: 2,
+                    videoType: 2
+                })
+                .then(res => {
+                    this.loading = false;
+                    if (res.success) {
+                        if (res.data.page.currentPage === 1) {
+                            this.list = [];
+                        }
+                        this.list = this.list.concat(res.data.pp);
+                        this.last = res.data.page.currentPage === res.data.page.totalPage;
+                    }
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (!this.loading && !this.last) {
+                this.page++;
+                this.getData();
+            }
+        },
+        detail(item) {
+            wx.request({
+                method: 'PUT',
+                url: 'https://www.jetour.com.cn/cmsapi/business/Carousel/videoadd?id=' + item.id,
+                dataType: 'json',
+                success(res) {},
+                fail(err) {}
+            });
+            wx.navigateTo({
+                url: `/pages/video?id=${item.id}`
+            });
+        }
+    }
+};
+</script>
+<style lang="less">
+.video-item {
+    background: #ffffff;
+    border-radius: 4px;
+    margin: 10px 20px 0 20px;
+    padding-bottom: 20px;
+    overflow: hidden;
+    position: relative;
+    .flex-col();
+    .cover {
+        width: calc(100vw - 40px);
+        height: calc(150 / 355 * (100vw - 40px));
+    }
+    .icon-play {
+        width: 75px;
+        height: 75px;
+        position: absolute;
+        left: 0;
+        top: 35px;
+        right: 0;
+        margin: auto;
+    }
+    .time {
+        font-size: 11px;
+        color: @text3;
+        margin: 18px 15px 0 15px;
+        line-height: 1;
+    }
+    .title {
+        margin: 9px 15px 0 15px;
+        color: @text1;
+        font-size: 14px;
+    }
+    .desc {
+        font-size: 11px;
+        color: @text3;
+        font-weight: bold;
+        line-height: 1;
+        margin: 9px 15px 0 15px;
+        .flex();
+        .col1 {
+            width: 124px;
+        }
+    }
+}
+</style>

src/utils/Time.js

@@ -1,4 +1,5 @@
-import { format, parse } from 'date-fns';
+import format from 'date-fns/format';
+import parse from 'date-fns/parse';
 
 function changeDayTime(time, formatStr = 'yyyy-MM-dd HH:mm:ss', needParse = true) {
     if (time) {