zfb.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <view class="content">
  3. <view class="box">
  4. <view class="item top">
  5. <text>真实姓名</text>
  6. <input type="text" v-model="name" value="" placeholder="请输入真实姓名" />
  7. </view>
  8. <view class="item">
  9. <text>支付宝账号</text>
  10. <input type="text" v-model="id" value="" placeholder="请输入支付宝账号" />
  11. </view>
  12. <view class="item">
  13. <text>手机号</text>
  14. <input type="text" v-model="phone" value="" placeholder="请输入手机号" />
  15. </view>
  16. <view class="item">
  17. <text>验证码</text>
  18. <view class="login_name flex">
  19. <input class="uni-input" v-model="code" focus placeholder="请输入验证码" />
  20. <view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="button" @click="confirm()">确认</view>
  25. </view>
  26. </template>
  27. <script>
  28. import { orderData, getUserInfo } from '@/api/user.js';
  29. import { mapState, mapMutations } from 'vuex';
  30. import { auction,pay_list } from '@/api/wallet.js';
  31. import { verify } from '@/api/login.js';
  32. export default {
  33. computed: {
  34. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  35. },
  36. data() {
  37. return {
  38. name: '',
  39. id: '',
  40. phone:'',
  41. countDown:0,//倒计时
  42. code:'',//验证码
  43. time:''
  44. };
  45. },
  46. watch: {
  47. // 监听倒计时
  48. countDown(i) {
  49. if (i == 0) {
  50. clearInterval(this.time);
  51. }
  52. }
  53. },
  54. onLoad() {
  55. pay_list().then(({data}) =>{
  56. if(data.zfb != ''){
  57. this.name = data.zfb.name
  58. this.id = data.zfb.payment
  59. this.phone = data.zfb.phone
  60. }
  61. })
  62. },
  63. methods: {
  64. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  65. verification() {
  66. let obj = this;
  67. if (!this.userInfo.phone) {
  68. this.$api.msg('请绑定手机号');
  69. return;
  70. }
  71. // 判断是否在倒计时
  72. if (obj.countDown > 0) {
  73. return false;
  74. } else {
  75. obj.countDown = 60;
  76. obj.time = setInterval(() => {
  77. obj.countDown--;
  78. }, 1000);
  79. //调用验证码接口
  80. verify({
  81. phone: obj.userInfo.phone,
  82. type: ''
  83. })
  84. .then(({ data }) => {})
  85. .catch(err => {
  86. console.log(err);
  87. });
  88. }
  89. },
  90. confirm() {
  91. let obj = this;
  92. if (!obj.name) {
  93. return this.$api.msg('请输入提款人姓名');
  94. }
  95. if (!obj.id) {
  96. return this.$api.msg('请输入支付宝账号');
  97. }
  98. if (!obj.phone) {
  99. return this.$api.msg('请输入手机号码');
  100. }
  101. if (!obj.code) {
  102. return this.$api.msg('请输入验证码');
  103. }
  104. auction({
  105. type:2,
  106. name: obj.name,
  107. payment: obj.id,
  108. phone: obj.phone,
  109. captcha:obj.code
  110. })
  111. .then(e => {
  112. obj.$api.msg('修改成功');
  113. })
  114. .catch(e => {
  115. console.log(e);
  116. });
  117. },
  118. }
  119. };
  120. </script>
  121. <style lang="scss">
  122. page,
  123. .content {
  124. height: 100%;
  125. padding: 0;
  126. margin: 0;
  127. }
  128. .top {
  129. border-bottom: 1rpx solid #f3f3f3;
  130. }
  131. .box {
  132. background: #ffffff;
  133. margin: 20rpx 0 70rpx 0;
  134. .item {
  135. display: flex;
  136. align-items: center;
  137. text {
  138. margin: 0 40rpx 0 25rpx;
  139. width: 150rpx;
  140. font-size: 30rpx;
  141. font-family: PingFang SC;
  142. font-weight: 400;
  143. color: #333333;
  144. line-height: 100rpx;
  145. }
  146. input {
  147. height: 100rpx;
  148. display: inline-block;
  149. font-size: 28rpx;
  150. font-family: PingFang SC;
  151. font-weight: 400;
  152. color: #999999;
  153. line-height: 100rpx;
  154. }
  155. .uni-input {
  156. text-align: left;
  157. width: 325rpx;
  158. font-size: 28rpx !important;
  159. }
  160. .login_name {
  161. color: #333333;
  162. }
  163. .code {
  164. color: #db292b;
  165. font-size: 23rpx;
  166. border-left: 1px solid #eeeeee;
  167. width: 150rpx;
  168. flex-shrink: 0;
  169. text-align: center;
  170. }
  171. }
  172. }
  173. .button {
  174. text-align: center;
  175. width: 560rpx;
  176. height: 80rpx;
  177. background: #FD3B39;
  178. border-radius: 40rpx;
  179. font-size: 30rpx;
  180. font-family: PingFangSC;
  181. font-weight: 500;
  182. color: #ffffff;
  183. line-height: 80rpx;
  184. margin: 0 auto;
  185. }
  186. </style>