index.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <view class="container">
  3. <form @submit="bindSave" :report-submit="true">
  4. <tui-list-cell :hover="false" :lineLeft="false">
  5. <view class="tui-cell-input">
  6. <input name="amount" :placeholder="'消费金额,请询问服务员后输入'" placeholder-class="tui-phcolor" type="text"
  7. :auto-focus="true" :focus="true" maxlength="40" />
  8. </view>
  9. </tui-list-cell>
  10. <view class="tui-btn-box">
  11. <tui-button formType="submit" :shadow="false" height="88rpx" shape="circle" type="danger">确认支付
  12. </tui-button>
  13. </view>
  14. </form>
  15. </view>
  16. </template>
  17. <script>
  18. import pay from '@/common/pay.js'
  19. export default {
  20. data() {
  21. return {
  22. };
  23. },
  24. onLoad: function(e) {
  25. },
  26. onShow: function() {
  27. },
  28. methods: {
  29. async bindSave(e) {
  30. const _this = this
  31. const amount = e.detail.value.amount;
  32. if (amount == "" || amount * 1 < 0) {
  33. wx.showToast({
  34. title: '请填写正确的消费金额',
  35. icon: 'none'
  36. })
  37. return
  38. }
  39. const userMoney = await _this.$request.get('member.detail');
  40. if (userMoney.errno != 0) {
  41. wx.showToast({
  42. title: userMoney.message,
  43. icon: 'none'
  44. })
  45. return
  46. }
  47. let _msg = '您本次消费 ' + amount + ' 元'
  48. let needPayAmount = amount * 1
  49. if (userMoney.data.balance * 1 > 0) {
  50. _msg += ',当前账户可用余额 ' + userMoney.data.balance + ' 元'
  51. }
  52. needPayAmount = needPayAmount.toFixed(2) // 需要买单支付的金额
  53. const wxpayAmount = (needPayAmount - userMoney.data.balance).toFixed(2) // 需要额外微信支付的金额
  54. //console.log(needPayAmount)
  55. //console.log(wxpayAmount)
  56. if (wxpayAmount > 0) {
  57. _msg += ',仍需微信支付 ' + wxpayAmount + ' 元'
  58. }
  59. wx.showModal({
  60. title: '请确认消费金额',
  61. content: _msg,
  62. confirmText: "确认支付",
  63. cancelText: "取消支付",
  64. success: function(res) {
  65. //console.log(res);
  66. if (res.confirm) {
  67. _this.goPay(amount, wxpayAmount)
  68. }
  69. }
  70. });
  71. },
  72. goPay(amount, wxpayAmount) {
  73. const _this = this
  74. const redirectUrl = "/pagesA/my/maidan/success";
  75. if (wxpayAmount > 0) {
  76. pay.wxpay('paybill', wxpayAmount, 0, redirectUrl);
  77. } else {
  78. _this.$request.post('paybill.pay', {
  79. money: amount
  80. }).then(res => {
  81. if (res.errno == 0) {
  82. wx.showModal({
  83. title: '成功',
  84. content: '买单成功,欢迎下次光临!',
  85. showCancel: false,
  86. success: function(res) {
  87. wx.redirectTo({
  88. url: redirectUrl
  89. });
  90. }
  91. })
  92. } else {
  93. wx.showModal({
  94. title: '失败',
  95. content: res.msg,
  96. showCancel: false
  97. })
  98. }
  99. })
  100. }
  101. }
  102. },
  103. /**
  104. * 页面相关事件处理函数--监听用户下拉动作
  105. */
  106. onPullDownRefresh: function() {
  107. setTimeout(() => {
  108. uni.stopPullDownRefresh()
  109. }, 200);
  110. },
  111. };
  112. </script>
  113. <style lang="scss">
  114. .container {
  115. padding-top: 20rpx;
  116. .tui-cell-input {
  117. width: 100%;
  118. display: flex;
  119. align-items: center;
  120. box-sizing: border-box;
  121. input {
  122. flex: 1;
  123. padding-left: $uni-spacing-row-base;
  124. }
  125. }
  126. .tui-btn-box {
  127. padding: 40rpx 30rpx 10rpx 30rpx;
  128. box-sizing: border-box;
  129. }
  130. }
  131. </style>