123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444 |
- <template name="neoceansoft-keyboard">
- <view :style="{'height':popupHeight}" class="numView">
- <view style="display: flex;">
- <view :style="{'width':numWidht}">
- <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
- <view style="display: flex;">
- <view v-for="(item,index) in num1" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
- class="numLayout">
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- <button plain="true" hover-class="numClickCss"
- :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
- @click="btnClick(item)">
- {{item}}
- </button>
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- </view>
- </view>
- <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
- <view style="display: flex;">
- <view v-for="(item,index) in num2" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
- class="numLayout">
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- <button plain="true" hover-class="numClickCss"
- :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
- @click="btnClick(item)">
- {{item}}
- </button>
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- </view>
- </view>
- <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
- <view style="display: flex;">
- <view v-for="(item,index) in num3" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
- class="numLayout">
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- <button plain="true" hover-class="numClickCss"
- :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
- @click="btnClick(item)">
- {{item}}
- </button>
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- </view>
- </view>
- <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
- <view style="display: flex;">
- <view v-for="(item,index) in num4" :key="index" class="numLayout">
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- <button plain="true" v-if="index==2||(keyboardType == 'password'&&index==1)"
- :hover-class="keyboardType=='payment'?'':'numClickCss'"
- :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
- @click="btnClick(item.type)">
- <view v-if="keyboardType!='payment'" class="iconfont icon-deletenumber"></view>
- </button>
- <button v-else plain="true" hover-class="numClickCss"
- :style="{'height':numBtnHeight,'width':keyboardType=='password'||(keyboardType=='payment'&&index==0)?((numBtnWidth*2)-1)+'px':(numBtnWidth-1)+'px'}"
- class="numBtn" @click="btnClick(item.type)">
- {{item.name}}
- </button>
- <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
- </view>
- </view>
- </view>
- <view v-if="keyboardType=='payment'"
- :style="{'width':payboardWidth,'height':payboardHeight,'display':'flex'}">
- <view style="width: 2rpx;height: 100%;background-color: #efefef;"></view>
- <view :style="{'display':'flex','width':'100%','height':'100%'}">
- <view style="width: 100%;height: 100%;">
- <view style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
- <button plain="true" hover-class="numClickCss"
- :style="{'height':numBtnHeight,'width':(numBtnWidth-1)+'px'}" class="numBtn" @click="btnClick(-2)">
- <view class="iconfont icon-deletenumber"></view>
- </button>
- <button plain="true" hover-class="behaviorCommonCss" :style="{'height':behaviorBtnHeight,'width':(numBtnWidth-1),'color':behaviorTextColor,
- 'background':behaviorBgColor}" class="behaviorCss" @click="paymentClick()">
- {{behaviorName}}
- </button>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- numBtnWidth: 0,
- numBtnHeight: '',
- behaviorBtnHeight: '',
- popupHeight: '',
- payboardWidth: '',
- payboardHeight: '',
- numWidht: '',
- numOpWidht: '',
- opBtnWidth: '',
- opBtnHeight1: '',
- opBtnHeight2: '',
- nums: [],
- isShowPay: true,
- bl: 0.45,
- num1: [1, 2, 3],
- num2: [4, 5, 6],
- num3: [7, 8, 9],
- num4: [{
- name: '.',
- type: '.'
- }, {
- name: '0',
- type: 0
- }, {
- name: '删除',
- type: -2
- }],
- }
- },
- props: {
- keyboardType: {
- type: String,
- default: "number" // number idcard,payment,password
- },
- behaviorName: {
- type: String,
- default: '付款'
- },
- behaviorTextColor: {
- type: String,
- default: '#ffffff'
- },
- behaviorBgColor: {
- type: String,
- default: '#41ae3c'
- }
- },
- created() {
- var that = this
- uni.getSystemInfo({
- success(res) {
- console.log("页面信息:" + JSON.stringify(res))
- var width = 0
- if (that.keyboardType == 'payment') {
- width = (res.screenWidth / 4) * 3
- } else {
- width = (res.screenWidth / 3) * 3
- }
- var height = ''
- if (that.keyboardType == 'payment') {
- that.bl = 0.58
- height = width / 3 * that.bl
- } else {
- height = width / 3 * that.bl
- }
- that.opBtnWidth = (res.screenWidth / 4) * 1 + 'px'
- // that.opBtnHeight1 = (height * 4) * (3 / 5) + 'px'
- // that.opBtnHeight2 = (height * 4) * (2 / 5) + 'px'
- that.opBtnHeight1 = ((height * 2) + 2.5) + 'px'
- that.opBtnHeight2 = ((height * 2) + 2) + 'px'
- that.numWidht = width + 'px'
- that.payboardWidth = (res.screenWidth - width) + 'px'
- that.payboardHeight = height * 3
- that.numBtnWidth = width / 3
- that.numBtnHeight = height + 'px'
- that.behaviorBtnHeight = height * 3 + 'px'
- that.popupHeight = (height * 4) + 'px'
- }
- })
- if (this.keyboardType == 'password') {
- //密码键盘,不存在小数点问题
- this.num4.splice(0, 1)
- } else if (this.keyboardType == 'idcard') {
- this.num4[0].name = 'X'
- this.num4[0].type = 'X'
- } else if (this.keyboardType == 'payment') {
- this.num4.splice(2, 1)
- var bean = this.num4[0]
- this.num4[0] = this.num4[1]
- this.num4[1] = bean
- }
- },
- methods: {
- paymentClick(){
- this.$emit('paymentClick')
- },
- // 数字点击事件回调
- btnClick(item) {
- // this.$emit('click',item)
- this.$emit('keyclick', item)
- this.inputNum(item)
- },
- // 输入处理事件回调
- inputNum(item) {
- switch (item) {
- case 0:
- //todo 验证待处理
- this.putNum('0')
- break
- case 1:
- //todo 验证待处理
- this.putNum('1')
- break
- case 2:
- //todo 验证待处理
- this.putNum('2')
- break
- case 3:
- //todo 验证待处理
- this.putNum('3')
- break
- case 4:
- //todo 验证待处理
- this.putNum('4')
- break
- case 5:
- //todo 验证待处理
- this.putNum('5')
- break
- case 6:
- //todo 验证待处理
- this.putNum('6')
- break
- case 7:
- //todo 验证待处理
- this.putNum('7')
- break
- case 8:
- //todo 验证待处理
- this.putNum('8')
- break
- case 9:
- //todo 验证待处理
- this.putNum('9')
- break
- case '.':
- this.putNum('.')
- break
- case 'X':
- this.putNum('X')
- break
- case -2:
- this.del()
- break
- }
- },
- putNum(data) {
- this.nums.push(data)
- var result = this.nums.join('')
- this.$emit('result', result)
- },
- del() {
- if (this.nums.length == 0) {
- return
- }
- this.nums.splice(this.nums.length - 1, 1)
- var result = this.nums.join('')
- this.$emit('result', result)
- },
- }
- }
- </script>
- <style scoped>
- @font-face {
- font-family: 'iconfont';
- src: url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff2?t=1625469481487') format('woff2'),
- url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff?t=1625469481487') format('woff'),
- url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.ttf?t=1625469481487') format('truetype');
- }
- .iconfont {
- font-family: "iconfont" !important;
- font-size: 14px;
- font-style: normal;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
- .icon-deletenumber:before {
- content: "\e666";
- }
- .numView {
- position: fixed;
- bottom: 0rpx;
- width: 100%;
- }
- .numBtn {
- display: flex;
- align-items: center;
- justify-content: center;
- justify-items: center;
- border-radius: 20rpx;
- border: 0rpx solid #ffffff;
- }
- .behaviorCss {
- display: flex;
- align-items: center;
- justify-content: center;
- justify-items: center;
- border-radius: 0rpx;
- border: 0rpx solid #E0E0E0;
- color: #ffffff;
- font-weight: 500;
- font-size: 30rpx;
- }
- .behaviorCommonCss {
- background-color: #efefef !important;
- transform: translate(1rpx, 1rpx);
- }
- .numLayout {
- display: flex;
- }
- .numLayout2 {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .boderSy {
- width: 2rpx;
- background-color: #efefef;
- }
- .opBtn1 {
- background-color: #f29100;
- display: flex;
- align-items: center;
- justify-content: center;
- justify-items: center;
- align-content: center;
- color: #FFFFFF;
- font-weight: 400;
- font-size: 30rpx;
- text-align: center;
- }
- .numClickCss {
- background-color: #efefef;
- color: #FFFFFF;
- }
- .opBtn1x {
- background-color: #ffd28b;
- display: flex;
- color: #9fa0a0;
- align-items: center;
- justify-content: center;
- justify-items: center;
- align-content: center;
- font-weight: 400;
- font-size: 30rpx;
- text-align: center;
- }
- .opBtn2 {
- background-color: #0090ff;
- display: flex;
- align-items: center;
- justify-content: center;
- justify-items: center;
- align-content: center;
- color: #FFFFFF;
- font-weight: 400;
- font-size: 30rpx;
- text-align: center;
- }
- .opBtn2x {
- background-color: #7fcff4;
- display: flex;
- align-items: center;
- justify-content: center;
- justify-items: center;
- align-content: center;
- font-weight: 400;
- font-size: 30rpx;
- text-align: center;
- color: #9fa0a0;
- }
- .customStyle {
- color: 'red'
- }
- </style>
|