freight-space.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <view class="">
  3. <template v-if="myTransaction && myTransaction.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 myTransaction">
  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. <view class="top-left-share" @click.stop="$emit('shareContent' , item)">
  16. <text class="icon-size iconfont">&#xe8b0;</text>
  17. <text class="icon-size">分享</text>
  18. </view>
  19. </view>
  20. <view class="top-left-b">
  21. <text>{{ item.multiple }}倍杠杆</text>
  22. <text class="top-left-b-tag"></text>
  23. </view>
  24. </view>
  25. <view class="top-right">
  26. <text>{{ item.profits }}</text>
  27. <text class="top-right-float"><text>浮动盈亏</text>{{ $getChange(item , 1) }}%</text>
  28. </view>
  29. </view>
  30. <view class="content-info">
  31. <view class="info-item">
  32. <text class="info-item-lable">保证金(USDT)</text>
  33. <text class="info-item-val">{{ item.caution_money }}</text>
  34. </view>
  35. <view class="info-item">
  36. <text class="info-item-lable">开仓价格(USDT)</text>
  37. <text class="info-item-val">{{ item.origin_price }}</text>
  38. </view>
  39. <view class="info-item">
  40. <text class="info-item-lable">标记价格(USDT)</text>
  41. <text class="info-item-val">{{ item.origin_price }}</text>
  42. </view>
  43. <view class="info-item">
  44. <text class="info-item-lable">持仓数量(张)</text>
  45. <text class="info-item-val">{{ item.number }}</text>
  46. </view>
  47. <view class="info-item">
  48. <text class="info-item-lable">风险率(%)</text>
  49. <text class="info-item-val">{{ $getChange(item , 2) }}</text>
  50. <!-- {{ item.caution_money }} -->
  51. </view>
  52. <view class="info-item">
  53. <text class="info-item-lable">预计强平价(USDT)</text>
  54. <text class="info-item-val">{{ $getChange(item , 3) }}</text>
  55. <!-- {{ item.caution_money }} -->
  56. </view>
  57. <view class="info-item">
  58. <text class="info-item-lable">预计止损(USDT)</text>
  59. <text class="info-item-val"
  60. @click.stop="setRestrict(item)">{{ item.stop_loss_price || '--' }} <text
  61. class="iconfont">&#xe610;</text></text>
  62. </view>
  63. <view class="info-item">
  64. <text class="info-item-lable">预计止盈(USDT)</text>
  65. <text class="info-item-val"
  66. @click.stop="setRestrict(item)">{{ item.target_profit_price || '--' }} <text
  67. class="iconfont">&#xe610;</text> </text>
  68. </view>
  69. <view class="info-item">
  70. <text class="info-item-lable">预计创建时间(USDT)</text>
  71. <text class="info-item-val">{{ item.transaction_time }}</text>
  72. </view>
  73. </view>
  74. <view class="content-btns">
  75. <view class="content-btn-item" @click.stop="setCloseLever(item)">
  76. 平仓
  77. </view>
  78. <!-- @click.stop="setInversion(item)" -->
  79. <view class="content-btn-item">
  80. 反向开仓
  81. </view>
  82. <view class="content-btn-item">
  83. 加仓
  84. </view>
  85. </view>
  86. </view>
  87. <gap />
  88. </template>
  89. </template>
  90. <template v-else>
  91. <empty class="empty-content" />
  92. </template>
  93. </view>
  94. </template>
  95. <script>
  96. import {
  97. Api_setCloseLever,
  98. Api_setBatchClose
  99. } from "@/api/index.js"
  100. import {
  101. mapGetters
  102. } from 'vuex'
  103. export default {
  104. name: 'freight-space',
  105. props: {
  106. myTransaction: {
  107. type: Array,
  108. default: () => {
  109. return []
  110. }
  111. },
  112. currency: {
  113. type: Object,
  114. default: () => {
  115. return {}
  116. }
  117. },
  118. },
  119. computed: {
  120. ...mapGetters([
  121. "stocksColor"
  122. ])
  123. },
  124. data() {
  125. return {
  126. closeLeverItem: null,
  127. };
  128. },
  129. mounted() {
  130. },
  131. methods: {
  132. setCloseLever(item) {
  133. this.closeLeverItem = item;
  134. const obj = {
  135. title: '平仓',
  136. closeLeverContent: '如果存在平仓挂单(限价止盈止损),将会在全平前被撤单,确定平仓吗?'
  137. }
  138. this.$emit('setDepot', obj)
  139. },
  140. setInversion() {
  141. this.closeLeverItem = -1;
  142. const obj = {
  143. title: '反向开仓',
  144. closeLeverContent: '如果存在平仓挂单(限价止盈止损),将会在全平前被撤单,确定反向开仓吗?',
  145. }
  146. this.$emit('setDepot', obj)
  147. },
  148. setCloseLeverAll() {
  149. this.closeLeverItem = null;
  150. const obj = {
  151. title: '全部平仓',
  152. closeLeverContent: '如果存在平仓挂单(限价止盈止损),将会在全平前被撤单,确定全部平仓吗?',
  153. }
  154. this.$emit('setDepot', obj)
  155. // this.title = '全部平仓';
  156. // this.closeLeverContent = '';
  157. // this.closeLeverItem = null;
  158. // this.$refs.unopenRef.open();
  159. },
  160. confirm() {
  161. if (this.myTransaction.length > 0) {
  162. uni.showLoading({
  163. title: '',
  164. mask: true
  165. })
  166. if (this.closeLeverItem && this.closeLeverItem !== -1) {
  167. // 平仓
  168. Api_setCloseLever({
  169. id: this.closeLeverItem.id
  170. }).then(res => {
  171. setTimeout(() => {
  172. uni.showToast({
  173. title: '平仓成功',
  174. icon: 'none'
  175. })
  176. setTimeout(() => {
  177. uni.hideToast()
  178. this.$emit('closeLeverSuccess')
  179. }, 300)
  180. }, 201)
  181. }).finally(() => {
  182. setTimeout(() => {
  183. uni.hideLoading()
  184. }, 200)
  185. })
  186. } else if (this.closeLeverItem == -1) {
  187. // 反向开仓
  188. } else {
  189. // 全部平仓
  190. Api_setBatchClose({
  191. type: 0,
  192. currency_id: this.currency.currency_id
  193. }).then(res => {
  194. setTimeout(() => {
  195. uni.showToast({
  196. title: '平仓成功',
  197. icon: 'none'
  198. })
  199. setTimeout(() => {
  200. uni.hideToast()
  201. this.$emit('closeLeverSuccess')
  202. }, 300)
  203. }, 201)
  204. }).finally(() => {
  205. setTimeout(() => {
  206. uni.hideLoading()
  207. }, 200)
  208. })
  209. }
  210. }
  211. },
  212. // 设置止盈止损
  213. setRestrict(item) {
  214. console.log('setRestrict = ', item)
  215. this.$emit('setProfitLoss', item)
  216. // this.$nextTick(() => {
  217. // this.$refs.restrictRef.open(item)
  218. // })
  219. },
  220. setSuccess() {
  221. this.$emit('closeLeverSuccess')
  222. }
  223. }
  224. }
  225. </script>
  226. <style lang="scss" scoped>
  227. @import "~./index.scss"
  228. </style>