0927

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 dist-*
-src/native
+src/native
+src/vant

project.config.json

@@ -126,7 +126,8 @@
                     "id": -1,
                     "name": "提交订单",
                     "pathName": "pages/submit",
-                    "scene": null
+                    "scene": null,
+                    "query": "skuId=1568948578421550&provinceId=32&cityId=3201&dealerId=7024&name=%E6%8D%B7%E9%80%94X70S%20%E6%97%85%E8%A1%8C%E6%99%BA%E8%83%BDSUV%EF%BC%88%E6%8A%A2%E8%AE%A2%E4%B8%AD%EF%BC%89&image=http%3A%2F%2Fshopimg.jetour.com.cn%2F20190920%2F1568948421979.jpg"
                 },
                 {
                     "id": -1,
@@ -207,6 +208,12 @@
                     "pathName": "pages/order/refundOrder",
                     "query": "orderId=5083&money=9.90",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "选配",
+                    "pathName": "pages/coupe",
+                    "scene": null
                 }
             ]
         }

src/App.vue

@@ -160,4 +160,7 @@ export default {
 .f18 {
     font-size: 18px;
 }
+.b {
+    font-weight: bold;
+}
 </style>

src/agree.js

@@ -0,0 +1,148 @@
+export default `<div class="content" id="vehicleReservationAgreement"><p class="MsoNormal" align="center" style="mso-char-indent-count:2.0000;text-align:center;
+line-height:20.0000pt;mso-line-height-rule:exactly;"><span style="font-family: 微软雅黑; font-size: 12pt;">条款和条件</span><br></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">一、您作为买方同意依据本协议中的条款和条件向选定的提车经销商（即</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">本</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">协议</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">项下</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">，由</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">其承担本协议项下甲方的权利与义务，以下简称</font>“</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">甲方</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">”</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">）购买您在订单详情中描述的汽车。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">二、订单</font> </span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">您的在线订车订单（以下简称</font>“订单”）包括以下信息：</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">1. 车辆配置方案：车辆配置方案对您订购的汽车进行描述，包括但不限于该汽车的价格、颜色、配置、内饰、订金等。</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">2. 生产和物流信息：您可以在您的订单详情中查看您订购的汽车的生产信息、物流信息，生产、物流信息将会随着状态的改变而改变。 </span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">3. 条款和条件：这些条款和条件在您下订单之日起生效并适用于本次交易。</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">三、购买价格，税款和官方费用。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">本协议所附车辆配置方案中显示的汽车购买价格在车辆交付之前不会被改变。但如果在汽车交付之前您对当初的车辆配置方案做出改变，请您在下达订单后</font>72小时内取消订单终止本次交易后再重新下单。</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">经甲方向您发出支付要求，您应在车辆交付日当天或之前全额支付所购车辆尾款。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">四、订购汽车</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">1．在您支付订金后，72小时内可无条件取消订单，如</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">订单</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">超过</font>72小时您未采取</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">任何操作，视为您</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">接受订单</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">，</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">订单将锁定并安排生产，届时订金将不可退，订金用于抵扣车款。若您需要修改订单，请付款前取消订单或</font>72小时内申请退款后重新下单。您申请退款后，支付的订金将原路退回，该笔订单所享有的所有权益将会失效；</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">2．关于选择贷款购车的客户，在线上提交贷款申请验证通过后，请尽快前往甲方提车经销商处办理贷款资格线下审核，若无法通过线下贷款审核，造成您不能在交付期（包括甲方同意的延期期间）内收货，您将被视为违约，该订单将被取消，在这种情况下，您的订金将只可退还50%并原路退回，且甲方有权将合同项下汽车出售给其他客户。</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">五、后续付款</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">后续付款的数额为汽车的任何应付而未付款项，您应在甲方交付汽车当天或之前支付。您应在收到甲方书面、邮件或电话通知后在约定的交付日期内完成该笔付款；否则甲方有权将您订购的汽车另行处理，且您已付的订金不予退还。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><i><u><span style="font-family: 微软雅黑; font-size: 12pt;"><font face="微软雅黑">为保证您的资金安全，您同意如发生退款，均通过支付款项的账户（支付宝、微信或银行卡）原路退回。如通过第三方账户支付款项，原路退回退款时有可能您不是该账户的授权可使用</font></span></u></i><i><u><span style="font-family: Meiryo; font-size: 12pt;"><font face="Meiryo">⼈</font></span></u></i><i><u><span style="font-family: 微软雅黑; font-size: 12pt;"><font face="微软雅黑">，您明知此风险并自愿承担该风险。如您不同意原路退回款项，您可以向甲方申请退款退至您指定的您本</font></span></u></i><i><u><span style="font-family: Meiryo; font-size: 12pt;"><font face="Meiryo">⼈</font></span></u></i><i><u><span style="font-family: 微软雅黑; font-size: 12pt;"><font face="微软雅黑">当时有效身份证件开立的银行卡账户。</font></span></u></i><i><u><span style="font-family: 微软雅黑; font-size: 12pt;"><o:p></o:p></span></u></i></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">为保证您的资金安全，您同意您申请时应当向甲方提供您是买方及付款</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼈</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">的所有证据及相关材料（包括但不限于申请书、捷途的账户及密码、与原件核对</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼀</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">致的身份证复印件、所有代付款授权委托书、承诺书、与原件核对</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼀</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">致的本</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼈</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">有效身份</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">证件开立的银行卡复印件）并且甲方有权根据您提供的材料自行决定是否接受申请。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">六、交付</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">在车辆到店后，甲方将会以电话、短信或者邮件的形式通知您，并与您约定交付时间（交付地在您下单时选择的经销商、服务中心或其他另外双方约定的地点）。同意在约定的交付日期内接受您下单时选择的交付地点接收您的所购汽车。如果您不能在交付期内收货，请联系甲方以要求延期收货，您有一次无条件延期的权力，但若您提出第二次延期收货申请，甲方有权决定是否同意您的要求。延期期间由您和甲方协商确定。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><i><span style="font-family: 微软雅黑; font-size: 12pt;"><font face="微软雅黑">如果您不能在交付期（包括甲方同意的延期期间）内收货，您将被视为违约。在这种情况下，您的订金将不会被退还，且甲方有权将合同项下汽车出售给其他客户。</font></span></i><i><span style="font-family: 微软雅黑; font-size: 12pt;"><o:p></o:p></span></i></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">七、验收</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">您同意在接收所购汽车时完成对该汽车的验收，且</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼀</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">旦完成提车，将视为您已经完成对汽车的验收，认可车况。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">甲方也会向您提供</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼀</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">份适用于您所购汽车的用户手册及其他随车文件，您在使用车辆以前应仔细阅读该用户手册。您应严格按照其内容操作、使用车辆。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">八、汽车登记</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">若甲方承诺对您所购汽车完成登记提供协助，您须按照相关法律的规定提供登记所需的所有文件、证件、批准、许可等，并承担与此相关的税费、开销及费用。国家或车辆登记地的法律、法规、规章或政策有可能发生变化，甲方不能保证您一定能按照签订合同时的相关规定享有权利、享受各种优惠、福利。您同意独立承担由于这些对车辆购置、登记或使用的限制性规定、禁止性规定导致的所购汽车不能登记、不被准予在我国境内道路上行驶和由于国家法律、法规、规章或政策变化导致的所有不利、损失或损害，包括各项权利、优惠、福利的丧失。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">九、质量保证</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">您将在汽车交付之日或之前收到由甲方提供的汽车有限质量保证的书面文本。另外，本条款项下的质量保证还应包括依据法律产生的质量保证要求。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">十、责任限制</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">在任何情况下（除非可适用法律另有规定），甲方都不会对产生于本协议的任何附带损失、特殊损失或间接损失承担责任。如果甲方应对这些损失承担责任，则您唯</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼀</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">的救济是获得订金的返还以及甲方最高不超过</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼀</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">倍的订金金额的款项支付。该责任限制条款不应适用于甲方的任何故意不端行为、欺诈或重</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼤</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">过失，也不适用于</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼈</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">身伤害或死亡的情形</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">十一、注册条款及隐私权政策</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">捷途的客户注册条款及隐私权政策包含在本协议中，可以通过</font>shop.jetour.</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="line-height:20.0000pt;mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;">com.cn网站浏览该政策，您同意捷途的客户注册条款及隐私权政策。</span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">十二、适用法律，完整合同，转让</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">本协议及其解释应适用中华</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼈</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">民共和国法律（出于本协议之目的，中华</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼈</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">民共和国法律不包括台湾、香港特别行政区及澳门特别行政区的法律），且不适用其冲突法规则。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">本协议取代本协议签订之前的关于本协议项下所售汽车的协议、</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼝</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">头声明、谈判、交流或声明。没有明确包含在本协议中的关于购买的条款不具有约束</font></span><span style="mso-spacerun:'yes';font-family:Meiryo;font-size:12.0000pt;
+mso-font-kerning:1.0000pt;"><font face="Meiryo">⼒</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:宋体;
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">甲方可以自行决定将甲方在本协议项下的权利和义务转让给甲方的任一关联机构。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p><p class="MsoNormal" style="text-indent:24.0000pt;mso-char-indent-count:2.0000;line-height:20.0000pt;
+mso-line-height-rule:exactly;"><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:12.0000pt;mso-font-kerning:1.0000pt;"><font face="微软雅黑">如协议双方对本协议项下条款产生争议的，双方应友好协商解决。协商不成的，双方共同提交至甲方所在地有管辖权的人民法院诉讼解决。</font></span><span style="mso-spacerun:'yes';font-family:微软雅黑;mso-bidi-font-family:'Times New Roman';
+font-size:10.5000pt;mso-font-kerning:1.0000pt;"><o:p></o:p></span></p></div>`;

src/components/OrderCard.vue

@@ -1,214 +1,214 @@
-<template>
-    <div class="orderCard" @click="goDetail">
-        <div class="top2" v-if="isBack">
-            <span class="code">退单号： {{ backInfo.backCode }}</span>
-            <span class="status">{{ backStatusText }}</span>
-        </div>
-        <div class="top">
-            <span class="code">订单号： {{ info.code }}</span>
-            <template v-if="!isBack">
-                <span class="status">{{ statusText }}</span>
-                <span class="warning yellow" v-if="loantxt">{{ loantxt }}</span>
-                <span class="warning" v-if="backOrderStatus">{{ backOrderStatus }}</span>
-            </template>
-        </div>
-
-        <div class="carCenter">
-            <van-image width="89" height="89" :src="car.mobileUrl" />
-            <div class="content">
-                <div class="text1">
-                    <span>{{ car.name }}</span>
-                    <span class="money">
-                        {{ totalPrice }}
-                    </span>
-                </div>
-
-                <div class="sub">
-                    <span>
-                        {{ text }}
-                    </span>
-
-                    <span>×1</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="totalMoney">订金: {{ depositPrice }}</div>
-        <div class="btnList" v-if="isBack">
-            <van-button :color="$colors.prim" size="small" round @click.stop="goDetail">
-                退订详情
-            </van-button>
-        </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 :color="$colors.prim" size="small" round @click.stop="toPay">
-                    支付定金
-                </van-button>
-            </template>
-            <template v-else-if="info.status === '2'">
-                <van-button :color="$colors.prim" size="small" v-if="info.payType === '1'" round @click.stop="toPay">
-                    支付尾款
-                </van-button>
-                <template v-else-if="info.payType === '2'">
-                    <van-button
-                        size="small"
-                        round
-                        @click.stop="discloseInformation"
-                        :color="$colors.prim"
-                        v-if="info.canFillLoanData"
-                        >提交贷款资料</van-button
-                    >
-                    <van-button
-                        @click="toPay"
-                        square
-                        block
-                        :color="$colors.prim"
-                        v-if="!info.backOrdering && '5' === info.loanStatus"
-                        >支付首付</van-button
-                    >
-                </template>
-            </template>
-            <template v-if="info.backOrdering">
-                <van-button size="small" round type="default" @click.stop="transparentFactory">生产状态查询</van-button>
-                <van-button size="small" round type="default" @click.stop="loadLogistics">物流状态查询</van-button>
-            </template>
-            <van-button
-                v-if="info.isSend && info.failReason"
-                size="small"
-                round
-                @click.stop="showFailReason"
-                color="#e76850"
-                >预审核失败</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>
-</template>
-
-<script>
-import Order from '../mixins/Order';
-export default {
-    props: ['info', 'backInfo', 'isBack'],
-    mixins: [Order]
-};
-</script>
-
-<style lang="less">
-.orderCard {
-    background: #ffffff;
-    border: 1px solid #ebebeb;
-    border-radius: 5px;
-    box-shadow: 0 0 10px 2px #ebebeb;
-    padding: 16px 10px;
-}
-.btnList {
-    display: flex;
-    justify-content: flex-end;
-    ._van-button + ._van-button {
-        margin-left: 10px;
-    }
-}
-.top2 {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding-bottom: 5px;
-    .code {
-        font-size: 12px;
-        color: #959595;
-        line-height: 18px;
-    }
-
-    .status {
-        font-size: 13px;
-        color: #6e6e76;
-        line-height: 18px;
-    }
-}
-.top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    padding-bottom: 16px;
-
-    .code {
-        font-size: 12px;
-        color: #959595;
-        line-height: 18px;
-    }
-
-    .status {
-        font-size: 13px;
-        color: #6e6e76;
-        line-height: 18px;
-    }
-
-    .warning {
-        width: 100%;
-        text-align: right;
-        font-size: 13px;
-        color: #e76850;
-        line-height: 18px;
-        margin-top: 9px;
-
-        &.yellow {
-            color: #e76850;
-        }
-    }
-}
-
-.carCenter {
-    display: flex;
-    .content {
-        flex-grow: 1;
-        margin-left: 20px;
-
-        .text1 {
-            font-size: 13px;
-            font-weight: bold;
-            color: #333333;
-            line-height: 18px;
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .sub {
-            font-size: 12px;
-            color: #868686;
-            line-height: 18px;
-            display: flex;
-            justify-content: space-between;
-            margin-top: 19px;
-            span {
-                &:first-child {
-                    width: 140px;
-                }
-            }
-        }
-    }
-}
-
-.totalMoney {
-    font-size: 18px;
-    font-weight: bold;
-    color: #333333;
-    line-height: 35px;
-    text-align: right;
-    padding-top: 16px;
-    padding-bottom: 18px;
-}
-
-.dialog-index--custom-class-name {
-    .dialog-index--van-dialog__confirm {
-        color: @prim !important;
-    }
-}
-</style>
+<template>
+    <div class="orderCard" @click="goDetail">
+        <div class="top2" v-if="isBack">
+            <span class="code">退单号： {{ backInfo.backCode }}</span>
+            <span class="status">{{ backStatusText }}</span>
+        </div>
+        <div class="top">
+            <span class="code">订单号： {{ info.code }}</span>
+            <template v-if="!isBack">
+                <span class="status">{{ statusText }}</span>
+                <span class="warning yellow" v-if="loantxt">{{ loantxt }}</span>
+                <span class="warning" v-if="backOrderStatus">{{ backOrderStatus }}</span>
+            </template>
+        </div>
+
+        <div class="carCenter">
+            <van-image width="89" height="89" :src="car.mobileUrl" />
+            <div class="content">
+                <div class="text1">
+                    <span>{{ car.name }}</span>
+                    <span class="money">
+                        {{ totalPrice }}
+                    </span>
+                </div>
+
+                <div class="sub">
+                    <span>
+                        {{ text }}
+                    </span>
+
+                    <span>×1</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="totalMoney">订金: {{ depositPrice }}</div>
+        <div class="btnList" v-if="isBack">
+            <van-button :color="$colors.prim" size="small" round @click.stop="goDetail">
+                退订详情
+            </van-button>
+        </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 :color="$colors.prim" size="small" round @click.stop="toPay">
+                    支付定金
+                </van-button>
+            </template>
+            <template v-else-if="info.status === '2'">
+                <van-button :color="$colors.prim" size="small" v-if="info.payType === '1'" round @click.stop="toPay">
+                    支付尾款
+                </van-button>
+                <template v-else-if="info.payType === '2'">
+                    <van-button
+                        size="small"
+                        round
+                        @click.stop="discloseInformation"
+                        :color="$colors.prim"
+                        v-if="info.canFillLoanData"
+                        >提交贷款资料</van-button
+                    >
+                    <van-button
+                        @click="toPay"
+                        square
+                        block
+                        :color="$colors.prim"
+                        v-if="!info.backOrdering && '5' === info.loanStatus"
+                        >支付首付</van-button
+                    >
+                </template>
+            </template>
+            <template v-if="info.backOrdering">
+                <van-button size="small" round type="default" @click.stop="transparentFactory">生产状态查询</van-button>
+                <van-button size="small" round type="default" @click.stop="loadLogistics">物流状态查询</van-button>
+            </template>
+            <van-button
+                v-if="info.isSend && info.failReason"
+                size="small"
+                round
+                @click.stop="showFailReason"
+                color="#e76850"
+                >预审核失败</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>
+</template>
+
+<script>
+import Order from '../mixins/Order';
+export default {
+    props: ['info', 'backInfo', 'isBack'],
+    mixins: [Order]
+};
+</script>
+
+<style lang="less">
+.orderCard {
+    background: #ffffff;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    box-shadow: 0 0 10px 2px #ebebeb;
+    padding: 16px 10px;
+}
+.btnList {
+    display: flex;
+    justify-content: flex-end;
+    ._van-button + ._van-button {
+        margin-left: 10px;
+    }
+}
+.top2 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding-bottom: 5px;
+    .code {
+        font-size: 12px;
+        color: #959595;
+        line-height: 18px;
+    }
+
+    .status {
+        font-size: 13px;
+        color: #6e6e76;
+        line-height: 18px;
+    }
+}
+.top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding-bottom: 16px;
+
+    .code {
+        font-size: 12px;
+        color: #959595;
+        line-height: 18px;
+    }
+
+    .status {
+        font-size: 13px;
+        color: #6e6e76;
+        line-height: 18px;
+    }
+
+    .warning {
+        width: 100%;
+        text-align: right;
+        font-size: 13px;
+        color: #e76850;
+        line-height: 18px;
+        margin-top: 9px;
+
+        &.yellow {
+            color: #e76850;
+        }
+    }
+}
+
+.carCenter {
+    display: flex;
+    .content {
+        flex-grow: 1;
+        margin-left: 20px;
+
+        .text1 {
+            font-size: 13px;
+            font-weight: bold;
+            color: #333333;
+            line-height: 18px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .sub {
+            font-size: 12px;
+            color: #868686;
+            line-height: 18px;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 19px;
+            span {
+                &:first-child {
+                    width: 140px;
+                }
+            }
+        }
+    }
+}
+
+.totalMoney {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 35px;
+    text-align: right;
+    padding-top: 16px;
+    padding-bottom: 18px;
+}
+
+.dialog-index--custom-class-name {
+    .dialog-index--van-dialog__confirm {
+        color: @prim !important;
+    }
+}
+</style>

src/main.js

@@ -71,6 +71,8 @@ export default {
             'pages/order/transparent',
             'pages/order/refundOrder',
             'pages/video'
+            'pages/video',
+            'pages/coupe'
         ],
         tabBar: {
             color: '#6F6E77',
@@ -135,7 +137,8 @@ export default {
             'van-overlay': '/vant/overlay/index',
             'van-stepper': '/vant/stepper/index',
             'van-steps': '/vant/steps/index',
-            'van-rate': '/vant/rate/index'
+            'van-rate': '/vant/rate/index',
+            'van-popup': '/vant/popup/index'
         },
         permission: {
             'scope.userLocation': {

src/mixins/Order.js

@@ -21,7 +21,10 @@ export default {
                 '6': '线下审核不通过'
             },
             reasonMap,
-            isExamineTxt: { '0': ' ', '1': ' ' }
+            isExamineTxt: {
+                '0': ' ',
+                '1': ' '
+            }
         };
     },
     computed: {

src/mixins/OrderList.js

@@ -1,63 +1,63 @@
-export default {
-    data() {
-        return {
-            pageNum: 0,
-            pageSize: 10,
-            loading: false,
-            finish: false,
-            empty: false,
-            list: []
-        };
-    },
-    watch: {
-        queryData() {
-            this.pageNum = 0;
-            this.pageSize = 10;
-            this.finish = false;
-            this.empty = false;
-            this.getList();
-        }
-    },
-    onLoad() {
-        this.getList();
-    },
-    methods: {
-        getList() {
-            this.loading = true;
-            this.empty = false;
-            console.log(this.url);
-            if (this.pageNum == 0) {
-                this.list = [];
-            }
-            this.$http
-                .post(this.url, {
-                    pageNum: this.pageNum,
-                    pageSize: this.pageSize,
-                    ...this.queryData
-                })
-                .then(res => {
-                    this.list = [...this.list, ...res.data.data];
-                    this.empty = res.data.recordsTotal === 0;
-                    this.finish = this.empty ? true : res.data.totalPage === this.pageNum + 1;
-                })
-                .finally(() => {
-                    this.loading = false;
-                });
-        }
-    },
-    onReachBottom() {
-        console.log('aaaa');
-        if (!this.finish && !this.loading) {
-            this.pageNum++;
-            this.getList();
-        }
-    },
-    onPullDownRefresh() {
-        console.log('aaaa');
-        this.pageNum = 0;
-        this.pageSize = 10;
-        this.finish = false;
-        this.empty = false;
-        this.getList();
-    }
-};
+export default {
+    data() {
+        return {
+            pageNum: 0,
+            pageSize: 10,
+            loading: false,
+            finish: false,
+            empty: false,
+            list: []
+        };
+    },
+    watch: {
+        queryData() {
+            this.pageNum = 0;
+            this.pageSize = 10;
+            this.finish = false;
+            this.empty = false;
+            this.getList();
+        }
+    },
+    onLoad() {
+        this.getList();
+    },
+    methods: {
+        getList() {
+            this.loading = true;
+            this.empty = false;
+            console.log(this.url);
+            if (this.pageNum == 0) {
+                this.list = [];
+            }
+            this.$http
+                .post(this.url, {
+                    pageNum: this.pageNum,
+                    pageSize: this.pageSize,
+                    ...this.queryData
+                })
+                .then(res => {
+                    this.list = [...this.list, ...res.data.data];
+                    this.empty = res.data.recordsTotal === 0;
+                    this.finish = this.empty ? true : res.data.totalPage === this.pageNum + 1;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        }
+    },
+    onReachBottom() {
+        console.log('aaaa');
+        if (!this.finish && !this.loading) {
+            this.pageNum++;
+            this.getList();
+        }
+    },
+    onPullDownRefresh() {
+        console.log('aaaa');
+        this.pageNum = 0;
+        this.pageSize = 10;
+        this.finish = false;
+        this.empty = false;
+        this.getList();
+    }
+};

src/mixins/ToastEvent.js

@@ -1,24 +1,24 @@
-export default {
-    methods: {
-        showToastError(title, icon = 'none', duration = 1500) {
-            wx.showToast({
-                icon: icon,
-                title: title,
-                mask: true,
-                duration: duration
-            });
-        },
-        navigateBack(timeOut = 0, delta = 1) {
-            setTimeout(function() {
-                wx.navigateBack({
-                    delta: delta
-                });
-            }, timeOut);
-        },
-        goNext(url) {
-            wx.navigateTo({
-                url: url
-            });
-        }
-    }
-};
+export default {
+    methods: {
+        showToastError(title, icon = 'none', duration = 1500) {
+            wx.showToast({
+                icon: icon,
+                title: title,
+                mask: true,
+                duration: duration
+            });
+        },
+        navigateBack(timeOut = 0, delta = 1) {
+            setTimeout(function() {
+                wx.navigateBack({
+                    delta: delta
+                });
+            }, timeOut);
+        },
+        goNext(url) {
+            wx.navigateTo({
+                url: url
+            });
+        }
+    }
+};

src/pages/addressEdit.vue

@@ -1,10 +1,6 @@
 <config>
 {
-    "navigationBarTitleText": "填写个人信息",
-    "disableScroll": true,
-		"usingComponents": {
-    		"van-popup": "../vant/popup/index"
-  	}
+    "navigationBarTitleText": "填写个人信息"
 }
 </config>
 <template>
@@ -67,9 +63,7 @@
                     >设置为默认购车人</van-checkbox
                 >
             </van-cell>
-            <div class="btn-wrapper">
-                <van-button block :color="$colors.prim" @click="onSubmit">保存</van-button>
-            </div>
+            <van-button block :color="$colors.prim" @click="onSubmit" class="btn-save">保存</van-button>
         </van-cell-group>
 
         <van-popup :show="showPicker" position="bottom">
@@ -146,13 +140,6 @@ export default {
                         this.form = { ...res.data };
                     });
             } else {
-                Dialog.alert({
-                    message: '收获地址请填写真实购车人姓名和手机号，否则会影响权益领取！',
-                    showCancelButton: true,
-                    className: 'custom-class-name'
-                }).then(() => {
-                    // on close
-                });
                 return Promise.resolve();
             }
         },
@@ -293,15 +280,16 @@ page {
     }
 }
 
-.btn-wrapper {
+.btn-save {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
-    padding-bottom: env(safe-area-inset-bottom);
-    button {
-        height: 55px;
+    .van-button {
         border-radius: 0;
+        padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
+        height: calc(52px + env(safe-area-inset-bottom) / 2) !important;
+        font-size: 15px;
     }
 }
 .dialog-index--custom-class-name {

src/pages/addressList.vue

@@ -1,183 +1,201 @@
-<config>
-{
-'navigationBarTitleText': '收货地址管理',
-}
-</config>
-
-<template>
-    <div class="address-content">
-        <van-empty description="无数据" v-if="addresses.length === 0" />
-
-        <div v-for="item in addresses" :key="item.id">
-            <div class="address">
-                <div class="address-top">
-                    <div class="text1">
-                        <span>{{ item.name }} </span><span>{{ item.mobile }}</span>
-                    </div>
-                    <div class="text2">{{ item.address }}{{ item.detailAddress }}</div>
-                </div>
-                <div class="btnList">
-                    <van-checkbox
-                        class="checkbox"
-                        readonly
-                        v-if="item.isDefault"
-                        :value="true"
-                        :checked-color="$colors.prim"
-                    >
-                        默认购车人
-                    </van-checkbox>
-
-                    <van-button size="small" icon="edit" @click="addressEdit(item.id)">编辑</van-button>
-                    <van-button size="small" icon="delete" @click="del(item.id)">删除</van-button>
-                </div>
-            </div>
-        </div>
-
-        <div class="btn-wrapper">
-            <van-button class="bottomBtn" block :color="$colors.prim" @click="addressEdit(0)"
-                >添加购车人（收货地址）</van-button
-            >
-        </div>
-        <van-dialog id="van-dialog" />
-    </div>
-</template>
-<script>
-import Dialog from '../vant/dialog/dialog';
-export default {
-    data() {
-        return {
-            addresses: []
-        };
-    },
-    onShow() {
-        this.getList();
-    },
-    methods: {
-        getList() {
-            this.$http.get('/applets/querycustomeraddress').then(res => {
-                this.addresses = res.data;
-            });
-        },
-        addressEdit(id) {
-            wx.navigateTo({
-                url: '/pages/addressEdit' + (id ? `?id=${id}` : '')
-            });
-        },
-        del(id) {
-            Dialog.confirm({
-                title: '您确认要删除这个地址?',
-                // message: '您确认要删除这个地址?',
-                className: 'custom-class-name',
-                cancelButtonText: '再想想'
-            })
-                .then(() => {
-                    this.$http
-                        .get('/applets/deletecustomeraddress', {
-                            addressId: id
-                        })
-                        .then(res => {
-                            if (res.data === 1) {
-                                this.getList();
-                                this.showToastError('删除成功', 'success');
-                            } else {
-                                this.showToastError('删除失败');
-                            }
-                        });
-                })
-                .catch(() => {});
-        }
-    }
-};
-</script>
-<style lang="less" scoped>
-.bottomBtn {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.address {
-    margin: 0 15px;
-    border: 1px solid #ececec;
-    border-radius: 5px;
-    box-shadow: 0 0 10px 2px #ececec;
-}
-
-.address-top {
-    padding: 18px 10px 22px;
-    .text1 {
-        span {
-            font-size: 15px;
-            font-weight: bold;
-            color: #343434;
-            line-height: 18px;
-        }
-        span + span {
-            margin-left: 15px;
-        }
-    }
-
-    .text2 {
-        font-size: 12px;
-        font-weight: bold;
-        color: #666666;
-        line-height: 18px;
-        margin-top: 16px;
-    }
-}
-
-.address-content {
-    padding: 15px 0;
-}
-
-.btnList {
-    display: flex;
-    align-items: center;
-    padding: 15px;
-    position: relative;
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0px;
-        right: 5px;
-        left: 5px;
-        height: 1px;
-        background-color: #dedede;
-    }
-
-    .checkbox {
-        flex-grow: 1;
-    }
-}
-</style>
-
-<style lang="less">
-.btnList {
-    .van-checkbox {
-        font-size: 12px;
-        line-height: 18px;
-        .van-checkbox__label {
-            color: #109a9a;
-            font-weight: bold;
-        }
-    }
-
-    .van-button {
-        border-width: 0px;
-    }
-}
-.bottomBtn {
-    .van-button {
-        height: 55px;
-        line-height: 55px;
-        font-size: 14px;
-    }
-}
-
-.dialog-index--custom-class-name {
-    .dialog-index--van-dialog__confirm {
-        color: @prim !important;
-    }
-}
-</style>
+<config>
+{
+    "navigationBarTitleText": '收货地址管理'
+}
+</config>
+<template>
+    <div class="address-content">
+        <van-empty description="无数据" v-if="addresses.length === 0" />
+
+        <div v-for="item in addresses" :key="item.id">
+            <div class="address" @click="pickAddress(item)">
+                <div class="address-top">
+                    <div class="text1">
+                        <span>{{ item.name }} </span><span>{{ item.mobile }}</span>
+                    </div>
+                    <div class="text2">{{ item.address }}{{ item.detailAddress }}</div>
+                </div>
+                <div class="btnList">
+                    <van-checkbox
+                        class="checkbox"
+                        readonly
+                        v-if="item.isDefault === '1'"
+                        :value="true"
+                        :checked-color="$colors.prim"
+                    >
+                        默认购车人
+                    </van-checkbox>
+                    <div class="checkbox" v-else></div>
+
+                    <van-button size="small" icon="edit" @click.stop="addressEdit(item.id)">编辑</van-button>
+                    <van-button size="small" icon="delete" @click.stop="del(item.id)">删除</van-button>
+                </div>
+            </div>
+        </div>
+
+        <div class="btn-wrapper">
+            <van-button class="bottomBtn" block :color="$colors.prim" @click="addressEdit(0)">
+                添加购车人（收货地址）
+            </van-button>
+        </div>
+        <van-dialog id="van-dialog" />
+    </div>
+</template>
+<script>
+import Dialog from '../vant/dialog/dialog';
+export default {
+    data() {
+        return {
+            addresses: [],
+            eventChannel: null,
+            pick: false
+        };
+    },
+    onShow() {
+        this.getList();
+        this.eventChannel = this.$mp.page.getOpenerEventChannel();
+        this.pick = this.$mp.query.pick === 'true';
+    },
+    methods: {
+        getList() {
+            this.$http.get('/applets/querycustomeraddress').then(res => {
+                this.addresses = res.data;
+            });
+        },
+        addressEdit(id) {
+            wx.navigateTo({
+                url: '/pages/addressEdit' + (id ? `?id=${id}` : '')
+            });
+        },
+        del(id) {
+            Dialog.confirm({
+                title: '您确认要删除这个地址?',
+                // message: '您确认要删除这个地址?',
+                className: 'custom-class-name',
+                cancelButtonText: '再想想'
+            })
+                .then(() => {
+                    this.$http
+                        .get('/applets/deletecustomeraddress', {
+                            addressId: id
+                        })
+                        .then(res => {
+                            if (res.data === 1) {
+                                this.getList();
+                                this.showToastError('删除成功', 'success');
+                            } else {
+                                this.showToastError('删除失败');
+                            }
+                        });
+                })
+                .catch(() => {});
+        },
+        pickAddress(item) {
+            if (this.pick && this.eventChannel && this.eventChannel.emit) {
+                this.eventChannel.emit('pickAddress', item);
+                wx.navigateBack();
+            }
+        }
+    }
+};
+</script>
+<style lang="less">
+.bottomBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .van-button {
+        border-radius: 0;
+        padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
+        height: calc(52px + env(safe-area-inset-bottom) / 2) !important;
+        font-size: 15px;
+    }
+}
+
+.address {
+    margin: 0 15px;
+    border: 1px solid #ececec;
+    border-radius: 5px;
+    box-shadow: 0 0 10px 2px #ececec;
+}
+
+.address-top {
+    padding: 18px 10px 22px;
+    .text1 {
+        span {
+            font-size: 15px;
+            font-weight: bold;
+            color: #343434;
+            line-height: 18px;
+        }
+        span + span {
+            margin-left: 15px;
+        }
+    }
+
+    .text2 {
+        font-size: 12px;
+        font-weight: bold;
+        color: #666666;
+        line-height: 18px;
+        margin-top: 16px;
+    }
+}
+
+.address-content {
+    padding: 15px 0;
+}
+
+.btnList {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    position: relative;
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0px;
+        right: 5px;
+        left: 5px;
+        height: 1px;
+        background-color: #dedede;
+    }
+
+    .checkbox {
+        flex-grow: 1;
+    }
+}
+.btnList {
+    .van-checkbox {
+        font-size: 12px;
+        line-height: 18px;
+        .van-checkbox__label {
+            color: #109a9a;
+            font-weight: bold;
+        }
+    }
+
+    .van-button {
+        border-width: 0px;
+    }
+}
+.bottomBtn {
+    .van-button {
+        height: 55px;
+        line-height: 55px;
+        font-size: 14px;
+    }
+}
+
+.dialog-index--custom-class-name {
+    .dialog-index--van-dialog__confirm {
+        color: @prim !important;
+    }
+}
+.bottomBtn {
+    button {
+        border-radius: 0;
+    }
+}
+</style>

src/pages/car.vue

@@ -13,10 +13,10 @@
         </van-sticky>
         <div class="model-list" v-if="tab === 'all'">
             <div class="model" v-for="item in carModels" :key="item.skuId">
-                <img :src="item.appImgurl" class="cover" mode="aspectFill" />
+                <img :src="item.appToImgurl" class="cover" mode="aspectFill" />
                 <div class="info">
                     <div class="name">{{ item.name }}</div>
-                    <div class="desc">{{ item.desc }}</div>
+                    <div class="desc">{{ item.checkDesc }}</div>
                     <div class="price-btn">
                         <div class="price">¥{{ item.price }}</div>
                         <div class="btn">立即下订</div>
@@ -143,7 +143,7 @@
                     <div class="price">¥{{ deposit }}</div>
                 </div>
             </div>
-            <div class="btn">生成配置单</div>
+            <div class="btn" @click="submit">生成配置单</div>
         </div>
     </div>
 </template>
@@ -151,7 +151,7 @@
 export default {
     data() {
         return {
-            tab: 'custom',
+            tab: 'all',
             carModels: [],
             colorList: [],
             currentColor: null,
@@ -161,7 +161,9 @@ export default {
             currentCaliper: null,
             optionalPackage: [],
             carPrice: 0,
-            deposit: 0
+            deposit: 0,
+            carId: null,
+            carDesc: ''
         };
     },
     computed: {
@@ -207,6 +209,8 @@ export default {
                 console.log(res);
             });
         this.$http.get('/applets/custom/querycarlistforpick').then(res => {
+            this.carId = res[0].id;
+            this.carDesc = res[0].carDesc;
             this.carPrice = res[0].price;
             this.deposit = res[0].deposit;
             this.colorList = res[0].carColorList;
@@ -267,6 +271,59 @@ export default {
                 });
                 this.$set(this.optionalPackage[i].carOptionalPackageList[j], 'selected', true);
             }
+        },
+        submit() {
+            let bookForm = {
+                carId: this.carId,
+                carDesc: this.carDesc,
+                image: this.currentColor.mobileUrl,
+                color: {
+                    id: this.currentColor.id,
+                    name: this.currentColor.name,
+                    material: this.currentColor.carColorMaterialList[0].name,
+                    price: this.currentColor.carColorMaterialList[0].price,
+                    materialId: this.currentColor.carColorMaterialList[0].id
+                },
+                seat: {
+                    id: this.currentSeat.id,
+                    name: this.currentSeat.name,
+                    price: this.currentSeat.price
+                },
+                upholstery: {
+                    id: this.currentUpholstery.id,
+                    name: this.currentUpholstery.name,
+                    price: this.currentUpholstery.price
+                },
+                wheelHub: {
+                    id: this.currentWheelHub.id,
+                    name: this.currentWheelHub.name,
+                    price: this.currentWheelHub.price
+                },
+                caliper: {
+                    id: this.currentCaliper.id,
+                    name: this.currentCaliper.name,
+                    price: this.currentCaliper.price
+                },
+                optionalPackage: this.optionalPackage
+                    .map(parent => {
+                        return parent.carOptionalPackageList
+                            .filter(i => i.selected)
+                            .map(i => {
+                                i.parentName = parent.name;
+                                return i;
+                            });
+                    })
+                    .reduce((a, b) => a.concat(b)),
+                totalPrice: this.totalPrice,
+                deposit: this.deposit
+            };
+            console.log(bookForm);
+            wx.navigateTo({
+                url: '/pages/coupe',
+                success: function(res) {
+                    res.eventChannel.emit('bookForm', bookForm);
+                }
+            });
         }
     }
 };

src/pages/coupe.vue

@@ -0,0 +1,843 @@
+<config>
+{
+    "navigationBarTitleText": "提交选配"
+}
+</config>
+<template>
+    <div class="container">
+        <div class="card" style="padding-bottom: 20px;">
+            <img :src="bookForm.image" mode="aspectFill" class="cover" />
+            <div class="title">恭喜您完成定制</div>
+            <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>
+            </div>
+            <div class="param">
+                <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>
+            </div>
+            <div class="param">
+                <div class="name">轮毂：{{ bookForm.wheelHub.name }}</div>
+                <div class="value">¥{{ bookForm.wheelHub.price }}</div>
+            </div>
+            <div class="param">
+                <div class="name">卡钳：{{ bookForm.caliper.name }}</div>
+                <div class="value">¥{{ bookForm.caliper.price }}</div>
+            </div>
+            <div class="param" v-for="(item, i) in bookForm.optionalPackage" :key="i">
+                <div class="name">{{ item.name }}</div>
+                <div class="value">¥{{ item.price }}</div>
+            </div>
+            <div class="sum" style="margin-top: 14px;">
+                <div class="name">总价</div>
+                <div class="value">¥{{ bookForm.totalPrice }}</div>
+            </div>
+            <div class="divider"></div>
+            <div class="sum" style="margin-top: 14px;">
+                <div class="name">订金</div>
+                <div class="value prim">¥{{ bookForm.deposit }}</div>
+            </div>
+        </div>
+        <div class="card" style="padding-bottom: 24px;">
+            <div class="title">填写个人信息</div>
+            <div class="field" style="margin-top: 28px;">
+                <div class="label">姓名</div>
+                <input v-model="name" class="input" placeholder-class="placeholder" placeholder="请输入姓名" />
+            </div>
+            <div class="field">
+                <div class="label">身份证号</div>
+                <input
+                    v-model="idCard"
+                    class="input"
+                    type="idcard"
+                    placeholder-class="placeholder"
+                    placeholder="请输入身份证号"
+                />
+            </div>
+            <div class="field">
+                <div class="label">手机号</div>
+                <input
+                    v-model="mobile"
+                    class="input"
+                    type="number"
+                    placeholder-class="placeholder"
+                    placeholder="请输入手机号"
+                />
+                <!-- <div class="input" v-if="mobile"></div>
+                <button class="input placeholder" v-else open-type="getPhoneNumber" @getphonenumber="getphonenumber">
+                    请输入手机号
+                </button> -->
+            </div>
+            <div class="field" @click="showCityPicker = true">
+                <div class="label">提车城市</div>
+                <div class="input" v-if="cityId">{{ cityName }}</div>
+                <div class="input placeholder" v-else>请选择城市</div>
+                <img src="../static/imgs/icon_arrow_right.png" class="arrow" />
+            </div>
+            <div class="field" @click="chooseDealer">
+                <div class="label">提车经销商</div>
+                <div class="input" v-if="dealerId">{{ dealerName }}</div>
+                <div class="input placeholder" v-else>请选经销商</div>
+                <img src="../static/imgs/icon_arrow_right.png" class="arrow" />
+            </div>
+        </div>
+        <div class="card">
+            <div class="title">选择支付方式</div>
+            <div class="btns">
+                <div class="btn" @click="type = 1" :class="{ active: type === 1 }">
+                    <img
+                        :src="
+                            type === 1
+                                ? require('../static/imgs/btn_icon_check.png')
+                                : require('../static/imgs/btn_icon_uncheck.png')
+                        "
+                    />
+                    <div>全款购车</div>
+                </div>
+                <div class="btn" style="margin-left: 18px;" @click="type = 2" :class="{ active: type === 2 }">
+                    <img
+                        :src="
+                            type === 2
+                                ? require('../static/imgs/btn_icon_check.png')
+                                : require('../static/imgs/btn_icon_uncheck.png')
+                        "
+                    />
+                    <div>贷款购车</div>
+                </div>
+            </div>
+            <div v-if="type === 1" style="height: 28px;"></div>
+            <div v-else>
+                <div class="slider-title">
+                    <div style="flex-grow: 1;">首付比例</div>
+                    <div>{{ percent }}%</div>
+                </div>
+                <div class="slider-wrapper">
+                    <img src="../static/imgs/minus.png" class="icon" @click="addPercent(-1)" />
+                    <div class="slider" id="slider">
+                        <div class="progress" :style="{ width: percent + '%' }"></div>
+                        <div
+                            class="dot"
+                            :style="{ left: percent + '%' }"
+                            @touchstart="touchstart"
+                            @touchmove.stop="touchmove"
+                            @touchend="touchend"
+                            @touchcancel="touchend"
+                        ></div>
+                    </div>
+                    <img src="../static/imgs/plus.png" class="icon" @click="addPercent(1)" />
+                </div>
+                <div class="tabs">
+                    <div class="tab" :class="{ active: tab === 0 }" @click="tab = 0">
+                        <div class="name">{{ loanOptions[0].month }}期</div>
+                        <div class="desc">利率{{ loanOptions[0].rate * 100 }}%</div>
+                    </div>
+                    <div class="tab" :class="{ active: tab === 1 }" @click="tab = 1">
+                        <div class="name">{{ loanOptions[1].month }}期</div>
+                        <div class="desc">利率{{ loanOptions[1].rate * 100 }}%</div>
+                    </div>
+                    <div class="tab" :class="{ active: tab === 2 }" @click="tab = 2">
+                        <div class="name">{{ loanOptions[2].month }}期</div>
+                        <div class="desc">利率{{ loanOptions[2].rate * 100 }}%</div>
+                    </div>
+                </div>
+                <div class="moneys">
+                    <div class="row">
+                        <div class="label">首付款</div>
+                        <div class="value">¥{{ num(downPayment) }}</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">贷款总额</div>
+                        <div class="value">¥{{ num(loan) }}</div>
+                    </div>
+                    <div class="row">
+                        <div class="label">月供金额</div>
+                        <div class="value">¥{{ num(monthly) }}</div>
+                    </div>
+                </div>
+                <div class="tip">此方案仅限参考，实际情况请咨询当地经销商</div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="agree" @click="agree = !agree">
+                <img :src="agree ? require('../static/imgs/check.png') : require('../static/imgs/uncheck.png')" />
+                <div>已阅读并同意</div>
+                <div class="prim" @click.stop="showAgree = true">《在线订车协议》</div>
+            </div>
+            <van-button class="btn" block :color="$colors.prim" @click="submit">立即下订</van-button>
+        </div>
+
+        <van-dialog
+            use-slot
+            title="预定协议"
+            :show="showAgree"
+            :confirm-button-color="$colors.prim"
+            confirm-button-text="关闭"
+            @close="showAgree = false"
+        >
+            <div class="agree-content">
+                <rich-text :nodes="agreeContent"></rich-text>
+            </div>
+        </van-dialog>
+
+        <van-action-sheet :show="showCityPicker">
+            <!-- eslint-disable -->
+            <van-picker
+                :columns="[
+                    { values: [], className: 'column1' },
+                    { values: [], className: 'column2' },
+                ]"
+                value-key="name"
+                show-toolbar
+                title="选择城市"
+                @cancel="showCityPicker = false"
+                @confirm="confirmCity"
+                @change="pickerChange"
+                id="cityPicker"
+            />
+            <!-- eslint-enable -->
+        </van-action-sheet>
+
+        <van-action-sheet :show="showDealerPicker">
+            <van-picker
+                :columns="dealerList"
+                value-key="name"
+                show-toolbar
+                title="选择经销商"
+                @cancel="showDealerPicker = false"
+                @confirm="confirmDealer"
+                id="dealerPicker"
+            />
+        </van-action-sheet>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            type: 1,
+            tab: 0,
+            loanOptions: [
+                {
+                    month: 12,
+                    rate: 0.0388
+                },
+                {
+                    month: 24,
+                    rate: 0.0488
+                },
+                {
+                    month: 36,
+                    rate: 0.0588
+                }
+            ],
+            percent: 30,
+            touch: false,
+            sliderRect: {
+                left: 0,
+                width: 0
+            },
+            agree: false,
+            agreeContent: require('../agree.js').default,
+            showAgree: false,
+            name: '',
+            mobile: '',
+            idCard: '',
+            provinceId: null,
+            provinceName: null,
+            cityId: null,
+            cityName: null,
+            showCityPicker: null,
+            picker: null,
+            dealerName: '',
+            dealerCode: '',
+            dealerId: null,
+            spNo: null,
+            dealerList: [],
+            showDealerPicker: false,
+            bookForm: {
+                carId: null,
+                carDesc: null,
+                image: '',
+                color: {
+                    id: null,
+                    name: null,
+                    material: null,
+                    price: null
+                },
+                seat: {
+                    id: null,
+                    name: null,
+                    price: null
+                },
+                upholstery: {
+                    id: null,
+                    name: null,
+                    price: null
+                },
+                wheelHub: {
+                    id: null,
+                    name: null,
+                    price: null
+                },
+                caliper: {
+                    id: null,
+                    name: null,
+                    price: null
+                },
+                optionalPackage: [],
+                totalPrice: 0,
+                deposit: 0
+            }
+        };
+    },
+    onShow() {
+        this.picker = this.$mp.page.selectComponent('#cityPicker');
+        this.$http
+            .get(
+                'https://dealer.jetour.com.cn/api-basic/api/region/findAllProvinces',
+                {},
+                {
+                    header: {
+                        Authorization: ''
+                    }
+                }
+            )
+            .then(res => {
+                this.picker.setColumnValues(0, res);
+                if (res[0]) {
+                    this.pickerChange({
+                        detail: {
+                            index: 0,
+                            value: [res[0]]
+                        }
+                    });
+                }
+            });
+        let eventChannel = this.$mp.page.getOpenerEventChannel();
+        if (eventChannel.on) {
+            eventChannel.on('bookForm', data => {
+                this.bookForm = data;
+            });
+        }
+    },
+    computed: {
+        downPayment() {
+            return ((this.bookForm.totalPrice || 0) * this.percent) / 100;
+        },
+        loan() {
+            return (this.bookForm.totalPrice || 0) - this.downPayment;
+        },
+        monthly() {
+            let monthly = 0;
+            switch (this.tab) {
+                case 0:
+                    monthly = (this.loan / 12) * 1.0388;
+                    break;
+                case 1:
+                    monthly = (this.loan / 24) * 1.0488;
+                    break;
+                case 2:
+                    monthly = (this.loan / 36) * 1.0588;
+                    break;
+            }
+            return Math.ceil(monthly);
+        }
+    },
+    methods: {
+        num(x) {
+            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        addPercent(d) {
+            this.percent = Math.min(Math.max(this.percent + d, 30), 100);
+        },
+        touchstart() {
+            const query = wx.createSelectorQuery();
+            query.select('#slider').boundingClientRect();
+            query.exec(res => {
+                console.log(res[0]);
+                this.sliderRect = res[0];
+                this.touch = true;
+            });
+        },
+        touchmove(e) {
+            let progress = parseInt(((e.touches[0].clientX - this.sliderRect.left) / this.sliderRect.width) * 100);
+            this.percent = Math.min(Math.max(progress, 30), 100);
+        },
+        touchend() {
+            this.touch = false;
+        },
+        confirmCity() {
+            this.provinceId = this.picker.getColumnValue(0).id;
+            this.provinceName = this.picker.getColumnValue(0).name;
+            this.cityId = this.picker.getColumnValue(1).id;
+            this.cityName = this.picker.getColumnValue(1).name;
+            this.showCityPicker = false;
+            this.dealerName = '';
+            this.dealerId = null;
+            this.getDealer();
+        },
+        pickerChange(e) {
+            if (e.detail.index === 0) {
+                this.$http
+                    .get(
+                        // eslint-disable-next-line prettier/prettier
+                        `https://dealer.jetour.com.cn/api-basic/api/region/findCityByProvinceId/${e.detail.value[0].id}`,
+                        {},
+                        {
+                            header: {
+                                Authorization: ''
+                            }
+                        }
+                    )
+                    .then(res => {
+                        this.picker.setColumnValues(1, res);
+                    });
+            }
+        },
+        getDealer() {
+            this.$http
+                .post(
+                    'https://dealer.jetour.com.cn/api-dealer/dealer-info/searchDealerListByCondition',
+                    {
+                        brandId: '0cbe50af-c29a-4eb0-91cc-4a05c5f05c57',
+                        provinceId: this.provinceId,
+                        cityId: this.cityId,
+                        enabledFlag: 1,
+                        type: 1
+                    },
+                    {
+                        header: {
+                            Authorization: '',
+                            'Content-Type': 'application/json'
+                        }
+                    }
+                )
+                .then(res => {
+                    res.data = res.data.filter(
+                        i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
+                    );
+                    this.dealerList = res.data;
+                });
+        },
+        chooseDealer() {
+            if (!this.cityId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请先选择城市'
+                });
+                return;
+            }
+            this.showDealerPicker = true;
+        },
+        confirmDealer() {
+            let value = this.$mp.page.selectComponent('#dealerPicker').getColumnValue(0);
+            this.dealerName = value.name;
+            this.dealerId = value.id;
+            this.dealerCode = value.code;
+            this.spNo = value.spNo;
+            this.showDealerPicker = false;
+        },
+        getphonenumber(e) {
+            console.log(e);
+        },
+        submit() {
+            if (!this.name) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请输入姓名'
+                });
+                return;
+            }
+            if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请输入正确的手机号'
+                });
+                return;
+            }
+            if (
+                !/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/.test(
+                    this.idCard
+                )
+            ) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请输入正确的身份证号'
+                });
+                return;
+            }
+            if (!this.cityId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请选择城市'
+                });
+                return;
+            }
+            if (!this.dealerId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请选择经销商'
+                });
+                return;
+            }
+            if (!this.agree) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请阅读并同意《在线订车协议》'
+                });
+                return;
+            }
+            let data = {
+                carId: this.bookForm.carId,
+                carSeatId: this.bookForm.seat.id,
+                carColorId: this.bookForm.color.id,
+                carColorMaterialId: this.bookForm.color.materialId,
+                carUpholsteryId: this.bookForm.upholstery.id,
+                carWheelHubId: this.bookForm.wheelHub.id,
+                carCaliperId: this.bookForm.caliper.id,
+                carPackageIdList: this.bookForm.optionalPackage.map(i => i.id)
+            };
+            this.$http
+                .post('/applets/checkValidMaterielCode', data, {
+                    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();
+                    } 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'
+                            }
+                        }
+                    );
+                });
+        }
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: @bg;
+}
+.card {
+    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
+    border-radius: 5px;
+    margin: 15px 15px 0 15px;
+    overflow: hidden;
+    background: white;
+}
+.cover {
+    width: 100%;
+    height: calc(464 / 800 * (100vw - 30px));
+}
+.title {
+    margin: 30px 15px 0 15px;
+    text-align: center;
+    font-size: 21px;
+    color: @text1;
+}
+.sub-title {
+    margin: 16px 15px 0 15px;
+    font-size: 14px;
+    color: @text2;
+    text-align: center;
+}
+.divider {
+    margin: 14px 10px 0 10px;
+    height: 1px;
+    background: #ebebeb;
+}
+.small-title {
+    margin-top: 15px;
+    color: @text3;
+    font-size: 12px;
+    text-align: center;
+}
+.param {
+    font-size: 14px;
+    height: 33px;
+    .flex();
+    padding: 0 30px 0 20px;
+    .name {
+        color: @text1;
+        flex-grow: 1;
+    }
+    .value {
+        color: @text2;
+    }
+}
+.sum {
+    color: @text1;
+    .flex();
+    padding: 0 30px 0 20px;
+    .name {
+        font-size: 18px;
+        flex-grow: 1;
+    }
+    .value {
+        font-size: 21px;
+    }
+    .prim {
+        color: @prim;
+    }
+}
+.field {
+    margin: 5px 20px 0 20px;
+    .flex();
+    height: 39px;
+    background: #fdfcfc;
+    border: 1px solid #dde6ef;
+    border-radius: 2px;
+    padding: 0 14px 0 16px;
+    .label {
+        color: @text1;
+        font-size: 14px;
+    }
+    .input {
+        margin: 0;
+        margin-left: 14px;
+        flex-basis: 0;
+        flex-grow: 1;
+        font-size: 16px;
+        color: @text2;
+        text-align: right;
+        border: none;
+        padding: 0;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+        background: none;
+        .ellipsis();
+        &::after {
+            display: none;
+        }
+        &.placeholder {
+            color: @text3;
+            font-size: 14px;
+        }
+    }
+    .arrow {
+        width: 7px;
+        height: 13px;
+        margin-left: 12px;
+    }
+}
+.placeholder {
+    color: @text3;
+    font-size: 14px;
+}
+.btns {
+    .flex();
+    justify-content: center;
+    margin-top: 28px;
+    .btn {
+        width: 100px;
+        height: 30px;
+        border-radius: 50px;
+        border: 1px solid #959595;
+        color: #959595;
+        .flex();
+        justify-content: center;
+        font-size: 12px;
+        box-sizing: border-box;
+        line-height: 1;
+        img {
+            width: 14px;
+            height: 14px;
+            margin-right: 6px;
+        }
+        &.active {
+            background: @prim;
+            border: none;
+            color: white;
+        }
+    }
+}
+.tabs {
+    margin-top: 23px;
+    margin-left: 20px;
+    margin-right: 20px;
+    .flex();
+    justify-content: space-around;
+    border-bottom: 1px solid #dde5ef;
+    .tab {
+        width: 60px;
+        .flex-col();
+        justify-content: center;
+        color: @text2;
+        line-height: 1;
+        padding-bottom: 12px;
+        position: relative;
+        .name {
+            font-size: 15px;
+            text-align: center;
+        }
+        .desc {
+            font-size: 11px;
+            margin-top: 6px;
+            text-align: center;
+        }
+        &.active {
+            color: @prim;
+            &::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: -1px;
+                right: 0;
+                height: 2px;
+                width: 32px;
+                background: @prim;
+                margin: auto;
+            }
+        }
+    }
+}
+.moneys {
+    .flex-col();
+    justify-content: space-between;
+    margin: 28px 64px 0 64px;
+    height: 86px;
+    .row {
+        .flex();
+        .label {
+            font-size: 13px;
+            color: @text1;
+            flex-grow: 1;
+        }
+        .value {
+            font-size: 16px;
+            color: @text1;
+        }
+    }
+}
+.tip {
+    color: @text3;
+    font-size: 12px;
+    padding: 24px 0 21px 0;
+    text-align: center;
+}
+.slider-title {
+    margin: 19px 20px 0 20px;
+    font-size: 12px;
+    color: @text2;
+    .flex();
+}
+.slider-wrapper {
+    .flex();
+    margin: 11px 25px 0 25px;
+    .icon {
+        width: 15px;
+        height: 15px;
+    }
+    .slider {
+        flex-grow: 1;
+        margin: 0;
+        background: fade(@prim, 10%);
+        height: 8px;
+        font-size: 0;
+        position: relative;
+        .progress {
+            background: fade(@prim, 80%);
+            height: 8px;
+        }
+        .dot {
+            width: 15px;
+            height: 15px;
+            background: @prim;
+            border-radius: 50%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            margin: auto;
+            transform: translateX(-50%);
+        }
+    }
+}
+.bottom {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: white;
+    .agree {
+        .flex();
+        color: @text2;
+        font-size: 12px;
+        padding: 0 20px;
+        height: 35px;
+        img {
+            width: 20px;
+            height: 20px;
+            margin-right: 6px;
+        }
+    }
+    .btn {
+        .van-button {
+            border-radius: 0;
+            padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
+            height: calc(52px + env(safe-area-inset-bottom) / 2) !important;
+            font-size: 15px;
+        }
+    }
+}
+.container {
+    padding-bottom: 100px;
+    padding-bottom: calc(100px + env(safe-area-inset-bottom));
+}
+.agree-content {
+    height: 60vh;
+    padding: 20px;
+    overflow: auto;
+    font-size: 14px;
+}
+</style>

src/pages/dealer.vue

@@ -252,6 +252,9 @@ export default {
                     }
                 )
                 .then(res => {
+                    res.data = res.data.filter(
+                        i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
+                    );
                     if (this.location) {
                         res.data.forEach(i => {
                             if (i.warpLatitude) {

src/pages/detail.vue

@@ -31,59 +31,410 @@
                     <img src="../static/imgs/icon_into.png" class="into" />
                 </div>
                 <div class="desc-item" v-for="(detailItem, i) in item.descDetailList" :key="i">
-                    <div class="tag" v-if="detailItem.tip">{{ detailItem.tip }}</div>
+                    <div class="tag" v-if="detailItem.tip">
+                        {{ detailItem.tip }}
+                    </div>
                     <div class="content">{{ detailItem.content }}</div>
                 </div>
                 <div class="divider" v-if="index < ((info.sku || {}).descInformationList || []).length - 1"></div>
             </div>
         </div>
+        <div class="form-block">
+            <div class="item">
+                <div class="label">适用车型：</div>
+                <div class="value">全部车型</div>
+                <img src="../static/imgs/icon_into.png" class="into" />
+            </div>
+            <div class="item">
+                <div class="label">选择颜色：</div>
+                <div class="value">到店为准</div>
+                <img src="../static/imgs/icon_into.png" class="into" />
+            </div>
+            <div class="item" @click="showCityPicker = true">
+                <div class="label">选择城市：</div>
+                <div class="value" v-if="cityId">{{ cityName }}</div>
+                <div class="value placeholder" v-else>请选择</div>
+                <img src="../static/imgs/icon_into.png" class="into" />
+            </div>
+            <div class="item noborder" @click="chooseDealer">
+                <div class="label">线下提车：</div>
+                <div class="value" v-if="dealerId">{{ dealerName }}</div>
+                <div class="value placeholder" v-else>请选择</div>
+                <img src="../static/imgs/icon_into.png" class="into" />
+            </div>
+        </div>
         <div class="tabs flex">
-            <div class="tab f15 text2 flex center" :class="{ active: tab === 0 }" @click="tab = 0">商品详情</div>
-            <div class="tab f15 text2 flex center" :class="{ active: tab === 1 }" @click="tab = 1">参数配置</div>
-            <div class="tab f15 text2 flex center" @click="calculator">贷款计算器</div>
+            <div class="tab f15 text2 flex center" :class="{ active: tab === 0 }" @click="tab = 0">
+                商品详情
+            </div>
+            <div class="tab f15 text2 flex center" :class="{ active: tab === 1 }" @click="(tab = 1), scroll()">
+                参数配置
+            </div>
+            <div class="tab f15 text2 flex center" @click="calculator">
+                贷款计算器
+            </div>
         </div>
-        <div class="detail-wrapper" style="padding-bottom: calc(env(safe-area-inset-bottom) + 44px);">
+        <div class="detail-wrapper" style="font-size: 0; padding-bottom: calc(env(safe-area-inset-bottom) + 44px)">
             <rich-text :nodes="info.mobileDesc || ''" v-if="tab === 0"></rich-text>
-            <rich-text :nodes="info.mobileConfig || ''" v-if="tab === 1"></rich-text>
+            <div v-if="tab === 1" class="specs-container">
+                <div class="specs-card" v-if="config">
+                    <div class="title">{{ info.name.split(' ')[0] }}</div>
+                    <div class="dropdown f12 text1" @click="showModelPicker = true">
+                        <div style="flex-grow: 1">{{ config.name }}</div>
+                        <img src="../static/imgs/icon_dropdown.png" />
+                    </div>
+                    <div class="tip f11">
+                        <div class="item"><span class="sym">●</span>标配</div>
+                        <div class="item"><span class="sym">○</span>选配</div>
+                        <div class="item"><span class="sym">–</span>无</div>
+                    </div>
+                    <div class="row">
+                        <div class="col1">官方指导价</div>
+                        <div class="col2 prim b f12">¥{{ numberWithCommas(config.officialQuotes) }}起</div>
+                    </div>
+                    <div class="spec-group" v-for="(item, i) in specs" :key="i">
+                        <div class="head" @click="item.show = !item.show">
+                            <img
+                                :src="
+                                    item.show ? require('../static/imgs/minus.png') : require('../static/imgs/plus.png')
+                                "
+                                class="icon"
+                            />
+                            <div>{{ item.name }}</div>
+                        </div>
+                        <div v-if="item.show">
+                            <div class="row" v-for="(child, j) in item.children" :key="j">
+                                <div class="col1">{{ child.name }}</div>
+                                <div class="col2">{{ child.value }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="f11 text1" style="margin: 15px 0 0 35px">
+                    备注：详情可咨询当地经销商
+                </div>
+            </div>
         </div>
         <van-button :color="$colors.prim" block class="btn-order" @click="submit">立即下订</van-button>
+        <van-action-sheet :show="showModelPicker">
+            <van-picker
+                :columns="models"
+                show-toolbar
+                title="选择车型"
+                value-key="name"
+                @cancel="showModelPicker = false"
+                @confirm="confirmModel"
+                id="modelPicker"
+            ></van-picker>
+        </van-action-sheet>
+
+        <van-action-sheet :show="showCityPicker">
+            <!-- eslint-disable -->
+            <van-picker
+                :columns="[
+                    { values: [], className: 'column1' },
+                    { values: [], className: 'column2' }
+                ]"
+                value-key="name"
+                show-toolbar
+                title="选择城市"
+                @cancel="showCityPicker = false"
+                @confirm="confirmCity"
+                @change="pickerChange"
+                id="cityPicker"
+            />
+            <!-- eslint-enable -->
+        </van-action-sheet>
+
+        <van-action-sheet :show="showDealerPicker">
+            <van-picker
+                :columns="dealerList"
+                value-key="name"
+                show-toolbar
+                title="选择经销商"
+                @cancel="showDealerPicker = false"
+                @confirm="confirmDealer"
+                id="dealerPicker"
+            />
+        </van-action-sheet>
     </div>
 </template>
 <script>
+import qs from 'qs';
+var QQMapWX = require('../qqmap-wx-jssdk.js');
+let qqmapsdk;
 export default {
     data() {
         return {
             info: {},
-            tab: 0
+            tab: 0,
+            showModelPicker: false,
+            models: [],
+            config: null,
+            specs: [],
+            provinceName: null,
+            provinceId: null,
+            cityName: null,
+            cityId: null,
+            showCityPicker: null,
+            picker: null,
+            dealerName: '',
+            dealerId: null,
+            dealerList: [],
+            showDealerPicker: false
         };
     },
     created() {
+        qqmapsdk = new QQMapWX({
+            key: 'MC4BZ-4QDWP-B5ZDD-VS3HX-NHBAO-CRBOQ'
+        });
+        this.locate();
         this.$http
             .get('/applets/queryspudetail', {
                 skuId: this.$mp.query.id
             })
             .then(res => {
-                console.log(res.data);
                 if (res.data.mobileDesc) {
                     res.data.mobileDesc = res.data.mobileDesc.replace(/<img/g, '<img class="rich-text-img"');
                 }
                 if (res.data.mobileConfig) {
                     res.data.mobileConfig = res.data.mobileConfig.replace(/<img/g, '<img class="rich-text-img"');
                 }
-                console.log(res.data.mobileConfig);
                 this.info = res.data;
+                this.$http
+                    .get(
+                        // eslint-disable-next-line prettier/prettier
+                        `https://dealer.jetour.com.cn/api-basic/api/carmodel/front/findCarModelBySeriesId/${res.data.categories[0].carSystem}`,
+                        {},
+                        {
+                            header: {
+                                Authorization: ''
+                            }
+                        }
+                    )
+                    .then(res => {
+                        this.models = res;
+                        this.getConfig(res[0].id);
+                    });
+                this.$http
+                    .get(
+                        // eslint-disable-next-line prettier/prettier
+                        `https://dealer.jetour.com.cn/api-dealer/dealer-info/getProvinceBySeriesId/0cbe50af-c29a-4eb0-91cc-4a05c5f05c57/${res.data.categories[0].carSystem}`,
+                        {},
+                        { header: { Authorization: '' } }
+                    )
+                    .then(res => {
+                        this.picker.setColumnValues(
+                            0, //
+                            res.data.sort((a, b) => a.id - b.id)
+                        );
+                        if (res.data[0]) {
+                            this.pickerChange({
+                                detail: {
+                                    index: 0,
+                                    value: [res.data[0]]
+                                }
+                            });
+                        }
+                    });
             });
     },
+    onShow() {
+        this.picker = this.$mp.page.selectComponent('#cityPicker');
+    },
     methods: {
+        locate() {
+            let province, city, provinceId, cityId;
+            this.$http
+                .get('https://apis.map.qq.com/ws/location/v1/ip', {
+                    key: 'MC4BZ-4QDWP-B5ZDD-VS3HX-NHBAO-CRBOQ'
+                })
+                .then(res => {
+                    console.log(res);
+                    this.location = res.result.location;
+                    province = res.result.ad_info.province;
+                    city = res.result.ad_info.city;
+                    return this.$http.get(
+                        'https://dealer.jetour.com.cn/api-basic/api/region/findAllProvinces',
+                        {},
+                        {
+                            header: {
+                                Authorization: ''
+                            }
+                        }
+                    );
+                })
+                .then(res => {
+                    provinceId = (res.find(i => i.name === province) || {}).id;
+                    if (provinceId) {
+                        return this.$http.get(
+                            `https://dealer.jetour.com.cn/api-basic/api/region/findCityByProvinceId/${provinceId}`,
+                            {},
+                            {
+                                header: {
+                                    Authorization: ''
+                                }
+                            }
+                        );
+                    } else {
+                        return Promise.reject('找不到省份');
+                    }
+                })
+                .then(res => {
+                    cityId = (res.find(i => i.name === city) || {}).id;
+                    if (cityId) {
+                        return Promise.resolve();
+                    } else {
+                        return Promise.reject('找不到城市');
+                    }
+                })
+                .then(() => {
+                    console.log(provinceId, cityId);
+                    this.provinceName = province;
+                    this.cityName = city;
+                    this.provinceId = provinceId;
+                    this.cityId = cityId;
+                    this.getDealer();
+                })
+                .catch(e => {
+                    console.log(e);
+                });
+        },
         calculator() {
             wx.navigateTo({
                 url: '/pages/calculator'
             });
         },
         submit() {
+            if (!this.cityId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请选择城市'
+                });
+                return;
+            }
+            if (!this.dealerId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请选择经销商'
+                });
+                return;
+            }
             wx.navigateTo({
-                url: '/pages/submit'
+                url:
+                    '/pages/submit?' +
+                    qs.stringify({
+                        skuId: this.info.id,
+                        provinceId: this.provinceId,
+                        cityId: this.cityId,
+                        dealerId: this.dealerId,
+                        name: this.info.name,
+                        image: this.info.images[0]
+                    })
+            });
+        },
+        scroll() {
+            const query = wx.createSelectorQuery();
+            query.select('.tabs').boundingClientRect();
+            query.selectViewport().scrollOffset();
+            query.exec(function(res) {
+                console.log(res);
+                wx.pageScrollTo({
+                    scrollTop: res[0].top + res[1].scrollTop,
+                    duration: 250
+                });
             });
+        },
+        confirmModel(e) {
+            let value = this.$mp.page.selectComponent('#modelPicker').getColumnValue(0);
+            this.getConfig(value.id);
+            this.showModelPicker = false;
+        },
+        getConfig(id) {
+            this.$http
+                .get(
+                    `https://dealer.jetour.com.cn/api-basic/api/carmodel/front/${id}`,
+                    {},
+                    { header: { Authorization: '' } }
+                )
+                .then(res => {
+                    this.specs = JSON.parse(res.config).map((i, index) => {
+                        i.name = i.name.replace('■', '');
+                        i.show = index === 0;
+                        return i;
+                    });
+                    console.log('config::', this.specs);
+                    this.config = res;
+                });
+        },
+        numberWithCommas(x) {
+            return x.toLocaleString('en');
+        },
+        confirmCity() {
+            this.provinceId = this.picker.getColumnValue(0).id;
+            this.provinceName = this.picker.getColumnValue(0).name;
+            this.cityId = this.picker.getColumnValue(1).id;
+            this.cityName = this.picker.getColumnValue(1).name;
+            this.showCityPicker = false;
+            this.dealerName = '';
+            this.dealerId = null;
+            this.getDealer();
+        },
+        pickerChange(e) {
+            if (e.detail.index === 0) {
+                this.$http
+                    .get(
+                        // eslint-disable-next-line prettier/prettier
+                        `https://dealer.jetour.com.cn/api-dealer/dealer-info/getCityBySeriesIdAndProvinceId/0cbe50af-c29a-4eb0-91cc-4a05c5f05c57/${this.info.categories[0].carSystem}/${e.detail.value[0].id}`
+                    )
+                    .then(res => {
+                        this.picker.setColumnValues(
+                            1, //
+                            res.data.sort((a, b) => a.id - b.id)
+                        );
+                    });
+            }
+        },
+        getDealer() {
+            this.$http
+                .post(
+                    'https://dealer.jetour.com.cn/api-dealer/dealer-info/searchDealerListByCondition',
+                    {
+                        brandId: '0cbe50af-c29a-4eb0-91cc-4a05c5f05c57',
+                        provinceId: this.provinceId,
+                        cityId: this.cityId,
+                        enabledFlag: 1,
+                        type: 1
+                    },
+                    {
+                        header: {
+                            Authorization: '',
+                            'Content-Type': 'application/json'
+                        }
+                    }
+                )
+                .then(res => {
+                    res.data = res.data.filter(
+                        i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
+                    );
+                    this.dealerList = res.data;
+                });
+        },
+        chooseDealer() {
+            if (!this.cityId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请先选择城市'
+                });
+                return;
+            }
+            this.showDealerPicker = true;
+        },
+        confirmDealer() {
+            let value = this.$mp.page.selectComponent('#dealerPicker').getColumnValue(0);
+            this.dealerName = value.name;
+            this.dealerId = value.id;
+            this.showDealerPicker = false;
         }
     }
 };
@@ -183,6 +534,36 @@ page {
         margin-bottom: 6px;
     }
 }
+.form-block {
+    background: white;
+    padding: 0 25px;
+    margin-top: 10px;
+    .item {
+        .flex();
+        font-size: 15px;
+        border-bottom: 1px solid #dedede;
+        height: 45px;
+        .label {
+            width: 80px;
+            color: @text3;
+        }
+        .value {
+            flex-grow: 1;
+            color: @text1;
+            .ellipsis();
+        }
+        .placeholder {
+            color: @text3;
+        }
+        .into {
+            width: 24px;
+            height: 24px;
+        }
+        &.noborder {
+            border: none;
+        }
+    }
+}
 .tabs {
     align-items: flex-start;
     background: white;
@@ -215,9 +596,98 @@ rich-text {
     bottom: 0;
     left: 0;
     right: 0;
-    bottom: env(safe-area-inset-bottom);
     .van-button {
         border-radius: 0;
+        padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
+        height: calc(52px + env(safe-area-inset-bottom) / 2) !important;
+        font-size: 15px;
+    }
+}
+.specs-container {
+    padding: 16px;
+    background: @bg;
+    .specs-card {
+        background: #ffffff;
+        border: 1px solid #ececec;
+        box-shadow: 0px 1px 6px 0 rgba(0, 0, 0, 0.08);
+        border-radius: 6px;
+        .title {
+            padding: 34px 0 30px 0;
+            text-align: center;
+            border-bottom: 1px solid @border5;
+            font-size: 21px;
+            color: @text1;
+        }
+        .dropdown {
+            .flex();
+            height: 34px;
+            border-bottom: 1px solid @border5;
+            padding: 0 11px 0 22px;
+            font-weight: bold;
+            img {
+                width: 15px;
+                height: 15px;
+            }
+        }
+        .tip {
+            .flex();
+            height: 34px;
+            border-bottom: 1px solid @border5;
+            padding: 0 11px 0 22px;
+            font-weight: bold;
+            color: @text2;
+            .item {
+                margin-right: 20px;
+                .sym {
+                    margin-right: 5px;
+                }
+            }
+        }
+        .row {
+            .flex();
+            font-size: 11px;
+            border-bottom: 1px solid @border5;
+            align-items: stretch;
+            .col1,
+            .col2 {
+                flex-basis: 0;
+                flex-grow: 1;
+                .flex();
+                padding: 11px 10px;
+            }
+            .col1 {
+                justify-content: start;
+                padding-left: 22px;
+                border-right: 1px solid @border5;
+                color: @text1;
+            }
+            .col2 {
+                justify-content: center;
+                color: @text1;
+                padding: 11px 10px;
+            }
+            .prim {
+                color: @prim;
+            }
+            &.noborder {
+                border: none;
+            }
+        }
+        .head {
+            height: 34px;
+            .flex();
+            font-size: 11px;
+            border-bottom: 1px solid @border5;
+            padding-left: 23px;
+            font-size: 15px;
+            color: @text1;
+            background: #ececec;
+            .icon {
+                width: 15px;
+                height: 15px;
+                margin-right: 11px;
+            }
+        }
     }
 }
 </style>

src/pages/home.vue

@@ -81,8 +81,7 @@
                             </div>
                             <div class="col2">
                                 <div class="price">
-                                    指导价：<span style="font-size: 14px;">{{ item.price }}</span
-                                    >万起
+                                    指导价：<span style="font-size: 14px;">{{ item.monthDesc.split(' ')[0] }}</span>
                                 </div>
                                 <div class="btn" @click="detail(item)">{{ item.button }}</div>
                             </div>

src/pages/order/backMoney.vue

@@ -1,119 +1,119 @@
-<config>
-{
-'navigationBarTitleText': '退订金申请',
-"disableScroll": true,
-}
-</config>
-<template>
-    <div>
-        <div class="tips">
-            退订金的原因
-        </div>
-        <van-radio-group :value="result" @change="result = $event.detail">
-            <van-cell-group>
-                <van-cell title="72小时内无理由退订" clickable data-name="1" @click="choose">
-                    <van-radio slot="right-icon" name="1" :checked-color="$colors.prim" />
-                </van-cell>
-                <van-cell title="订单信息有误" clickable data-name="2" @click="choose">
-                    <van-radio slot="right-icon" name="2" :checked-color="$colors.prim" />
-                </van-cell>
-                <van-cell title="贷款审核不通过" clickable data-name="3" @click="choose">
-                    <van-radio slot="right-icon" name="3" :checked-color="$colors.prim" />
-                </van-cell>
-                <van-cell title="其他" clickable data-name="4" @click="choose" :border="false">
-                    <van-radio slot="right-icon" name="4" :checked-color="$colors.prim" />
-                </van-cell>
-            </van-cell-group>
-        </van-radio-group>
-
-        <div class="btnList">
-            <van-button @click="cancel" square block :color="$colors.prim">取消订单</van-button>
-        </div>
-        <van-dialog id="van-dialog" />
-    </div>
-</template>
-<script>
-import Dialog from '../../vant/dialog/dialog';
-export default {
-    data() {
-        return {
-            result: ''
-        };
-    },
-    onShow() {},
-    methods: {
-        choose(event) {
-            const { name } = event.currentTarget.dataset;
-            this.result = name;
-        },
-        cancel() {
-            if (!this.result) {
-                this.showToastError('请选择取消原因');
-                return;
-            }
-            Dialog.alert({
-                title: '退订金申请即将提交',
-                showCancelButton: true,
-                className: 'custom-class-name'
-            })
-                .then(() => {
-                    this.$http
-                        .post(
-                            '/applets/backorder/addbackdepositorder',
-                            {
-                                orderId: this.$mp.query.orderId,
-                                reason: this.result
-                            },
-                            {
-                                header: {
-                                    'content-type': 'application/json'
-                                }
-                            }
-                        )
-                        .then(res => {
-                            if (res.data === 1) {
-                                Dialog.alert({
-                                    title: '退订金申请已提交',
-                                    message: '系统正在审核',
-                                    className: 'custom-class-name'
-                                }).then(() => {
-                                    this.navigateBack(500);
-                                });
-                            } else {
-                                this.showToastError(res.message);
-                            }
-                        });
-                })
-                .catch(() => {});
-        }
-    }
-};
-</script>
-<style lang="less">
-page {
-    background: @bg2;
-}
-
-.tips {
-    font-size: 15px;
-    color: #6e6e76;
-    line-height: 12px;
-    padding: 40px 17px 10px;
-}
-.btnList {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .van-button {
-        height: 55px;
-    }
-}
-
-.dialog-index--custom-class-name {
-    .dialog-index--van-dialog__confirm {
-        color: @prim !important;
-    }
-}
-</style>
+<config>
+{
+'navigationBarTitleText': '退订金申请',
+"disableScroll": true,
+}
+</config>
+<template>
+    <div>
+        <div class="tips">
+            退订金的原因
+        </div>
+        <van-radio-group :value="result" @change="result = $event.detail">
+            <van-cell-group>
+                <van-cell title="72小时内无理由退订" clickable data-name="1" @click="choose">
+                    <van-radio slot="right-icon" name="1" :checked-color="$colors.prim" />
+                </van-cell>
+                <van-cell title="订单信息有误" clickable data-name="2" @click="choose">
+                    <van-radio slot="right-icon" name="2" :checked-color="$colors.prim" />
+                </van-cell>
+                <van-cell title="贷款审核不通过" clickable data-name="3" @click="choose">
+                    <van-radio slot="right-icon" name="3" :checked-color="$colors.prim" />
+                </van-cell>
+                <van-cell title="其他" clickable data-name="4" @click="choose" :border="false">
+                    <van-radio slot="right-icon" name="4" :checked-color="$colors.prim" />
+                </van-cell>
+            </van-cell-group>
+        </van-radio-group>
+
+        <div class="btnList">
+            <van-button @click="cancel" square block :color="$colors.prim">取消订单</van-button>
+        </div>
+        <van-dialog id="van-dialog" />
+    </div>
+</template>
+<script>
+import Dialog from '../../vant/dialog/dialog';
+export default {
+    data() {
+        return {
+            result: ''
+        };
+    },
+    onShow() {},
+    methods: {
+        choose(event) {
+            const { name } = event.currentTarget.dataset;
+            this.result = name;
+        },
+        cancel() {
+            if (!this.result) {
+                this.showToastError('请选择取消原因');
+                return;
+            }
+            Dialog.alert({
+                title: '退订金申请即将提交',
+                showCancelButton: true,
+                className: 'custom-class-name'
+            })
+                .then(() => {
+                    this.$http
+                        .post(
+                            '/applets/backorder/addbackdepositorder',
+                            {
+                                orderId: this.$mp.query.orderId,
+                                reason: this.result
+                            },
+                            {
+                                header: {
+                                    'content-type': 'application/json'
+                                }
+                            }
+                        )
+                        .then(res => {
+                            if (res.data === 1) {
+                                Dialog.alert({
+                                    title: '退订金申请已提交',
+                                    message: '系统正在审核',
+                                    className: 'custom-class-name'
+                                }).then(() => {
+                                    this.navigateBack(500);
+                                });
+                            } else {
+                                this.showToastError(res.message);
+                            }
+                        });
+                })
+                .catch(() => {});
+        }
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: @bg2;
+}
+
+.tips {
+    font-size: 15px;
+    color: #6e6e76;
+    line-height: 12px;
+    padding: 40px 17px 10px;
+}
+.btnList {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .van-button {
+        height: 55px;
+    }
+}
+
+.dialog-index--custom-class-name {
+    .dialog-index--van-dialog__confirm {
+        color: @prim !important;
+    }
+}
+</style>

src/pages/order/cancelOrder.vue

@@ -1,86 +1,86 @@
-<config>
-{
-'navigationBarTitleText': '取消订单',
-"disableScroll": true,
-}
-</config>
-<template>
-    <div>
-        <div class="tips">
-            取消订单的原因
-        </div>
-        <van-radio-group :value="result" @change="result = $event.detail">
-            <van-cell-group>
-                <van-cell title="不想买了" clickable data-name="1" @click="choose">
-                    <van-radio slot="right-icon" name="1" :checked-color="$colors.prim" />
-                </van-cell>
-                <van-cell title="车辆配置内容错误" clickable data-name="2" @click="choose">
-                    <van-radio slot="right-icon" name="2" :checked-color="$colors.prim" />
-                </van-cell>
-                <van-cell title="地址信息填写错误" clickable data-name="3" @click="choose">
-                    <van-radio slot="right-icon" name="3" :checked-color="$colors.prim" />
-                </van-cell>
-                <van-cell title="其他" clickable data-name="4" @click="choose" :border="false">
-                    <van-radio slot="right-icon" name="4" :checked-color="$colors.prim" />
-                </van-cell>
-            </van-cell-group>
-        </van-radio-group>
-
-        <div class="btnList">
-            <van-button @click="cancel" square block :color="$colors.prim">取消订单</van-button>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            result: ''
-        };
-    },
-    onShow() {},
-    methods: {
-        choose(event) {
-            const { name } = event.currentTarget.dataset;
-            this.result = name;
-        },
-        cancel() {
-            if (!this.result) {
-                this.showToastError('请选择取消原因');
-                return;
-            }
-            this.$http
-                .get('/applets/carorder/cancelcarorder', {
-                    carOrderId: this.$mp.query.orderId,
-                    cancelReason: this.result
-                })
-                .then(res => {
-                    this.showToastError('订单已取消', 'success');
-                    this.navigateBack(500);
-                });
-        }
-    }
-};
-</script>
-<style lang="less">
-page {
-    background: @bg2;
-}
-
-.tips {
-    font-size: 15px;
-    color: #6e6e76;
-    line-height: 12px;
-    padding: 40px 17px 10px;
-}
-.btnList {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    .van-button {
-        height: 55px;
-    }
-}
-</style>
+<config>
+{
+'navigationBarTitleText': '取消订单',
+"disableScroll": true,
+}
+</config>
+<template>
+    <div>
+        <div class="tips">
+            取消订单的原因
+        </div>
+        <van-radio-group :value="result" @change="result = $event.detail">
+            <van-cell-group>
+                <van-cell title="不想买了" clickable data-name="1" @click="choose">
+                    <van-radio slot="right-icon" name="1" :checked-color="$colors.prim" />
+                </van-cell>
+                <van-cell title="车辆配置内容错误" clickable data-name="2" @click="choose">
+                    <van-radio slot="right-icon" name="2" :checked-color="$colors.prim" />
+                </van-cell>
+                <van-cell title="地址信息填写错误" clickable data-name="3" @click="choose">
+                    <van-radio slot="right-icon" name="3" :checked-color="$colors.prim" />
+                </van-cell>
+                <van-cell title="其他" clickable data-name="4" @click="choose" :border="false">
+                    <van-radio slot="right-icon" name="4" :checked-color="$colors.prim" />
+                </van-cell>
+            </van-cell-group>
+        </van-radio-group>
+
+        <div class="btnList">
+            <van-button @click="cancel" square block :color="$colors.prim">取消订单</van-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            result: ''
+        };
+    },
+    onShow() {},
+    methods: {
+        choose(event) {
+            const { name } = event.currentTarget.dataset;
+            this.result = name;
+        },
+        cancel() {
+            if (!this.result) {
+                this.showToastError('请选择取消原因');
+                return;
+            }
+            this.$http
+                .get('/applets/carorder/cancelcarorder', {
+                    carOrderId: this.$mp.query.orderId,
+                    cancelReason: this.result
+                })
+                .then(res => {
+                    this.showToastError('订单已取消', 'success');
+                    this.navigateBack(500);
+                });
+        }
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: @bg2;
+}
+
+.tips {
+    font-size: 15px;
+    color: #6e6e76;
+    line-height: 12px;
+    padding: 40px 17px 10px;
+}
+.btnList {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    .van-button {
+        height: 55px;
+    }
+}
+</style>

src/pages/order/configurationinfo.vue

@@ -1,185 +1,185 @@
-<config>
-{
-'navigationBarTitleText': '车辆详细配置',
-}
-</config>
-<template>
-    <div class="container">
-        <div class="card">
-            <div class="orderName">
-                {{ car.name }}
-            </div>
-            <div class="hr"></div>
-            <div class="minisub">全部选择配置</div>
-            <div class="moreInfo">
-                <div class="more-item" :key="index" v-for="(item, index) in settings">
-                    <div class="name">{{ item.name }}</div>
-
-                    <div class="val">¥{{ item.value }}</div>
-                </div>
-            </div>
-            <div class="hr"></div>
-            <div class="bottomContent">
-                <div class="more-item main">
-                    <div class="name">订金</div>
-                    <div class="val color" id="price">¥{{ include(info.depositPrice) }}</div>
-                </div>
-                <div class="more-item little">
-                    <div class="name">预计交付时间</div>
-                    <div class="val color">45个工作日</div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            info: {}
-        };
-    },
-    computed: {
-        pickedCar() {
-            return this.info.pickedCar || {};
-        },
-        car() {
-            return this.info.car || {};
-        },
-        settings() {
-            var list = [];
-
-            if (this.pickedCar.carSeat) {
-                list.push({
-                    name: this.pickedCar.carSeat.value,
-                    value: this.include(this.pickedCar.carSeat.price)
-                });
-                list.push({
-                    name: this.pickedCar.carColor.value,
-                    value: this.include(this.pickedCar.carColor.price)
-                });
-                list.push({
-                    name: this.pickedCar.carWheelHub.value,
-                    value: this.include(this.pickedCar.carWheelHub.price)
-                });
-                list.push({
-                    name: this.pickedCar.carCaliper.value,
-                    value: this.include(this.pickedCar.carCaliper.price)
-                });
-                list.push({
-                    name: this.pickedCar.catUpholstery.value,
-                    value: this.include(this.pickedCar.catUpholstery.price)
-                });
-                list.push({
-                    name: '总价',
-                    value: this.include(this.info.totalPrice)
-                });
-            }
-
-            return list;
-        }
-    },
-    onShow() {
-        if (this.$mp.query.orderId) {
-            this.$http
-                .get('/applets/carorder/findbyid', {
-                    carOrderId: this.$mp.query.orderId
-                })
-                .then(res => {
-                    this.info = res.data;
-                    console.log(this.info);
-                });
-        }
-    },
-    methods: {
-        include(price) {
-            if (!price) {
-                return 0;
-            } else {
-                return price.toLocaleString(undefined, {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2
-                });
-            }
-        }
-    }
-};
-</script>
-<style lang="less">
-page {
-    background: @bg2;
-}
-
-.container {
-    padding: 15px;
-}
-
-.card {
-    border: 1px solid #ebebeb;
-    border-radius: 5px;
-    background: #ffffff;
-    box-shadow: 0 0 10px 2px #ebebeb;
-    padding: 0 10px;
-}
-
-.hr {
-    height: 1px;
-    background: #ebebeb;
-}
-
-.orderName {
-    font-size: 18px;
-    color: #000000;
-    line-height: 47px;
-}
-
-.minisub {
-    font-size: 12px;
-    color: #6e6e76;
-    line-height: 36px;
-}
-.moreInfo {
-    padding: 20px 15px;
-}
-.more-item {
-    display: flex;
-    justify-content: space-between;
-
-    line-height: 40px;
-
-    .name {
-        font-size: 15px;
-        color: #343434;
-    }
-
-    .val {
-        font-size: 15px;
-        color: #6e6e76;
-    }
-
-    &.main {
-        line-height: 24px;
-        .val {
-            font-size: 18px;
-            font-weight: bold;
-            color: #00a29a;
-        }
-    }
-
-    &.little {
-        line-height: 24px;
-
-        .name {
-            font-size: 12px;
-        }
-        .val {
-            font-size: 12px;
-            color: #00a29a;
-        }
-    }
-}
-
-.bottomContent {
-    padding: 10px 15px 20px;
-}
-</style>
+<config>
+{
+'navigationBarTitleText': '车辆详细配置',
+}
+</config>
+<template>
+    <div class="container">
+        <div class="card">
+            <div class="orderName">
+                {{ car.name }}
+            </div>
+            <div class="hr"></div>
+            <div class="minisub">全部选择配置</div>
+            <div class="moreInfo">
+                <div class="more-item" :key="index" v-for="(item, index) in settings">
+                    <div class="name">{{ item.name }}</div>
+
+                    <div class="val">¥{{ item.value }}</div>
+                </div>
+            </div>
+            <div class="hr"></div>
+            <div class="bottomContent">
+                <div class="more-item main">
+                    <div class="name">订金</div>
+                    <div class="val color" id="price">¥{{ include(info.depositPrice) }}</div>
+                </div>
+                <div class="more-item little">
+                    <div class="name">预计交付时间</div>
+                    <div class="val color">45个工作日</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            info: {}
+        };
+    },
+    computed: {
+        pickedCar() {
+            return this.info.pickedCar || {};
+        },
+        car() {
+            return this.info.car || {};
+        },
+        settings() {
+            var list = [];
+
+            if (this.pickedCar.carSeat) {
+                list.push({
+                    name: this.pickedCar.carSeat.value,
+                    value: this.include(this.pickedCar.carSeat.price)
+                });
+                list.push({
+                    name: this.pickedCar.carColor.value,
+                    value: this.include(this.pickedCar.carColor.price)
+                });
+                list.push({
+                    name: this.pickedCar.carWheelHub.value,
+                    value: this.include(this.pickedCar.carWheelHub.price)
+                });
+                list.push({
+                    name: this.pickedCar.carCaliper.value,
+                    value: this.include(this.pickedCar.carCaliper.price)
+                });
+                list.push({
+                    name: this.pickedCar.catUpholstery.value,
+                    value: this.include(this.pickedCar.catUpholstery.price)
+                });
+                list.push({
+                    name: '总价',
+                    value: this.include(this.info.totalPrice)
+                });
+            }
+
+            return list;
+        }
+    },
+    onShow() {
+        if (this.$mp.query.orderId) {
+            this.$http
+                .get('/applets/carorder/findbyid', {
+                    carOrderId: this.$mp.query.orderId
+                })
+                .then(res => {
+                    this.info = res.data;
+                    console.log(this.info);
+                });
+        }
+    },
+    methods: {
+        include(price) {
+            if (!price) {
+                return 0;
+            } else {
+                return price.toLocaleString(undefined, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2
+                });
+            }
+        }
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: @bg2;
+}
+
+.container {
+    padding: 15px;
+}
+
+.card {
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    background: #ffffff;
+    box-shadow: 0 0 10px 2px #ebebeb;
+    padding: 0 10px;
+}
+
+.hr {
+    height: 1px;
+    background: #ebebeb;
+}
+
+.orderName {
+    font-size: 18px;
+    color: #000000;
+    line-height: 47px;
+}
+
+.minisub {
+    font-size: 12px;
+    color: #6e6e76;
+    line-height: 36px;
+}
+.moreInfo {
+    padding: 20px 15px;
+}
+.more-item {
+    display: flex;
+    justify-content: space-between;
+
+    line-height: 40px;
+
+    .name {
+        font-size: 15px;
+        color: #343434;
+    }
+
+    .val {
+        font-size: 15px;
+        color: #6e6e76;
+    }
+
+    &.main {
+        line-height: 24px;
+        .val {
+            font-size: 18px;
+            font-weight: bold;
+            color: #00a29a;
+        }
+    }
+
+    &.little {
+        line-height: 24px;
+
+        .name {
+            font-size: 12px;
+        }
+        .val {
+            font-size: 12px;
+            color: #00a29a;
+        }
+    }
+}
+
+.bottomContent {
+    padding: 10px 15px 20px;
+}
+</style>

src/pages/order/orderDetail.vue

@@ -1,293 +1,293 @@
-<config>
-{
-	'navigationBarTitleText': '订单详情',
-}
-</config>
-<template>
-    <div class="orderDetail">
-        <div class="card">
-            <div class="orderTop">
-                <span>订单状态：</span>
-                <span>{{ statusText }}</span>
-            </div>
-            <div class="hr"></div>
-            <div class="content">
-                <div class="order-item">
-                    订单编号：<span>{{ info.code }}</span>
-                </div>
-                <div class="order-item">
-                    订单日期：<span>{{ info.createTime }}</span>
-                </div>
-            </div>
-        </div>
-        <div class="card">
-            <div class="cardName">车辆配置</div>
-
-            <van-image width="100%" height="323" :src="car.mobileUrl" />
-
-            <div class="orderName">
-                {{ car.name }}
-            </div>
-            <div class="orderSub">
-                {{ text }}
-            </div>
-            <div class="orderMoneySub">总价： {{ totalPrice }}</div>
-            <div class="orderMoney">订金: {{ depositPrice }}</div>
-            <div class="showMore" @click.stop="toConfigurationInfo">
-                点击查看配置详情
-            </div>
-        </div>
-        <div class="card">
-            <div class="cardName">车主信息</div>
-            <div class="hr"></div>
-            <div class="info-content">
-                <div class="info-item">
-                    <span class="name">姓名：</span>
-                    <span class="val">{{ info.name }}</span>
-                </div>
-
-                <div class="info-item">
-                    <span class="name"> 手机号：</span>
-                    <span class="val">{{ info.mobile }}</span>
-                </div>
-
-                <div class="info-item">
-                    <span class="name"> 取车城市：</span>
-                    <span class="val">{{ info.pickCity }}</span>
-                </div>
-
-                <div class="info-item">
-                    <span class="name">经销商：</span>
-                    <span class="val">{{ info.carSupplier }}</span>
-                </div>
-            </div>
-        </div>
-
-        <div class="card">
-            <div class="cardName">
-                <span>付款信息</span>
-                <span class="payType">{{ info.payType == '1' ? '全款购车' : '仅供参考' }}</span>
-            </div>
-            <div class="hr"></div>
-            <div class="info-content">
-                <div class="info-item" v-if="info.payType === '1'">
-                    <span class="name"> 全款金额：</span>
-                    <span class="val">{{ totalPrice }}</span>
-                </div>
-
-                <template v-else-if="info.payType === '2'">
-                    <div class="info-item">
-                        <span class="name">贷款方案：</span>
-                        <span class="val">{{ info.loanInstalmentCount }}期</span>
-                    </div>
-
-                    <div class="info-item">
-                        <span class="name"> 首付款：</span>
-                        <span class="val">{{ downPaymentPrice }} </span>
-                    </div>
-
-                    <div class="info-item">
-                        <span class="name"> 贷款总额：</span>
-                        <span class="val">{{ loanPrice }} </span>
-                    </div>
-
-                    <div class="info-item">
-                        <span class="name">月供金额：</span>
-                        <span class="val">{{ monthlyInstallmentPaymentPrice }}</span>
-                    </div>
-                </template>
-            </div>
-        </div>
-        <div class="btn"></div>
-        <div class="btnList">
-            <template v-if="info.status === '1'">
-                <van-button block @click="cancelOrder" square color="#000">取消订单</van-button>
-                <van-button @click="toPay" block square :color="$colors.prim">支付订金</van-button>
-            </template>
-            <template v-else-if="info.status === '2'">
-                <van-button block @click="toPay" square :color="$colors.prim" v-if="info.payType === '1'"
-                    >支付尾款</van-button
-                >
-                <template v-else-if="info.payType === '2'">
-                    <van-button
-                        @click="discloseInformation"
-                        square
-                        block
-                        :color="$colors.prim"
-                        v-if="info.canFillLoanData"
-                        >提交贷款资料</van-button
-                    >
-                    <van-button
-                        @click="toPay"
-                        square
-                        block
-                        :color="$colors.prim"
-                        v-if="!info.backOrdering && '5' === info.loanStatus"
-                        >支付首付</van-button
-                    >
-                </template>
-            </template>
-
-            <van-button @click="toBackMoeny" block square color="#000" v-if="info.canBackDeposit">退订金</van-button>
-        </div>
-    </div>
-</template>
-<script>
-import Order from '../../mixins/Order';
-export default {
-    data() {
-        return {
-            info: {}
-        };
-    },
-    mixins: [Order],
-    onShow() {
-        if (this.$mp.query.orderId) {
-            this.$http
-                .get('/applets/carorder/findbyid', {
-                    carOrderId: this.$mp.query.orderId
-                })
-                .then(res => {
-                    this.info = res.data;
-                    console.log(this.info);
-                });
-        }
-    }
-};
-</script>
-<style lang="less">
-page {
-    background: @bg2;
-}
-
-.btnList {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-
-    ._van-button {
-        flex-grow: 1;
-    }
-    .van-button {
-        height: 55px;
-    }
-}
-</style>
-<style lang="less" scoped>
-.orderDetail {
-    padding: 15px;
-}
-
-.btn {
-    height: 55px;
-}
-.card {
-    border: 1px solid #ebebeb;
-    border-radius: 5px;
-    background: #ffffff;
-    box-shadow: 0 0 10px 2px #ebebeb;
-    padding: 0 10px;
-}
-
-.hr {
-    height: 1px;
-    background: #ebebeb;
-}
-.card + .card {
-    margin-top: 10px;
-}
-
-.orderTop {
-    font-size: 18px;
-    color: #000000;
-    line-height: 47px;
-    font-weight: bold;
-    display: flex;
-    justify-content: space-between;
-}
-.content {
-    padding: 5px 0 10px;
-}
-.order-item {
-    font-size: 12px;
-    color: #707070;
-    line-height: 18px;
-    padding: 5px 0;
-}
-
-.cardName {
-    font-size: 13px;
-    font-weight: bold;
-    color: #333333;
-    line-height: 42px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.orderName {
-    font-size: 18px;
-    color: #000000;
-    line-height: 17px;
-    padding-top: 20px;
-}
-
-.orderSub {
-    font-size: 12px;
-    color: #868686;
-    line-height: 18px;
-    padding-top: 15px;
-}
-
-.orderMoneySub {
-    font-size: 13px;
-    font-weight: bold;
-    color: #6e6e76;
-    line-height: 16px;
-    padding-top: 13px;
-}
-
-.orderMoney {
-    font-size: 18px;
-    font-weight: bold;
-    color: #333333;
-    line-height: 20px;
-    padding-top: 10px;
-}
-
-.showMore {
-    font-size: 13px;
-    color: #00a29a;
-    line-height: 18px;
-    padding-top: 18px;
-    padding-bottom: 20px;
-}
-.info-content {
-    padding: 20px 0;
-}
-.info-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .name {
-        font-size: 13px;
-        color: #6e6e76;
-        line-height: 30px;
-    }
-
-    .val {
-        font-size: 15px;
-        color: #333333;
-        line-height: 30px;
-    }
-}
-.payType {
-    font-size: 13px;
-    font-weight: bold;
-    color: #00a29a;
-    line-height: 36px;
-}
-</style>
+<config>
+{
+	'navigationBarTitleText': '订单详情',
+}
+</config>
+<template>
+    <div class="orderDetail">
+        <div class="card">
+            <div class="orderTop">
+                <span>订单状态：</span>
+                <span>{{ statusText }}</span>
+            </div>
+            <div class="hr"></div>
+            <div class="content">
+                <div class="order-item">
+                    订单编号：<span>{{ info.code }}</span>
+                </div>
+                <div class="order-item">
+                    订单日期：<span>{{ info.createTime }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <div class="cardName">车辆配置</div>
+
+            <van-image width="100%" height="323" :src="car.mobileUrl" />
+
+            <div class="orderName">
+                {{ car.name }}
+            </div>
+            <div class="orderSub">
+                {{ text }}
+            </div>
+            <div class="orderMoneySub">总价： {{ totalPrice }}</div>
+            <div class="orderMoney">订金: {{ depositPrice }}</div>
+            <div class="showMore" @click.stop="toConfigurationInfo">
+                点击查看配置详情
+            </div>
+        </div>
+        <div class="card">
+            <div class="cardName">车主信息</div>
+            <div class="hr"></div>
+            <div class="info-content">
+                <div class="info-item">
+                    <span class="name">姓名：</span>
+                    <span class="val">{{ info.name }}</span>
+                </div>
+
+                <div class="info-item">
+                    <span class="name"> 手机号：</span>
+                    <span class="val">{{ info.mobile }}</span>
+                </div>
+
+                <div class="info-item">
+                    <span class="name"> 取车城市：</span>
+                    <span class="val">{{ info.pickCity }}</span>
+                </div>
+
+                <div class="info-item">
+                    <span class="name">经销商：</span>
+                    <span class="val">{{ info.carSupplier }}</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="cardName">
+                <span>付款信息</span>
+                <span class="payType">{{ info.payType == '1' ? '全款购车' : '仅供参考' }}</span>
+            </div>
+            <div class="hr"></div>
+            <div class="info-content">
+                <div class="info-item" v-if="info.payType === '1'">
+                    <span class="name"> 全款金额：</span>
+                    <span class="val">{{ totalPrice }}</span>
+                </div>
+
+                <template v-else-if="info.payType === '2'">
+                    <div class="info-item">
+                        <span class="name">贷款方案：</span>
+                        <span class="val">{{ info.loanInstalmentCount }}期</span>
+                    </div>
+
+                    <div class="info-item">
+                        <span class="name"> 首付款：</span>
+                        <span class="val">{{ downPaymentPrice }} </span>
+                    </div>
+
+                    <div class="info-item">
+                        <span class="name"> 贷款总额：</span>
+                        <span class="val">{{ loanPrice }} </span>
+                    </div>
+
+                    <div class="info-item">
+                        <span class="name">月供金额：</span>
+                        <span class="val">{{ monthlyInstallmentPaymentPrice }}</span>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <div class="btn"></div>
+        <div class="btnList">
+            <template v-if="info.status === '1'">
+                <van-button block @click="cancelOrder" square color="#000">取消订单</van-button>
+                <van-button @click="toPay" block square :color="$colors.prim">支付订金</van-button>
+            </template>
+            <template v-else-if="info.status === '2'">
+                <van-button block @click="toPay" square :color="$colors.prim" v-if="info.payType === '1'"
+                    >支付尾款</van-button
+                >
+                <template v-else-if="info.payType === '2'">
+                    <van-button
+                        @click="discloseInformation"
+                        square
+                        block
+                        :color="$colors.prim"
+                        v-if="info.canFillLoanData"
+                        >提交贷款资料</van-button
+                    >
+                    <van-button
+                        @click="toPay"
+                        square
+                        block
+                        :color="$colors.prim"
+                        v-if="!info.backOrdering && '5' === info.loanStatus"
+                        >支付首付</van-button
+                    >
+                </template>
+            </template>
+
+            <van-button @click="toBackMoeny" block square color="#000" v-if="info.canBackDeposit">退订金</van-button>
+        </div>
+    </div>
+</template>
+<script>
+import Order from '../../mixins/Order';
+export default {
+    data() {
+        return {
+            info: {}
+        };
+    },
+    mixins: [Order],
+    onShow() {
+        if (this.$mp.query.orderId) {
+            this.$http
+                .get('/applets/carorder/findbyid', {
+                    carOrderId: this.$mp.query.orderId
+                })
+                .then(res => {
+                    this.info = res.data;
+                    console.log(this.info);
+                });
+        }
+    }
+};
+</script>
+<style lang="less">
+page {
+    background: @bg2;
+}
+
+.btnList {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+
+    ._van-button {
+        flex-grow: 1;
+    }
+    .van-button {
+        height: 55px;
+    }
+}
+</style>
+<style lang="less" scoped>
+.orderDetail {
+    padding: 15px;
+}
+
+.btn {
+    height: 55px;
+}
+.card {
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    background: #ffffff;
+    box-shadow: 0 0 10px 2px #ebebeb;
+    padding: 0 10px;
+}
+
+.hr {
+    height: 1px;
+    background: #ebebeb;
+}
+.card + .card {
+    margin-top: 10px;
+}
+
+.orderTop {
+    font-size: 18px;
+    color: #000000;
+    line-height: 47px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+}
+.content {
+    padding: 5px 0 10px;
+}
+.order-item {
+    font-size: 12px;
+    color: #707070;
+    line-height: 18px;
+    padding: 5px 0;
+}
+
+.cardName {
+    font-size: 13px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 42px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.orderName {
+    font-size: 18px;
+    color: #000000;
+    line-height: 17px;
+    padding-top: 20px;
+}
+
+.orderSub {
+    font-size: 12px;
+    color: #868686;
+    line-height: 18px;
+    padding-top: 15px;
+}
+
+.orderMoneySub {
+    font-size: 13px;
+    font-weight: bold;
+    color: #6e6e76;
+    line-height: 16px;
+    padding-top: 13px;
+}
+
+.orderMoney {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333333;
+    line-height: 20px;
+    padding-top: 10px;
+}
+
+.showMore {
+    font-size: 13px;
+    color: #00a29a;
+    line-height: 18px;
+    padding-top: 18px;
+    padding-bottom: 20px;
+}
+.info-content {
+    padding: 20px 0;
+}
+.info-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .name {
+        font-size: 13px;
+        color: #6e6e76;
+        line-height: 30px;
+    }
+
+    .val {
+        font-size: 15px;
+        color: #333333;
+        line-height: 30px;
+    }
+}
+.payType {
+    font-size: 13px;
+    font-weight: bold;
+    color: #00a29a;
+    line-height: 36px;
+}
+</style>

src/pages/order/orderListCoupe.vue

@@ -1,97 +1,97 @@
-<config>
-{
-	'navigationBarTitleText': 'COUPE订单',
-	'enablePullDownRefresh':true
-}
-</config>
-
-<template>
-    <div class="order">
-        <van-sticky>
-            <van-tabs
-                :active="active"
-                :color="$colors.prim"
-                line-height="2px"
-                @change="active = $event.detail.name"
-                tab-active-class="activeTab"
-                tab-class="tab"
-            >
-                <van-tab :title="item.name" v-for="item in types" :key="item.payType"></van-tab>
-            </van-tabs>
-        </van-sticky>
-
-        <div class="loading" v-if="loading">
-            <van-loading size="24px">加载中...</van-loading>
-        </div>
-
-        <van-empty description="无数据" v-if="empty" />
-
-        <div class="list">
-            <order-card
-                v-for="item in list"
-                :key="item.id"
-                :backInfo="item"
-                :isBack="active === 2"
-                :info="active !== 2 ? item : item.carOrder"
-            ></order-card>
-        </div>
-    </div>
-</template>
-<script>
-import OrderList from '../../mixins/OrderList';
-import OrderCard from '../../components/OrderCard.vue';
-export default {
-    mixins: [OrderList],
-    data() {
-        return {
-            active: 1,
-            types: [
-                { name: '贷款订单', payType: '2', url: '/applets/carorder/findmycarorderlist' },
-                { name: '全款订单', payType: '1', url: '/applets/carorder/findmycarorderlist' },
-                { name: '退订订单', payType: '', url: '/applets/backorder/querycarbckorderlist' }
-            ]
-        };
-    },
-    computed: {
-        queryData() {
-            return {
-                payType: this.types[this.active].payType
-            };
-        },
-        url() {
-            return this.types[this.active].url;
-        }
-    },
-    components: {
-        'order-card': OrderCard
-    }
-};
-</script>
-
-<style lang="less">
-.order {
-    .tab {
-        color: #666666;
-        font-weight: bold;
-        font-size: 15px;
-
-        &.activeTab {
-            color: @prim;
-        }
-    }
-}
-
-.loading {
-    padding: 10px;
-    display: flex;
-    justify-content: center;
-}
-
-.list {
-    padding: 15px;
-
-    .orderCard + .orderCard {
-        margin-top: 15px;
-    }
-}
-</style>
+<config>
+{
+	'navigationBarTitleText': 'COUPE订单',
+	'enablePullDownRefresh':true
+}
+</config>
+
+<template>
+    <div class="order">
+        <van-sticky>
+            <van-tabs
+                :active="active"
+                :color="$colors.prim"
+                line-height="2px"
+                @change="active = $event.detail.name"
+                tab-active-class="activeTab"
+                tab-class="tab"
+            >
+                <van-tab :title="item.name" v-for="item in types" :key="item.payType"></van-tab>
+            </van-tabs>
+        </van-sticky>
+
+        <div class="loading" v-if="loading">
+            <van-loading size="24px">加载中...</van-loading>
+        </div>
+
+        <van-empty description="无数据" v-if="empty" />
+
+        <div class="list">
+            <order-card
+                v-for="item in list"
+                :key="item.id"
+                :backInfo="item"
+                :isBack="active === 2"
+                :info="active !== 2 ? item : item.carOrder"
+            ></order-card>
+        </div>
+    </div>
+</template>
+<script>
+import OrderList from '../../mixins/OrderList';
+import OrderCard from '../../components/OrderCard.vue';
+export default {
+    mixins: [OrderList],
+    data() {
+        return {
+            active: 1,
+            types: [
+                { name: '贷款订单', payType: '2', url: '/applets/carorder/findmycarorderlist' },
+                { name: '全款订单', payType: '1', url: '/applets/carorder/findmycarorderlist' },
+                { name: '退订订单', payType: '', url: '/applets/backorder/querycarbckorderlist' }
+            ]
+        };
+    },
+    computed: {
+        queryData() {
+            return {
+                payType: this.types[this.active].payType
+            };
+        },
+        url() {
+            return this.types[this.active].url;
+        }
+    },
+    components: {
+        'order-card': OrderCard
+    }
+};
+</script>
+
+<style lang="less">
+.order {
+    .tab {
+        color: #666666;
+        font-weight: bold;
+        font-size: 15px;
+
+        &.activeTab {
+            color: @prim;
+        }
+    }
+}
+
+.loading {
+    padding: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.list {
+    padding: 15px;
+
+    .orderCard + .orderCard {
+        margin-top: 15px;
+    }
+}
+</style>

src/pages/submit.vue

@@ -7,7 +7,15 @@
     <div>
         <div class="addr-info flex" @click="addressEdit">
             <img src="../static/imgs/icon_address.png" class="icon-address" />
-            <div class="info flex-col">
+            <div class="info flex-col" v-if="settlementInfo.customerAddress">
+                <div class="name f15 text1">
+                    {{ settlementInfo.customerAddress.name }}&nbsp;&nbsp;{{ settlementInfo.customerAddress.mobile }}
+                </div>
+                <div class="desc f12 text3">
+                    {{ settlementInfo.customerAddress.address }}&nbsp;{{ settlementInfo.customerAddress.detailAddress }}
+                </div>
+            </div>
+            <div class="info flex-col" v-else>
                 <div class="name f15 text1">请添加购车人</div>
                 <div class="desc f12 text3">请添加购车人</div>
             </div>
@@ -16,12 +24,12 @@
         <div class="product-info">
             <div class="title">
                 <img src="../static/imgs/icon_shop.png" class="icon" />
-                <div class="content">商城自营</div>
+                <div class="content">{{ storeName }}</div>
             </div>
             <div class="sku">
-                <img mode="aspectFill" src="https://shopimg.jetour.com.cn/20190830/1567151848634.jpg" class="cover" />
+                <img mode="aspectFill" :src="normalSku.image" class="cover" />
                 <div class="name">
-                    [整车订金]全新一代捷途X90 全球首发 限量预售
+                    {{ normalSku.name }}
                 </div>
                 <div class="amount">×1</div>
             </div>
@@ -32,31 +40,140 @@
                 </div>
                 <div class="row" style="margin-top: 20px; align-items: flex-start; height: 60px;">
                     <div class="label">订单备注</div>
-                    <textarea class="value" placeholder="请填写订单备注" maxlength="200" />
+                    <textarea class="value" placeholder="请填写订单备注" maxlength="200" v-model="remark" />
                 </div>
             </div>
             <div class="sum f12 text3">
-                共一件&nbsp;<span class="f14 text1">小计：<span class="price">¥90.00</span></span>
+                共一件&nbsp;<span class="f14 text1">
+                    小计：<span class="price">¥{{ settlementInfo.orderTotalPrice }}</span>
+                </span>
             </div>
         </div>
         <div class="bottom">
             <div class="sum f12 text3">
-                共一件&nbsp;<span class="f14 text1">小计：<span class="price">¥90.00</span></span>
+                共一件&nbsp;<span class="f14 text1"
+                    >小计：<span class="price">¥{{ settlementInfo.orderTotalPrice }}</span></span
+                >
             </div>
-            <div class="btn">提交订单</div>
+            <div class="btn" @click="submit">提交订单</div>
         </div>
+
+        <van-dialog id="van-dialog" />
     </div>
 </template>
 <script>
+import Dialog from '../vant/dialog/dialog';
 export default {
     data() {
-        return {};
+        return {
+            skuInfo: {},
+            settlementInfo: {},
+            addressId: null,
+            remark: ''
+        };
+    },
+    created() {
+        let skuInfo = this.$mp.query;
+        skuInfo.name = decodeURIComponent(skuInfo.name);
+        skuInfo.image = decodeURIComponent(skuInfo.image);
+        this.skuInfo = skuInfo;
+        console.log(skuInfo);
+        this.settlement();
+    },
+    computed: {
+        storeName() {
+            return (((this.settlementInfo.storeSettlements || [])[0] || {}).shoppingCartResponse || {}).storeName;
+        },
+        normalSku() {
+            return (
+                ((((this.settlementInfo.storeSettlements || [])[0] || {}).shoppingCartResponse || {}).normalSkus ||
+                    [])[0] || {}
+            );
+        }
     },
     methods: {
+        settlement() {
+            this.$http
+                .get('/applets/settlement', {
+                    addressId: this.addressId || '',
+                    skuInfo: this.skuInfo.skuId + ',1',
+                    isGroup: 0,
+                    ids: ''
+                })
+                .then(res => {
+                    if (res.data && res.data.storeSettlements) {
+                        this.settlementInfo = res.data;
+                    }
+                });
+        },
         addressEdit() {
             wx.navigateTo({
-                url: '/pages/addressEdit'
+                url: '/pages/addressList?pick=true',
+                events: {
+                    pickAddress: data => {
+                        this.addressId = data.id;
+                        this.settlement();
+                    }
+                }
+            });
+        },
+        submit() {
+            if (!this.addressId && !this.settlementInfo.customerAddress) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请先添加购车人'
+                });
+                return;
+            }
+            Dialog.alert({
+                message: '收获地址请填写真实购车人姓名和手机号，否则会影响权益领取！',
+                showCancelButton: true,
+                cancelButtonText: '关闭',
+                className: 'custom-class-name'
+            }).then(_ => {
+                wx.showLoading({
+                    mask: true,
+                    title: ''
+                });
+                this.$http
+                    .post(
+                        '/applets/submitorder',
+                        {
+                            addressId: this.addressId || (this.settlementInfo.customerAddress || {}).id,
+                            incomingUrl: this.$http.parseUrl('/applets/'),
+                            storeInfos: [
+                                {
+                                    storeId: 0,
+                                    payType: 0,
+                                    remark: this.remark,
+                                    usePoints: 0
+                                }
+                            ],
+                            ids: [],
+                            skuInfo: this.skuInfo.skuId + ',1',
+                            redEnvelopeCode: null,
+                            isGroup: 0,
+                            groupId: null,
+                            dealerIdStr:
+                                this.skuInfo.provinceId + '-' + this.skuInfo.cityId + '-' + this.skuInfo.dealerId,
+                            dealerId: this.skuInfo.dealerId,
+                            dealerInfo: ''
+                        },
+                        { header: { 'Content-Type': 'application/json' } }
+                    )
+                    .then(res => {
+                        wx.hideLoading();
+                        wx.showToast({
+                            title: '下单成功'
+                        });
+                    })
+                    .catch(e => {
+                        console.log(e);
+                        wx.hideLoading();
+                    });
             });
+            return;
+            // eslint-disable-next-line no-unreachable
         }
     }
 };
@@ -188,4 +305,9 @@ page {
         justify-content: center;
     }
 }
+.dialog-index--custom-class-name {
+    .dialog-index--van-dialog__confirm {
+        color: @prim !important;
+    }
+}
 </style>

src/pages/testDrive.vue

@@ -248,6 +248,55 @@ export default {
             this.cityId = value.id;
             this.cityName = value.name;
             this.showCityDialog = false;
+        },
+        getDealer() {
+            this.$http
+                .post(
+                    'https://dealer.jetour.com.cn/api-dealer/dealer-info/searchDealerListByCondition',
+                    {
+                        brandId: '0cbe50af-c29a-4eb0-91cc-4a05c5f05c57',
+                        provinceId: this.provinceId,
+                        cityId: this.cityId,
+                        enabledFlag: 1,
+                        type: 1
+                    },
+                    {
+                        header: {
+                            Authorization: '',
+                            'Content-Type': 'application/json'
+                        }
+                    }
+                )
+                .then(res => {
+                    res.data = res.data.filter(
+                        i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
+                    );
+                    this.dealerList = res.data;
+                });
+        },
+        chooseDealer() {
+            if (!this.provinceId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请先选择省份'
+                });
+                return;
+            }
+            if (!this.provinceId) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请先选择城市'
+                });
+                return;
+            }
+            this.getDealer();
+            this.showDealerDialog = true;
+        },
+        confirmDealer() {
+            let value = this.$mp.page.selectComponent('#dealerPicker').getColumnValue(0);
+            this.dealerName = value.name;
+            this.dealerId = value.id;
+            this.showDealerDialog = false;
         }
     },
     watch: {

src/pages/tuxiang.vue

@@ -241,7 +241,7 @@ page {
 }
 .event-item {
     background: #ffffff;
-    border-radius: 4px 4px 0px 0px;
+    border-radius: 4px;
     margin: 10px 20px 0 20px;
     padding-bottom: 15px;
     overflow: hidden;
@@ -263,7 +263,7 @@ page {
 }
 .video-item {
     background: #ffffff;
-    border-radius: 4px 4px 0px 0px;
+    border-radius: 4px;
     margin: 10px 20px 0 20px;
     padding-bottom: 20px;
     overflow: hidden;

src/styles/common.less

@@ -10,6 +10,7 @@
 @border2: #e4e7ed;
 @border3: #ebeef5;
 @border4: #f2f6fc;
+@border5:#DEE6EF;
 @bg: #f2f4f5;
 @bg2:#F8FAFF;
 .flex() {