saomaShoukuan.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <template>
  2. <view class="container">
  3. <view class="h-box"></view>
  4. <view class="input-block">
  5. <view class="title">收款金额</view>
  6. <view class="money" v-if="money">¥ {{money}}</view>
  7. <view class="placehoder" v-else>¥ 0.00</view>
  8. </view>
  9. <view class="keyboard-block flex">
  10. <view class="number-block">
  11. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="1">1</view>
  12. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="2">2</view>
  13. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="3">3</view>
  14. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="4">4</view>
  15. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="5">5</view>
  16. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="6">6</view>
  17. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="7">7</view>
  18. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="8">8</view>
  19. <view hover-class="btn-hover" class="number-btn" @click="onInput" data-num="9">9</view>
  20. <view hover-class="btn-hover" class="number-btn no-btm-bd" @click="onInput" data-num="00">00</view>
  21. <view hover-class="btn-hover" class="number-btn no-btm-bd" @click="onInput" data-num="0">0</view>
  22. <view hover-class="btn-hover" class="number-btn no-btm-bd" @click="onInput" data-num=".">.</view>
  23. </view>
  24. <view class="btn-block">
  25. <view hover-class="btn-hover" class="btn backspace-btn" @click="onDel">
  26. <image class="backspace-img" mode="aspectFit" src="../../static/images/backspace.png" />
  27. </view>
  28. <view hover-class="btn-hover" class="btn submit-btn" :class="{canuse:money}" @click="onSubmit">结算</view>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. data() {
  36. return {
  37. store_id: '',
  38. money: '',
  39. }
  40. },
  41. onLoad() {
  42. this.store_id = uni.getStorageSync("store_id");
  43. },
  44. onShow() {
  45. },
  46. methods: {
  47. onInput(e) {
  48. let money = this.money
  49. let num = e.currentTarget.dataset.num
  50. let dotIndex = money.indexOf('.');
  51. console.log(dotIndex)
  52. if (num === '.') {
  53. if (dotIndex === -1) {
  54. this.money = money.length ? (money + '.') : (0 + '.')
  55. }
  56. } else if (dotIndex >= 0 && money.length - dotIndex >= 3) {
  57. return
  58. } else {
  59. if (money === '0' || money === '00') {
  60. money = '';
  61. }
  62. var maxMoney = money + num + '';
  63. console.log(maxMoney)
  64. if (parseFloat(maxMoney) <= 100000) {
  65. this.money = money + num + '';
  66. }
  67. }
  68. },
  69. onDel() {
  70. let money = this.money
  71. this.money = money.substring(0, money.length - 1)
  72. },
  73. onSubmit() {
  74. if (!/^(0|([1-9]\d{0,6}))(\.\d{1,2})?$/.test(this.money) || this.money <= 0) {
  75. uni.showToast({
  76. title: "请正确输入金额",
  77. icon: "none"
  78. })
  79. return false
  80. }
  81. uni.scanCode({
  82. success: r => {
  83. console.log('扫码', r)
  84. this.request({
  85. url: 'smdcshop/payment_code',
  86. is_agent: 'api',
  87. data: {
  88. store_id: this.store_id,
  89. auth_code: r.result,
  90. money: this.money,
  91. },
  92. hide: true
  93. }).then(res => {
  94. console.log('扫码支付返回', res)
  95. uni.showModal({
  96. content: res.message,
  97. cancelText: '查看订单',
  98. confirmText: '继续收款',
  99. success: (r) => {
  100. if (r.cancel) {
  101. wx.redirectTo({
  102. url: '/saomaDiancan/orderDetail/orderDetail?id=' +
  103. res.data
  104. })
  105. }
  106. }
  107. })
  108. this.money = ""
  109. }).catch(res => {
  110. if (res.code == 400 && typeof(res.data) == 'string' && res.data) {
  111. uni.showModal({
  112. content: "支付结果未知",
  113. cancelText: '查看订单',
  114. confirmText: '继续收款',
  115. success: (r) => {
  116. if (r.cancel) {
  117. wx.redirectTo({
  118. url: '/saomaDiancan/orderDetail/orderDetail?id=' +
  119. res.data
  120. })
  121. }
  122. }
  123. })
  124. this.money = ""
  125. } else {
  126. uni.showToast({
  127. title: res.message,
  128. icon: 'none'
  129. })
  130. }
  131. })
  132. }
  133. })
  134. },
  135. }
  136. }
  137. </script>
  138. <style>
  139. page {
  140. background-color: #f6f6f6;
  141. }
  142. .h-box {
  143. width: 100%;
  144. height: 40rpx;
  145. }
  146. .input-block {
  147. width: 670rpx;
  148. height: 100rpx;
  149. background-color: #fff;
  150. margin: 0 auto;
  151. padding: 0 40rpx;
  152. box-sizing: border-box;
  153. display: flex;
  154. flex-flow: row nowrap;
  155. justify-content: space-between;
  156. align-items: center;
  157. }
  158. .input-block .title {
  159. flex: auto;
  160. font-size: 32rpx;
  161. font-family: PingFang SC;
  162. font-weight: 500;
  163. color: #4E4E4E;
  164. padding-right: 20rpx;
  165. }
  166. .input-block .money {
  167. text-align: right;
  168. flex: 0 0 440rpx;
  169. overflow: auto;
  170. white-space: nowrap;
  171. }
  172. .input-block .placehoder {
  173. text-align: right;
  174. flex: 0 0 440rpx;
  175. overflow: hidden;
  176. color: #888;
  177. }
  178. .keyboard-block {
  179. width: 100%;
  180. height: 528rpx;
  181. background-color: #fff;
  182. position: absolute;
  183. left: 0;
  184. bottom: 0;
  185. }
  186. .number-block {
  187. width: 540rpx;
  188. flex: 0 0 540rpx;
  189. display: flex;
  190. flex-flow: row wrap;
  191. justify-content: flex-start;
  192. align-content: flex-start;
  193. }
  194. .number-btn {
  195. flex: 0 0 180rpx;
  196. box-sizing: border-box;
  197. height: 132rpx;
  198. border-right: 2px solid #F2F2F2;
  199. border-bottom: 2px solid #F2F2F2;
  200. text-align: center;
  201. line-height: 132rpx;
  202. font-size: 42rpx;
  203. font-family: PingFang SC;
  204. font-weight: 500;
  205. color: #4E4E4E;
  206. }
  207. .btn-block {
  208. width: 210rpx;
  209. flex: 0 0 210rpx;
  210. }
  211. .btn-block .btn {
  212. width: 210rpx;
  213. height: 264rpx;
  214. box-sizing: border-box;
  215. text-align: center;
  216. line-height: 264rpx;
  217. }
  218. .backspace-img {
  219. width: 80rpx;
  220. height: 80rpx;
  221. }
  222. .backspace-btn {
  223. border-bottom: 2px solid #F2F2F2;
  224. }
  225. .submit-btn {
  226. background-color: #F5F6F9;
  227. }
  228. .submit-btn.canuse {
  229. background-color: #fe821e;
  230. color: #fff;
  231. }
  232. .no-btm-bd {
  233. border-bottom: none
  234. }
  235. .btn-hover {
  236. background-color: #f1f1f1;
  237. }
  238. </style>