restrict.vue 8.0 KB

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