.

src/components/OrderCard.vue

@@ -41,9 +41,9 @@
         </div>
         <div class="btnList" v-else>
             <template v-if="info.status === '1'">
-                <van-button size="small" round type="default" @click.stop="cancelOrder" v-if="info.status === '1'"
-                    >取消订单</van-button
-                >
+                <van-button size="small" round type="default" @click.stop="cancelOrder" v-if="info.status === '1'">
+                    取消订单
+                </van-button>
                 <van-button :color="$colors.prim" size="small" round @click.stop="toPay">
                     支付定金
                 </van-button>
@@ -59,16 +59,18 @@
                         @click.stop="discloseInformation"
                         :color="$colors.prim"
                         v-if="info.canFillLoanData"
-                        >提交贷款资料</van-button
                     >
+                        提交贷款资料
+                    </van-button>
                     <van-button
                         @click="toPay"
                         square
                         block
                         :color="$colors.prim"
                         v-if="!info.backOrdering && '5' === info.loanStatus"
-                        >支付首付</van-button
                     >
+                        支付首付
+                    </van-button>
                 </template>
             </template>
             <template v-if="info.backOrdering">
@@ -81,11 +83,12 @@
                 round
                 @click.stop="showFailReason"
                 color="#e76850"
-                >预审核失败</van-button
-            >
-            <van-button size="small" round type="default" @click.stop="toBackMoeny" v-if="info.canBackDeposit"
-                >退订金</van-button
             >
+                预审核失败
+            </van-button>
+            <van-button size="small" round type="default" @click.stop="toBackMoeny" v-if="info.canBackDeposit">
+                退订金
+            </van-button>
         </div>
         <van-dialog id="van-dialog" />
     </div>

src/pages/calculator.vue

@@ -32,6 +32,10 @@
         </div>
         <div class="title">计算结果</div>
         <div class="result">
+            <div class="row">
+                <div class="label">指导价格</div>
+                <div class="value">{{ officialQuotes }}</div>
+            </div>
             <div class="row">
                 <div class="label">首付款</div>
                 <div class="value">{{ downPayment }}</div>
@@ -203,7 +207,13 @@ export default {
             console.log('confirmModel::', e);
             this.modelId = e.detail.value.id;
             this.modelName = e.detail.value.name;
-            this.officialQuotes = e.detail.value.officialQuotes;
+            let officialQuotes = 0;
+            if (typeof e.detail.value.officialQuotes === 'string') {
+                officialQuotes = Number(e.detail.value.officialQuotes.split('-')[0]);
+            } else {
+                officialQuotes = e.detail.value.officialQuotes;
+            }
+            this.officialQuotes = officialQuotes || 0;
             this.showModelPicker = false;
         }
     }

src/pages/car.vue

@@ -365,6 +365,7 @@ export default {
                     console.log('checkValidMaterielCode::', res);
                     if (res.code === 200 && res.data) {
                         params.materielCode = res.data;
+                        bookForm.materielCode = res.data;
                         return this.$http.post('/applets/carsubmit/querycarsettlement', params, {
                             header: {
                                 'Content-Type': 'application/json'
@@ -381,13 +382,14 @@ export default {
                         return Promise.reject(res.message);
                     }
                 })
-                .then(res => {
+                .then(settlement => {
+                    settlement.materielCode = params.materielCode;
                     this.$loading.close();
                     wx.navigateTo({
                         url: '/pages/coupe',
                         success: function(res) {
                             res.eventChannel.emit('bookForm', bookForm);
-                            res.eventChannel.emit('settlement', res);
+                            res.eventChannel.emit('settlement', settlement);
                         }
                     });
                 })

src/pages/coupe.vue

@@ -334,9 +334,11 @@ export default {
         let eventChannel = this.$mp.page.getOpenerEventChannel();
         if (eventChannel.on) {
             eventChannel.on('bookForm', data => {
+                console.log('bookForm::', data);
                 this.bookForm = data;
             });
             eventChannel.on('settlement', data => {
+                console.log('settlement::', data);
                 this.settlement = data;
             });
         }
@@ -418,9 +420,7 @@ export default {
                 this.$http
                     .get(
                         // eslint-disable-next-line prettier/prettier
-                        `https://dealer.jetour.com.cn/api-basic/api/region/findCityByProvinceId/${
-                            e.detail.value[0].id
-                        }`,
+                        `https://dealer.jetour.com.cn/api-basic/api/region/findCityByProvinceId/${e.detail.value[0].id}`,
                         {},
                         {
                             header: {

src/pages/detail.vue

@@ -5,14 +5,24 @@
 }
 </config>
 <template>
-    <div>
+    <van-empty description="找不到该商品信息" v-if="empty">
+        <div style="width:100px">
+            <van-button round block size="small" @click="back">
+                返回
+            </van-button>
+        </div>
+    </van-empty>
+    <div v-else-if="loading" class="loading">
+        <van-loading size="24px" color="#1989fa">加载中...</van-loading>
+    </div>
+    <div v-else>
         <swiper
             class="product-swiper"
             :indicator-dots="true"
             indicator-color="rgba(0,0,0,0.1)"
             indicator-active-color="rgba(0,0,0,0.3)"
         >
-            <swiper-item v-for="item in info.images || []" :key="item" class="item">
+            <swiper-item v-for="(item, i) in info.images || []" :key="item" class="item" @click="preview(i)">
                 <img :src="item" mode="aspectFill" />
             </swiper-item>
         </swiper>
@@ -184,7 +194,9 @@ export default {
             dealerName: '',
             dealerId: null,
             dealerList: [],
-            showDealerPicker: false
+            showDealerPicker: false,
+            loading: false,
+            empty: false
         };
     },
     created() {
@@ -192,11 +204,23 @@ export default {
             key: 'MC4BZ-4QDWP-B5ZDD-VS3HX-NHBAO-CRBOQ'
         });
         this.locate();
+    },
+    onShow() {
+        if (this.info && this.info.id) {
+            return;
+        }
+        this.picker = this.$mp.page.selectComponent('#cityPicker');
+        this.loading = true;
         this.$http
             .get('/applets/queryspudetail', {
                 skuId: this.$mp.query.id
             })
             .then(res => {
+                this.loading = false;
+                if (!res.data) {
+                    this.empty = true;
+                    return;
+                }
                 if (res.data.mobileDesc) {
                     res.data.mobileDesc = res.data.mobileDesc.replace(/<img/g, '<img class="rich-text-img"');
                 }
@@ -240,12 +264,17 @@ export default {
                             });
                         }
                     });
+            })
+            .catch(e => {
+                console.log(e);
+                this.loading = false;
+                this.empty = true;
             });
     },
-    onShow() {
-        this.picker = this.$mp.page.selectComponent('#cityPicker');
-    },
     methods: {
+        back() {
+            wx.navigateBack();
+        },
         locate() {
             let province, city, provinceId, cityId;
             this.$http
@@ -451,6 +480,12 @@ export default {
             this.dealerName = value.name;
             this.dealerId = value.id;
             this.showDealerPicker = false;
+        },
+        preview(i) {
+            wx.previewImage({
+                current: this.info.images[i],
+                urls: this.info.images
+            });
         }
     }
 };
@@ -706,4 +741,9 @@ rich-text {
         }
     }
 }
+.loading {
+    .flex();
+    height: 80vh;
+    justify-content: center;
+}
 </style>

src/pages/home.vue

@@ -35,7 +35,7 @@
                 <div class="name">金融计算器</div>
             </div>
         </div>
-        <div v-if="event" class="event">
+        <div v-if="event" class="event" @click="articleDetail(event)">
             <div class="title">活动推荐</div>
             <div class="event-body">
                 <img :src="event.thumbnail" mode="aspectFill" />
@@ -43,7 +43,7 @@
                     <div class="desc">{{ event.description }}</div>
                     <div class="time-btn">
                         <div class="time">{{ event.updateTime.split(' ')[0] }}</div>
-                        <div class="btn" @click="articleDetail(event)">立即参与</div>
+                        <div class="btn">立即参与</div>
                     </div>
                 </div>
             </div>
@@ -72,8 +72,8 @@
                 </div>
                 <div style="width: 15px; min-width: 15px; display: inline-block;">&nbsp;</div>
             </scroll-view>
-            <swiper class="car-swiper" next-margin="40px" @change="onCarSwiperChange" :current="tabIndex">
-                <swiper-item v-for="item in carModels" :key="item.skuId" class="car-swiper-item">
+            <swiper class="car-swiper" next-margin="80rpx" @change="onCarSwiperChange" :current="tabIndex">
+                <swiper-item v-for="item in carModels" :key="item.skuId" class="car-swiper-item" @click="detail(item)">
                     <div class="container">
                         <img :src="item.appImgurl" mode="aspectFill" class="cover" />
                         <div class="info">
@@ -82,10 +82,14 @@
                                 <div class="desc">{{ item.desc }}</div>
                             </div>
                             <div class="col2">
-                                <div class="price">
-                                    指导价：<span style="font-size: 14px;">{{ item.monthDesc.split(' ')[0] }}</span>
-                                </div>
-                                <div class="btn" @click="detail(item)">{{ item.button }}</div>
+                                <text class="price">
+                                    <text v-if="item.priceDesc.prefix">{{ item.priceDesc.prefix }}</text>
+                                    <text v-if="item.priceDesc.num" style="font-size: 14px;">{{
+                                        item.priceDesc.num
+                                    }}</text>
+                                    <text v-if="item.priceDesc.suffix">{{ item.priceDesc.suffix }}</text>
+                                </text>
+                                <div class="btn">{{ item.button }}</div>
                             </div>
                         </div>
                     </div>
@@ -110,7 +114,22 @@ export default {
             this.banners = res.data;
         });
         this.$http.get('/applets/carShowQueryAll').then(res => {
-            this.carModels = res.data.map(i => JSON.parse(i.columnValue));
+            this.carModels = res.data.map(i => {
+                let model = JSON.parse(i.columnValue);
+                let res = /(?<prefix>^.*?)(?<num>[0-9]+(\.?[0-9]+)?)(?<suffix>.*$)/.exec(model.monthDesc);
+                if (res) {
+                    model.priceDesc = {
+                        prefix: res.groups.prefix,
+                        num: res.groups.num,
+                        suffix: res.groups.suffix
+                    };
+                } else {
+                    model.priceDesc = {
+                        prefix: model.monthDesc
+                    };
+                }
+                return model;
+            });
             console.log(this.carModels);
         });
         this.$http
@@ -302,12 +321,13 @@ export default {
         }
     }
     .car-swiper {
-        height: 283px;
+        height: calc(348 / 660 * (100vw - 120rpx) + 180rpx);
         .car-swiper-item {
             padding-left: 20px;
             box-sizing: border-box;
+            overflow: visible;
             .container {
-                height: 256px;
+                height: calc(348 / 660 * (100vw - 120rpx) + 140rpx);
                 background: #ffffff;
                 box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.13);
                 border-radius: 10px;
@@ -315,7 +335,7 @@ export default {
                 .flex-col();
                 .cover {
                     width: 100%;
-                    height: 186px;
+                    height: calc(348 / 660 * (100vw - 120rpx));
                     border-radius: 6px 6px 0px 0px;
                 }
                 .info {