withdraw.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <template>
  2. <view class="container">
  3. <view class="list-box">
  4. <view class="list flex">
  5. <view class="flex_item list-item">
  6. <image :src="logo"></image>
  7. <view>{{name}}</view>
  8. </view>
  9. <view class="flex_item list-tpl">
  10. <view class="content" @click="useOutClickSide">
  11. <selectss ref="easySelect" :options='moneyTypeList' :value="name" @selectOne="selectOne">
  12. </selectss>
  13. </view>
  14. <image src="../../static/img/img23.png"></image>
  15. </view>
  16. </view>
  17. </view>
  18. <view class="from-box">
  19. <view class="from-title">提币地址</view>
  20. <input class="input-box" type="text" v-model="addr" placeholder="请输入提币地址"/>
  21. <view class="from-title">数量</view>
  22. <view class="flex input-tpl">
  23. <input class="input-box" type="number" v-model="num" :placeholder="'最低数量 '+less+name"/>
  24. <view class="all" @click="num = money">全部</view>
  25. </view>
  26. <view class="all-num">可用<text>{{money *1 }}</text>{{name}}</view>
  27. <view class="submit" @click="cash">确定</view>
  28. <view class="tpl-box" v-show="showText == true">提币数量在{{less}}-10000.0个之间,认真核对提币地址;手续费:{{data.service}}{{data.service_type}}</view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import { cash,cashmoney_type,calculator } from '@/api/finance.js';
  34. import selectss from '@/components/select.vue';
  35. export default {
  36. components: {
  37. selectss
  38. },
  39. data() {
  40. return {
  41. moneyTypeList: [],
  42. name: '',
  43. code: '',
  44. logo: '',
  45. money:'',
  46. less: '',
  47. addr: '',
  48. num: '',
  49. data:'',
  50. showText:false
  51. };
  52. },
  53. onLoad(option) {
  54. console.log(option)
  55. if (option.name) {
  56. this.name = option.name;
  57. this.logo = option.logo;
  58. this.code = option.code;
  59. this.money = option.money;
  60. this.less = option.less;
  61. }
  62. this.moneyType();
  63. },
  64. onShow() {
  65. },
  66. watch:{
  67. num(newVal, oldVal) {
  68. this.calculator();
  69. }
  70. },
  71. methods: {
  72. // 所有币种
  73. async moneyType() {
  74. let obj = this;
  75. cashmoney_type({}).then(({
  76. data
  77. }) => {
  78. obj.moneyTypeList = data;
  79. if (obj.logo == '') {
  80. obj.logo = obj.moneyTypeList[0].LOGO;
  81. obj.name = obj.moneyTypeList[0].name;
  82. obj.code = obj.moneyTypeList[0].code;
  83. obj.money = obj.moneyTypeList[0].wallet.money;
  84. obj.less = obj.moneyTypeList[0].less;
  85. }
  86. });
  87. },
  88. calculator(){
  89. let obj = this;
  90. calculator({
  91. money_type:obj.code,
  92. money:obj.num
  93. }).then(({data}) => {
  94. obj.data = data;
  95. obj.showText = true;
  96. });
  97. },
  98. cash(){
  99. let obj = this;
  100. if(obj.code == ''){
  101. obj.$api.msg('请选择币种!');
  102. return;
  103. }
  104. if(obj.addr == ''){
  105. obj.$api.msg('请输入提币地址!');
  106. return;
  107. }
  108. if(obj.num == ''){
  109. obj.$api.msg('请输入提币数量!');
  110. return;
  111. }
  112. if(obj.num < obj.less ){
  113. obj.$api.msg('最低数量不能低于'+obj.less + '!');
  114. return;
  115. }
  116. cash({
  117. money_type:obj.code,
  118. money:obj.num,
  119. address:obj.addr,
  120. }).then((data) => {
  121. obj.money = '';
  122. obj.address = '';
  123. obj.$api.msg(data.msg);
  124. });
  125. },
  126. selectOne(options) {
  127. this.logo = options.LOGO;
  128. this.name = options.name;
  129. this.code = options.code;
  130. this.money = options.wallet.money;
  131. this.less = options.less;
  132. },
  133. useOutClickSide() {
  134. this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
  135. },
  136. }
  137. };
  138. </script>
  139. <style lang="scss">
  140. page {
  141. min-height: 100%;
  142. background-color: #ffffff;
  143. .container {
  144. width: 100%;
  145. }
  146. }
  147. .list-box {
  148. padding: 60rpx 30rpx;
  149. height: 350rpx;
  150. background-color: #5771DF;
  151. .list {
  152. background-color: #FFFFFF;
  153. border-radius: 15rpx;
  154. padding: 15rpx 23rpx;
  155. .list-item {
  156. font-size: 30rpx;
  157. font-weight: bold;
  158. color: #333333;
  159. image {
  160. width: 43rpx;
  161. height: 43rpx;
  162. margin-right: 15rpx;
  163. }
  164. }
  165. .list-tpl {
  166. image {
  167. width: 15rpx;
  168. height: 25rpx;
  169. margin-left: 20rpx;
  170. }
  171. }
  172. }
  173. }
  174. .from-box{
  175. margin: 30rpx 30rpx;
  176. padding: 44rpx 25rpx;
  177. background-color: #FFFFFF;
  178. border-radius: 15rpx;
  179. position: relative;
  180. top: -180rpx;
  181. .from-title{
  182. font-size: 24rpx;
  183. font-weight: bold;
  184. color: #333333;
  185. }
  186. .input-box{
  187. font-size: 26rpx;
  188. font-weight: 500;
  189. color: #666666;
  190. margin: 35rpx 0rpx;
  191. }
  192. .all{
  193. font-size: 30rpx;
  194. font-weight: 500;
  195. color: #5771DF;
  196. }
  197. .all-num{
  198. font-size: 24rpx;
  199. font-weight: bold;
  200. color: #333333;
  201. }
  202. .submit {
  203. background-color: #5771DF;
  204. margin-top: 165rpx;
  205. color: #FFFFFF;
  206. text-align: center;
  207. padding: 26rpx 0rpx;
  208. border-radius: 15rpx;
  209. }
  210. .tpl-box {
  211. text-align: left;
  212. font-size: 28rpx;
  213. font-weight: 500;
  214. color: #FB3A2F;
  215. margin-top: 26rpx;
  216. }
  217. }
  218. </style>