details.vue 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <view class="container">
  3. <view class="logo"><image :src="moneyData.logo"></image></view>
  4. <view class="select-box flex_item">
  5. <view @tap="handleTap('picker')">{{ title }}</view>
  6. <lb-picker
  7. ref="picker"
  8. v-model="value"
  9. mode="selector"
  10. :list="typeList"
  11. :dataset="{ name: 'type' }"
  12. @change="handleChange"
  13. @confirm="handleConfirm"
  14. @cancel="handleCancel"
  15. ></lb-picker>
  16. <image src="../../static/img/xiaj.png"></image>
  17. </view>
  18. <view class="list" v-show="list.length > 0">
  19. <view class="list-box" v-for="(ls, index) in list" :key="index" @click="nav(index)">
  20. <view class="flex">
  21. <view class="list-tpl flex_item">
  22. <image src="../../static/img/qian.png"></image>
  23. <view class="tpl-name">{{ ls.title }}</view>
  24. </view>
  25. <view class="num clamp" v-if="ls.pm === 0">- {{ ls.number }}</view>
  26. <view class="num clamp" v-else>+ {{ ls.number }}</view>
  27. </view>
  28. <view class="tpl-time">{{ ls.add_time }}</view>
  29. </view>
  30. </view>
  31. <view class="empty-box" v-show="list.length == 0"><u-empty></u-empty></view>
  32. <view class="flex submit-box">
  33. <view class="submit" @click="recharge">充币</view>
  34. <view class="tip" v-if="moneyData.type==1"></view>
  35. <view class="submit" @click="withdraw" v-if="moneyData.type==1">提币</view>
  36. </view>
  37. <!-- <uni-popup ref="popup" type="center">
  38. <view class="popup">
  39. <view class="cancel flex" @click="close">
  40. <view></view>
  41. <view class="tip">x</view>
  42. </view>
  43. <view class="list-boxs">
  44. <view class="popup-text">购买数量:</view>
  45. <view class="password"><input type="number" v-model="num" placeholder="请输入算力数量" /></view>
  46. <view class="popup-text">币种选择:</view>
  47. <view class="content" @click="useOutClickSide">
  48. <easy-select ref="easySelect" :options="moneyTypeList" :value="moneyData.name" @selectOne="selectOne"></easy-select>
  49. </view>
  50. <view class="confirm-btn" @click="pay"><text>确认充币</text></view>
  51. </view>
  52. </view>
  53. </uni-popup> -->
  54. <uni-popup ref="mation" type="center">
  55. <view class="popup">
  56. <view class="cancel flex" @click="close2"><view class="tip">x</view></view>
  57. <view class="list-boxs">
  58. <view class="textBox flex">
  59. <view class="font">交易前:</view>
  60. <view class="number">{{ before * 1 }} {{ moneyData.code }}</view>
  61. </view>
  62. <view class="xian"></view>
  63. <view class="textBox flex">
  64. <view class="font">交易额:</view>
  65. <view class="number">{{ pm }}{{ number * 1 }} {{ moneyData.code }}</view>
  66. </view>
  67. <view class="xian"></view>
  68. <view class="textBox flex">
  69. <view class="font">交易后:</view>
  70. <view class="number">{{ balance * 1 }} {{ moneyData.code }}</view>
  71. </view>
  72. <view class="xian"></view>
  73. <scroll-view scroll-y="true" class="textBox">
  74. <view class="font">流水详情:</view>
  75. <view class="text">{{ text }}</view>
  76. </scroll-view>
  77. </view>
  78. </view>
  79. </uni-popup>
  80. </view>
  81. </template>
  82. <script>
  83. import { moneyLog, recharge, wallet } from '@/api/finance.js';
  84. import LbPicker from '@/components/lb-picker';
  85. export default {
  86. components: {
  87. LbPicker
  88. },
  89. data() {
  90. return {
  91. title: '筛选',
  92. type: '',//当前筛选的类型查询用
  93. value: '',//当前选中的类型名称
  94. typeList: [],//记录列表
  95. list: [],//历史记录列表
  96. // num: '',//充值金额
  97. moneyTypeList: [],
  98. text: '',//当前选中的流水详情
  99. balance: '',//当前选中的流水金额
  100. before: '',//交易前金额
  101. number: '',//当前选中的弹窗交易金额
  102. pm: '',
  103. less: '',
  104. page: 1,
  105. limit: 5,
  106. isLast: true,
  107. name: '', //币名称
  108. moneyData: {
  109. code: '',
  110. money: '',
  111. name: '',
  112. logo: '',
  113. type:'',
  114. }
  115. };
  116. },
  117. onLoad(option) {
  118. this.name = option.name;
  119. this.moneyType();
  120. this.loadData();
  121. },
  122. onShow() {},
  123. methods: {
  124. async loadData() {
  125. let obj = this;
  126. moneyLog(
  127. {
  128. page: 1,
  129. limit: 10000,
  130. type: obj.type
  131. },
  132. obj.name
  133. ).then(({ data }) => {
  134. obj.typeList = data.type_list;
  135. obj.typeList.unshift({
  136. title:'全部',
  137. type:''
  138. })
  139. obj.list = data.list;
  140. console.log(obj.list);
  141. });
  142. },
  143. // 所有币种
  144. async moneyType() {
  145. let obj = this;
  146. wallet({}).then(({ data }) => {
  147. const dat = data.back[this.name];
  148. obj.moneyData.logo = dat.LOGO;
  149. obj.moneyData.name = dat.name;
  150. obj.moneyData.code = dat.code;
  151. obj.moneyData.money = dat.money.money;
  152. obj.moneyData.type = +dat.can_cash
  153. });
  154. },
  155. // pay() {
  156. // let obj = this;
  157. // recharge(
  158. // {
  159. // num: obj.num,
  160. // money_type: obj.moneyData.code
  161. // },
  162. // obj.name
  163. // )
  164. // .then(({ data }) => {
  165. // obj.$api.msg(data.msg);
  166. // obj.$refs.popup.close();
  167. // obj.num = '';
  168. // obj.moneyData.code = '';
  169. // })
  170. // .catch(e => {
  171. // obj.$refs.popup.close();
  172. // });
  173. // },
  174. selectOne(options) {
  175. this.name = options.name;
  176. this.moneyData.code = options.code;
  177. },
  178. useOutClickSide() {
  179. this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions();
  180. },
  181. handleTap(name) {
  182. this.$refs[name].show();
  183. },
  184. handleChange(e) {
  185. // this.title = e.item.title;
  186. // this.type = e.item.type;
  187. },
  188. handleConfirm(e) {
  189. this.title = e.item.title;
  190. this.type = e.item.type;
  191. this.loadData();
  192. },
  193. handleCancel(e) {},
  194. // 充币按钮跳转页面
  195. recharge() {
  196. },
  197. close() {
  198. this.$refs.popup.close();
  199. },
  200. navTo(url) {
  201. uni.navigateTo({
  202. url
  203. });
  204. },
  205. nav(index) {
  206. const obj = this;
  207. obj.text = obj.list[index].mark;
  208. obj.balance = obj.list[index].balance;
  209. obj.number = obj.list[index].number;
  210. if (obj.list[index].pm == 1) {
  211. obj.pm = '+';
  212. obj.before = obj.subNum(obj.balance, obj.number);
  213. } else {
  214. obj.pm = '-';
  215. obj.before = this.addNum(obj.balance, obj.number);
  216. }
  217. this.$refs.mation.open();
  218. },
  219. addNum(num1, num2) {
  220. let sq1, sq2, multiple;
  221. try {
  222. sq1 = num1.toString().split('.')[1].length;
  223. } catch (e) {
  224. sq1 = 0;
  225. }
  226. try {
  227. sq2 = num2.toString().split('.')[1].length;
  228. } catch (e) {
  229. sq2 = 0;
  230. }
  231. multiple = Math.pow(10, Math.max(sq1, sq2) + 1);
  232. return (num1 * multiple + num2 * multiple) / multiple;
  233. },
  234. close2() {
  235. this.$refs.mation.close();
  236. },
  237. subNum(num1, num2) {
  238. let sq1, sq2, multiple;
  239. try {
  240. sq1 = num1.toString().split('.')[1].length;
  241. } catch (e) {
  242. sq1 = 0;
  243. }
  244. try {
  245. sq2 = num2.toString().split('.')[1].length;
  246. } catch (e) {
  247. sq2 = 0;
  248. }
  249. multiple = Math.pow(10, Math.max(sq1, sq2) + 1);
  250. return (num1 * multiple - num2 * multiple) / multiple;
  251. }
  252. }
  253. };
  254. </script>
  255. <style lang="scss">
  256. page {
  257. min-height: 100%;
  258. background-color: #ffffff;
  259. .container {
  260. width: 100%;
  261. padding: 60rpx 30rpx 120rpx 30rpx;
  262. }
  263. }
  264. .logo {
  265. text-align: center;
  266. image {
  267. width: 119rpx;
  268. height: 119rpx;
  269. }
  270. }
  271. .select-box {
  272. position: absolute;
  273. right: 0;
  274. padding: 30rpx 30rpx;
  275. font-size: 32rpx;
  276. font-weight: 500;
  277. color: #333333;
  278. image {
  279. width: 21rpx;
  280. height: 11rpx;
  281. margin-left: 15rpx;
  282. }
  283. .select-name {
  284. padding-right: 15rpx;
  285. }
  286. }
  287. .list {
  288. margin-top: 120rpx;
  289. }
  290. .list-box {
  291. padding: 60rpx 0rpx 30rpx 0rpx;
  292. font-size: 30rpx;
  293. font-weight: 400;
  294. color: #333333;
  295. .tpl-time {
  296. font-size: 24rpx;
  297. font-weight: 400;
  298. color: #999999;
  299. width: 100%;
  300. text-align: right;
  301. padding-top: 25rpx;
  302. }
  303. .list-tpl {
  304. image {
  305. width: 39rpx;
  306. height: 43rpx;
  307. }
  308. .tpl-name {
  309. padding: 0rpx 15rpx 0rpx 30rpx;
  310. }
  311. }
  312. .num {
  313. font-size: 36rpx;
  314. font-weight: 400;
  315. color: #fb3a2f;
  316. width: 50%;
  317. text-align: right;
  318. }
  319. }
  320. .empty-box {
  321. width: 100%;
  322. height: 500rpx;
  323. padding-top: 200rpx;
  324. }
  325. .submit-box {
  326. position: fixed;
  327. bottom: 0;
  328. left: 0;
  329. width: 100%;
  330. background-color: #5771df;
  331. color: #ffffff;
  332. text-align: center;
  333. .submit {
  334. padding: 20rpx 20%;
  335. flex-grow: 1;
  336. }
  337. .tip {
  338. width: 2rpx;
  339. height: 37rpx;
  340. background: #ffffff;
  341. }
  342. }
  343. //弹窗
  344. .popup {
  345. background-color: #ffffff;
  346. border-radius: 25rpx;
  347. font-size: 30rpx;
  348. .cancel {
  349. text-align: center;
  350. width: 100%;
  351. line-height: 60rpx;
  352. .tip {
  353. background-color: #5771df;
  354. color: #ffffff;
  355. width: 70rpx;
  356. height: 70rpx;
  357. border-top-right-radius: 25rpx;
  358. }
  359. }
  360. .list-boxs {
  361. padding: 0rpx 80rpx;
  362. .password {
  363. padding: 50rpx 0rpx;
  364. width: 100%;
  365. input {
  366. width: 70%;
  367. height: 80rpx;
  368. border: 2rpx solid #999999;
  369. padding-left: 25rpx;
  370. box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.27);
  371. border-radius: 11rpx;
  372. }
  373. }
  374. .confirm-btn {
  375. padding-bottom: 120rpx;
  376. padding-top: 30rpx;
  377. text {
  378. background-color: #5771df;
  379. color: #ffffff;
  380. width: 70%;
  381. text-align: center;
  382. padding: 25rpx 90rpx;
  383. border-radius: 15rpx;
  384. }
  385. }
  386. }
  387. }
  388. .popup {
  389. height: 618rpx;
  390. background: #ffffff;
  391. box-shadow: 3rpx 3rpx 6rpx 0rpx rgba(31, 31, 31, 0.17);
  392. border-radius: 40rpx;
  393. width: 700rpx;
  394. .cancel {
  395. text-align: center;
  396. width: 100%;
  397. line-height: 60rpx;
  398. position: relative;
  399. .tip {
  400. color: #000000;
  401. width: 70rpx;
  402. height: 70rpx;
  403. position: absolute;
  404. top: 0;
  405. right: 0;
  406. background-color: #fff;
  407. }
  408. }
  409. .list-boxs {
  410. width: 90%;
  411. margin: 0 auto;
  412. margin-top: 100rpx;
  413. .textBox {
  414. padding: 24rpx 18rpx;
  415. .font {
  416. font-size: 28rpx;
  417. font-family: PingFang SC;
  418. font-weight: bold;
  419. color: #4f4f4f;
  420. }
  421. .number {
  422. font-size: 28rpx;
  423. font-family: PingFang SC;
  424. font-weight: bold;
  425. color: #fb3a2f;
  426. }
  427. .text {
  428. text-indent: 2em;
  429. font-size: 28rpx;
  430. font-family: PingFang SC;
  431. font-weight: bold;
  432. color: #4f4f4f;
  433. }
  434. }
  435. .xian {
  436. width: 100%;
  437. height: 1px;
  438. background: #e7dfe8;
  439. }
  440. }
  441. }
  442. </style>