index.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <template>
  2. <view class="page-box">
  3. <headContent>
  4. <template #content>
  5. <view class="haed-title">
  6. 闪电兑换
  7. </view>
  8. </template>
  9. <template #right>
  10. <view @click.stop="lookRecord()" style="color: #878592;" class="head-record iconfont">&#xe648;</view>
  11. </template>
  12. </headContent>
  13. <view class="box">
  14. <view class="exchange-box">
  15. <view class="">
  16. <view class="exchange-item">
  17. <view class="exchange-coin" @click.stop="activeType('left')">
  18. <template v-if="active.left">
  19. <image class="coin-icon" :src="active.left.logo" mode="aspectFit"></image>
  20. <text class="coin-name">{{ active.left.name }}</text>
  21. <text class="select-icon iconfont">&#xeb6d;</text>
  22. <text class="coin-ratio" />
  23. <!-- <text class="coin-ratio">{{ active.left.min_number }} - {{ active.left.max_number }}</text> -->
  24. </template>
  25. </view>
  26. <input class="coin-input iconfont" :placeholder=" active.left ? `${active.left.min_number}-${active.left.balance}` : ''" v-model="num" type="number">
  27. <text class="max-title" @click.stop="active.left ? setMaxNum(active.left.balance) : ''">最大</text>
  28. </view>
  29. <view class="exchange-item">
  30. 可用余额:{{ active.left ? active.left.balance : '--' }} USDT
  31. </view>
  32. </view>
  33. <view class="exchange-item">
  34. <view class="exchange-coin" @click.stop="activeType('right')">
  35. <template v-if="active.right">
  36. <image class="coin-icon" :src="active.right.logo" mode="aspectFit"></image>
  37. <text class="coin-name">{{ active.right.name }}</text>
  38. <text class="select-icon iconfont">&#xeb6d;</text>
  39. </template>
  40. </view>
  41. </view>
  42. <view class="exchange-switch" @click.stop="exchangeSwitch">
  43. <text class="switch-icon iconfont">&#xe675;</text>
  44. </view>
  45. </view>
  46. <view class="exchange-btn" @click.stop="submitPreview">预览兑换结果</view>
  47. <view class="exchange-hint">
  48. <view class="hint-title">兑换规则</view>
  49. <view class="hint-content">
  50. 市场汇率可能变动,请以实际到账的资产数量为准:
  51. </view>
  52. <view class="hint-content">
  53. 兑换汇率由第三方制定,由于兑换成本及市场波动,您兑换的汇率可能会高于市场汇率,请仔细确认后进行操作:
  54. </view>
  55. <view class="hint-content">
  56. 平台不收取手续费,每笔兑换由第三方钱包收取基础0.3%的手续费,用于支付在交易所兑换成本。
  57. </view>
  58. </view>
  59. </view>
  60. <selectCoin ref="selectCoinRef" :active-val.sync="active[selectKey]" :selectList="selectList" />
  61. </view>
  62. </template>
  63. <script>
  64. import share from "@/components/headModules/share.vue"
  65. import selectCoin from "./modules/select-coin.vue"
  66. import {
  67. Api_getBiTypeList,
  68. Api_getFlashRecord,
  69. Api_getSubmit
  70. } from "@/api/index.js"
  71. export default {
  72. name: 'exchange',
  73. components: {
  74. share,
  75. selectCoin
  76. },
  77. data() {
  78. return {
  79. content: {
  80. left: [],
  81. right: []
  82. },
  83. selectKey: '',
  84. selectList: [],
  85. fromKey: true,
  86. left: [],
  87. right: [],
  88. active: {
  89. left: null,
  90. right: null,
  91. },
  92. num:'',
  93. };
  94. },
  95. onLoad() {
  96. this.getBiTypeList();
  97. },
  98. watch: {
  99. 'active.left': {
  100. handler() {
  101. this.setLeftList()
  102. },
  103. deep: true
  104. }
  105. },
  106. methods: {
  107. getBiTypeList() {
  108. Api_getBiTypeList().then(res => {
  109. this.content = res;
  110. this.setLeftList()
  111. }).catch(err => {
  112. console.log('Api_getBiTypeList = ', err)
  113. })
  114. },
  115. // 选择
  116. activeType(key) {
  117. this.selectKey = key;
  118. this.selectList = this[key];
  119. console.log('aaa ', this[key])
  120. this.$nextTick(() => {
  121. this.$refs.selectCoinRef.open()
  122. })
  123. },
  124. // 上下切换
  125. exchangeSwitch() {
  126. this.fromKey = !this.fromKey;
  127. const l = JSON.parse(JSON.stringify(this.active.left));
  128. this.active.left = this.active.right
  129. this.active.right = l
  130. this.setLeftList()
  131. },
  132. setMaxNum(num){
  133. this.num = num
  134. },
  135. setLeftList() {
  136. let rightList = null;
  137. if (this.fromKey) {
  138. rightList = JSON.parse(JSON.stringify(this.content.right))
  139. this.left = this.content.left;
  140. } else {
  141. rightList = JSON.parse(JSON.stringify(this.content.left))
  142. this.left = this.content.right;
  143. };
  144. this.active.left = this.active.left || this.left[0] || null
  145. this.setRightList(rightList)
  146. // this.right = right;
  147. // this.active.right = this.right[0] || null
  148. },
  149. setRightList(right) {
  150. this.right = []
  151. right.forEach(el => {
  152. if (el.name == this.active.left.name) {
  153. if(this.active.right && this.active.right.name == el.name){
  154. this.active.right = null;
  155. }
  156. } else {
  157. this.right.push(el)
  158. }
  159. })
  160. this.active.right = this.active.right || this.right[0] || null
  161. },
  162. // 提交预览
  163. submitPreview(){
  164. return false
  165. const obj = {
  166. l_currency_id: this.active.left.id,
  167. r_currency_id: this.active.right.id,
  168. num:this.num,
  169. price: this.active.left.price,
  170. }
  171. uni.showLoading({
  172. mask:true
  173. })
  174. Api_getSubmit(obj).then(res => {
  175. this.getBiTypeList()
  176. }).catch(err => {}).finally(() => {
  177. uni.hideLoading()
  178. })
  179. },
  180. lookRecord(){
  181. uni.navigateTo({
  182. url:'/pages/content/exchange-record'
  183. })
  184. }
  185. }
  186. }
  187. </script>
  188. <style>
  189. page {
  190. background-color: #EDEDEF;
  191. }
  192. </style>
  193. <style lang="scss" scoped>
  194. .head-record {
  195. font-size: 46rpx;
  196. }
  197. .box {
  198. padding: 36rpx 30rpx 0;
  199. .exchange-box {
  200. width: 690rpx;
  201. min-height: 287rpx;
  202. background: #f6f7fb;
  203. border-radius: 10rpx;
  204. padding: 39rpx 30rpx 34rpx;
  205. display: flex;
  206. flex-direction: column;
  207. justify-content: space-between;
  208. position: relative;
  209. .exchange-switch {
  210. position: absolute;
  211. right: 78rpx;
  212. bottom: 82rpx;
  213. width: 84rpx;
  214. height: 84rpx;
  215. background: #05c175;
  216. border-radius: 29rpx;
  217. text-align: center;
  218. line-height: 84rpx;
  219. // transform: rotate(90deg);
  220. .switch-icon {
  221. font-size: 40rpx;
  222. color: #fff;
  223. }
  224. }
  225. .exchange-item {
  226. display: flex;
  227. align-items: center;
  228. justify-content: space-between;
  229. .exchange-coin {
  230. display: flex;
  231. align-items: center;
  232. flex-shrink: 0;
  233. .coin-icon {
  234. width: 52rpx;
  235. height: 52rpx;
  236. border-radius: 50%;
  237. flex-shrink: 0;
  238. }
  239. .coin-name {
  240. flex-shrink: 0;
  241. padding-left: 13rpx;
  242. font-size: 32rpx;
  243. font-family: PingFang SC, PingFang SC-Bold;
  244. font-weight: 700;
  245. color: #1a1a1a;
  246. line-height: 44rpx;
  247. }
  248. .coin-ratio {
  249. margin: 0 20rpx;
  250. width: 1rpx;
  251. height: 44rpx;
  252. // $border-color;
  253. background-color: $border-color;
  254. // flex-shrink: 0;
  255. // font-size: 26rpx;
  256. // font-family: PingFang SC, PingFang SC-Bold;
  257. // font-weight: 700;
  258. // color: #b7b4b4;
  259. // line-height: 40rpx;
  260. // border-left: 1rpx solid #e6e6e6;
  261. // padding-left: 24rpx;
  262. // margin-left: 20rpx;
  263. }
  264. .select-icon {
  265. font-size: 26rpx;
  266. margin-left: 20rpx;
  267. }
  268. }
  269. .coin-input {
  270. flex: 1;
  271. height: 100%;
  272. padding: 0 20rpx;
  273. font-size: 24rpx;
  274. }
  275. .max-title {
  276. flex-shrink: 0;
  277. font-size: 28rpx;
  278. font-family: PingFang SC, PingFang SC-Regular;
  279. font-weight: 400;
  280. color: #05c175;
  281. line-height: 40rpx;
  282. }
  283. }
  284. .exchange-item {
  285. padding-top: 11rpx;
  286. font-size: 24rpx;
  287. font-family: PingFang SC, PingFang SC-Regular;
  288. font-weight: 400;
  289. color: #999999;
  290. }
  291. }
  292. .exchange-btn {
  293. margin-top: 68rpx;
  294. width: 690rpx;
  295. height: 90rpx;
  296. background: #dbdce0;
  297. border-radius: 8rpx;
  298. line-height: 90rpx;
  299. text-align: center;
  300. font-size: 30rpx;
  301. font-family: PingFang SC, PingFang SC-Bold;
  302. font-weight: 700;
  303. color: #1a1a1a;
  304. }
  305. .exchange-hint {
  306. width: 100%;
  307. padding-top: 97rpx;
  308. .hint-title {
  309. font-size: 28rpx;
  310. font-family: PingFang SC, PingFang SC-Regular;
  311. font-weight: 400;
  312. color: #1a1a1a;
  313. }
  314. .hint-content {
  315. padding: 24rpx 0 11rpx;
  316. font-size: 26rpx;
  317. font-family: PingFang SC, PingFang SC-Regular;
  318. font-weight: 400;
  319. text-align: left;
  320. color: #808080;
  321. }
  322. }
  323. }
  324. </style>