restrict.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409
  1. <template>
  2. <uni-popup ref="popupRef" type="bottom">
  3. <view class="popups-box">
  4. <view class="popups-title">
  5. {{ content ? '持仓止盈止损修改' : '设置止盈止损' }}
  6. <text class="close-icon iconfont" @click.stop="close()">&#xeca0;</text>
  7. </view>
  8. <view class="popups-content">
  9. <template v-if="content">
  10. <view class="content-item">
  11. <text class="content-lable">合约名称</text>
  12. <view class="content-val">
  13. <text class="val-name">{{ content.symbol }}</text>
  14. <text class="val-lever">{{ content.multiple }}倍杠杆</text>
  15. <text class="val-tag">{{ content.type_name }}</text>
  16. </view>
  17. </view>
  18. <view class="content-item">
  19. <text class="content-lable">开仓价格(USDT)</text>
  20. <view class="content-val">
  21. {{ content.origin_price }}
  22. </view>
  23. </view>
  24. <view class="content-item">
  25. <text class="content-lable">标记价格(USDT)</text>
  26. <view class="content-val">
  27. {{ content.update_price }}
  28. </view>
  29. </view>
  30. </template>
  31. <view class="content-restrict">
  32. <view class="restrict-item">
  33. <text class="restrict-lable">止盈</text>
  34. <view class="restrict-btn" v-if="content">
  35. <text class="iconfont">&#xe672;</text>
  36. <text>按比例设置</text>
  37. </view>
  38. </view>
  39. <view class="restrict-input-box">
  40. <input class="restrict-input" v-model="target_profit_price" type="number"
  41. placeholder-class="placeholder-class" placeholder="请输入触发价">
  42. <text class="restrict-tag">USDT</text>
  43. <text class="restrict-btn" @click.stop="target_profit_price = ''">清空</text>
  44. </view>
  45. <view class="restrict-input-box input-type">
  46. <text class="restrict-input">市价</text>
  47. <text class="restrict-tag">USDT</text>
  48. <text class="restrict-btn">市价</text>
  49. </view>
  50. <view class="restrict-hint">
  51. <text class="iconfont">&#xe8ec;</text>
  52. <text>市价单的成交价格可能偏离用户下单时看到的成交价格</text>
  53. </view>
  54. <view class="restrict-hint2" v-if="content">
  55. <text>当标价价格触达{{ target_profit_price || '--'}}时,将会触发市价委托平仓</text>
  56. <text>预计盈亏{{ profitPrice || '--'}}</text>
  57. </view>
  58. <view class="restrict-item">
  59. <text class="restrict-lable">止损</text>
  60. <view class="restrict-btn" v-if="content">
  61. <text class="iconfont">&#xe672;</text>
  62. <text>按比例设置</text>
  63. </view>
  64. </view>
  65. <view class="restrict-input-box">
  66. <input class="restrict-input" v-model="stop_loss_price" type="number"
  67. placeholder-class="placeholder-class" placeholder="请输入触发价">
  68. <text class="restrict-tag">USDT</text>
  69. <text class="restrict-btn" @click.stop="stop_loss_price = ''">清空</text>
  70. </view>
  71. <view class="restrict-input-box input-type">
  72. <text class="restrict-input">市价</text>
  73. <text class="restrict-tag">USDT</text>
  74. <text class="restrict-btn">市价</text>
  75. </view>
  76. <view class="restrict-hint">
  77. <text class="iconfont">&#xe8ec;</text>
  78. <text>市价单的成交价格可能偏离用户下单时看到的成交价格</text>
  79. </view>
  80. <view class="restrict-hint2" v-if="content">
  81. <text>当标价价格触达{{ stop_loss_price || '--'}}时,将会触发市价委托平仓</text>
  82. <text>预计盈亏{{ lossPrice || '--'}}</text>
  83. </view>
  84. <view class="content-btns">
  85. <view class="content-btn cancel-btn" @click.stop="close()">
  86. 取消
  87. </view>
  88. <view class="content-btn" @click.stop="setLeverStop()">
  89. 确定
  90. </view>
  91. </view>
  92. </view>
  93. </view>
  94. </view>
  95. </uni-popup>
  96. </template>
  97. <script>
  98. import {
  99. Api_setLeverStop
  100. } from "@/api/index.js"
  101. export default {
  102. data() {
  103. return {
  104. content: null, // null : 下单时设置 , 否则为但是仓位设置
  105. target_profit_price: '',
  106. stop_loss_price: '',
  107. profitPrice:"",
  108. lossPrice:''
  109. };
  110. },
  111. watch:{
  112. target_profit_price:{
  113. handler(newPrice){
  114. if(newPrice && newPrice > Number(this.content.origin_price)){
  115. this.profitPrice = ((newPrice - this.content.origin_price) * 100 / this.content.origin_price *this.content.caution_money).toFixed(2);
  116. }else{
  117. this.profitPrice = ''
  118. }
  119. },
  120. immediate:true
  121. },
  122. stop_loss_price:{
  123. handler(newPrice){
  124. if(newPrice && newPrice < Number(this.content.origin_price)){
  125. this.lossPrice = ((newPrice - this.content.origin_price) * 100 / this.content.origin_price *this.content.caution_money).toFixed(2);
  126. }else{
  127. this.lossPrice = ''
  128. }
  129. },
  130. immediate:true
  131. },
  132. },
  133. mounted() {
  134. // this.open()
  135. },
  136. methods: {
  137. open(item = null) {
  138. this.target_profit_price = '';
  139. this.stop_loss_price = '';
  140. this.content = item;
  141. this.$nextTick(() => {
  142. this.$refs.popupRef.open();
  143. })
  144. },
  145. close() {
  146. this.$refs.popupRef.close()
  147. },
  148. // confirm() {
  149. // this.close();
  150. // this.$emit('confirm')
  151. // },
  152. //
  153. setLeverStop() {
  154. if (this.content) {
  155. // 单个持仓修改
  156. Api_setLeverStop({
  157. id: this.content.id,
  158. target_profit_price: this.target_profit_price,
  159. stop_loss_price: this.stop_loss_price
  160. }).then(res => {
  161. this.close();
  162. this.$emit('setSuccess')
  163. })
  164. } else {
  165. // 全局下单设置
  166. this.close();
  167. this.$eventBus.$emit('placeOrder', {
  168. target_profit_price: this.target_profit_price,
  169. stop_loss_price: this.stop_loss_price
  170. });
  171. }
  172. }
  173. }
  174. }
  175. </script>
  176. <style lang="scss" scoped>
  177. .popups-box {
  178. width: 100%;
  179. .popups-title {
  180. text-align: center;
  181. width: 100%;
  182. height: 100rpx;
  183. line-height: 100rpx;
  184. background-color: $box-bg;
  185. position: relative;
  186. font-size: 30rpx;
  187. font-weight: bold;
  188. border-radius: 40rpx 40rpx 0 0;
  189. .close-icon {
  190. position: absolute;
  191. right: 30rpx;
  192. top: 50%;
  193. transform: translateY(-50%);
  194. }
  195. }
  196. }
  197. .popups-content {
  198. width: 100%;
  199. background-color: #fff;
  200. .content-item {
  201. width: 100%;
  202. display: flex;
  203. justify-content: space-between;
  204. align-items: center;
  205. padding: 20rpx $pages-padding;
  206. font-size: 22rpx;
  207. .content-lable {
  208. color: $SizeColor;
  209. }
  210. .content-val {
  211. color: #000;
  212. font-weight: bold;
  213. // <text class="val-name">LTC/USDT</text>
  214. // <text class="val-lever">100倍杠杆</text>
  215. // <text class="val-tag">逐仓做多</text>
  216. .val-name {}
  217. .val-tag,
  218. .val-lever {
  219. padding: 5rpx 4rpx;
  220. color: #fff;
  221. font-size: 20rpx;
  222. border-radius: 4rpx;
  223. margin-left: 6rpx;
  224. }
  225. .val-lever {
  226. background-color: $Theme-Color;
  227. }
  228. .val-tag {
  229. background-color: $Theme-Color1;
  230. }
  231. }
  232. &:last-child {
  233. border-bottom: 10rpx solid $border-color;
  234. }
  235. }
  236. .content-restrict {
  237. width: 100%;
  238. padding: 0 $pages-padding;
  239. .restrict-item {
  240. width: 100%;
  241. padding-top: 30rpx;
  242. display: flex;
  243. justify-content: space-between;
  244. align-items: center;
  245. font-size: 26rpx;
  246. font-weight: bold;
  247. .restrict-btn {
  248. .iconfont {
  249. font-size: 28rpx;
  250. color: $Theme-Color;
  251. margin-right: 10rpx;
  252. }
  253. }
  254. }
  255. .restrict-input-box {
  256. margin-top: 20rpx;
  257. width: 100%;
  258. display: flex;
  259. align-items: center;
  260. font-size: 26rpx;
  261. height: 80rpx;
  262. border: 1rpx solid $border-color;
  263. border-radius: 10rpx;
  264. padding-right: 20rpx;
  265. text {
  266. flex-shrink: 0;
  267. }
  268. .restrict-input {
  269. flex: 1;
  270. height: 100%;
  271. border: none;
  272. padding: 0 20rpx;
  273. }
  274. .placeholder-class {
  275. font-size: 26rpx;
  276. font-weight: bold;
  277. }
  278. .restrict-tag {
  279. color: $SizeColor2;
  280. }
  281. .restrict-btn {
  282. color: $Theme-Color;
  283. padding-left: 20rpx;
  284. }
  285. }
  286. .input-type {
  287. background-color: $box-bg;
  288. .restrict-input {
  289. flex: 1;
  290. height: auto;
  291. padding: 0 20rpx;
  292. color: #000;
  293. font-weight: bold;
  294. }
  295. .restrict-btn {
  296. line-height: 1;
  297. border-left: 1px solid $Theme-Color;
  298. margin-left: 10rpx;
  299. padding-left: 10rpx;
  300. }
  301. }
  302. // <view class="restrict-hint">
  303. // <text class="iconfont">&#xe8ec;</text>
  304. // <text>市价单的成交价格可能偏离用户下单时看到的成交价格</text>
  305. // </view>
  306. // <view class="restrict-hint2">
  307. // <text>当标价价格触达{{ target_profit_price || '--'}}时,将会触发市价委托平仓</text>
  308. // <text>预计盈亏--</text>
  309. // </view>
  310. .restrict-hint {
  311. width: 100%;
  312. display: flex;
  313. align-items: center;
  314. padding-top: 10rpx;
  315. text {
  316. font-size: 22rpx;
  317. }
  318. .iconfont {
  319. font-size: 26rpx;
  320. margin-right: 6rpx;
  321. color: #000;
  322. }
  323. }
  324. .restrict-hint2 {
  325. width: 100%;
  326. display: flex;
  327. align-items: center;
  328. justify-content: space-between;
  329. font-size: 20rpx;
  330. color: $SizeColor;
  331. padding-top: 10rpx;
  332. text + text{
  333. flex-shrink: 0;
  334. padding-left: 10px;
  335. }
  336. }
  337. }
  338. }
  339. .content-btns {
  340. width: 100%;
  341. display: flex;
  342. justify-content: space-between;
  343. align-items: stretch;
  344. padding-top: 60rpx;
  345. .content-btn {
  346. flex: 1;
  347. height: 80rpx;
  348. line-height: 80rpx;
  349. background-color: $Theme-Color;
  350. margin-bottom: 40rpx;
  351. color: #fff;
  352. text-align: center;
  353. font-size: 30rpx;
  354. letter-spacing: 1px;
  355. border-radius: 6rpx;
  356. }
  357. .cancel-btn {
  358. margin-right: 20rpx;
  359. border: 1rpx solid $Theme-Color;
  360. background-color: #fff;
  361. color: $Theme-Color;
  362. }
  363. }
  364. </style>