lijijiaofei.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. const app = getApp();
  2. Page({
  3. data: {
  4. images: {
  5. logo: '',
  6. background: '',
  7. card: '',
  8. tzd: "",
  9. phone: "",
  10. yl: "",
  11. jcsfcjtzd: ""
  12. },
  13. userInfo: {
  14. name: app.globalData.currentAccountInfo.username,
  15. id: app.globalData.currentAccountInfo.usernumber,
  16. address: app.globalData.currentAccountInfo.address
  17. },
  18. billInfo: {}, // 存储从首页传递过来的账单信息
  19. quickAmounts: [10, 30, 50, 100, 200, 500],
  20. waterUsage: {
  21. lastReading: 2000,
  22. currentReading: 2050,
  23. nextReading: 3020,
  24. usage: 87
  25. },
  26. showKeyboard: false,
  27. selectedAmount: null,
  28. customAmount: '',
  29. inputFocus: false,
  30. },
  31. onLoad(options) {
  32. // 接收从homepage传递的账单信息
  33. if (options.billInfo) {
  34. const billInfo = JSON.parse(decodeURIComponent(options.billInfo));
  35. debugger
  36. this.setData({
  37. amount: billInfo.amount, // 默认实缴金额为应缴金额
  38. actualAmount: billInfo.amountDue, // 设置应缴金额
  39. balance: billInfo.balance //余额
  40. });
  41. }
  42. this.setData({
  43. images: {
  44. logo:'/static_file/logo.png',
  45. background:'/static_file/background.png',
  46. card:'/static_file/card.png',
  47. tzd:'/static_file/backgrountzdd.png',
  48. phone:'/static_file/phone.png',
  49. yl:'/static_file/background.yl',
  50. jcsfcjtzd:'/static_file/jcsfcjtzd.png',
  51. kapiantubiao:'/static_file/kapiantubiao.png'
  52. }
  53. })
  54. // 获取状态栏高度
  55. const systemInfo = wx.getSystemInfoSync();
  56. debugger
  57. this.setData({
  58. statusBarHeight: systemInfo.statusBarHeight
  59. });
  60. this.fetchPaymentData();
  61. },
  62. // 选择快捷金额
  63. selectAmount: function(e) {
  64. const amount = e.currentTarget.dataset.amount;
  65. this.setData({
  66. amount: parseFloat(amount),
  67. selectedAmount: parseFloat(amount),
  68. customAmount: '' // 清空自定义金额
  69. });
  70. },
  71. // 立即缴费
  72. payNow: function() {
  73. wx.showLoading({
  74. title: '处理中',
  75. });
  76. // 模拟支付
  77. setTimeout(() => {
  78. wx.hideLoading();
  79. wx.showToast({
  80. title: '缴费成功',
  81. icon: 'success',
  82. duration: 2000,
  83. success: () => {
  84. // 支付成功后返回首页
  85. setTimeout(() => {
  86. wx.navigateBack();
  87. }, 2000);
  88. }
  89. });
  90. }, 1500);
  91. },
  92. // 返回上一页
  93. goBack: function() {
  94. wx.navigateBack();
  95. },
  96. // 切换到首页
  97. goToHome: function() {
  98. wx.switchTab({
  99. url: '/pages/homepage/homepage',
  100. });
  101. },
  102. // 切换到我的页面
  103. goToMine: function() {
  104. wx.switchTab({
  105. url: '/pages/mine/mine',
  106. });
  107. },
  108. // 添加切换水表的方法
  109. switchMeter: function() {
  110. wx.navigateTo({
  111. url: '/pages/switchMeter/switchMeter',
  112. })
  113. },
  114. navigateToHome() {
  115. wx.switchTab({
  116. url: '/pages/index/index'
  117. })
  118. },
  119. navigateToMine() {
  120. wx.switchTab({
  121. url: '/pages/mine/mine'
  122. })
  123. },
  124. // 显示键盘 - 使用微信内置键盘
  125. showCustomAmountInput: function() {
  126. // 使用微信内置的输入框
  127. wx.showModal({
  128. title: '请输入金额',
  129. placeholderText: '请输入缴费金额',
  130. editable: true,
  131. success: (res) => {
  132. if (res.confirm && res.content) {
  133. // 验证输入是否为有效数字
  134. const inputAmount = parseFloat(res.content);
  135. if (!isNaN(inputAmount) && inputAmount > 0) {
  136. this.setData({
  137. amount: inputAmount
  138. });
  139. } else {
  140. wx.showToast({
  141. title: '请输入有效金额',
  142. icon: 'none'
  143. });
  144. }
  145. }
  146. }
  147. });
  148. },
  149. // 输入数字
  150. inputNumber: function(e) {
  151. const number = e.currentTarget.dataset.number;
  152. let amount = this.data.amount;
  153. // 处理小数点
  154. if (number === '.' && amount.includes('.')) {
  155. return;
  156. }
  157. // 限制小数点后两位
  158. if (amount.includes('.') && amount.split('.')[1].length >= 2 && number !== '.') {
  159. return;
  160. }
  161. // 更新金额
  162. this.setData({
  163. amount: amount === '0' ? number : amount + number
  164. });
  165. },
  166. // 删除数字
  167. deleteNumber: function() {
  168. let amount = this.data.amount;
  169. if (amount.length <= 1) {
  170. this.setData({
  171. amount: '0'
  172. });
  173. } else {
  174. this.setData({
  175. amount: amount.substring(0, amount.length - 1)
  176. });
  177. }
  178. },
  179. // 确认输入
  180. confirmInput: function() {
  181. this.setData({
  182. showKeyboard: false
  183. });
  184. },
  185. // 添加自定义金额输入处理函数
  186. onCustomAmountInput: function(e) {
  187. let value = e.detail.value;
  188. // 限制只能输入小数点后两位
  189. if (value.indexOf('.') !== -1) {
  190. const parts = value.split('.');
  191. if (parts[1].length > 2) {
  192. value = parts[0] + '.' + parts[1].substring(0, 2);
  193. }
  194. }
  195. // 验证输入是否为有效数字
  196. if (value) {
  197. const inputAmount = parseFloat(value);
  198. if (!isNaN(inputAmount) && inputAmount >= 0) {
  199. // 更新实缴金额和自定义金额
  200. this.setData({
  201. amount: inputAmount,
  202. customAmount: value,
  203. selectedAmount: null // 取消快捷金额的选中状态
  204. });
  205. } else {
  206. this.setData({
  207. customAmount: value
  208. });
  209. }
  210. } else {
  211. // 输入框为空时
  212. this.setData({
  213. customAmount: '',
  214. amount: 0
  215. });
  216. }
  217. },
  218. // 输入框获得焦点
  219. onInputFocus: function() {
  220. this.setData({
  221. inputFocus: true,
  222. selectedAmount: null // 取消快捷金额的选中状态
  223. });
  224. },
  225. // 输入框失去焦点
  226. onInputBlur: function() {
  227. this.setData({
  228. inputFocus: false
  229. });
  230. },
  231. // 从接口获取支付数据
  232. fetchPaymentData: function() {
  233. // 这里是模拟数据,实际应用中应该调用真实接口
  234. // wx.request({
  235. // url: 'your-api-endpoint',
  236. // success: (res) => {
  237. // this.setData({
  238. // amountDue: res.data.amountDue,
  239. // balance: res.data.balance
  240. // });
  241. // }
  242. // });
  243. // this.setData({
  244. // amountDue: 150.00,
  245. // balance: 200.50
  246. // });
  247. },
  248. })