自定义键盘组件

app.json

 {
   "pages": [
+    "pages/landscan/landscan",
     "pages/payresult/payresult",
     "pages/index/index"
   ],

mini.project.json

+{
+  "component2": true
+}
\ No newline at end of file

pages/components/landkeybord/landkeybord.acss

+/* 页面布局 */
+
+.keybordpage {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.65);
+    display: flex;
+    flex-direction: row;
+}
+
+/* 键盘左半部分布局 */
+
+.keybord-left {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 键盘右半部分布局 */
+
+.keybord-right {
+    height: 100%;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* icon+结果 */
+
+.result-container {
+    width: 80%;
+    height: 60rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center
+}
+
+/* icon */
+
+.result-mark {
+    width: 10%;
+    height: 100%;
+}
+
+/* 结果展示 */
+
+.result-display {
+    width: 80%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+/* 结果展示文字 */
+
+.result-display-text {
+    font-size: 38rpx;
+    font-weight: bold;
+    color: white
+}
+
+/* 结果展示文字 */
+
+.result-display-text-empty {
+    font-size: 29rpx;
+    color: rgba(255, 255, 255, 1);
+    opacity: 0.45;
+}
+
+/* 中间空白的部分 */
+
+.result-blank {
+    width: 10%;
+    height: 100%;
+}
+
+/* 下划线 */
+
+.result-baseline {
+    width: 80%;
+    height: 1rpx;
+    background: rgba(255, 255, 255, 1);
+    opacity: 0.85
+}
+
+/* 关闭按钮 */
+
+.keybord-close {
+    width: 22rpx;
+    height: 22rpx;
+    align-self: flex-end;
+    margin-right: 10rpx;
+    margin-top: 10rpx;
+}
+
+/* 键盘按钮 */
+
+.keybord-button-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap
+}
+
+/* 键盘按钮 */
+
+.keybord-button {
+    width: 98rpx;
+    height: 55rpx;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    margin-top: 14rpx;
+    margin-left: 17rpx;
+}
+
+/* 完成输入按钮 */
+
+.input-finished {
+    width: 330rpx;
+    height: 55rpx;
+    border-radius: 5rpx;
+    margin-top: 15rpx;
+    margin-left: 17rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    background: rgba(0, 122, 255, 1);
+}
+
+/* 完成输入按钮 */
+
+.input-finished-text {
+    font-size: 24rpx;
+    color: white
+}
\ No newline at end of file

pages/components/landkeybord/landkeybord.axml

+<view class="keybordpage" a:if="{{scenes != 0}}">
+  <view class="keybord-left">
+    <view class="result-container">
+      <image class="result-mark" mode="aspectFit" src="/images/icon_barcode.png" a:if="{{scenes == 1}}" />
+      <image class="result-mark" mode="aspectFit" src="/images/icon_member.png" a:if="{{scenes == 2}}" />
+      <image class="result-mark" mode="aspectFit" src="/images/icon_rmb.png" a:if="{{scenes == 3 || scenes == 4}}" />
+      <view class="result-blank"/>
+      <view class="result-display">
+        <text class="result-display-text-empty" a:if="{{result == '' && scenes == 1}}">请输入商品条码</text>
+        <text class="result-display-text-empty" a:if="{{result == '' && scenes == 2}}">请输入会员号</text>
+        <text class="result-display-text-empty" a:if="{{result == '' && scenes == 3 }}">请输入收款金额</text>
+        <text class="result-display-text-empty" a:if="{{result == '' && scenes == 4}}">请输入退款金额</text>
+        <text class="result-display-text" a:if="{{result != ''}}">{{result}}</text>
+      </view>
+    </view>
+    <view class="result-baseline">
+    </view>
+  </view>
+  <view class="keybord-right">
+    <image class="keybord-close" mode="aspectFit" src="/images/close_keybord.png" catchTap="closeKeybord" />
+    <view class="keybord-button-container">
+      <image class="keybord-button" mode="aspectFit" src="/images/button_7.png" catchTap="add7"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_8.png" catchTap="add8"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_9.png" catchTap="add9"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_4.png" catchTap="add4"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_5.png" catchTap="add5"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_6.png" catchTap="add6"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_1.png" catchTap="add1"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_2.png" catchTap="add2"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_3.png" catchTap="add3"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_0.png" catchTap="add0"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_point.png" catchTap="addpoint"/>
+      <image class="keybord-button" mode="aspectFit" src="/images/button_delete.png" catchTap="delete" />
+    </view>
+    <view class="input-finished" onTap="finish" a:if="{{scenes == 1}}">
+      <text class="input-finished-text">确定</text></view>
+    <view class="input-finished" onTap="finish" a:if="{{scenes == 2}}">
+      <text class="input-finished-text">登录</text></view>
+    <view class="input-finished" onTap="finish" a:if="{{scenes == 3}}">
+      <text class="input-finished-text">收款</text></view>
+    <view class="input-finished" onTap="finish" a:if="{{scenes == 4}}">
+      <text class="input-finished-text">去退款</text></view>
+  </view>
+</view>
\ No newline at end of file

pages/components/landkeybord/landkeybord.js

+Component({
+  mixins: [],
+  data: {
+    result: "",
+    scenes: 2,
+
+
+  },
+
+  props: {
+
+    //场景 1.输入商品码 2.会员 3.收款  4.退款
+    scene: 1,
+
+  },
+  didMount() { },
+  didUpdate() { },
+  didUnmount() { },
+  deriveDataFromProps(nextProps) {
+
+    //弹窗消失的时候 result清空
+    if (nextProps.scene == 0) {
+       this.setData({
+      result: '',
+    });
+    }
+
+    this.setData({
+      scenes: nextProps.scene,
+    });
+
+  },
+  methods: {
+
+
+    add7(e) {
+      this.setData({ result: this.data.result + "7" });
+    }, add8(e) {
+      this.setData({ result: this.data.result + "8" });
+    }, add9(e) {
+      this.setData({ result: this.data.result + "9" });
+    }, add4(e) {
+      this.setData({ result: this.data.result + "4" });
+    }, add5(e) {
+      this.setData({ result: this.data.result + "5" });
+    }, add6(e) {
+      this.setData({ result: this.data.result + "6" });
+    }, add1(e) {
+      this.setData({ result: this.data.result + "1" });
+    }, add2(e) {
+      this.setData({ result: this.data.result + "2" });
+    }, add3(e) {
+      this.setData({ result: this.data.result + "3" });
+    }, add0(e) {
+      this.setData({ result: this.data.result + "0" });
+    }, addpoint(e) {
+      this.setData({ result: this.data.result + "." });
+    }, delete(e) {
+      if (this.data.result.length > 1) {
+        let cur = this.data.result;
+        cur = cur.substring(0, cur.length - 1)
+        this.setData({ result: cur });
+      } else {
+        this.setData({ result: '' });
+      }
+    }, finish(e) {
+        this.props.onKeyBordFinished(this.data.result); 
+    },closeKeybord(e){
+       this.props.onKeyBordClose(); 
+    }
+
+
+  },
+});

pages/components/landkeybord/landkeybord.json

+{
+  "component": true
+}
\ No newline at end of file

pages/index/index.axml

-<view>
-  this is a blank page
-</view>
+
+
+
+
+

pages/index/index.json

-{}
+{
\ No newline at end of file
+    "transparentTitle": "always",
+    "usingComponents": {
+        "land-keybord": "../components/landkeybord/landkeybord"
+    }
+}
\ No newline at end of file

pages/landscan/landscan.acss

@@ -8,6 +8,16 @@
     position: absolute;
 }
 
+/* 带有高斯模糊的效果 */
+.pageland-filter {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    filter: blur(3px);
+}
+
 /* 扫商品页面上方 */
 
 .land-scan-top {

pages/landscan/landscan.axml

+
 <view class="pageland">
   <view class="land-scan-top">
     <button class="land-scan-top-member-login" size="default" type="ghost">会员登陆</button>
@@ -28,9 +29,9 @@
           <view class="good-bottom">
             <view class="good-price">¥{{item.price}}</view>
             <view class="good-operat">
-              <image class="good-decrease" mode="scaleToFill" src="/images/good-decrease.png"/>
+              <image class="good-decrease" mode="scaleToFill" src="/images/good_decrease.png"/>
               <text class="good-num">{{item.quantity}}</text>
-              <image class="good-increase" mode="scaleToFill" src="/images/good-increase.png"/>
+              <image class="good-increase" mode="scaleToFill" src="/images/good_increase.png"/>
             </view>
           </view>
         </view>
@@ -38,7 +39,7 @@
     </scroll-view>
     <view class="more-operating">
       <view class="operating-top">
-        <image class="operat-icon" mode="aspectFit" src="/images/manual_barcode.png"/>
+        <image class="operat-icon" mode="aspectFit" src="/images/manual_barcode.png" catchTap="manualBarcode"/>
         <image class="operat-icon" mode="aspectFit" src="/images/use_coupon.png"/>
         <image class="operat-icon" mode="aspectFit" src="/images/clear_shop_list.png"/>
       </view>
@@ -49,4 +50,8 @@
       </view>
     </view>
   </view>
-</view>
+</view>
\ No newline at end of file
+
+<!-- 键盘 -->
+<land-keybord  scene="{{scene}}" onKeyBordFinished="onKeyBordFinished" onKeyBordClose="onKeyBordClose">
+</land-keybord>
\ No newline at end of file

pages/landscan/landscan.js

 Page({
   data: {
+    //0代表弹窗关闭 1代表手动输入条码弹窗 2代表会员 3.收款 4.退款 
+    scene: 0,
     //总数量
-    totalNum:0,
+    totalNum: 0,
     //应付款
-    payPrice:"0.00",
-    goods:[
+    payPrice: "0.00",
+    goods: [
       {
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
-      },{
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
-      },{
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
-      },{
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
-      },{
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
-      },{
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
-      },{
-        name:"Beats Studio3 头戴式耳机-魅影灰",
-        price:298.6,
-        quantity:20,
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
+      }, {
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
+      }, {
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
+      }, {
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
+      }, {
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
+      }, {
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
+      }, {
+        name: "Beats Studio3 头戴式耳机-魅影灰",
+        price: 298.6,
+        quantity: 20,
       }
     ]
   },
-  onLoad() {},
+  onLoad() { },
+
+  //键盘完成
+  onKeyBordFinished(data) {
+     my.showToast({
+      type: 'success',
+      content: data,
+      duration: 3000,
+      success: () => {
+       
+      },
+    });
+  },
+
+  onKeyBordClose() {
+    this.setData({scene:0})
+  },
+
+  // 手动输入码
+  manualBarcode(e){
+    this.setData({scene:1})
+  }
+
+
+
+
 });

pages/landscan/landscan.json

-{}
+{
\ No newline at end of file
+     "transparentTitle": "always",
+     "usingComponents": {
+        "land-keybord": "../components/landkeybord/landkeybord"
+    }
+
+}
\ No newline at end of file