From d5306c224a91b37869d2b96ba03d5a7152bd11e2 Mon Sep 17 00:00:00 2001
From: 石广澎 <shiguangpeng@163.com>
Date: 星期一, 23 十二月 2024 21:20:26 +0800
Subject: [PATCH] feat(支持线上订单支付 ):
---
components/key-bord/key-bord.vue | 254 ++++++++++++++++++++++++++------------------------
1 files changed, 131 insertions(+), 123 deletions(-)
diff --git a/components/key-bord/key-bord.vue b/components/key-bord/key-bord.vue
index 86b3693..8b613f8 100644
--- a/components/key-bord/key-bord.vue
+++ b/components/key-bord/key-bord.vue
@@ -1,136 +1,144 @@
<template>
- <view>
- <view class="u-text-right u-font-30 color-666 u-p-20" @click="close">鍏抽棴</view>
- <view class="u-p-10 bord-box u-flex u-row-between">
- <view class="u-flex u-flex-wrap">
- <view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover"
- @click="inputStr(num)">{{num}}</view>
- </view>
- <view class="flex-1 u-flex-col">
- <view hover-class="num-hover" class="del-item u-flex u-row-center" @click="delStr">
- <image src="@/static/imgs/del-icon.png" class="del-btn"></image>
- </view>
- <view hover-class="num-hover" class="flex-1 pay-btn u-font-30 color-fff font-bold" @click="pay">浠樻
- </view>
- </view>
- </view>
- </view>
+ <view class="box">
+ <view class="u-text-right u-font-30 color-666 u-p-h-20 u-p-t-10" @click="close">鍏抽棴</view>
+ <view class="u-p-10 u-flex u-row-between">
+ <view class="u-flex u-flex-wrap">
+ <view v-for="(num,index) in numList" :key="index" class="num-item" hover-class="num-hover" @click="inputStr(num)">{{num}}</view>
+ </view>
+ <view class="flex-1 u-flex-col">
+ <view hover-class="num-hover" class="del-item u-flex u-row-center" @click="delStr">
+ <image src="@/static/del-icon.png" class="del-btn"></image>
+ </view>
+ <view hover-class="num-hover" class="flex-1 pay-btn u-font-30 color-fff font-bold" @click="pay">浠樻</view>
+ </view>
+ </view>
+ </view>
+
</template>
<script>
- export default {
- props: {
- num: {
- type: String,
- default: ''
- }
- },
- watch: {
- num(val) {
- this.emitNum = val
- }
- },
- data() {
- return {
- emitNum: '',
- numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
- }
- },
- methods: {
- // 杈撳叆妗�
- inputStr(num) {
- var dotinx = this.emitNum.indexOf('.');
- if (dotinx != -1) {
- if (num == '.') {
- // 灏忔暟鐐逛笉鑳介噸澶嶆坊鍔�
- return;
- }
- if (dotinx == this.emitNum.length - 3) {
- //灏忔暟鐐瑰悗闈㈡渶澶氫袱浣�
- return;
- }
- } else if (num == '0' && this.emitNum == '0') {
- // 棣栦綅鐨�0鏈�澶�1涓�
- return;
- } else {
- if (num != '.' && this.emitNum.length > 7) {
- //鏁存暟涓嶈兘瓒呰繃10浣�
- return;
- }
- }
- if (num == '.' && this.emitNum == '') {
- this.emitNum = '0.';
- } else if (num != '.' && this.emitNum == '0') {
- this.emitNum = num;
- } else {
- this.emitNum += num;
- }
- this.$emit('changeMoney', this.emitNum)
- },
- // 鍒犻櫎
- delStr() {
- this.emitNum = this.emitNum.slice(0, -1)
- this.$emit('changeMoney', this.emitNum)
- },
- // 鏀粯
- pay() {
- this.$emit('pay')
- },
- // 鍏抽棴杈撳叆妗�
- close() {
- this.$emit('close')
- }
- }
- }
+export default {
+ props: {
+ num: {
+ type: String,
+ default: ''
+ }
+ },
+ watch: {
+ num(val) {
+ this.emitNum = val
+ }
+ },
+ data() {
+ return {
+ emitNum: '',
+ numList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.']
+ }
+ },
+ methods: {
+ // 杈撳叆妗�
+ inputStr(num) {
+ var dotinx = this.emitNum.indexOf('.');
+ if (dotinx != -1) {
+ if (num == '.') {
+ // 灏忔暟鐐逛笉鑳介噸澶嶆坊鍔�
+ return;
+ }
+ if (dotinx == this.emitNum.length - 3) {
+ //灏忔暟鐐瑰悗闈㈡渶澶氫袱浣�
+ return;
+ }
+ if (this.emitNum == '0.0' && num == '0') {
+ //灏忔暟鐐瑰悗闈㈡渶澶氫袱浣�
+ return;
+ }
+ } else if (num == '0' && this.emitNum == '0') {
+ // 棣栦綅鐨�0鏈�澶�1涓�
+ return;
+ } else {
+ if (num != '.' && this.emitNum.length > 7) {
+ //鏁存暟涓嶈兘瓒呰繃10浣�
+ return;
+ }
+ }
+ if (this.emitNum == '' && num == '.') {
+ this.emitNum = '0.';
+ } else if (this.emitNum == '0' && num != '.') {
+ this.emitNum = num;
+ } else {
+ this.emitNum += num;
+ }
+ this.$emit('changeMoney', this.emitNum)
+ },
+ // 鍒犻櫎
+ delStr() {
+ this.emitNum = this.emitNum.slice(0, -1)
+ this.$emit('changeMoney', this.emitNum)
+ },
+ // 鏀粯
+ pay() {
+ this.$emit('pay')
+ },
+ // 鍏抽棴杈撳叆妗�
+ close() {
+ this.$emit('close')
+ }
+ }
+}
</script>
-<style lang="scss">
- .bord-box {
- background-color: #F5F5F5;
- }
+<style lang="scss" scoped>
+.box {
+ background-color: #F5F5F5;
+ transition: all 0.3s;
+ padding-bottom: constant(safe-area-inset-bottom); /*鍏煎 IOS<11.2*/
+ padding-bottom: env(safe-area-inset-bottom); /*鍏煎 IOS>11.2*/
+}
- .num-item {
- width: 175rpx;
- height: 80rpx;
- line-height: 80rpx;
- color: #333333;
- font-size: 32rpx;
- font-weight: bold;
- text-align: center;
- margin: 0 10rpx 10rpx 0;
- background-color: #FFFFFF;
- }
+.num-item {
+ width: 175rpx;
+ height: 90rpx;
+ line-height: 90rpx;
+ color: #333333;
+ font-size: 36rpx;
+ font-weight: bold;
+ text-align: center;
+ margin: 0 10rpx 10rpx 0;
+ background-color: #FFFFFF;
+}
- .num-hover {
- opacity: 0.7;
- }
+.num-hover {
+ opacity: 0.7;
+}
- .num-item:nth-child(10n) {
- width: 356rpx;
- }
+.num-item:nth-child(10n) {
+ width: 356rpx;
+}
- .h-100 {
- height: 100%;
- }
+.h-100 {
+ height: 100%;
+}
- .pay-btn {
- background-color: #D45159;
- border-radius: 16rpx;
- text-align: center;
- height: 270rpx;
- line-height: 270rpx;
- vertical-align: middle;
- }
+.pay-btn {
+ background-color: #D45159;
+ border-radius: 16rpx;
+ text-align: center;
+ height: 290rpx;
+ line-height: 290rpx;
+ vertical-align: middle;
+ color: white;
+ margin-bottom: 10rpx;
+}
- .del-item {
- width: 175rpx;
- height: 80rpx;
- margin-bottom: 10rpx;
- background-color: #FFFFFF;
- }
+.del-item {
+ width: 175rpx;
+ height: 90rpx;
+ margin-bottom: 10rpx;
+ background-color: #FFFFFF;
+}
- .del-btn {
- width: 40rpx;
- height: 40rpx;
- }
-</style>
\ No newline at end of file
+.del-btn {
+ width: 40rpx;
+ height: 40rpx;
+}
+</style>
--
Gitblit v1.9.1