zhifubao.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <template>
  2. <view class="container" v-if="shangxian =='否'">
  3. <!-- <list-cell title="收款人姓名" type="text" placeholder="请输入支付宝收款人姓名" v-model="userName"></list-cell>
  4. <list-cell title="支付宝账号" type="number" placeholder="请输入要绑定的支付宝手机号" v-model="mobile" :maxlength="11"></list-cell> -->
  5. <u-form :model="form" ref="uForm">
  6. <u-form-item label="收款人姓名" label-width="250"><u-input type="text" placeholder="请输入支付宝收款人姓名" v-model="userName" /></u-form-item>
  7. <u-form-item label="支付宝账号" label-width="250"><u-input type="text" placeholder="请输入要绑定的支付宝账号" v-model="mobile" /></u-form-item>
  8. </u-form>
  9. <button v-if="btn" class="confirm-btn" @click="toLogin" :disabled="logining">{{btn}}</button>
  10. <view style="padding: 32upx 64upx;font-size: 24upx;color: #999999;">提示:请正确填写收款人的支付宝账户和真实的收款人姓名,否则将无法正常收款</view>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. mobile: '',
  19. userName: '',
  20. btn:'绑定账户',
  21. logining: false,
  22. form:{},
  23. shangxian: '是'
  24. }
  25. },
  26. onLoad() {
  27. let userId = this.$queue.getData("userId");
  28. this.shangxian = uni.getStorageSync('shangxian')
  29. if(this.shangxian !='否'){
  30. uni.setNavigationBarTitle({
  31. title: '隐私政策'
  32. });
  33. }else{
  34. uni.setNavigationBarTitle({
  35. title: '提现账户'
  36. });
  37. }
  38. if (userId) {
  39. let userId = this.$queue.getData('userId');
  40. this.$Request.getT("/app/user/selectUserDetails?userId=" + userId).then(res => {
  41. if (res.code === 0 && res.data) {
  42. if (res.data.zhiFuBao) {
  43. this.mobile = res.data.zhiFuBao;
  44. this.btn = '修改账户';
  45. }else{
  46. this.btn = '绑定账户';
  47. }
  48. if (res.data.zhiFuBaoName) {
  49. this.userName = res.data.zhiFuBaoName;
  50. uni.setStorageSync('zhiFuBao', res.data.zhiFuBao)
  51. uni.setStorageSync('zhiFuBaoName', res.data.zhiFuBaoName)
  52. }
  53. }else{
  54. this.btn = '绑定账户';
  55. }
  56. });
  57. }
  58. },
  59. methods: {
  60. inputChange(e) {
  61. const key = e.currentTarget.dataset.key;
  62. this[key] = e.detail.value;
  63. },
  64. navBack() {
  65. uni.navigateBack();
  66. },
  67. toLogin() {
  68. let userId = this.$queue.getData("userId");
  69. let token = uni.getStorageSync("token");
  70. const {
  71. mobile,
  72. userName
  73. } = this;
  74. if (!mobile) {
  75. this.$queue.showToast("请设置收款人支付宝账号");
  76. } else if (!userName) {
  77. this.$queue.showToast("请设置收款人姓名");
  78. } else {
  79. this.$queue.showLoading("修改中...");
  80. this.$Request.postJson("/app/user/updateUser",{
  81. zhiFuBao: mobile,
  82. zhiFuBaoName: userName
  83. }).then(
  84. res => {
  85. if (res.code === 0) {
  86. this.navBack();
  87. } else {
  88. this.$queue.showToast(res.msg)
  89. }
  90. uni.hideLoading();
  91. });
  92. }
  93. },
  94. },
  95. }
  96. </script>
  97. <style lang='scss'>
  98. page {
  99. background: #FFFFFF;
  100. }
  101. .container {
  102. padding: 32upx;
  103. position: relative;
  104. width: 100%;
  105. height: 100%;
  106. overflow: hidden;
  107. background: #fff;
  108. }
  109. .confirm-btn1 {
  110. width: 300px;
  111. height: 42px;
  112. line-height: 42px;
  113. border-radius: 30px;
  114. margin-top: 70upx;
  115. background: whitesmoke;
  116. color: grey;
  117. /* font-size: $font-lg; */
  118. &:after {
  119. border-radius: 60px;
  120. }
  121. }
  122. .wrapper {
  123. position: relative;
  124. z-index: 90;
  125. background: #fff;
  126. padding-bottom: 20px;
  127. }
  128. .back-btn {
  129. position: absolute;
  130. left: 20px;
  131. z-index: 9999;
  132. padding-top: var(--status-bar-height);
  133. top: 20px;
  134. font-size: 20px;
  135. /* color: $font-color-dark; */
  136. }
  137. .left-top-sign {
  138. font-size: 80px;
  139. /* color: $page-color-base; */
  140. position: relative;
  141. }
  142. .right-top-sign {
  143. position: absolute;
  144. top: 40px;
  145. right: -15px;
  146. z-index: 95;
  147. &:before,
  148. &:after {
  149. display: block;
  150. content: "";
  151. width: 20px;
  152. height: 40px;
  153. background: -moz-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
  154. background: -webkit-gradient(linear,
  155. left top,
  156. left right,
  157. color-stop(0, #fa4dbe),
  158. color-stop(100%, #fbaa58));
  159. background: -webkit-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
  160. background: -o-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
  161. background: -ms-linear-gradient(left, #fa4dbe 0, #fbaa58 100%);
  162. background: linear-gradient(to left, #fa4dbe 0, #fbaa58 100%);
  163. }
  164. &:before {
  165. transform: rotate(50deg);
  166. border-radius: 0 50px 0 0;
  167. }
  168. &:after {
  169. position: absolute;
  170. right: -198px;
  171. top: 0;
  172. transform: rotate(-50deg);
  173. border-radius: 50px 0 0 0;
  174. /* background: pink; */
  175. }
  176. }
  177. .left-bottom-sign {
  178. position: absolute;
  179. left: -270px;
  180. bottom: -320px;
  181. /*border: 100upx solid #d0d1fd;*/
  182. border-radius: 50%;
  183. padding: 90px;
  184. }
  185. .welcome {
  186. position: relative;
  187. left: 30px;
  188. top: -50px;
  189. font-size: 23px;
  190. color: #555;
  191. text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
  192. }
  193. .input-content {
  194. padding: 0 20px;
  195. }
  196. .input-item {
  197. display: flex;
  198. flex-direction: column;
  199. align-items: flex-start;
  200. justify-content: center;
  201. padding: 0 30px;
  202. /* background: $page-color-light; */
  203. height: 64px;
  204. border-radius: 4px;
  205. margin-bottom: 30px;
  206. &:last-child {
  207. margin-bottom: 0;
  208. }
  209. .tit {
  210. height: 30px;
  211. line-height: 28px;
  212. /* font-size: $font-sm+2upx;
  213. color: $font-color-base; */
  214. }
  215. input {
  216. height: 40px;
  217. /* font-size: $font-base + 2upx;
  218. color: $font-color-dark; */
  219. width: 100%;
  220. }
  221. }
  222. .confirm-btn {
  223. width: 300px;
  224. height: 42px;
  225. line-height: 42px;
  226. border-radius: 30px;
  227. margin-top: 70upx;
  228. background: #2474FF;
  229. color: #fff;
  230. /* font-size: $font-lg; */
  231. &:after {
  232. border-radius: 60px;
  233. }
  234. }
  235. .forget-section {
  236. /* font-size: $font-sm+2upx;
  237. color: $font-color-spec; */
  238. text-align: center;
  239. margin-top: 40px;
  240. }
  241. .register-section {
  242. position: fixed;
  243. left: 0;
  244. bottom: 30px;
  245. width: 100%;
  246. /* font-size: $font-sm+2upx;
  247. color: $font-color-base; */
  248. text-align: center;
  249. text {
  250. /* color: $font-color-spec; */
  251. margin-left: 10px;
  252. }
  253. }
  254. </style>