neoceansoft-keyboard.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. <template name="neoceansoft-keyboard">
  2. <view :style="{'height':popupHeight}" class="numView">
  3. <view style="display: flex;">
  4. <view :style="{'width':numWidht}">
  5. <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
  6. <view style="display: flex;">
  7. <view v-for="(item,index) in num1" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
  8. class="numLayout">
  9. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  10. <button plain="true" hover-class="numClickCss"
  11. :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
  12. @click="btnClick(item)">
  13. {{item}}
  14. </button>
  15. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  16. </view>
  17. </view>
  18. <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
  19. <view style="display: flex;">
  20. <view v-for="(item,index) in num2" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
  21. class="numLayout">
  22. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  23. <button plain="true" hover-class="numClickCss"
  24. :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
  25. @click="btnClick(item)">
  26. {{item}}
  27. </button>
  28. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  29. </view>
  30. </view>
  31. <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
  32. <view style="display: flex;">
  33. <view v-for="(item,index) in num3" :key="index" :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}"
  34. class="numLayout">
  35. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  36. <button plain="true" hover-class="numClickCss"
  37. :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
  38. @click="btnClick(item)">
  39. {{item}}
  40. </button>
  41. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  42. </view>
  43. </view>
  44. <view style="width: 100%; height: 2rpx;background-color: #efefef;" />
  45. <view style="display: flex;">
  46. <view v-for="(item,index) in num4" :key="index" class="numLayout">
  47. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  48. <button plain="true" v-if="index==2||(keyboardType == 'password'&&index==1)"
  49. :hover-class="keyboardType=='payment'?'':'numClickCss'"
  50. :style="{'height':numBtnHeight,'width':numBtnWidth+'px'}" class="numBtn"
  51. @click="btnClick(item.type)">
  52. <view v-if="keyboardType!='payment'" class="iconfont icon-deletenumber"></view>
  53. </button>
  54. <button v-else plain="true" hover-class="numClickCss"
  55. :style="{'height':numBtnHeight,'width':keyboardType=='password'||(keyboardType=='payment'&&index==0)?((numBtnWidth*2)-1)+'px':(numBtnWidth-1)+'px'}"
  56. class="numBtn" @click="btnClick(item.type)">
  57. {{item.name}}
  58. </button>
  59. <view v-if="index==1" style="width: 2rpx; height: 100%;background-color: #efefef;"></view>
  60. </view>
  61. </view>
  62. </view>
  63. <view v-if="keyboardType=='payment'"
  64. :style="{'width':payboardWidth,'height':payboardHeight,'display':'flex'}">
  65. <view style="width: 2rpx;height: 100%;background-color: #efefef;"></view>
  66. <view :style="{'display':'flex','width':'100%','height':'100%'}">
  67. <view style="width: 100%;height: 100%;">
  68. <view style="width: 100%;height: 2rpx;background-color: #efefef;"></view>
  69. <button plain="true" hover-class="numClickCss"
  70. :style="{'height':numBtnHeight,'width':(numBtnWidth-1)+'px'}" class="numBtn" @click="btnClick(-2)">
  71. <view class="iconfont icon-deletenumber"></view>
  72. </button>
  73. <button plain="true" hover-class="behaviorCommonCss" :style="{'height':behaviorBtnHeight,'width':(numBtnWidth-1),'color':behaviorTextColor,
  74. 'background':behaviorBgColor}" class="behaviorCss" @click="paymentClick()">
  75. {{behaviorName}}
  76. </button>
  77. </view>
  78. </view>
  79. </view>
  80. </view>
  81. </view>
  82. </template>
  83. <script>
  84. export default {
  85. data() {
  86. return {
  87. numBtnWidth: 0,
  88. numBtnHeight: '',
  89. behaviorBtnHeight: '',
  90. popupHeight: '',
  91. payboardWidth: '',
  92. payboardHeight: '',
  93. numWidht: '',
  94. numOpWidht: '',
  95. opBtnWidth: '',
  96. opBtnHeight1: '',
  97. opBtnHeight2: '',
  98. nums: [],
  99. isShowPay: true,
  100. bl: 0.45,
  101. num1: [1, 2, 3],
  102. num2: [4, 5, 6],
  103. num3: [7, 8, 9],
  104. num4: [{
  105. name: '.',
  106. type: '.'
  107. }, {
  108. name: '0',
  109. type: 0
  110. }, {
  111. name: '删除',
  112. type: -2
  113. }],
  114. }
  115. },
  116. props: {
  117. keyboardType: {
  118. type: String,
  119. default: "number" // number idcard,payment,password
  120. },
  121. behaviorName: {
  122. type: String,
  123. default: '付款'
  124. },
  125. behaviorTextColor: {
  126. type: String,
  127. default: '#ffffff'
  128. },
  129. behaviorBgColor: {
  130. type: String,
  131. default: '#41ae3c'
  132. }
  133. },
  134. created() {
  135. var that = this
  136. uni.getSystemInfo({
  137. success(res) {
  138. console.log("页面信息:" + JSON.stringify(res))
  139. var width = 0
  140. if (that.keyboardType == 'payment') {
  141. width = (res.screenWidth / 4) * 3
  142. } else {
  143. width = (res.screenWidth / 3) * 3
  144. }
  145. var height = ''
  146. if (that.keyboardType == 'payment') {
  147. that.bl = 0.58
  148. height = width / 3 * that.bl
  149. } else {
  150. height = width / 3 * that.bl
  151. }
  152. that.opBtnWidth = (res.screenWidth / 4) * 1 + 'px'
  153. // that.opBtnHeight1 = (height * 4) * (3 / 5) + 'px'
  154. // that.opBtnHeight2 = (height * 4) * (2 / 5) + 'px'
  155. that.opBtnHeight1 = ((height * 2) + 2.5) + 'px'
  156. that.opBtnHeight2 = ((height * 2) + 2) + 'px'
  157. that.numWidht = width + 'px'
  158. that.payboardWidth = (res.screenWidth - width) + 'px'
  159. that.payboardHeight = height * 3
  160. that.numBtnWidth = width / 3
  161. that.numBtnHeight = height + 'px'
  162. that.behaviorBtnHeight = height * 3 + 'px'
  163. that.popupHeight = (height * 4) + 'px'
  164. }
  165. })
  166. if (this.keyboardType == 'password') {
  167. //密码键盘,不存在小数点问题
  168. this.num4.splice(0, 1)
  169. } else if (this.keyboardType == 'idcard') {
  170. this.num4[0].name = 'X'
  171. this.num4[0].type = 'X'
  172. } else if (this.keyboardType == 'payment') {
  173. this.num4.splice(2, 1)
  174. var bean = this.num4[0]
  175. this.num4[0] = this.num4[1]
  176. this.num4[1] = bean
  177. }
  178. },
  179. methods: {
  180. paymentClick(){
  181. this.$emit('paymentClick')
  182. },
  183. // 数字点击事件回调
  184. btnClick(item) {
  185. // this.$emit('click',item)
  186. this.$emit('keyclick', item)
  187. this.inputNum(item)
  188. },
  189. // 输入处理事件回调
  190. inputNum(item) {
  191. switch (item) {
  192. case 0:
  193. //todo 验证待处理
  194. this.putNum('0')
  195. break
  196. case 1:
  197. //todo 验证待处理
  198. this.putNum('1')
  199. break
  200. case 2:
  201. //todo 验证待处理
  202. this.putNum('2')
  203. break
  204. case 3:
  205. //todo 验证待处理
  206. this.putNum('3')
  207. break
  208. case 4:
  209. //todo 验证待处理
  210. this.putNum('4')
  211. break
  212. case 5:
  213. //todo 验证待处理
  214. this.putNum('5')
  215. break
  216. case 6:
  217. //todo 验证待处理
  218. this.putNum('6')
  219. break
  220. case 7:
  221. //todo 验证待处理
  222. this.putNum('7')
  223. break
  224. case 8:
  225. //todo 验证待处理
  226. this.putNum('8')
  227. break
  228. case 9:
  229. //todo 验证待处理
  230. this.putNum('9')
  231. break
  232. case '.':
  233. this.putNum('.')
  234. break
  235. case 'X':
  236. this.putNum('X')
  237. break
  238. case -2:
  239. this.del()
  240. break
  241. }
  242. },
  243. putNum(data) {
  244. this.nums.push(data)
  245. var result = this.nums.join('')
  246. this.$emit('result', result)
  247. },
  248. del() {
  249. if (this.nums.length == 0) {
  250. return
  251. }
  252. this.nums.splice(this.nums.length - 1, 1)
  253. var result = this.nums.join('')
  254. this.$emit('result', result)
  255. },
  256. }
  257. }
  258. </script>
  259. <style scoped>
  260. @font-face {
  261. font-family: 'iconfont';
  262. src: url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff2?t=1625469481487') format('woff2'),
  263. url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.woff?t=1625469481487') format('woff'),
  264. url('https://at.alicdn.com/t/font_2180051_21huv31g6dq.ttf?t=1625469481487') format('truetype');
  265. }
  266. .iconfont {
  267. font-family: "iconfont" !important;
  268. font-size: 14px;
  269. font-style: normal;
  270. -webkit-font-smoothing: antialiased;
  271. -moz-osx-font-smoothing: grayscale;
  272. }
  273. .icon-deletenumber:before {
  274. content: "\e666";
  275. }
  276. .numView {
  277. position: fixed;
  278. bottom: 0rpx;
  279. width: 100%;
  280. }
  281. .numBtn {
  282. display: flex;
  283. align-items: center;
  284. justify-content: center;
  285. justify-items: center;
  286. border-radius: 20rpx;
  287. border: 0rpx solid #ffffff;
  288. }
  289. .behaviorCss {
  290. display: flex;
  291. align-items: center;
  292. justify-content: center;
  293. justify-items: center;
  294. border-radius: 0rpx;
  295. border: 0rpx solid #E0E0E0;
  296. color: #ffffff;
  297. font-weight: 500;
  298. font-size: 30rpx;
  299. }
  300. .behaviorCommonCss {
  301. background-color: #efefef !important;
  302. transform: translate(1rpx, 1rpx);
  303. }
  304. .numLayout {
  305. display: flex;
  306. }
  307. .numLayout2 {
  308. display: flex;
  309. flex-direction: column;
  310. align-items: center;
  311. justify-content: center;
  312. }
  313. .boderSy {
  314. width: 2rpx;
  315. background-color: #efefef;
  316. }
  317. .opBtn1 {
  318. background-color: #f29100;
  319. display: flex;
  320. align-items: center;
  321. justify-content: center;
  322. justify-items: center;
  323. align-content: center;
  324. color: #FFFFFF;
  325. font-weight: 400;
  326. font-size: 30rpx;
  327. text-align: center;
  328. }
  329. .numClickCss {
  330. background-color: #efefef;
  331. color: #FFFFFF;
  332. }
  333. .opBtn1x {
  334. background-color: #ffd28b;
  335. display: flex;
  336. color: #9fa0a0;
  337. align-items: center;
  338. justify-content: center;
  339. justify-items: center;
  340. align-content: center;
  341. font-weight: 400;
  342. font-size: 30rpx;
  343. text-align: center;
  344. }
  345. .opBtn2 {
  346. background-color: #0090ff;
  347. display: flex;
  348. align-items: center;
  349. justify-content: center;
  350. justify-items: center;
  351. align-content: center;
  352. color: #FFFFFF;
  353. font-weight: 400;
  354. font-size: 30rpx;
  355. text-align: center;
  356. }
  357. .opBtn2x {
  358. background-color: #7fcff4;
  359. display: flex;
  360. align-items: center;
  361. justify-content: center;
  362. justify-items: center;
  363. align-content: center;
  364. font-weight: 400;
  365. font-size: 30rpx;
  366. text-align: center;
  367. color: #9fa0a0;
  368. }
  369. .customStyle {
  370. color: 'red'
  371. }
  372. </style>