freight-space.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <view class="">
  3. <template v-if="leverTransaction && leverTransaction.length > 0">
  4. <view class="lable-title">
  5. <text class="lable-title-text">仓位信息</text>
  6. <text class="lable-title-btn" @click.stop="setCloseLeverAll()">全部平仓</text>
  7. </view>
  8. <template v-for="item in leverTransaction">
  9. <view class="content-box" :rise-fall="stocksColor">
  10. <view class="content-top">
  11. <view class="top-left">
  12. <view class="top-left-title">
  13. <text>{{ item.symbol }}</text>
  14. <text>{{ item.type_name }}</text>
  15. <text class="icon-size iconfont">&#xe8b0;</text>
  16. <text class="icon-size">分享</text>
  17. </view>
  18. <view class="top-left-b">
  19. <text>{{ item.multiple }}倍杠杆</text>
  20. <text class="top-left-b-tag">逐仓做多</text>
  21. </view>
  22. </view>
  23. <view class="top-right">
  24. <text>{{ item.profits }}</text>
  25. <text class="top-right-float"><text>浮动盈亏</text>{{ item.fact_profits }}%</text>
  26. </view>
  27. </view>
  28. <view class="content-info">
  29. <view class="info-item">
  30. <text class="info-item-lable">保证金(USDT)</text>
  31. <text class="info-item-val">{{ item.caution_money }}</text>
  32. </view>
  33. <view class="info-item">
  34. <text class="info-item-lable">开仓价格(USDT)</text>
  35. <text class="info-item-val">{{ item.price }}</text>
  36. </view>
  37. <view class="info-item">
  38. <text class="info-item-lable">标记价格(USDT)</text>
  39. <text class="info-item-val">{{ item.origin_price }}</text>
  40. </view>
  41. <view class="info-item">
  42. <text class="info-item-lable">持仓数量(张)</text>
  43. <text class="info-item-val">{{ item.number }}</text>
  44. </view>
  45. <view class="info-item">
  46. <text class="info-item-lable">风险率(%)</text>
  47. <text class="info-item-val"></text>
  48. <!-- {{ item.caution_money }} -->
  49. </view>
  50. <view class="info-item">
  51. <text class="info-item-lable">预计强平价(USDT)</text>
  52. <text class="info-item-val"></text>
  53. <!-- {{ item.caution_money }} -->
  54. </view>
  55. <view class="info-item">
  56. <text class="info-item-lable">预计止损(USDT)</text>
  57. <text class="info-item-val"
  58. @click.stop="setRestrict(item)">{{ item.stop_loss_price || '--' }} <text
  59. class="iconfont">&#xe610;</text></text>
  60. </view>
  61. <view class="info-item">
  62. <text class="info-item-lable">预计止盈(USDT)</text>
  63. <text class="info-item-val"
  64. @click.stop="setRestrict(item)">{{ item.target_profit_price || '--' }} <text
  65. class="iconfont">&#xe610;</text> </text>
  66. </view>
  67. <view class="info-item">
  68. <text class="info-item-lable">预计创建时间(USDT)</text>
  69. <text class="info-item-val">{{ $getData_(item.create_time , false) }}</text>
  70. </view>
  71. </view>
  72. <view class="content-btns">
  73. <view class="content-btn-item" @click.stop="setCloseLever(item)">
  74. 平仓
  75. </view>
  76. <view class="content-btn-item">
  77. 反向开仓
  78. </view>
  79. <!-- <view class="content-btn-item">
  80. 加仓
  81. </view> -->
  82. </view>
  83. </view>
  84. <gap />
  85. </template>
  86. </template>
  87. <template v-else>
  88. 暂无数据
  89. </template>
  90. <unopen ref="unopenRef" @confirm="confirm" textAlign="left" title="平仓" cancelBtn :content="closeLeverContent" />
  91. <restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
  92. </view>
  93. </template>
  94. <script>
  95. import {
  96. Api_setCloseLever,
  97. Api_setBatchClose
  98. } from "@/api/index.js"
  99. import {
  100. mapGetters
  101. } from 'vuex'
  102. import restrictPopup from "./../modules/restrict.vue"
  103. export default {
  104. name: 'freight-space',
  105. props: {
  106. closeLeverContent: {
  107. type: String,
  108. default: ''
  109. },
  110. leverTransaction: {
  111. type: Array,
  112. default: () => {
  113. return []
  114. }
  115. }
  116. },
  117. components: {
  118. restrictPopup
  119. },
  120. computed: {
  121. ...mapGetters([
  122. "stocksColor"
  123. ])
  124. },
  125. data() {
  126. return {
  127. title: '平仓',
  128. closeLeverItem: null,
  129. restrict: ''
  130. };
  131. },
  132. mounted() {
  133. },
  134. methods: {
  135. setCloseLever(item) {
  136. this.title = '平仓';
  137. this.closeLeverItem = item;
  138. this.$refs.unopenRef.open();
  139. },
  140. setCloseLeverAll() {
  141. this.title = '全部平仓';
  142. this.closeLeverItem = null;
  143. this.$refs.unopenRef.open();
  144. },
  145. confirm() {
  146. if (this.leverTransaction.length > 0) {
  147. if (this.closeLeverItem) {
  148. // 平仓
  149. Api_setCloseLever({
  150. id: this.closeLeverItem.id
  151. }).then(res => {
  152. this.$emit('closeLeverSuccess')
  153. })
  154. } else {
  155. // 全部平仓
  156. Api_setBatchClose({
  157. type: 0
  158. }).then(res => {
  159. this.$emit('closeLeverSuccess')
  160. })
  161. }
  162. }
  163. },
  164. setRestrict(item) {
  165. this.$nextTick(() => {
  166. this.$refs.restrictRef.open(item)
  167. })
  168. },
  169. setSuccess() {
  170. this.$emit('closeLeverSuccess')
  171. }
  172. }
  173. }
  174. </script>
  175. <style lang="scss" scoped>
  176. @import "~./index.scss"
  177. </style>