wallet.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <view>
  3. <!-- 公共组件-每个页面必须引入 -->
  4. <public-module></public-module>
  5. <view style="z-index: 99;">
  6. <view class="search dis a-c j-s">
  7. <u-icon name="arrow-left" size="40" @tap="back"></u-icon>
  8. <text class="center">钱包</text>
  9. <text class="bank" @click="changeBank">卡包</text>
  10. </view>
  11. </view>
  12. <view class="" style="padding:0 16px 16px;">
  13. <view class="assets dis f-c j-s">
  14. <view class="dis f-c j-s a-c">
  15. <text>我的资产(元)</text>
  16. <text> <text style="font-size: 16px;">¥</text> {{totalAssetAmount}}</text>
  17. <u-button size="medium" type="primary"
  18. style="background: linear-gradient( 270deg, #0052FF 0%, #6899FF 100%);"
  19. @click="toWithdraw">提现</u-button>
  20. </view>
  21. <view class="yushou dis f-c">
  22. <view class="dis j-s a-start" @click="details('/pages/wallet/preReceivedDetails')">
  23. <image src="/static/image/wallet/yushou.png" mode=""></image>
  24. <view class="dis f-c " style="width: 90%;">
  25. <view class="dis a-c j-s">
  26. <text style="font-size: 15px;color: #333;font-weight: bold;">预收明细</text>
  27. <u-icon name="arrow-right" size="30" color="#C7C6CA"></u-icon>
  28. </view>
  29. <text style="font-size: 12px;color: rgba(51,51,51,0.8);">车牌订单明细内容</text>
  30. </view>
  31. </view>
  32. <view class="dis j-s a-start" style="margin-top: 16px;"
  33. @click="details('/pages/wallet/transactionDetails')">
  34. <image src="/static/image/wallet/yushou.png" mode=""></image>
  35. <view class="dis f-c " style="width: 90%;">
  36. <view class="dis a-c j-s">
  37. <text style="font-size: 15px;color: #333;font-weight: bold;">收支明细</text>
  38. <u-icon name="arrow-right" size="30" color="#C7C6CA"></u-icon>
  39. </view>
  40. <text style="font-size: 12px;color: rgba(51,51,51,0.8);">收入/提现中/已提现明细内容</text>
  41. </view>
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. import {
  50. mapState
  51. } from "vuex"
  52. export default {
  53. data() {
  54. return {
  55. totalAssetAmount: null,
  56. }
  57. },
  58. computed: {
  59. ...mapState(['userInfo'])
  60. },
  61. onShow() {
  62. this.getAdvanceMoney(); //金额
  63. },
  64. onLoad() {
  65. this.getAdvanceMoney(); //手续费金额
  66. },
  67. methods: {
  68. // 预收账户金额查询
  69. async getAdvanceMoney() {
  70. let res = await this.$http.get('/sysUserAccount/getUserSumAmountByUserId?userId=' + this.userInfo
  71. .sysUser.id);
  72. this.totalAssetAmount = res.data;
  73. },
  74. // 绑定银行卡界面
  75. async changeBank() {
  76. let res = await this.$http.post('/userBank/getUserBankList', {
  77. auditStatus: "",
  78. });
  79. if (res.data.length) {
  80. this.navigate({
  81. url: "/pages/wallet/bankCard"
  82. }, "navigateTo", true);
  83. } else {
  84. this.navigate({
  85. url: '/pages/wallet/bindBank',
  86. complete: () => {
  87. setTimeout(() => {
  88. uni.showToast({
  89. title: '请先绑定银行卡',
  90. duration: 3000,
  91. icon: "none"
  92. });
  93. }, 500);
  94. }
  95. }, "navigateTo", true)
  96. }
  97. },
  98. back() {
  99. uni.navigateBack({
  100. delta: 1, // 返回的页面数,如果是1表示返回上一页
  101. success: function() {}
  102. });
  103. },
  104. details(url) {
  105. this.navigate({
  106. url: url
  107. }, "navigateTo", true);
  108. },
  109. // 去提现
  110. async toWithdraw() {
  111. let res = await this.$http.post('/userBank/getUserBankList', {
  112. auditStatus: '1',
  113. });
  114. if (res.data.length) {
  115. this.navigate({
  116. url: `/pages/wallet/withdraw?amount=${this.totalAssetAmount}`,
  117. }, "navigateTo", true)
  118. } else {
  119. uni.showToast({
  120. title: '暂无审核通过的银行卡,不可提现',
  121. duration: 3000,
  122. icon: "none"
  123. });
  124. }
  125. },
  126. }
  127. }
  128. </script>
  129. <style lang="scss" scoped>
  130. @import '@/style/mixin.scss';
  131. page {
  132. background: #F8FAFE;
  133. }
  134. .assets {
  135. width: 100%;
  136. height: auto;
  137. background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
  138. box-shadow: 0px 4px 10px 0px #DAE3F4;
  139. border-radius: 10px;
  140. border: 1px solid #FFFFFF;
  141. padding: 0 10px;
  142. >view:nth-child(1) {
  143. border-bottom: 1px solid #CFCFCF;
  144. padding: 24px 0;
  145. color: #333;
  146. text:nth-child(1) {
  147. font-size: 14px;
  148. }
  149. text:nth-child(2) {
  150. font-size: 30px;
  151. font-weight: bold;
  152. margin: 6px 0;
  153. }
  154. }
  155. .yushou {
  156. padding: 16px 0;
  157. image {
  158. width: 20px;
  159. height: 20px;
  160. margin-top: 5px;
  161. }
  162. }
  163. }
  164. /* 银行卡信息Start */
  165. .search {
  166. height: auto;
  167. width: 100%;
  168. z-index: 999999;
  169. padding: 50px 16px 30px;
  170. height: auto;
  171. background: #F8FAFE;
  172. background-image: url("/static/image/wallet/qianbao.png");
  173. background-size: 100% 100%;
  174. position: relative;
  175. text {
  176. font-size: 18px;
  177. font-weight: bold;
  178. color: #000;
  179. }
  180. .bank {
  181. font-weight: 600;
  182. font-size: 28rpx;
  183. color: #000000;
  184. }
  185. .center {
  186. position: absolute;
  187. left: 50%;
  188. transform: translateX(-50%);
  189. }
  190. image {
  191. width: 22px;
  192. height: 22px;
  193. margin-left: 20px;
  194. }
  195. }
  196. </style>