cash.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. <template>
  2. <view class="content">
  3. <view class="header">
  4. <image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
  5. <view class="info-block flex-y-center">
  6. <view class="info">
  7. <view class="desc"> 可提现余额 (元)</view>
  8. <view class="title">{{money}}</view>
  9. </view>
  10. </view>
  11. </view>
  12. <form @submit="formSubmit">
  13. <view class="content-row">
  14. <view class="content-row-title">
  15. 提现金额
  16. </view>
  17. <view class="flex-y-center border-b content-row-ip">
  18. <text class="content-row-pirce">¥</text>
  19. <input class="flex-grow-1" style="font-size: 40rpx;" type="digit" name="cash_money" :value="relmoney" placeholder="请输入提现金额" />
  20. <text @click="all" class="content-row-oil">全部提现</text>
  21. </view>
  22. <view class="box-pack-between item flex-y-center ft32">
  23. <text>提现至</text>
  24. <view class="uni-input flex-y-center" @click="open">
  25. <image v-if="actIndex==0" src="../../static/images/ali.png" mode=""></image>
  26. <image v-else-if="actIndex==1" src="../../static/images/wx.png" mode=""></image>
  27. <image v-else src="../../static/images/black.png" mode=""></image>
  28. {{array[actIndex].bank_name}}
  29. <text class="iconfont icongengduo"></text>
  30. </view>
  31. </view>
  32. </view>
  33. <block v-if="actIndex<=1">
  34. <view class="box-pack-between list flex-y-center br">
  35. <text class="ft32">姓名</text>
  36. <input class="flex-grow-1 tr ft28" type="text" maxlength="16" name="cash_name" placeholder="请填写姓名"></input>
  37. </view>
  38. <view class="box-pack-between list flex-y-center br">
  39. <text class="ft32">提现账号</text>
  40. <input class="flex-grow-1 tr ft28" type="text" maxlength="64" name="cash_num" placeholder="请填写提现账号"></input>
  41. </view>
  42. </block>
  43. <button formType="submit" class="flex-center ft28 submit">立即提现</button>
  44. </form>
  45. <view class="bottom-bar flex-center">
  46. <navigator url="addbank">添加银行卡</navigator>
  47. <navigator url="history" style="margin-left: 30rpx;">提现明细</navigator>
  48. </view>
  49. <zx-uni-popup ref="popup" type="bottom">
  50. <view class="popup-content">
  51. <view class="popup-content-title ft32 flex-center">
  52. 请选择提现方式
  53. </view>
  54. <scroll-view scroll-y="true" class="scroll-view">
  55. <view class="box-pack-between flex-y-center ft32 pay-list" v-for="(item,index) of array" :key='index' @click="bindArr"
  56. :data-index='index' :data-cardname='item.card_name' :data-cardnum='item.card_num'>
  57. <view class="flex-grow-1 uni-input flex-y-center">
  58. <image v-if="index==0" src="../../static/images/ali.png" mode=""></image>
  59. <image v-else-if="index==1" src="../../static/images/wx.png" mode=""></image>
  60. <image v-else src="../../static/images/black.png" mode=""></image>
  61. {{item.bank_name}}
  62. </view>
  63. <view class="flex-grow-0">
  64. <image class="round" v-if="index==actIndex?true:false" src="../../static/images/checked.png"></image>
  65. <view class="round" v-else></view>
  66. </view>
  67. </view>
  68. </scroll-view>
  69. <navigator url="addbank" class="addback flex-center ft28">
  70. +添加银行卡
  71. </navigator>
  72. </view>
  73. </zx-uni-popup>
  74. </view>
  75. </template>
  76. <script>
  77. import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue'
  78. export default {
  79. components: {
  80. zxUniPopup,
  81. },
  82. data() {
  83. return {
  84. info: {},
  85. money: "",
  86. price: "",
  87. card_name: "",
  88. card_num: "",
  89. array: [{
  90. bank_name: "支付宝",
  91. cash_type: 2,
  92. },
  93. {
  94. bank_name: "微信",
  95. cash_type: 1,
  96. },
  97. ],
  98. index: 0,
  99. actIndex: 0,
  100. relmoney: ""
  101. }
  102. },
  103. onLoad(e) {
  104. this.money = e.money || "";
  105. },
  106. onShow(e) {
  107. this.request({
  108. url: "Advertiser/userbank",
  109. data: {
  110. token: uni.getStorageSync("token"),
  111. },
  112. }).then(res => {
  113. this.info = res;
  114. console.log(res, "res")
  115. if (res.code === '200') {
  116. let arr = res.data;
  117. for (let i of arr) {
  118. i.cash_type = 3
  119. }
  120. this.array = this.array.concat(arr);
  121. console.log(this.array, "this.array");
  122. }
  123. });
  124. },
  125. onHide() {
  126. this.array = [{
  127. bank_name: "支付宝",
  128. cash_type: 2,
  129. },
  130. {
  131. bank_name: "微信",
  132. cash_type: 1,
  133. },
  134. ];
  135. },
  136. onUnload() {
  137. this.array = [{
  138. bank_name: "支付宝",
  139. cash_type: 2,
  140. },
  141. {
  142. bank_name: "微信",
  143. cash_type: 1,
  144. },
  145. ];
  146. },
  147. methods: {
  148. all(e) {
  149. this.relmoney = this.money;
  150. },
  151. more(e) {
  152. this.price = Number(this.money);
  153. },
  154. open(e) {
  155. this.$refs.popup.open();
  156. },
  157. bindArr(e) {
  158. let index = e.currentTarget.dataset.index;
  159. this.card_name = e.currentTarget.dataset.cardname;
  160. this.card_num = e.currentTarget.dataset.cardnum;
  161. this.actIndex = index;
  162. this.$refs.popup.close();
  163. },
  164. formSubmit(e) {
  165. let data = e.detail.value;
  166. data.token = uni.getStorageSync("token");
  167. console.log(this.actIndex,this.array)
  168. data.cash_type = this.array[this.actIndex].cash_type;
  169. data.cash_type_name = this.array[this.actIndex].bank_name;
  170. if(Number(this.actIndex)>1){
  171. data.cash_name = this.array[this.actIndex].card_name;
  172. data.cash_num = this.array[this.actIndex].card_num;
  173. }
  174. this.request({
  175. url: "Advertiser/cash",
  176. data,
  177. }).then(res => {
  178. console.log(res, "res")
  179. if (res.code === "200") {
  180. uni.showToast({
  181. title: "申请成功",
  182. icon: 'none',
  183. duration: 2000,
  184. success: (res) => {
  185. setTimeout(() => {
  186. uni.navigateBack();
  187. }, 2e3)
  188. },
  189. })
  190. }
  191. }).catch((res) => {
  192. uni.showToast({
  193. title: res.message,
  194. icon: "none"
  195. })
  196. });
  197. },
  198. }
  199. }
  200. </script>
  201. <style>
  202. @import url("@/static/css/header.css");
  203. .content-row {
  204. padding: 0 40rpx;
  205. }
  206. .content-row-title {
  207. font-size: 36rpx;
  208. padding: 64rpx 0rpx;
  209. }
  210. .content-row-pirce {
  211. font-size: 48rpx;
  212. }
  213. .content-row-oil {
  214. font-size: 28rpx;
  215. font-family: PingFang SC, PingFang SC-Regular;
  216. font-weight: 400;
  217. color: #368bfe;
  218. }
  219. .content-row-ip {
  220. padding-bottom: 24rpx;
  221. }
  222. .item {
  223. width: 100%;
  224. height: 100rpx;
  225. background: rgba(255, 255, 255, 1);
  226. }
  227. .uni-input image {
  228. width: 32rpx;
  229. height: 32rpx;
  230. margin-right: 10rpx;
  231. }
  232. .round {
  233. width: 30rpx;
  234. height: 30rpx;
  235. border: 1rpx solid #C8C7CC;
  236. border-radius: 50%;
  237. }
  238. .block {
  239. background: #fff;
  240. padding: 30rpx 24rpx;
  241. }
  242. .uni-input image {
  243. width: 32rpx;
  244. height: 32rpx;
  245. margin-right: 10rpx;
  246. }
  247. .user-money {
  248. font-size: 15pt;
  249. }
  250. .cash-max-day {
  251. font-size: 9pt;
  252. margin-top: 18rpx;
  253. color: #888;
  254. }
  255. .cash-cny {
  256. font-size: 19pt;
  257. color: #000;
  258. line-height: 1.7;
  259. }
  260. .cash-input {
  261. font-size: 19pt;
  262. height: 100%;
  263. width: 100%;
  264. padding: 0 32rpx;
  265. }
  266. .cash-min {
  267. font-size: 9pt;
  268. }
  269. .cash-btn {
  270. width: 690rpx;
  271. height: 90rpx;
  272. background: linear-gradient(132deg, $uni-oil-btn-color-left 0%, $uni-oil-btn-color-right 100%);
  273. box-shadow: 0px 2rpx 12rpx $uni-oil-btn-color-left;
  274. opacity: 1;
  275. border-radius: 45rpx;
  276. margin: 0 auto;
  277. }
  278. .cash-max-detail {
  279. border: 1rpx solid #bbb;
  280. padding: 4rpx 8rpx;
  281. border-radius: 5rpx;
  282. margin-left: 24rpx;
  283. }
  284. .popup-content {
  285. width: 100%;
  286. height: 656rpx;
  287. background: #fff;
  288. padding: 40rpx;
  289. }
  290. .scroll-view {
  291. width: 100%;
  292. height: 456rpx;
  293. }
  294. .pay-list .none {
  295. display: none;
  296. }
  297. .addback {
  298. width: 300rpx;
  299. height: 80rpx;
  300. background: rgba(255, 255, 255, 1);
  301. border: 2px solid rgba(244, 244, 244, 1);
  302. opacity: 1;
  303. border-radius: 4rpx;
  304. color: #000;
  305. margin: 0 auto;
  306. }
  307. .pay-list {
  308. height: 110rpx;
  309. }
  310. .submit {
  311. width: 670rpx;
  312. height: 98rpx;
  313. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  314. border-radius: 8rpx;
  315. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  316. font-size: 32rpx;
  317. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  318. font-weight: 500;
  319. color: #ffffff;
  320. margin: 0 auto;
  321. margin-top: 80rpx;
  322. }
  323. .bottom-bar {
  324. text-align: center;
  325. font-size: 28rpx;
  326. font-family: PingFang SC, PingFang SC-Regular;
  327. font-weight: 400;
  328. color: #3387ff;
  329. width: 100%;
  330. padding: 15px 0;
  331. position: fixed;
  332. bottom: 10px;
  333. }
  334. .list {
  335. height: 100rpx;
  336. padding: 0 30rpx;
  337. background: #fff;
  338. }
  339. </style>