Skip to content

D
doublescreen-back
Commit d17822b7 authored by jiangjiantao's avatar jiangjiantao
Browse files
Options

自定义键盘组件

parent 0984ffa6
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 40 deletions
app.json
View file @ d17822b7
{
"pages": [
"pages/landscan/landscan",
"pages/payresult/payresult",
"pages/index/index"
],
......
mini.project.json 0 → 100644
View file @ d17822b7
{
"component2": true
}
\ No newline at end of file
pages/components/landkeybord/landkeybord.acss 0 → 100755
View file @ d17822b7
/* 页面布局 */
.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 0 → 100644
View file @ d17822b7
<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 0 → 100644
View file @ d17822b7
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 0 → 100644
View file @ d17822b7
{
"component": true
}
\ No newline at end of file
pages/index/index.axml
View file @ d17822b7
<view>
this is a blank page
</view>
pages/index/index.json
View file @ d17822b7
{}
\ No newline at end of file
{
"transparentTitle": "always",
"usingComponents": {
"land-keybord": "../components/landkeybord/landkeybord"
}
}
\ No newline at end of file
pages/landscan/landscan.acss
View file @ d17822b7
......@@ -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 file @ d17822b7
<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>
\ No newline at end of file
</view>
<!-- 键盘 -->
<land-keybord scene="{{scene}}" onKeyBordFinished="onKeyBordFinished" onKeyBordClose="onKeyBordClose">
</land-keybord>
\ No newline at end of file
pages/landscan/landscan.js
View file @ d17822b7
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
View file @ d17822b7
{}
\ No newline at end of file
{
"transparentTitle": "always",
"usingComponents": {
"land-keybord": "../components/landkeybord/landkeybord"
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment