shortcut-buy.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <template>
  2. <view>
  3. <!-- 头部 -->
  4. <headContent borderBottom>
  5. <template #left>
  6. <reverse-back />
  7. </template>
  8. <template #content>
  9. <view class="haed-title">
  10. 法币交易
  11. </view>
  12. </template>
  13. </headContent>
  14. <view class="lable-title">
  15. <text @click.stop="type = 1" :class="['title-item' , type === 1 ? 'active-title-item' : '']">我要购买</text>
  16. <text @click.stop="type = 2" :class="['title-item' , type === 2 ? 'active-title-item' : '']">我要出售</text>
  17. </view>
  18. <view class="content-box">
  19. <view class="currency-type">
  20. <image class="currency-icon" src="@/static/logo.png" mode="aspectFit"></image>
  21. <text class="currency-text">USDT</text>
  22. </view>
  23. <template v-if="type === 1">
  24. <view class="type-lable">
  25. <view class="type-lable-name">购买{{ buy.text }}</view>
  26. </view>
  27. <view class="type-input-box">
  28. <input class="type-input" v-model="buy.nums" />
  29. <text class="type-units">{{ buy.units }}</text>
  30. </view>
  31. <view class="switch-type">
  32. <view class="switch-refer">
  33. 参考单价:<text>--</text>CNY/USDT
  34. </view>
  35. <view class="switch-btn" @click.stop="buy.buyType == 1 ? buy.buyType = 2 : buy.buyType = 1">
  36. <text class="iconfont">&#xe607;</text>
  37. <!-- {{ setText(buy.buyType) }} -->
  38. <text class="switch-btn-text">按{{ buy.text }}出售</text>
  39. </view>
  40. </view>
  41. <view :class="['submit-btn' , buy.nums ? 'active-submit-btn' : '']">
  42. 立即购买
  43. </view>
  44. </template>
  45. <template v-if="type === 2">
  46. <view class="type-lable">
  47. <view class="type-lable-name">出售{{ sell.text }}</view>
  48. <view class="type-lable-nums">
  49. <text class="lable-nums-text">可出售{{ sell.text }}:</text>
  50. <text class="lable-nums">{{ sell.usable }} USDT</text>
  51. </view>
  52. </view>
  53. <view class="type-input-box">
  54. <input class="type-input" v-model="sell.nums" />
  55. <text class="type-units">{{ sell.units }}</text>
  56. </view>
  57. <view class="switch-type">
  58. <view class="switch-refer">
  59. 参考单价:<text>--</text>CNY/USDT
  60. </view>
  61. <view class="switch-btn" @click.stop="sell.sellType == 1 ? sell.sellType = 2 : sell.sellType = 1">
  62. <text class="iconfont">&#xe607;</text>
  63. <text class="switch-btn-text">按{{ sell.text }}出售</text>
  64. </view>
  65. </view>
  66. <view class="submit-btn">
  67. 立即出售
  68. </view>
  69. <view class="hint-text">
  70. 温馨提示:由于时间、行情等因素,可能无法为您匹配到最优的出售订单,请知悉。
  71. </view>
  72. </template>
  73. </view>
  74. </view>
  75. </template>
  76. <script>
  77. export default {
  78. name: 'shortcut-buy',
  79. data() {
  80. return {
  81. type: 1,
  82. buy: {
  83. buyType: 1,
  84. text:'数量',
  85. units: 'CNY',
  86. nums: ''
  87. },
  88. sell: {
  89. usable: '0.0000',
  90. sellType: 1,
  91. text:'数量',
  92. units: 'CNY',
  93. nums: ''
  94. },
  95. };
  96. },
  97. watch:{
  98. 'buy.buyType'(newType){
  99. if(newType === 1){
  100. this.buy.text = '数量';
  101. this.buy.units = 'CNY';
  102. }
  103. if(newType === 2){
  104. this.buy.text = '金额';
  105. this.buy.units = 'USDT';
  106. }
  107. },
  108. 'sell.sellType'(newType){
  109. if(newType === 1){
  110. this.sell.text = '数量';
  111. this.sell.units = 'CNY';
  112. }
  113. if(newType === 2){
  114. this.sell.text = '金额';
  115. this.sell.units = 'USDT';
  116. }
  117. }
  118. },
  119. computed:{
  120. // setText(){
  121. // return function(type){
  122. // console.log('buy.units' , this.buy.units)
  123. // return type == 1 ? '数量' : '金额'
  124. // }
  125. // }
  126. },
  127. mounted() {
  128. }
  129. }
  130. </script>
  131. <style lang="scss" scoped>
  132. .lable-title {
  133. width: 100%;
  134. display: flex;
  135. align-items: stretch;
  136. padding: 0 100rpx;
  137. height: 100rpx;
  138. justify-content: space-between;
  139. border-bottom: 1rpx solid $border-color2;
  140. .title-item {
  141. line-height: 100rpx;
  142. font-size: 28rpx;
  143. }
  144. .active-title-item {
  145. color: $Theme-Color;
  146. position: relative;
  147. &::before {
  148. content: '';
  149. position: absolute;
  150. left: 50%;
  151. bottom: 0;
  152. width: 42rpx;
  153. height: 8rpx;
  154. border-radius: 8rpx;
  155. background-color: $Theme-Color;
  156. transform: translateX(-50%);
  157. }
  158. }
  159. }
  160. .content-box {
  161. padding: 0 $pages-padding;
  162. .currency-type {
  163. width: 100%;
  164. padding: 30rpx 0 50rpx;
  165. display: flex;
  166. align-items: center;
  167. .currency-icon {
  168. width: 36rpx;
  169. height: 36rpx;
  170. border-radius: 50%;
  171. }
  172. .currency-text {
  173. padding-left: 7px;
  174. font-size: 26rpx;
  175. font-weight: bold;
  176. }
  177. }
  178. .type-lable {
  179. display: flex;
  180. justify-content: space-between;
  181. align-items: center;
  182. font-size: 26rpx;
  183. .type-lable-name {
  184. font-weight: bold;
  185. }
  186. .type-lable-nums {
  187. color: $SizeColor;
  188. .lable-nums-text {
  189. border-bottom: 1rpx dashed $SizeColor;
  190. }
  191. .lable-nums {
  192. color: $Theme-Color;
  193. }
  194. }
  195. }
  196. .type-input-box {
  197. padding-top: 50rpx;
  198. width: 100%;
  199. display: flex;
  200. align-items: stretch;
  201. border-bottom: 1rpx solid $border-color4;
  202. font-weight: bold;
  203. .type-input {
  204. flex: 1;
  205. font-size: 24rpx;
  206. }
  207. .type-units {
  208. flex-shrink: 0;
  209. font-size: 26rpx;
  210. }
  211. }
  212. .switch-type {
  213. display: flex;
  214. align-items: center;
  215. justify-content: space-between;
  216. font-size: 24rpx;
  217. color: $SizeColor;
  218. padding-top: 40rpx;
  219. .switch-refer {
  220. text {
  221. color: $Theme-Color;
  222. }
  223. }
  224. .switch-btn {
  225. display: flex;
  226. align-items: center;
  227. color: $Theme-Color;
  228. .iconfont {
  229. font-size: 24rpx;
  230. transform: rotateY(180deg);
  231. margin-right: 3rpx;
  232. }
  233. }
  234. }
  235. .submit-btn {
  236. width: 100%;
  237. height: 90rpx;
  238. line-height: 90rpx;
  239. background-color: $btnBgColor;
  240. width: 100%;
  241. text-align: center;
  242. color: #fff;
  243. font-size: 28rpx;
  244. border-radius: 10rpx;
  245. margin-top: 80rpx;
  246. font-weight: bold;
  247. }
  248. .active-submit-btn{
  249. background-color: $Theme-Color;
  250. }
  251. .hint-text{
  252. width: 100%;
  253. font-size: 24rpx;
  254. color: $SizeColor;
  255. padding-top: 20rpx;
  256. }
  257. }
  258. </style>