wallet.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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. delFlag: '0'
  114. });
  115. if (res.data.length) {
  116. this.navigate({
  117. url: `/pages/wallet/withdraw?amount=${this.totalAssetAmount}`,
  118. }, "navigateTo", true)
  119. } else {
  120. uni.showToast({
  121. title: '暂无审核通过的银行卡,不可提现',
  122. duration: 3000,
  123. icon: "none"
  124. });
  125. }
  126. },
  127. }
  128. }
  129. </script>
  130. <style lang="scss" scoped>
  131. @import '@/style/mixin.scss';
  132. page {
  133. background: #F8FAFE;
  134. }
  135. .assets {
  136. width: 100%;
  137. height: auto;
  138. background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFE 100%);
  139. box-shadow: 0px 4px 10px 0px #DAE3F4;
  140. border-radius: 10px;
  141. border: 1px solid #FFFFFF;
  142. padding: 0 10px;
  143. >view:nth-child(1) {
  144. border-bottom: 1px solid #CFCFCF;
  145. padding: 24px 0;
  146. color: #333;
  147. text:nth-child(1) {
  148. font-size: 14px;
  149. }
  150. text:nth-child(2) {
  151. font-size: 30px;
  152. font-weight: bold;
  153. margin: 6px 0;
  154. }
  155. }
  156. .yushou {
  157. padding: 16px 0;
  158. image {
  159. width: 20px;
  160. height: 20px;
  161. margin-top: 5px;
  162. }
  163. }
  164. }
  165. /* 银行卡信息Start */
  166. .search {
  167. height: auto;
  168. width: 100%;
  169. z-index: 999999;
  170. padding: 50px 16px 30px;
  171. height: auto;
  172. background: #F8FAFE;
  173. background-image: url("/static/image/wallet/qianbao.png");
  174. background-size: 100% 100%;
  175. position: relative;
  176. text {
  177. font-size: 18px;
  178. font-weight: bold;
  179. color: #000;
  180. }
  181. .bank {
  182. font-weight: 600;
  183. font-size: 28rpx;
  184. color: #000000;
  185. }
  186. .center {
  187. position: absolute;
  188. left: 50%;
  189. transform: translateX(-50%);
  190. }
  191. image {
  192. width: 22px;
  193. height: 22px;
  194. margin-left: 20px;
  195. }
  196. }
  197. </style>