wallet.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <template>
  2. <view class="content">
  3. <view class="content-money">
  4. <view class="flex">
  5. <view class="buttom">
  6. <view class="icon">{{ userInfo.anticipate | getMoneyStyle }}</view>
  7. <text class="text">可用预约券</text>
  8. </view>
  9. </view>
  10. </view>
  11. <view class="row-box">
  12. <view class="title">收款人id</view>
  13. <view class="row"><input class="input" type="number" v-model="card" placeholder="请输入收款人id" placeholder-class="placeholder" /></view>
  14. </view>
  15. <view class="row-box">
  16. <view class="title">转账金额</view>
  17. <view class="row">
  18. <!-- <text class="tit">¥</text> -->
  19. <input class="input" type="number" v-model="withdrawal" placeholder="转入金额" placeholder-class="placeholder" />
  20. <view class="buttom" @click="withdrawal = userInfo.anticipate">全部转账</view>
  21. </view>
  22. </view>
  23. <button class="add-btn up" :class="{ action: loding }" @click="!loding ? confirm() : ''">提交申请</button>
  24. </view>
  25. </template>
  26. <script>
  27. import { getMoneyStyle } from '@/utils/rocessor.js';
  28. import { getUserInfo,transfer_accounts } from '@/api/user.js';
  29. import { mapMutations, mapState } from 'vuex';
  30. export default {
  31. filters: {
  32. getMoneyStyle
  33. },
  34. data() {
  35. return {
  36. money: '0.00', //可提现金额
  37. withdrawal: '', //提现金额
  38. password: '', //支付密码
  39. card: '', //转账卡号
  40. name: '',
  41. // #ifdef H5
  42. weichatBsrowser: false,
  43. // #endif
  44. loding: false,
  45. type: 'xl'
  46. };
  47. },
  48. onLoad(options) {
  49. // #ifdef H5
  50. this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
  51. // #endif
  52. this.dataUp();
  53. if (options.type) {
  54. this.type = options.type;
  55. console.log(this.type);
  56. }
  57. },
  58. computed: {
  59. ...mapState('user', ['userInfo'])
  60. },
  61. methods: {
  62. ...mapMutations('user', ['setUserInfo', 'login']),
  63. // 更新数据
  64. dataUp() {
  65. let obj = this;
  66. getUserInfo({})
  67. .then(e => {
  68. obj.login();
  69. // 保存返回用户数据
  70. obj.setUserInfo(e.data);
  71. })
  72. .catch(e => {
  73. console.log(e);
  74. });
  75. },
  76. // 切换选中对象
  77. tabRadio(e) {
  78. this.type = e.detail.value;
  79. },
  80. // 提交
  81. confirm() {
  82. let obj = this;
  83. obj.loding = true;
  84. if (obj.withdrawal == 0) {
  85. obj.loding = false;
  86. uni.showModal({
  87. title: '提示',
  88. content: '转账金额不要为0'
  89. });
  90. return;
  91. }
  92. if (obj.card == obj.userInfo.phone) {
  93. obj.loding = false;
  94. uni.showModal({
  95. title: '提示',
  96. content: '不要输入自己的用户账号'
  97. });
  98. } else {
  99. let data = {
  100. uid: obj.card, //编号
  101. anticipate: obj.withdrawal //金额
  102. };
  103. transfer_accounts(data)
  104. .then(e => {
  105. // 允许按钮点击
  106. obj.loding = false;
  107. // 初始化提现金额
  108. obj.withdrawal = '';
  109. uni.showToast({
  110. title: '提交成功',
  111. duration: 2000,
  112. position: 'top'
  113. });
  114. obj.dataUp();
  115. })
  116. .catch(e => {
  117. obj.$api.msg(e.msg);
  118. obj.loding = false;
  119. console.log();
  120. });
  121. }
  122. }
  123. }
  124. };
  125. </script>
  126. <style lang="scss">
  127. page {
  128. height: 100%;
  129. }
  130. .content-money {
  131. padding: 30rpx 0;
  132. background: #ffffff;
  133. }
  134. .item {
  135. padding: 0 $page-row-spacing;
  136. background-color: #ffffff;
  137. }
  138. .flex {
  139. background-color: #ffffff;
  140. text-align: center;
  141. margin: 0 30rpx;
  142. border-radius: $border-radius-sm;
  143. justify-content: center;
  144. .buttom {
  145. font-size: $font-lg;
  146. width: 50%;
  147. }
  148. .interval {
  149. width: 2px;
  150. height: 60rpx;
  151. background-color: #eeeeee;
  152. }
  153. .icon {
  154. background-size: 100%;
  155. font-size: 42rpx;
  156. color: $font-color-dark;
  157. font-weight: bold;
  158. background-repeat: no-repeat;
  159. background-position: center;
  160. }
  161. .text {
  162. color: $font-color-light;
  163. }
  164. }
  165. .row-box {
  166. margin-top: 30rpx;
  167. padding: 20rpx 30rpx;
  168. background: #fff;
  169. .title {
  170. font-size: $font-base + 2rpx;
  171. color: $font-color-dark;
  172. }
  173. .row {
  174. display: flex;
  175. align-items: center;
  176. position: relative;
  177. height: 80rpx;
  178. .tit {
  179. flex-shrink: 0;
  180. width: 40rpx;
  181. font-size: 30rpx;
  182. color: $font-color-dark;
  183. }
  184. .input {
  185. flex: 1;
  186. font-size: 30rpx;
  187. color: $font-color-dark;
  188. }
  189. .iconlocation {
  190. font-size: 36rpx;
  191. color: $font-color-light;
  192. }
  193. .buttom {
  194. color: #f21f5d;
  195. font-size: $font-base;
  196. }
  197. }
  198. }
  199. .add-btn {
  200. width: 520rpx;
  201. height: 80rpx;
  202. border: 2rpx solid #f21f5d;
  203. border-radius: 40rpx;
  204. margin: 140rpx auto;
  205. font-family: PingFang SC;
  206. font-weight: bold;
  207. color: #f21f5d;
  208. }
  209. .name {
  210. background: #fff;
  211. padding: 30rpx;
  212. }
  213. .list {
  214. padding-left: 30rpx;
  215. margin-top: 30rpx;
  216. background-color: #ffffff;
  217. .box {
  218. display: flex;
  219. align-items: center;
  220. width: 100%;
  221. height: 120rpx;
  222. border-bottom: 1px solid $border-color-light;
  223. .icon {
  224. font-size: 48rpx;
  225. padding-right: 20rpx;
  226. .icon-img {
  227. height: 50rpx;
  228. width: 50rpx;
  229. }
  230. }
  231. .iconweixin1 {
  232. color: #18bf16;
  233. }
  234. .iconzhifubao {
  235. color: #08aaec;
  236. }
  237. .title-box {
  238. flex-grow: 1;
  239. text-align: left;
  240. .title {
  241. font-size: $font-base + 2rpx;
  242. color: $font-color-base;
  243. }
  244. .node {
  245. font-size: $font-sm;
  246. color: $font-color-light;
  247. }
  248. }
  249. }
  250. }
  251. .tip {
  252. padding: 20rpx;
  253. color: #ff0000;
  254. }
  255. /deep/ .uni-radio-input {
  256. width: 45rpx;
  257. height: 45rpx;
  258. }
  259. </style>