pledge.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
  1. <template>
  2. <view class="all">
  3. <!-- <view class="navList flex">
  4. <view v-for="(item, index) in navList" :key="index" class="navItem"
  5. :class="{ activeItem: tabCurrentIndex === index,tip:index == 0 }" @click="tabClick(index)">{{ item }}
  6. </view>
  7. </view> -->
  8. <!-- <view style="padding-top: 44px;" v-if="tabCurrentIndex == 0"> -->
  9. <view style="padding-top: 0;">
  10. <view class="listBox">
  11. <view class="titleTetx">数量</view>
  12. <view class="flex listTpl">
  13. <input type="number" class="inputBox" v-model="number" placeholder="请输入数量" />
  14. <view class="flex_item">
  15. <view class="listTip">USDT</view>
  16. <view class="listAll" @click="number=money">全部</view>
  17. </view>
  18. </view>
  19. <view class="flex tipBox">
  20. <view class="tip1">可用余额{{money}}USDT</view>
  21. <view class="tip1">限额{{baseData.min_sell}}{{baseData.max_sell}}</view>
  22. </view>
  23. </view>
  24. <view class="listBox" style="padding-top: 0rpx;">
  25. <view class="listTpl">
  26. <input type="number" class="inputBox" v-model="price" placeholder="请输入单价" />
  27. </view>
  28. <view class="flex tipBox">
  29. <view class="tip1">单价不得大于参考汇率</view>
  30. </view>
  31. </view>
  32. <template v-if="actionitem.length > 0" v-for="(item,index) in actionitem">
  33. <view class="bankList flex">
  34. <view class="infoTpl">
  35. <view class="tplName flex_item">
  36. <image src="/static/image/bank.png" class="typeTipImg" v-if="item.type == 'bank'"
  37. mode="widthFix"></image>
  38. <image src="/static/image/wx.png" class="typeTipImg" v-if="item.type == 'wx'"
  39. mode="widthFix"></image>
  40. <image src="/static/image/alipay.png" class="typeTipImg" v-if="item.type == 'alipay'"
  41. mode="widthFix"></image>
  42. <view class="titleBox">
  43. <view class="tip">{{item.name}}</view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="det" @click="showBank = true">
  48. 修改
  49. </view>
  50. </view>
  51. </template>
  52. <view class="submission">
  53. <button class="golden" type="golden" hover-class="none" @click="submission">一键卖币</button>
  54. </view>
  55. <view class="tips">*参考汇率{{baseData.us_price}}</view>
  56. </view>
  57. <uni-popup ref="popup" :is-mask-click="false" type="bottom" @maskClick="showBank = false">
  58. <view class="alertBottom">
  59. <view class="flex alertTitle">
  60. <view class="alertTitleName">
  61. 选择支付方式
  62. </view>
  63. <uni-icons type="close" size="28" @click="showBank = false"></uni-icons>
  64. </view>
  65. <view class="bankList flex" @click="bankSelect(item)" v-if="bankList.length > 0"
  66. v-for="(item,index) in bankList">
  67. <view class="infoTpl">
  68. <view class="tplName flex_item">
  69. <image src="/static/image/bank.png" class="typeTipImg" v-if="item.type == 'bank'"
  70. mode="widthFix"></image>
  71. <image src="/static/image/wx.png" class="typeTipImg" v-if="item.type == 'wx'"
  72. mode="widthFix"></image>
  73. <image src="/static/image/alipay.png" class="typeTipImg" v-if="item.type == 'alipay'"
  74. mode="widthFix"></image>
  75. <view class="titleBox">
  76. <view class="tip">{{item.name}}</view>
  77. </view>
  78. </view>
  79. </view>
  80. <view class="det">
  81. 选择
  82. </view>
  83. </view>
  84. </view>
  85. </uni-popup>
  86. </view>
  87. </template>
  88. <script>
  89. import {
  90. getsell,
  91. sellPush,
  92. sellBuy
  93. } from '@/api/game.js';
  94. import {
  95. getIndex
  96. } from '@/api/index.js';
  97. import {
  98. mapState,
  99. } from 'vuex';
  100. import {
  101. qianBao
  102. } from '@/api/wallet.js';
  103. import {
  104. getBank
  105. } from '@/api/set.js';
  106. import dayjs from '@/libs/dayjs/dayjs.min.js';
  107. export default {
  108. computed: {
  109. ...mapState('user', ['hasLogin', 'userInfo'])
  110. },
  111. filters: {
  112. dateFormat: function(value) {
  113. return dayjs(value * 1000).format('YYYY/MM/DD HH:mm');
  114. }
  115. },
  116. data() {
  117. return {
  118. number: '',
  119. money: '',
  120. price: '',
  121. page: 1,
  122. limit: 10,
  123. list: [],
  124. loadingType: 'more',
  125. baseData: {
  126. min_sell: '',
  127. max_sell: ''
  128. },
  129. loaded: false,
  130. showBank: false,
  131. bankList: [],
  132. bank_id: '',
  133. bank: {
  134. id: '',
  135. bank_real_name: '',
  136. bank_code: '',
  137. bank: '',
  138. bank_name: '',
  139. },
  140. // 当前选中的银行卡对象
  141. actionitem: [],
  142. infoChecked: {
  143. sell_alipay_open: "0",
  144. sell_bank_open: "0",
  145. sell_weixin_open: "0"
  146. }
  147. }
  148. },
  149. watch: {
  150. showBank(newValue, oldValue) {
  151. if (newValue) {
  152. this.$refs.popup.open()
  153. } else {
  154. this.$refs.popup.close()
  155. }
  156. }
  157. },
  158. onNavigationBarButtonTap(res) {
  159. uni.navigateTo({
  160. url: '/pages/index/order'
  161. })
  162. },
  163. onShow() {
  164. this.init();
  165. },
  166. onLoad() {
  167. this.getIndex()
  168. },
  169. methods: {
  170. qianBao() {
  171. const that = this;
  172. qianBao().then((res) => {
  173. that.money = +res.data.like_usdt;
  174. })
  175. },
  176. getBank() {
  177. const obj = this;
  178. getBank().then((res) => {
  179. let data = res.data.list
  180. let reg = /^(.{4})(?:\d+)(.{4})$/
  181. if (data.length > 0) {
  182. obj.infoChecked = res.data;
  183. data.forEach(item => {
  184. if (item.type == 'bank') {
  185. item.bank_code1 = item.bank_code.replace(reg, "**** $2")
  186. item.name = item.bank + ' ' + item.bank_code1
  187. } else {
  188. item.name = item.name + ' ' + item.phone
  189. }
  190. })
  191. let onArr = [];
  192. obj.bankList = data.filter((re) => {
  193. if (re.type == 'bank' && obj.infoChecked.sell_bank_open == "1") {
  194. return true
  195. }
  196. if (re.type == 'wx' && obj.infoChecked.sell_weixin_open == "1") {
  197. return true
  198. }
  199. if (re.type == 'alipay' && obj.infoChecked.sell_alipay_open == "1") {
  200. return true
  201. }
  202. });
  203. // 保存信息
  204. if (obj.bankList.length > 0) {
  205. obj.actionitem = [obj.bankList[0]];
  206. obj.bank_id = obj.bank.id;
  207. obj.bank = obj.bankList[0];
  208. }
  209. }
  210. })
  211. },
  212. bankSelect(e) {
  213. const obj = this;
  214. this.bank_id = e.id;
  215. this.actionitem = [e];
  216. obj.showBank = false;
  217. },
  218. getIndex() {
  219. getIndex({})
  220. .then(({
  221. data
  222. }) => {
  223. this.baseData = data;
  224. this.price = data.us_price
  225. console.log(data);
  226. })
  227. .catch(e => {});
  228. },
  229. // 购买订单
  230. commitorder(item) {
  231. let obj = this
  232. uni.showModal({
  233. title: '请输入支付密码',
  234. editable: true,
  235. success: res => {
  236. if (res.confirm) {
  237. if (res.content) {
  238. uni.showLoading({
  239. title: '支付中。。。',
  240. mask: true
  241. });
  242. sellBuy({
  243. id: item.id,
  244. trade_psw: res.content,
  245. }).then((
  246. data
  247. ) => {
  248. uni.hideLoading();
  249. uni.showModal({
  250. title: '提示',
  251. content: data.msg,
  252. showCancel: false,
  253. });
  254. setTimeout(function() {
  255. obj.page = 1;
  256. obj.list = [];
  257. obj.loadingType = 'more';
  258. obj.loadData();
  259. }, 1000);
  260. })
  261. .catch(e => {
  262. uni.hideLoading()
  263. console.log(e);
  264. });
  265. }
  266. }
  267. },
  268. });
  269. },
  270. // 挂出
  271. submission() {
  272. let obj = this;
  273. if (!obj.number) {
  274. uni.showToast({
  275. title: '请输入数量',
  276. icon: 'none'
  277. });
  278. return
  279. }
  280. if (!obj.price) {
  281. uni.showToast({
  282. title: '请输入单价',
  283. icon: 'none'
  284. });
  285. return
  286. }
  287. if (obj.price > obj.baseData.us_price) {
  288. uni.showToast({
  289. title: '单价不得大于当前汇率',
  290. icon: 'none'
  291. });
  292. return
  293. }
  294. uni.showModal({
  295. title: '请输入支付密码',
  296. editable: true,
  297. success: res => {
  298. if (res.confirm) {
  299. sellPush({
  300. type: 'USDT',
  301. num: obj.number,
  302. price: obj.price,
  303. phone: obj.userInfo.phone || '',
  304. trade_psw: res.content,
  305. sell_type: 'money',
  306. bank_id: obj.bank_id
  307. }).then((
  308. data
  309. ) => {
  310. obj.qianBao();
  311. obj.number = '';
  312. obj.trade_psw = '';
  313. uni.showToast({
  314. title: data.msg,
  315. });
  316. setTimeout(
  317. () => {
  318. uni.navigateTo({
  319. url: '/pages/index/order'
  320. })
  321. }
  322. )
  323. })
  324. .catch(e => {
  325. console.log(e);
  326. });
  327. }
  328. },
  329. fail: () => {},
  330. complete: () => {}
  331. });
  332. },
  333. init() {
  334. this.page = 1;
  335. this.list = [];
  336. this.loadingType = 'more';
  337. // this.loadData();
  338. this.qianBao();
  339. this.getBank();
  340. },
  341. async loadData(source) {
  342. const that = this;
  343. //这里是将订单挂载到tab列表下
  344. let navItem = that;
  345. if (source === 'tabChange' && navItem.loaded === true) {
  346. //tab切换只有第一次需要加载数据
  347. return;
  348. }
  349. if (navItem.loadingType === 'loading') {
  350. //防止重复加载
  351. return;
  352. }
  353. if (navItem.loadingType === 'noMore') {
  354. //防止重复加载
  355. return;
  356. }
  357. // 修改当前对象状态为加载中
  358. navItem.loadingType = 'loading';
  359. getsell({
  360. page: navItem.page,
  361. limit: navItem.limit
  362. })
  363. .then(({
  364. data
  365. }) => {
  366. // 保存我的总金额
  367. let arr = data.list.map(e => {
  368. e.num = e.num * 1;
  369. e.price = e.price * 1;
  370. return e;
  371. });
  372. navItem.list = navItem.list.concat(arr);
  373. if (navItem.limit == data.length) {
  374. navItem.page++;
  375. //判断是否还有数据, 有改为 more, 没有改为noMore
  376. navItem.loadingType = 'more';
  377. return;
  378. } else {
  379. //判断是否还有数据, 有改为 more, 没有改为noMore
  380. navItem.loadingType = 'noMore';
  381. }
  382. uni.hideLoading();
  383. that.loaded = true;
  384. })
  385. .catch(e => {
  386. console.log(e);
  387. });
  388. },
  389. }
  390. };
  391. </script>
  392. <style lang="scss">
  393. .all {
  394. width: 750rpx;
  395. height: 100%;
  396. background-color: #051137;
  397. padding-top: var(--status-bar-height);
  398. padding-bottom: 40rpx;
  399. color: #fff;
  400. }
  401. .listBox {
  402. padding: 62rpx 32rpx;
  403. .titleTetx {
  404. font-weight: bold;
  405. font-size: 24rpx;
  406. color: #FFFFFF;
  407. padding-bottom: 25rpx;
  408. }
  409. .tipBox {
  410. padding-top: 15rpx;
  411. font-size: 24rpx;
  412. }
  413. }
  414. .listTpl {
  415. border-bottom: 1rpx solid #6A7288;
  416. padding-bottom: 25rpx;
  417. .inputBox {
  418. font-size: 35rpx;
  419. color: #FFFFFF;
  420. }
  421. .listTip {}
  422. .listAll {
  423. padding-left: 30rpx;
  424. font-size: 24rpx;
  425. color: #0C5AFA;
  426. }
  427. }
  428. .submission {
  429. padding: 80rpx 25rpx;
  430. padding-bottom: 25rpx;
  431. .golden {
  432. background: #0C5AFA;
  433. color: #ffffff;
  434. }
  435. }
  436. .tips {
  437. text-align: center;
  438. }
  439. .listItemBox {
  440. padding-top: 44px;
  441. .listItem {
  442. padding: 34rpx 34rpx;
  443. border-bottom: 1rpx solid #6A7288;
  444. .name {
  445. font-family: PingFang SC;
  446. font-weight: bold;
  447. font-size: 30rpx;
  448. color: #FFFFFF;
  449. padding-left: 25rpx;
  450. }
  451. .itemTpl {
  452. font-family: PingFang SC;
  453. font-weight: bold;
  454. font-size: 36rpx;
  455. color: #0C5AFA;
  456. padding-top: 25rpx;
  457. }
  458. .itemTip {
  459. .tipText {
  460. font-family: PingFang SC;
  461. font-weight: 500;
  462. font-size: 24rpx;
  463. color: #C1C1C1;
  464. padding-top: 15rpx;
  465. }
  466. .tipBtn {
  467. font-family: PingFang SC;
  468. font-weight: bold;
  469. font-size: 24rpx;
  470. color: #FFFFFF;
  471. background: linear-gradient(90deg, #0C5AFA, #1356FF);
  472. border-radius: 7rpx;
  473. padding: 15rpx 35rpx;
  474. }
  475. }
  476. }
  477. }
  478. .changeBank {
  479. text-align: right;
  480. margin-top: 25rpx;
  481. padding-right: 35rpx;
  482. .btnChange {
  483. background: #0C5AFA;
  484. color: #fff;
  485. display: inline-block;
  486. font-size: 24rpx;
  487. padding: 15rpx 25rpx;
  488. border-radius: 15rpx;
  489. }
  490. }
  491. .login_text {
  492. width: 100%;
  493. // padding: 25rpx 0rpx;
  494. font-size: 28rpx !important;
  495. padding: 0rpx 25rpx;
  496. }
  497. .login_input {
  498. border-bottom: 1px solid #464755;
  499. padding: 35rpx;
  500. }
  501. .alertBottom {
  502. padding-bottom: 55px;
  503. background-color: #FFF;
  504. .alertTitle {
  505. padding: 20rpx 30rpx;
  506. font-size: 30rpx;
  507. color: #333333;
  508. .alertTitleName {
  509. font-weight: bold;
  510. }
  511. }
  512. .bankList {
  513. background: #FFF;
  514. border-bottom: 1px solid #eeeeee;
  515. border-radius: 0;
  516. .infoTpl {
  517. .tplName {
  518. .titleBox {
  519. .tip {
  520. color: #999 !important;
  521. }
  522. }
  523. }
  524. }
  525. }
  526. }
  527. .bankList {
  528. color: #fff;
  529. background: #1F2A4A;
  530. padding: 36rpx 38rpx;
  531. border-radius: 20rpx;
  532. margin-bottom: 25rpx;
  533. position: relative;
  534. .typeTipImg {
  535. width: 40rpx;
  536. height: 40rpx
  537. }
  538. .det {
  539. color: #0C5AFA;
  540. }
  541. .infoTpl {
  542. .tplName {
  543. .titleBox {
  544. padding-left: 25rpx;
  545. .name {
  546. font-weight: bold;
  547. font-size: 30rpx;
  548. color: #FFFFFF;
  549. }
  550. .tip {
  551. font-weight: 500;
  552. font-size: 25rpx;
  553. color: rgba(255, 255, 255, 0.64);
  554. }
  555. }
  556. }
  557. }
  558. }
  559. </style>