微信小店联盟带货小程序

edit.js 5.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. Page({
  2. data: {
  3. accountTypes: [
  4. {
  5. type: 'bank',
  6. name: '银行卡',
  7. icon: '/static/images/bank-icon.png'
  8. },
  9. {
  10. type: 'alipay',
  11. name: '支付宝',
  12. icon: '/static/images/alipay-icon.png'
  13. },
  14. {
  15. type: 'wechat',
  16. name: '微信',
  17. icon: '/static/images/wechat-icon.png'
  18. }
  19. ],
  20. bankList: [
  21. { name: '中国银行', code: 'BOC', logo: '/static/images/bank-logos/boc.png' },
  22. { name: '工商银行', code: 'ICBC', logo: '/static/images/bank-logos/icbc.png' },
  23. { name: '农业银行', code: 'ABC', logo: '/static/images/bank-logos/abc.png' },
  24. { name: '建设银行', code: 'CCB', logo: '/static/images/bank-logos/ccb.png' },
  25. { name: '交通银行', code: 'COMM', logo: '/static/images/bank-logos/comm.png' },
  26. { name: '招商银行', code: 'CMB', logo: '/static/images/bank-logos/cmb.png' },
  27. { name: '邮政银行', code: 'PSBC', logo: '/static/images/bank-logos/psbc.png' },
  28. { name: '浦发银行', code: 'SPDB', logo: '/static/images/bank-logos/spdb.png' },
  29. { name: '民生银行', code: 'CMBC', logo: '/static/images/bank-logos/cmbc.png' },
  30. { name: '兴业银行', code: 'CIB', logo: '/static/images/bank-logos/cib.png' },
  31. { name: '光大银行', code: 'CEB', logo: '/static/images/bank-logos/ceb.png' },
  32. { name: '华夏银行', code: 'HXB', logo: '/static/images/bank-logos/hxb.png' },
  33. { name: '广发银行', code: 'GDB', logo: '/static/images/bank-logos/gdb.png' },
  34. { name: '平安银行', code: 'PAB', logo: '/static/images/bank-logos/pab.png' }
  35. ],
  36. selectedAccountType: null,
  37. selectedBank: null,
  38. accountNumber: '',
  39. accountName: '',
  40. isDefault: false,
  41. showBankList: false,
  42. cardId: null
  43. },
  44. onLoad(options) {
  45. // 获取传入的银行卡ID
  46. const { id } = options
  47. this.setData({ cardId: id })
  48. this.getBankCardDetail(id)
  49. },
  50. // 获取银行卡详情
  51. getBankCardDetail(id) {
  52. // TODO: 调用后端API获取银行卡详情
  53. // 这里使用模拟数据
  54. const cardDetail = {
  55. type: 'bank',
  56. bankName: '中国银行',
  57. accountNumber: '6225 8888 9999 1234',
  58. accountName: '张三',
  59. isDefault: false
  60. }
  61. const selectedBank = this.data.bankList.find(bank => bank.name === cardDetail.bankName)
  62. this.setData({
  63. selectedAccountType: cardDetail.type,
  64. selectedBank,
  65. accountNumber: cardDetail.accountNumber,
  66. accountName: cardDetail.accountName,
  67. isDefault: cardDetail.isDefault
  68. })
  69. },
  70. // 选择账户类型
  71. selectAccountType(e) {
  72. const { type } = e.currentTarget.dataset
  73. this.setData({
  74. selectedAccountType: type,
  75. selectedBank: type === 'bank' ? null : this.data.selectedBank,
  76. accountNumber: '',
  77. accountName: ''
  78. })
  79. },
  80. // 显示银行列表
  81. showBankList() {
  82. if (this.data.selectedAccountType === 'bank') {
  83. this.setData({ showBankList: true })
  84. }
  85. },
  86. // 隐藏银行列表
  87. hideBankList() {
  88. this.setData({ showBankList: false })
  89. },
  90. // 阻止事件冒泡
  91. preventTap() {},
  92. // 选择银行
  93. selectBank(e) {
  94. const { code } = e.currentTarget.dataset
  95. this.setData({
  96. selectedBank: this.data.bankList.find(bank => bank.code === code),
  97. showBankList: false
  98. })
  99. },
  100. // 输入账号
  101. onAccountNumberInput(e) {
  102. this.setData({
  103. accountNumber: e.detail.value
  104. })
  105. },
  106. // 输入姓名
  107. onAccountNameInput(e) {
  108. this.setData({
  109. accountName: e.detail.value
  110. })
  111. },
  112. // 切换默认状态
  113. toggleDefault() {
  114. this.setData({
  115. isDefault: !this.data.isDefault
  116. })
  117. },
  118. // 保存账户
  119. saveAccount() {
  120. const {
  121. cardId,
  122. selectedAccountType,
  123. selectedBank,
  124. accountNumber,
  125. accountName,
  126. isDefault
  127. } = this.data
  128. // 验证账户类型
  129. if (!selectedAccountType) {
  130. wx.showToast({
  131. title: '请选择账户类型',
  132. icon: 'none'
  133. })
  134. return
  135. }
  136. // 验证银行(如果是银行卡)
  137. if (selectedAccountType === 'bank' && !selectedBank) {
  138. wx.showToast({
  139. title: '请选择银行',
  140. icon: 'none'
  141. })
  142. return
  143. }
  144. // 验证账号
  145. if (!accountNumber) {
  146. wx.showToast({
  147. title: '请输入账号',
  148. icon: 'none'
  149. })
  150. return
  151. }
  152. // 验证姓名
  153. if (!accountName) {
  154. wx.showToast({
  155. title: '请输入姓名',
  156. icon: 'none'
  157. })
  158. return
  159. }
  160. // 准备提交数据
  161. const accountData = {
  162. id: cardId,
  163. type: selectedAccountType,
  164. bankName: selectedAccountType === 'bank' ? selectedBank.name : null,
  165. accountNumber,
  166. accountName,
  167. isDefault
  168. }
  169. // TODO: 调用后端API更新账户
  170. wx.showLoading({ title: '保存中...' })
  171. setTimeout(() => {
  172. wx.hideLoading()
  173. wx.showToast({
  174. title: '账户更新成功',
  175. icon: 'success',
  176. success: () => {
  177. wx.navigateBack()
  178. }
  179. })
  180. }, 1500)
  181. }
  182. })