zfb.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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 top">
  9. <text>支付宝账号</text>
  10. <input type="text" v-model="id" value="" placeholder="请输入支付宝账号" />
  11. </view>
  12. <!-- <view class="item top">
  13. <text>手机号</text>
  14. <input type="text" v-model="phone" value="" placeholder="请输入手机号" />
  15. </view> -->
  16. <view class="item top">
  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 class="erweima">
  24. <text>收款码</text>
  25. <view class="img" @click="uploads()">
  26. <image src="../../static/user/erweima.png" mode="" v-if="image == ''"></image>
  27. <image :src="image" mode="" v-else></image>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="button" @click="confirm()">确认</view>
  32. </view>
  33. </template>
  34. <script>
  35. import {
  36. upload
  37. } from '@/api/order.js'
  38. import {
  39. orderData,
  40. getUserInfo
  41. } from '@/api/user.js';
  42. import {
  43. mapState,
  44. mapMutations
  45. } from 'vuex';
  46. import {
  47. auction,
  48. pay_list
  49. } from '@/api/wallet.js';
  50. import {
  51. verify
  52. } from '@/api/login.js';
  53. export default {
  54. computed: {
  55. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  56. },
  57. data() {
  58. return {
  59. name: '',
  60. id: '',
  61. phone: '',
  62. countDown: 0, //倒计时
  63. code: '', //验证码
  64. time: '',
  65. image: ''
  66. };
  67. },
  68. watch: {
  69. // 监听倒计时
  70. countDown(i) {
  71. if (i == 0) {
  72. clearInterval(this.time);
  73. }
  74. }
  75. },
  76. onLoad() {
  77. pay_list().then(({
  78. data
  79. }) => {
  80. if (data.zfb != '') {
  81. this.name = data.zfb.name
  82. this.id = data.zfb.payment
  83. this.phone = data.zfb.phone
  84. this.image = data.zfb.image
  85. }
  86. })
  87. },
  88. methods: {
  89. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  90. uploads() {
  91. upload({
  92. filename: '',
  93. file_name:'collection/zfb/'+that.userInfo.uid
  94. }).then(data => {
  95. this.image = data[0].url;
  96. })
  97. },
  98. verification() {
  99. let obj = this;
  100. if (!this.userInfo.phone) {
  101. this.$api.msg('请绑定手机号');
  102. return;
  103. }
  104. // 判断是否在倒计时
  105. if (obj.countDown > 0) {
  106. return false;
  107. } else {
  108. obj.countDown = 60;
  109. obj.time = setInterval(() => {
  110. obj.countDown--;
  111. }, 1000);
  112. //调用验证码接口
  113. verify({
  114. phone: obj.userInfo.phone,
  115. type: ''
  116. })
  117. .then(({
  118. data
  119. }) => {})
  120. .catch(err => {
  121. console.log(err);
  122. });
  123. }
  124. },
  125. confirm() {
  126. let obj = this;
  127. if (!obj.name) {
  128. return this.$api.msg('请输入提款人姓名');
  129. }
  130. if (!obj.id) {
  131. return this.$api.msg('请输入支付宝账号');
  132. }
  133. // if (!obj.phone) {
  134. // return this.$api.msg('请输入手机号码');
  135. // }
  136. if (!obj.code) {
  137. return this.$api.msg('请输入验证码');
  138. }
  139. if (!obj.image) {
  140. return this.$api.msg('请上传支付凭证');
  141. }
  142. auction({
  143. type: 2,
  144. name: obj.name,
  145. payment: obj.id,
  146. phone: obj.userInfo.phone,
  147. captcha: obj.code,
  148. image: obj.image,
  149. })
  150. .then(e => {
  151. obj.$api.msg('修改成功');
  152. uni.redirectTo({
  153. url: './collection',
  154. });
  155. })
  156. .catch(e => {
  157. console.log(e);
  158. });
  159. },
  160. }
  161. };
  162. </script>
  163. <style lang="scss">
  164. page,
  165. .content {
  166. height: 100%;
  167. padding: 0;
  168. margin: 0;
  169. }
  170. .top {
  171. border-bottom: 1rpx solid #f3f3f3;
  172. }
  173. .box {
  174. background: #ffffff;
  175. margin: 20rpx 0 70rpx 0;
  176. .item {
  177. display: flex;
  178. align-items: center;
  179. text {
  180. margin: 0 40rpx 0 25rpx;
  181. width: 150rpx;
  182. font-size: 30rpx;
  183. font-family: PingFang SC;
  184. font-weight: 400;
  185. color: #333333;
  186. line-height: 100rpx;
  187. }
  188. input {
  189. height: 100rpx;
  190. display: inline-block;
  191. font-size: 28rpx;
  192. font-family: PingFang SC;
  193. font-weight: 400;
  194. color: #999999;
  195. line-height: 100rpx;
  196. }
  197. .uni-input {
  198. text-align: left;
  199. width: 325rpx;
  200. font-size: 28rpx !important;
  201. }
  202. .login_name {
  203. color: #333333;
  204. }
  205. .code {
  206. color: #db292b;
  207. font-size: 23rpx;
  208. border-left: 1px solid #eeeeee;
  209. width: 150rpx;
  210. flex-shrink: 0;
  211. text-align: center;
  212. }
  213. }
  214. }
  215. .button {
  216. text-align: center;
  217. width: 560rpx;
  218. height: 80rpx;
  219. background: #FD3B39;
  220. border-radius: 40rpx;
  221. font-size: 30rpx;
  222. font-family: PingFangSC;
  223. font-weight: 500;
  224. color: #ffffff;
  225. line-height: 80rpx;
  226. margin: 0 auto;
  227. }
  228. .erweima {
  229. padding: 30rpx 0;
  230. display: flex;
  231. text {
  232. margin: 0 30rpx;
  233. width: 150rpx;
  234. font-size: 30rpx;
  235. font-family: PingFang SC;
  236. font-weight: 400;
  237. color: #333333;
  238. }
  239. .img {
  240. width: 160rpx;
  241. height: 160rpx;
  242. image {
  243. width: 100%;
  244. height: 100%;
  245. }
  246. }
  247. }
  248. </style>