refactor:增加动态获取车牌号

CHANGE_LOG.md

@@ -33,6 +33,11 @@
 
   1.0.9 / 2018-11-01
 ==================
- * 移除小程序animate事件
- * 页面布局单位由rpx改为px，更改兼容vue原生页面
- * 完善api和event
+ * 兼容无感停车
+
+  1.1.0 / 2018-11-06
+==================
+ * 移除scss-bem
+ * 移除scss，兼容原生css
+ * 增加动态获取输入的车牌号
+ * 完善demo

README.md

@@ -17,16 +17,14 @@
 | active-border     | String       | #ff7149          | 自定义正在输入的格子边框颜色 |
 | extra-key     | String       | 完成          | 右下角按键内容 |
 | keyboard       | Function       | null          | 获取键盘输入结果 |
+| keyboard       | Function       | null          | 获取键盘输入结果 |
 
 
 ## Event
 
 | 事件名              | 说明           | 参数        |
 | -----------------|--------------- | ----------------  |
 | keyboard        | 点击完成键时触发         |     key: 按键所选择的内容         |
-| input        | 点击按键时触发         |     -         |
-| close        | 点击关闭按钮或非键盘区域时触发         |     -         |
-| delete        | 点击删除键时触发         |     -         |
 
 ## 基本使用方法
 
@@ -40,8 +38,8 @@ npm i mpvue-keyboard --save
 
 ``` vue
 <template>
-<view>车牌号为：<text style="font-size:60rpx">{{msg}}</text></view>
-     <keyboard :show="true" extra-key="支付" @keyboard="keyboardChange" active-border="#0deafe" base-border="38f8f8f" @input="inputChange" @close="closeChange" @delete="delChnage"></keyboard>
+    <keyboard :plateNum.sync="plateNum" @keyboard="keyboardChange" :show.sync="show" extraKey="立即支付" active-border="#6f85ff" base-border="#6f85ff"></keyboard>
+    <button @click="bandChange">绑定无感支付</button>
 </template>
 
 <script>
@@ -52,22 +50,16 @@ export default {
     },
     data() {
         return {
-            msg:msg
+            plateNum: ''
         };
     },
     computed: {},
     methods: {
-        change(msg) {
-            this.msg = msg
-        },
-        inputChange() {
-            console.log('get input');
-        },
-        closeChange() {
-            console.log('get close');
+        keyboardChange(plate) {
+            this.plateNum = plate;
         },
-        delChnage() {
-            console.log('get del')
+        async bandChange() {
+            console.log(this.plateNum);
         }
     },
     mounted() {}

example/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <view>车牌号为：<text style="font-size:60rpx">{{msg}}</text></view>
-    <keyboard :show="true" extra-key="支付" @keyboard="keyboard" active-border="#0deafe" base-border="38f8f8f" @input="inputChange" @close="closeChange" @delete="delChnage"></keyboard>
+    <keyboard :plateNum.sync="plateNum" @keyboard="keyboardChange" :show.sync="show" extraKey="立即支付" active-border="#6f85ff" base-border="#6f85ff"></keyboard>
+    <button @click="bandChange">绑定无感支付</button>
 </template>
 
 <script>
@@ -11,24 +11,45 @@ export default {
     },
     data() {
         return {
-            msg: ''
+            plateNum: ''
         };
     },
     computed: {},
     methods: {
-        keyboard(msg) {
-            this.msg = msg;
+        keyboardChange(plate) {
+            this.plateNum = plate;
         },
-        inputChange() {
-            console.log('get input');
+        async bandChange() {
+            console.log(this.plateNum);
+            if (this.plateNum && this.plateNum.length >= 7) {
+                await this.navCar();
+            } else {
+                this.show = true;
+            }
         },
-        closeChange() {
-            console.log('get close');
-        },
-        delChnage() {
-            console.log('get del');
+        async navCar() {
+            const { result } = await api.getAutoParkingInfo();
+            const miniParams = {
+                appId: 'wxbcad394b3d99dac9',
+                path: 'pages/route/index',
+                extraData: {
+                    appid: result.appid,
+                    sub_appid: result.sub_appid,
+                    mch_id: result.mch_id,
+                    sub_mch_id: result.sub_mch_id,
+                    nonce_str: result.nonce_str,
+                    sign_type: 'HMAC-SHA256',
+                    sign: result.sign,
+                    trade_scene: 'PARKING',
+                    plate_number: this.plateNum,
+                    sub_openid: result.sub_openid
+                }
+            };
+            navigateToMiniProgram(miniParams).then(minires => {
+                console.log(minires);
+            });
         }
     },
     mounted() {}
 };
-</script>
+</script>