index.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <view>
  3. <view class="contract-title" :rise-fall="stocksColor">
  4. <view class="contract-item" @click.stop="openDrawer">
  5. <view class="title-iocn">
  6. <text class="title-iocn-item"></text>
  7. <text class="title-iocn-item"></text>
  8. <text class="title-iocn-item"></text>
  9. </view>
  10. <!-- <image class="title-iocn" src="../../../static/logo.png" mode="aspectFit"></image> -->
  11. <text class="title-text">{{currencyVal.currency_name}}/{{currencyVal.legal_name}}</text>
  12. </view>
  13. <view class="contract-price" :class="$setColor(daymarket.now_price)">
  14. <text class="color">{{ daymarket.now_price }}</text>
  15. <text class="color" v-show="daymarket.change">{{ daymarket.change }}%</text>
  16. </view>
  17. <view class="contract-item">
  18. <text class="iconfont">&#xe625;</text>
  19. </view>
  20. </view>
  21. <view class="iframe-box">
  22. <template v-if="currencyVal.legal_id">
  23. <iframe
  24. :src="`https://doc.okenx.com/biking/kline.html?legal_id=${currencyVal.legal_id}&currency_id=${currencyVal.currency_id}&symbol=${currencyVal.currency_name}/${currencyVal.legal_name}`"
  25. frameborder="0"></iframe>
  26. </template>
  27. </view>
  28. <gap />
  29. <drawer ref="drawerRef" />
  30. <restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
  31. <lever ref="leverRef" :leverNum.sync="multiple" :leverName.sync="leverName" />
  32. <unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗?" />
  33. <unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="unopenSolt.title" cancelBtn
  34. :content="unopenSolt.closeLeverContent" />
  35. <popupHint ref="hintRef" title="赠金交易">
  36. <template #hintContent>
  37. <view class="">
  38. 赠金交易是BiKing交易所的赠品交易系统,交易盈利部分可实时划转至合约钱包。
  39. </view>
  40. <view class="">
  41. 赠金获取方式:
  42. </view>
  43. <view class="content-list">
  44. <text>1. 完成任务中心的各项任务</text>
  45. <text>2. 参与平台活动</text>
  46. <text>3. 不定期新老用户赠金空投</text>
  47. </view>
  48. <view class="">
  49. 更多内容请点击<text class="explain">《赠金交易》</text>
  50. </view>
  51. <view class="hite-box" @click.stop="readPact = !readPact">
  52. <text class="box">
  53. <text v-show="readPact" class="iconfont2">&#xe6c5;</text>
  54. </text>
  55. <text>不在提示</text>
  56. </view>
  57. <view class="confirm-btn" @click.stop="confirmHiteBtn">
  58. 确定
  59. </view>
  60. </template>
  61. </popupHint>
  62. </view>
  63. </template>
  64. <script>
  65. import {
  66. mapGetters
  67. } from 'vuex'
  68. import {
  69. Api_setSubmitLever,
  70. Api_getLeverDeal,
  71. Api_getRegister,
  72. Api_setBatchClose,
  73. Api_setCloseLever
  74. } from "@/api/index.js"
  75. import lever from "../sustainability/lever.vue"
  76. import drawer from "./../modules/drawer.vue"
  77. import popupHint from "../modules/popup-hint.vue"
  78. import restrictPopup from "./../modules/restrict.vue"
  79. export default {
  80. name: 'shortcut',
  81. components: {
  82. lever,
  83. drawer,
  84. restrictPopup,
  85. popupHint
  86. },
  87. data() {
  88. return {
  89. readPact: false,
  90. closeLeverItem: null,
  91. lableList: [
  92. '开仓',
  93. '当前持仓'
  94. ],
  95. lableIndex: 1,
  96. leverName: '逐仓',
  97. multiple: 100, // 逐仓倍数
  98. caution_money: '',
  99. status: 1, // 状态,填1. 1市价交易,为0则是挂单交易
  100. scrollHeight: 0,
  101. unopenSolt: {
  102. title: '',
  103. content: ''
  104. }
  105. };
  106. },
  107. props: {
  108. leverTransaction: {
  109. type: Array,
  110. default: () => {
  111. return []
  112. }
  113. },
  114. pagesInfo: {
  115. type: Object,
  116. default: () => {
  117. return {}
  118. }
  119. }
  120. },
  121. computed: {
  122. ...mapGetters([
  123. 'currencyVal',
  124. 'daymarket',
  125. 'stocksColor',
  126. 'PageContentHeight',
  127. 'tabBarHeight'
  128. ]),
  129. },
  130. mounted() {
  131. },
  132. watch: {
  133. currencyVal: {
  134. handler(newCurrency) {
  135. if (newCurrency && newCurrency?.legal_id) {
  136. }
  137. },
  138. deep: true,
  139. immediate: true
  140. },
  141. PageContentHeight: {
  142. handler(newHeigth) {
  143. if (newHeigth) {
  144. this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
  145. }
  146. },
  147. deep: true,
  148. immediate: true
  149. },
  150. },
  151. created() {
  152. // this.openPactPopup()
  153. },
  154. methods: {
  155. openDrawer() {
  156. this.$nextTick(() => {
  157. this.$refs.drawerRef.open();
  158. })
  159. },
  160. openPactPopup() {
  161. const readPactObj = this.$getStorageSync('contractReadPact');
  162. if (readPactObj && !readPactObj.capitalPact) {
  163. this.readPact = false
  164. this.$nextTick(() => {
  165. this.$refs.hintRef.open()
  166. })
  167. }
  168. },
  169. // 提示弹框确认按钮
  170. confirmHiteBtn() {
  171. // t.readPact
  172. const readPactObj = this.$getStorageSync('contractReadPact') || {}
  173. readPactObj.capitalPact = this.readPact
  174. this.$setStorageSync('contractReadPact', readPactObj)
  175. this.$refs.hintRef.close();
  176. },
  177. // 阅读合约
  178. readPactInfo(id){
  179. this.$readArticleInfo(id)
  180. }
  181. }
  182. }
  183. </script>
  184. <style lang="scss" scoped>
  185. @import "~../sustainability/index.scss";
  186. .contract-title {
  187. padding: 5rpx $pages-padding 0;
  188. min-height: 90rpx;
  189. display: flex;
  190. align-items: center;
  191. justify-content: space-between;
  192. border-bottom: 1rpx solid $border-color;
  193. .contract-price {
  194. flex: 1;
  195. display: flex;
  196. justify-content: space-between;
  197. align-items: center;
  198. padding: 0 30rpx 0 20rpx;
  199. font-size: 28rpx;
  200. }
  201. .contract-item {
  202. flex-shrink: 0;
  203. display: flex;
  204. align-items: center;
  205. .title-iocn {
  206. width: 28rpx;
  207. height: 24rpx;
  208. display: flex;
  209. flex-direction: column;
  210. // align-items: center;
  211. justify-content: space-between;
  212. .title-iocn-item {
  213. width: 100%;
  214. height: 5rpx;
  215. border-radius: 3rpx;
  216. background: #111111;
  217. &:first-child {
  218. width: 50%;
  219. }
  220. }
  221. }
  222. .title-text {
  223. font-size: 34rpx;
  224. font-family: PingFang SC, PingFang SC-Bold;
  225. font-weight: 700;
  226. text-align: left;
  227. color: #141213;
  228. line-height: 1.2;
  229. letter-spacing: 0.74rpx;
  230. padding-left: 19rpx;
  231. }
  232. .title-ratio {
  233. font-size: 24rpx;
  234. font-family: PingFang SC, PingFang SC-Regular;
  235. font-weight: 400;
  236. color: #808080;
  237. line-height: 33rpx;
  238. }
  239. .ratio-icon {
  240. width: 31rpx;
  241. height: 33rpx;
  242. margin-left: 22rpx;
  243. }
  244. }
  245. }
  246. .iframe-box {
  247. width: 100%;
  248. height: 60vh;
  249. iframe {
  250. width: 100%;
  251. height: 100%;
  252. }
  253. }
  254. </style>