计算器

src/financialScheme.js

@@ -0,0 +1,212 @@
+module.exports = [
+    {
+        name: '18期免利息',
+        products: [
+            {
+                lowRatio: 0.3,
+                period: 18,
+                cliRate: 0,
+                isMonthly: true,
+                series: [
+                    {
+                        name: '全新一代X70',
+                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
+                    },
+                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
+                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
+                    {
+                        name: 'X70M',
+                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
+                        models: [
+                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
+                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
+                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
+                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
+                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
+                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
+                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
+                        ]
+                    },
+                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
+                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
+                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
+                ]
+            }
+        ]
+    },
+    {
+        name: '24期低利息',
+        products: [
+            {
+                lowRatio: 0.2,
+                period: 24,
+                cliRate: 0.0676,
+                isMonthly: true,
+                series: [
+                    {
+                        name: '全新一代X70',
+                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
+                    },
+                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
+                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
+                    {
+                        name: 'X70M',
+                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
+                        models: [
+                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
+                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
+                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
+                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
+                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
+                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
+                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
+                        ]
+                    },
+                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
+                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
+                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
+                ]
+            }
+        ]
+    },
+    {
+        name: '24期免利息',
+        products: [
+            {
+                lowRatio: 0.3,
+                period: 24,
+                cliRate: 0,
+                isMonthly: true,
+                series: [
+                    {
+                        name: '全新一代X70',
+                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
+                    },
+                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
+                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
+                    {
+                        name: 'X70M',
+                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
+                        models: [
+                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
+                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
+                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
+                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
+                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
+                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
+                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
+                        ]
+                    },
+                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
+                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
+                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
+                ]
+            }
+        ]
+    },
+    {
+        name: '36期低利息',
+        products: [
+            {
+                lowRatio: 0.2,
+                period: 36,
+                cliRate: 0.0842,
+                isMonthly: true,
+                series: [
+                    {
+                        name: '全新一代X70',
+                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
+                    },
+                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
+                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
+                    {
+                        name: 'X70M',
+                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
+                        models: [
+                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
+                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
+                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
+                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
+                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
+                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
+                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
+                        ]
+                    },
+                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
+                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
+                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
+                ]
+            }
+        ]
+    },
+    {
+        name: '60期低利息',
+        products: [
+            {
+                lowRatio: 0.2,
+                period: 60,
+                cliRate: 0.1088,
+                isMonthly: true,
+                series: [
+                    {
+                        name: '全新一代X70',
+                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
+                    },
+                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
+                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
+                    {
+                        name: 'X70M',
+                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
+                        models: [
+                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
+                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
+                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
+                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
+                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
+                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
+                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
+                        ]
+                    },
+                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
+                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
+                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
+                ]
+            }
+        ]
+    },
+    {
+        name: '百龙515免利息',
+        products: [
+            {
+                lowRatio: 0.5,
+                period: 12,
+                cliRate: 0,
+                isMonthly: false,
+                series: [
+                    {
+                        name: '全新一代X70',
+                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
+                    },
+                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
+                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
+                    {
+                        name: 'X70M',
+                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
+                        models: [
+                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
+                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
+                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
+                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
+                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
+                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
+                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
+                        ]
+                    },
+                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
+                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
+                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
+                ]
+            }
+        ]
+    }
+];

src/pages/calculator.vue

@@ -4,268 +4,208 @@
 }
 </config>
 <template>
-    <div>
+    <div style="padding-bottom:20px">
         <div class="title center">分期购车计算器</div>
-        <img class="cover" src="https://shopimg.jetour.com.cn/20190830/1567151848634.jpg" mode="aspectFill" />
+        <img class="cover" :src="image" mode="aspectFill" />
         <div class="title">选择车系</div>
         <div class="group">
-            <div class="box">
-                <div class="content">X70S</div>
+            <div class="box" @click="showSerisPicker = true">
+                <div class="content">{{ seriesName }}</div>
                 <van-icon class="icon" name="arrow-down" />
             </div>
-            <div class="box">
-                <div class="content">1.5T MT</div>
+            <div class="box" @click="showModelPicker = true">
+                <div class="content">{{ modelName }}</div>
                 <van-icon class="icon" name="arrow-down" />
             </div>
         </div>
         <div class="title">选择贷款方式</div>
         <div class="group">
-            <div class="radio active">18期免利息</div>
-            <div class="radio">18期低利息</div>
-            <div class="radio">24期免利息</div>
-            <div class="radio">36期低利息</div>
-            <div class="radio">60期低利息</div>
-            <div class="radio">百龙515免利息</div>
+            <div
+                class="radio"
+                v-for="(item, i) in financialScheme"
+                :key="i"
+                :class="{ active: type === i }"
+                @click="type = i"
+            >
+                {{ item.name }}
+            </div>
         </div>
         <div class="title">计算结果</div>
         <div class="result">
             <div class="row">
                 <div class="label">首付款</div>
-                <div class="value">23990</div>
+                <div class="value">{{ downPayment }}</div>
             </div>
             <div class="row">
                 <div class="label">贷款金额</div>
-                <div class="value">23990</div>
+                <div class="value">{{ loan }}</div>
             </div>
             <div class="row">
                 <div class="label">月供</div>
-                <div class="value">23990</div>
+                <div class="value">{{ monthly }}</div>
             </div>
             <div class="row">
                 <div class="label">尾款</div>
-                <div class="value">23990</div>
+                <div class="value">{{ last }}</div>
             </div>
         </div>
         <div class="title" style="margin-top: 25px;">说明</div>
         <div class="tip">本计算器仅提供参考，具体信息请咨询当地经销商。</div>
+
+        <van-action-sheet :show="showSerisPicker">
+            <van-picker
+                :columns="series"
+                value-key="name"
+                show-toolbar
+                title="选择车系"
+                @cancel="showSerisPicker = false"
+                @confirm="confirmSeries"
+                id="seriesPicker"
+            />
+        </van-action-sheet>
+        <van-action-sheet :show="showModelPicker">
+            <van-picker
+                :columns="models"
+                value-key="name"
+                show-toolbar
+                title="选择车型"
+                @cancel="showModelPicker = false"
+                @confirm="confirmModel"
+                id="modelPicker"
+            />
+        </van-action-sheet>
     </div>
 </template>
 <script>
-var financialScheme = [
-    {
-        name: '18期免利息',
-        products: [
-            {
-                lowRatio: 0.3,
-                period: 18,
-                cliRate: 0,
-                isMonthly: true,
-                series: [
-                    {
-                        name: '全新一代X70',
-                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
-                    },
-                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
-                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
-                    {
-                        name: 'X70M',
-                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
-                        models: [
-                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
-                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
-                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
-                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
-                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
-                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
-                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
-                        ]
-                    },
-                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
-                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
-                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
-                ]
-            }
-        ]
+var financialScheme = require('../financialScheme');
+function pmt(rate_per_period, number_of_payments, present_value, future_value, type) {
+    if (rate_per_period != 0.0) {
+        // Interest rate exists
+        var q = Math.pow(1 + rate_per_period, number_of_payments);
+        return -(rate_per_period * (future_value + q * present_value)) / ((-1 + q) * (1 + rate_per_period * type));
+    } else if (number_of_payments != 0.0) {
+        // No interest rate, but number of payments exists
+        return -(future_value + present_value) / number_of_payments;
+    }
+
+    return 0;
+}
+export default {
+    data() {
+        return {
+            image: '',
+            series: [],
+            models: [],
+            seriesName: '',
+            seriesId: '',
+            modelName: '',
+            modelId: '',
+            showSerisPicker: false,
+            showModelPicker: false,
+            officialQuotes: 0,
+            type: 0,
+            financialScheme: financialScheme
+        };
     },
-    {
-        name: '24期低利息',
-        products: [
-            {
-                lowRatio: 0.2,
-                period: 24,
-                cliRate: 0.0676,
-                isMonthly: true,
-                series: [
-                    {
-                        name: '全新一代X70',
-                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
-                    },
-                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
-                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
-                    {
-                        name: 'X70M',
-                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
-                        models: [
-                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
-                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
-                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
-                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
-                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
-                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
-                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
-                        ]
-                    },
-                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
-                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
-                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
-                ]
+    computed: {
+        downPayment() {
+            return financialScheme[this.type].products[0].lowRatio * this.officialQuotes;
+        },
+        loan() {
+            return this.officialQuotes - this.downPayment;
+        },
+        monthly() {
+            if (financialScheme[this.type].products[0].cliRate === 0) {
+                if (financialScheme[this.type].products[0].isMonthly) {
+                    return Math.round(this.loan / financialScheme[this.type].products[0].period);
+                } else {
+                    return 0;
+                }
+            } else {
+                return Math.round(
+                    -pmt(
+                        financialScheme[this.type].products[0].cliRate / 12,
+                        financialScheme[this.type].products[0].period,
+                        this.loan,
+                        0,
+                        0
+                    )
+                );
             }
-        ]
-    },
-    {
-        name: '24期免利息',
-        products: [
-            {
-                lowRatio: 0.3,
-                period: 24,
-                cliRate: 0,
-                isMonthly: true,
-                series: [
-                    {
-                        name: '全新一代X70',
-                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
-                    },
-                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
-                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
-                    {
-                        name: 'X70M',
-                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
-                        models: [
-                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
-                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
-                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
-                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
-                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
-                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
-                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
-                        ]
-                    },
-                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
-                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
-                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
-                ]
+        },
+        last() {
+            if (financialScheme[this.type].products[0].cliRate === 0) {
+                if (financialScheme[this.type].products[0].isMonthly) {
+                    return 0;
+                } else {
+                    return this.loan;
+                }
+            } else {
+                return 0;
             }
-        ]
-    },
-    {
-        name: '36期低利息',
-        products: [
-            {
-                lowRatio: 0.2,
-                period: 36,
-                cliRate: 0.0842,
-                isMonthly: true,
-                series: [
-                    {
-                        name: '全新一代X70',
-                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
-                    },
-                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
-                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
-                    {
-                        name: 'X70M',
-                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
-                        models: [
-                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
-                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
-                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
-                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
-                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
-                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
-                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
-                        ]
-                    },
-                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
-                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
-                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
-                ]
-            }
-        ]
+        }
     },
-    {
-        name: '60期低利息',
-        products: [
-            {
-                lowRatio: 0.2,
-                period: 60,
-                cliRate: 0.1088,
-                isMonthly: true,
-                series: [
-                    {
-                        name: '全新一代X70',
-                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
-                    },
-                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
-                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
-                    {
-                        name: 'X70M',
-                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
-                        models: [
-                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
-                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
-                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
-                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
-                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
-                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
-                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
-                        ]
-                    },
-                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
-                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
-                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
-                ]
-            }
-        ]
+    created() {
+        this.$http
+            .get(
+                'https://dealer.jetour.com.cn/api-basic/api/carseries/findCarSeriesByBrandId/0cbe50af-c29a-4eb0-91cc-4a05c5f05c57',
+                {},
+                {
+                    header: {
+                        Authorization: ''
+                    }
+                }
+            )
+            .then(res => {
+                this.series = res.filter(i => i.code && !i.code.startsWith('activity_series'));
+                if (this.series[0]) {
+                    this.confirmSeries({
+                        detail: {
+                            value: this.series[0],
+                            index: 1
+                        }
+                    });
+                }
+            });
     },
-    {
-        name: '百龙515免利息',
-        products: [
-            {
-                lowRatio: 0.5,
-                period: 12,
-                cliRate: 0,
-                isMonthly: false,
-                series: [
+    methods: {
+        num(x) {
+            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        },
+        confirmSeries(e) {
+            console.log('confirmSeries::', e);
+            this.seriesId = e.detail.value.id;
+            this.image = e.detail.value.imageUrl;
+            this.seriesName = e.detail.value.name;
+            this.showSerisPicker = false;
+            this.$http
+                .get(
+                    // eslint-disable-next-line prettier/prettier
+                    `https://dealer.jetour.com.cn/api-basic/api/carmodel/front/findCarModelBySeriesId/${e.detail.value.id}`,
+                    {},
                     {
-                        name: '全新一代X70',
-                        code: '9661e926-714d-4028-92ef-6fa73b38fdba'
-                    },
-                    { name: 'X70S', code: '2d9edcec-e4f3-47f5-8608-ee08e361ef53' },
-                    { name: 'X70 Coupe', code: 'ee468f65-6110-42ae-9f48-1410ddddae54' },
-                    {
-                        name: 'X70M',
-                        code: '23b22a68-3d76-49db-bec3-53e8b55cbbca',
-                        models: [
-                            { code: '70d808e4-3543-4830-b188-a7e81f8b9d0f', name: 'X70M 伙伴型 1.5T-6MT' },
-                            { code: '712c526d-fab2-4bf8-b3a9-fbc85f67d413', name: 'X70M 超值伙伴型 1.5T-6MT' },
-                            { code: '49f4011e-6a8d-49dc-b028-c1b20d51db8a', name: 'X70M 旅伴型 1.5T-6MT' },
-                            { code: '74272be6-19bc-4d24-846d-80e5f8895023', name: 'X70M 相伴型 1.5T-6DCT' },
-                            { code: '0b924871-51c7-4c2f-81a3-5ecf5b9fc739', name: 'X70M 尊伴型 1.5T-6DCT' },
-                            { code: '06351f9b-dc85-4393-a427-cd854fff7df5', name: 'X70M 精英伙伴型 1.5T-6MT' },
-                            { code: '87ea0071-43e6-438c-a379-b3991d367aab', name: 'X70M 尊贵伙伴型 1.5T-6DCT' }
-                        ]
-                    },
-                    { name: 'X95', code: '0fc91cf6-5b16-4932-9f10-091c8844105e' },
-                    { name: '全新一代X90', code: 'fe46458a-b562-4ffa-8924-ed3d2a6b483d' },
-                    { name: 'X70SEV', code: 'ff14ec24-6069-4979-b8c9-da2262cc1dc7' }
-                ]
-            }
-        ]
-    }
-];
-export default {
-    data() {
-        return {};
+                        header: { 'Content-Type': 'application/json', Authorization: '' }
+                    }
+                )
+                .then(res => {
+                    this.models = res;
+                    if (this.models[0]) {
+                        this.confirmModel({
+                            detail: {
+                                value: this.models[0],
+                                index: 1
+                            }
+                        });
+                    }
+                });
+        },
+        confirmModel(e) {
+            console.log('confirmModel::', e);
+            this.modelId = e.detail.value.id;
+            this.modelName = e.detail.value.name;
+            this.officialQuotes = e.detail.value.officialQuotes;
+            this.showModelPicker = false;
+        }
     }
 };
 </script>
@@ -306,6 +246,7 @@ export default {
             font-weight: bold;
             color: @text1;
             flex-grow: 1;
+            .ellipsis();
         }
         .icon {
             color: @text2;

src/pages/dealer.vue

@@ -316,11 +316,11 @@ export default {
         testDrive(item) {
             console.log(
                 // eslint-disable-next-line prettier/prettier
-                `/pages/testDrive?provinceId=${item.provinceId}&provinceName=${item.provinceName}&cityId=${item.cityId}&cityName=${item.cityName}&dealerId=${item.id}&dealerName=${item.name}`
+                `/pages/testDrive?provinceId=${item.provinceId}&provinceName=${item.provinceName}&cityId=${item.cityId}&cityName=${item.cityName}&dealerId=${item.id}&dealerName=${item.name}&dealerCode=${item.code}`
             );
             wx.navigateTo({
                 // eslint-disable-next-line prettier/prettier
-                url: `/pages/testDrive?provinceId=${item.provinceId}&provinceName=${item.provinceName}&cityId=${item.cityId}&cityName=${item.cityName}&dealerId=${item.id}&dealerName=${item.name}`
+                url: `/pages/testDrive?provinceId=${item.provinceId}&provinceName=${item.provinceName}&cityId=${item.cityId}&cityName=${item.cityName}&dealerId=${item.id}&dealerName=${item.name}&dealerCode=${item.code}`
             });
         }
     }

src/pages/testDrive.vue

@@ -67,7 +67,7 @@
             </van-checkbox>
         </div>
         <div class="btn-wrapper">
-            <van-button block :color="$colors.prim" :disabled="btnDisable">确认提交</van-button>
+            <van-button block :color="$colors.prim" :disabled="btnDisable" @click="submit">确认提交</van-button>
         </div>
 
         <van-action-sheet :show="showProvinceDialog">
@@ -105,9 +105,11 @@
                 id="dealerPicker"
             />
         </van-action-sheet>
+        <van-dialog id="van-dialog" />
     </div>
 </template>
 <script>
+import Dialog from '../vant/dialog/dialog';
 export default {
     data() {
         return {
@@ -122,6 +124,7 @@ export default {
             cityId: null,
             dealerId: null,
             dealerName: null,
+            dealerCode: '',
             provinceName: null,
             cityName: null,
             provinceList: [],
@@ -144,6 +147,7 @@ export default {
         if (this.$mp.query.dealerId) {
             this.dealerId = this.$mp.query.dealerId;
             this.dealerName = this.$mp.query.dealerName;
+            this.dealerCode = this.$mp.query.dealerCode;
         }
         this.$nextTick(() => {
             this.disableWatch = false;
@@ -196,9 +200,7 @@ export default {
                 title: ''
             });
             this.$http
-                .get('/applets/sendmobilecode', {
-                    mobile: this.mobile
-                })
+                .post(`https://www.jetour.com.cn/cmsapi/business/LeaveLeads/leaveLeadsSmsCode/${this.mobile}`)
                 .then(res => {
                     wx.hideLoading();
                     this.t = 60;
@@ -268,9 +270,11 @@ export default {
                     }
                 )
                 .then(res => {
-                    res.data = res.data.filter(
-                        i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
-                    );
+                    if (process.env.NODE_ENV !== 'development') {
+                        res.data = res.data.filter(
+                            i => i.showWebsiteFlag == 1 && !(typeof i.code === 'string' && i.code.startsWith('99999'))
+                        );
+                    }
                     this.dealerList = res.data;
                 });
         },
@@ -296,7 +300,63 @@ export default {
             let value = this.$mp.page.selectComponent('#dealerPicker').getColumnValue(0);
             this.dealerName = value.name;
             this.dealerId = value.id;
+            this.dealerCode = value.code;
             this.showDealerDialog = false;
+        },
+        submit() {
+            if (this.btnDisable) return;
+            if (!this.provinceId) {
+                this.$toast('请选择省份');
+                return;
+            }
+            if (!this.cityId) {
+                this.$toast('请选择城市');
+                return;
+            }
+            if (!this.mobile) {
+                this.$toast('请输入手机号');
+                return;
+            }
+            if (!this.code) {
+                this.$toast('请输入验证码');
+                return;
+            }
+            if (!this.name) {
+                this.$toast('请输入姓名');
+                return;
+            }
+            if (!this.check) {
+                this.$toast('请阅读并同意隐私政策');
+                return;
+            }
+            this.$loading();
+            this.$http
+                .post('https://www.jetour.com.cn/cmsapi/business/LeaveLeads/save', {
+                    cityId: this.cityId,
+                    city: this.cityName,
+                    dealerCode: this.dealerCode,
+                    dealerId: this.dealerId,
+                    fromSource: '小程序-官网商城小程序留资',
+                    leadsType: 2,
+                    mobile: this.mobile,
+                    name: this.name,
+                    province: this.provinceName,
+                    provinceId: this.provinceId
+                })
+                .then(res => {
+                    this.$loading.close();
+                    Dialog.alert({
+                        title: '操作提示',
+                        message: '恭喜您报名成功',
+                        className: 'custom-class-name'
+                    }).then(() => {
+                        // on close
+                        wx.navigateBack();
+                    });
+                })
+                .catch(e => {
+                    console.log(e);
+                });
         }
     },
     watch: {
@@ -367,4 +427,9 @@ export default {
         border-radius: 8px;
     }
 }
+.dialog-index--custom-class-name {
+    .dialog-index--van-dialog__confirm {
+        color: @prim !important;
+    }
+}
 </style>

src/pages/video.vue

@@ -7,17 +7,18 @@
 <template>
     <div class="container" :style="{ height: height + 'px' }">
         <video
+            id="video"
             :style="{ height: height + 'px' }"
             :src="video.path"
             :poster="video.thumbnail"
             @controlstoggle="controlstoggle"
         >
-            <van-transition :show="showTitle" custom-class="block" duration="250">
-                <div class="bar" style="height: 44px;">
-                    <div class="back-wrapper" style="padding: 10px 14px" @click="back">
-                        <img src="../static/imgs/back.png" class="icon-back" style="width: 24px;height: 24px;" />
-                    </div>
+            <div class="bar" style="height: 44px;" :style="{ paddingTop: safeAreaTop + 'px' }">
+                <div class="back-wrapper" style="padding: 10px 14px" @click="back">
+                    <img src="../static/imgs/back.png" class="icon-back" style="width: 24px;height: 24px;" />
                 </div>
+            </div>
+            <van-transition :show="showTitle" custom-class="block" duration="250">
                 <div class="info">
                     <div class="col1">
                         <div class="title">{{ video.name }}</div>
@@ -33,23 +34,36 @@
     </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 export default {
     data() {
         return {
             height: 100,
             video: {},
-            showTitle: true
+            showTitle: true,
+            videoCtx: null
         };
     },
     created() {
         this.height = wx.getSystemInfoSync().windowHeight;
+        console.log(wx.getSystemInfoSync());
         this.$http
             .get(`https://www.jetour.com.cn/cmsapi/business/Carousel/get/${this.$mp.query.id || 99}`)
             .then(res => {
                 console.log(res);
                 this.video = res.data;
+                this.videoCtx = wx.createVideoContext('video', this);
+                setTimeout(() => {
+                    this.videoCtx.play();
+                }, 100);
+            })
+            .catch(e => {
+                console.log(e);
             });
     },
+    computed: {
+        ...mapState(['safeAreaTop'])
+    },
     methods: {
         count(c) {
             if (c > 10000) {
@@ -84,8 +98,8 @@ video {
     position: fixed;
     left: 0;
     right: 0;
-    bottom: 40px;
-    bottom: calc(40px + env(safe-area-inset-bottom));
+    bottom: 60px;
+    // bottom: calc(40px + env(safe-area-inset-bottom));
     padding-left: 20px;
     padding-right: 10px;
     z-index: 2;
@@ -129,7 +143,6 @@ video {
     left: 0;
     right: 0;
     .flex();
-    padding-top: env(safe-area-inset-top);
     .back-wrapper {
         .icon-back {
         }