recharge.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  1. <template>
  2. <view class="container">
  3. <view class="list-box">
  4. <view class="list flex">
  5. <view class="flex_item list-item">
  6. <image :src="logo"></image>
  7. <view>{{name}}</view>
  8. </view>
  9. <view class="flex_item list-tpl">
  10. <view class="content" @click="useOutClickSide">
  11. <selectss ref="easySelect" :options='moneyTypeList' :value="name" @selectOne="selectOne">
  12. </selectss>
  13. </view>
  14. <image src="../../static/img/img23.png"></image>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="image-box" v-if="charge != 0">
  19. <!-- <view class="item flex" v-for="(item,index) in wayList" :key="index">
  20. <view class="way" @click="chose(item)">{{item}}</view>
  21. </view> -->
  22. <view class="tuijianbox" >
  23. <view class="item" @click="gogo()" >
  24. <image v-if="idx == 2" src="../../static/img/befor.png"></image>
  25. <image v-else src="../../static/img/after.png"></image>
  26. </view>
  27. </view>
  28. <tki-qrcode
  29. :cid="cid"
  30. ref="qrcode"
  31. :val="address"
  32. :size="size"
  33. :unit="unit"
  34. :background="background"
  35. :foreground="foreground"
  36. :pdground="pdground"
  37. :iconSize="iconSize"
  38. :lv="lv"
  39. :onval="onval"
  40. :loadMake="loadMake"
  41. :usingComponents="usingComponents"
  42. @result="qrR"
  43. />
  44. <!-- <image :src="qr" mode="aspectFit"></image> -->
  45. </view>
  46. <view class="from-box" v-if="charge != 0">
  47. <view class="from-title">充币地址</view>
  48. <view class="flex input-tpl">
  49. <input class="input-box" disabled="disabled" type="text" v-model="address" />
  50. <view class="all" @click="copy(address)">复制</view>
  51. </view>
  52. <!-- <view class="from-title">充币数量</view>
  53. <input class="input-box" type="text" v-model="num" placeholder="请输入充币数量" /> -->
  54. <!-- <view class="submit" v-if="showBtn" @click="bangidng">绑定钱包</view> -->
  55. <!-- <view class="" v-if="orderShow == true">
  56. <view class="from-title">订单号</view>
  57. <view class="flex input-tpl">
  58. <input class="input-box" disabled="disabled" type="text" v-model="order_id" />
  59. <view class="all" @click="copy(order_id)">复制</view>
  60. </view>
  61. <view class="add-img-item" @click.stop="scImg()">
  62. <image class="add-img" :src="image" mode="aspectFit"></image>
  63. </view>
  64. <view class="addr-text" @click="moneyList">上传凭证</view>
  65. </view> -->
  66. <view class="text-box">{{mark}}</view>
  67. </view>
  68. <view class="qidai" v-else>
  69. {{mark}}
  70. </view>
  71. <uni-popup ref="popup" type="center">
  72. <view class="popup">
  73. <view class="cancel flex" @click="close">
  74. <view></view>
  75. <view class="tip">x</view>
  76. </view>
  77. <view class="list-boxs">
  78. <view class="popup-text">绑定地址:</view>
  79. <view class="password"><input type="text" v-model="keysAddr" placeholder="请输入绑定地址"></view>
  80. <view class="confirm-btn" @click="bd"><text>确认绑定</text></view>
  81. </view>
  82. </view>
  83. </uni-popup>
  84. </view>
  85. </template>
  86. <script>
  87. import {
  88. recharge,edit
  89. } from '@/api/finance.js';
  90. import {
  91. upload,
  92. money
  93. } from '@/api/finance.js';
  94. import selectss from '@/components/select.vue';
  95. import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
  96. import {
  97. moneyType
  98. } from '@/api/index.js';
  99. import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
  100. export default {
  101. components: {
  102. selectss,
  103. tkiQrcode
  104. },
  105. data() {
  106. return {
  107. wayList: [],
  108. moneyTypeList: [],
  109. charge: 0,
  110. logo: '',
  111. name: '',
  112. code: '',
  113. qr: '',
  114. address: '',
  115. image: '../../static/img/add.png',
  116. order_id:'',
  117. id:'',
  118. orderShow:false,
  119. mark:'',
  120. addr:'',
  121. ids:'',
  122. num: '',
  123. password: '',
  124. keysAddr:'',
  125. showBtn:false,
  126. idx: 1,
  127. cid: 'cid',
  128. size: 150,
  129. unit: '150',
  130. background: '#FFFFFF',
  131. foreground: '#000000',
  132. pdground: '#000000',
  133. icon: '',
  134. iconSize: 40,
  135. lv: 3,
  136. onval: true,
  137. loadMake: true,
  138. usingComponents: true,
  139. };
  140. },
  141. onLoad(option) {
  142. console.log(option)
  143. if (option.name) {
  144. this.name = option.name;
  145. this.logo = option.logo;
  146. this.charge = option.charge;
  147. this.code = option.code;
  148. this.mark = option.mark;
  149. this.ids = option.ids;
  150. this.keysAddr = option.keysAddr;
  151. this.qr = option._address_qr;
  152. this.ids = option.ids;
  153. this.addr = option.keysAddr;
  154. if(this.addr == null || this.addr == ''){
  155. this.showBtn = true
  156. }
  157. }
  158. this.moneyType();
  159. console.log(this.wayList)
  160. },
  161. onShow() {
  162. },
  163. methods: {
  164. // 所有币种
  165. async moneyType() {
  166. let obj = this;
  167. moneyType({}).then(({
  168. data
  169. }) => {
  170. obj.moneyTypeList = data;
  171. obj.address = obj.moneyTypeList[1].wallet.address_TRC20;
  172. obj.wayList = obj.moneyTypeList[0].way.split(',');
  173. if (obj.logo == '') {
  174. this.charge = obj.moneyTypeList[0].charge;
  175. obj.logo = obj.moneyTypeList[0].LOGO;
  176. obj.name = obj.moneyTypeList[0].name;
  177. obj.code = obj.moneyTypeList[0].code;
  178. obj.money = obj.moneyTypeList[0].price;
  179. // obj.address = obj.moneyTypeList[0].wallet.address_TRC20;
  180. obj.qr = obj.moneyTypeList[0]._address_qr;
  181. obj.mark = obj.moneyTypeList[0].mark;
  182. obj.address = obj.moneyTypeList[1].wallet.address_TRC20;
  183. obj.addr = obj.moneyTypeList[0].wallet.address;
  184. if(obj.addr == null || obj.addr == ''){
  185. obj.showBtn = true
  186. }
  187. obj.ids = obj.moneyTypeList[0].wallet.id;
  188. }
  189. });
  190. },
  191. //单张上传图片
  192. scImg() {
  193. let obj = this;
  194. upload({
  195. file: ''
  196. }).then(function(e) {
  197. if (e[0] == undefined || e[0] == '') {
  198. obj.$api.msg('图片上传失败!');
  199. } else {
  200. obj.image = e[0].url;
  201. obj.$api.msg('图片上传成功!');
  202. }
  203. })
  204. },
  205. close() {
  206. this.$refs.popup.close();
  207. },
  208. bd(){
  209. let obj = this;
  210. edit({
  211. key: obj.keysAddr
  212. },obj.ids).then(e => {
  213. obj.showBtn = false;
  214. obj.$api.msg(e.msg);
  215. obj.$refs.popup.close();
  216. });
  217. },
  218. bangidng(){
  219. let obj = this;
  220. obj.$refs.popup.open();
  221. },
  222. moneyList() {
  223. let obj = this;
  224. if (obj.image == '../../static/img/add.png') {
  225. obj.$api.msg('请上传凭证!');
  226. return;
  227. }
  228. money({
  229. proof: obj.image
  230. }, obj.id).then(e => {
  231. obj.$api.msg(e.msg);
  232. setTimeout(function() {
  233. uni.switchTab({
  234. url: '/pages/finance/index'
  235. })
  236. }, 1000);
  237. });
  238. },
  239. //复制
  240. copy(item) {
  241. let obj = this;
  242. let content = item; //需要复制的内容
  243. content = typeof content === 'string' ? content : content.toString() // 复制内容,必须字符串,数字需要转换为字符串
  244. const result = uniCopy(content)
  245. if (result === false) {
  246. uni.showToast({
  247. title: '不支持',
  248. })
  249. } else {
  250. uni.showToast({
  251. title: '复制成功',
  252. icon: 'none'
  253. })
  254. }
  255. },
  256. recharge() {
  257. let obj = this;
  258. if (obj.num == '') {
  259. obj.$api.msg('请输入充币数量!');
  260. return;
  261. }
  262. recharge({
  263. money_type: obj.code,
  264. num: obj.num,
  265. }).then((data) => {
  266. obj.order_id = data.data.order_id;
  267. obj.id = data.data.id;
  268. obj.num = '';
  269. obj.$api.msg(data.msg);
  270. obj.orderShow = true;
  271. });
  272. },
  273. selectOne(options) {
  274. this.logo = options.LOGO;
  275. this.charge = options.charge;
  276. this.name = options.name;
  277. this.code = options.code;
  278. this.money = options.price;
  279. this.address = options.wallet.address_TRC20;
  280. this.qr = options._address_qr;
  281. this.qr = options._address_qr;
  282. this.mark = options.mark;
  283. this.addr = options.wallet.address;
  284. this.ids = options.wallet.id;
  285. this.wayList = options.way.split(',');
  286. console.log(this.wayList)
  287. },
  288. useOutClickSide() {
  289. this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
  290. },
  291. sub() {
  292. this.idx = 2;
  293. this.$api.msg('敬请期待!');
  294. },
  295. gogo() {
  296. this.idx = 1;
  297. },
  298. qrR(res) {
  299. this.src = res;
  300. },
  301. creatQrcode() {
  302. this.$refs.qrcode._makeCode();
  303. },
  304. chose(item) {
  305. }
  306. }
  307. };
  308. </script>
  309. <style lang="scss">
  310. page {
  311. min-height: 100%;
  312. background-color: #ffffff;
  313. .container {
  314. width: 100%;
  315. }
  316. }
  317. .list-box {
  318. padding: 60rpx 30rpx;
  319. height: 350rpx;
  320. background-color: #5771DF;
  321. .list {
  322. background-color: #FFFFFF;
  323. border-radius: 15rpx;
  324. padding: 15rpx 23rpx;
  325. .list-item {
  326. font-size: 30rpx;
  327. font-weight: bold;
  328. color: #333333;
  329. image {
  330. width: 43rpx;
  331. height: 43rpx;
  332. margin-right: 15rpx;
  333. }
  334. }
  335. .list-tpl {
  336. image {
  337. width: 15rpx;
  338. height: 25rpx;
  339. margin-left: 20rpx;
  340. }
  341. }
  342. }
  343. }
  344. .image-box {
  345. position: relative;
  346. top: -100rpx;
  347. padding: 50rpx 0rpx;
  348. text-align: center;
  349. image {
  350. width: 300rpx;
  351. height: 300rpx;
  352. border-radius: 15rpx;
  353. }
  354. .item {
  355. margin-left: 40rpx;
  356. font-size: 20rpx;
  357. position: relative;
  358. line-height: 40rpx;
  359. color: #FFFFFF;
  360. image {
  361. width: 150rpx;
  362. height: 100rpx;
  363. }
  364. .way {
  365. text-align: center;
  366. line-height: 80rpx;
  367. height: 80rpx;
  368. width: 100rpx;
  369. border: 1 solid #000000;
  370. }
  371. }
  372. }
  373. .from-box {
  374. margin: 30rpx 30rpx;
  375. padding: 44rpx 25rpx;
  376. background-color: #FFFFFF;
  377. border-radius: 15rpx;
  378. position: relative;
  379. top: -180rpx;
  380. .from-title {
  381. font-size: 24rpx;
  382. font-weight: bold;
  383. color: #333333;
  384. }
  385. .input-box {
  386. font-size: 26rpx;
  387. font-weight: 500;
  388. color: #666666;
  389. margin: 35rpx 0rpx;
  390. width: 85%;
  391. }
  392. .all {
  393. font-size: 30rpx;
  394. font-weight: 500;
  395. color: #5771DF;
  396. }
  397. .all-num {
  398. font-size: 24rpx;
  399. font-weight: bold;
  400. color: #333333;
  401. text {
  402. font-size: 26rpx;
  403. padding: 0rpx 10rpx;
  404. color: #5771DF;
  405. }
  406. }
  407. .submit {
  408. background-color: #5771DF;
  409. margin-top: 160rpx;
  410. margin-bottom: 80rpx;
  411. color: #FFFFFF;
  412. text-align: center;
  413. padding: 26rpx 0rpx;
  414. border-radius: 15rpx;
  415. }
  416. .tpl-box {
  417. text-align: left;
  418. font-size: 28rpx;
  419. font-weight: 500;
  420. color: #FB3A2F;
  421. margin-top: 26rpx;
  422. }
  423. }
  424. .add-img-item {
  425. text-align: center;
  426. width: 100%;
  427. padding: 80rpx 0rpx;
  428. .add-img {
  429. width: 280rpx;
  430. height: 280rpx;
  431. }
  432. }
  433. .image {
  434. text-align: center;
  435. padding: 77rpx 0rpx 36rpx 0rpx;
  436. font-size: 30rpx;
  437. font-weight: bold;
  438. color: #333333;
  439. .addr-img {
  440. width: 188rpx;
  441. height: 188rpx;
  442. margin-top: 18rpx;
  443. }
  444. }
  445. .addr-text {
  446. text-align: center;
  447. width: 500rpx;
  448. margin: 0rpx auto;
  449. line-height: 80rpx;
  450. color: #FFFFFF;
  451. background-color: #5771DF;
  452. border-radius: 50rpx;
  453. margin-bottom: 114rpx;
  454. }
  455. .text-box{
  456. font-size: 24rpx;
  457. padding: 25rpx 0rpx;
  458. line-height: 50rpx;
  459. }
  460. //弹窗
  461. .popup{
  462. background-color: #FFFFFF;
  463. border-radius: 25rpx;
  464. font-size: 30rpx;
  465. .cancel{
  466. text-align: center;
  467. width: 100%;
  468. line-height: 60rpx;
  469. .tip{
  470. background-color: #5771DF;
  471. color: #FFFFFF;
  472. width:70rpx;
  473. height: 70rpx;
  474. border-top-right-radius:25rpx ;
  475. }
  476. }
  477. .list-boxs{
  478. padding: 0rpx 80rpx;
  479. .password{
  480. padding: 50rpx 0rpx;
  481. width: 100%;
  482. input{
  483. width: 90%;
  484. height: 80rpx;
  485. border: 2rpx solid #999999;
  486. padding-left: 25rpx;
  487. box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.27);
  488. border-radius:11rpx;
  489. }
  490. }
  491. .confirm-btn{
  492. margin-left: 80rpx;
  493. padding-bottom: 120rpx;
  494. padding-top: 30rpx;
  495. text{
  496. background-color: #5771DF;
  497. color: #FFFFFF;
  498. width: 100%;
  499. text-align: center;
  500. padding:25rpx 90rpx;
  501. border-radius: 15rpx;
  502. }
  503. }
  504. }
  505. }
  506. .tuijianbox{
  507. width: 100%;
  508. display: flex;
  509. height: 40rpx;
  510. margin-bottom: 60rpx;
  511. .item {
  512. margin-left: 40rpx;
  513. font-size: 20rpx;
  514. position: relative;
  515. line-height: 40rpx;
  516. color: #FFFFFF;
  517. image {
  518. width: 150rpx;
  519. height: 100rpx;
  520. }
  521. .way {
  522. text-align: center;
  523. line-height: 1;
  524. height: 80rpx;
  525. width: 100rpx;
  526. border: 1 solid #FFFFFF;
  527. }
  528. }
  529. }
  530. .qidai {
  531. width: 100%;
  532. font-size: 100rpx;
  533. text-align: center;
  534. }
  535. </style>