.

megalo.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const fs = require('fs');
 module.exports = {
     // 构件生产模式时是否生成source map（仅在process.env.NODE_ENV === 'production' 时该选项生效）
     productionSourceMap: false,
@@ -22,6 +23,27 @@ module.exports = {
                 from: path.resolve('sitemap.json'),
                 to: path.resolve(`dist-${process.env.PLATFORM}/sitemap.json`)
             });
+            args[0].push({
+                context: path.resolve('src'),
+                from: path.resolve('src/vant'),
+                to: path.resolve(`dist-${process.env.PLATFORM}/vant`)
+            });
+            // let str = /usingComponents:[\W](\{[\w\W]+?\})/
+            //     .exec(fs.readFileSync('src/main.js').toString())[1]
+            //     .replace(/[\s]/g, '')
+            //     .replace(/'/g, '"');
+            // console.log(str);
+            // let components = JSON.parse(str);
+            // Object.keys(components).forEach(key => {
+            //     let from = path.resolve('src', components[key].replace(/^\//, ''), '../');
+            //     let to = path.resolve(`dist-${process.env.PLATFORM}`, components[key].replace(/^\//, ''), '../');
+            //     args[0].push({
+            //         context: path.resolve('src'),
+            //         from,
+            //         to
+            //     });
+            //     console.log(from, to);
+            // });
             return args;
         });
         chainConfig.module

project.config.json

@@ -66,6 +66,12 @@
                     "name": "搜索",
                     "pathName": "pages/search",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "实名认证",
+                    "pathName": "pages/realName",
+                    "scene": null
                 }
             ]
         }

src/authUtil.js

@@ -0,0 +1,175 @@
+/* eslint-disable */
+const formatTime = date => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
+}
+
+const formatNumber = n => {
+  n = n.toString()
+  return n[1] ? n : '0' + n
+}
+
+module.exports = {
+  formatTime: formatTime,
+  initProduct: initProduct,
+  uploadImage: uploadImage,
+  uploadBase64Image: uploadBase64Image,
+  livedetect: livedetect,
+  idcardOCR: idcardOCR,
+  realNameAuth: realNameAuth,
+  compare: compare
+}
+
+function initProduct(membershipKey, callback) {
+  wx.request({
+    url: 'https://www.chinadatapay.com/MyAccount/checkMembership', // 初始化产品
+    dataType: 'json',
+    method: 'POST',
+    data: {
+      membershipKey: membershipKey
+    },
+    header: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    success(res) {
+      //执行回调
+      return typeof callback == "function" && callback(res.data);
+    }
+  })
+}
+function uploadImage(appkey, tempFilePath, callback) {
+  wx.uploadFile({
+    url: 'https://file.chinadatapay.com/img/upload', // 图片上传
+    filePath: tempFilePath,
+    name: 'file',
+    dataType: 'json',
+    formData: {
+      appkey: appkey
+    },
+    success(res) {
+      const data = JSON.parse(res.data);
+      //执行回调
+      return typeof callback == "function" && callback(data);
+    }
+  })
+}
+function uploadBase64Image(appkey, base64Image, callback) {
+  wx.request({
+    url: 'https://file.chinadatapay.com/img/uploadByBase64',
+    dataType: 'json',
+    method: 'POST',
+    data: {
+      appkey: appkey,
+      base64Image: base64Image
+    },
+    header: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    success(res) {
+      const data = res.data;
+      //执行回调
+      return typeof callback == "function" && callback(data);
+    }
+  })
+}
+function livedetect(membershipKey, key, tempFilePath, apiKey, apiSecret, callback) {
+  this.uploadImage(key, tempFilePath, function (result) {
+    var imageId = result.data;
+    wx.request({
+      url: 'https://api.chinadatapay.com/trade/user/2104', // 活体检测
+      dataType: 'json',
+      method: 'POST',
+      data: {
+        imageId: imageId,
+        key: key,
+        apiSecret: apiSecret,
+        return_image: true,
+        apiKey: apiKey,
+        membershipkey: membershipKey
+      },
+      header: {
+        'content-type': 'application/x-www-form-urlencoded'
+      },
+      success(res) {
+        const data = res.data
+        //执行回调
+        return typeof callback == "function" && callback(data);
+      }
+    })
+  });
+}
+function compare(membershipKey, key, base64Image, name, idcard, callback) {
+  this.uploadBase64Image(key, base64Image, function (result) {
+    var imageId = result.data;
+    wx.request({
+      url: 'https://api.chinadatapay.com/communication/personal/2061', // 人像比对
+      dataType: 'json',
+      method: 'POST',
+      data: {
+        imageId: imageId,
+        key: key,
+        name: name,
+        idcard: idcard,
+        membershipkey: membershipKey
+      },
+      header: {
+        'content-type': 'application/x-www-form-urlencoded'
+      },
+      success(res) {
+        const data = res.data
+        //执行回调
+        return typeof callback == "function" && callback(data);
+      }
+    })
+  });
+}
+function realNameAuth(membershipKey, key, name, idcard, callback) {
+  wx.request({
+    url: 'https://api.chinadatapay.com/communication/personal/1882', // 实名认证
+    dataType: 'json',
+    method: 'POST',
+    data: {
+      key: key,
+      name: name,
+      idcard: idcard,
+      membershipkey: membershipKey
+    },
+    header: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    success(res) {
+      const data = res.data
+      //执行回调
+      return typeof callback == "function" && callback(data);
+    }
+  })
+}
+function idcardOCR(membershipKey, key, tempFilePath, callback) {
+  this.uploadImage(key, tempFilePath, function (result) {
+    var imageId = result.data;
+    wx.request({
+      url: 'https://api.chinadatapay.com/trade/user/1985', // 身份证OCR识别
+      dataType: 'json',
+      method: 'POST',
+      data: {
+        imageId: imageId,
+        key: key,
+        membershipkey: membershipKey
+      },
+      header: {
+        'content-type': 'application/x-www-form-urlencoded'
+      },
+      success(res) {
+        const data = res.data;
+        //执行回调
+        return typeof callback == "function" && callback(data);
+      }
+    })
+  })
+}

src/main.js

@@ -3,7 +3,7 @@ import Vue from 'vue';
 import VHtmlPlugin from '@megalo/vhtml-plugin';
 import Vuex from 'vuex';
 import http from './plugins/http';
-import Dialog from './native/vant/dialog/dialog';
+import Dialog from './vant/dialog/dialog';
 Vue.prototype.$colors = {
     prim: '#1989fa'
 };
@@ -22,7 +22,7 @@ app.$mount();
 export default {
     config: {
         // pages 的首个页面会被编译成首页
-        pages: ['pages/home', 'pages/search'],
+        pages: ['pages/home', 'pages/search', 'pages/realName'],
         window: {
             backgroundTextStyle: 'light',
             navigationBarBackgroundColor: '#fff',
@@ -30,20 +30,22 @@ export default {
             navigationBarTextStyle: 'black'
         },
         usingComponents: {
-            'van-button': '/native/vant/button/index',
-            'van-tabs': '/native/vant/tabs/index',
-            'van-tab': '/native/vant/tab/index',
-            'van-notice-bar': '/native/vant/notice-bar/index',
-            'van-icon': '/native/vant/icon/index',
-            'van-grid-item ': '/native/vant/grid-item/index',
-            'van-dialog': '/native/vant/dialog/index',
-            'van-search': '/native/vant/search/index',
-            'van-empty': '/native/vant/empty/index',
-            'van-sticky': '/native/vant/sticky/index',
-            'van-loading': '/native/vant/loading/index',
-            'van-area': '/native/vant/area/index',
-            'van-action-sheet': '/native/vant/action-sheet/index',
-            'van-picker': '/native/vant/picker/index'
+            'van-button': '/vant/button/index',
+            'van-tabs': '/vant/tabs/index',
+            'van-tab': '/vant/tab/index',
+            'van-notice-bar': '/vant/notice-bar/index',
+            'van-icon': '/vant/icon/index',
+            'van-grid-item ': '/vant/grid-item/index',
+            'van-dialog': '/vant/dialog/index',
+            'van-search': '/vant/search/index',
+            'van-empty': '/vant/empty/index',
+            'van-sticky': '/vant/sticky/index',
+            'van-loading': '/vant/loading/index',
+            'van-action-sheet': '/vant/action-sheet/index',
+            'van-picker': '/vant/picker/index',
+            'van-cell-group': '/vant/cell-group/index',
+            'van-field': '/vant/field/index',
+            'van-uploader': '/vant/uploader/index'
         },
         permission: {
             'scope.userLocation': {

src/pages/home.vue

@@ -52,9 +52,9 @@
                     </div>
                     <!-- <div class="tip">点击可手动选择更换景区</div> -->
                 </div>
-                <div class="row name" v-if="tab === 1">
+                <div class="row name" v-if="tab === 1" @click="showTimePicker = true">
                     <div class="indicator" :style="{ background: '#67C23A' }"></div>
-                    <div class="name-content">预约时间 6月17日 19:00</div>
+                    <div class="name-content">{{ appointmentTimeText }}</div>
                     <van-icon name="arrow" />
                 </div>
                 <div class="row time" v-if="openTime">{{ openTime.time }}</div>
@@ -89,8 +89,17 @@
         >
         </van-dialog>
 
-        <van-action-sheet :show="showAppoint" @close="showAppoint = false">
-            <van-picker id="picker" :columns="appointmentTimeOptions" @change="onAppointTimeChange" value-key="label" />
+        <van-action-sheet :show="showTimePicker" @close="showTimePicker = false">
+            <van-picker
+                id="picker"
+                :columns="appointmentTimeOptions"
+                @change="onAppointTimeChange"
+                value-key="label"
+                :show-toolbar="true"
+                title="选择预约时间"
+                @cancel="showTimePicker = false"
+                @confirm="confirmAppointmentTime"
+            />
         </van-action-sheet>
     </div>
 </template>
@@ -109,7 +118,7 @@ import {
     addMinutes,
     isSameDay
 } from 'date-fns';
-import { zhCN, da } from 'date-fns/locale';
+import zhCN from 'date-fns/locale/zh-CN';
 export default {
     name: 'home',
     data() {
@@ -137,7 +146,8 @@ export default {
                     className: 'time'
                 }
             ],
-            showAppoint: true
+            showTimePicker: false,
+            appointmentTime: null
         };
     },
     computed: {
@@ -188,6 +198,16 @@ export default {
                 open: i.open,
                 time: i.open ? `营业时间：${i.startTime} - ${i.endTime}` : '今日停业'
             };
+        },
+        appointmentTimeText() {
+            if (this.appointmentTime) {
+                let weekDay = format(this.appointmentTime, 'EEEE', { locale: zhCN });
+                if (isSameDay(this.appointmentTime, new Date())) {
+                    weekDay = '今天';
+                }
+                return format(this.appointmentTime, 'MMMdo $$ HH:mm', { locale: zhCN }).replace('$$', weekDay);
+            }
+            return '请选择预约时间';
         }
     },
     created() {
@@ -221,6 +241,18 @@ export default {
                 })
                 .then(res => {
                     wx.hideLoading();
+                    wx.navigateToMiniProgram({
+                        appId: 'wx143ab95df382a6ee',
+                        path: 'pages/productOne/productOne',
+                        extraData: {
+                            membershipKey: '54c5add1-e9c0-4cee-8179-cc6d02654ac8',
+                            isBackMiniProgram: true //是否关闭第三方小程序
+                        },
+                        envVersion: 'release',
+                        success(res) {
+                            // 打开成功
+                        }
+                    });
                 })
                 .catch(e => {
                     wx.hideLoading();
@@ -338,13 +370,21 @@ export default {
                 console.log(values);
                 picker.setColumnValues(1, values);
             }
+        },
+        confirmAppointmentTime() {
+            const picker = this.$mp.page.selectComponent('#picker');
+            let values = picker.getValues();
+            if (values[1]) {
+                this.appointmentTime = values[1].time;
+            }
+            this.showTimePicker = false;
         }
     },
     watch: {
         currentScenic(scenic) {
             if (scenic) {
                 const date = new Date();
-                const noon = set(date, { hours: 22, minutes: 0, seconds: 0 });
+                const noon = set(date, { hours: 12, minutes: 0, seconds: 0 });
 
                 const picker = this.$mp.page.selectComponent('#picker');
 
@@ -363,6 +403,11 @@ export default {
 
                 this.onAppointTimeChange({ detail: { index: 0, value: [values[0]] } });
             }
+        },
+        tab(tab) {
+            if (tab === 1) {
+                this.showTimePicker = true;
+            }
         }
     }
 };

src/pages/realName.vue

@@ -0,0 +1,237 @@
+<config>
+{
+    "navigationBarTitleText": "实名认证"
+}
+</config>
+<template>
+    <div class="intro" v-if="step === 0">
+        <img src="../static/imgs/logo.png" class="logo" />
+        <div class="title">南京新研协同定位导航研究院<br />有限公司</div>
+        <div class="desc">
+            为了便于你满足本公司实名制的要求，需要你使用认证服务，并在认证完成后，授权其查询如下信息：
+        </div>
+        <div class="highlight">*查询你的证件号、姓名、人脸照片</div>
+        <div class="agree">开始认证则表示同意<span class="link">《认证服务协议》</span></div>
+        <van-button type="primary" class="btn" round block @click="step = 1">开始认证</van-button>
+    </div>
+    <div v-else-if="step === 1" class="form">
+        <div class="title">填写姓名与身份证号</div>
+        <van-cell-group>
+            <van-field label="姓名" placeholder="请输入姓名" :value="name" @input="name = $event.detail" />
+            <van-field label="身份证" placeholder="请输入身份证" :value="idNo" @input="idNo = $event.detail" />
+        </van-cell-group>
+        <div style="padding: 30px">
+            <van-button type="primary" class="btn" round block @click="checkName">下一步</van-button>
+        </div>
+    </div>
+    <div v-else-if="step === 2" class="form">
+        <div class="title">上传身份证正面照片</div>
+        <div>
+            <van-uploader>
+                <div class="uploader-wrapper">
+                    <div class="uploader">点击上传身份证照片</div>
+                </div>
+            </van-uploader>
+        </div>
+        <div style="padding: 30px">
+            <van-button type="primary" class="btn" round block @click="chooseVideo">下一步</van-button>
+        </div>
+    </div>
+    <div v-else-if="step === 3" class="form">
+        <div class="title">活体检测</div>
+        <div class="tips">
+            <div class="tip">请将人脸至于屏幕中央</div>
+            <div class="tip">是用前置摄像头录制一段<span class="highlight">3-5</span>秒的视频</div>
+            <div class="tip">录制过程中请按照以下提示录制</div>
+            <div class="tip-icons">
+                <div class="row">
+                    <div class="item">
+                        <img src="../static/imgs/tip_icon_01.png" class="icon" />
+                        <div class="text">脸部处于屏幕中央</div>
+                    </div>
+                    <div class="item">
+                        <img src="../static/imgs/tip_icon_02.png" class="icon" />
+                        <div class="text">拍摄场景光线充足</div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="item">
+                        <img src="../static/imgs/tip_icon_03.png" class="icon" />
+                        <div class="text">摘下帽子</div>
+                    </div>
+                    <div class="item">
+                        <img src="../static/imgs/tip_icon_04.png" class="icon" />
+                        <div class="text">摘下眼镜</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="padding: 30px">
+            <van-button type="primary" class="btn" round block @click="chooseVideo">下一步</van-button>
+        </div>
+    </div>
+</template>
+<script>
+import authUtil from '../authUtil.js';
+const membershipKey = '54c5add1-e9c0-4cee-8179-cc6d02654ac8';
+const secret = 'xbonDT4Kg7B1ToeE';
+export default {
+    data() {
+        return {
+            step: 3,
+            name: '',
+            idNo: ''
+        };
+    },
+    onShow() {
+        authUtil.initProduct(membershipKey, res => {
+            console.log(res);
+            if (res.code == '0') {
+                let data = res.data;
+            }
+        });
+    },
+    methods: {
+        checkName() {
+            console.log(this.name, this.idNo);
+            if (!this.name) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请输入姓名'
+                });
+                return;
+            }
+            if (!this.idNo) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请输入身份证'
+                });
+                return;
+            }
+            wx.showLoading({
+                title: '加载中',
+                mask: true
+            });
+            authUtil.realNameAuth(membershipKey, '0c3b7021deb2a249d3b27c1ea0d92386', this.name, this.idNo, res => {
+                console.log(res);
+                wx.hideLoading();
+                if (res.code == '10000') {
+                    this.step = 2;
+                } else {
+                    wx.showToast({
+                        icon: 'none',
+                        title: res.message
+                    });
+                }
+            });
+        },
+        chooseVideo() {
+            wx.chooseVideo({
+                sourceType: ['camera'],
+                maxDuration: 10,
+                camera: 'front',
+                success(res) {
+                    console.log(res.tempFilePath);
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.intro {
+    text-align: center;
+    padding: 0 35px;
+    .logo {
+        width: 50px;
+        height: 50px;
+        margin-top: 50px;
+    }
+    .title {
+        margin-top: 20px;
+        color: @text1;
+        font-size: 18px;
+        font-weight: 500;
+    }
+    .desc {
+        text-align: left;
+        text-indent: 2em;
+        margin-top: 20px;
+        color: @text2;
+    }
+    .highlight {
+        color: @prim;
+        margin-top: 10px;
+    }
+    .agree {
+        margin-top: 30px;
+        margin-bottom: 30px;
+        color: @text3;
+        .link {
+            color: @prim;
+        }
+    }
+}
+.form {
+    .title {
+        margin: 30px 0;
+        color: @text1;
+        font-size: 18px;
+        font-weight: 500;
+        text-align: center;
+    }
+    .tips {
+        padding: 0 30px;
+        .tip {
+            line-height: 30px;
+            font-size: 14px;
+            color: @text1;
+        }
+        .highlight {
+            color: @prim;
+        }
+    }
+    .tip-icons {
+        margin-top: 20px;
+        .row {
+            .flex();
+            justify-content: space-between;
+            margin-bottom: 10px;
+            .item {
+                .flex-col();
+                align-items: center;
+                flex-basis: 0;
+                flex-grow: 1;
+                .icon {
+                    width: 60px;
+                    height: 60px;
+                }
+                .text {
+                    color: @text2;
+                    font-size: 14px;
+                    line-height: 24px;
+                }
+            }
+        }
+    }
+}
+</style>
+<style lang="less">
+page {
+    background: @bg;
+}
+.uploader-wrapper {
+    text-align: center;
+}
+.uploader {
+    width: calc(100vw - 60px);
+    margin: 0 30px;
+    border: 1px dashed @border1;
+    border-radius: 6px;
+    height: 160px;
+    line-height: 160px;
+    font-size: 13px;
+    color: @text3;
+    background: white;
+}
+</style>

src/styles/common.less

@@ -10,6 +10,7 @@
 @border2: #e4e7ed;
 @border3: #ebeef5;
 @border4: #f2f6fc;
+@bg: #f2f4f5;
 .flex() {
     display: flex;
     align-items: center;