0927

src/main.js

@@ -15,6 +15,26 @@ Vue.prototype.$dialog = Dialog;
 
 const store = require('./store').default;
 Vue.prototype.$store = store;
+Vue.prototype.$toast = function(title, icon) {
+    if (!icon) {
+        icon = 'none';
+    }
+    wx.showToast({
+        icon: icon,
+        title: title
+    });
+};
+function $loading(title) {
+    wx.showLoading({
+        mask: true,
+        title: title || ''
+    });
+}
+$loading.close = function() {
+    wx.hideLoading();
+};
+Vue.prototype.$loading = $loading;
+
 Vue.mixin({
     methods: {
         checkLogin() {

src/pages/car.vue

@@ -318,12 +318,67 @@ export default {
                 deposit: this.deposit
             };
             console.log(bookForm);
-            wx.navigateTo({
-                url: '/pages/coupe',
-                success: function(res) {
-                    res.eventChannel.emit('bookForm', bookForm);
-                }
-            });
+
+            let params = {
+                carId: this.carId,
+                carSeatId: this.currentSeat.id,
+                carColorId: this.currentColor.id,
+                carColorMaterialId: this.currentColor.carColorMaterialList[0].id,
+                carUpholsteryId: this.currentUpholstery.id,
+                carWheelHubId: this.currentWheelHub.id,
+                carCaliperId: this.currentCaliper.id,
+                carPackageIdList: this.optionalPackage
+                    .map(parent => {
+                        return parent.carOptionalPackageList.filter(i => i.selected);
+                    })
+                    .reduce((a, b) => a.concat(b))
+                    .map(i => i.id)
+            };
+            this.$loading();
+            this.$http
+                .post('/applets/checkValidMaterielCode', params, {
+                    header: {
+                        'Content-Type': 'application/json'
+                    }
+                })
+                .then(res => {
+                    console.log('checkValidMaterielCode::', res);
+                    if (res.code === 200 && res.data) {
+                        params.materielCode = res.data;
+                        return this.$http.post('/applets/carsubmit/querycarsettlement', params, {
+                            header: {
+                                'Content-Type': 'application/json'
+                            }
+                        });
+                    } else {
+                        return Promise.reject(res.message);
+                    }
+                })
+                .then(res => {
+                    if (res.code === 200 && res.data) {
+                        return Promise.resolve(res.data);
+                    } else {
+                        return Promise.reject(res.message);
+                    }
+                })
+                .then(res => {
+                    this.$loading.close();
+                    wx.navigateTo({
+                        url: '/pages/coupe',
+                        success: function(res) {
+                            res.eventChannel.emit('bookForm', bookForm);
+                            res.eventChannel.emit('settlement', res);
+                        }
+                    });
+                })
+                .catch(e => {
+                    this.$loading.close();
+                    if (typeof e === 'string') {
+                        this.$toast(e);
+                    } else {
+                        this.$toast('生成配置失败，请稍后再试');
+                    }
+                });
         }
     }
 };

src/pages/coupe.vue

@@ -11,10 +11,6 @@
             <div class="sub-title">{{ bookForm.color.name }}</div>
             <div class="divider"></div>
             <div class="small-title">全部选择配置</div>
-            <div class="param" style="margin-top: 14px;">
-                <div class="name">动力：{{ bookForm.carDesc }}</div>
-                <div class="value">¥0</div>
-            </div>
             <div class="param">
                 <div class="name">座椅：{{ bookForm.seat.name }}</div>
                 <div class="value">¥{{ bookForm.seat.price }}</div>
@@ -23,10 +19,6 @@
                 <div class="name">颜色：{{ bookForm.color.name }}/{{ bookForm.color.material }}</div>
                 <div class="value">¥{{ bookForm.color.price }}</div>
             </div>
-            <!-- <div class="param">
-                <div class="name">材质：{{ bookForm.color.material }}</div>
-                <div class="value">¥{{ bookForm.color.price }}</div>
-            </div> -->
             <div class="param">
                 <div class="name">内饰：{{ bookForm.upholstery.name }}</div>
                 <div class="value">¥{{ bookForm.upholstery.price }}</div>
@@ -197,7 +189,10 @@
         <van-action-sheet :show="showCityPicker">
             <!-- eslint-disable -->
             <van-picker
-                :columns="[{ values: [], className: 'column1' }, { values: [], className: 'column2' }]"
+                :columns="[
+                    { values: [], className: 'column1' },
+                    { values: [], className: 'column2' }
+                ]"
                 value-key="name"
                 show-toolbar
                 title="选择城市"
@@ -211,7 +206,7 @@
 
         <van-action-sheet :show="showDealerPicker">
             <van-picker
-                :columns="dealerList"
+                :columns="dealerListFiltered"
                 value-key="name"
                 show-toolbar
                 title="选择经销商"
@@ -231,6 +226,7 @@ export default {
         return {
             type: 1,
             tab: 0,
+            specs: [],
             loanOptions: [
                 {
                     month: 12,
@@ -269,6 +265,7 @@ export default {
             spNo: null,
             dealerList: [],
             showDealerPicker: false,
+            settlement: {},
             bookForm: {
                 carId: null,
                 carDesc: null,
@@ -306,6 +303,12 @@ export default {
         };
     },
     onShow() {
+        if (process.env.NODE_ENV === 'development') {
+            this.name = '熊竹';
+            this.mobile = '15077886171';
+            this.idCard = '321002199408304614';
+        }
+
         this.picker = this.$mp.page.selectComponent('#cityPicker');
         this.$http
             .get(
@@ -333,6 +336,18 @@ export default {
             eventChannel.on('bookForm', data => {
                 this.bookForm = data;
             });
+            eventChannel.on('settlement', data => {
+                this.settlement = data;
+            });
+        }
+    },
+    watch: {
+        type(val) {
+            if (val === 2) {
+                if (!this.spNo) {
+                    this.dealerId = null;
+                }
+            }
         }
     },
     computed: {
@@ -356,6 +371,13 @@ export default {
                     break;
             }
             return Math.ceil(monthly);
+        },
+        dealerListFiltered() {
+            if (this.type === 1) {
+                return this.dealerList;
+            } else {
+                return this.dealerList.filter(i => !!i.spNo);
+            }
         }
     },
     methods: {
@@ -513,65 +535,52 @@ export default {
                 carUpholsteryId: this.bookForm.upholstery.id,
                 carWheelHubId: this.bookForm.wheelHub.id,
                 carCaliperId: this.bookForm.caliper.id,
-                carPackageIdList: this.bookForm.optionalPackage.map(i => i.id)
+                carPackageIdList: this.bookForm.optionalPackage.map(i => i.id),
+                materielCode: this.settlement.materielCode
             };
+            this.$loading();
             this.$http
-                .post('/applets/checkValidMaterielCode', data, {
-                    header: {
-                        'Content-Type': 'application/json'
+                .post(
+                    '/applets/carsubmit/submitcarorder',
+                    {
+                        dealerCode: this.dealerCode,
+                        dealerId: this.dealerId,
+                        pickedCarIds: data,
+                        payType: this.type,
+                        loanInstalmentCount: this.loanOptions[this.tab].month,
+                        incomingUrl: this.$http.parseUrl('/applets/'),
+                        loanRate: this.loanOptions[this.tab].rate,
+                        idCard: this.idCard,
+                        name: this.name,
+                        mobile: this.mobile,
+                        pickCity: this.provinceName + ' ' + this.cityName,
+                        carSupplier: this.dealerName,
+                        carSupplierNo: this.type === 1 ? '100109999999' : this.spNo,
+                        downPaymentRate: this.percent / 100,
+                        materielCode: this.settlement.materielCode
+                    },
+                    {
+                        header: {
+                            'Content-Type': 'application/json'
+                        }
                     }
-                })
+                )
                 .then(res => {
-                    console.log('checkValidMaterielCode::', res);
-                    if (res.code === 200 && res.data) {
-                        data.materielCode = res.data;
-                        // return this.$http.post('/applets/querycarsettlement', data, {
-                        //     header: {
-                        //         'Content-Type': 'application/json'
-                        //     }
-                        // });
-                        return Promise.resolve();
+                    this.$loading.close();
+                    if (res.code === 200) {
+                        wx.redirectTo({
+                            url: '/pages/order/orderListCoupe'
+                        });
                     } else {
                         return Promise.reject(res.message);
                     }
                 })
-                .then(res => {
-                    console.log('querycarsettlement::', res);
-                    return this.$http.post(
-                        '/applets/carsubmit/submitcarorder',
-                        {
-                            dealerCode: this.dealerCode,
-                            dealerId: this.dealerId,
-                            pickedCarIds: data,
-                            payType: this.type,
-                            loanInstalmentCount: this.loanOptions[this.tab].month,
-                            incomingUrl: this.$http.parseUrl('/applets/'),
-                            loanRate: this.loanOptions[this.tab].rate,
-                            idCard: this.idCard,
-                            name: this.name,
-                            mobile: this.mobile,
-                            pickCity: this.provinceName + ' ' + this.cityName,
-                            carSupplier: this.dealerName,
-                            carSupplierNo: this.type === 1 ? '100109999999' : this.spNo,
-                            downPaymentRate: this.percent / 100,
-                            materielCode: data.materielCode
-                        },
-                        {
-                            header: {
-                                'Content-Type': 'application/json'
-                            }
-                        }
-                    );
-                })
-                .then(res => {
-                    if (res.data.code == 1) {
-                        Dialog.alert({
-                            title: '提交订单成功',
-                            confirmButtonText: '去支付',
-                            className: 'custom-class-name'
-                        }).then(() => {
-                            payOrder(res.data.carOrderId, res.data.carOrderCode);
-                        });
+                .catch(e => {
+                    this.$loading.close();
+                    if (typeof e === 'string') {
+                        this.$toast(e);
+                    } else {
+                        this.$toast('提交订单失败，请稍后再试');
                     }
                 });
         }

src/pages/submit.vue

@@ -131,10 +131,7 @@ export default {
                 cancelButtonText: '关闭',
                 className: 'custom-class-name'
             }).then(_ => {
-                wx.showLoading({
-                    mask: true,
-                    title: ''
-                });
+                this.$loading();
                 this.$http
                     .post(
                         '/applets/submitorder',
@@ -162,14 +159,19 @@ export default {
                         { header: { 'Content-Type': 'application/json' } }
                     )
                     .then(res => {
-                        wx.hideLoading();
-                        wx.showToast({
-                            title: '下单成功'
+                        this.$loading.close();
+                        wx.redirectTo({
+                            url: '/pages/order/orderList'
                         });
                     })
                     .catch(e => {
                         console.log(e);
-                        wx.hideLoading();
+                        this.$loading.close();
+                        if (typeof e === 'string') {
+                            this.$toast(e);
+                        } else {
+                            this.$toast('下单失败，请稍后再试');
+                        }
                     });
             });
             return;

src/pages/tuxiang.vue

@@ -35,8 +35,122 @@
             </div>
         </div>
         <div class="tour" v-if="tab === '4'">
-            <img class="bg" src="../static/imgs/tour.jpg" />
-            <div class="hotspot" @click="hotspotClick(i)" v-for="(item, i) in hotspot" :style="item" :key="i"></div>
+            <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
@@ -190,12 +304,14 @@
 export default {
     data() {
         return {
-            tab: '4',
+            tab: '1',
+            tourTab: 0,
             windowWidth: 375,
             showDialog1: false,
             showDialog2: false,
             showDialog3: false,
-            showDialog4: false
+            showDialog4: false,
+            current: 0
         };
     },
     created() {
@@ -226,6 +342,19 @@ export default {
         },
         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;
+            }
         }
     }
 };
@@ -307,11 +436,122 @@ page {
 }
 .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;