453530270@qq.com
2 years ago
96 changed files with 526 additions and 21658 deletions
@ -1,7 +0,0 @@ |
|||
Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. |
|||
|
|||
To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts |
|||
|
|||
You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. |
|||
|
|||
You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. |
|||
@ -1,152 +0,0 @@ |
|||
body { |
|||
padding: 0; |
|||
margin: 0; |
|||
font-family: sans-serif; |
|||
font-size: 1em; |
|||
line-height: 1.5; |
|||
color: #555; |
|||
background: #fff; |
|||
} |
|||
h1 { |
|||
font-size: 1.5em; |
|||
font-weight: normal; |
|||
} |
|||
small { |
|||
font-size: .66666667em; |
|||
} |
|||
a { |
|||
color: #e74c3c; |
|||
text-decoration: none; |
|||
} |
|||
a:hover, a:focus { |
|||
box-shadow: 0 1px #e74c3c; |
|||
} |
|||
.bshadow0, input { |
|||
box-shadow: inset 0 -2px #e7e7e7; |
|||
} |
|||
input:hover { |
|||
box-shadow: inset 0 -2px #ccc; |
|||
} |
|||
input, fieldset { |
|||
font-family: sans-serif; |
|||
font-size: 1em; |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
} |
|||
input { |
|||
color: inherit; |
|||
line-height: 1.5; |
|||
height: 1.5em; |
|||
padding: .25em 0; |
|||
} |
|||
input:focus { |
|||
outline: none; |
|||
box-shadow: inset 0 -2px #449fdb; |
|||
} |
|||
.glyph { |
|||
font-size: 16px; |
|||
width: 15em; |
|||
padding-bottom: 1em; |
|||
margin-right: 4em; |
|||
margin-bottom: 1em; |
|||
float: left; |
|||
overflow: hidden; |
|||
} |
|||
.liga { |
|||
width: 80%; |
|||
width: calc(100% - 2.5em); |
|||
} |
|||
.talign-right { |
|||
text-align: right; |
|||
} |
|||
.talign-center { |
|||
text-align: center; |
|||
} |
|||
.bgc1 { |
|||
background: #f1f1f1; |
|||
} |
|||
.fgc1 { |
|||
color: #999; |
|||
} |
|||
.fgc0 { |
|||
color: #000; |
|||
} |
|||
p { |
|||
margin-top: 1em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.mvm { |
|||
margin-top: .75em; |
|||
margin-bottom: .75em; |
|||
} |
|||
.mtn { |
|||
margin-top: 0; |
|||
} |
|||
.mtl, .mal { |
|||
margin-top: 1.5em; |
|||
} |
|||
.mbl, .mal { |
|||
margin-bottom: 1.5em; |
|||
} |
|||
.mal, .mhl { |
|||
margin-left: 1.5em; |
|||
margin-right: 1.5em; |
|||
} |
|||
.mhmm { |
|||
margin-left: 1em; |
|||
margin-right: 1em; |
|||
} |
|||
.mls { |
|||
margin-left: .25em; |
|||
} |
|||
.ptl { |
|||
padding-top: 1.5em; |
|||
} |
|||
.pbs, .pvs { |
|||
padding-bottom: .25em; |
|||
} |
|||
.pvs, .pts { |
|||
padding-top: .25em; |
|||
} |
|||
.unit { |
|||
float: left; |
|||
} |
|||
.unitRight { |
|||
float: right; |
|||
} |
|||
.size1of2 { |
|||
width: 50%; |
|||
} |
|||
.size1of1 { |
|||
width: 100%; |
|||
} |
|||
.clearfix:before, .clearfix:after { |
|||
content: " "; |
|||
display: table; |
|||
} |
|||
.clearfix:after { |
|||
clear: both; |
|||
} |
|||
.hidden-true { |
|||
display: none; |
|||
} |
|||
.textbox0 { |
|||
width: 3em; |
|||
background: #f1f1f1; |
|||
padding: .25em .5em; |
|||
line-height: 1.5; |
|||
height: 1.5em; |
|||
} |
|||
#testDrive { |
|||
display: block; |
|||
padding-top: 24px; |
|||
line-height: 1.5; |
|||
} |
|||
.fs0 { |
|||
font-size: 16px; |
|||
} |
|||
.fs1 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
@ -1,30 +0,0 @@ |
|||
if (!('boxShadow' in document.body.style)) { |
|||
document.body.setAttribute('class', 'noBoxShadow'); |
|||
} |
|||
|
|||
document.body.addEventListener("click", function(e) { |
|||
var target = e.target; |
|||
if (target.tagName === "INPUT" && |
|||
target.getAttribute('class').indexOf('liga') === -1) { |
|||
target.select(); |
|||
} |
|||
}); |
|||
|
|||
(function() { |
|||
var fontSize = document.getElementById('fontSize'), |
|||
testDrive = document.getElementById('testDrive'), |
|||
testText = document.getElementById('testText'); |
|||
function updateTest() { |
|||
testDrive.innerHTML = testText.value || String.fromCharCode(160); |
|||
if (window.icomoonLiga) { |
|||
window.icomoonLiga(testDrive); |
|||
} |
|||
} |
|||
function updateSize() { |
|||
testDrive.style.fontSize = fontSize.value + 'px'; |
|||
} |
|||
fontSize.addEventListener('change', updateSize, false); |
|||
testText.addEventListener('input', updateTest, false); |
|||
testText.addEventListener('change', updateTest, false); |
|||
updateSize(); |
|||
}()); |
|||
@ -1,472 +0,0 @@ |
|||
<!doctype html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>IcoMoon Demo</title> |
|||
<meta name="description" content="An Icon Font Generated By IcoMoon.io"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link rel="stylesheet" href="demo-files/demo.css"> |
|||
<link rel="stylesheet" href="style.css"></head> |
|||
<body> |
|||
<div class="bgc1 clearfix"> |
|||
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs: 31)</small></h1> |
|||
</div> |
|||
<div class="clearfix mhl ptl"> |
|||
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Addmore"></span> |
|||
<span class="mls"> icon-Icon-Addmore</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e900" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Address"></span> |
|||
<span class="mls"> icon-Icon-Address</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e901" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Android"></span> |
|||
<span class="mls"> icon-Icon-Android</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e902" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-App"></span> |
|||
<span class="mls"> icon-Icon-App</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e903" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-apple"></span> |
|||
<span class="mls"> icon-Icon-apple</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e904" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Close"></span> |
|||
<span class="mls"> icon-Icon-Close</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e905" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Commission"></span> |
|||
<span class="mls"> icon-Icon-Commission</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e906" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Copy"></span> |
|||
<span class="mls"> icon-Icon-Copy</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e907" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Delete"></span> |
|||
<span class="mls"> icon-Icon-Delete</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e908" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-EmailAddress"><span class="path1"></span><span class="path2"></span></span> |
|||
<span class="mls"> icon-Icon-EmailAddress</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e909" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Export"></span> |
|||
<span class="mls"> icon-Icon-Export</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e90b" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-eye"><span class="path1"></span><span class="path2"></span></span> |
|||
<span class="mls"> icon-Icon-eye</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e90c" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-eyec"><span class="path1"></span><span class="path2"></span></span> |
|||
<span class="mls"> icon-Icon-eyec</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e90e" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-History"></span> |
|||
<span class="mls"> icon-Icon-History</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e910" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Increase"></span> |
|||
<span class="mls"> icon-Icon-Increase</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e911" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-leftarrow-small"></span> |
|||
<span class="mls"> icon-Icon-leftarrow-small</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e912" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Playstore"></span> |
|||
<span class="mls"> icon-Icon-Playstore</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e913" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Reset"></span> |
|||
<span class="mls"> icon-Icon-Reset</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e914" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-rightarrow-small"></span> |
|||
<span class="mls"> icon-Icon-rightarrow-small</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e915" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-select20"></span> |
|||
<span class="mls"> icon-Icon-select20</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e916" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-select100"></span> |
|||
<span class="mls"> icon-Icon-select100</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e917" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-social-fb"></span> |
|||
<span class="mls"> icon-Icon-social-fb</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e918" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-social-ins"></span> |
|||
<span class="mls"> icon-Icon-social-ins</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e919" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-social-linkedin"></span> |
|||
<span class="mls"> icon-Icon-social-linkedin</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e91a" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-social-medium"></span> |
|||
<span class="mls"> icon-Icon-social-medium</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e91b" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-social-twitter"></span> |
|||
<span class="mls"> icon-Icon-social-twitter</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e91c" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-social-youtube"></span> |
|||
<span class="mls"> icon-Icon-social-youtube</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e91d" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Triangle"></span> |
|||
<span class="mls"> icon-Icon-Triangle</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e91e" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-TriangleTop"></span> |
|||
<span class="mls"> icon-Icon-TriangleTop</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e91f" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-Uploadimage"></span> |
|||
<span class="mls"> icon-Icon-Uploadimage</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e920" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
<div class="glyph fs1"> |
|||
<div class="clearfix bshadow0 pbs"> |
|||
<span class="icon-Icon-User"></span> |
|||
<span class="mls"> icon-Icon-User</span> |
|||
</div> |
|||
<fieldset class="fs0 size1of1 clearfix hidden-false"> |
|||
<input type="text" readonly value="e921" class="unit size1of2" /> |
|||
<input type="text" maxlength="1" readonly value="" class="unitRight size1of2 talign-right" /> |
|||
</fieldset> |
|||
<div class="fs0 bshadow0 clearfix hidden-true"> |
|||
<span class="unit pvs fgc1">liga: </span> |
|||
<input type="text" readonly value="" class="liga unitRight" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--[if gt IE 8]><!--> |
|||
<div class="mhl clearfix mbl"> |
|||
<h1>Font Test Drive</h1> |
|||
<label> |
|||
Font Size: <input id="fontSize" type="number" class="textbox0 mbm" |
|||
min="8" value="48" /> |
|||
px |
|||
</label> |
|||
<input id="testText" type="text" class="phl size1of1 mvl" |
|||
placeholder="Type some text to test..." value=""/> |
|||
<div id="testDrive" class="icon-" style="font-family: icomoon"> |
|||
</div> |
|||
</div> |
|||
<!--<![endif]--> |
|||
<div class="bgc1 clearfix"> |
|||
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p> |
|||
</div> |
|||
|
|||
<script src="demo-files/demo.js"></script> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -1,164 +0,0 @@ |
|||
@font-face { |
|||
font-family: 'icomoon'; |
|||
src: url('fonts/icomoon.eot?rce6ue'); |
|||
src: url('fonts/icomoon.eot?rce6ue#iefix') format('embedded-opentype'), |
|||
url('fonts/icomoon.ttf?rce6ue') format('truetype'), |
|||
url('fonts/icomoon.woff?rce6ue') format('woff'), |
|||
url('fonts/icomoon.svg?rce6ue#icomoon') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
font-display: block; |
|||
} |
|||
|
|||
[class^="icon-"], [class*=" icon-"] { |
|||
/* use !important to prevent issues with browser extensions that change fonts */ |
|||
font-family: 'icomoon' !important; |
|||
speak: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
line-height: 1; |
|||
|
|||
/* Better Font Rendering =========== */ |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
.icon-Icon-Addmore:before { |
|||
content: "\e900"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Address:before { |
|||
content: "\e901"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Android:before { |
|||
content: "\e902"; |
|||
color: #fff; |
|||
} |
|||
.icon-Icon-App:before { |
|||
content: "\e903"; |
|||
color: #fff; |
|||
} |
|||
.icon-Icon-apple:before { |
|||
content: "\e904"; |
|||
color: #fff; |
|||
} |
|||
.icon-Icon-Close:before { |
|||
content: "\e905"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Commission:before { |
|||
content: "\e906"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Copy:before { |
|||
content: "\e907"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Delete:before { |
|||
content: "\e908"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-EmailAddress .path1:before { |
|||
content: "\e909"; |
|||
color: rgb(0, 0, 0); |
|||
} |
|||
.icon-Icon-EmailAddress .path2:before { |
|||
content: "\e90a"; |
|||
margin-left: -1em; |
|||
color: rgb(255, 255, 255); |
|||
} |
|||
.icon-Icon-Export:before { |
|||
content: "\e90b"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-eye .path1:before { |
|||
content: "\e90c"; |
|||
color: rgb(23, 16, 33); |
|||
opacity: 0.8; |
|||
} |
|||
.icon-Icon-eye .path2:before { |
|||
content: "\e90d"; |
|||
margin-left: -1em; |
|||
color: rgb(255, 255, 255); |
|||
opacity: 0.8; |
|||
} |
|||
.icon-Icon-eyec .path1:before { |
|||
content: "\e90e"; |
|||
color: rgb(23, 16, 33); |
|||
opacity: 0.8; |
|||
} |
|||
.icon-Icon-eyec .path2:before { |
|||
content: "\e90f"; |
|||
margin-left: -1em; |
|||
color: rgb(255, 255, 255); |
|||
opacity: 0.8; |
|||
} |
|||
.icon-Icon-History:before { |
|||
content: "\e910"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Increase:before { |
|||
content: "\e911"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-leftarrow-small:before { |
|||
content: "\e912"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-Playstore:before { |
|||
content: "\e913"; |
|||
color: #fff; |
|||
} |
|||
.icon-Icon-Reset:before { |
|||
content: "\e914"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-rightarrow-small:before { |
|||
content: "\e915"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-select20:before { |
|||
content: "\e916"; |
|||
color: #e5c5e5; |
|||
} |
|||
.icon-Icon-select100:before { |
|||
content: "\e917"; |
|||
color: #e5c5e5; |
|||
} |
|||
.icon-Icon-social-fb:before { |
|||
content: "\e918"; |
|||
} |
|||
.icon-Icon-social-ins:before { |
|||
content: "\e919"; |
|||
} |
|||
.icon-Icon-social-linkedin:before { |
|||
content: "\e91a"; |
|||
} |
|||
.icon-Icon-social-medium:before { |
|||
content: "\e91b"; |
|||
} |
|||
.icon-Icon-social-twitter:before { |
|||
content: "\e91c"; |
|||
} |
|||
.icon-Icon-social-youtube:before { |
|||
content: "\e91d"; |
|||
} |
|||
.icon-Icon-Triangle:before { |
|||
content: "\e91e"; |
|||
color: #fff; |
|||
} |
|||
.icon-Icon-TriangleTop:before { |
|||
content: "\e91f"; |
|||
color: #949494; |
|||
} |
|||
.icon-Icon-Uploadimage:before { |
|||
content: "\e920"; |
|||
color: #c1bbf2; |
|||
} |
|||
.icon-Icon-User:before { |
|||
content: "\e921"; |
|||
color: #fff; |
|||
} |
|||
@ -1,100 +1,82 @@ |
|||
<template> |
|||
<div> |
|||
<common-header :class="{'home-bg' : isHome}"></common-header> |
|||
<div> |
|||
<main> |
|||
<router-view></router-view> |
|||
<router-view></router-view> |
|||
</main> |
|||
<common-footer></common-footer> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapActions } from "vuex"; |
|||
import Member from "@/api/member"; |
|||
import { |
|||
mapState, |
|||
mapActions |
|||
} from "vuex"; |
|||
// import Member from "@/api/member"; |
|||
export default { |
|||
name: "App", |
|||
data() { |
|||
return { |
|||
oldTheme: "" |
|||
}; |
|||
}, |
|||
computed: { |
|||
isHome() { |
|||
return this.$route.path == "/home"; |
|||
name: "App", |
|||
data() { |
|||
return { |
|||
oldTheme: "" |
|||
}; |
|||
}, |
|||
...mapState({ |
|||
theme: "theme", |
|||
appConfig: "appConfig" |
|||
}), |
|||
|
|||
currentTheme() { |
|||
let current = this.$route.name; |
|||
// 需要切换主题的页面 |
|||
let paths = ["option", "exchange","contract"]; |
|||
if (paths.includes(current)) { |
|||
return this.theme + "-app"; |
|||
} else { |
|||
return ""; |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
currentTheme() { |
|||
this.setAppTheme(); |
|||
} |
|||
}, |
|||
methods: { |
|||
...mapActions({ |
|||
setAppConfig: "setAppConfig" |
|||
}), |
|||
// 移除旧主题 并设置新 |
|||
setAppTheme() { |
|||
let $body = $(document.body); |
|||
$body.removeClass(this.oldTheme); |
|||
$body.addClass(this.currentTheme); |
|||
this.oldTheme = this.currentTheme; |
|||
computed: { |
|||
isHome() { |
|||
return this.$route.path == "/home"; |
|||
}, |
|||
...mapState({ |
|||
theme: "theme", |
|||
appConfig: "appConfig" |
|||
}), |
|||
|
|||
currentTheme() { |
|||
let current = this.$route.name; |
|||
// 需要切换主题的页面 |
|||
let paths = ["option", "exchange", "contract"]; |
|||
if (paths.includes(current)) { |
|||
return this.theme + "-app"; |
|||
} else { |
|||
return ""; |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
methods: { |
|||
...mapActions({ |
|||
setAppConfig: "setAppConfig" |
|||
}), |
|||
}, |
|||
// 获取应用配置 |
|||
getLogo() { |
|||
Member.getLogo().then(res => { |
|||
// console.info(res) |
|||
this.setAppConfig(res); |
|||
this.setConfig(); |
|||
}); |
|||
created() { |
|||
// this.getLogo(); |
|||
}, |
|||
// 设置应用配置 |
|||
setConfig() { |
|||
document.getElementById("appTitle").innerText = this.appConfig.name; |
|||
document.getElementById("appIcon").href = this.appConfig.titles_logo; |
|||
mounted() { |
|||
// |
|||
} |
|||
}, |
|||
created() { |
|||
this.getLogo(); |
|||
}, |
|||
mounted() { |
|||
this.setAppTheme(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import './assets/scss/base/_base.scss'; |
|||
@import './assets/scss/module/_module.scss'; |
|||
|
|||
.home-bg { |
|||
// background: #172636 !important; |
|||
background: #fefff2 !important; |
|||
border: none !important; |
|||
// height: 100px; |
|||
.nav-link { |
|||
// color: #fff; |
|||
color:#172636; |
|||
@include fs(14); |
|||
} |
|||
// background: #172636 !important; |
|||
background: #fefff2 !important; |
|||
border: none !important; |
|||
|
|||
// height: 100px; |
|||
.nav-link { |
|||
// color: #fff; |
|||
color: #172636; |
|||
@include fs(14); |
|||
} |
|||
|
|||
.profile-nav { |
|||
a { |
|||
color: #18214d !important; |
|||
.profile-nav { |
|||
a { |
|||
color: #18214d !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -1,632 +1,214 @@ |
|||
<template> |
|||
<!-- colto-section --> |
|||
<footer class="footer" @click="toggleMenu($event,2)"> |
|||
<!-- colto-section --> |
|||
<footer class="footer" @click="toggleMenu($event,2)"> |
|||
<div class="content"> |
|||
<div class="footer-upper-section"> |
|||
<!-- logo --> |
|||
<div class="footer-upper-section-top"> |
|||
<div class="footer-logo"> |
|||
<div style="width: 89px; height: 44px"> |
|||
<img |
|||
:src="appConfig.head_logo" |
|||
alt="logo" |
|||
style="width: 200px; height: 100%;max-width: 200px; object-fit: contain;" |
|||
/> |
|||
</div> |
|||
<div style="color: #5B5B5B;font-size: 16px;margin-top: 10px;">{{ appConfig.copyright }}</div> |
|||
</div> |
|||
<div class="footer-upper-section"> |
|||
dfdf |
|||
</div> |
|||
|
|||
<div class="footer-upper-section-lang"> |
|||
<!-- <button class="navbar-toggler lang_now" type="button" |
|||
data-toggle="collapse" data-target="#lang_menu" |
|||
aria-controls="lang_menu" aria-expanded="false" aria-label="Toggle navigation">{{ nativeLang }} |
|||
</button> --> |
|||
<button class="lang_now" @click="toggleMenu">{{ nativeLang }}</button> |
|||
<div class="lang_menu" id="lang_menu" :class="showMenu?'show':'hide'"> |
|||
<div class="item" v-for="(item, index) in langList" :key="index" @click.prevent="chooseNative(item.value)"> |
|||
{{ item.label }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="footer-upper-section-list"> |
|||
<!-- service --> |
|||
<div class="service" v-if="service.length>0"> |
|||
<div class="item" style="width: 100%;text-align: left"> |
|||
<p class="item_p" style="font-size: 20px;color: #000;"> |
|||
{{ $t("common.service") }} |
|||
</p> |
|||
<p class="foot_p" v-for="(item,index) in service" :key="index" v-if="item.label !== null"> |
|||
<span class="serviceText" @click="Jump(item.url)">{{item.label}}</span> |
|||
</p> |
|||
<!-- <p class="foot_p" > |
|||
<span class="serviceText" @click="Jump(service[0].url)">{{service[0].label}}</span> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<span class="serviceText" @click="Jump(service[1].url)">{{service[1].label}}</span> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<span class="serviceText" @click="Jump(service[2].url)">{{service[2].label}}</span> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<span class="serviceText" @click="Jump(service[3].url)">{{service[3].label}}</span> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<span class="serviceText" @click="Jump(service[4].url)">{{service[4].label}}</span> |
|||
</p> --> |
|||
|
|||
|
|||
<!-- <router-link :to="service[0].url">{{ |
|||
service[0].label |
|||
}}</router-link> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<router-link :to="service[1].url">{{ |
|||
service[1].label |
|||
}}</router-link> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<router-link :to="service[2].url">{{ |
|||
service[2].label |
|||
}}</router-link> |
|||
<router-link :to="service[3].url">{{ service[3].label }}</router-link> |
|||
</p> --> |
|||
<!-- <p class="foot_p" > |
|||
<router-link :to="service[3].url">{{ |
|||
service[3].label |
|||
}}</router-link> |
|||
</p> --> |
|||
</div> |
|||
</div> |
|||
<!-- college --> |
|||
<div class="college" style="margin:0 119px;" v-if="college.length>0"> |
|||
<div class="item item1" style="width: 100%;text-align: left"> |
|||
<p class="item_p" style="font-size: 20px;color: #000;"> |
|||
{{ $t("common.college") }} |
|||
</p> |
|||
<p class="foot_p" v-for="(item,index) in college" :key="index"> |
|||
<span class="serviceText" @click="Jump(item.url)">{{item.label}}</span> |
|||
</p> |
|||
<!-- <p class="foot_p"> |
|||
<span class="serviceText" @click="Jump(college[0].url)">{{college[0].label}}</span> |
|||
</p> |
|||
<p class="foot_p"> |
|||
<span class="serviceText" @click="Jump(college[1].url)">{{college[1].label}}</span> |
|||
</p> |
|||
<p class="foot_p"> |
|||
<span class="serviceText" @click="Jump(college[2].url)">{{college[2].label}}</span> |
|||
</p> |
|||
<p class="foot_p"> |
|||
<span class="serviceText" @click="Jump(college[3].url)">{{college[3].label}}</span> |
|||
</p> --> |
|||
|
|||
<!-- <p class="foot_p" > |
|||
<router-link :to="college[0].url">{{ |
|||
college[0].label |
|||
}}</router-link> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<router-link :to="college[1].url">{{ |
|||
college[1].label |
|||
}}</router-link> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<router-link :to="college[2].url">{{ |
|||
college[2].label |
|||
}}</router-link> |
|||
</p> |
|||
<p class="foot_p" > |
|||
<router-link :to="college[3].url">{{ |
|||
college[3].label |
|||
}}</router-link> |
|||
</p> --> |
|||
</div> |
|||
</div> |
|||
<!-- email --> |
|||
<div class="item"> |
|||
<p |
|||
class="item_p" |
|||
style="text-align: left; font-size: 20px; color: #000" |
|||
> |
|||
{{ $t("common.contactUs") }} |
|||
</p> |
|||
<p class="foot_p" style="font-size: 14px;color: #797979;"> |
|||
{{ $t("common.email") }}: |
|||
</p> |
|||
<p class="foot_p" style="font-size: 14px;color: #797979;"> |
|||
{{ email }} |
|||
</p> |
|||
</div> |
|||
|
|||
<!-- <div class="logo"> --> |
|||
<!-- <img src="../assets/img/logo1.png" alt="logo" style="width:208px;height:68px" /> --> |
|||
<!-- <div style="width: 90px; height: 91px"> |
|||
<img |
|||
:src="appConfig.head_logo" |
|||
alt="logo" |
|||
style="width: 100%; height: 100%; object-fit: contain" |
|||
/> |
|||
</div> --> |
|||
<!-- <span>{{$t('common.footerTips1')}}</span> --> |
|||
<!-- </div> --> |
|||
<!-- <span>{{ $t('common.footerTips1') }}</span> --> |
|||
<!-- <p class="foot_p">{{ $t('common.footerTips2', {name: appConfig.name}) }}</p> --> |
|||
<!-- <p class="foot_p">{{$t('appConfig.name')}}</p> --> |
|||
<!-- <p class="foot_p">{{ $t('common.footerTips3') }}</p> --> |
|||
</div> |
|||
|
|||
<!-- email --> |
|||
<!-- <div class="item" style="width:30%;margin-top: 74px;"> |
|||
<p class="item_p" style="text-align: start; font-size:16px;">{{ $t("common.contactUs") }}</p> |
|||
<p class="foot_p" style="text-align: start; font-size:16px;"> |
|||
{{ $t("common.email") }}:{{ email }} |
|||
</p> |
|||
<div class="icon_foot"> |
|||
<img src="../assets/img/chat.png"> |
|||
<div class="icon_img" v-for="(item,index) in list" :key="item"> |
|||
<img :src="item.src"/> |
|||
</div> |
|||
</div> |
|||
<p class="foot_p" style="width:100%"> |
|||
{{email}} |
|||
</p> |
|||
</div> --> |
|||
<!-- <div class="container"> |
|||
<div class="row"> --> |
|||
<!-- <div class="col-lg-2 col-md-3 mb-4"> |
|||
<div class="footer-logo"> |
|||
<a href="#"> |
|||
<img :src="logo.imgurl" alt="img" class="img-responsive" /> |
|||
<img :src="appConfig.foot_logo" alt="logo" /> |
|||
</a> |
|||
</div> |
|||
</div> --> |
|||
<!-- 服务列表 --> |
|||
<!-- <div class="col-lg-1 col-md-3 mb-4"> |
|||
<div class="footer-info-list"> |
|||
<h4>{{ $t("common.service") }}</h4> |
|||
<ul> |
|||
<li v-for="(item, index) in service" :key="index"> |
|||
<router-link :to="item.url">{{ item.label }}</router-link> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> --> |
|||
<!-- 学院列表 --> |
|||
<!-- <div class="col-lg-1 col-md-3 mb-4"> |
|||
<div class="footer-info-list"> |
|||
<h4>{{ $t("common.college") }}</h4> |
|||
<ul> |
|||
<li v-for="item in college" :key="item.id"> |
|||
<router-link :to="item.url">{{ item.label}}</router-link> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> --> |
|||
<!-- 联系我们 --> |
|||
<!-- <div class="col-lg-2 col-md-6"> |
|||
<div class="footer-info-list"> |
|||
<h4>{{$t('common.contactUs')}}</h4> |
|||
<ul class="contact-info"> |
|||
<li> |
|||
{{ $t("common.email") }}: |
|||
<span>{{email}}</span> |
|||
</li> |
|||
<li> |
|||
Phone: <span>{{contactinfo.mobile}}</span> |
|||
</li> |
|||
</ul> |
|||
<ul class="social-style-two"> |
|||
<li> |
|||
<a href="#"> |
|||
<i class="fab fa-facebook-f"></i> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="#"> |
|||
<i class="fab fa-twitter"></i> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="#"> |
|||
<i class="fab fa-google-plus-g"></i> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="#"> |
|||
<i class="fab fa-github"></i> |
|||
</a> |
|||
</li> |
|||
<li> |
|||
<a href="#"> |
|||
<i class="fab fa-linkedin-in"></i> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> --> |
|||
<!-- <div class="col-lg-4 col-md-6 border-left"> |
|||
<div class="pl-2 "> |
|||
<div class="mb-2"> |
|||
{{$t('common.footerTips1')}} |
|||
</div> |
|||
<div class="mb-2"> {{$t('common.footerTips2',{name:appConfig.name})}}</div> |
|||
<div class="mb-2">{{$t('common.footerTips3')}}</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- </div> --> |
|||
<!-- </div> --> |
|||
</div> |
|||
<div class="footer-right"> |
|||
<div style="font-size: 20px;">{{ $t("homeNewText.hh44",{name:"Sbdccoin"}) }}</div> |
|||
<router-link class="jump_btn" to="/sign-up" v-if="!isLogin">{{ $t("homeNewText.hh48") }}</router-link> |
|||
<router-link class="jump_btn" to="/exchange" v-else>{{ $t("homeNewText.hh45") }}</router-link> |
|||
<img src="@/assets/img/home/sbdc.png" alt="" style="width: 120px;height: 120px;background-color: #ccc;"> |
|||
<div style="font-size: 16px; color: #9C9C9C;margin-top: 12px;text-align: center;">{{ $t("homeNewText.hh46",{name:"Sbdccoin"}) }}</div> |
|||
</div> |
|||
</div> |
|||
</footer> |
|||
|
|||
</footer> |
|||
</template> |
|||
<script> |
|||
import College from "@/api/college"; |
|||
import ContactUs from "@/api/contactUs"; |
|||
import { mapState } from "vuex"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
service: [], |
|||
college: [], |
|||
email: "", |
|||
list: [ |
|||
{ src: "https://www.rsncoin.com/static/flag/discord.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/telegram.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/tiktok.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/twitter.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/reddit.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/ins.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/cap.jpg" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/vk.png" }, |
|||
{ src: "https://www.rsncoin.com/static/flag/youtube.jpg" }, |
|||
], |
|||
langList: [ |
|||
// { |
|||
// value: "cn", // zh-CN |
|||
// label: "简体中文" |
|||
// }, |
|||
{ |
|||
value: "en", |
|||
label: "English", |
|||
url: require("../assets/img/flag/en.jpg"), |
|||
}, |
|||
{ |
|||
value: "kor", |
|||
label: "한국어", |
|||
url: require("../assets/img/flag/kor.jpg"), |
|||
}, |
|||
{ |
|||
value: 'de', |
|||
label: 'Deutsch', |
|||
url: require("../assets/img/flag/de.jpg"), |
|||
}, |
|||
{ |
|||
value: 'fra', |
|||
label: 'Français', |
|||
url: require("../assets/img/flag/fra.jpg"), |
|||
}, |
|||
{ |
|||
value: 'spa', |
|||
label: 'Español', |
|||
url: require("../assets/img/flag/spa.jpg"), |
|||
}, |
|||
{ |
|||
value: 'it', |
|||
label: 'Italiano', |
|||
url: require("../assets/img/flag/it.jpg"), |
|||
}, |
|||
// { |
|||
// value: 'ukr', |
|||
// label: 'УкраїнськаName' |
|||
// }, |
|||
// { |
|||
// value: 'swe', |
|||
// label: 'Svenska' |
|||
// }, |
|||
// { |
|||
// value: 'fin', |
|||
// label: 'Suomi' |
|||
// }, |
|||
{ |
|||
value: "jp", |
|||
label: "日本語", |
|||
url: require("../assets/img/flag/jp.jpg"), |
|||
}, |
|||
// { |
|||
// value: 'pl', |
|||
// label: 'Polski' |
|||
// }, |
|||
{ |
|||
value: 'pt', |
|||
label: 'Português', |
|||
url: require("../assets/img/flag/pt.jpg"), |
|||
}, |
|||
{ |
|||
value: 'tr', |
|||
label: 'Turkey', |
|||
url: require("../assets/img/flag/tr.jpg"), |
|||
}, |
|||
{ |
|||
value: "tw", // zh-TW |
|||
label: "繁体中文", |
|||
url: require("../assets/img/flag/tr.jpg") |
|||
} |
|||
], |
|||
showMenu: false |
|||
}; |
|||
}, |
|||
computed: { |
|||
isLogin() { |
|||
return Boolean(localStorage.token); |
|||
}, |
|||
...mapState({ |
|||
appConfig: "appConfig", |
|||
}), |
|||
// 当前语言 |
|||
nativeLang() { |
|||
let UALang; |
|||
// 检测中文简体和翻译 |
|||
// if (navigator.language.startsWith("zh")) { |
|||
// UALang = _.trimStart(navigator.language, "zh-").toLowerCase(); |
|||
// } else { |
|||
UALang = "en"; // 其余英文 |
|||
// } |
|||
|
|||
let lang = localStorage.lang || UALang; |
|||
this.langer = require("../assets/img/flag/" + lang + ".jpg"); |
|||
return this.langList.find(item => item.value == lang).label; |
|||
}, |
|||
}, |
|||
methods: { |
|||
Jump(vle){ |
|||
this.$router.push(vle); |
|||
}, |
|||
toggleMenu(e, type){ |
|||
e.stopPropagation(); |
|||
if(type===2){ |
|||
this.showMenu = false; |
|||
}else{ |
|||
this.showMenu = !this.showMenu; |
|||
} |
|||
}, |
|||
chooseNative(native) { |
|||
// 设置语言 |
|||
localStorage.setItem("lang", native); |
|||
// 刷新页面 |
|||
this.$router.go(0); |
|||
}, |
|||
getCollegeLinks() { |
|||
College.getCategoryList() |
|||
.then((list) => { |
|||
list.forEach((item) => { |
|||
this.college.push({ |
|||
url: `/college/list/${item.id}`, |
|||
label: item.name, |
|||
}); |
|||
}); |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
getServiceLink() { |
|||
College.getServiceList() |
|||
.then((list) => { |
|||
// console.log(list); |
|||
list.forEach((item) => { |
|||
this.service.push({ |
|||
url: `/service/${item.id}`, |
|||
label: item.name, |
|||
}); |
|||
}); |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
getEmial() { |
|||
ContactUs.contact() |
|||
.then((data) => { |
|||
this.email = data.contact; |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getCollegeLinks(); |
|||
this.getServiceLink(); |
|||
// console.log(this.service); |
|||
this.getEmial(); |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
|
|||
<style lang="scss" scoped> |
|||
.footer { |
|||
background-color: #f9f9f9; |
|||
border-top: none; |
|||
color: #000; |
|||
|
|||
.content{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 1200px; |
|||
height: 560px; |
|||
margin: 0px auto; |
|||
} |
|||
.footer-upper-section { |
|||
padding: 0px; |
|||
|
|||
.footer-upper-section-lang{ |
|||
width: 182px;height: 49px; |
|||
border-radius: 11px; |
|||
border: 1px solid #808080; |
|||
font-size: 16px; |
|||
margin: 37px 0px 31px; |
|||
position: relative; |
|||
|
|||
.lang_now{ |
|||
display: block; |
|||
text-align: center; |
|||
width: 100%; |
|||
line-height: 45px; |
|||
color: #000; |
|||
background-color: transparent; |
|||
outline: none; |
|||
border: none; |
|||
position: relative; |
|||
|
|||
&::before{ |
|||
content: ''; |
|||
position: absolute; |
|||
width: 24px; |
|||
height: 24px; |
|||
background-image: url("../assets/img/home/global_grey.png"); |
|||
background-size: 100%; |
|||
left: 24px; |
|||
top: 12px; |
|||
} |
|||
|
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
width: 8px; |
|||
height: 8px; |
|||
border-top: 1px solid transparent; |
|||
border-left: 1px solid #999; |
|||
border-right: 1px solid transparent; |
|||
border-bottom: 1px solid #999; |
|||
transform: rotate(-45deg); |
|||
right: 30px; |
|||
top: 18px; |
|||
} |
|||
} |
|||
.lang_menu{ |
|||
position: absolute; |
|||
width: 182px; |
|||
height: 220px; |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
overflow: scroll; |
|||
color: #101010; |
|||
|
|||
&::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;} |
|||
&::-webkit-scrollbar-track { background-color: transparent;} |
|||
&::-webkit-scrollbar-thumb { background-color: transparent;} |
|||
|
|||
.item{ |
|||
padding: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
} |
|||
.item:hover{ |
|||
background-color: #f8f9fa; |
|||
} |
|||
|
|||
&.show{ |
|||
display: block; |
|||
} |
|||
&.hide{ |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.footer-upper-section-list { |
|||
background-color: #f9f9f9; |
|||
border-top: none; |
|||
color: #000; |
|||
|
|||
.content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.footer-upper-section-top { |
|||
.footer-logo { |
|||
|
|||
align-items: center; |
|||
width: 1200px; |
|||
height: 560px; |
|||
margin: 0px auto; |
|||
} |
|||
|
|||
.footer-upper-section { |
|||
padding: 0px; |
|||
|
|||
.footer-upper-section-lang { |
|||
width: 182px; |
|||
height: 49px; |
|||
border-radius: 11px; |
|||
border: 1px solid #808080; |
|||
font-size: 16px; |
|||
margin: 37px 0px 31px; |
|||
position: relative; |
|||
|
|||
.lang_now { |
|||
display: block; |
|||
text-align: center; |
|||
width: 100%; |
|||
line-height: 45px; |
|||
color: #000; |
|||
background-color: transparent; |
|||
outline: none; |
|||
border: none; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 24px; |
|||
height: 24px; |
|||
background-image: url("../assets/img/home/global_grey.png"); |
|||
background-size: 100%; |
|||
left: 24px; |
|||
top: 12px; |
|||
} |
|||
|
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 8px; |
|||
height: 8px; |
|||
border-top: 1px solid transparent; |
|||
border-left: 1px solid #999; |
|||
border-right: 1px solid transparent; |
|||
border-bottom: 1px solid #999; |
|||
transform: rotate(-45deg); |
|||
right: 30px; |
|||
top: 18px; |
|||
} |
|||
} |
|||
|
|||
.lang_menu { |
|||
position: absolute; |
|||
width: 182px; |
|||
height: 220px; |
|||
background-color: #fff; |
|||
border-radius: 10px; |
|||
overflow: scroll; |
|||
color: #101010; |
|||
|
|||
&::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-track { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
&::-webkit-scrollbar-thumb { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
.item { |
|||
padding: 10px; |
|||
cursor: pointer; |
|||
text-align: center; |
|||
} |
|||
|
|||
.item:hover { |
|||
background-color: #f8f9fa; |
|||
} |
|||
|
|||
&.show { |
|||
display: block; |
|||
} |
|||
|
|||
&.hide { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.item_left { |
|||
width: 454px; |
|||
// margin-right: 300px; |
|||
.logo { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #172636; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
font-size: 16px; |
|||
|
|||
.footer-upper-section-list { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.footer-upper-section-top { |
|||
.footer-logo {} |
|||
} |
|||
|
|||
.footer-right{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
.jump_btn{ |
|||
display: inline-block; |
|||
min-width: 200px; |
|||
height: 56px; |
|||
line-height: 56px; |
|||
text-align: center; |
|||
color: #fff; |
|||
background-color: #1D1D1D; |
|||
border-radius: 50px; |
|||
font-size: 20px; |
|||
padding: 0px 20px; |
|||
box-sizing: border-box; |
|||
margin: 46px 0px 42px; |
|||
.item_left { |
|||
width: 454px; |
|||
|
|||
// margin-right: 300px; |
|||
.logo { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #172636; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.footer-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
.jump_btn { |
|||
display: inline-block; |
|||
min-width: 200px; |
|||
height: 56px; |
|||
line-height: 56px; |
|||
text-align: center; |
|||
color: #fff; |
|||
background-color: #1D1D1D; |
|||
border-radius: 50px; |
|||
font-size: 20px; |
|||
padding: 0px 20px; |
|||
box-sizing: border-box; |
|||
margin: 46px 0px 42px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.serviceText{ |
|||
color: #797979; |
|||
text-decoration: none; |
|||
display: inline-block; |
|||
-webkit-transition: .4s ease-in; |
|||
transition: .4s ease-in; |
|||
.serviceText { |
|||
color: #797979; |
|||
text-decoration: none; |
|||
display: inline-block; |
|||
-webkit-transition: .4s ease-in; |
|||
transition: .4s ease-in; |
|||
} |
|||
.serviceText:hover{ |
|||
color: #b5b5b5; |
|||
cursor: pointer; |
|||
|
|||
.serviceText:hover { |
|||
color: #b5b5b5; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.foot_p { |
|||
color: #b5b5b5; |
|||
font-size: 16px; |
|||
margin: 0; |
|||
|
|||
|
|||
// a:hover { |
|||
// color: #b5b5b5; |
|||
// } |
|||
|
|||
// a:visited { |
|||
// color: #b5b5b5; |
|||
// } |
|||
color: #b5b5b5; |
|||
font-size: 16px; |
|||
margin: 0; |
|||
|
|||
// a:hover { |
|||
// color: #b5b5b5; |
|||
// } |
|||
|
|||
// a:visited { |
|||
// color: #b5b5b5; |
|||
// } |
|||
} |
|||
|
|||
.icon_foot { |
|||
margin-top: 5px; |
|||
height: 130px; |
|||
width: 180px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.icon_img { |
|||
height: 30px; |
|||
width: 30px; |
|||
margin: 0px 5px; |
|||
|
|||
img { |
|||
height: 100%; |
|||
width: 100%; |
|||
border-radius: 50%; |
|||
margin-top: 5px; |
|||
height: 130px; |
|||
width: 180px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
.icon_img { |
|||
height: 30px; |
|||
width: 30px; |
|||
margin: 0px 5px; |
|||
|
|||
img { |
|||
height: 100%; |
|||
width: 100%; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||
@ -1,20 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
div{ |
|||
position: absolute; |
|||
background: #fff; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: 1000; |
|||
} |
|||
</style> |
|||
@ -1,25 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="container-fluid mtb15"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<!-- TradingView Widget BEGIN --> |
|||
<div class="tradingview-widget-container"> |
|||
<div class="tradingview-widget-container__widget"></div> |
|||
<iframe src="/static/Kline/heat-map.html" frameborder="0" width="100%" height="920"></iframe> |
|||
</div> |
|||
<!-- TradingView Widget END --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,334 +0,0 @@ |
|||
<template> |
|||
<div class="application-page"> |
|||
<div class="container"> |
|||
<div> |
|||
<div class="thead">{{$t('application.form')}}</div> |
|||
|
|||
<div class="form-group"> |
|||
<span>{{$t('application.sendUser')}}（{{$t('application.sendUserEn')}}）*</span> |
|||
<input v-model="form.send_user_en" type="text" required class="form-control" aria-describedby="emailHelp" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="exampleInputPassword1"></label> |
|||
<span>{{$t('application.sendUser')}}（{{$t('application.sendUserCn')}}）*</span> |
|||
<input type="text" required v-model="form.send_user_cn" class="form-control" id="exampleInputPassword1" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="exampleInputPassword2"></label> |
|||
<span>{{$t('application.contactPosition')}} *</span> |
|||
<input type="text" required v-model="form.contact_position" class="form-control" id="exampleInputPassword2" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.phone')}} *</span> |
|||
<input type="text" v-model="form.phone" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="exampleInputPassword4"></label> |
|||
<span>TOKEN{{$t('application.tokenPrice')}} *</span> |
|||
<input type="text" required v-model="form.token_price" class="form-control" id="exampleInputPassword4" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.email')}} *</span> |
|||
<input type="text" v-model="form.email" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.address')}} *</span> |
|||
<input type="text" v-model="form.address" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.mechanism')}}/{{$t('application.personal')}} *</span> |
|||
<input type="text" v-model="form.mechanism" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.currencyCode')}}（{{$t('application.symbol')}}） *</span> |
|||
<input type="text" v-model="form.coin_code" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group row"> |
|||
<div class="col-sm-3 col-form-label"> |
|||
<span class="font">{{$t('application.currencyIdentification')}} (22px *22px)</span> |
|||
<div class="font1">{{$t('application.format',{name:'JPG,PNG',num:'500M'})}}</div> |
|||
</div> |
|||
<div class="col-sm-9"> |
|||
<upload-img :allowSize="500" v-model="form.coin_icon" required placeholder="$t('application.currencyIdentification')" type="file" /> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span class="date">{{$t('application.fundraisingDate')}}*</span> |
|||
<input type="text" v-model="form.end_time" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.officialWebsite')}}*</span> |
|||
<input type="text" v-model="form.official_website" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.whitePaperLinks')}}（{{$t('application.noLink')}}）*</span> |
|||
<input type="text" v-model="form.white_paper_link" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.total_issue')}} *</span> |
|||
<input type="text" v-model="form.send_total" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.currencyCirculation')}} *</span> |
|||
<input type="text" v-model="form.circulation" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.currencyAllocationRatio')}} *</span> |
|||
<input type="text" v-model="form.ratio" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.numberOfCurrencyHolders')}} *</span> |
|||
<input type="text" v-model="form.holders" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.tradingPlatform')}} *</span> |
|||
<input type="text" v-model="form.online_platform" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.privatePlacement')}}/{{$t('application.publicOfferingPrice')}}（{{$t('application.company')}}）*</span> |
|||
<input type="text" v-model="form.price" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.coinType')}}（ETH,EOS,Tron,Qtum,Neo etc) *</span> |
|||
<input type="text" v-model="form.type" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.currencyIssueDate')}} *</span> |
|||
<input type="text" v-model="form.send_time" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
</span> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.blockBrowser')}} *</span> |
|||
<input type="text" v-model="form.browser" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.officialAddress')}} *</span> |
|||
<input type="text" v-model="form.official_wallet_address" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.officialAddress')}} *</span> |
|||
<input type="text" v-model="form.contract_address" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>Twitter{{$t('application.link')}}*</span> |
|||
<input type="text" v-model="form.twitter" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>Telegram{{$t('application.link')}}*</span> |
|||
<input type="text" v-model="form.telegram" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>Facebook{{$t('application.link')}}*</span> |
|||
<input type="text" v-model="form.facebook" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.budget')}}（BTC{{$t('application.unit')}}）*</span> |
|||
<input type="text" v-model="form.budget" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.ofTokens')}}*</span> |
|||
<input type="text" v-model="form.number_tokens" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.chineseCurrency')}} *</span> |
|||
<input type="text" v-model="form.cn_introduction" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.enCurrency')}} *</span> |
|||
<input type="text" v-model="form.en_introduction" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span>{{$t('application.remarks')}} *</span> |
|||
<input type="text" v-model="form.remarks" required class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="form-group row"> |
|||
<div for="staticEmail" class="col-sm-3 col-form-label"> |
|||
<div>{{$t('application.uploadWhitePaper')}}</div> |
|||
<div class="font1">{{$t('application.format',{name:'JPG,PNG',num:'500M'})}}</div> |
|||
</div> |
|||
<div class="col-sm-9"> |
|||
<upload-img :allowSize="500" v-model="form.upload_white_paper" required :placeholder="$t('application.pleaseUpload')" type="file" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group"> |
|||
<label></label> |
|||
<span class="font3">{{$t('application.recommendationCode')}}（{{$t('application.ifSo')}}）</span> |
|||
<input type="text" v-model="form.referrer" class="form-control" :placeholder="$t('application.pleaseEnter')" /> |
|||
</div> |
|||
|
|||
<div class="font2">{{$t('application.affirmsThat')}}</div> |
|||
<div class="form-group form-check"> |
|||
<div> |
|||
<input type="checkbox" v-model="check1" class="form-check-input" id="exampleCheck1" /> |
|||
<label class="form-check-label" for="exampleCheck1">{{$t('application.iKnow')}}</label> |
|||
</div> |
|||
<input type="checkbox" v-model="form.check2" class="form-check-input" id="exampleCheck2" /> |
|||
<label class="form-check-label" for="exampleCheck2">{{$t('application.reSubmit')}}</label> |
|||
</div> |
|||
<button :disabled="!check1" type="button" class="btn btn-primary btn-lg btn-block" @click="ifSubmit">{{$t('common.submit')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Subscride from "@/api/subscride"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
form: { |
|||
send_user_en: "", |
|||
send_user_cn: "", |
|||
contact_position: "", |
|||
phone: "", |
|||
token_price: "", |
|||
email: "", |
|||
address: "", |
|||
mechanism: "", |
|||
coin_code: "", |
|||
coin_icon: "", |
|||
end_time: "", |
|||
official_website: "", |
|||
white_paper_link: "", |
|||
send_total: "", |
|||
circulation: "", |
|||
ratio: "", |
|||
holders: "", |
|||
online_platform: "", |
|||
price: "", |
|||
type: "", |
|||
send_time: "", |
|||
browser: "", |
|||
official_wallet_address: "", |
|||
contract_address: "", |
|||
twitter: "", |
|||
telegram: "", |
|||
facebook: "", |
|||
budget: "", |
|||
number_tokens: "", |
|||
cn_introduction: "", |
|||
en_introduction: "", |
|||
remarks: "", |
|||
upload_white_paper: "", |
|||
referrer: "", |
|||
check2: false |
|||
}, |
|||
check1: false |
|||
}; |
|||
}, |
|||
methods: { |
|||
ifSubmit() { |
|||
if (!utils.validate(".application-page")) return; |
|||
if (!this.check1) { |
|||
this.$message.warning(this.$t("application.pleaseConfirm")); |
|||
return; |
|||
} |
|||
let data = this.form; |
|||
Subscride.subscribe(data) |
|||
.then(res => { |
|||
this.form = this.$options.data(); |
|||
this.$message.success(this.$t("application.upLoadSuccess")); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.application-page { |
|||
background-color: #f8f9fa; |
|||
padding: 20px; |
|||
margin-bottom: -48px; |
|||
|
|||
.container { |
|||
padding: 14px; |
|||
background: #fff; |
|||
border-radius: 14px; |
|||
} |
|||
} |
|||
|
|||
.thead { |
|||
font-size: 30px; |
|||
font-weight: strong; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.box1 { |
|||
width: 100px; |
|||
height: 100px; |
|||
background: lightgray; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
align-content: center; |
|||
margin-left: 220px; |
|||
} |
|||
|
|||
.font1 { |
|||
font-size: 10px; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.font2 { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.box1 { |
|||
width: 100px; |
|||
height: 100px; |
|||
background: lightgray; |
|||
} |
|||
|
|||
.btn .btn-outline-primary { |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
|
|||
.date { |
|||
margin-top: 30px; |
|||
} |
|||
</style> |
|||
@ -1,69 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 my-4" v-if="article"> |
|||
<div class="title h2 mt-4">{{article.title}}</div> |
|||
<div class="single-subtitle d-flex justify-content-between border-bottom pb-2"> |
|||
<!-- <div class="text-muted">{{article.created_at}}</div> --> |
|||
</div> |
|||
<div class="edit-content py-4"> |
|||
<div v-html="article.body"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
cid: this.$route.params.cid, |
|||
aid: this.$route.params.aid, |
|||
article: null, |
|||
recommend: null, |
|||
} |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.cid = this.$route.params.cid; |
|||
this.aid = this.$route.params.aid; |
|||
this.initPage(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
initPage() { |
|||
this.getArticleDetail(); |
|||
this.getRecommend(); |
|||
}, |
|||
getArticleDetail() { |
|||
// console.log(this.aid,'11111'); |
|||
College.getArticleDetail(this.aid).then(data => { |
|||
this.article = data; |
|||
}).catch(err => {}); |
|||
}, |
|||
getRecommend() { |
|||
College.getRecommend().then(data => { |
|||
this.recommend = data; |
|||
}).catch(err => {}) |
|||
} |
|||
}, |
|||
created() { |
|||
this.initPage(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep { |
|||
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{ |
|||
color: #606266; |
|||
} |
|||
.el-breadcrumb__item:last-child .el-breadcrumb__inner{ |
|||
color: white; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,90 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 my-4" v-if="article"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<!-- <el-breadcrumb-item :to="{ path: '/college' }">{{$t('college.college')}}</el-breadcrumb-item> --> |
|||
<el-breadcrumb-item :to="{ path: '/college/list/18' }">{{$t('college.college')}}</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{ path: `/college/list/${cid}`}">{{article.category_name}}</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{path:`/college/detail/${cid}/${aid}`}">{{$t('college.article')}}</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<div class="title h2 mt-4">{{article.title}}</div> |
|||
<div class="single-subtitle d-flex justify-content-between border-bottom pb-2"> |
|||
<!-- <div class="text-muted">{{article.created_at}}</div> --> |
|||
</div> |
|||
<div class="edit-content py-4"> |
|||
<div v-html="article.body"></div> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4">{{$t('college.recommendedCourse')}}</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(item,index) in recommend" :key="index"> |
|||
<router-link :to="`/college/detail/${item.category_id}/${item.id}`"> |
|||
<div class="banner"> |
|||
<!-- <img src="http://iph.href.lu/260x150" alt /> --> |
|||
<img :src="item.full_cover" alt /> |
|||
</div> |
|||
<div class="txt">{{item.title}}</div> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
cid: this.$route.params.cid, |
|||
aid: this.$route.params.aid, |
|||
article: null, |
|||
recommend: null, |
|||
} |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.cid = this.$route.params.cid; |
|||
this.aid = this.$route.params.aid; |
|||
this.initPage(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
initPage() { |
|||
this.getArticleDetail(); |
|||
this.getRecommend(); |
|||
}, |
|||
getArticleDetail() { |
|||
College.getArticleDetail(this.aid).then(data => { |
|||
this.article = data; |
|||
}).catch(err => {}); |
|||
}, |
|||
getRecommend() { |
|||
College.getRecommend().then(data => { |
|||
this.recommend = data; |
|||
}).catch(err => {}) |
|||
} |
|||
}, |
|||
created() { |
|||
this.initPage(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep { |
|||
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{ |
|||
color: #606266; |
|||
} |
|||
.el-breadcrumb__item:last-child .el-breadcrumb__inner{ |
|||
color: white; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,151 +0,0 @@ |
|||
<template> |
|||
<div class="course-page"> |
|||
<!-- <div class="banner"> |
|||
<div class="container pt-3"> |
|||
<div class="row py-5"> |
|||
<div class="col-5 left"> |
|||
<div class="title h3 text-light">{{$t('college.buy')}}</div> |
|||
<div> |
|||
<ul class="list"> |
|||
<li class="d-flex align-items-start my-3"> |
|||
<div class="num text-light">1</div> |
|||
<div> |
|||
<div class="label h5">{{$t('college.register')}} AMATAK</div> |
|||
<div class="txt">{{$t('college.visit',{name:'AMATAK'})}}</div> |
|||
</div> |
|||
</li> |
|||
<li class="d-flex align-items-start my-3"> |
|||
<div class="num text-light">2</div> |
|||
<div> |
|||
<div class="label h5">{{$t('college.realName')}}</div> |
|||
<div class="txt">{{$t('college.upload')}}</div> |
|||
</div> |
|||
</li> |
|||
<li class="d-flex align-items-start my-3"> |
|||
<div class="num text-light">3</div> |
|||
<div> |
|||
<div class="label h5">{{$t('college.oneClick')}}</div> |
|||
<div class="txt">{{$t('college.inAssets')}}</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
<router-link tag="button" to="/exchange" class="btn btn-primary">{{$t('college.tradeNow')}}</router-link> |
|||
</div> |
|||
</div> |
|||
<div class="col-7 right" v-if="video"> |
|||
<video class="video" preload controls :src="video.url" :poster="`https://guanli.coin.amatak.net/storage/` + video.poster"></video> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="banner-tab"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 d-flex"> |
|||
<div class="w-25 item active" v-for="(banner, index) in bannerList" :key="index" @click="view(banner)"> |
|||
<div class="icon fn-22"> |
|||
<i class="default el-icon-refresh"></i> |
|||
<i class="iconshow el-icon-coin"></i> |
|||
</div> |
|||
<div class="txt">{{ banner.name }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- 列表 --> |
|||
<div class="container course-list"> |
|||
<div class="row mt-3" v-for="(item, index) in categoryList" :key="index"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4 d-flex justify-content-between"> |
|||
<span> |
|||
{{ item.name }} |
|||
</span> |
|||
<router-link :to="`/college/list/${item.id}`" class="fn-14"> |
|||
{{$t('college.seeMore')}}>> |
|||
</router-link> |
|||
</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(article, index) in item.article" :key="index"> |
|||
<router-link :to="`/college/detail/${item.id}/${article.id}`"> |
|||
<div class="banner"> |
|||
<img :src="article.full_cover" alt /> |
|||
</div> |
|||
<div class="txt"> |
|||
{{article.title}} |
|||
</div> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- lattest-news-section --> |
|||
<div class="colto-section"> |
|||
<div class="container"> |
|||
<div class="colto-content-wrap d-flex flex-column align-items-center justify-content-center"> |
|||
<div class="colto-content"> |
|||
<div class="title">{{ $t("common.start-trade") }}</div> |
|||
</div> |
|||
<div class="colto-btn-group" v-if="!isLogin"> |
|||
<router-link tag="button" to="/sign-in" class="btn btn-success rounded-pill callto-btn">{{$t('common.login')}}</router-link> |
|||
<span>or</span> |
|||
<router-link tag="button" to="/sign-up" class="btn btn-primary rounded-pill callto-btn">{{$t('common.register')}}</router-link> |
|||
</div> |
|||
<div v-else class="colto-btn-group"> |
|||
<router-link tag="button" to="/exchange" class="btn btn-primary rounded-pill callto-btn">{{$t('common.trading')}}</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// 当前播放的视频 |
|||
video: null, |
|||
categoryList: [], |
|||
bannerList: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
isLogin() { |
|||
return Boolean(localStorage.token); |
|||
}, |
|||
}, |
|||
methods: { |
|||
view(banner) { |
|||
this.video.url = banner.url; |
|||
this.video.poster = banner.poster; |
|||
}, |
|||
|
|||
initPage() { |
|||
College.college().then(response => { |
|||
({ |
|||
categoryList: this.categoryList, |
|||
bannerList: this.bannerList |
|||
} = response); |
|||
|
|||
this.video = this.bannerList[0]; |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
getVideo() { |
|||
|
|||
} |
|||
}, |
|||
created() { |
|||
this.initPage(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -1,76 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav /> |
|||
<!-- 列表 --> |
|||
<div class="container course-list"> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4">{{title}}</div> |
|||
<div class="row justify-content-between"> |
|||
<router-link :to="`/college/detail/${cid}/${item.id}`" class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(item,index) in articleList" :key="index"> |
|||
<div class="banner"> |
|||
<!-- <img src="http://iph.href.lu/260x150" alt /> --> |
|||
<img :src="item.full_cover" style="width: 255px;height: 142px;" /> |
|||
</div> |
|||
<div class="txt" style="margin-top: 10px;font-size: 18px;"> |
|||
{{item.title}} |
|||
</div> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
cid: this.$route.params.cid, |
|||
articleList: [], |
|||
} |
|||
}, |
|||
computed: { |
|||
title() { |
|||
let key = this.cid; |
|||
switch (key) { |
|||
case 'novice': |
|||
return this.$t('college.noviceTutorial') |
|||
case 'strategy': |
|||
return this.$t('college.TradingStrategy') |
|||
case 'research': |
|||
return this.$t('college.industryResearch') |
|||
case 'dictionary': |
|||
return this.$t('college.dictionary') |
|||
case 'report': |
|||
return this.$t('college.media') |
|||
case 'OkChain': |
|||
return 'OkChain' |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
getArticleList() { |
|||
College.getArticleList(this.cid).then(data => { |
|||
this.articleList = data; |
|||
|
|||
}).catch(); |
|||
} |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.cid = this.$route.params.cid; |
|||
this.getArticleList(); |
|||
} |
|||
}, |
|||
created() { |
|||
this.getArticleList(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,405 +0,0 @@ |
|||
<template> |
|||
<div class="panel-box mb15 bg-panel"> |
|||
<div class="heading d-flex justify-content-between align-items-center"> |
|||
<div class="h6">{{ $t("wallet.inside") }}</div> |
|||
<div v-if="showHistoryLink"> |
|||
<i class="ion ion-md-time h5"></i> |
|||
<router-link to="/wallet/transfer"> |
|||
{{ $t("wallet.history") }} |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
<div class="tab-content"> |
|||
<form class="transfer-body"> |
|||
<div class="form-row"> |
|||
<div class="form-group col-5"> |
|||
<label for="fromCoin">{{ $t("wallet.from") }}</label> |
|||
<div> |
|||
<el-cascader |
|||
v-model="fromValue" |
|||
value="1" |
|||
@change="fromChange" |
|||
ref="from" |
|||
v-if="isAccountMap" |
|||
:props="fromProps" |
|||
></el-cascader> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="col-2 d-flex justify-content-center align-items-center" |
|||
@click="swap" |
|||
> |
|||
<i class="ion ion-ios-swap h3 mt-3 hover"></i> |
|||
</div> |
|||
<div class="form-group col-5"> |
|||
<label for="toCoin">{{ $t("wallet.to") }}</label> |
|||
<div> |
|||
<el-cascader |
|||
v-model="toValue" |
|||
ref="to" |
|||
v-if="isAccountMap" |
|||
@change="toChange" |
|||
:props="toProps" |
|||
></el-cascader> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="asstes">{{ $t("wallet.assets") }}</label> |
|||
<div> |
|||
<el-select |
|||
v-model="form.coin_name" |
|||
:placeholder="$t('wallet.pleaseSelect')" |
|||
> |
|||
<el-option |
|||
v-for="(item, index) in coinList" |
|||
:key="index" |
|||
:label="item.coin_name" |
|||
:value="item.coin_name" |
|||
> |
|||
<img :src="item.image" alt width="20" /> |
|||
<span>{{ item.coin_name }}</span> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="d-flex justify-content-between"> |
|||
<span>{{ $t("wallet.transferQuantity") }}</span> |
|||
<span @click="form.amount = activeCoin.usable_balance"> |
|||
<input |
|||
type="checkbox" |
|||
id="allAvalible" |
|||
:checked="form.amount >= activeCoin.usable_balance" |
|||
class="form-check-input" |
|||
/> |
|||
<label for="allAvalible">{{ $t("wallet.all") }}</label> |
|||
</span> |
|||
</label> |
|||
<div class="input-group"> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
v-model="form.amount" |
|||
step="0.000001" |
|||
min="0" |
|||
:placeholder="$t('wallet.strokes')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text fn-12"> |
|||
{{ $t("wallet.balance") }}： |
|||
<span class="fn-14">{{ |
|||
activeCoin.usable_balance | omitTo(4) |
|||
}}</span> |
|||
{{ form.coin_name }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<button class="btn btn-primary rounded-pill" @click.prevent="fundsTransfer"> |
|||
{{ $t("wallet.confirm") }} |
|||
</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
import lodash from "lodash"; |
|||
export default { |
|||
props: { |
|||
coinName: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
showHistoryLink: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
isRestCoin: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 交易账户的id |
|||
exID: 1, |
|||
coinList: [], |
|||
// 可转换的资金列表 |
|||
initial: [], |
|||
// 可划转账户 |
|||
accountMap: {}, |
|||
isAccountMap: false, |
|||
// 转换映射列表 |
|||
transferList: {}, |
|||
// 账户的子账户们 |
|||
accountChildren: {}, |
|||
// 选中的子账户 |
|||
fromChild: {}, |
|||
toChild: {}, |
|||
form: { |
|||
from_account: "1", |
|||
to_account: 2, |
|||
amount: "", |
|||
pair_id: "", |
|||
coin_name: "", |
|||
coinListShow: false |
|||
}, |
|||
activeCoin: {}, |
|||
fromValue: ['1'], |
|||
toValue: [2], |
|||
fromProps: { |
|||
lazy: true, |
|||
lazyLoad: (node, resolve) => { |
|||
let { level } = node; |
|||
if (!level) { |
|||
resolve(this.fromList); |
|||
} else { |
|||
this.accountPairList(node.value, list => { |
|||
let arr = list.map(item => { |
|||
return { |
|||
value: item.contract_id, |
|||
label: item.label, |
|||
leaf: true |
|||
}; |
|||
}); |
|||
resolve(arr); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
toProps: { |
|||
lazy: true, |
|||
lazyLoad: (node, resolve) => { |
|||
let { level } = node; |
|||
if (!level) { |
|||
// console.info(this.toList) |
|||
resolve(this.toList); |
|||
} else { |
|||
this.accountPairList(node.value, list => { |
|||
let arr = list.map(item => { |
|||
return { |
|||
value: item.contract_id, |
|||
label: item.label, |
|||
leaf: true |
|||
}; |
|||
}); |
|||
resolve(arr); |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
fromList() { |
|||
return Object.keys(this.transferList).map(item => { |
|||
return { |
|||
label: this.accountMap[item], |
|||
value: item, |
|||
leaf: !this.initial.find(res => res.id == item).is_need_pair |
|||
}; |
|||
}); |
|||
}, |
|||
toList() { |
|||
return this.transferList[this.form.from_account].map(item => { |
|||
return { |
|||
label: this.accountMap[item], |
|||
value: item, |
|||
leaf: !this.initial.find(res => res.id == item).is_need_pair |
|||
}; |
|||
}); |
|||
}, |
|||
|
|||
pair_id() { |
|||
return this.form.pair_id; |
|||
} |
|||
}, |
|||
components: {}, |
|||
watch: { |
|||
fromValue(n){ |
|||
if(n[0]==2){ |
|||
this.toValue = [1]; |
|||
this.form.to_account = this.toValue[0]; |
|||
}else if(n[0]==1){ |
|||
this.toValue = [2]; |
|||
this.form.to_account = this.toValue[0]; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// from切换 |
|||
fromChange($ev) { |
|||
this.form.from_account = this.fromValue[0]; |
|||
if (this.fromValue[1]) { |
|||
this.form.pair_id = this.fromValue[1]; |
|||
} |
|||
this.$refs.to.$refs.panel.clearCheckedNodes(); |
|||
this.$refs.to.$refs.panel.lazyLoad(); |
|||
this.getUserCoinAssets() |
|||
}, |
|||
toChange() { |
|||
this.form.to_account = this.toValue[0]; |
|||
if (this.toValue[1]) { |
|||
this.form.pair_id = this.toValue[1]; |
|||
} |
|||
if (this.form.to_account) { |
|||
this.getUserCoinAssets(); |
|||
} else { |
|||
this.form.coin_name = ""; |
|||
} |
|||
}, |
|||
// 互换位置 |
|||
swap() { |
|||
let from_account=this.form.from_account, |
|||
to_account=this.form.to_account, |
|||
fromValue=this.fromValue[0], |
|||
toValue=this.toValue[0] |
|||
this.form.from_account=to_account |
|||
this.form.to_account=from_account |
|||
|
|||
if(fromValue==1){ |
|||
this.fromValue=['2'] |
|||
}else{ |
|||
this.fromValue=['1'] |
|||
} |
|||
this.$refs.to.$refs.panel.clearCheckedNodes(); |
|||
this.$refs.to.$refs.panel.lazyLoad(); |
|||
if(toValue==1){ |
|||
this.toValue=[2] |
|||
}else{ |
|||
this.toValue=[1] |
|||
} |
|||
// [this.form.from_account, this.form.to_account] = [ |
|||
// to_account, |
|||
// from_account |
|||
// ]; |
|||
// console.info(this.form.from_account) |
|||
// console.info(this.form.to_account) |
|||
// [this.fromChild, this.toChild] = [this.toChild, this.fromChild]; |
|||
this.form.pair_id = this.toChild.id; |
|||
this.getUserCoinAssets() |
|||
}, |
|||
|
|||
// 获取划转币种 |
|||
getUserCoinAssets: lodash.debounce(function() { |
|||
// console.info(this.form) |
|||
Wallet.coinList({ |
|||
from_account: this.form.from_account, |
|||
to_account: this.form.to_account, |
|||
pair_id: this.pair_id |
|||
}) |
|||
.then(res => { |
|||
this.coinList = res; |
|||
if (this.coinList[0]) { |
|||
this.form.coin_name = this.coinList[0].coin_name; |
|||
this.getBalance(); |
|||
} |
|||
}) |
|||
.catch(() => {}); |
|||
}, 300), |
|||
// 划转 |
|||
fundsTransfer() { |
|||
let data = { |
|||
...this.form, |
|||
pair_id: this.pair_id |
|||
|
|||
}; |
|||
Wallet.transfer(data) |
|||
.then(() => { |
|||
this.$message.success(this.$t('wallet.successful')); |
|||
this.form.amount = ""; |
|||
this.getUserCoinAssets(); |
|||
this.$emit('changeAssets') |
|||
location.reload() |
|||
}) |
|||
.catch(() => {}); |
|||
}, |
|||
// 获取可划转钱包 |
|||
accounts() { |
|||
Wallet.accounts().then(res => { |
|||
this.isAccountMap = true; |
|||
this.initial = res; |
|||
this.accountMap ={}; |
|||
res.forEach((item)=>{ |
|||
this.accountMap[item.id] = item.name |
|||
}) |
|||
|
|||
// 交易账户的id |
|||
let exID = this.exID; |
|||
|
|||
// 生成映射列表 |
|||
this.transferList = {}; |
|||
let ids = res.map(item => { |
|||
return item.id; |
|||
}); |
|||
for (let i in this.accountMap) { |
|||
// 交易账户区分 |
|||
if (i == exID) { |
|||
this.transferList[i] = ids.filter(item => item != i); |
|||
} else { |
|||
this.transferList[i] = [exID]; |
|||
} |
|||
} |
|||
|
|||
// 填写默认值 |
|||
this.form.from_account = exID; |
|||
let first = this.initial.find(item => item.id == exID); |
|||
if (first.is_need_pair) { |
|||
this.accountPairList(this.form.from_account, list => { |
|||
this.formChild = list[0]; |
|||
}); |
|||
} |
|||
|
|||
let last = this.initial.filter(item => item.id != exID)[0]; |
|||
if (last) { |
|||
this.form.to_account = last.id; |
|||
if (!last.is_need_pair) return; |
|||
this.accountPairList(this.form.to_account, list => { |
|||
this.toChild = list[0]; |
|||
}); |
|||
} |
|||
|
|||
|
|||
}); |
|||
}, |
|||
// 获取子账户类别 |
|||
accountPairList(id, call) { |
|||
// 缓存 |
|||
if (this.accountChildren[id]) { |
|||
call(this.accountChildren[id]); |
|||
return; |
|||
} |
|||
Wallet.accountPairList({ |
|||
account: id |
|||
}).then(res => { |
|||
res.forEach(item => { |
|||
item.label = item.coin_name + "/" + item.margin_name; |
|||
}); |
|||
this.accountChildren[id] = res; |
|||
call(res); |
|||
}); |
|||
}, |
|||
// 获取余额 |
|||
getBalance: lodash.debounce(function() { |
|||
let data = { |
|||
account: this.form.from_account, |
|||
pair_id: this.pair_id, |
|||
coin_name: this.form.coin_name |
|||
}; |
|||
Wallet.getBalance(data).then(res => { |
|||
this.activeCoin = res; |
|||
}); |
|||
}) |
|||
}, |
|||
created() { |
|||
|
|||
this.accounts(); |
|||
this.getUserCoinAssets() |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -1,124 +0,0 @@ |
|||
<template> |
|||
<div class="contact-us-page"> |
|||
|
|||
<div class="text-center mt-5 pt-5"> |
|||
<h2 class="">{{$t('contact.contact')}}</h2> |
|||
<div class="h6 mt-3">{{$t('contact.help')}}</div> |
|||
</div> |
|||
|
|||
<div class="body"> |
|||
<div class="container form-content rounded-sm mt-5 shadow py-4"> |
|||
<div class="row"> |
|||
<!-- <div class="col-8 border-right"> |
|||
<form class="cont-body"> |
|||
<div class="form-group"> |
|||
<label>{{$t('contact.fullName')}}</label> |
|||
<input type="text" required v-model="consults.realname" :placeholder="$t('contact.enterFullName')" class="form-control" /> |
|||
</div> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('contact.email')}}</label> |
|||
<input type="email" required v-model="consults.email" :placeholder="$t('contact.enterEmail')" class="form-control" /> |
|||
</div> |
|||
<div class="form-group col-md-6"> |
|||
<label for="inputPassword4">{{$t('contact.consultingService')}}</label> |
|||
<el-select v-model="consults.category_id" :placeholder="$t('contact.pleseSelect')"> |
|||
<el-option v-for="(item,index) in consultings" :key="index" :label="item.name" :value="item.id"> |
|||
|
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>{{$t('contact.info')}}</label> |
|||
<textarea required :placeholder="$t('contact.enterInfo')" class="form-control" v-model="consults.contents"></textarea> |
|||
</div> |
|||
<button type="submit" class="btn btn-primary w-50 rounded-pill" @click.prevent="handle">{{$t('contact.submit')}}</button> |
|||
</form> |
|||
</div> --> |
|||
<div class="col-12"> |
|||
<div class="py-2"> |
|||
<div class="my-3" style="text-align: center;"> |
|||
{{$t('contact.contactInformation')}}: |
|||
<div class="">{{contacts.contact}}</div> |
|||
</div> |
|||
<div class="my-3" style="text-align: center;"> |
|||
<div class="label">{{$t('contact.routineConsultation')}}:</div> |
|||
<div class="">{{contacts.email}}</div> |
|||
</div> |
|||
<div class="my-3" style="text-align: center;"> |
|||
<div class="label">{{$t('contact.customerService')}}:</div> |
|||
<div class="">{{contacts.service}}</div> |
|||
</div> |
|||
<div class="my-3" style="text-align: center;"> |
|||
<div class="label">{{$t('contact.mediaCooperation')}}:</div> |
|||
<div class="">{{contacts.media}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import ContactUs from "@/api/contactUs"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
consultings: [], |
|||
consults: { |
|||
realname: '', |
|||
email: '', |
|||
contents: '', |
|||
category_id: '', |
|||
}, |
|||
contacts : { |
|||
email: "", |
|||
service : "", |
|||
} |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
handle() { |
|||
if (utils.validate('.cont-body')) { |
|||
ContactUs.contactUs(this.consults).then(response => { |
|||
this.$message({ |
|||
type: "success", |
|||
|
|||
message: "提交成功，感谢您的关注！" |
|||
}); |
|||
// 清空表单 |
|||
this.consults = { |
|||
realname: '', |
|||
email: '', |
|||
contents: '', |
|||
category_id: '', |
|||
}; |
|||
}).catch(err => {}); |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
ContactUs.getConsultings().then(data => { |
|||
this.consultings = data; |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
|
|||
ContactUs.contact().then(data => { |
|||
this.contacts = data; |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
@ -1,67 +0,0 @@ |
|||
<template> |
|||
<div class="account mr-1"> |
|||
<div class="markets-pair-list"> |
|||
<div class="nav justify-content-between"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link">{{$t('contract.a0')}}</a> |
|||
</div> |
|||
<div class="d-flex justify-content-between align-items-center"> |
|||
<router-link to="/wallet/assets/exchange" class="border border-primary rounded text-primary p-1" > |
|||
{{$t('contract.a1')}} |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
<div class=""> |
|||
<div class="d-flex p-1 justify-content-between"> |
|||
<div>{{$t('contract.a2')}}（USDT）</div> |
|||
<div>{{ accountInfo.account_equity || "--" }}</div> |
|||
</div> |
|||
<div class="d-flex p-1 justify-content-between"> |
|||
<div>{{$t('contract.a3')}}（USDT）</div> |
|||
<div>{{accountInfo.usable_balance}}</div> |
|||
</div> |
|||
<div class="d-flex p-1 justify-content-between"> |
|||
<div>{{$t('contract.a4')}}（USDT）</div> |
|||
<div>{{accountInfo.position_margin}}</div> |
|||
</div> |
|||
<div class="d-flex p-1 justify-content-between"> |
|||
<div>{{$t('contract.a5')}}（USDT）</div> |
|||
<div>{{accountInfo.freeze_position}}</div> |
|||
</div> |
|||
<div class="d-flex p-1 justify-content-between"> |
|||
<div>{{$t('contract.a6')}}（USDT）</div> |
|||
<div class="increace">{{accountInfo.unRealProfit}}</div> |
|||
</div> |
|||
<div class="d-flex p-1 justify-content-between"> |
|||
<div>{{$t('contract.a7')}}（USDT）</div> |
|||
<div class="decreace">{{ accountInfo.riskRate || "0%" }}</div> |
|||
</div> |
|||
<div class="d-flex p-1 justify-content-between" v-if="false"> |
|||
<div>{{$t('contract.a8')}}（USDT）</div> |
|||
<div>{{ accountInfo.flatPrice || "--" }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:'account', |
|||
props:{ |
|||
accountInfo:{ |
|||
default:()=>{}, |
|||
type:Object, |
|||
required:false |
|||
} |
|||
}, |
|||
data(){ |
|||
return {} |
|||
}, |
|||
mounted(){ |
|||
// console.log(this.accountInfo) |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,75 +0,0 @@ |
|||
<template> |
|||
<div class="account"> |
|||
<div class="markets-pair-list"> |
|||
<div class="nav justify-content-between"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link">{{$t('contract.a0')}}</a> |
|||
</div> |
|||
<div class="d-flex justify-content-between align-items-center"> |
|||
<router-link to="/wallet/assets/exchange" class="border border-primary rounded text-primary p-1" > |
|||
{{$t('contract.a1')}} |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
<div class=""> |
|||
<div class="d-flex p-3 justify-content-between"> |
|||
<div>{{$t('contract.a2')}}（USDT）</div> |
|||
<div>{{ accountInfo.account_equity || "--" }}</div> |
|||
</div> |
|||
<div class="d-flex p-3 justify-content-between"> |
|||
<div>{{$t('contract.a3')}}（USDT）</div> |
|||
<div>{{accountInfo.usable_balance}}</div> |
|||
</div> |
|||
<!-- <div class="d-flex p-3 justify-content-between"> |
|||
<div>{{$t('contract.a4')}}（USDT）</div> |
|||
<div>{{accountInfo.position_margin}}</div> |
|||
</div> --> |
|||
<!-- <div class="d-flex p-3 justify-content-between"> |
|||
<div>{{$t('contract.a5')}}（USDT）</div> |
|||
<div>{{accountInfo.freeze_position}}</div> |
|||
</div> |
|||
<div class="d-flex p-3 justify-content-between"> |
|||
<div>{{$t('contract.a6')}}（USDT）</div> |
|||
<div class="increace">{{accountInfo.unRealProfit}}</div> |
|||
</div> --> |
|||
<div class="d-flex p-3 justify-content-between"> |
|||
<div>{{$t('contract.a7')}} |
|||
<!-- （USDT） --> |
|||
</div> |
|||
<div class="decreace">{{ accountInfo.riskRate || "0%" }}</div> |
|||
</div> |
|||
<!-- <div class="d-flex p-3 justify-content-between" v-if="false"> |
|||
<div>{{$t('contract.a8')}}（USDT）</div> |
|||
<div>{{ accountInfo.flatPrice || "--" }}</div> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:'account', |
|||
props:{ |
|||
accountInfo:{ |
|||
default:()=>{}, |
|||
type:Object, |
|||
required:false |
|||
} |
|||
}, |
|||
data(){ |
|||
return {} |
|||
}, |
|||
watch:{ |
|||
accountInfo(newv,oldv){ |
|||
newv.account_equity=(parseFloat(newv.account_equity)).toFixed(2) |
|||
newv.usable_balance=(parseFloat(newv.usable_balance)).toFixed(2) |
|||
} |
|||
}, |
|||
mounted(){ |
|||
// console.log(this.accountInfo) |
|||
}, |
|||
methods:{ |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,175 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('contract.a9')}}</th> |
|||
<th>{{$t('contract.b0')}}</th> |
|||
<th>{{$t('contract.b1')}}</th> |
|||
<th>{{$t('contract.b2')}}</th> |
|||
<th>{{$t('contract.b3')}}/{{$t('contract.b4')}}</th> |
|||
<th>{{$t('contract.b5')}}/{{$t('contract.b6')}}</th> |
|||
<th>{{$t('contract.b7')}}</th> |
|||
<th>{{$t('contract.b8')}}</th> |
|||
<th>{{$t('contract.b9')}}</th> |
|||
<th>{{$t('contract.c0')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{ item.symbol }}/USDT</td> |
|||
<td>{{ item.lever_rate }}X</td> |
|||
<td>{{ item.created_at }}</td> |
|||
<td>{{ cals(item.side, item.order_type) }}</td> |
|||
<td>{{ item.traded_amount }}/{{ item.amount }}</td> |
|||
<td>{{item.avg_price||'--'}}/{{ item.entrust_price || "--" }}</td> |
|||
<td>{{ item.margin * 1 }}</td> |
|||
<td>{{ item.fee * 1 }}</td> |
|||
<td>{{ status(item.status) }}</td> |
|||
<td> |
|||
<button class="btn btn-sm btn-danger" @click="ifCancelEntrust(item)">{{$t('contract.c1')}}</button> |
|||
</td> |
|||
|
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="10"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="p-2"> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="CurrentObj.per_page" |
|||
@current-change="changePageCurrent" |
|||
:total="CurrentObj.total" |
|||
></el-pagination> |
|||
</div> |
|||
<!-- 撤销 --> |
|||
<div |
|||
class="modal fade" |
|||
id="backmodal" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="backClose" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="backClose">{{$t('contract.c1')}}</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
{{$t('contract.c3')}}？ |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary" |
|||
data-dismiss="modal" |
|||
> |
|||
{{$t('contract.c4')}} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary" |
|||
@click="cancelEntrust" |
|||
> |
|||
{{$t('contract.c5')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract"; |
|||
import math from "@/utils/class/math"; |
|||
export default { |
|||
name: "current-commission", |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
CurrentObj: { |
|||
page: 1 |
|||
}, |
|||
list: [], |
|||
activeItem:{} |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
created() { |
|||
this.getCurrentEntrust(); |
|||
}, |
|||
methods: { |
|||
status(status) { |
|||
switch (status) { |
|||
case 0: |
|||
return this.$t('contract.c6'); |
|||
case 1: |
|||
return this.$t('contract.c7'); |
|||
case 2: |
|||
return this.$t('contract.c8'); |
|||
case 3: |
|||
return this.$t('contract.c9'); |
|||
} |
|||
}, |
|||
cals(side, order_type) { |
|||
// order_type - side |
|||
let map = { |
|||
"1-1": this.$t('contract.d0'), |
|||
"1-2": this.$t('contract.d1'), |
|||
"2-1": this.$t('contract.d2'), |
|||
"2-2": this.$t('contract.d3') |
|||
}; |
|||
return map[`${side}-${order_type}`]; |
|||
}, |
|||
changePageCurrent(idx) { |
|||
this.CurrentObj.page = idx; |
|||
this.getCurrentEntrust(); |
|||
}, |
|||
getCurrentEntrust() { |
|||
let data = { |
|||
page: this.CurrentObj.page |
|||
}; |
|||
Contract.getCurrentEntrust(data).then(res => { |
|||
this.list = res.data; |
|||
this.CurrentObj = res; |
|||
}); |
|||
}, |
|||
// 撤单 |
|||
ifCancelEntrust(item){ |
|||
this.activeItem = item |
|||
// console.log(this.activeItem) |
|||
$('#backmodal').modal('show') |
|||
}, |
|||
cancelEntrust(){ |
|||
let data = { |
|||
symbol:this.activeItem.symbol, |
|||
entrust_id:this.activeItem.id |
|||
} |
|||
Contract.cancelEntrust(data).then(()=>{ |
|||
this.getCurrentEntrust() |
|||
this.$message.success(this.$t('contract.d4')) |
|||
$('#backmodal').modal('hide') |
|||
}) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,487 +0,0 @@ |
|||
<template> |
|||
<div class="markets-pair-list exchange-store bg-plain"> |
|||
<div class="nav nav-pills"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{ |
|||
$t("contract.d5") |
|||
}}</a> |
|||
</div> |
|||
<!-- <div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{ |
|||
$t("contract.d6") |
|||
}}</a> |
|||
</div> --> |
|||
<div class="flex-fill px-3 justify-content-end d-flex align-items-center"> |
|||
<el-popover |
|||
placement="bottom" |
|||
width="100" |
|||
v-model="visible" |
|||
trigger="manual" |
|||
> |
|||
<div |
|||
class="rounded border p-1 bg-white pointer" |
|||
slot="reference" |
|||
@click="visible = !visible" |
|||
> |
|||
{{ $t("contract.b0") }} |
|||
<span class="fn-16"> {{ form.lever_rate }}X </span> |
|||
<i class="el-icon-edit text-primary"></i> |
|||
</div> |
|||
<div class="list"> |
|||
<div |
|||
class="el-select-dropdown__item" |
|||
@click=" |
|||
selectLever(item); |
|||
visible = false; |
|||
" |
|||
v-for="item in lever_rage" |
|||
:key="item" |
|||
> |
|||
{{ item }}X |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</div> |
|||
</div> |
|||
<div class="content-box px-3 "> |
|||
<div v-if="type == 2" class="input-group my-4 input-group-sm"> |
|||
<div class="input-group-prepend"> |
|||
<span class="input-group-text">{{ $t("contract.d7") }}</span> |
|||
</div> |
|||
<input type="number" class="form-control" placeholder="" /> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">USDT</span> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex my-4 align-items-center"> |
|||
<div class="input-group input-group-sm"> |
|||
<div class="input-group-prepend"> |
|||
<span class="input-group-text">{{ $t("contract.d8") }}</span> |
|||
</div> |
|||
<template v-if="form.type == 1"> |
|||
<input |
|||
type="number" |
|||
v-model="form.entrust_price" |
|||
class="form-control" |
|||
placeholder="" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">USDT</span> |
|||
</div> |
|||
</template> |
|||
<template v-if="form.type == 2"> |
|||
<input |
|||
type="text" |
|||
disabled |
|||
:value="$t('contract.d9')" |
|||
class="form-control" |
|||
:placeholder="$t('contract.d9')" |
|||
/> |
|||
</template> |
|||
</div> |
|||
<button |
|||
@click="form.type == 1 ? (form.type = 2) : (form.type = 1)" |
|||
class="btn btn-sm btn-outline-primary ml-2 text-nowrap" |
|||
> |
|||
{{ form.type == 1 ? $t("common.limit") : $t("common.market") }} |
|||
</button> |
|||
</div> |
|||
<div class="input-group mb-4 input-group-sm"> |
|||
<div class="input-group-prepend"> |
|||
<!-- <span class="input-group-text">{{ $t("contract.e1") }}</span> --> |
|||
<span class="input-group-text">{{ $t("contract.l2") }}</span> |
|||
</div> |
|||
|
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
v-model="margin" |
|||
:placeholder="tips" |
|||
/> |
|||
<!-- <div class="input-group-append"> |
|||
<span class="input-group-text">{{ $t("contract.e2") }}</span> |
|||
</div> --> |
|||
</div> |
|||
<div class="px-2 mb-4" v-if="this.tab == 1"> |
|||
<el-slider |
|||
:value="activeStep" |
|||
@input="sliderChange" |
|||
:format-tooltip="tooltip" |
|||
:marks="marks" |
|||
></el-slider> |
|||
<!-- :step="25" --> |
|||
</div> |
|||
<!-- 开仓 --> |
|||
<div v-if="tab == 1" class="kaicang"> |
|||
<div class="d-flex justify-content-between mb-3"> |
|||
<div>{{ $t("contract.e1") }}：</div> |
|||
<!-- {{$t("contract.e2")}} --> |
|||
<div>{{ amount }} </div> |
|||
</div> |
|||
<div class="d-flex justify-content-between mb-4"> |
|||
<div>{{ $t("contract.a3") }}:</div> |
|||
<div> |
|||
{{ accountInfo.usable_balance }} USDT |
|||
<i |
|||
class="el-icon-sort" |
|||
@click="$router.push('/wallet/assets/exchange')" |
|||
></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 平仓 --> |
|||
<div v-if="tab == 2"> |
|||
<div class="d-flex justify-content-between"> |
|||
<div>{{ $t("contract.e4") }}：</div> |
|||
<div>{{ multiplePositions }} {{ $t("contract.e2") }}</div> |
|||
</div> |
|||
<div class="d-flex justify-content-between mb-4"> |
|||
<div>{{ $t("contract.e5") }}:</div> |
|||
<div>{{ shortPosition }} {{ $t("contract.e2") }}</div> |
|||
</div> |
|||
</div> |
|||
<div class="exchange_button" v-if="tab == 1"> |
|||
<div class="px-1 flex-fill mb-4"> |
|||
<button |
|||
@click="ifOpenPosition(1)" |
|||
type="button" |
|||
class="sub w-24/24 btn-success btn btn-sm mb-3" |
|||
> |
|||
{{ $t("contract.d0") }} |
|||
<!-- <span class="fn-12"> （{{ $t("contract.e6") }}） </span> --> |
|||
</button> |
|||
<div class="text-left"> |
|||
{{ $t("contract.e7") }} {{ maxNum }} |
|||
<!-- {{ $t("contract.e2") }} --> |
|||
</div> |
|||
</div> |
|||
<div class="px-1 flex-fill"> |
|||
<button |
|||
@click="ifOpenPosition(2)" |
|||
type="button" |
|||
class="sub w-24/24 btn-danger btn btn-sm mb-3" |
|||
> |
|||
{{ $t("contract.d2") }} |
|||
<!-- <span class="fn-12"> （{{ $t("contract.e8") }}） </span> --> |
|||
</button> |
|||
<!-- <div class="text-center"> --> |
|||
<div class="text-right"> |
|||
{{ $t("contract.e7") }} {{ maxNum }} |
|||
<!-- {{ $t("contract.e2") }} --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="" v-if="tab == 2"> |
|||
<div class="px-2 flex-fill mb-4"> |
|||
<button |
|||
@click="ifOpenPosition(1)" |
|||
type="button" |
|||
class="sub w-24/24 btn-success btn btn-sm" |
|||
> |
|||
{{ $t("contract.d3") }} |
|||
</button> |
|||
<div class="text-center"> |
|||
{{ $t("contract.e9") }} {{ canMore }} {{ $t("contract.e2") }} |
|||
</div> |
|||
</div> |
|||
<div class="px-2 flex-fill"> |
|||
<button |
|||
@click="ifOpenPosition(2)" |
|||
type="button" |
|||
class="sub w-24/24 btn-danger btn btn-sm" |
|||
> |
|||
{{ $t("contract.d1") }} |
|||
</button> |
|||
<div class="text-center"> |
|||
{{ $t("contract.e9") }} {{ canEmpty }} {{ $t("contract.e2") }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract.js"; |
|||
import date from "@/utils/class/date.js"; |
|||
import math from "@/utils/class/math.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab: 1, |
|||
type: 1, |
|||
visible: false, |
|||
form: { |
|||
// 1:限价 2:市价 |
|||
type: 2, |
|||
entrust_price: undefined, |
|||
amount:"", |
|||
lever_rate: "" |
|||
}, |
|||
// 最多可开张数 |
|||
maxNum: 0, |
|||
lever_rage: [], |
|||
accountInfo: {}, |
|||
_time: null, |
|||
unit_amount:0, |
|||
marks:{ |
|||
25:'', |
|||
50:'', |
|||
75:'' |
|||
}, |
|||
margin:0, |
|||
}; |
|||
}, |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
}, |
|||
holdPositionList: { |
|||
default: () => [], |
|||
type: Array, |
|||
required: false |
|||
}, |
|||
defaultPrice: { |
|||
default: "", |
|||
type: String | Number, |
|||
required: false |
|||
}, |
|||
newPriceObj: { |
|||
default: () => {}, |
|||
type: Object, |
|||
required: false |
|||
}, |
|||
contractOpen: {} |
|||
}, |
|||
watch: { |
|||
symbol() { |
|||
this.form.entrust_price = undefined; |
|||
this.contractAccount(); |
|||
this.getSymbolDetail(); |
|||
}, |
|||
defaultPrice(n) { |
|||
this.form.entrust_price = n; |
|||
}, |
|||
newPriceObj(n) { |
|||
if (n && this.form.entrust_price === undefined) { |
|||
this.form.entrust_price = n.price; |
|||
} |
|||
}, |
|||
contractOpen(n, o) { |
|||
if (n != o) { |
|||
this.contractAccount(); |
|||
} |
|||
} |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this._time); |
|||
}, |
|||
mounted() { |
|||
if (this.symbol) { |
|||
this.contractAccount(); |
|||
|
|||
this.getSymbolDetail(); |
|||
} |
|||
this._time = setInterval(() => { |
|||
if (this.symbol) { |
|||
// if (this.contractOpen) { |
|||
this.contractAccount(true); |
|||
// } |
|||
} |
|||
}, 3000); |
|||
}, |
|||
computed: { |
|||
tips(){ |
|||
// return this.unit_amount?(`${this.unit_amount}USDT`):'' |
|||
return this.unit_amount?(`USDT`):'' |
|||
}, |
|||
isLogin() { |
|||
return Boolean(localStorage.token); |
|||
}, |
|||
// 多仓持仓 |
|||
multiplePositions() { |
|||
let item = this.holdPositionList.find(item => item.side == 1); |
|||
if (!item) return 0; |
|||
return item.hold_position; |
|||
}, |
|||
// 可平多 |
|||
canMore() { |
|||
let item = this.holdPositionList.find(item => item.side == 1); |
|||
if (!item) return 0; |
|||
return item.avail_position; |
|||
}, |
|||
// 空仓持仓 |
|||
shortPosition() { |
|||
let item = this.holdPositionList.find(item => item.side == 2); |
|||
if (!item) return 0; |
|||
return item.hold_position; |
|||
}, |
|||
// 可以平空 |
|||
canEmpty() { |
|||
let item = this.holdPositionList.find(item => item.side == 2); |
|||
if (!item) return 0; |
|||
return item.avail_position; |
|||
}, |
|||
activeStep() { |
|||
// if (!this.form.amount || !this.maxNum) return 0; |
|||
let num = (this.form.amount / this.maxNum) * 100; |
|||
return num; |
|||
}, |
|||
// 保证金 |
|||
// margin() { |
|||
// if (!this.form.lever_rate) return ''; |
|||
// return math.omitTo(this.form.amount*this.unit_amount / this.form.lever_rate, 4); |
|||
// }, |
|||
amount(){ |
|||
// console.info(this.form.lever_rate) |
|||
// console.info(this.margin) |
|||
if (!this.form.lever_rate || !this.margin) return 0; |
|||
let p=this.margin*this.form.lever_rate; |
|||
|
|||
this.form.amount=p; |
|||
return p |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取合约账户信息 |
|||
contractAccount(boo) { |
|||
if (!this.isLogin) return; |
|||
// if (!this.contractOpen) return; |
|||
let data = { |
|||
symbol: this.symbol |
|||
}; |
|||
Contract.contractAccount(data).then(res => { |
|||
this.accountInfo = res; |
|||
this.$emit("accountInfo", res); |
|||
// if (!this.form.lever_rate) { |
|||
// this.form.lever_rate = res.lever_rate; |
|||
// } |
|||
if (this.form.lever_rate && !boo) { |
|||
this.openNum(); |
|||
} |
|||
}); |
|||
}, |
|||
// 获取可开启张数 |
|||
openNum() { |
|||
if (!this.isLogin) return; |
|||
let data = { |
|||
symbol: this.symbol, //ETH |
|||
lever_rate: this.form.lever_rate //10 |
|||
}; |
|||
Contract.openNum(data).then(res => { |
|||
this.maxNum = res; |
|||
}); |
|||
}, |
|||
// 获取合约详情 |
|||
getSymbolDetail() { |
|||
let data = { |
|||
symbol: this.symbol |
|||
}; |
|||
Contract.getSymbolDetail(data).then(res => { |
|||
this.lever_rage = res.lever_rage; |
|||
this.unit_amount = res.unit_amount |
|||
this.$emit('getSymbolDetail',res) |
|||
// if (!this.form.lever_rate) { |
|||
this.form.lever_rate = res.default_lever; |
|||
// } |
|||
}); |
|||
}, |
|||
// 设置数量 |
|||
sliderChange($ev) { |
|||
this.form.amount = Math.round((this.maxNum * $ev) / 100)||''; |
|||
// console.info(this.form) |
|||
this.margin=this.form.amount/this.form.lever_rate || 0 |
|||
}, |
|||
// 选择杠杆 |
|||
selectLever(idx) { |
|||
this.form.lever_rate = idx; |
|||
this.openNum(); |
|||
}, |
|||
tooltip($ev) { |
|||
return Math.round($ev) + "%"; |
|||
}, |
|||
// 提示 |
|||
ifOpenPosition(side) { |
|||
if (this.tab == 1) { |
|||
this.openPosition(side); |
|||
} else { |
|||
this.closePosition(side); |
|||
} |
|||
|
|||
// let typeStr = |
|||
// this.form.type == 1 |
|||
// ? `${this.form.entrust_price}${this.$t("contract.f0")}` |
|||
// : this.$t("contract.d9"); |
|||
// let decStr = |
|||
// this.tab == 1 |
|||
// ? `${this.$t("contract.d5")}${this.form.amount}${this.$t( |
|||
// "contract.e2" |
|||
// )}${side == 1 ? this.$t("contract.f1") : this.$t("contract.f2")}` |
|||
// : `${this.$t("contract.d6")}${this.form.amount}${this.$t( |
|||
// "contract.e2" |
|||
// )}`; |
|||
|
|||
|
|||
// `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate}${this.$t( |
|||
// "contract.f4" |
|||
// )}${decStr}?` |
|||
// this.$confirm( |
|||
// `${this.$t("contract.f3")}${typeStr}${this.form.lever_rate} |
|||
// ${this.$t("contract.f4")}${this.$t("contract.d5")}?` |
|||
// ) |
|||
// .then(res => { |
|||
// if (this.tab == 1) { |
|||
// this.openPosition(side); |
|||
// } else { |
|||
// this.closePosition(side); |
|||
// } |
|||
// }) |
|||
// .catch(res => {}); |
|||
}, |
|||
// 开仓 |
|||
openPosition(side) { |
|||
let data = { |
|||
side, |
|||
symbol: this.symbol, |
|||
...this.form |
|||
}; |
|||
Contract.openPosition(data).then(() => { |
|||
this.contractAccount(); |
|||
this.form.amount = 0; |
|||
this.$message.success(this.$t("contract.f5")); |
|||
this.$emit("position"); |
|||
}); |
|||
}, |
|||
// 平仓 |
|||
closePosition(side) { |
|||
let data = { |
|||
side: side == 1 ? 2 : 1, |
|||
type: this.form.type, |
|||
symbol: this.symbol, |
|||
entrust_price: this.form.entrust_price || 0, |
|||
amount: this.form.amount |
|||
}; |
|||
Contract.closePosition(data).then(() => { |
|||
this.form.amount = ""; |
|||
this.contractAccount(); |
|||
this.$message.success(this.$t("contract.f6")); |
|||
this.$emit("position"); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped="scoped" lang="scss"> |
|||
.exchange_button{ |
|||
display: flex; |
|||
font-size: 16px !important; |
|||
} |
|||
.btn,.kaicang{ |
|||
font-size: 0.9rem; |
|||
} |
|||
::v-deep .el-slider__button-wrapper{ |
|||
// background-color: ; |
|||
z-index: 999; |
|||
} |
|||
</style> |
|||
@ -1,272 +0,0 @@ |
|||
<template> |
|||
<div class="markets-pair-list handicap"> |
|||
<div class="nav nav-pills p-3 fn-center d-block fn-22"> |
|||
<div class="nav-item"> |
|||
{{$t("contract.f7")}} |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<!-- 盘口 --> |
|||
<div class="handicap-body px-3 mt-1 bg-plain"> |
|||
<div class="label-group d-flex justify-content-between text-secondary fn-12 py-2"> |
|||
<div> |
|||
{{ $t("contract.d8") }}(USDT) |
|||
</div> |
|||
<div> |
|||
{{ $t("contract.e1") }}({{ $t("contract.e2") }}) |
|||
</div> |
|||
<!-- <div class="w-7/24 text-right"> |
|||
{{ $t("contract.g2") }}({{ $t("contract.e2") }}) |
|||
</div> --> |
|||
</div> |
|||
<div class="sell"> |
|||
<template v-for="(item, idx) in sellListShow"> |
|||
<div |
|||
class="item pointer" |
|||
:key="idx" |
|||
@click="$emit('selectprice', item.price)" |
|||
> |
|||
<div class="d-flex justify-content-between"> |
|||
<div class="decreace">{{ item.price}}</div> |
|||
<div>{{ omitTo(item.amount, 2) }}</div> |
|||
<!-- <div class="w-7/24 text-right">{{ item.total }}</div> --> |
|||
</div> |
|||
<div |
|||
class="pgs" |
|||
:style="{ width: getValue(item.amount) + '%' }" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="current-nav d-flex pt-1 align-items-center" |
|||
> |
|||
<div class="w-10/24"> |
|||
<div class="name text-secondary fn-12">{{ $t("contract.g3") }}</div> |
|||
<div class="num fn-20 increace"> |
|||
{{ newPriceObj.price }} |
|||
</div> |
|||
</div> |
|||
<div class="w-14/24 text-right"> |
|||
<!-- <button class="btn btn-sm btn-outline-primary fn-12">更多</button> --> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="handicap-body px-3 mt-1 bg-plain"> |
|||
<div class="d-flex justify-content-between py-2" v-if="false"> |
|||
<div class="d-flex"> |
|||
<div class="border border-primary rounded px-1 mr-2"> |
|||
{{ $t("contract.f9") }} |
|||
</div> |
|||
<div class="border border-success rounded px-1 mr-2"> |
|||
{{ $t("contract.g0") }} |
|||
</div> |
|||
<div class="border border-danger rounded px-1"> |
|||
{{ $t("contract.g1") }} |
|||
</div> |
|||
</div> |
|||
<div class="rounded px-1 border"> |
|||
0.8 |
|||
<i class="el-icon-arrow-down"></i> |
|||
</div> |
|||
</div> |
|||
<div class="label-group d-flex justify-content-between text-secondary fn-12 py-2"> |
|||
<div> |
|||
{{ $t("contract.d8") }}(USDT) |
|||
</div> |
|||
<div> |
|||
{{ $t("contract.e1") }}({{ $t("contract.e2") }}) |
|||
</div> |
|||
<!-- <div class="w-7/24 text-right"> |
|||
{{ $t("contract.g2") }}({{ $t("contract.e2") }}) |
|||
</div> --> |
|||
</div> |
|||
|
|||
<div class="buy"> |
|||
<template v-for="(item, idx) in buyListShow"> |
|||
<div |
|||
class="item pointer" |
|||
:key="idx" |
|||
@click="$emit('selectprice', item.price)" |
|||
> |
|||
<div class="d-flex justify-content-between"> |
|||
<div class="increace">{{ item.price }}</div> |
|||
<div>{{ omitTo(item.amount, 2) }}</div> |
|||
<!-- <div class="w-7/24 text-right">{{ item.total }}</div> --> |
|||
</div> |
|||
<div |
|||
class="pgs" |
|||
:style="{ width: getValue(item.amount) + '%' }" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract.js"; |
|||
import date from "@/utils/class/date.js"; |
|||
import math from "@/utils/class/math.js"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab: 1, |
|||
sellList: [], |
|||
buyList: [], |
|||
tradeList: [], |
|||
newPriceObj: {} |
|||
}; |
|||
}, |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
}, |
|||
wsUrl: { |
|||
default: "", |
|||
type: String, |
|||
required: true |
|||
}, |
|||
ws: {} |
|||
}, |
|||
watch: { |
|||
symbol(n, o) { |
|||
this.getMarketInfo(); |
|||
this.linkSocket(); |
|||
if (o) { |
|||
this.unLink(o); |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
msg() { |
|||
return { |
|||
buy: `swapBuyList_${this.symbol}`, |
|||
sell: `swapSellList_${this.symbol}`, |
|||
trade: `swapTradeList_${this.symbol}` |
|||
}; |
|||
}, |
|||
sellListShow() { |
|||
let list = this.sellList.splice(0, 15); |
|||
let total = 0; |
|||
list.forEach(item => { |
|||
item.total = total += item.amount; |
|||
}); |
|||
return list.reverse(); |
|||
}, |
|||
buyListShow() { |
|||
let list = this.buyList.splice(0, 15); |
|||
let total = 0; |
|||
list.forEach(item => { |
|||
item.total = total += item.amount; |
|||
}); |
|||
return list; |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.symbol) { |
|||
this.getMarketInfo(); |
|||
this.linkSocket(); |
|||
} |
|||
}, |
|||
// 获取盘口 |
|||
methods: { |
|||
parseTime: date.parseTime, |
|||
omitTo: math.omitTo, |
|||
getMarketInfo() { |
|||
let data = { |
|||
symbol: this.symbol |
|||
}; |
|||
Contract.getMarketInfo(data).then(res => { |
|||
this.sellList = res.swapSellList; |
|||
this.buyList = res.swapBuyList; |
|||
this.tradeList = res.swapTradeList; |
|||
this.newPriceObj = this.tradeList[0]; |
|||
this.$emit("input", this.newPriceObj); |
|||
}); |
|||
}, |
|||
// 计算深度 |
|||
getValue(amount) { |
|||
const arr = this.buyListShow |
|||
.concat(this.sellListShow) |
|||
.map(item => item.amount); |
|||
let max = Math.max(...arr); |
|||
return math.division(amount, max, 2) * 100; |
|||
}, |
|||
// 连接socket |
|||
linkSocket() { |
|||
if (this.ws.socket.readyState == 1) { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.buy |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.sell |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.trade |
|||
}); |
|||
} else { |
|||
this.ws.on("open", () => { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.buy |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.sell |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.trade |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
this.ws.on("message", res => { |
|||
let { data, msg, code, sub, type, status, cmd } = res; |
|||
if (sub == this.msg.buy) { |
|||
this.buyList = data; |
|||
} else if (sub == this.msg.sell) { |
|||
this.sellList = data; |
|||
} else if (sub == this.msg.trade) { |
|||
this.tradeList.unshift(data); |
|||
this.tradeList.pop(); |
|||
this.newPriceObj = data; |
|||
this.$emit("input", this.newPriceObj); |
|||
} else if (cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 取消订阅 |
|||
unLink(symbol) { |
|||
// 取消买线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapBuyList_${symbol}` |
|||
}); |
|||
// 取消卖线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapSellList_${symbol}` |
|||
}); |
|||
// 取消成交 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapTradeList_${symbol}` |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,312 +0,0 @@ |
|||
<template> |
|||
<div class="markets-pair-list handicap bg-plain"> |
|||
<!-- <div class="nav nav-pills"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1">{{ |
|||
$t("contract.f7") |
|||
}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{ |
|||
$t("contract.f8") |
|||
}}</a> |
|||
</div> |
|||
</div> --> |
|||
<div> |
|||
<!-- 盘口 --> |
|||
<div class="handicap-body px-3" v-if="tab == 1"> |
|||
<div class="d-flex justify-content-between py-2" v-if="false"> |
|||
<div class="d-flex"> |
|||
<div class="border border-primary rounded px-1 mr-2"> |
|||
{{ $t("contract.f9") }} |
|||
</div> |
|||
<div class="border border-success rounded px-1 mr-2"> |
|||
{{ $t("contract.g0") }} |
|||
</div> |
|||
<div class="border border-danger rounded px-1"> |
|||
{{ $t("contract.g1") }} |
|||
</div> |
|||
</div> |
|||
<div class="rounded px-1 border"> |
|||
0.8 |
|||
<i class="el-icon-arrow-down"></i> |
|||
</div> |
|||
</div> |
|||
<div class="label-group d-flex text-secondary fn-12 py-2"> |
|||
<div class="w-7/24"> |
|||
{{ $t("contract.d8") }} |
|||
</div> |
|||
<div class="w-8/24"> |
|||
{{ $t("contract.e1") }} |
|||
</div> |
|||
<div class="w-7/24 text-right"> |
|||
{{ $t("contract.g2") }} |
|||
<!-- ({{ $t("contract.e2") }}) --> |
|||
</div> |
|||
</div> |
|||
<div class="sell fn-12"> |
|||
<template v-for="(item, idx) in sellListShow"> |
|||
<div |
|||
class="item pointer" |
|||
:key="idx" |
|||
@click="$emit('selectprice', item.price)" |
|||
> |
|||
<div class="d-flex"> |
|||
<div class="w-7/24 decreace">{{ item.price}}</div> |
|||
<div class="w-8/24">{{ omitTo(item.amount, 2) }}</div> |
|||
<div class="w-8/24 text-right">{{ item.total }}</div> |
|||
</div> |
|||
<div |
|||
class="pgs" |
|||
:style="{ width: getValue(item.amount) + '%' }" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<div |
|||
class="current-nav d-flex border-top border-bottom align-items-center" |
|||
> |
|||
<div class="w-10/24"> |
|||
<div class="name text-secondary fn-12">{{ $t("contract.g3") }}</div> |
|||
<div class="num fn-20 increace"> |
|||
{{ newPriceObj.price }} |
|||
</div> |
|||
</div> |
|||
<div class="w-14/24 text-right"> |
|||
<!-- <button class="btn btn-sm btn-outline-primary fn-12">更多</button> --> |
|||
</div> |
|||
</div> |
|||
<div class="buy fn-12"> |
|||
<template v-for="(item, idx) in buyListShow"> |
|||
<div |
|||
class="item pointer" |
|||
:key="idx" |
|||
@click="$emit('selectprice', item.price)" |
|||
> |
|||
<div class="d-flex"> |
|||
<div class="w-7/24 increace">{{ item.price }}</div> |
|||
<div class="w-8/24">{{ omitTo(item.amount, 2) }}</div> |
|||
<div class="w-8/24 text-right">{{ item.total }}</div> |
|||
</div> |
|||
<div |
|||
class="pgs" |
|||
:style="{ width: getValue(item.amount) + '%' }" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<!-- 实时成交 --> |
|||
<div class="d-flex text-secondary fn-12"> |
|||
<div class="w-7/24"> |
|||
{{ $t("contract.b1") }} |
|||
</div> |
|||
<div class="w-8/24">{{ $t("contract.d8") }}(USDT)</div> |
|||
<div class="w-8/24 text-right"> |
|||
{{ $t("contract.e1") }}({{ $t("contract.e2") }}) |
|||
</div> |
|||
</div> |
|||
<div class="deal"> |
|||
<div class="d-flex fn-12" v-for="(item, idx) in tradeList" :key="idx"> |
|||
<div class="w-7/24"> |
|||
{{ parseTime(item.ts, false, "{h}:{i}:{s}") }} |
|||
</div> |
|||
<div class="w-8/24 increace"> |
|||
{{ item.price }} |
|||
</div> |
|||
<div class="w-8/24 text-right"> |
|||
{{ omitTo(item.amount, 2) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- --> |
|||
<div class="real-time p-3" v-if="tab == 2"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract.js"; |
|||
import date from "@/utils/class/date.js"; |
|||
import math from "@/utils/class/math.js"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
import bus from "@/components/bus.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab: 1, |
|||
sellList: [], |
|||
buyList: [], |
|||
tradeList: [], |
|||
newPriceObj: {}, |
|||
}; |
|||
}, |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
}, |
|||
wsUrl: { |
|||
default: "", |
|||
type: String, |
|||
required: true |
|||
}, |
|||
ws: {} |
|||
}, |
|||
watch: { |
|||
symbol(n, o) { |
|||
this.getMarketInfo(); |
|||
this.linkSocket(); |
|||
if (o) { |
|||
this.unLink(o); |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
msg() { |
|||
return { |
|||
buy: `swapBuyList_${this.symbol}`, |
|||
sell: `swapSellList_${this.symbol}`, |
|||
trade: `swapTradeList_${this.symbol}` |
|||
}; |
|||
}, |
|||
sellListShow() { |
|||
let list = this.sellList.splice(0, 12); |
|||
let total = 0; |
|||
list.forEach(item => { |
|||
// item.total = total += item.amount; |
|||
item.total = total += Number(item.amount); |
|||
item.total = item.total.toFixed(3) |
|||
}); |
|||
return list.reverse(); |
|||
}, |
|||
buyListShow() { |
|||
let list = this.buyList.splice(0, 12); |
|||
let total = 0; |
|||
list.forEach(item => { |
|||
// item.total = total += item.amount; |
|||
item.total = total += Number(item.amount); |
|||
item.total = item.total.toFixed(3); |
|||
}); |
|||
return list; |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.symbol) { |
|||
this.getMarketInfo(); |
|||
this.linkSocket(); |
|||
} |
|||
bus.$on('collapse', msg => { |
|||
this.newPriceObj.price =this.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3); |
|||
// if (msg.close.endsWith('.')) { |
|||
// // 如果是整数，添加一个'0'到字符串末尾 |
|||
// msg.close += '0'; |
|||
// } |
|||
this.newPriceObj.price = msg.close; |
|||
this.$emit("input", this.newPriceObj); |
|||
// console.log(this.newPriceObj.price, 'this.newPriceObj.price-----') |
|||
// const closeStr = msg.close.toString(); |
|||
// this.newPriceObj.price = this.symbol === 'BTC' ? closeStr.slice(0, closeStr.indexOf('.') + 2) : closeStr.slice(0, closeStr.indexOf('.') + 4); |
|||
// this.$emit("input", this.newPriceObj); |
|||
}); |
|||
}, |
|||
// 获取盘口 |
|||
methods: { |
|||
parseTime: date.parseTime, |
|||
omitTo: math.omitTo, |
|||
getMarketInfo() { |
|||
let data = { |
|||
symbol: this.symbol |
|||
}; |
|||
Contract.getMarketInfo(data).then(res => { |
|||
this.sellList = res.swapSellList; |
|||
this.buyList = res.swapBuyList; |
|||
this.tradeList = res.swapTradeList; |
|||
// if(this.tradeList.length>0){ |
|||
this.newPriceObj = this.tradeList[0]; |
|||
// } |
|||
this.$emit("input", this.newPriceObj); |
|||
}); |
|||
}, |
|||
// 计算深度 |
|||
getValue(amount) { |
|||
const arr = this.buyListShow |
|||
.concat(this.sellListShow) |
|||
.map(item => item.amount); |
|||
let max = Math.max(...arr); |
|||
return math.division(amount, max, 2) * 100; |
|||
}, |
|||
// 连接socket |
|||
linkSocket() { |
|||
if (this.ws.socket.readyState == 1) { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.buy |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.sell |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.trade |
|||
}); |
|||
} else { |
|||
this.ws.on("open", () => { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.buy |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.sell |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.trade |
|||
}); |
|||
}); |
|||
} |
|||
this.ws.on("message", res => { |
|||
let { data, msg, code, sub, type, status, cmd } = res; |
|||
if (sub == this.msg.buy) { |
|||
this.buyList = data; |
|||
} else if (sub == this.msg.sell) { |
|||
this.sellList = data; |
|||
} else if (sub == this.msg.trade) { |
|||
// console.log('if (sub == this.msg.trade)', this.msg.trade) |
|||
this.tradeList.unshift(data); |
|||
this.tradeList.pop(); |
|||
// this.newPriceObj = data; |
|||
// this.$emit("input", this.newPriceObj); |
|||
} else if (type == "ping" ||cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
// 取消订阅 |
|||
unLink(symbol) { |
|||
// 取消买线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapBuyList_${symbol}` |
|||
}); |
|||
// 取消卖线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapSellList_${symbol}` |
|||
}); |
|||
// 取消成交 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapTradeList_${symbol}` |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,198 +0,0 @@ |
|||
<template> |
|||
<div class="markets-pair-list handicap handicapRight"> |
|||
<div class="nav nav-pills p-3 fn-center d-block fn-22 w-100"> |
|||
<div class="nav-item"> |
|||
{{$t("contract.f8")}} |
|||
</div> |
|||
</div> |
|||
<div class="col-12 p-0 bg-plain"> |
|||
<!-- 实时成交 --> |
|||
<div class="real-time mt-1 pt-2 px-3 pb-0"> |
|||
<div class="d-flex text-secondary fn-12"> |
|||
<div class="w-10/24"> |
|||
{{ $t("contract.b1") }} |
|||
</div> |
|||
<div class="w-7/24">{{ $t("contract.d8") }}(USDT)</div> |
|||
<div class="w-7/24 text-right"> |
|||
{{ $t("contract.e1") }}({{ $t("contract.e2") }}) |
|||
</div> |
|||
</div> |
|||
<div class="d-flex fn-12" v-for="(item, idx) in tradeList" :key="idx"> |
|||
<div class="w-10/24"> |
|||
{{ parseTime(item.ts, false, "{h}:{i}:{s}") }} |
|||
</div> |
|||
<div class="w-7/24" :class="item.direction=='buy'?'increace':'decreace'"> |
|||
{{ item.price }} |
|||
</div> |
|||
<div class="w-7/24 text-right"> |
|||
{{ omitTo(item.amount, 2) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract.js"; |
|||
import date from "@/utils/class/date.js"; |
|||
import math from "@/utils/class/math.js"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
tab: 2, |
|||
sellList: [], |
|||
buyList: [], |
|||
tradeList: [], |
|||
newPriceObj: {} |
|||
}; |
|||
}, |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
}, |
|||
wsUrl: { |
|||
default: "", |
|||
type: String, |
|||
required: true |
|||
}, |
|||
ws: {} |
|||
}, |
|||
watch: { |
|||
symbol(n, o) { |
|||
this.getMarketInfo(); |
|||
this.linkSocket(); |
|||
if (o) { |
|||
this.unLink(o); |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
msg() { |
|||
return { |
|||
buy: `swapBuyList_${this.symbol}`, |
|||
sell: `swapSellList_${this.symbol}`, |
|||
trade: `swapTradeList_${this.symbol}` |
|||
}; |
|||
}, |
|||
sellListShow() { |
|||
let list = this.sellList.splice(0, 12); |
|||
let total = 0; |
|||
list.forEach(item => { |
|||
item.total = total += item.amount; |
|||
}); |
|||
return list.reverse(); |
|||
}, |
|||
buyListShow() { |
|||
let list = this.buyList.splice(0, 12); |
|||
let total = 0; |
|||
list.forEach(item => { |
|||
item.total = total += item.amount; |
|||
}); |
|||
return list; |
|||
} |
|||
}, |
|||
created() { |
|||
if (this.symbol) { |
|||
this.getMarketInfo(); |
|||
this.linkSocket(); |
|||
} |
|||
}, |
|||
// 获取盘口 |
|||
methods: { |
|||
parseTime: date.parseTime, |
|||
omitTo: math.omitTo, |
|||
getMarketInfo() { |
|||
let data = { |
|||
symbol: this.symbol |
|||
}; |
|||
Contract.getMarketInfo(data).then(res => { |
|||
this.sellList = res.swapSellList; |
|||
this.buyList = res.swapBuyList; |
|||
this.tradeList = res.swapTradeList; |
|||
// console.log(this.tradeList) |
|||
this.newPriceObj = this.tradeList[0]; |
|||
this.$emit("input", this.newPriceObj); |
|||
}); |
|||
}, |
|||
// 计算深度 |
|||
getValue(amount) { |
|||
const arr = this.buyListShow |
|||
.concat(this.sellListShow) |
|||
.map(item => item.amount); |
|||
let max = Math.max(...arr); |
|||
return math.division(amount, max, 2) * 100; |
|||
}, |
|||
// 连接socket |
|||
linkSocket() { |
|||
if (this.ws.socket.readyState == 1) { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.buy |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.sell |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.trade |
|||
}); |
|||
} else { |
|||
this.ws.on("open", () => { |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.buy |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.sell |
|||
}); |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: this.msg.trade |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
this.ws.on("message", res => { |
|||
let { data, msg, code, sub, type, status, cmd } = res; |
|||
if (sub == this.msg.buy) { |
|||
this.buyList = data; |
|||
} else if (sub == this.msg.sell) { |
|||
this.sellList = data; |
|||
} else if (sub == this.msg.trade) { |
|||
this.tradeList.unshift(data); |
|||
this.tradeList.pop(); |
|||
this.newPriceObj = data; |
|||
this.$emit("input", this.newPriceObj); |
|||
} else if (cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 取消订阅 |
|||
unLink(symbol) { |
|||
// 取消买线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapBuyList_${symbol}` |
|||
}); |
|||
// 取消卖线 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapSellList_${symbol}` |
|||
}); |
|||
// 取消成交 |
|||
this.ws.send({ |
|||
cmd: "unsub", |
|||
msg: `swapTradeList_${symbol}` |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,187 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('contract.a9')}}</th> |
|||
<th>{{$t('contract.b0')}}</th> |
|||
<th>{{$t('contract.b1')}}</th> |
|||
<th>{{$t('contract.b2')}}</th> |
|||
<th>{{$t('contract.b3')}}/{{$t('contract.b4')}}</th> |
|||
<th>{{$t('contract.b5')}}/{{$t('contract.b6')}}</th> |
|||
<th>{{$t('contract.b7')}}</th> |
|||
<th>{{$t('contract.b8')}}</th> |
|||
<th>{{$t('contract.j0')}}</th> |
|||
<!-- <th>{{$t('contract.k1')}}</th> --> |
|||
<th>{{$t('contract.b9')}}</th> |
|||
<!-- <th>{{$t('contract.c0')}}</th> --> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{ item.symbol }}/USDT</td> |
|||
<td>{{ item.lever_rate }}X</td> |
|||
<td>{{ item.updated_ats | parseTime}}</td> |
|||
<!-- <td>{{ item.created_at | parseTime}}</td> --> |
|||
<td>{{ cals(item.side, item.order_type) }}</td> |
|||
<td>{{ item.traded_amount }}/{{ item.amount }}</td> |
|||
<td>{{item.avg_price||'--'}}/{{ item.entrust_price || "--" }}</td> |
|||
<td>{{ item.margin * 1 }}</td> |
|||
<td>{{ item.fee * 1 }}</td> |
|||
<td> |
|||
{{item.profit||'--'}} |
|||
</td> |
|||
<!-- <td> |
|||
{{item.settle_profit||'--'}} |
|||
</td> --> |
|||
<td>{{ status(item.status) }}</td> |
|||
<!-- <td> |
|||
<button class="btn btn-sm btn-primary" @click="showDetail(item)"> |
|||
{{$t('contract.g4')}} |
|||
</button> |
|||
</td> --> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="12"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="p-2"> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="CurrentObj.per_page" |
|||
@current-change="changePageCurrent" |
|||
:total="CurrentObj.total" |
|||
></el-pagination> |
|||
</div> |
|||
<!-- 撤销 --> |
|||
<div |
|||
class="modal fade" |
|||
id="history" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="backClose" |
|||
aria-hidden="true" |
|||
> |
|||
<div |
|||
class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" |
|||
> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="backClose">{{$t('contract.g5')}}</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div class="markets-pair-list"> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('contract.d8')}}</th> |
|||
<th>{{$t('contract.e1')}}</th> |
|||
<th>{{$t('contract.b8')}}</th> |
|||
<th>{{$t('contract.g6')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in order_details" :key="item.id"> |
|||
<td>{{ item.unit_price }}</td> |
|||
<td>{{ item.trade_amount }}</td> |
|||
<td>{{ item.trade_buy_fee }}</td> |
|||
<td>{{ item.created_at }}</td> |
|||
</tr> |
|||
<tr v-if="!order_details.length"> |
|||
<td colspan="4"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract"; |
|||
import math from "@/utils/class/math"; |
|||
export default { |
|||
name: "history-commission", |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
CurrentObj: { |
|||
page: 1 |
|||
}, |
|||
list: [], |
|||
order_details: [] |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
created() { |
|||
this.getHistoryEntrust(); |
|||
}, |
|||
methods: { |
|||
status(status) { |
|||
switch (status) { |
|||
case 0: |
|||
return this.$t('contract.c6'); |
|||
case 1: |
|||
return this.$t('contract.c7'); |
|||
case 2: |
|||
return this.$t('contract.c8'); |
|||
case 3: |
|||
return this.$t('contract.c9'); |
|||
} |
|||
}, |
|||
cals(side, order_type) { |
|||
// order_type - side |
|||
let map = { |
|||
"1-1": this.$t('contract.d0'), |
|||
"1-2": this.$t('contract.d1'), |
|||
"2-1": this.$t('contract.d2'), |
|||
"2-2": this.$t('contract.d3') |
|||
}; |
|||
return map[`${side}-${order_type}`]; |
|||
}, |
|||
changePageCurrent(idx) { |
|||
this.CurrentObj.page = idx; |
|||
this.getHistoryEntrust(); |
|||
}, |
|||
getHistoryEntrust() { |
|||
let data = { |
|||
page: this.CurrentObj.page |
|||
}; |
|||
Contract.getHistoryEntrust(data).then(res => { |
|||
this.list = res.data; |
|||
this.CurrentObj = res; |
|||
}); |
|||
}, |
|||
showDetail(item) { |
|||
Contract.getEntrustDealList({ |
|||
entrust_id: item.id, |
|||
symbol: item.symbol |
|||
}).then(res => { |
|||
this.order_details = res; |
|||
$("#history").modal("show"); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,5 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
交易记录 |
|||
</div> |
|||
</template> |
|||
@ -1,634 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="d-flex justify-content-between py-2 px-3"> |
|||
<div> |
|||
<button class="btn btn-sm btn-outline-danger" @click="fullFlat"> |
|||
{{$t('contract.k2')}} |
|||
</button> |
|||
</div> |
|||
<!-- <div |
|||
class="d-flex align-items-center" |
|||
@click="$emit('isall', !holdPositionAll)" |
|||
> |
|||
{{ $t("contract.i6") }} |
|||
<input |
|||
type="checkbox" |
|||
class="ml-1" |
|||
:checked="holdPositionAll" |
|||
style="pointer-events: none" |
|||
/> |
|||
</div> --> |
|||
</div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{ $t("contract.a9") }}</th> |
|||
<th>{{ $t("contract.b7") }}</th> |
|||
<th>{{ $t("contract.b0") }}</th> |
|||
<!-- <th>{{ $t("contract.g7") }}</th> --> |
|||
<!-- <th>{{ $t("contract.g7") }}（{{ $t("contract.e2") }}）</th> --> |
|||
<th>{{ $t("contract.i3") }}</th> |
|||
<!-- <th>{{ $t("contract.g8") }}（{{ $t("contract.e2") }}）</th> |
|||
<th>{{ $t("contract.a5") }}（{{ $t("contract.e2") }}）</th> --> |
|||
<th>{{ $t("contract.g9") }}</th> |
|||
<th>{{ $t("contract.g3") }}</th> |
|||
<th>{{ $t("contract.a8") }}</th> |
|||
<th >{{ $t("contract.a6") }}</th> |
|||
<th>{{ $t("contract.h0") }}</th> |
|||
<th>{{ $t("contract.i7") }} /{{ $t("contract.i8") }}</th> |
|||
<th width="18%">{{ $t("contract.c0") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item,index) in showList" :key="item.id" @click="getactiveItem(index)"> |
|||
<td>{{ item.pair_name }}</td> |
|||
<td>{{ item.position_margin }}</td> |
|||
<td>{{ item.lever_rate }}X</td> |
|||
<!-- <td>{{ item.hold_position }}</td> --> |
|||
<td>{{ item.side == 1 ? $t("contract.i4") : $t("contract.i5") }}</td> |
|||
<!-- <td>{{ item.avail_position }}</td> |
|||
<td>{{ item.freeze_position }}</td> --> |
|||
<td>{{ item.avg_price * 1 }}</td> |
|||
<td>{{ item.realtimePrice }}</td> |
|||
<td>{{ item.flatPrice }}</td> |
|||
<td :class="item.unRealProfit>0?'increace':item.unRealProfit<0?'decreace':''">{{ (parseFloat(item.unRealProfit)).toFixed(2) }}</td> |
|||
<td>{{ item.profitRate }}</td> |
|||
<td>{{ item.tpPrice || "--" }}/{{ item.slPrice || "--" }}</td> |
|||
<td> |
|||
<button |
|||
class="btn btn-sm btn-danger mb-1" |
|||
@click="liquidation(item)" |
|||
> |
|||
{{ $t("contract.d6") }} |
|||
</button> |
|||
<!-- <button |
|||
class="btn btn-sm btn-outline-danger mb-1" |
|||
@click="allLiquidation(item)" |
|||
> |
|||
{{ $t("contract.h1") }} |
|||
</button> --> |
|||
<!-- <button |
|||
class="btn btn-sm btn-outline-danger mb-1" |
|||
@click="reverse(item)" |
|||
> |
|||
{{$t('contract.k3')}} |
|||
</button> --> |
|||
<button |
|||
class="btn btn-sm btn-primary mb-1" |
|||
@click="toStoploss(item)" |
|||
> |
|||
{{ $t("contract.i9") }} |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!showList.length"> |
|||
<td colspan="13"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<!-- 平仓 --> |
|||
<div |
|||
class="modal fade" |
|||
id="exampleModal" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="exampleModalLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalLabel"> |
|||
{{ $t("contract.d6") }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form> |
|||
<div class="form-group"> |
|||
<label for="recipient-name" class="col-form-label" |
|||
>{{ $t("contract.d8") }}:</label |
|||
> |
|||
<div class="input-group"> |
|||
<input |
|||
type="text" |
|||
v-model="form.entrust_price" |
|||
class="form-control" |
|||
id="recipient-name" |
|||
v-if="activeItem.closeType == 1" |
|||
/> |
|||
<input |
|||
type="text" |
|||
disabled |
|||
:value="$t('contract.d9')" |
|||
class="form-control" |
|||
id="recipient-name" |
|||
v-if="activeItem.closeType == 2" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<button |
|||
type="button" |
|||
@click=" |
|||
activeItem.closeType == 1 |
|||
? (activeItem.closeType = 2) |
|||
: (activeItem.closeType = 1) |
|||
" |
|||
class="btn btn-outline-primary" |
|||
> |
|||
{{ |
|||
activeItem.closeType == 1 |
|||
? $t("contract.e0") |
|||
: $t("contract.d9") |
|||
}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="message-text" class="col-form-label" |
|||
>{{ $t("contract.e1") }}:</label |
|||
> |
|||
<input |
|||
type="number" |
|||
v-model="form.amount" |
|||
class="form-control" |
|||
id="message-text" |
|||
/> |
|||
</div> |
|||
<div> |
|||
{{ $t("contract.e9") }} |
|||
{{ activeItem.avail_position }} |
|||
</div> |
|||
<el-slider |
|||
:value="activeStep" |
|||
@input="sliderChange" |
|||
:format-tooltip="tooltip" |
|||
:step="25" |
|||
show-stops |
|||
></el-slider> |
|||
</form> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("contract.c4") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary" |
|||
@click="closePosition" |
|||
> |
|||
{{ $t("contract.c5") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 市价平仓 --> |
|||
<div |
|||
class="modal fade" |
|||
id="allLiquidation" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="allexampleModalLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="allexampleModalLabel"> |
|||
{{ $t("contract.d6") }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
{{ $t("contract.h2") }}{{ activeItem.pair_name |
|||
}}{{ $t("contract.a9") }}？ |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("contract.c4") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary" |
|||
@click="closeAllPosition" |
|||
> |
|||
{{ $t("contract.c5") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 一键全平 --> |
|||
<div |
|||
class="modal fade" |
|||
id="fullFlat" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="fullFlatLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="fullFlatLabel"> |
|||
{{ $t("contract.d6") }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body">{{$t('contract.k4')}}？</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("contract.c4") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary" |
|||
@click="onekeyAllFlat" |
|||
> |
|||
{{ $t("contract.c5") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 一键反向 --> |
|||
<div |
|||
class="modal fade" |
|||
id="reverse" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="reverseLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="reverseLabel"> |
|||
{{ activeItem.pair_name }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body">{{$t('contract.k5')}}？</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("contract.c4") }} |
|||
</button> |
|||
<button type="button" class="btn btn-primary" @click="onekeyReverse"> |
|||
{{ $t("contract.c5") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 止盈止损 --> |
|||
<div |
|||
class="modal fade" |
|||
id="stoploss" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="stoplosslabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="stoplosslabel"> |
|||
{{ $t("contract.i9") }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div class="info border-bottom pb-2"> |
|||
<div> |
|||
<span class="h4"> |
|||
{{ activeItem.pair_name }} |
|||
</span> |
|||
<span class="text-warning"> {{ activeItem.lever_rate }}X </span> |
|||
<span class="text-success">{{ |
|||
activeItem.side == 1 ? $t("contract.i4") : $t("contract.i5") |
|||
}}</span> |
|||
</div> |
|||
<div class="d-flex"> |
|||
<div class="item d-flex mr-4"> |
|||
<div class="mr-2 text-secondary">{{ $t("contract.j2") }}</div> |
|||
<div>{{ activeItem.avg_price * 1 }}</div> |
|||
</div> |
|||
<div class="item d-flex"> |
|||
<div class="mr-2 text-secondary">{{ $t("contract.j1") }}</div> |
|||
<div>{{ activeItem.realtimePrice }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="py-2" v-if="false"> |
|||
<el-checkbox :value="true">设置止盈</el-checkbox> |
|||
<el-checkbox :value="true">设置止损</el-checkbox> |
|||
</div> |
|||
<form> |
|||
<div class="form-group"> |
|||
<label class="col-form-label">{{ $t("contract.j3") }}:</label> |
|||
<div class="input-group"> |
|||
<input |
|||
type="text" |
|||
class="form-control" |
|||
v-model="strategyForm.tp_trigger_price" |
|||
/> |
|||
</div> |
|||
<small |
|||
class="form-text text-muted" |
|||
v-if="strategyForm.tp_trigger_price" |
|||
> |
|||
{{ $t("contract.j5") }}{{ strategyForm.tp_trigger_price |
|||
}}{{ $t("contract.j6") }} |
|||
{{ |
|||
activeItem.side == 1 |
|||
? many(activeItem, strategyForm.tp_trigger_price) |
|||
: air(activeItem, strategyForm.tp_trigger_price) |
|||
}} |
|||
USDT |
|||
</small> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label class="col-form-label">{{ $t("contract.j4") }}:</label> |
|||
<div class="input-group"> |
|||
<input |
|||
type="text" |
|||
class="form-control" |
|||
v-model="strategyForm.sl_trigger_price" |
|||
/> |
|||
</div> |
|||
<small |
|||
class="form-text text-muted" |
|||
v-if="strategyForm.sl_trigger_price" |
|||
> |
|||
{{ $t("contract.j5") }}{{ strategyForm.sl_trigger_price |
|||
}}{{ $t("contract.j7") }} |
|||
{{ |
|||
activeItem.side == 1 |
|||
? many(activeItem, strategyForm.sl_trigger_price) |
|||
: air(activeItem, strategyForm.sl_trigger_price) |
|||
}} |
|||
USDT |
|||
</small> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("contract.c4") }} |
|||
</button> |
|||
<button type="button" class="btn btn-primary" @click="stoploss"> |
|||
{{ $t("contract.c5") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Contract from "@/api/contract"; |
|||
import math from "@/utils/class/math"; |
|||
export default { |
|||
name: "hold-position", |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false, |
|||
}, |
|||
holdPositionList: { |
|||
default: () => [], |
|||
type: Array, |
|||
required: false, |
|||
}, |
|||
newPrice: { |
|||
default: 0, |
|||
type: Number|String, |
|||
required: false, |
|||
}, |
|||
holdPositionAll: { |
|||
default: false, |
|||
type: Boolean, |
|||
}, |
|||
symbolDetail: { |
|||
default: () => {}, |
|||
type: Object, |
|||
}, |
|||
}, |
|||
computed: { |
|||
showList() { |
|||
return this.holdPositionList.filter((item) => item.hold_position); |
|||
}, |
|||
activeStep() { |
|||
// return 0 |
|||
if (!this.form.amount || !this.activeItem.avail_position) return 100; |
|||
let num = (this.form.amount / this.activeItem.avail_position) * 100; |
|||
return num; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [], |
|||
activeItem: {}, |
|||
form: { |
|||
entrust_price: "", |
|||
amount: "", |
|||
}, |
|||
strategyForm: { |
|||
symbol: "", |
|||
position_side: "", |
|||
tp_trigger_price: "", |
|||
sl_trigger_price: "", |
|||
}, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
created() {}, |
|||
methods: { |
|||
tooltip($ev) { |
|||
return Math.round($ev) + "%"; |
|||
}, |
|||
// 设置数量 |
|||
sliderChange($ev) { |
|||
this.form.amount = Math.round( |
|||
(this.activeItem.avail_position * $ev) / 100 |
|||
); |
|||
}, |
|||
// 多仓盈亏 |
|||
many(item, newPrice) { |
|||
let face = this.symbolDetail.unit_amount; |
|||
return math.omitTo( |
|||
((newPrice - item.avg_price) * item.avail_position * face) / |
|||
item.avg_price, |
|||
4 |
|||
); |
|||
}, |
|||
// 空仓盈亏 |
|||
air(item, newPrice) { |
|||
let face = this.symbolDetail.unit_amount; |
|||
return math.omitTo( |
|||
((item.avg_price - newPrice) * item.avail_position * face) / |
|||
item.avg_price, |
|||
4 |
|||
); |
|||
}, |
|||
// 平仓弹窗 |
|||
liquidation(item) { |
|||
this.activeItem = item; |
|||
// console.info(item) |
|||
this.form.entrust_price = this.newPrice; |
|||
this.form.amount = item.avail_position |
|||
this.$set(this.activeItem, "closeType", 2); |
|||
$("#exampleModal").modal("show"); |
|||
}, |
|||
closePosition() { |
|||
let data = { |
|||
side: this.activeItem.side == 1 ? 2 : 1, |
|||
type: this.activeItem.closeType, |
|||
symbol: this.activeItem.symbol, |
|||
entrust_price: this.form.entrust_price || 0, |
|||
amount: this.form.amount, |
|||
}; |
|||
Contract.closePosition(data).then(() => { |
|||
this.form.entrust_price = ""; |
|||
this.form.amount = ""; |
|||
this.$message.success(this.$t("contract.f6")); |
|||
this.$emit("position"); |
|||
$("#exampleModal").modal("hide"); |
|||
}); |
|||
}, |
|||
// 全平弹窗 |
|||
allLiquidation(item) { |
|||
this.activeItem = item; |
|||
$("#allLiquidation").modal("show"); |
|||
}, |
|||
closeAllPosition() { |
|||
let data = { |
|||
symbol: this.activeItem.symbol, |
|||
side: this.activeItem.side == 1 ? 2 : 1, |
|||
}; |
|||
Contract.closeAllPosition(data).then(() => { |
|||
this.$message.success( |
|||
`${this.$t("contract.h3")}${this.activeItem.pair_name}${this.$t( |
|||
"contract.h4" |
|||
)}` |
|||
); |
|||
this.$emit("position"); |
|||
$("#allLiquidation").modal("hide"); |
|||
}); |
|||
}, |
|||
// 止盈止损 |
|||
toStoploss(item) { |
|||
this.activeItem = item; |
|||
this.strategyForm.symbol = this.activeItem.symbol; |
|||
this.strategyForm.position_side = this.activeItem.side; |
|||
$("#stoploss").modal("show"); |
|||
}, |
|||
stoploss() { |
|||
Contract.setStrategy(this.strategyForm).then((res) => { |
|||
$("#stoploss").modal("hide"); |
|||
this.strategyForm.tp_trigger_price = ""; |
|||
this.strategyForm.sl_trigger_price = ""; |
|||
this.$message.success(this.$t("contract.k0")); |
|||
}); |
|||
}, |
|||
// 一键全平 |
|||
fullFlat() { |
|||
$("#fullFlat").modal("show"); |
|||
}, |
|||
onekeyAllFlat() { |
|||
Contract.onekeyAllFlat().then((res) => { |
|||
$("#fullFlat").modal("hide"); |
|||
this.$message.success(this.$t('contract.k6')); |
|||
this.$emit("position"); |
|||
}); |
|||
}, |
|||
// 一键反向 |
|||
reverse(item) { |
|||
this.activeItem = item; |
|||
$("#reverse").modal("show"); |
|||
}, |
|||
onekeyReverse() { |
|||
let data = { |
|||
symbol: this.activeItem.symbol, |
|||
position_side: this.activeItem.side, |
|||
}; |
|||
Contract.onekeyReverse(data).then((res) => { |
|||
$("#reverse").modal("hide"); |
|||
this.$message.success(this.$t('contract.k7')); |
|||
this.$emit("position"); |
|||
}); |
|||
}, |
|||
//点击订单获取订单indexc传回父组件查询该订单详情 |
|||
getactiveItem(index){ |
|||
this.$emit("setactive",index); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped"> |
|||
.increace{ |
|||
color: #53b987; |
|||
} |
|||
.decreace{ |
|||
color: #ff231f; |
|||
} |
|||
</style> |
|||
@ -1,333 +0,0 @@ |
|||
<template> |
|||
<div class="contract-page"> |
|||
<div class="page-top d-flex pt-2"> |
|||
<div class="left bg-plain mr-1"> |
|||
<div |
|||
class="markets-pair-list fn-12" |
|||
style="max-height: 600px; |
|||
overflow: scroll;" |
|||
> |
|||
<template v-for="parent in contractList"> |
|||
<div class="px-3 text-primary" :key="parent.coin_name"> |
|||
{{ parent.coin_name }} |
|||
</div> |
|||
<table class="table" :key="parent.coin_name + 1"> |
|||
<thead> |
|||
<tr class="text-secondary"> |
|||
<th class="">{{ $t("contract.h5") }}</th> |
|||
<th class="text-right">{{ $t("contract.g3") }}</th> |
|||
<th class="text-right"> |
|||
{{ $t("contract.h6") }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr |
|||
v-for="item in parent.marketInfoList" |
|||
:key="item.symbol" |
|||
:class="{ active: item.symbol == activeSymbol }" |
|||
@click="activeSymbol = item.symbol" |
|||
> |
|||
<td class="w-10/24"> |
|||
{{ item.symbol }}/{{ parent.coin_name }} |
|||
</td> |
|||
<td |
|||
class="w-6/24 text-right" |
|||
> |
|||
{{ item.price }} |
|||
</td> |
|||
<td |
|||
class="w-8/24 text-right" |
|||
:class="item.increase < 0 ? 'decreace' : 'increace'" |
|||
> |
|||
{{ item.increaseStr }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</template> |
|||
</div> |
|||
<account class="bg-plain" :accountInfo="accountInfo"/> |
|||
</div> |
|||
<div class="kline-box flex-fill mr-2"> |
|||
<div |
|||
class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" |
|||
> |
|||
<div class="d-flex align-items-center"> |
|||
<div class="coin d-flex align-items-center fn-20"> |
|||
{{ activeContract.pair_name }} |
|||
</div> |
|||
<div |
|||
class="price px-3 border-right" |
|||
:class="{ |
|||
decreace: activeContract.increase < 0, |
|||
increace: activeContract.increase >= 0 |
|||
}" |
|||
> |
|||
<span class="current">{{ activeContract.price }}$</span> |
|||
|
|||
<span class="zf">{{ activeContract.increaseStr }}</span> |
|||
</div> |
|||
<!-- 币种价值数据 --> |
|||
<div class="d-flex fn-12"> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
{{ $t("contract.h7") }} |
|||
</div> |
|||
<div> |
|||
{{ activeContract.high }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
{{ $t("contract.h8") }} |
|||
</div> |
|||
<div> |
|||
{{ activeContract.low }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24H{{ $t("contract.h9") }}（{{ $t("contract.e2") }}） |
|||
</div> |
|||
<div> |
|||
{{ activeContract.vol }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div><theme-change /></div> |
|||
</div> |
|||
<kline |
|||
:activeCoin="{ pair_name: activeContract.pair_name }" |
|||
v-if="activeContract.pair_name" |
|||
:contract="true" |
|||
:wsUrl="wsUrl" |
|||
/> |
|||
<!-- 交易 --> |
|||
<exchange-store |
|||
:holdPositionList="holdPositionList" |
|||
:symbol="activeSymbol" |
|||
:defaultPrice="defaultPrice" |
|||
:newPriceObj="newPriceObj" |
|||
:contractOpen="contractOpen" |
|||
@accountInfo="accountInfo = $event" |
|||
@position="holdPosition" |
|||
@getSymbolDetail="symbolDetail=$event" |
|||
/> |
|||
</div> |
|||
<!-- 盘口 --> |
|||
<handicap |
|||
@input="newPriceObj = $event" |
|||
@selectprice="defaultPrice = $event" |
|||
:symbol="activeSymbol" |
|||
:wsUrl="wsUrl" |
|||
:ws="ws" |
|||
class="mr-2" |
|||
/> |
|||
<!-- 成交记录 --> |
|||
<handicapRight |
|||
@input="newPriceObj = $event" |
|||
@selectprice="defaultPrice = $event" |
|||
:symbol="activeSymbol" |
|||
:wsUrl="wsUrl" |
|||
:ws="ws" |
|||
class="mr-2" |
|||
/> |
|||
</div> |
|||
<!-- 交易 --> |
|||
<page-bottom |
|||
@position="holdPosition" |
|||
@isall=" |
|||
holdPositionAll = $event; |
|||
holdPosition(); |
|||
" |
|||
@setactiveItem="setactiveItem" |
|||
:accountInfo="accountInfo" |
|||
:newPriceObj="newPriceObj" |
|||
:holdPositionList="holdPositionList" |
|||
:holdPositionAll="holdPositionAll" |
|||
:symbol="activeSymbol" |
|||
:symbolDetail="symbolDetail" |
|||
/> |
|||
<div |
|||
class="modal fade" |
|||
id="openContract" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="contractClose" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="contractClose"> |
|||
{{ contractAgreement.title }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div v-html="contractAgreement.body"></div> |
|||
</div> |
|||
<div class="modal-footer d-flex justify-content-center"> |
|||
|
|||
<button type="button" class="btn btn-primary" @click="opening"> |
|||
{{$t('contract.j8')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import kline from "../option/kline"; |
|||
import handicap from "./handicap.vue"; |
|||
import handicapRight from "./handicapRight.vue"; |
|||
import account from "./account.vue"; |
|||
import exchangeStore from "./exchange-store.vue"; |
|||
import pageBottom from "./page-bottom.vue"; |
|||
import Contract from "../../api/contract"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
export default { |
|||
components: { |
|||
kline, |
|||
handicap, |
|||
account, |
|||
exchangeStore, |
|||
pageBottom, |
|||
handicapRight |
|||
}, |
|||
data() { |
|||
return { |
|||
contractList: [], |
|||
activeSymbol: "", |
|||
holdPositionAll: false, |
|||
holdPositionList: [], |
|||
newPriceObj: {}, |
|||
accountInfo: {}, |
|||
defaultPrice: "", |
|||
wsUrl: this.Globals.Server.Path.WS1, |
|||
ws: new Socket(this.Globals.Server.Path.WS1), |
|||
_time: null, |
|||
contractOpen: false, |
|||
contractAgreement: {}, |
|||
symbolDetail:{} |
|||
}; |
|||
}, |
|||
computed: { |
|||
activeContract() { |
|||
return ( |
|||
this.contractList |
|||
.map(item => item.marketInfoList) |
|||
.flat() |
|||
.find(item => item.symbol == this.activeSymbol) || {} |
|||
); |
|||
}, |
|||
isLogin() { |
|||
return Boolean(localStorage.token); |
|||
} |
|||
}, |
|||
watch: { |
|||
activeSymbol() { |
|||
this.holdPosition(); |
|||
}, |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this._time); |
|||
}, |
|||
created() { |
|||
// this.openStatus(); |
|||
this.getMarketList(); |
|||
this.holdPosition(); |
|||
this._time = setInterval(() => { |
|||
if (this.contractOpen) { |
|||
this.holdPosition(); |
|||
} |
|||
}, 3000); |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
}); |
|||
}, |
|||
//三秒更新一次数据 |
|||
mounted: function () { |
|||
setInterval(() => { |
|||
this.holdPosition(); |
|||
}, 3000) |
|||
}, |
|||
methods: { |
|||
swapMarketList() { |
|||
let msg = "swapMarketList"; |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: msg |
|||
}); |
|||
this.ws.on("message", res => { |
|||
let { data, sub,cmd } = res; |
|||
|
|||
if (sub == msg) { |
|||
this.contractList = data; |
|||
}else if (cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 获取合约市场 |
|||
getMarketList() { |
|||
Contract.getMarketList().then(res => { |
|||
this.contractList = res; |
|||
// 默认值 |
|||
let firstParent = res[0]; |
|||
if (firstParent) { |
|||
let first = firstParent.marketInfoList[0]; |
|||
if (first) this.activeSymbol = first.symbol; |
|||
} |
|||
}); |
|||
}, |
|||
// 获取持仓 |
|||
holdPosition() { |
|||
if (!this.isLogin) return; |
|||
let data = { |
|||
symbol: (this.holdPositionAll && this.activeSymbol) || "" |
|||
}; |
|||
Contract.holdPosition(data, { loading: false }).then(res => { |
|||
this.holdPositionList = res; |
|||
}); |
|||
}, |
|||
// 获取永续合约开通状态 |
|||
openStatus() { |
|||
if(!this.isLogin) return; |
|||
Contract.openStatus().then(res => { |
|||
this.contractOpen = res.open; |
|||
if (!this.contractOpen) { |
|||
this.contractAgreement = res.contractAgreement; |
|||
$("#openContract").modal("show"); |
|||
} |
|||
}); |
|||
}, |
|||
// 开通永续合约 |
|||
opening() { |
|||
Contract.opening().then(res => { |
|||
$("#openContract").modal("hide"); |
|||
this.contractOpen = true; |
|||
this.$message.success(this.$t('contract.j9')); |
|||
}); |
|||
}, |
|||
//获取某一个持仓订单的数据 |
|||
setactiveItem(index=0){ |
|||
this.accountInfo=this.holdPositionList[index] |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -1,399 +0,0 @@ |
|||
<template> |
|||
<div class="contract-page"> |
|||
<!-- <div class="banner-block col-xs-8">--> |
|||
<!-- <el-carousel :interval="6000" height="450px">--> |
|||
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|||
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|||
<!-- </el-carousel-item>--> |
|||
<!-- </el-carousel>--> |
|||
<!-- </div>--> |
|||
<div class="page-top d-flex pt-2"> |
|||
<div class="kline-box flex-fill mr-2"> |
|||
<div |
|||
class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between" |
|||
> |
|||
<div class="d-flex align-items-center"> |
|||
<div class="coin d-flex align-items-center"> |
|||
<el-popover |
|||
placement="bottom" |
|||
ref="popover" |
|||
width="400" |
|||
trigger="click" |
|||
> |
|||
<div slot="reference"> |
|||
{{ activeContract.pair_name }} |
|||
<el-button size="mini"> |
|||
<i class="el-icon-arrow-down"></i> |
|||
</el-button> |
|||
</div> |
|||
<div |
|||
class="markets-pair-list" |
|||
style="max-height:300px;overflow:auto;" |
|||
> |
|||
<template v-for="parent in contractList"> |
|||
<div class="px-3 text-primary" :key="parent.coin_name"> |
|||
{{ parent.coin_name }} |
|||
</div> |
|||
<table class="table" :key="parent.coin_name + 1"> |
|||
<thead> |
|||
<tr class="text-secondary"> |
|||
<th class="w-10/24">{{ $t("contract.h5") }}</th> |
|||
<th class="w-7/24">{{ $t("contract.g3") }}</th> |
|||
<th class="w-7/24 text-right"> |
|||
{{ $t("contract.h6") }} |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<!-- @click="activeSymbol = item.symbol" --> |
|||
<tr |
|||
v-for="item in parent.marketInfoList" |
|||
:key="item.symbol" |
|||
:class="{ active: item.symbol == activeSymbol }" |
|||
@click="ispopover1(item.symbol)" |
|||
> |
|||
<td class="w-10/24"> |
|||
{{ item.symbol }}/{{ parent.coin_name }} |
|||
</td> |
|||
<td |
|||
class="w-7/24 " |
|||
:class="item.increase < 0 ? 'decreace' : 'increase'" |
|||
> |
|||
{{ item.price }} |
|||
</td> |
|||
<td |
|||
class="w-7/24" |
|||
:class="item.increase < 0 ? 'decreace' : 'increase'" |
|||
> |
|||
{{ item.increaseStr }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</template> |
|||
</div> |
|||
</el-popover> |
|||
</div> |
|||
<div |
|||
class="price px-3 border-right" |
|||
:class="{ |
|||
decreace: activeContract.increase < 0, |
|||
increace: activeContract.increase >= 0 |
|||
}" |
|||
> |
|||
<span class="current">{{ activeContract.price }}$</span> |
|||
|
|||
<span class="zf">{{ activeContract.increaseStr }}</span> |
|||
</div> |
|||
<!-- 币种价值数据 --> |
|||
<div class="d-flex fn-12"> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24h {{ $t("contract.h7") }} |
|||
</div> |
|||
<div> |
|||
{{ activeContract.high }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24h {{ $t("contract.h8") }} |
|||
</div> |
|||
<div> |
|||
{{ activeContract.low }} |
|||
</div> |
|||
</div> |
|||
<div class="item px-2"> |
|||
<div class="title mb-1 text-secondary"> |
|||
24h {{ $t("contract.h9") }} |
|||
<!-- （{{ $t("contract.e2") }}） --> |
|||
<!-- (USDT) --> |
|||
</div> |
|||
<div> |
|||
{{ activeContract.vol }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div><theme-change /></div> --> |
|||
</div> |
|||
<kline |
|||
:activeCoin="{ pair_name: activeContract.pair_name }" |
|||
v-if="activeContract.pair_name" |
|||
:contract="true" |
|||
:wsUrl="wsUrl" |
|||
/> |
|||
</div> |
|||
<!-- 盘口 --> |
|||
<handicap |
|||
@input="newPriceObj = $event" |
|||
@selectprice="defaultPrice = $event" |
|||
:symbol="activeSymbol" |
|||
:wsUrl="wsUrl" |
|||
:ws="ws" |
|||
class="mr-2" |
|||
ref="handicap" |
|||
/> |
|||
<!-- 交易 --> |
|||
<exchange-store |
|||
:holdPositionList="holdPositionList" |
|||
:symbol="activeSymbol" |
|||
:defaultPrice="defaultPrice" |
|||
:newPriceObj="newPriceObj" |
|||
:contractOpen="contractOpen" |
|||
@accountInfo="accountInfo = $event" |
|||
@position="getLastHoldPosition" |
|||
@getSymbolDetail="symbolDetail=$event" |
|||
/> |
|||
</div> |
|||
<page-bottom |
|||
@position="getLastHoldPosition" |
|||
@isall=" |
|||
holdPositionAll = $event; |
|||
holdPosition(); |
|||
" |
|||
@setactiveItem="setactiveItem" |
|||
:accountInfo="accountInfo" |
|||
:newPriceObj="newPriceObj" |
|||
:holdPositionList="holdPositionList" |
|||
:holdPositionAll="holdPositionAll" |
|||
:symbol="activeSymbol" |
|||
:symbolDetail="symbolDetail" |
|||
/> |
|||
<div |
|||
class="modal fade" |
|||
id="openContract" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="contractClose" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="contractClose"> |
|||
{{ contractAgreement.title }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div v-html="contractAgreement.body"></div> |
|||
</div> |
|||
<div class="modal-footer d-flex justify-content-center"> |
|||
|
|||
<button type="button" class="btn btn-primary" @click="opening"> |
|||
{{$t('contract.j8')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import kline from "../option/kline"; |
|||
import handicap from "./handicap.vue"; |
|||
import account from "./account.vue"; |
|||
import exchangeStore from "./exchange-store.vue"; |
|||
import pageBottom from "./page-bottom.vue"; |
|||
import Contract from "../../api/contract"; |
|||
import Socket from "@/api/server/Socket.js"; |
|||
import Home from "@/api/home"; |
|||
import bus from "@/components/bus.js"; |
|||
export default { |
|||
components: { |
|||
kline, |
|||
handicap, |
|||
account, |
|||
exchangeStore, |
|||
pageBottom |
|||
}, |
|||
data() { |
|||
return { |
|||
contractList: [], |
|||
activeSymbol: "", |
|||
holdPositionAll: false, |
|||
holdPositionList: [], |
|||
newPriceObj: {}, |
|||
pcBannerList:[], |
|||
accountInfo: {}, |
|||
defaultPrice: "", |
|||
wsUrl: this.Globals.Server.Path.WS1, |
|||
ws: new Socket(this.Globals.Server.Path.WS1), |
|||
_time: null, |
|||
contractOpen: false, |
|||
contractAgreement: {}, |
|||
symbolDetail:{}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
activeContract(val) { |
|||
let contractList=this.contractList |
|||
.map(item => item.marketInfoList) |
|||
.flat() |
|||
.find(item => item.symbol == this.activeSymbol) || {} |
|||
if(val.price){ |
|||
delete contractList.price |
|||
} |
|||
return contractList; |
|||
}, |
|||
isLogin() { |
|||
return Boolean(localStorage.token); |
|||
} |
|||
}, |
|||
watch: { |
|||
activeSymbol() { |
|||
this.holdPosition(); |
|||
}, |
|||
}, |
|||
destroyed() { |
|||
clearInterval(this._time); |
|||
}, |
|||
created() { |
|||
// this.openStatus(); |
|||
this.getMarketList(); |
|||
this.holdPosition(); |
|||
this.indexList(); |
|||
this._time = setInterval(() => { |
|||
if (this.contractOpen) { |
|||
// mounted 中有定时器跑holdPosition了 |
|||
this.holdPosition(); |
|||
} |
|||
}, 3000); |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
}); |
|||
// console.info(this.$refs) |
|||
bus.$on('collapse', msg => { |
|||
this.activeContract.price =this.activeContract.symbol=='BTC'? (msg.close).toFixed(1):(msg.close).toFixed(3); |
|||
this.holdPositionList.map(item=>{ |
|||
if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price |
|||
}) |
|||
}); |
|||
}, |
|||
//三秒更新一次数据 |
|||
mounted: function () { |
|||
|
|||
setInterval(() => { |
|||
this.holdPosition(); |
|||
}, 2000) |
|||
}, |
|||
methods: { |
|||
ispopover1(item){ |
|||
this.activeSymbol=item; |
|||
this.$refs.popover.showPopper = false; |
|||
}, |
|||
swapMarketList() { |
|||
let msg = "swapMarketList"; |
|||
this.ws.send({ |
|||
cmd: "sub", |
|||
msg: msg |
|||
}); |
|||
this.ws.on("message", res => { |
|||
let { data, sub,cmd } = res; |
|||
|
|||
if (sub == msg) { |
|||
// console.log(data, '11--------------------') |
|||
if( data.symbol=='BTC' )(data.price).toFixed(1) |
|||
this.contractList = data; |
|||
}else if (cmd == "ping") { |
|||
this.ws.send({ |
|||
cmd: "pong" |
|||
}); |
|||
} |
|||
}); |
|||
this.ws.on('close',()=>{ |
|||
this.ws= new Socket(this.Globals.Server.Path.WS1), |
|||
console.log('链接关闭'); |
|||
this.wsOpen(); |
|||
}) |
|||
}, |
|||
wsOpen(){ |
|||
this.ws.on("open", () => { |
|||
this.swapMarketList(); |
|||
this.$refs.handicap.linkSocket() |
|||
}); |
|||
}, |
|||
// 获取合约市场 |
|||
getMarketList() { |
|||
Contract.getMarketList().then(res => { |
|||
this.contractList = res; |
|||
// 默认值 |
|||
let firstParent = res[0]; |
|||
if (firstParent) { |
|||
let first = firstParent.marketInfoList[0]; |
|||
if (first) this.activeSymbol = first.symbol; |
|||
} |
|||
}); |
|||
}, |
|||
// 获取持仓 |
|||
holdPosition() { |
|||
if (!this.isLogin) return; |
|||
let data = { |
|||
symbol: (this.holdPositionAll && this.activeSymbol) || "" |
|||
}; |
|||
Contract.holdPosition(data, { loading: false }).then(res => { |
|||
// console.info(res) |
|||
res.map(item=>{ |
|||
if(item.symbol==this.activeContract.symbol) item.realtimePrice=this.activeContract.price |
|||
}) |
|||
this.holdPositionList = res; |
|||
}); |
|||
}, |
|||
// 获取永续合约开通状态 |
|||
openStatus() { |
|||
if(!this.isLogin) return; |
|||
Contract.openStatus().then(res => { |
|||
this.contractOpen = res.open; |
|||
if (!this.contractOpen) { |
|||
this.contractAgreement = res.contractAgreement; |
|||
$("#openContract").modal("show"); |
|||
} |
|||
}); |
|||
}, |
|||
// 开通永续合约 |
|||
opening() { |
|||
Contract.opening().then(res => { |
|||
$("#openContract").modal("hide"); |
|||
this.contractOpen = true; |
|||
this.$message.success(this.$t('contract.j9')); |
|||
}); |
|||
}, |
|||
indexList() { |
|||
Home.indexList().then((res) => { |
|||
this.pcBannerList = res.pcBannerList |
|||
// setTimeout(() => { |
|||
// this.skroll(); |
|||
// }, 100); |
|||
}).catch((res) => {}); |
|||
}, |
|||
//获取某一个持仓订单的数据 |
|||
setactiveItem(index=0){ |
|||
this.accountInfo=this.holdPositionList[index] |
|||
}, |
|||
// 线上最新数据有延迟，多请求两次以保拿到 |
|||
getLastHoldPosition(){ |
|||
let ti = 0,timer=null; |
|||
timer = setInterval(()=>{ |
|||
this.holdPosition(); |
|||
ti++; |
|||
if(ti==3){ |
|||
clearInterval(timer); |
|||
} |
|||
}, 1000) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.justify-content-between ::v-deep .dark-app .theme-switch .theme-switch-button .left, .dark-app .theme-switch .theme-switch-button .right{ |
|||
color:white !important |
|||
} |
|||
</style> |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<div class="d-flex pb-2 mt-2"> |
|||
<div class="markets-pair-list page-bottom bg-plain flex-fill"> |
|||
<div class="nav nav-pills"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1;$emit('position')">{{$t('contract.i0')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{$t('contract.i1')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 3 }" @click="tab = 3">{{$t('contract.i2')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 4 }" @click="tab = 4">{{$t('wallet.contractFlow')}}（{{symbol}}）</a> |
|||
</div> |
|||
</div> |
|||
<div class="body"> |
|||
<!-- 持有仓位 --> |
|||
<hold-position @isall="$emit('isall',$event)" :symbolDetail="symbolDetail" :holdPositionAll="holdPositionAll" @position="$emit('position')" @setactive="setactive" :newPrice="newPriceObj.price" :holdPositionList="holdPositionList" :symbol="symbol" v-if="tab == 1" /> |
|||
<!-- 当前委托 --> |
|||
<current-commission :symbol="symbol" v-if="tab == 2" /> |
|||
<!-- 历史记录 --> |
|||
<history-commission :symbol="symbol" v-if="tab == 3" /> |
|||
<!-- 合约流水 --> |
|||
<transaction-record :symbol="symbol" v-if="tab == 4" /> |
|||
<!-- 划转记录 --> |
|||
<transfer-record :symbol="symbol" v-if="tab == 5" /> |
|||
</div> |
|||
</div> |
|||
<div class="ml-2"> |
|||
<!-- <account class="bg-plain" :accountInfo="accountInfo"/> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import holdPosition from "./hold-position.vue"; |
|||
import currentCommission from "./current-commission.vue"; |
|||
import historyCommission from "./history-commission.vue"; |
|||
import transactionRecord from "./transaction-record.vue"; |
|||
import transferRecord from "./transfer-record.vue"; |
|||
import account from "./account.vue"; |
|||
import Contract from "@/api/contract"; |
|||
export default { |
|||
name: "page-bottom", |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
}, |
|||
holdPositionList:{ |
|||
default:()=>[], |
|||
type:Array, |
|||
required:false |
|||
}, |
|||
newPriceObj:{ |
|||
default:()=>{}, |
|||
type:Object, |
|||
required:false |
|||
}, |
|||
accountInfo:{ |
|||
default:()=>{}, |
|||
type:Object, |
|||
required:false |
|||
}, |
|||
holdPositionAll:{ |
|||
default:false, |
|||
type:Boolean |
|||
}, |
|||
symbolDetail:{ |
|||
default:()=>{}, |
|||
type:Object |
|||
} |
|||
}, |
|||
components: { |
|||
holdPosition, |
|||
currentCommission, |
|||
historyCommission, |
|||
transactionRecord, |
|||
transferRecord, |
|||
account |
|||
}, |
|||
watch: { |
|||
symbol() {} |
|||
}, |
|||
created() { |
|||
if (this.symbol) { |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tab: 1 |
|||
}; |
|||
}, |
|||
methods: { |
|||
setactive(index){ |
|||
this.$emit("setactiveItem",index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,108 +0,0 @@ |
|||
<template> |
|||
<div class="d-flex pb-2 mt-2"> |
|||
<div class="markets-pair-list page-bottom bg-plain flex-fill"> |
|||
<div class="nav nav-pills"> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 1 }" @click="tab = 1;$emit('position')">{{$t('contract.i0')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 2 }" @click="tab = 2">{{$t('contract.i1')}}</a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 3 }" @click="tab = 3">{{$t('contract.i2')}}</a> |
|||
</div> |
|||
<!-- <div class="nav-item"> |
|||
<a class="nav-link" :class="{ active: tab == 4 }" @click="tab = 4">{{$t('wallet.contractFlow')}}（{{symbol}}）</a> |
|||
</div> --> |
|||
</div> |
|||
<div class="body"> |
|||
<!-- 持有仓位 --> |
|||
<hold-position @isall="$emit('isall',$event)" :symbolDetail="symbolDetail" :holdPositionAll="holdPositionAll" @position="$emit('position')" @setactive="setactive" :newPrice="newPriceObj.price" :holdPositionList="holdPositionList" :symbol="symbol" v-if="tab == 1" /> |
|||
<!-- 当前委托 --> |
|||
<current-commission :symbol="symbol" v-if="tab == 2" /> |
|||
<!-- 历史记录 --> |
|||
<history-commission :symbol="symbol" v-if="tab == 3" /> |
|||
<!-- 合约流水 --> |
|||
<transaction-record :symbol="symbol" v-if="tab == 4" /> |
|||
<!-- 划转记录 --> |
|||
<transfer-record :symbol="symbol" v-if="tab == 5" /> |
|||
</div> |
|||
</div> |
|||
<div class="ml-2"> |
|||
<account class="bg-plain" :accountInfo="accountInfo"/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import holdPosition from "./hold-position.vue"; |
|||
import currentCommission from "./current-commission.vue"; |
|||
import historyCommission from "./history-commission.vue"; |
|||
import transactionRecord from "./transaction-record.vue"; |
|||
import transferRecord from "./transfer-record.vue"; |
|||
import account from "./account.vue"; |
|||
import Contract from "@/api/contract"; |
|||
export default { |
|||
name: "page-bottom", |
|||
props: { |
|||
symbol: { |
|||
default: "", |
|||
type: String, |
|||
required: false |
|||
}, |
|||
holdPositionList:{ |
|||
default:()=>[], |
|||
type:Array, |
|||
required:false |
|||
}, |
|||
newPriceObj:{ |
|||
default:()=>{}, |
|||
type:Object, |
|||
required:false |
|||
}, |
|||
accountInfo:{ |
|||
default:()=>{}, |
|||
type:Object, |
|||
required:false |
|||
}, |
|||
holdPositionAll:{ |
|||
default:false, |
|||
type:Boolean |
|||
}, |
|||
symbolDetail:{ |
|||
default:()=>{}, |
|||
type:Object |
|||
} |
|||
}, |
|||
components: { |
|||
holdPosition, |
|||
currentCommission, |
|||
historyCommission, |
|||
transactionRecord, |
|||
transferRecord, |
|||
account |
|||
}, |
|||
watch: { |
|||
symbol() {} |
|||
}, |
|||
created() { |
|||
if (this.symbol) { |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tab: 1 |
|||
}; |
|||
}, |
|||
methods: { |
|||
setactive(index){ |
|||
this.$emit("setactiveItem",index); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.bg-plain{ |
|||
width: 367px !important; |
|||
font-size: 16px; |
|||
} |
|||
</style> |
|||
@ -1,76 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('wallet.dateTime')}}</th> |
|||
<th>{{$t('wallet.info')}}</th> |
|||
<th>{{$t('wallet.money')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{ item.created_at }}</td> |
|||
<td>{{ item.log_type_text }}</td> |
|||
<td |
|||
:class="{ |
|||
increace: item.amount >= 0, |
|||
decreace: item.amount < 0 |
|||
}" |
|||
> |
|||
{{ item.amount >= 0 ? "+" : "" }}{{ item.amount }} |
|||
{{ item.coin_name }} |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="3"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="CurrentObj.per_page" |
|||
@current-change="changePageCurrent" |
|||
:total="CurrentObj.total" |
|||
></el-pagination> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import wallet from "../../api/wallet.js"; |
|||
export default { |
|||
props: ["symbol"], |
|||
data() { |
|||
return { |
|||
CurrentObj: {}, |
|||
list: [] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
watch: { |
|||
symbol() { |
|||
this.CurrentObj.page = 1; |
|||
this.getList(); |
|||
} |
|||
}, |
|||
methods: { |
|||
changePageCurrent(idx) { |
|||
this.CurrentObj.page = idx; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
let data = { |
|||
page: this.CurrentObj.page, |
|||
symbol: this.symbol |
|||
}; |
|||
wallet.accountFlow(data).then(res => { |
|||
this.CurrentObj = res; |
|||
this.list = res.data; |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,5 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
划转记录 |
|||
</div> |
|||
</template> |
|||
@ -1,40 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 my-4"> |
|||
<el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: '/course' }">{{$t('course.college')}}</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{ path: '/course/list/novice' }">{{$t('course.noviceTutorial')}}</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{path:'/course/detail'}">{{$t('course.tutorialDetails')}}</el-breadcrumb-item> |
|||
</el-breadcrumb> |
|||
<div class="title h2 mt-4">{{$t('course.howToBuyBitcoin')}}</div> |
|||
<div class="single-subtitle d-flex justify-content-between border-bottom pb-2"> |
|||
<div class="text-muted">2018.1.11 limin.zhang</div> |
|||
</div> |
|||
<div class="edit-content py-4">12331 k ag kj sjh gkj sgjh sfdfg</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4">{{$t('course.recommendedCourse')}}</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="item in 4" :key="item"> |
|||
<div class="banner"> |
|||
<img src="http://iph.href.lu/260x150" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('course.howToBuyBitcoin')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,154 +0,0 @@ |
|||
<template> |
|||
<div class="course-page"> |
|||
<div class="banner"> |
|||
<div class="container pt-3"> |
|||
<div class="row py-5"> |
|||
<div class="col-5 left"> |
|||
<div class="title h3 text-light">{{$t('course.buy')}}</div> |
|||
<div> |
|||
<ul class="list"> |
|||
<li class="d-flex align-items-start my-3"> |
|||
<div class="num text-light">1</div> |
|||
<div> |
|||
<div class="label h5">{{$t('course.register')}} AMATAK</div> |
|||
<div class="txt">{{$t('course.visit',{name:'AMATAK'})}}</div> |
|||
</div> |
|||
</li> |
|||
<li class="d-flex align-items-start my-3"> |
|||
<div class="num text-light">2</div> |
|||
<div> |
|||
<div class="label h5">{{$t('course.realName')}}</div> |
|||
<div class="txt">{{$t('course.upload')}}</div> |
|||
</div> |
|||
</li> |
|||
<li class="d-flex align-items-start my-3"> |
|||
<div class="num text-light">3</div> |
|||
<div> |
|||
<div class="label h5">{{$t('course.oneClick')}}</div> |
|||
<div class="txt">{{$t('course.inAssets')}}</div> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
<button class="btn btn-primary">{{$t('course.tradeNow')}}</button> |
|||
</div> |
|||
</div> |
|||
<div class="col-7 right"> |
|||
<video class="video" controls src></video> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="banner-tab"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 d-flex"> |
|||
<div class="w-25 item active"> |
|||
<div class="icon fn-22"> |
|||
<i class="default el-icon-refresh"></i> |
|||
<i class="iconshow el-icon-coin"></i> |
|||
</div> |
|||
<div class="txt">{{$t('course.buy')}}</div> |
|||
</div> |
|||
<div class="w-25 item"> |
|||
<div class="icon fn-22"> |
|||
<i class="default el-icon-refresh"></i> |
|||
<i class="iconshow el-icon-coin"></i> |
|||
</div> |
|||
<div class="txt">{{$t('course.currencyTransaction')}}</div> |
|||
</div> |
|||
<div class="w-25 item"> |
|||
<div class="icon fn-22"> |
|||
<i class="default el-icon-refresh"></i> |
|||
<i class="iconshow el-icon-coin"></i> |
|||
</div> |
|||
<div class="txt">{{$t('course.contractEntryTransaction')}}</div> |
|||
</div> |
|||
<div class="w-25 item"> |
|||
<div class="icon fn-22"> |
|||
<i class="default el-icon-refresh"></i> |
|||
<i class="iconshow el-icon-coin"></i> |
|||
</div> |
|||
<div class="txt">{{$t('course.how')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 列表 --> |
|||
<div class="container course-list"> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4 d-flex justify-content-between"> |
|||
<span> |
|||
{{$t('course.noviceTutorial')}} |
|||
</span> |
|||
<a href="#/course/list/research" class="fn-14">{{$t('course.seeMore')}}>></a> |
|||
</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="item in 4" :key="item"> |
|||
<div class="banner"> |
|||
<img src="http://iph.href.lu/260x150" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('course.howToBuyBitcoin')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4 d-flex justify-content-between"> |
|||
<span>{{$t('course.TradingStrategy')}} </span> |
|||
<a href="#/course/list/strategy" class="fn-14">{{$t('course.seeMore')}}>></a> |
|||
</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="item in 4" :key="item"> |
|||
<div class="banner"> |
|||
<img src="http://iph.href.lu/260x150" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('course.howToBuyBitcoin')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4"> |
|||
<span>{{$t('course.industryResearch')}}</span> |
|||
<a href="#/course/list/research" class="fn-14">{{$t('course.seeMore')}}>></a> |
|||
</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="item in 4" :key="item"> |
|||
<div class="banner"> |
|||
<img src="http://iph.href.lu/260x150" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('course.howToBuyBitcoin')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- lattest-news-section --> |
|||
<div class="colto-section mt-5"> |
|||
<div class="container"> |
|||
<div class="colto-content-wrap"> |
|||
<div class="colto-content"> |
|||
<h3>Getting started</h3> |
|||
<p>We provide professional and secure trading services for investors</p> |
|||
</div> |
|||
<div class="colto-btn-group"> |
|||
<button class="btn callto-btn">Log In</button> |
|||
<span>or</span> |
|||
<button class="btn callto-btn">Create Account</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -1,48 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav /> |
|||
<!-- 列表 --> |
|||
<div class="container course-list"> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4">{{title}}</div> |
|||
<div class="row justify-content-between"> |
|||
<router-link to="/course/detail" class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="item in 40" :key="item"> |
|||
<div class="banner"> |
|||
<img src="http://iph.href.lu/260x150" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('course.howToBuyBitcoin')}}</div> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
computed: { |
|||
title(){ |
|||
let key = this.$route.params.id |
|||
switch(key){ |
|||
case 'novice': |
|||
return this.$t('course.noviceTutorial') |
|||
case 'strategy': |
|||
return this.$t('course.TradingStrategy') |
|||
case 'research': |
|||
return this.$t('course.industryResearch') |
|||
case 'dictionary': |
|||
return this.$t('course.dictionary') |
|||
case 'report': |
|||
return this.$t('course.media') |
|||
case 'OkChain': |
|||
return 'OkChain' |
|||
} |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,384 +0,0 @@ |
|||
<template> |
|||
<div class="col-md-3"> |
|||
<div class="order-book mb15"> |
|||
<h2 class="heading">{{ $t("exchange.order-book") }}</h2> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr style="display:block;"> |
|||
<th class="w-33">{{ $t("exchange.price") }}({{pair.to}})</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.amount") }} |
|||
<!-- ({{pair.from}}) --> |
|||
({{pair.to}}) |
|||
</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.total") }}({{pair.from}})</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody class="sell-orders" v-if="symbol!='gitpusdt'"> |
|||
<div class="order-item" v-for="item in sellList" :key="item.id"> |
|||
<el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(216,43,43,0.15)"> |
|||
</el-progress> |
|||
<!-- 卖单 使用弹性盒子倒序排列 --> |
|||
<tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)"> |
|||
<td class="w-33 red" title="pick this price to sell">{{ item.price|omitTo(priceDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td> |
|||
</tr> |
|||
</div> |
|||
</tbody> |
|||
|
|||
<tbody class="ob-heading"> |
|||
<tr style="display:block;" v-if="newTrade"> |
|||
<td class="w-33"> |
|||
<span>{{ $t("exchange.last-price") }}</span> |
|||
<i :class="newTrade.changeRate > 0 ? 'tri-inc' : 'tri-dec'"></i> |
|||
<b :class="newTrade.changeRate > 0 ? 'increace' : 'decreace'">{{ newTrade.price}}</b> |
|||
</td> |
|||
<td class="w-33 text-right"> |
|||
<span v-if="langs=='cn'">CNY</span> |
|||
<span v-else>$</span> |
|||
<!-- ≈ {{omitTo(newTrade.price*price_cny)}} --> |
|||
<span v-if="langs=='cn'">≈ {{newTrade.price*priceCny|omitTo(2)}}</span> |
|||
<span v-else>≈ {{newTrade.price|omitTo(2)}}</span> |
|||
</td> |
|||
<td class="w-33 text-right" :class="changeRate.startsWith('+') ? 'increace' : 'decreace'"> |
|||
<span>{{ $t("exchange.change") }}</span> |
|||
{{ changeRate }} |
|||
</td> |
|||
</tr> |
|||
<tr style="display:block;" v-else> |
|||
<td class="w-33"><span>{{ $t("exchange.last-price") }}</span> -</td> |
|||
<td class="w-33 text-right"> |
|||
<span>CNY</span> - |
|||
</td> |
|||
<td class="w-33 text-right"><span>{{ $t("exchange.change") }}</span> -</td> |
|||
</tr> |
|||
</tbody> |
|||
|
|||
<tbody class="buy-orders" :style="[{'height':symbol!='gitpusdt'?'':'470px!important'}]"> |
|||
<!-- 买单 反序数值 --> |
|||
<div class="order-item" v-for="item in reversed" :key="item.id"> |
|||
<el-progress class="progress" type="line" :stroke-width="39" :percentage="getValue(item.amount)" :show-text="false" color="rgba(37, 188, 103, 0.15)"> |
|||
</el-progress> |
|||
<!-- 卖单 使用弹性盒子倒序排列 --> |
|||
<tr style="display:block;" class="tb-cells" @click.stop="handleOrder(item.price)"> |
|||
<td class="w-33 green" title="pick this price to buy">{{ item.price|omitTo(priceDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.amount|omitTo(qtyDecimals) }}</td> |
|||
<td class="w-33 text-right">{{ item.price|multiple(item.amount, priceDecimals) }}</td> |
|||
</tr> |
|||
</div> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="market-history"> |
|||
<ul class="nav nav-pills" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link active" data-toggle="pill" href="#recent-trades" role="tab" aria-selected="true"> |
|||
{{ $t("exchange.recent-trades") }} |
|||
</a> |
|||
</li> |
|||
<!-- <li class="nav-item"> |
|||
<a class="nav-link" data-toggle="pill" href="#market-depth" role="tab" aria-selected="false">Market |
|||
Depth</a> |
|||
</li> --> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
222222 |
|||
<div class="tab-pane fade show active" id="recent-trades" role="tabpanel"> |
|||
<table class="table trade-list"> |
|||
<thead> |
|||
<tr> |
|||
<th style="display:block;width:100%"> |
|||
<div class="w-33"> |
|||
{{ $t("exchange.price") }}({{pair.to}}) |
|||
</div> |
|||
<div class="w-33 text-right"> |
|||
{{ $t("exchange.amount") }}({{pair.from}}) |
|||
</div> |
|||
<div class="w-33 text-right"> |
|||
{{ $t("exchange.time") }} |
|||
</div> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
<tr v-for="(item, index) in tradeList" :key="index"> |
|||
<td style="display:block;width:100%"> |
|||
<div class="w-33" :style="{color : item.color}">{{ item.price }}</div> |
|||
<div class="w-33 text-right">{{ item.amount }}</div> |
|||
<div class="w-33 text-right">{{ item.time }}</div> |
|||
</td> |
|||
</tr> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<!-- <div class="tab-pane fade" id="market-depth" role="tabpanel"> |
|||
<div class="depth-chart-container"> |
|||
<div class="depth-chart-inner"> |
|||
<div id="lightDepthChart"></div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import Market from "@/api/market"; |
|||
|
|||
export default { |
|||
|
|||
// props : ["priceDecimals", "qtyDecimals"], |
|||
props:[ |
|||
'priceCny' |
|||
], |
|||
data() { |
|||
return this.$parent; |
|||
}, |
|||
|
|||
computed: { |
|||
langs(){ |
|||
return localStorage.getItem('lang')||'en' |
|||
}, |
|||
reversed() { |
|||
// 按给定值 倒序排列 |
|||
if (this.buyList && this.buyList.length) return this.buyList; |
|||
else return []; |
|||
|
|||
}, |
|||
|
|||
changeRate() { |
|||
|
|||
// 开盘价为0时 则返回0值 |
|||
if (!this.marketInfo || !this.marketInfo.open) return `+0.00%`; |
|||
|
|||
let val = Math.division( |
|||
Math.subtr(this.newTrade.price, this.marketInfo.open), |
|||
this.marketInfo.open); |
|||
|
|||
// 补充+号 |
|||
let sign = val >= 0 ? '+' : ''; |
|||
let percentage = `${sign}${Math.multiple(val, 100, 2)}%`; |
|||
|
|||
return percentage; |
|||
|
|||
}, |
|||
|
|||
tradeList() { |
|||
|
|||
let count = 0; |
|||
|
|||
// 处理第1~(n-1)条记录，第一条永远显示绿色 |
|||
if (this.trade && this.trade.length) { |
|||
|
|||
return this.trade.sort((m, n) => { |
|||
|
|||
let dm = Number(m.price), |
|||
dn = Number(n.price); |
|||
|
|||
if (dn >= dm) { |
|||
n.color = "#53b987"; |
|||
n.changeRate = 1; |
|||
} else { |
|||
n.color = "#ff231f"; |
|||
n.changeRate = -1; |
|||
} |
|||
|
|||
n.price = Math.omitTo(n.price, this.priceDecimals); |
|||
n.amount = Math.omitTo(n.amount, this.qtyDecimals); |
|||
n.time = Date.parseTime(n.ts, false, "{h}:{i}:{s}"); |
|||
|
|||
// 处理最后一个值 |
|||
if (++count == this.trade.length - 1) { |
|||
m.color = "#53b987"; |
|||
m.changeRate = 1; |
|||
m.price = Math.omitTo(m.price, this.priceDecimals); |
|||
m.amount = Math.omitTo(m.amount, this.qtyDecimals); |
|||
m.time = Date.parseTime(m.ts, false, "{h}:{i}:{s}"); |
|||
} |
|||
}); |
|||
} else { |
|||
return this.trade; |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
// 计算深度 当前数量 / 买卖最大值 |
|||
getValue(amount) { |
|||
const arr = this.buyList.concat(this.sellList).map(item => item.amount); |
|||
let max = Math.max(...arr); |
|||
return Math.division(amount, max, 2) * 100; |
|||
}, |
|||
|
|||
// 将委托价带入交易控制面板中 |
|||
handleOrder(price, ordertype) { |
|||
// 修改父组件的order |
|||
if (this.passOrderPrice) { |
|||
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
} |
|||
}, |
|||
|
|||
// 测试方法 用于progress传入值 |
|||
format(item) { |
|||
return function (percentage) { |
|||
return `<span>${Math.omitTo(item.price, this.priceDecimals)}</span> |
|||
<span>${Math.omitTo(item.qty, this.qtyDecimals)}</span> |
|||
<span>${Math.multiple(item.price, item.qty, this.priceDecimals)}</span>`; |
|||
} |
|||
}, |
|||
|
|||
bookTrades() { |
|||
Market.getBooks(this.symbol).then(response => { |
|||
// |
|||
this.sellList = response.sellList.sort((a, b) => b.price - a.price); |
|||
this.buyList = response.buyList; |
|||
this.trade = response.tradeList; |
|||
|
|||
}).catch(err => { |
|||
|
|||
}); |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
// 在mounted中重置初始化的[]值，如果在created之前的话 []会覆盖ajax查询的值 |
|||
this.bookTrades(); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.w-33 { |
|||
width: 32% !important; |
|||
display: inline-block !important; |
|||
vertical-align: text-top !important; |
|||
box-sizing: border-box !important; |
|||
} |
|||
|
|||
.buy-orders { |
|||
|
|||
height: 235px !important; |
|||
overflow: hidden !important; |
|||
|
|||
td { |
|||
@include ff(OpenSans-Regular); |
|||
} |
|||
|
|||
} |
|||
|
|||
.sell-orders { |
|||
|
|||
@extend .buy-orders; |
|||
|
|||
@include flexible(column-reverse, flex-start, flex-start, wrap); |
|||
|
|||
// flex-shrink: 0; // 不压缩 |
|||
display: flex !important; |
|||
overflow-x: hidden; // 重要 换行后 隐藏右侧内容 |
|||
|
|||
} |
|||
|
|||
.order-item { |
|||
|
|||
position: relative; |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 39px; |
|||
|
|||
.progress { |
|||
height: 100%; |
|||
border-radius: 0; |
|||
background: none; |
|||
} |
|||
|
|||
.tb-cells { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 100%; |
|||
z-index: 100; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: none; |
|||
|
|||
} |
|||
} |
|||
|
|||
// 给外边框添加不同的底色 |
|||
&:nth-child(even) .progress .el-progress-bar__outer { |
|||
background: #F8F8FF; |
|||
// background: #f6f8f9; |
|||
|
|||
} |
|||
|
|||
&:nth-child(odd) .progress .el-progress-bar__outer { |
|||
background: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.el-progress { |
|||
|
|||
.el-progress-bar { |
|||
|
|||
/**重构progress的背景色 */ |
|||
.el-progress-bar__outer { |
|||
|
|||
// 去除外表框的圆角 |
|||
border-radius: 0 !important; |
|||
// background: #fff; |
|||
|
|||
.el-progress-bar__inner { |
|||
|
|||
border-radius: 0 !important; |
|||
|
|||
right: 0; // 将进度容器由左对齐变成右对齐 |
|||
left: auto; |
|||
|
|||
&::after {} |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
.trade-list { |
|||
tbody { |
|||
height: 279px; |
|||
|
|||
tr { |
|||
|
|||
// @include flexible(); |
|||
// td:nth-last-child { |
|||
// flex-grow: 1; |
|||
// } |
|||
td { |
|||
cursor: text !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
#darkDepthChart, |
|||
#lightDepthChart { |
|||
height: 305px; |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.ob-heading { |
|||
border: 1px solid #333; |
|||
box-shadow: 0 0 5px #555; |
|||
} |
|||
</style> |
|||
@ -1,618 +0,0 @@ |
|||
<template> |
|||
<div class="col-md-8"> |
|||
|
|||
<!-- 生成K线图 --> |
|||
<k-line :symbol="symbol" :marketId="marketId" :priceDecimals="priceDecimals"></k-line> |
|||
|
|||
<!-- 交易处理 --> |
|||
<div class="market-trade"> |
|||
<ul class="nav nav-pills"> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&!isMarket}]" @click.prevent="isCondition=false;isMarket=false;">Limit</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&isMarket}]" @click.prevent="isCondition=false;isMarket=true;">Market</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&!isMarket}]" @click.prevent="isCondition=true;isMarket=false;">Stop Limit</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&isMarket}]" @click.prevent="isCondition=true;isMarket=true;">Stop Market</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active"> |
|||
<div class="d-flex justify-content-between"> |
|||
<!------------- Buy Order --------------> |
|||
<div class="market-trade-buy"> |
|||
|
|||
<!-- Trigger Price --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[0] }} |
|||
</span> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="buyorder.trigger_price" class="form-control" placeholder="请输入触发价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled placeholder="在最佳市场价格成交"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="buyorder.entrust_price" class="form-control" placeholder="请输入价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount/Total --> |
|||
<template v-if="isMarket"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.marketTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[3] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyTotal" class="form-control" min=0 placeholder="请输入总值"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitAmount"> |
|||
<!-- 提示框的内容 --> |
|||
<span class="content"> |
|||
<!-- 图标 --> |
|||
<i class="el-icon-warning-outline"></i> |
|||
<!-- 提示 --> |
|||
{{ msgList.buy[2] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyorder.amount" class="form-control" min=0 placeholder="请输入数量"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Percent --> |
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{buyPercentActive:index == buyPercentIndex}" @click="renderBuyAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{$t('exchange.order-total')}}: |
|||
<span> <b>{{buyTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<!-- Available --> |
|||
<p>{{$t('otc.j3')}}: |
|||
<span> {{toBalance}} {{pair.to}}</span><br /> |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn buy" @click="handleBuyOrder">Buy {{pair.to}}</button> |
|||
</div> |
|||
|
|||
<!------------ Sell Order -----------> |
|||
<div class="market-trade-sell"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[0] }} |
|||
</span> |
|||
<!-- Trigger Price --> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="sellorder.trigger_price" class="form-control" min=0 placeholder="请输入触发价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled placeholder="在最佳市场价格成交"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="sellorder.entrust_price" class="form-control" min=0 placeholder="请输入价格"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.marketAmount"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[4] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="sellorder.amount" class="form-control" min=0 placeholder="请输入数量"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{sellPercentActive:index == sellPercentIndex}" @click="renderSellAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{$t('exchange.order-total')}}: |
|||
<span> |
|||
<b>{{sellTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<p>{{$t('otc.j3')}}: |
|||
<span> {{toBalance}} {{pair.to}} </span><br /> |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn sell" @click="handleSellOrder">Sell {{pair.to}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import Exchange from "@/api/exchange"; |
|||
|
|||
export default { |
|||
|
|||
props: ["pair", "buyorder", "marketId", "sellorder", "fromBalance", "toBalance", "symbol", "newTrade", "minQty", "minTotal", "priceDecimals", "qtyDecimals"], |
|||
data() { |
|||
return { |
|||
isMarket: false, |
|||
isCondition: false, |
|||
userBanlance: null, |
|||
|
|||
cacheTotal: 0, // 存放市价单输入的总值 |
|||
cachePrice: null, // 存放最新价格 |
|||
|
|||
// 气泡弹框内容和触发 |
|||
visibles: { |
|||
"buy": { |
|||
limitPrice: false, // 限制价格 |
|||
limitAmount: false, // 限制数量 |
|||
marketTotal: false, // 限制总额 |
|||
marketAmount: false, // 市价数量 |
|||
trigger: false, // 触发价格 |
|||
orderTotal: false, // 订单总额 |
|||
}, |
|||
"sell": { |
|||
limitPrice: false, |
|||
limitAmount: false, |
|||
marketTotal: false, |
|||
marketAmount: false, |
|||
trigger: false, |
|||
orderTotal: false, |
|||
}, |
|||
}, |
|||
msgList: { |
|||
"buy": Array(6).fill(''), // 5个空字符串的数组 |
|||
"sell": Array(6).fill('') |
|||
}, |
|||
// 百分比集合 |
|||
percentage: [{ |
|||
label: "25%", |
|||
value: 0.25 |
|||
}, |
|||
{ |
|||
label: "50%", |
|||
value: 0.5 |
|||
}, |
|||
{ |
|||
label: "75%", |
|||
value: 0.75 |
|||
}, |
|||
{ |
|||
label: "100%", |
|||
value: 1 |
|||
}, |
|||
], |
|||
// |
|||
buyPercentIndex: null, |
|||
sellPercentIndex: null, |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
// 获取type类型值 |
|||
type() { |
|||
if (!this.isCondition) { |
|||
return this.isMarket ? 2 : 1; |
|||
} else { |
|||
return this.isMarket ? 4 : 3; |
|||
} |
|||
}, |
|||
|
|||
theme() { |
|||
return localStorage.theme ? localStorage.theme : "light"; |
|||
}, |
|||
|
|||
buyTotal: { |
|||
get() { |
|||
if (!this.isMarket) { |
|||
return Math.multiple(this.buyorder.entrust_price, this.buyorder.amount); |
|||
} else { |
|||
return this.cacheTotal; |
|||
} |
|||
}, |
|||
set(val) { |
|||
// 根据总值 计算数量 |
|||
if (!this.isMarket) { |
|||
this.buyorder.amount = Math.division(val, this.buyorder.entrust_price); |
|||
} else { // 市价单 缓存总值 |
|||
this.cacheTotal = val; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
sellTotal: { |
|||
get() { |
|||
return Math.multiple(this.sellorder.entrust_price, this.sellorder.amount); |
|||
} |
|||
}, |
|||
|
|||
// 当前语言 |
|||
lang() { |
|||
let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en'; |
|||
return localStorage.lang || browser_Lang; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
watch: { |
|||
custom(newVal) { |
|||
// console.log(newVal) |
|||
}, |
|||
|
|||
type() { |
|||
// 切换订单类型时 清空价格和数量 |
|||
// 数量改变时 触发percentage更新 |
|||
this.reset(); |
|||
}, |
|||
|
|||
// 有新交易时触发 给限价单设定初始价格 |
|||
newTrade(newVal, oldVal) { |
|||
if (!this.isMarket) { |
|||
|
|||
// 新交易对有trade数据 |
|||
if (!oldVal && newVal) { // 没值到初始化值 |
|||
// 修改order里面price的值 |
|||
this.cachePrice = newVal.price; |
|||
this.reset(); |
|||
} |
|||
|
|||
// 切换交易对时 清空了数据 |
|||
if (oldVal && !newVal) { // 有值到没值的过程 |
|||
this.cachePrice = null; |
|||
this.reset(); |
|||
} |
|||
} |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
renderBuyAmount(val, index) { |
|||
if (!this.buyorder.entrust_price) { |
|||
this.visibles.buy.limitPrice = true; |
|||
this.msgList.buy[1] = this.$t('nav.tips'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.buyPercentIndex = index; |
|||
this.buyTotal = Math.multiple(this.fromBalance, val); |
|||
}, |
|||
|
|||
renderSellAmount(val, index) { |
|||
if (!this.sellorder.entrust_price) { |
|||
this.visibles.sell.limitPrice = true; |
|||
this.msgList.sell[1] = this.$t('nav.tips'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.sellPercentIndex = index; |
|||
this.sellorder.amount = Math.multiple(this.toBalance, val); |
|||
}, |
|||
|
|||
handleBuyOrder() { |
|||
|
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.buyorder, this.buyTotal, "buy")) return; |
|||
|
|||
const baseArgs = { |
|||
symbol: this.symbol, |
|||
type: this.type, |
|||
}; |
|||
|
|||
// 区分限价、市价和条件委托单 |
|||
// 1、限价单买入时 需要的参数：价格、数量、 |
|||
// 2、市价单买入时 需要的参数：总值 |
|||
// 3、条件单买入时 需要的参数：触发价、价格数量或者总值 |
|||
// 4、卖出时 需要价格和数量 |
|||
Exchange.storeEntrust(Object.assign(this.buyorder, { |
|||
total: this.buyTotal, |
|||
}, baseArgs)).then(data => { |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
handleSellOrder() { |
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.sellorder, this.sellTotal, "sell")) return; |
|||
|
|||
const baseArgs = { |
|||
symbol: this.symbol, |
|||
type: this.type, |
|||
}; |
|||
Exchange.storeEntrust(Object.assign(this.sellorder, { |
|||
total: this.sellTotal |
|||
}, baseArgs)).then(data => { |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
reset() { |
|||
|
|||
// 如果没有newTrade时 则没有缓存价格 重置为最小值0 |
|||
// 由于输入框去除了精度空值 这里还需要手动设置精度值 |
|||
let price = this.cachePrice || 0; |
|||
|
|||
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.buyorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.sellorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
// 清空数量 |
|||
this.buyorder.amount = 0; |
|||
this.sellorder.amount = 0; |
|||
|
|||
// total赋值会触发set方法 |
|||
// this.buyTotal = 0; |
|||
// this.cacheTotal = 0; |
|||
|
|||
// 去除百分比样式 |
|||
this.buyPercentIndex = -1; |
|||
this.sellPercentIndex = -1; |
|||
}, |
|||
|
|||
clearAll() { |
|||
// 5s后统一清除提示框 |
|||
setTimeout(function () { |
|||
Object.keys(this.visibles.buy).forEach(key => this.visibles.buy[key] = false); |
|||
Object.keys(this.visibles.sell).forEach(key => this.visibles.sell[key] = false); |
|||
}.bind(this), 5000); |
|||
}, |
|||
|
|||
empty(val) { |
|||
let ret; |
|||
switch (typeof val) { |
|||
case "number": |
|||
ret = val == 0; |
|||
break; |
|||
case "string": |
|||
ret = val == "0" || /^\s?$/.test(val); |
|||
break; |
|||
case "boolean": |
|||
ret = val; |
|||
break; |
|||
default: |
|||
ret = Boolean(val); |
|||
break; |
|||
} |
|||
return ret; |
|||
}, |
|||
|
|||
chkValidate(order, total, orderType) { |
|||
let flag = true; |
|||
|
|||
switch (this.type) { |
|||
|
|||
case 1: // limit |
|||
if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a1'); |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a2'); |
|||
} else { |
|||
if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a3')+`${this.minQty}`; |
|||
} |
|||
|
|||
if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].orderTotal = true; |
|||
this.msgList[orderType][5] = this.$t('nav.b8')+`${this.minTotal}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 2: // market |
|||
if (order.direction == "buy") { // 买 |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.a4'); |
|||
} else if (this.total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles.marketTotal = true; |
|||
this.msgList[3] = this.$t('nav.a5')+`${this.minTotal}`; |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { // 卖 |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a6'); |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a7')+` ${this.minQty}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 3: // stop-limit |
|||
|
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.a8') |
|||
} else if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a9') |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.b1') |
|||
} |
|||
break; |
|||
|
|||
case 4: // stop-market |
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.b2') |
|||
} else { |
|||
|
|||
if (order.direction == "buy") { |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b3') |
|||
} else if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b5')+` ${this.minTotal}` |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.b6') |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.b7')+` ${this.minQty}` |
|||
} |
|||
} |
|||
|
|||
} |
|||
break; |
|||
} |
|||
|
|||
// 清除所有样式 |
|||
this.clearAll(); |
|||
|
|||
// 返回验证结果 |
|||
return flag; |
|||
}, |
|||
|
|||
|
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.buyPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #26a69a; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.sellPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #ef5350; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.input-group-text { |
|||
width: 68px; |
|||
@include flexible(row, center, center); |
|||
} |
|||
</style> |
|||
@ -1,522 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<!-- <div class="banner-block col-xs-8">--> |
|||
<!-- <el-carousel :interval="6000" height="450px">--> |
|||
<!-- <el-carousel-item v-for="item in pcBannerList" :key="item.id">--> |
|||
<!-- <img :src="item.imgurl" width="100%" height="100%" />--> |
|||
<!-- </el-carousel-item>--> |
|||
<!-- </el-carousel>--> |
|||
<!-- </div>--> |
|||
<div class="container-fluid mtb15 no-fluid"> |
|||
<div class="row sm-gutters"> |
|||
|
|||
<!-- symbols --> |
|||
<symbols :marketList="marketList" :marketId="marketId" :isLogin="isLogin" :symbol.sync="symbol"> |
|||
</symbols> |
|||
|
|||
<!-- kline --> |
|||
<make-deal :isLogin="isLogin" :pair="pair" :socket="ws.socket" :symbol="symbol" :buyorder="buyorder" |
|||
:sellorder="sellorder" :fromBalance="fromBalance" :toBalance="toBalance" :newTrade="newTrade" |
|||
:minQty="minQty" :minTotal="minTotal" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" |
|||
@update="update"></make-deal> |
|||
|
|||
<!-- order book --> |
|||
<book-trades :priceCny="price_cny"></book-trades> |
|||
|
|||
<!-- market news --> |
|||
<!-- <market-news></market-news> --> |
|||
|
|||
<!-- order list --> |
|||
<order-list ref="Order" :ordersOpen="ordersOpen" :conditionOrders="conditionOrders" |
|||
:ordersHistory="ordersHistory" :priceDecimals="priceDecimals" :qtyDecimals="qtyDecimals" |
|||
:isLogin="isLogin" :pair="pair" @change="currentTab = $event" @update="update" |
|||
@Pagination="page = $event"></order-list> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Socket from '@/api/server/Socket.js'; |
|||
import Market from '@/api/market.js'; |
|||
import Exchange from "@/api/exchange"; |
|||
import Order from "@/api/order" |
|||
import Home from "@/api/home"; |
|||
import bus from "@/components/bus.js"; |
|||
export default { |
|||
|
|||
components: { |
|||
"Symbols": () => import( /* webpackChunkName:"symbols" */ "./symbols"), |
|||
"MakeDeal": () => import( /* webpackChunkName:"chart-deal" */ "./make-deal"), |
|||
"BookTrades": () => import( /* webpackChunkName:"order-book" */ "./book-trades"), |
|||
"MarketNews": () => import( /* webpackChunkName:"market-news" */ "./market-news"), |
|||
"OrderList": () => import( /* webpackChunkName:"order-list" */ "./order-list") |
|||
}, |
|||
|
|||
beforeCreate() { |
|||
|
|||
// this.ws = new Socket(`${this.Globals.Server.Path.WS}`); |
|||
|
|||
}, |
|||
|
|||
data() { |
|||
|
|||
return { |
|||
isLianjie: false, |
|||
// `btcusdt` 不含`/`的小写 |
|||
symbol: this.$route.params.symbol || null, |
|||
marketId: null, |
|||
marketInfo: null, // 交易对基本信息 |
|||
pair: { |
|||
from: '-', |
|||
to: '-', |
|||
}, |
|||
marketList: [], // 在symbol组件中 需要遍历 因此默认数组避免出错 |
|||
trade: [], |
|||
pcBannerList: [], |
|||
newTrade: null, |
|||
|
|||
// 所有的数据 都统一按照价格从小到大排序 |
|||
buyList: [], |
|||
sellList: [], |
|||
|
|||
// 初始化精度值和交易 |
|||
priceDecimals: 0, |
|||
qtyDecimals: 0, |
|||
minQty: 0, |
|||
minTotal: 0, |
|||
|
|||
now: null, |
|||
|
|||
// 下单情况 可由orderbook跨页面定制 |
|||
buyorder: { |
|||
trigger_price: '', // 触发价 |
|||
entrust_price: '', // 委托价 |
|||
amount: 0, // 数量 |
|||
direction: "buy", // 方向 |
|||
}, |
|||
|
|||
sellorder: { |
|||
entrust_price: '', |
|||
trigger_price: '', |
|||
amount: 0, |
|||
direction: "sell", |
|||
}, |
|||
|
|||
// 从order传递price |
|||
passOrderPrice: true, |
|||
|
|||
// 各种委托单 |
|||
ordersOpen: { |
|||
total: 0, |
|||
}, |
|||
|
|||
ordersHistory: { |
|||
total: 0, |
|||
}, |
|||
|
|||
conditionOrders: { |
|||
total: 0, |
|||
}, |
|||
|
|||
// 用户钱包余额 |
|||
fromBalance: 0, |
|||
toBalance: 0, |
|||
|
|||
// 当前页面socket |
|||
// ws: null, |
|||
|
|||
// 是否开启交易密码 |
|||
transPwdEnabled: false, |
|||
|
|||
currentTab: "opens", // orders显示的tab |
|||
price_cny: 0, |
|||
page: 1 |
|||
} |
|||
|
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
// 当前语言 |
|||
lang() { |
|||
let browser_Lang = navigator.language.includes('zh') ? 'cn' : 'en', |
|||
lang = localStorage.lang || browser_Lang; |
|||
return lang; |
|||
}, |
|||
|
|||
isLogin() { |
|||
return Boolean(this.userAuth); |
|||
}, |
|||
|
|||
userAuth() { |
|||
const auth = localStorage.getItem("auth"); |
|||
let ret = ""; |
|||
if (auth) { |
|||
let { |
|||
memberId, |
|||
accessToken |
|||
} = JSON.parse(auth); |
|||
ret = `?${accessToken}&${memberId}`; |
|||
} |
|||
return ret; |
|||
}, |
|||
|
|||
userInfo() { |
|||
if (this.isLogin) { |
|||
return JSON.parse(localStorage.getItem("auth")); |
|||
} else { |
|||
return { |
|||
user_id: 0, |
|||
}; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
watch: { |
|||
// 切换symbol时更新路由 |
|||
symbol(newVal, oldVal) { |
|||
|
|||
// 取消订阅 或者关闭连接 防止干扰下次值 |
|||
if (oldVal) this.unsub(oldVal); |
|||
|
|||
// 还原页面状态 避免造成数据值紊乱 |
|||
this.trade = []; |
|||
this.sellList = []; |
|||
this.buyList = []; |
|||
this.newTrade = null; |
|||
|
|||
// 买卖单数据结构 |
|||
this.buyorder = { |
|||
trigger_price: '', |
|||
entrust_price: '', |
|||
amount: 0, |
|||
direction: "buy", |
|||
}; |
|||
this.sellorder = { |
|||
trigger_price: '', |
|||
entrust_price: '', |
|||
amount: 0, |
|||
direction: "sell", |
|||
}; |
|||
|
|||
// 请求新的页面数据 |
|||
if (newVal) this.$router.push(`/exchange/${newVal}`); |
|||
}, |
|||
|
|||
marketInfo(newVal, oldVal) { |
|||
if (newVal && !oldVal) { // 第一次取得marketInfo时 更新接口 主要针对刷新页面 |
|||
this.update(); |
|||
} |
|||
}, |
|||
|
|||
// 加载新页面 重新订阅所有数据 |
|||
$route( /*newRouter, oldRouter*/ ) { |
|||
|
|||
this.addSub(); |
|||
|
|||
// 初始化market信息 |
|||
this.findMarketBySymbol(); |
|||
|
|||
// 更新所有接口数据 |
|||
this.update(); |
|||
|
|||
}, |
|||
|
|||
currentTab() { |
|||
// tab切换时自动更新 |
|||
this.getOrders(); |
|||
}, |
|||
page() { |
|||
if (this.currentTab == "histories") { // 历史委托 |
|||
this.getHistories(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
initMarket() { |
|||
// 初始化订阅marketList数据 |
|||
this.ws.send({ |
|||
"cmd": "sub", |
|||
"msg": 'exchangeMarketList', |
|||
}) |
|||
}, |
|||
|
|||
// 订阅当前的symbol |
|||
addSub() { |
|||
|
|||
this.ws.send([{ |
|||
cmd: 'sub', |
|||
msg: `sellList_${this.symbol}` |
|||
}, { |
|||
cmd: 'sub', |
|||
msg: `buyList_${this.symbol}` |
|||
}, { |
|||
cmd: 'req', |
|||
msg: `tradeList_${this.symbol}` |
|||
}, { |
|||
cmd: 'sub', |
|||
msg: `tradeList_${this.symbol}` |
|||
}]); |
|||
|
|||
}, |
|||
|
|||
// 取消指定的symbol |
|||
unsub(symbol) { |
|||
|
|||
this.ws.send([{ |
|||
cmd: 'unsub', |
|||
msg: `sellList_${symbol}` |
|||
}, { |
|||
cmd: 'unsub', |
|||
msg: `buyList_${symbol}` |
|||
}, { |
|||
cmd: 'unsub', |
|||
msg: `tradeList_${symbol}` |
|||
}]); |
|||
|
|||
}, |
|||
|
|||
// 在交易列表中 查找当前id记录 并将行情信息写入全局 |
|||
// 以便在其他组件中 直接使用 |
|||
findMarketBySymbol() { |
|||
|
|||
let isKeep = true; // 退出外层循环的标识符 |
|||
|
|||
for (let coin of this.marketList) { |
|||
|
|||
for (let market of coin.marketInfoList) { |
|||
|
|||
// 查询交易对名称 |
|||
if (market.symbol === this.symbol) { |
|||
|
|||
// 转化pair为集合 便于提取 |
|||
this.pair = { |
|||
to: market.coin_name, // 右币 |
|||
from: coin.coin_name // 左币 |
|||
}; |
|||
|
|||
// 创建marketId |
|||
this.marketId = market.pair_id; |
|||
|
|||
// 写入market信息 |
|||
this.marketInfo = market; |
|||
|
|||
// 未有选定Tab时 默认一个now 后期从子组件中取 |
|||
if (!this.now) this.now = coin.coin_name; |
|||
|
|||
// 写入数据值精度 用来显示截取长度 |
|||
this.priceDecimals = market.price_decimals; |
|||
this.qtyDecimals = market.qty_decimals; |
|||
|
|||
// 下单时 需要验证最小数量和最小总值 |
|||
this.minTotal = market.min_total; |
|||
this.minQty = market.min_qty; |
|||
|
|||
isKeep = false; |
|||
|
|||
// 终止内部循环 |
|||
break; |
|||
} |
|||
} |
|||
|
|||
// 终止外部循环 |
|||
if (!isKeep) break; |
|||
} |
|||
}, |
|||
|
|||
getBalance() { |
|||
|
|||
if (this.isLogin) { |
|||
|
|||
Exchange.getUserBalance(this.marketInfo.pair_name).then(data => { |
|||
|
|||
this.fromBalance = data[this.pair.from.toUpperCase()].usable_balance; |
|||
this.toBalance = data[this.pair.to.toUpperCase()].usable_balance; |
|||
|
|||
}).catch(err => { |
|||
|
|||
}); |
|||
} |
|||
|
|||
}, |
|||
|
|||
// 更新接口数据 |
|||
update() { |
|||
this.getBalance(); |
|||
this.getOrders(); |
|||
this.getCurrencyExCny(); |
|||
}, |
|||
// 获取汇率 |
|||
getCurrencyExCny() { |
|||
if (!this.pair.from || this.pair.from == '-') return; |
|||
Exchange.getCurrencyExCny({ |
|||
coin_name: this.pair.from |
|||
}).then(res => { |
|||
this.price_cny = res.price_cny |
|||
}) |
|||
}, |
|||
getOrders() { |
|||
|
|||
if (this.currentTab == "opens") { // 当前委托 |
|||
|
|||
this.getOpens(); |
|||
|
|||
} else if (this.currentTab == "conditions") { // 条件委托 |
|||
|
|||
this.getConditions(); |
|||
|
|||
} else if (this.currentTab == "histories") { // 历史委托 |
|||
|
|||
this.getHistories(); |
|||
|
|||
} |
|||
|
|||
// console.log("---订单更新成功---"); |
|||
|
|||
}, |
|||
|
|||
getOpens() { |
|||
if (this.isLogin) { |
|||
Order.getCurrentEntrust({ |
|||
symbol: this.marketInfo.pair_name, |
|||
}).then(data => { |
|||
this.ordersOpen = data |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
getConditions() { |
|||
if (this.isLogin) { |
|||
Order.getConditionEntrust({ |
|||
symbol: this.marketInfo.pair_name, |
|||
}).then(data => { |
|||
this.conditionOrders = data; |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
getHistories() { |
|||
if (this.isLogin) { |
|||
Order.getHistoryEntrust({ |
|||
symbol: this.marketInfo.pair_name, |
|||
page:this.page |
|||
}) |
|||
.then(data => { |
|||
this.ordersHistory = data; |
|||
}) |
|||
.catch(err => {}) |
|||
} |
|||
}, |
|||
indexList() { |
|||
Home.indexList().then((res) => { |
|||
this.pcBannerList = res.pcBannerList |
|||
// setTimeout(() => { |
|||
// this.skroll(); |
|||
// }, 100); |
|||
}).catch((res) => {}); |
|||
}, |
|||
initWs() { |
|||
this.ws = new Socket(`${this.Globals.Server.Path.WS}`); |
|||
this.ws.on("open", () => { |
|||
if (this.isLianjie) { |
|||
bus.$emit('sendMsg', this.ws.socket); |
|||
this.isLianjie = false |
|||
} |
|||
// 连接成功后 初始化订阅市场信息 |
|||
this.initMarket(); |
|||
// 如果指定了id 订阅该行情的所有其他信息 |
|||
if (this.symbol) this.addSub(); |
|||
}) |
|||
|
|||
this.ws.on("message", (response) => { |
|||
|
|||
let { |
|||
data, // 返回数据 |
|||
sub, // 订阅标签 |
|||
type, // 返回类型 |
|||
msg, // 提示信息 |
|||
code, // 错误代号 |
|||
} = response; |
|||
|
|||
// 答复心跳 保持连接 |
|||
if (type == "ping") this.ws.send({ |
|||
type: "pong" |
|||
}); |
|||
|
|||
switch (sub) { |
|||
|
|||
case "exchangeMarketList": |
|||
|
|||
this.marketList = data; |
|||
|
|||
if (!this.symbol) { // 默认symbol 重新请求数据 |
|||
this.symbol = _.nth(data).marketInfoList[0].symbol; |
|||
} else { // 找出该symbol对应的记录并更新页面 |
|||
this.findMarketBySymbol(); |
|||
} |
|||
|
|||
break; |
|||
|
|||
case `buyList_${this.symbol}`: |
|||
|
|||
this.buyList = data; |
|||
break; |
|||
|
|||
case `sellList_${this.symbol}`: |
|||
|
|||
this.sellList = data; |
|||
break; |
|||
|
|||
case `tradeList_${this.symbol}`: |
|||
if (type == "history") { // 历史记录 |
|||
this.trade = this.trade.concat(data); |
|||
} else if (type == "dynamic") { // 有更新就推送 |
|||
this.trade.unshift(data); |
|||
} |
|||
// 最新交易 更新用于余额和订单记录 |
|||
this.newTrade = _.nth(this.trade); |
|||
if (this.newTrade && this.newTrade.buy_user_id === this.userInfo.user_id || this |
|||
.newTrade.sell_user_id == this.userInfo.user_id) this.update(); |
|||
break; |
|||
} |
|||
}); |
|||
|
|||
this.ws.on("close", () => { |
|||
// this.$message({ |
|||
// type: "error", |
|||
// message: this.$t("nav.b8"), |
|||
// duration: 2000, |
|||
// }); |
|||
this.isLianjie = true |
|||
this.initWs() |
|||
// if (this.symbol) this.getCurrencyExCny(); |
|||
// this.indexList() |
|||
|
|||
}); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
this.initWs() |
|||
if (this.symbol) this.getCurrencyExCny(); |
|||
this.indexList() |
|||
// this.update(); |
|||
}, |
|||
|
|||
mounted() { |
|||
// if (this.symbol) this.update(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,764 +0,0 @@ |
|||
<template> |
|||
<div class="col-md-6"> |
|||
<div class="px-4 py-2 heading"> |
|||
<!-- <theme-change/> --> |
|||
<el-tooltip placement="bottom" effect="light"> |
|||
<div slot="content" class="market"> |
|||
<div class="coin p-md color-light fn-20"> |
|||
<img :src="detail.coin_icon" width="20" height="20" alt=""> |
|||
{{detail.full_name}} |
|||
</div> |
|||
<div class="list"> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c3')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.total_issuance}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c4')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.total_circulation}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c5')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.crowdfunding_price}} |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-between p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c6')}}：</div> |
|||
<div class="color-light"> |
|||
{{detail.publish_time}} |
|||
</div> |
|||
</div> |
|||
<div class=" p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c7')}}：</div> |
|||
<div class="color-light ov"> |
|||
{{detail.white_paper_link}} |
|||
</div> |
|||
</div> |
|||
<div class=" p-x-md p-y-xs"> |
|||
<div>{{$t('nav.c8')}}：</div> |
|||
<div class="color-light ov"> |
|||
{{detail.official_website_link}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="p-md"> |
|||
<div class="fn-20 color-light"> |
|||
{{$t('nav.c9')}} |
|||
</div> |
|||
<div class="p-y-md edit-content" v-html="detail.coin_content"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <el-button><img src="../../assets/img/shuoming.png" width="20" height="20" alt=""></el-button> --> |
|||
</el-tooltip> |
|||
|
|||
</div> |
|||
<!-- 生成K线图 --> |
|||
<k-line :symbol="symbol" :socket="socket" :priceDecimals="priceDecimals"></k-line> |
|||
|
|||
<!-- 交易处理 --> |
|||
<div class="market-trade "> |
|||
<ul class="nav nav-pills"> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&isMarket}]" @click.prevent="isCondition=false;isMarket=true;"> |
|||
{{ $t("common.market") }} |
|||
</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:!isCondition&&!isMarket}]" @click.prevent="isCondition=false;isMarket=false;"> |
|||
{{ $t("common.limit") }}</a> |
|||
</li> |
|||
|
|||
<!-- <li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&!isMarket}]" @click.prevent="isCondition=true;isMarket=false;"> |
|||
{{ $t("common.stop-limit") }}</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href :class="[`nav-link`, {active:isCondition&&isMarket}]" @click.prevent="isCondition=true;isMarket=true;"> |
|||
{{ $t("common.stop-market") }}</a> |
|||
</li> --> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active"> |
|||
<div class="d-flex justify-content-between"> |
|||
<!------------- Buy Order --------------> |
|||
<div class="market-trade-buy"> |
|||
|
|||
<!-- Trigger Price --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[0] }} |
|||
</span> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="buyorder.trigger_price" class="form-control" :placeholder="$t('exchange.trigger-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled :placeholder="$t('exchange.at-best-price')"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="buyorder.entrust_price" class="form-control" :placeholder="$t('exchange.enter-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount/Total --> |
|||
<template v-if="isMarket"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.marketTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[3] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyTotal" class="form-control" min=0 :placeholder="$t('exchange.enter-total')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.limitAmount"> |
|||
<!-- 提示框的内容 --> |
|||
<span class="content"> |
|||
<!-- 图标 --> |
|||
<i class="el-icon-warning-outline"></i> |
|||
<!-- 提示 --> |
|||
{{ msgList.buy[2] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="buyorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-amount')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Percent --> |
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{buyPercentActive:index == buyPercentIndex}" @click="renderBuyAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.buy.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.buy[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{$t('exchange.order-total')}} |
|||
<span> <b>{{buyTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<!-- Available --> |
|||
<p> |
|||
{{ $t('exchange.amount') }} |
|||
<span> {{toBalance}} {{pair.to}}</span><br /> |
|||
{{ $t('exchange.balance') }} |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn buy" @click="handleBuyOrder">{{ $t("common.buy") }} {{pair.to}}</button> |
|||
</div> |
|||
|
|||
<!------------ Sell Order -----------> |
|||
<div class="market-trade-sell"> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.trigger"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[0] }} |
|||
</span> |
|||
<!-- Trigger Price --> |
|||
<div class="input-group" v-if="isCondition" slot="reference"> |
|||
<input type="number" v-model="sellorder.trigger_price" class="form-control" min=0 :placeholder="$t('exchange.trigger-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<template v-if="isMarket"> |
|||
<div class="input-group"> |
|||
<!-- Market Price --> |
|||
<input type="text" class="form-control" disabled :placeholder="$t('exchange.at-best-price')"> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitPrice"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[1] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<!-- Entrust Price --> |
|||
<input type="number" v-model="sellorder.entrust_price" class="form-control" min=0 :placeholder="$t('exchange.enter-price')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.from}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
</template> |
|||
|
|||
<!-- Amount --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.limitAmount"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[2] }} |
|||
</span> |
|||
<div class="input-group" slot="reference"> |
|||
<input type="number" v-model="sellorder.amount" class="form-control" min=0 :placeholder="$t('exchange.enter-amount')"> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text">{{pair.to}}</span> |
|||
</div> |
|||
</div> |
|||
</el-popover> |
|||
|
|||
<ul class="market-trade-list"> |
|||
<li v-for="(item,index) in percentage" :key="index" :class="{sellPercentActive:index == sellPercentIndex}" @click="renderSellAmount(item.value, index)"> |
|||
<a href="javascript:void 0">{{ item.label }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<!-- Total --> |
|||
<el-popover popper-class='popover-tips' placement="top-start" trigger="manual" v-model="visibles.sell.orderTotal"> |
|||
<span class="content"> |
|||
<i class="el-icon-warning-outline"></i> |
|||
{{ msgList.sell[5] }} |
|||
</span> |
|||
<p slot="reference"> |
|||
{{ $t('exchange.order-total') }} |
|||
<span> |
|||
<b>{{sellTotal}}</b> {{pair.from}} </span> |
|||
</p> |
|||
</el-popover> |
|||
|
|||
<p> |
|||
{{$t('exchange.amount')}} |
|||
<span> {{toBalance}} {{pair.to}} </span><br /> |
|||
{{ $t('exchange.balance') }} |
|||
<span> {{fromBalance}} {{pair.from}}</span> |
|||
</p> |
|||
<button class="btn sell" @click="handleSellOrder">{{ $t("common.sell") }} {{pair.to}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Exchange from "@/api/exchange"; |
|||
import Market from "@/api/market"; |
|||
export default { |
|||
|
|||
props: ["isLogin", "socket", "symbol", "pair", "buyorder", "sellorder", "fromBalance", "toBalance", "newTrade", "minQty", "minTotal", "priceDecimals", "qtyDecimals"], |
|||
|
|||
data() { |
|||
return { |
|||
detail:[], |
|||
isMarket: true, |
|||
isCondition: false, |
|||
userBanlance: null, |
|||
|
|||
cacheTotal: 0, // 存放市价单输入的总值 |
|||
cachePrice: null, // 存放最新价格 |
|||
|
|||
// 气泡弹框内容和触发 |
|||
visibles: { |
|||
"buy": { |
|||
limitPrice: false, // 限制价格 |
|||
limitAmount: false, // 限制数量 |
|||
marketTotal: false, // 限制总额 |
|||
marketAmount: false, // 市价数量 |
|||
trigger: false, // 触发价格 |
|||
orderTotal: false, // 订单总额 |
|||
}, |
|||
"sell": { |
|||
limitPrice: false, |
|||
limitAmount: false, |
|||
marketTotal: false, |
|||
marketAmount: false, |
|||
trigger: false, |
|||
orderTotal: false, |
|||
}, |
|||
}, |
|||
msgList: { |
|||
"buy": Array(6).fill(''), // 5个空字符串的数组 |
|||
"sell": Array(6).fill('') |
|||
}, |
|||
// 百分比集合 |
|||
percentage: [{ |
|||
label: "25%", |
|||
value: 0.25 |
|||
}, |
|||
{ |
|||
label: "50%", |
|||
value: 0.5 |
|||
}, |
|||
{ |
|||
label: "75%", |
|||
value: 0.75 |
|||
}, |
|||
{ |
|||
label: "100%", |
|||
value: 1 |
|||
}, |
|||
], |
|||
// |
|||
buyPercentIndex: null, |
|||
sellPercentIndex: null, |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
// 获取type类型值 |
|||
type() { |
|||
if (!this.isCondition) { |
|||
return this.isMarket ? 2 : 1; |
|||
} else { |
|||
return this.isMarket ? 4 : 3; |
|||
} |
|||
}, |
|||
|
|||
theme() { |
|||
return localStorage.theme ? localStorage.theme : "light"; |
|||
}, |
|||
|
|||
buyTotal: { |
|||
get() { |
|||
if (!this.isMarket) { |
|||
return Math.multiple(this.buyorder.entrust_price, this.buyorder.amount); |
|||
} else { |
|||
return this.cacheTotal; |
|||
} |
|||
}, |
|||
set(val) { |
|||
// 根据总值 计算数量 |
|||
if (!this.isMarket) { |
|||
this.buyorder.amount = Math.division(val, this.buyorder.entrust_price); |
|||
} else { // 市价单 缓存总值 |
|||
this.cacheTotal = val; |
|||
this.buyorder.amount = this.cacheTotal |
|||
} |
|||
} |
|||
}, |
|||
|
|||
sellTotal: { |
|||
get() { |
|||
return Math.multiple(this.sellorder.entrust_price, this.sellorder.amount); |
|||
} |
|||
}, |
|||
|
|||
// 当前语言 |
|||
lang() { |
|||
let browser_Lang = navigator.language.includes('zh') ? 'zh' : 'en'; |
|||
return localStorage.lang || browser_Lang; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
watch: { |
|||
custom(newVal) { |
|||
// console.log(newVal) |
|||
}, |
|||
|
|||
type() { |
|||
// 切换订单类型时 清空价格和数量 |
|||
// 数量改变时 触发percentage更新 |
|||
this.reset(); |
|||
}, |
|||
|
|||
// 有新交易时触发 给限价单设定初始价格 |
|||
newTrade(newVal, oldVal) { |
|||
// if (!this.isMarket ) { |
|||
|
|||
// 新交易对有trade数据 |
|||
if (!oldVal && newVal) { // 没值到初始化值 |
|||
// 修改order里面price的值 |
|||
this.cachePrice = newVal.price; |
|||
this.reset(); |
|||
} |
|||
|
|||
// 切换交易对时 清空了数据 |
|||
if (oldVal && !newVal) { // 有值到没值的过程 |
|||
this.cachePrice = null; |
|||
this.reset(); |
|||
} |
|||
// } |
|||
}, |
|||
symbol(){ |
|||
this.getCoinInfo() |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
getCoinInfo(){ |
|||
// console.log(this.symbol.indexOf('usdt')!=-1) |
|||
|
|||
if(!this.symbol){ |
|||
return; |
|||
} |
|||
if(this.symbol.indexOf('usdt')!=-1){ |
|||
var market=this.symbol.substring(0,this.symbol.length-4); |
|||
}else{ |
|||
var market=this.symbol.substring(0,this.symbol.length-3); |
|||
} |
|||
// console.log(market) |
|||
let data = { |
|||
coin_name:market, |
|||
lang:this.lang |
|||
} |
|||
Market.getCoinInfo(data).then(res => { |
|||
this.detail = res |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
renderBuyAmount(val, index) { |
|||
// console.info(val) |
|||
// console.info(this.buyorder) |
|||
if (!this.buyorder.entrust_price) { |
|||
this.visibles.buy.limitPrice = true; |
|||
this.msgList.buy[1] = this.$t('nav.set'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.buyPercentIndex = index; |
|||
this.buyTotal = Math.multiple(this.fromBalance, val); |
|||
}, |
|||
|
|||
renderSellAmount(val, index) { |
|||
if (!this.sellorder.entrust_price) { |
|||
this.visibles.sell.limitPrice = true; |
|||
this.msgList.sell[1] = this.$t('nav.set'); |
|||
this.clearAll(); |
|||
return; |
|||
} |
|||
this.sellPercentIndex = index; |
|||
this.sellorder.amount = Math.multiple(this.toBalance, val); |
|||
}, |
|||
|
|||
handleBuyOrder() { |
|||
|
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.buyorder, this.buyTotal, "buy")) return; |
|||
|
|||
const baseArgs = { |
|||
symbol: this.pair.to.concat('/', this.pair.from), |
|||
type: this.type, |
|||
}; |
|||
|
|||
// 区分限价、市价和条件委托单 |
|||
// 1、限价单买入时 需要的参数：价格、数量、 |
|||
// 2、市价单买入时 需要的参数：总值 |
|||
// 3、条件单买入时 需要的参数：触发价、价格数量或者总值 |
|||
// 4、卖出时 需要价格和数量 |
|||
Exchange.storeEntrust(Object.assign(this.buyorder, { |
|||
total: this.buyTotal, |
|||
}, baseArgs)).then(data => { |
|||
this.$message({ |
|||
message:'success', |
|||
type: "success" |
|||
}); |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
handleSellOrder() { |
|||
// 执行前端的有效性验证 |
|||
if (!this.chkValidate(this.sellorder, this.sellTotal, "sell")) return; |
|||
// console.info(this.sellTotal) |
|||
const baseArgs = { |
|||
symbol: this.pair.to.concat('/', this.pair.from), |
|||
type: this.type, |
|||
}; |
|||
Exchange.storeEntrust(Object.assign(this.sellorder, { |
|||
total: this.sellTotal |
|||
}, baseArgs)).then(data => { |
|||
this.$message({ |
|||
message:'success', |
|||
type: "success" |
|||
}); |
|||
// 触发父组件的方法 更新余额和订单 |
|||
this.$emit('update'); |
|||
// 清空表单 |
|||
this.reset(); |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
|
|||
reset() { |
|||
|
|||
// 如果没有newTrade时 则没有缓存价格 重置为最小值0 |
|||
// 由于输入框去除了精度空值 这里还需要手动设置精度值 |
|||
let price = this.cachePrice || 0; |
|||
// console.info(price) |
|||
// console.info(this.priceDecimals) |
|||
this.buyorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
this.buyorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
this.sellorder.entrust_price = Math.omitTo(price, this.priceDecimals); |
|||
// console.info(this.sellorder.entrust_price) |
|||
this.sellorder.trigger_price = Math.omitTo(price, this.priceDecimals); |
|||
|
|||
// 清空数量 |
|||
this.buyorder.amount = 0; |
|||
this.sellorder.amount = 0; |
|||
|
|||
// total赋值会触发set方法 |
|||
// this.buyTotal = 0; |
|||
// this.cacheTotal = 0; |
|||
|
|||
// 去除百分比样式 |
|||
this.buyPercentIndex = -1; |
|||
this.sellPercentIndex = -1; |
|||
}, |
|||
|
|||
clearAll() { |
|||
// 5s后统一清除提示框 |
|||
setTimeout(function () { |
|||
Object.keys(this.visibles.buy).forEach(key => this.visibles.buy[key] = false); |
|||
Object.keys(this.visibles.sell).forEach(key => this.visibles.sell[key] = false); |
|||
}.bind(this), 5000); |
|||
}, |
|||
|
|||
empty(val) { |
|||
let ret; |
|||
switch (typeof val) { |
|||
case "number": |
|||
ret = val == 0; |
|||
break; |
|||
case "string": |
|||
ret = val == "0" || /^\s?$/.test(val); |
|||
break; |
|||
case "boolean": |
|||
ret = val; |
|||
break; |
|||
default: |
|||
ret = Boolean(val); |
|||
break; |
|||
} |
|||
return ret; |
|||
}, |
|||
|
|||
chkValidate(order, total, orderType) { |
|||
// |
|||
// 验证登录 |
|||
if (!this.isLogin) { |
|||
this.$confirm(this.$t('nav.login'), { |
|||
confirmButtonText:this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$router.push(`/sign-in`); |
|||
}).catch(); |
|||
return; |
|||
} |
|||
|
|||
let flag = true; |
|||
|
|||
switch (this.type) { |
|||
|
|||
case 1: // limit |
|||
if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a1'); |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a2'); |
|||
} else { |
|||
if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.a3')+`${this.minQty}`; |
|||
} |
|||
|
|||
if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].orderTotal = true; |
|||
this.msgList[orderType][5] = this.$t('exchange.total')+`${this.minTotal}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 2: // market |
|||
if (order.direction == "buy") { // 买 |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.a4'); |
|||
} else if (this.total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles.marketTotal = true; |
|||
this.msgList[3] = this.$t('nav.a5')+` ${this.minTotal}`; |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { // 卖 |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a6'); |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.a7')+` ${this.minQty}`; |
|||
} |
|||
} |
|||
break; |
|||
|
|||
case 3: // stop-limit |
|||
|
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.a8') |
|||
} else if (this.empty(order.entrust_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitPrice = true; |
|||
this.msgList[orderType][1] = this.$t('nav.a9') |
|||
} else if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].limitAmount = true; |
|||
this.msgList[orderType][2] = this.$t('nav.b1') |
|||
} |
|||
break; |
|||
|
|||
case 4: // stop-market |
|||
if (this.empty(order.trigger_price)) { |
|||
flag = false; |
|||
this.visibles[orderType].trigger = true; |
|||
this.msgList[orderType][0] = this.$t('nav.b2') |
|||
} else { |
|||
|
|||
if (order.direction == "buy") { |
|||
if (this.empty(total)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b3') |
|||
} else if (total < this.minTotal) { |
|||
flag = false; |
|||
this.visibles[orderType].marketTotal = true; |
|||
this.msgList[orderType][3] = this.$t('nav.b5')+` ${this.minTotal}` |
|||
} |
|||
} |
|||
|
|||
if (order.direction == "sell") { |
|||
if (this.empty(order.amount)) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] = this.$t('nav.b6') |
|||
} else if (order.amount < this.minQty) { |
|||
flag = false; |
|||
this.visibles[orderType].marketAmount = true; |
|||
this.msgList[orderType][4] =this.$t('nav.b7')+ ` ${this.minQty}` |
|||
} |
|||
} |
|||
|
|||
} |
|||
break; |
|||
} |
|||
|
|||
// 清除所有样式 |
|||
this.clearAll(); |
|||
|
|||
// 返回验证结果 |
|||
return flag; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
created() { |
|||
this.getCoinInfo() |
|||
this.reset(); |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.buyPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #26a69a; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.sellPercentActive { |
|||
a:link { |
|||
font-weight: bold; |
|||
background: #ef5350; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.input-group-text { |
|||
width: 68px; |
|||
@include flexible(row, center, center); |
|||
} |
|||
|
|||
.market-trade { |
|||
border: none; |
|||
border-color: transparent; |
|||
} |
|||
.market{ |
|||
width: 300px; |
|||
height: 500px; |
|||
overflow: scroll; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 10px; |
|||
display: -webkit-box; |
|||
color: black; |
|||
.ov{ |
|||
width: 100%; |
|||
table-layout:fixed; |
|||
word-break:break-all; |
|||
overflow:hidden; |
|||
} |
|||
} |
|||
.p-y-xs{ |
|||
padding: 5px 0; |
|||
} |
|||
.el-button{ |
|||
padding: 0!important; |
|||
background: transparent!important; |
|||
} |
|||
</style> |
|||
@ -1,54 +0,0 @@ |
|||
<template> |
|||
<div class="col-md-3"> |
|||
<div class="market-news mt15"> |
|||
|
|||
<h2 class="heading">{{ $t("common.news") }}</h2> |
|||
<ul> |
|||
<li v-for="item in records" :key="item.id"> |
|||
|
|||
<router-link :to="`/college/detail/${item.category_id}/${item.id}`"> |
|||
<strong>{{ truncate(item.title, 25) }}</strong> |
|||
{{ truncate(item.excerpt, 50) }} |
|||
<span>{{ item.updated_at }}</span> |
|||
</router-link> |
|||
|
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Exchange from "@/api/exchange"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
records: [], // 所有新动态 |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
getDynamic() { |
|||
Exchange.newTrends(10).then(data => { |
|||
this.records = data; |
|||
}).catch(err => { |
|||
|
|||
}); |
|||
}, |
|||
truncate(str, length) { |
|||
return _.truncate(str, { |
|||
length |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
this.getDynamic(); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,303 +0,0 @@ |
|||
<template> |
|||
<div class="col-md-9"> |
|||
<div class="exchange-history order-history market-order mt15"> |
|||
|
|||
<ul class="nav nav-pills" role="tablist"> |
|||
<li class="nav-item" @click="toggle('opens')"> |
|||
<a class="nav-link active" data-toggle="pill" href="#open-orders" role="tab" aria-selected="true"> |
|||
{{ $t("common.open-orders") }}</a> |
|||
</li> |
|||
<!-- <li class="nav-item" @click="toggle('conditions')"> |
|||
<a class="nav-link" data-toggle="pill" href="#stop-orders" role="tab" aria-selected="false"> |
|||
{{ $t("common.condition-orders") }}</a> |
|||
</li> --> |
|||
<li class="nav-item" @click="toggle('histories')"> |
|||
<a class="nav-link" data-toggle="pill" href="#order-history" role="tab" aria-selected="false"> |
|||
{{ $t("common.history-orders") }}</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="open-orders" role="tabpanel"> |
|||
<table class="table" v-if="ordersOpen.total"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{ $t("common.created") }}</th> |
|||
<th>{{ $t("common.pair") }}</th> |
|||
<th>{{ $t("common.direction") }}</th> |
|||
<th>{{ $t("common.order-type") }}</th> |
|||
<th>{{ $t("common.order-price") }}</th> |
|||
<th>{{ $t("common.order-amount") }}</th> |
|||
<th>{{ $t("common.executed-amount") }}</th> |
|||
<th>{{ $t("common.executed-total") }}</th> |
|||
<th>{{ $t("common.outstanding") }}</th> |
|||
<th>{{ $t("common.order-total") }}</th> |
|||
<!-- <th>状态</th> --> |
|||
<th class="text-right">{{ $t("common.action") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody class="order-tbody"> |
|||
<tr v-for="(item,idx) in ordersOpen.data" :key="item.id" class="text-nowrap"> |
|||
<td>{{item.created_at}}</td> |
|||
<td>{{item.symbol}}</td> |
|||
|
|||
<template v-if="item.entrust_type == 1"> |
|||
<td class="green">{{$t("common.buy-in")}}</td> |
|||
</template> |
|||
<template v-else-if="item.entrust_type == 2"> |
|||
<td class="red">{{$t("common.sell-out")}}</td> |
|||
</template> |
|||
|
|||
<td> |
|||
<template v-if="item.type==1">{{ $t("common.limit-type") }}</template> |
|||
<template v-if="item.type==2">{{ $t("common.market-type") }}</template> |
|||
</td> |
|||
|
|||
<td>{{item.entrust_price|omitTo(priceDecimals)}}</td> |
|||
|
|||
<td>{{item.amount|omitTo(qtyDecimals)}}</td> |
|||
|
|||
<td>{{item.traded_amount|omitTo(priceDecimals)}}</td> |
|||
<td>{{item.traded_money|omitTo(priceDecimals)}}</td> |
|||
|
|||
<td>{{item.surplus_amount||omitTo(qtyDecimals)}}</td> |
|||
|
|||
<td>{{item.money ? Math.omitTo(item.money, priceDecimals) : '-'}}</td> |
|||
<!-- <td>完成</td> --> |
|||
<td class="text-nowrap"> |
|||
<button type="button" class="btn btn-sm btn-outline-danger" |
|||
@click="delOrder(item,idx)">{{ $t("common.cancel") }}</button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="no-data" v-else> |
|||
<span> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="tab-pane fade" id="stop-orders" role="tabpanel"> |
|||
<ul class="d-flex justify-content-between market-order-item"> |
|||
<li>{{ $t("common.created") }}</li> |
|||
<li>{{ $t("common.pair") }}</li> |
|||
<li>{{ $t("common.direction") }}</li> |
|||
<li>{{ $t("common.order-type") }}</li> |
|||
<li>{{ $t("common.avg-price") }}</li> |
|||
<li>{{ $t("common.executed") }}</li> |
|||
<li>{{ $t("common.order-total") }}</li> |
|||
<li>{{ $t("common.price-total") }}</li> |
|||
</ul> |
|||
<span class="no-data"> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="tab-pane fade" id="order-history" role="tabpanel"> |
|||
<table class="table" v-if="ordersHistory.total"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{ $t("common.created") }}</th> |
|||
<th>{{ $t("common.pair") }}</th> |
|||
<th>{{ $t("common.direction") }}</th> |
|||
<th>{{ $t("common.order-type") }}</th> |
|||
<th>{{ $t("common.order-price") }}</th> |
|||
<th>{{ $t("common.order-amount") }}</th> |
|||
<th>{{ $t("common.executed-amount") }}</th> |
|||
<th>{{ $t("common.avg-price") }}</th> |
|||
|
|||
<th>{{ $t("common.order-total") }}</th> |
|||
<th>{{ $t("common.status") }}</th> |
|||
<th>{{ $t("common.details") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<template v-for="(item,index) in ordersHistory.data"> |
|||
<tr class="text-nowrap" :key="item.id" :name="item.entrust_type+'_'+item.id+'_'+index" |
|||
slot="title" @click="handleChange(item)"> |
|||
<td>{{item.created_at}}</td> |
|||
<td>{{item.symbol}}</td> |
|||
<template v-if="item.entrust_type == 1"> |
|||
<td class="green">{{$t("common.buy-in")}}</td> |
|||
</template> |
|||
<template v-else-if="item.entrust_type == 2"> |
|||
<td class="red">{{$t("common.sell-out")}}</td> |
|||
</template> |
|||
<td> |
|||
<template v-if="item.type==1">{{ $t("common.limit-type") }}</template> |
|||
<template v-if="item.type==2">{{ $t("common.market-type") }}</template> |
|||
</td> |
|||
<td>{{item.entrust_price ? Math.omitTo(item.entrust_price, priceDecimals) : '-'}} |
|||
</td> |
|||
<td>{{item.amount|omitTo(qtyDecimals)}}</td> |
|||
|
|||
<td>{{ item.traded_amount|omitTo(qtyDecimals) }}</td> |
|||
|
|||
<td v-if="item.status"> |
|||
{{Math.division(item.traded_money,item.traded_amount,priceDecimals)}} |
|||
</td> |
|||
<td v-else>-</td> |
|||
<td>{{item.traded_money|omitTo(priceDecimals)}}</td> |
|||
<template v-if="item.status"> |
|||
<td v-if="item.status == 3"> |
|||
{{ $t("common.completed") }} |
|||
</td> |
|||
</template> |
|||
<template v-else> |
|||
<td>{{ $t("common.canceled") }}</td> |
|||
</template> |
|||
<td> |
|||
<i v-if="item.show" class="el-icon-arrow-down"></i> |
|||
<i v-else class="el-icon-arrow-right"></i> |
|||
</td> |
|||
</tr> |
|||
<tr :key="item.id+'t'" v-if="item.show"> |
|||
<td colspan="11"> |
|||
<template v-if="item.children && item.children.length"> |
|||
<div v-for="rec in item.children" :key="rec.order_id"> |
|||
<span> |
|||
<span class="text-secondary"> |
|||
{{ $t("common.id") }} |
|||
</span>：{{ rec.order_id}}   |
|||
</span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.created") }}</span>：{{ rec.created_at}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.filled-price") }}</span>：{{ rec.unit_price|omitTo(priceDecimals)}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.filled-amount") }}</span>：{{ rec.trade_amount|omitTo(qtyDecimals)}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.filled-total") }}</span>：{{ rec.trade_money|omitTo(priceDecimals)}} |
|||
 </span> |
|||
<span><span class="text-secondary"> |
|||
{{ $t("common.fee") }}</span>：{{ rec.trade_fee|omitTo(priceDecimals)}} |
|||
 </span> |
|||
</div> |
|||
</template> |
|||
<div class="text-center text-secondary" v-else> |
|||
Loading... |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</template> |
|||
</tbody> |
|||
</table> |
|||
<span class="no-data" v-else> |
|||
<i class="icon ion-md-document"></i> |
|||
{{ $t("common.notData") }} |
|||
</span> |
|||
<div class="p-2"> |
|||
<el-pagination layout="prev, pager, next" :page-size="ordersHistory.per_page" |
|||
@current-change="changePagination" :total="ordersHistory.total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Order from "@/api/order"; |
|||
|
|||
export default { |
|||
props: [ |
|||
"ordersOpen", |
|||
"ordersHistory", |
|||
"conditionOrders", |
|||
"priceDecimals", |
|||
"qtyDecimals", |
|||
"isLogin", |
|||
"pair" |
|||
], |
|||
|
|||
data() { |
|||
return { |
|||
currentTab: "opens", |
|||
activeItems: [] |
|||
}; |
|||
}, |
|||
methods: { |
|||
toggle(name) { |
|||
this.currentTab = name; |
|||
// 更新父组件 |
|||
this.$emit("change", name); |
|||
}, |
|||
|
|||
update() { |
|||
this.$emit("update"); |
|||
}, |
|||
|
|||
// 撤销当前订单 |
|||
delOrder(item, idx) { |
|||
let data = { |
|||
entrust_id: item.id, |
|||
entrust_type: item.entrust_type, |
|||
symbol: item.symbol |
|||
}; |
|||
this.$confirm(this.$t("order.ifCancel", { |
|||
confirmButtonText: this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
})) |
|||
.then(res => { |
|||
Order.cancelEntrust(data) |
|||
.then(res => { |
|||
this.$message.success(this.$t("order.cancelSuccess")); |
|||
this.update(); |
|||
}) |
|||
.catch(() => {}); |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
handleChange(item) { |
|||
this.$set(item, "show", !item.show); |
|||
if (item.children) return; |
|||
if (this.isLogin) { |
|||
Order.getEntrustTradeRecord({ |
|||
entrust_type: item.entrust_type, |
|||
entrust_id: item.id |
|||
}) |
|||
.then(data => { |
|||
this.$set(item, "children", data); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
|
|||
}, |
|||
changePagination(idx) { |
|||
// console.log(idx); |
|||
this.$emit("Pagination", idx); |
|||
} |
|||
}, |
|||
created() { |
|||
// console.log(this.ordersHistory); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.exchange-history { |
|||
.nav { |
|||
background: #f5f9fc; |
|||
} |
|||
|
|||
.nav-link.active { |
|||
color: #007bff; |
|||
background: transparent; |
|||
} |
|||
} |
|||
|
|||
.order-tbody { |
|||
display: table-row-group !important; |
|||
|
|||
tr { |
|||
float: none; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,260 +0,0 @@ |
|||
<template> |
|||
<div class="col-md-3"> |
|||
<div class="market-pairs"> |
|||
|
|||
<!-- 搜索框区域 --> |
|||
<div class="input-group"> |
|||
<div class="input-group-prepend"> |
|||
<span class="input-group-text" id="inputGroup-sizing-sm"> |
|||
<i class="icon ion-md-search"></i> |
|||
</span> |
|||
</div> |
|||
<input type="text" class="form-control" v-model="keyword" :placeholder="$t('exchange.search')" aria-describedby="inputGroup-sizing-sm"> |
|||
</div> |
|||
|
|||
<!-- 币种列表 --> |
|||
<ul class="nav nav-pills" role="tablist" ref="navList"> |
|||
|
|||
<li class="nav-item" v-for="(coin, index) in markets" :key="index"> |
|||
<a :class="[`nav-link`, {active:currentCoinIdx == index}]" href @click.prevent="currentCoinIdx = index"> |
|||
<!-- 查看收藏交易对 --> |
|||
<template v-if="coin.coin_name == 'fav'"> |
|||
<i class="icon ion-md-star"></i> |
|||
</template> |
|||
<template v-else> |
|||
{{ coin.coin_name }} |
|||
</template> |
|||
</a> |
|||
</li> |
|||
|
|||
</ul> |
|||
|
|||
<!-- 币种行情信息，不同的交易对价值 --> |
|||
<div class="tab-content"> |
|||
|
|||
<div v-for="(coin, index) in markets" :key="index"> |
|||
<table class="table" v-if="currentCoinIdx == index"> |
|||
<thead> |
|||
<tr style="display:block"> |
|||
<th class="w-33">{{ $t("exchange.pair") }}</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.last-price") }}</th> |
|||
<th class="w-33 text-right">{{ $t("exchange.change") }}</th> |
|||
</tr> |
|||
</thead> |
|||
|
|||
<tbody> |
|||
<tr style="display:block" :class="{highlight : item.pair_id == marketId}" @click="$emit('update:symbol', item.symbol)" v-for="(item, key) in coin.marketInfoList" :key="key" v-show="isShow(item)"> |
|||
<td class="w-33" style="white-space:nowrap"> |
|||
<i class="icon ion-md-star h6" :class="{ active: isCoolect(item) }" @click.self="handleFav(item)"></i> |
|||
{{ coin.coin_name == 'fav' ? item.pair_name : item.coin_name + '/' + coin.coin_name}} |
|||
</td> |
|||
<td class="w-33 text-right"> |
|||
{{ coin.coin_name == 'fav' ? item.close : item.price}} |
|||
</td> |
|||
<!-- <td class="w-33 text-right" :class="item.increaseStr.startsWith('-') ? 'red' : 'green'"> --> |
|||
<td class="w-33 text-right" :class="increaseStrColor(item)"> |
|||
{{ item.increaseStr }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Market from "@/api/market"; |
|||
import Home from "@/api/home"; |
|||
import { symbolCircle } from "d3"; |
|||
export default { |
|||
|
|||
props: { |
|||
marketList: { |
|||
type: Array, |
|||
|
|||
// 初始化填充页面排版的数据 |
|||
default: Array(5).fill({ |
|||
coin_name: "-", |
|||
marketInfoList: Array(10).fill({ |
|||
coin_name: "-", |
|||
price: "-", |
|||
increace: 0, |
|||
increaseStr: "+0.00%", |
|||
}), |
|||
}) |
|||
}, |
|||
|
|||
isLogin: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
|
|||
marketId: { |
|||
type: Number, |
|||
default: null, |
|||
}, |
|||
|
|||
firstEnter: true, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
keyword: '', // 搜索关键字 |
|||
current: "fav", |
|||
// 个人收藏的交易对信息 |
|||
favList: { |
|||
coinName: "fav", |
|||
marketInfoList: Array(10).fill({ |
|||
pair: "-", |
|||
price: "-", |
|||
increace: 0, |
|||
increaseStr: "+0.00%", |
|||
}), |
|||
}, |
|||
|
|||
// 收藏交易对的数据结构 |
|||
favList: { |
|||
coin_name: "fav", |
|||
image: require("@/assets/img/waiting.png"), |
|||
marketInfoList: [], |
|||
}, |
|||
|
|||
currentCoinIdx: 0, // 当前展示的币种 |
|||
|
|||
cacheMarketList : [], |
|||
collect:[] |
|||
} |
|||
|
|||
}, |
|||
|
|||
computed: { |
|||
|
|||
markets() { |
|||
// 将行情列表和收藏交易对整理一起 方便渲染 |
|||
return [...this.cacheMarketList, this.favList]; |
|||
}, |
|||
|
|||
}, |
|||
|
|||
watch : { |
|||
marketList (list) { |
|||
if (list.length) this.cacheMarketList = list; |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
/* |
|||
* 询问用户是否登录 |
|||
* 如果已经登录 返回true |
|||
* 如果没有登录 询问用户是否登录进行操作 |
|||
*/ |
|||
inquiryLogin() { |
|||
if (!this.isLogin) { |
|||
this.$confirm(this.$t('nav.login'), this.$t('nav.tips'), { |
|||
confirmButtonText: this.$t('home.Login'), |
|||
cancelButtonText: this.$t('home.Cancel'), |
|||
type: "info", |
|||
}) |
|||
.then(() => { |
|||
location.href = "/login"; |
|||
}) |
|||
.catch(() => {}); |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
}, |
|||
|
|||
// 搜索关键字 |
|||
isShow(symbol) { |
|||
|
|||
const reg = new RegExp(this.keyword, "gi"); |
|||
if (!this.keyword) return true; |
|||
else { |
|||
let name = symbol.pair_name || symbol.coin_name; |
|||
return name.search(reg) >= 0; |
|||
} |
|||
// return !this.keyword || symbol.coinName.concat(symbol.pair).search(reg) >= 0; |
|||
|
|||
}, |
|||
// 是否为自选 |
|||
isCoolect(i) { |
|||
// console.log(this.markets[this.currentCoinIdx].marketInfoList) |
|||
return this.favList.marketInfoList.map((item) => item.pair_name).includes(i.pair_name); |
|||
}, |
|||
// 添加收藏的方法 |
|||
handleFav(item) { |
|||
let data = { |
|||
pair_name: item.pair_name, |
|||
}; |
|||
Home.option(data) |
|||
.then((res) => { |
|||
this.getCollect(); |
|||
if (res) { |
|||
this.$message.success(this.$t("home.add")); |
|||
} else { |
|||
this.$message.success(this.$t("home.cancel")); |
|||
} |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
getCollect() { |
|||
Home.getCollect() |
|||
.then((res) => { |
|||
this.favList.marketInfoList = res||[]; |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
increaseStrColor(item){ |
|||
if (item && item.increaseStr && item.increaseStr.startsWith('-')) { |
|||
return 'red' |
|||
} else { |
|||
return 'green' |
|||
} |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
|
|||
}, |
|||
|
|||
mounted() { |
|||
// 初始化市场行情 覆盖初始化的[] |
|||
Market.getMarketList().then(data => { |
|||
this.cacheMarketList = data; |
|||
}).catch(err => {}); |
|||
|
|||
// console.log(this.isLogin) |
|||
// 如果已登陆 则写入收藏交易对 |
|||
if (this.isLogin) { |
|||
this.getCollect() |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.highlight { |
|||
background: #f6f8f9; |
|||
background: #F8F8FF; |
|||
|
|||
td:first-child { |
|||
color: #007bff !important; |
|||
} |
|||
} |
|||
|
|||
.w-33 { |
|||
display: inline-block !important; |
|||
vertical-align: top !important; |
|||
width: 32% !important; |
|||
} |
|||
.active{ |
|||
color: #326AEB!important; |
|||
} |
|||
</style> |
|||
@ -1,153 +0,0 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div class="vh-100 d-flex justify-content-center"> |
|||
<div class="form-access my-auto bg-panel"> |
|||
<form class="chk-body"> |
|||
<template v-if="step == 1"> |
|||
|
|||
<div class="text-center h3 mb-4"> |
|||
<span>{{ $t("login.find-password") }}</span> |
|||
</div> |
|||
|
|||
<!-- <span class="mt-4"></span> --> |
|||
<div class="form-group"> |
|||
<input type="text" v-model="user.account" class="form-control" :placeholder="$t('login.enter-account')" > |
|||
</div> |
|||
<button type="submit" class="btn btn-primary rounded-pill" @click.prevent="step1">{{ $t("login.submit") }}</button> |
|||
</template> |
|||
<template v-else-if="step == 2"> |
|||
|
|||
<div class="text-center h3 mb-4"> |
|||
<span>{{ $t("login.verCode") }}</span> |
|||
</div> |
|||
|
|||
<div class="input-group mb-3" > |
|||
<el-input v-model="user.password" type="password" show-password required :placeholder="$t('login.new-password')" ></el-input> |
|||
</div> |
|||
|
|||
<div class="input-group mb-3" > |
|||
<el-input v-model="user.password_confirmation" type="password" data-type="repassword" show-password required :placeholder="$t('login.confirm-password')" ></el-input> |
|||
</div> |
|||
|
|||
<!-- 图形验证码 --> |
|||
<div class="input-group mb-3"> |
|||
<input type="text" id="gccode" v-model="user.gc_code" required :placeholder="$t('homeNewText.ee6')" class="form-control col-6" /> |
|||
<img class="col-6" :src="Graph_che" @click="gett_gc_code" /> |
|||
</div> |
|||
|
|||
<div class="input-group mb-3" v-if="user.google_status"> |
|||
<input type="text" v-model="codes.google_code" class="form-control" required pattern="\d{6}" data-message="code needs 6 number" :placeholder="$t('login.google-code')" /> |
|||
</div> |
|||
|
|||
<div class="input-group mb-3" v-if="user.email_status"> |
|||
<input type="text" v-model="codes.email_code" required class="form-control" pattern="\d{6}" data-message="code needs 6 number" :placeholder="$t('login.email-code')" /> |
|||
<div class="input-group-append"> |
|||
<!-- <get-code class="btn get-code btn-outline-primary" :data="{email:user.email}" :type="7" /> --> |
|||
<get-code class="btn get-code btn-outline-primary" :data="{email:user.email,gc_code:user.gc_code,gc_key:user.gc_key}" :type="7" @reGetGCCode="gett_gc_code()" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="input-group mb-3" v-if="user.phone_status"> |
|||
<input type="text" required v-model="codes.sms_code" class="form-control" pattern="\d{6}" data-message="code needs 6 number" :placeholder="$t('login.sms-code')" /> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn get-code btn-outline-primary" :data="{country_code:user.country_code, phone:user.phone}" :type="6" /> |
|||
</div> |
|||
</div> |
|||
<button type="submit" class="btn btn-primary rounded-pill" @click.prevent="step2">{{$t("login.submit")}}</button> |
|||
</template> |
|||
</form> |
|||
|
|||
<h2>{{$t("login.Remembered")}} |
|||
<router-link to="/sign-in">{{$t("login.login")}}</router-link> |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Member from "@/api/member"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
step: 1, |
|||
user: { |
|||
account: "", |
|||
password : "", |
|||
password_confirmation : "", |
|||
gc_code: '', |
|||
gc_key: '' |
|||
}, |
|||
codes : { |
|||
google_code : '', |
|||
email_code : '', |
|||
sms_code : '' |
|||
}, |
|||
Graph_che: '' |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
step1() { |
|||
Member.forgetPasswordAttempt({ |
|||
account: this.user.account |
|||
}).then(data => { |
|||
// 将用户信息 写入user对象中 |
|||
Object.assign(this.user, data); |
|||
// 进入第二步验证 |
|||
this.step = 2; |
|||
}).catch(err => { |
|||
// this.$message({}); |
|||
}) |
|||
}, |
|||
|
|||
step2() { |
|||
if (utils.validate(".chk-body")) { |
|||
Member.forgetPwdSumit(Object.assign(this.user, this.codes)).then(dta => { |
|||
this.$message({ |
|||
type : "success", |
|||
message : "修改密码成功，正在跳转到登录页", |
|||
duration : 2000, |
|||
onClose: () => { |
|||
// 注册完成 进入登录页 |
|||
this.$router.push("/sign-in"); |
|||
} |
|||
}) |
|||
}).catch(err => { |
|||
this.gett_gc_code(); |
|||
}) |
|||
} |
|||
}, |
|||
gett_gc_code(){ |
|||
Member.sendGCode().then( (res) =>{ |
|||
this.user.gc_key = res.key; |
|||
this.Graph_che = res.img |
|||
// console.log("gc",res); |
|||
this.$message({ |
|||
message: `${type} ${this.$t("login.sendOK")}`, |
|||
type: "success", |
|||
duration : 2000, |
|||
}); |
|||
}).catch( err =>{ |
|||
console.log(err) |
|||
}); |
|||
}, |
|||
}, |
|||
mounted(){ |
|||
this.gett_gc_code(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep .el-input__inner,.form-control{ |
|||
padding-top:.375rem; |
|||
padding-bottom:.375rem; |
|||
height: 45px !important; |
|||
} |
|||
.get-code{ |
|||
padding-top: 11px !important; |
|||
padding-bottom: 11px !important; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -1,25 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="container-fluid mtb15"> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<!-- TradingView Widget BEGIN --> |
|||
<div class="tradingview-widget-container"> |
|||
<div class="tradingview-widget-container__widget"></div> |
|||
<iframe src="/static/Kline/heat-map.html" frameborder="0" width="100%" height="920"></iframe> |
|||
</div> |
|||
<!-- TradingView Widget END --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,87 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 my-4" v-if="article"> |
|||
<!-- <el-breadcrumb separator-class="el-icon-arrow-right"> |
|||
<el-breadcrumb-item :to="{ path: `/notice`}">{{article.category_name}}</el-breadcrumb-item> |
|||
<el-breadcrumb-item :to="{path:`/notice/${aid}`}">{{$t('college.article')}}</el-breadcrumb-item> |
|||
</el-breadcrumb> --> |
|||
<div class="title h2 mt-4">{{article.title}}</div> |
|||
<div class="single-subtitle d-flex justify-content-between border-bottom pb-2"> |
|||
<div class="text-muted">{{article.created_at}}</div> |
|||
</div> |
|||
<div class="edit-content py-4"> |
|||
<div v-html="article.body"></div> |
|||
</div> |
|||
<div class="row mt-3"> |
|||
<div class="col-12"> |
|||
<div class="title h3 my-4">{{$t('college.recommendedCourse')}}</div> |
|||
<div class="row justify-content-between"> |
|||
<div class="item col-lg-3 col-md-6 mb-4 col-xs-12" v-for="(item,index) in recommend" :key="index"> |
|||
<router-link :to="`/college/detail/${item.category_id}/${item.id}`"> |
|||
<div class="banner"> |
|||
<!-- <img src="http://iph.href.lu/260x150" alt /> --> |
|||
<img :src="item.full_cover" alt /> |
|||
</div> |
|||
<div class="txt">{{item.title}}</div> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
aid: this.$route.params.aid, |
|||
article: null, |
|||
recommend: null, |
|||
} |
|||
}, |
|||
props:['id'], |
|||
watch: { |
|||
$route() { |
|||
this.aid = this.$route.params.id; |
|||
this.initPage(); |
|||
}, |
|||
}, |
|||
methods: { |
|||
initPage() { |
|||
this.getArticleDetail(); |
|||
this.getRecommend(); |
|||
}, |
|||
getArticleDetail() { |
|||
College.getArticleDetail(this.id).then(data => { |
|||
this.article = data; |
|||
}).catch(err => {}); |
|||
}, |
|||
getRecommend() { |
|||
College.getRecommend().then(data => { |
|||
this.recommend = data; |
|||
}).catch(err => {}) |
|||
} |
|||
}, |
|||
created() { |
|||
this.initPage(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep { |
|||
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{ |
|||
color: #606266; |
|||
} |
|||
.el-breadcrumb__item:last-child .el-breadcrumb__inner{ |
|||
color: white; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,61 +0,0 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div class="bg-panel my-4 p-4 rounded"> |
|||
<div class="list"> |
|||
<router-link :to="`/notice/${item.id}`" class="item d-flex border-bottom p-2 justify-content-between" v-for="item in list" :key="item.id"> |
|||
<div class="title text-truncate"> |
|||
{{item.title}} |
|||
</div> |
|||
<div class="time"> |
|||
{{item.created_at}} |
|||
</div> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-content-center mt-3"> |
|||
<el-pagination layout="prev, pager, next" :page-size="detail.per_page" @current-change="changePage" :total="detail.total"></el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Member from "@/api/member"; |
|||
export default { |
|||
name: 'notice', |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
page: 1, |
|||
list: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getList(1) |
|||
}, |
|||
methods: { |
|||
changePage(page) { |
|||
this.page = page |
|||
this.getList() |
|||
}, |
|||
getList() { |
|||
let data = { |
|||
page: this.page, |
|||
type:'notice' |
|||
} |
|||
Member.article(data).then(res => { |
|||
this.detail = res; |
|||
this.list = res.data; |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.list{ |
|||
.item{ |
|||
color: #758696; |
|||
&:hover{ |
|||
color: white; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,479 +0,0 @@ |
|||
<template> |
|||
<div class="order-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div |
|||
class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4" |
|||
> |
|||
<div class="h3">{{ $t("order.spotConsignment") }}</div> |
|||
</div> |
|||
<div class="row mb-4"> |
|||
<div class="col-12"> |
|||
<div class="panel-box bg-panel"> |
|||
<div class="heading d-flex"> |
|||
<div |
|||
class="tab-item mr-3" |
|||
@click="delegateType = 'current'" |
|||
:class="{ active: delegateType == 'current' }" |
|||
> |
|||
{{ $t("order.surrentCommission") }} |
|||
</div> |
|||
<div |
|||
class="tab-item" |
|||
@click="delegateType = 'old'" |
|||
:class="{ active: delegateType == 'old' }" |
|||
> |
|||
{{ $t("order.commissionRecord") }} |
|||
</div> |
|||
</div> |
|||
<!-- 当前委托筛选 --> |
|||
<div class="tab-content row" v-show="delegateType == 'current'"> |
|||
<div class="form-group col-sm-2"> |
|||
<label>{{ $t("order.tradingPair") }}</label> |
|||
<el-select |
|||
:placeholder="$t('order.select')" |
|||
v-model="Current.symbol" |
|||
> |
|||
<el-option |
|||
v-for="item in symbolList" |
|||
:key="item.pair_name" |
|||
:label="item.pair_name" |
|||
:value="item.pair_name" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-sm-2"> |
|||
<label>{{ $t("order.direction") }}</label> |
|||
<el-select |
|||
:placeholder="$t('order.select')" |
|||
v-model="Current.direction" |
|||
> |
|||
<el-option |
|||
v-for="item in direction" |
|||
:key="item.value" |
|||
v-bind="{ ...item }" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-sm-2"> |
|||
<label>{{ $t("order.entrustType") }}</label> |
|||
<el-select |
|||
:placeholder="$t('order.select')" |
|||
v-model="Current.type" |
|||
> |
|||
<el-option |
|||
v-for="item in typeList" |
|||
:key="item.value" |
|||
v-bind="{ ...item }" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-sm-2"> |
|||
<label class="d-block"> </label> |
|||
<button |
|||
type="submit" |
|||
class="btn btn-sm mt-1 btn-outline-primary mb-2" |
|||
@click="changePageCurrent(1)" |
|||
> |
|||
{{ $t("order.search") }} |
|||
</button> |
|||
<button |
|||
type="submit" |
|||
class="btn btn-sm mt-1 btn-outline-secondary mb-2" |
|||
@click=" |
|||
Current = $options.data().Current; |
|||
changePageCurrent(1); |
|||
" |
|||
> |
|||
<i class="el-icon-refresh-right"></i> |
|||
{{ $t("order.reset") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<!-- 委托记录筛选 --> |
|||
<div class="tab-content row" v-show="delegateType == 'old'"> |
|||
<!-- <div class="form-group col-md-4 col-sm-12"> |
|||
<label>{{$t('order.time')}}</label> |
|||
<el-date-picker type="daterange" :range-separator="$t('order.to')" :start-placeholder="$t('order.startTime')" :end-placeholder="$t('order.endTime')" v-model="Histor.date"></el-date-picker> |
|||
</div> --> |
|||
<div class="form-group col-md-2 col-sm-4"> |
|||
<label>{{ $t("order.tradingPair") }}</label> |
|||
<el-select |
|||
:placeholder="$t('order.select')" |
|||
v-model="Histor.symbol" |
|||
> |
|||
<el-option |
|||
v-for="item in symbolList" |
|||
:key="item.pair_name" |
|||
:label="item.pair_name" |
|||
:value="item.pair_name" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-md-2 col-sm-4"> |
|||
<label>{{ $t("order.direction") }}</label> |
|||
<el-select |
|||
:placeholder="$t('order.select')" |
|||
v-model="Histor.direction" |
|||
> |
|||
<el-option |
|||
v-for="item in direction" |
|||
:key="item.value" |
|||
v-bind="{ ...item }" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-md-2 col-sm-4"> |
|||
<label>{{ $t("order.entrustType") }}</label> |
|||
<el-select |
|||
:placeholder="$t('order.select')" |
|||
v-model="Histor.type" |
|||
> |
|||
<el-option |
|||
v-for="item in typeList" |
|||
:key="item.value" |
|||
v-bind="{ ...item }" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-md-2 col-sm-4"> |
|||
<label class="d-block"> </label> |
|||
<button |
|||
type="submit" |
|||
class="btn btn-sm mt-1 btn-outline-primary mb-2" |
|||
@click="changePageHistor(1)" |
|||
> |
|||
{{ $t("order.search") }} |
|||
</button> |
|||
<button |
|||
type="submit" |
|||
class="btn btn-sm mt-1 btn-outline-secondary mb-2" |
|||
@click=" |
|||
Histor = $options.data().Histor; |
|||
changePageHistor(1); |
|||
" |
|||
> |
|||
<i class="el-icon-refresh-right"></i> |
|||
{{ $t("order.reset") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<!-- 当期委托 --> |
|||
<div class="col-12" v-show="delegateType == 'current'"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a |
|||
class="nav-link active" |
|||
data-toggle="pill" |
|||
href="#tab1" |
|||
role="tab" |
|||
aria-selected="false" |
|||
>{{ $t("order.surrentCommission") }}</a |
|||
> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{ $t("order.time") }}</th> |
|||
<th>{{ $t("order.tradingPair") }}</th> |
|||
<th>{{ $t("order.direction") }}</th> |
|||
<th>{{ $t("order.type") }}</th> |
|||
<th>{{ $t("order.price") }}</th> |
|||
<th>{{ $t("order.matched") }}</th> |
|||
<th>{{ $t("order.toMatch") }}</th> |
|||
<th>{{ $t("order.total") }}</th> |
|||
<th class="text-right">{{ $t("order.opt") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, idx) in CurrentList" :key="item.id"> |
|||
<td>{{ item.created_at }}</td> |
|||
<td>{{ item.symbol }}</td> |
|||
<td>{{ item.entrust_type_text }}</td> |
|||
<td> |
|||
<template v-if="item.type == 1">{{ |
|||
$t("order.fixedPrice") |
|||
}}</template> |
|||
<template v-if="item.type == 2">{{ |
|||
$t("order.marketPrice") |
|||
}}</template> |
|||
</td> |
|||
<td>{{ item.entrust_price }}</td> |
|||
<td>{{ item.traded_amount }}</td> |
|||
<td>{{ item.surplus_amount }}</td> |
|||
<td>{{ item.money || "-" }}</td> |
|||
<td class="text-nowrap"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-sm btn-outline-danger" |
|||
@click="delOrder(item, idx)" |
|||
> |
|||
{{ $t("order.cancel") }} |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!CurrentList.length"> |
|||
<td colspan="9"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="CurrentObj.per_page" |
|||
@current-change="changePageCurrent" |
|||
:total="CurrentObj.total" |
|||
></el-pagination> |
|||
</div> |
|||
<!-- 委托记录 --> |
|||
<div class="col-12" v-show="delegateType == 'old'"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a |
|||
class="nav-link active" |
|||
data-toggle="pill" |
|||
href="#tab1" |
|||
role="tab" |
|||
aria-selected="false" |
|||
>{{ $t("order.commissionRecord") }}</a |
|||
> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{ $t("order.time") }}</th> |
|||
<th>{{ $t("order.tradingPair") }}</th> |
|||
<th>{{ $t("order.direction") }}</th> |
|||
<th>{{ $t("order.type") }}</th> |
|||
<th>{{ $t("order.averagePrice") }}</th> |
|||
<th>{{ $t("order.price") }}</th> |
|||
<th>{{ $t("order.matched") }}</th> |
|||
<th>{{ $t("order.totalAmountEntrusted") }}</th> |
|||
<th>{{ $t("order.total") }}</th> |
|||
<th>{{ $t("order.status") }}</th> |
|||
<th class="text-right">{{ $t("order.opt") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in HistorList" :key="item.id"> |
|||
<td>{{ item.created_at }}</td> |
|||
<td>{{ item.symbol }}</td> |
|||
<td>{{ item.entrust_type_text }}</td> |
|||
<td> |
|||
<template v-if="item.type == 1">{{ |
|||
$t("order.fixedPrice") |
|||
}}</template> |
|||
<template v-if="item.type == 2">{{ |
|||
$t("order.marketPrice") |
|||
}}</template> |
|||
</td> |
|||
<td> |
|||
{{ division(item.traded_money, item.traded_amount) }} |
|||
</td> |
|||
<td>{{ item.entrust_price || "-" }}</td> |
|||
<td>{{ item.traded_money }}</td> |
|||
<td>{{ item.amount }}</td> |
|||
<td>{{ item.money }}</td> |
|||
<td>{{ item.status_text }}</td> |
|||
<td class="text-nowrap"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-sm btn-outline-primary" |
|||
@click="getEntrustTradeRecord(item)" |
|||
> |
|||
{{ $t("order.see") }} |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!HistorList.length"> |
|||
<td colspan="9"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="HistorObj.per_page" |
|||
@current-change="changePageHistor" |
|||
:total="HistorObj.total" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<v-box |
|||
:value="!!activeItem.length" |
|||
@input="activeItem = []" |
|||
:title="$t('order.exchangeRecord')" |
|||
:width="700" |
|||
> |
|||
<order-detail :list="activeItem" /> |
|||
</v-box> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Order from "@/api/order"; |
|||
import utils from "../../utils"; |
|||
import orderDetail from "./order-detail"; |
|||
export default { |
|||
components: { |
|||
orderDetail |
|||
}, |
|||
data() { |
|||
return { |
|||
delegateType: "current", |
|||
Histor: { |
|||
page: 1, |
|||
direction: undefined, |
|||
type: undefined, |
|||
symbol: undefined, |
|||
date: undefined |
|||
}, |
|||
HistorList: [], |
|||
HistorObj: {}, |
|||
Current: { |
|||
direction: undefined, |
|||
type: undefined, |
|||
symbol: undefined, |
|||
page: 1 |
|||
}, |
|||
CurrentList: [], |
|||
CurrentObj: {}, |
|||
symbolList: [], |
|||
activeItem: [] |
|||
}; |
|||
}, |
|||
computed: { |
|||
direction: function() { |
|||
return [ |
|||
{ |
|||
label: this.$t("order.buy"), |
|||
value: "buy" |
|||
}, |
|||
{ |
|||
label: this.$t("order.sell"), |
|||
value: "sell" |
|||
} |
|||
]; |
|||
}, |
|||
typeList: function() { |
|||
return [ |
|||
{ |
|||
label: this.$t("order.fixedPrice"), |
|||
value: 1 |
|||
}, |
|||
{ |
|||
label: this.$t("order.marketPrice"), |
|||
value: 2 |
|||
} |
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 计算品均价 |
|||
division(num1, num2) { |
|||
if (!(num1 * 1) || !(num2 * 1)) return "-"; |
|||
return utils.division(num1, num2); |
|||
}, |
|||
changePageHistor(idx) { |
|||
this.HistorObj.page = idx; |
|||
this.getHistoryEntrust(); |
|||
}, |
|||
// 获取历史委托 |
|||
getHistoryEntrust() { |
|||
let data = this.Histor; |
|||
if (this.Histor.date) { |
|||
data.start_time = utils.parseTime(this.Histor.date[0]); |
|||
data.end_time = utils.parseTime(this.Histor.date[1]); |
|||
} |
|||
Order.getHistoryEntrust(data) |
|||
.then(res => { |
|||
this.HistorList = res.data; |
|||
this.HistorObj = res; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
changePageCurrent(idx) { |
|||
this.CurrentObj.page = idx; |
|||
this.getCurrentEntrust(); |
|||
}, |
|||
// 获取当前委托 |
|||
getCurrentEntrust() { |
|||
let data = this.Current; |
|||
Order.getCurrentEntrust(data) |
|||
.then(res => { |
|||
this.CurrentList = res.data; |
|||
this.CurrentObj = res; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
// 撤销当前订单 |
|||
delOrder(item, idx) { |
|||
let data = { |
|||
entrust_id: item.id, |
|||
entrust_type: item.entrust_type, |
|||
symbol: item.symbol |
|||
}; |
|||
this.$confirm(this.$t("order.ifCancel") + "？",{ |
|||
confirmButtonText:this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn') |
|||
}) |
|||
.then(res => { |
|||
Order.cancelEntrust(data) |
|||
.then(res => { |
|||
this.$message.success(this.$t("order.cancelSuccess")); |
|||
this.CurrentList.splice(idx, 1); |
|||
}) |
|||
.catch(() => {}); |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
// 获取交易对 |
|||
getExchangeSymbol() { |
|||
Order.getExchangeSymbol().then(res => { |
|||
this.symbolList = res; |
|||
}); |
|||
}, |
|||
// 获取交易详情 |
|||
getEntrustTradeRecord(item) { |
|||
let data = { |
|||
entrust_id: item.id, |
|||
entrust_type: item.entrust_type, |
|||
symbol: item.symbol |
|||
}; |
|||
Order.getEntrustTradeRecord(data).then(res => { |
|||
this.activeItem = res; |
|||
if (!res.length) this.$message(this.$t("order.noData")); |
|||
}); |
|||
} |
|||
}, |
|||
created() { |
|||
this.getHistoryEntrust(); |
|||
this.getCurrentEntrust(); |
|||
this.getExchangeSymbol(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,16 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
外汇合约 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,110 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('order.optionTransaction')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a |
|||
class="nav-link active" |
|||
data-toggle="pill" |
|||
href="#tab1" |
|||
role="tab" |
|||
aria-selected="false" |
|||
>{{$t('order.optionTransaction')}}</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr class="text-nowrap"> |
|||
<th>{{$t('order.orderNum')}}</th> |
|||
<th>{{$t('order.buyTime')}}</th> |
|||
<th>NSO{{$t('order.timeSharing')}}</th> |
|||
<th>{{$t('order.type')}}</th> |
|||
<th>{{$t('order.yield')}}</th> |
|||
<th>{{$t('order.buyNum')}}</th> |
|||
<th>{{$t('order.upAndDown')}}</th> |
|||
<th>{{$t('order.status')}}</th> |
|||
<th>{{$t('order.settlementQuantity')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{item.order_no}}</td> |
|||
<td>{{item.created_at}}</td> |
|||
<td>{{item.time_name}}</td> |
|||
<td> |
|||
<span class="increace" v-if="item.up_down==1">{{$t('order.buyUp')}} (≥{{item.range}}%)</span> |
|||
<span class="decreace" v-if="item.up_down==2">{{$t('order.buyDown')}} (≥{{item.range}}%)</span> |
|||
<span v-if="item.up_down==3">{{$t('order.buyLevel')}} (≥{{item.range}}%)</span> |
|||
</td> |
|||
<td>{{item.odds}}</td> |
|||
<td>{{item.bet_amount}}</td> |
|||
<td :class="(item.delivery_amount*1)>0?'increace':'decreace'">{{item.range}}%</td> |
|||
<td>{{item.status_text}}</td> |
|||
<td |
|||
:class="(item.delivery_amount*1)>0?'increace':'decreace'" |
|||
>{{item.delivery_amount}} ({{item.bet_coin_name}})</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="9"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="detail.per_page" |
|||
@current-change="changePage" |
|||
:total="detail.total" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Order from "@/api/order"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: 1, |
|||
list: [], |
|||
detail: [] |
|||
}; |
|||
}, |
|||
methods: { |
|||
changePage(idx) { |
|||
this.page = idx; |
|||
this.getOptionHistoryOrders(); |
|||
}, |
|||
getOptionHistoryOrders() { |
|||
let data = { |
|||
page: this.page |
|||
}; |
|||
Order.getOptionHistoryOrders(data).then(res => { |
|||
this.detail = res; |
|||
this.list = res.data; |
|||
}); |
|||
} |
|||
}, |
|||
created() { |
|||
this.getOptionHistoryOrders(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,37 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('order.tradingPair')}}</th> |
|||
<th>{{$t('order.transactionPrice')}}</th> |
|||
<th>{{$t('order.tradingVolume')}}</th> |
|||
<th>{{$t('order.aTurnover')}}</th> |
|||
<th>{{$t('order.serviceCharge')}}</th> |
|||
<th>{{$t('order.time')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.exchange_coin_id"> |
|||
<td>{{item.symbol}}</td> |
|||
<td>{{item.unit_price}}</td> |
|||
<td>{{item.trade_amount}}</td> |
|||
<td>{{item.trade_money}}</td> |
|||
<td>{{item.trade_fee}}</td> |
|||
<td>{{item.created_at}}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
props: { |
|||
list: { |
|||
type: Array, |
|||
defalut: [], |
|||
require: true |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
@ -1,16 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
永续合约 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,175 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container my-4"> |
|||
<div class="row"> |
|||
<div class="col-12 coin-list"> |
|||
<ul class="nav nav-pills markets-pair-list"> |
|||
<li class="nav-item"> |
|||
<a href="javascript:void(0)" class="nav-link" :class="{ active: side == 1 }" @click="changeSide(1)">{{$t('otc.b7')}}</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a href="javascript:void(0)" class="nav-link" :class="{ active: side == 2 }" @click="changeSide(2)">{{$t('otc.b8')}}</a> |
|||
</li> |
|||
<li class="flex-fill d-flex justify-content-end"> |
|||
<el-select |
|||
:value="status" |
|||
@input="changeStatus" |
|||
style="width: 150px" |
|||
> |
|||
<el-option :value="0" :label="$t('otc.b9')"></el-option> |
|||
<el-option :value="1" :label="$t('otc.c0')"></el-option> |
|||
<el-option :value="2" :label="$t('otc.c1')"></el-option> |
|||
</el-select> |
|||
</li> |
|||
</ul> |
|||
<table class="w-100"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('otc.c2')}}</th> |
|||
<th>{{$t('otc.c3')}}</th> |
|||
<th>{{$t('otc.c4')}}</th> |
|||
<th>{{$t('otc.c5')}}</th> |
|||
<th>{{$t('otc.a5')}}</th> |
|||
<th>{{$t('otc.c6')}}</th> |
|||
<th>{{$t('otc.c7')}}</th> |
|||
<th>{{$t('otc.c8')}}</th> |
|||
<th>{{$t('otc.c9')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{item.order_sn}}</td> |
|||
<td class="text-light">{{item.status_text}}</td> |
|||
<td class="text-light">{{item.money}}</td> |
|||
<td>{{item.price}}</td> |
|||
<td>{{item.amount}}</td> |
|||
<td>{{item.cur_amount}}</td> |
|||
<td>{{item.created_at}}</td> |
|||
<td> |
|||
<template v-for="minItem in item.pay_type"> |
|||
{{ payTypeMap[minItem] }}， |
|||
</template> |
|||
</td> |
|||
<td> |
|||
<button class="btn btn-sm btn-danger" v-if="item.status==1" @click="ifCancelEntrust(item)">{{$t('otc.d0')}}</button> |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="9"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="d-flex justify-content-center mt-3"> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="detail.per_page" |
|||
@current-change="changePage" |
|||
:total="detail.total" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
side: 1, |
|||
status: 1, |
|||
detail:{}, |
|||
page:1, |
|||
list:[] |
|||
}; |
|||
}, |
|||
computed: { |
|||
payTypeMap() { |
|||
return { |
|||
alipay: this.$t('otc.b1'), |
|||
wechat: this.$t('otc.b2'), |
|||
bank_card: this.$t('otc.b3'), |
|||
}; |
|||
}, |
|||
}, |
|||
created(){ |
|||
this.changePage(1) |
|||
}, |
|||
methods: { |
|||
|
|||
changeSide(type) { |
|||
this.side = type; |
|||
this.changePage(1); |
|||
}, |
|||
changeStatus(status) { |
|||
this.status = status; |
|||
this.changePage(1); |
|||
}, |
|||
changePage(idx) { |
|||
this.page = idx; |
|||
this.myEntrusts(); |
|||
}, |
|||
myEntrusts() { |
|||
let data = { |
|||
page: this.page, |
|||
side: this.side, |
|||
status: this.status, |
|||
}; |
|||
Otc.myEntrusts(data).then((res) => { |
|||
this.detail = res; |
|||
this.list = res.data; |
|||
}); |
|||
}, |
|||
// 下架 |
|||
ifCancelEntrust(item){ |
|||
this.$confirm(this.$t('otc.d1')+'？', this.$t('otc.d2'), { |
|||
confirmButtonText: this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.cancelEntrust(item) |
|||
}) |
|||
}, |
|||
cancelEntrust(item){ |
|||
let data = { |
|||
entrust_id:item.id |
|||
} |
|||
Otc.cancelEntrust(data).then(res=>{ |
|||
this.$message.success(this.$t('otc.d3')) |
|||
this.changePage(); |
|||
}) |
|||
}, |
|||
// 上架 |
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.user-head { |
|||
$size: 50px; |
|||
height: $size; |
|||
width: $size; |
|||
border: 3px solid white; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
color: white; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: linear-gradient(to right, #6d9ef9, #1f5df4); |
|||
} |
|||
::v-deep .el-dialog { |
|||
background-color: #222e3d; |
|||
color: #fff; |
|||
&__title { |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,177 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="content"> |
|||
<div class="form"> |
|||
<div class="form-group"> |
|||
<el-select v-model="form.side" :placeholder="$t('otc.a0')"> |
|||
<el-option :label="$t('otc.a1')" :value="1"></el-option> |
|||
<el-option :label="$t('otc.a2')" :value="2"></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="jaige">{{$t('otc.a3')}}</label> |
|||
<el-select v-model="form.virtual_coin" :placeholder="$t('otc.a4')"> |
|||
<el-option |
|||
v-for="item in coinList" |
|||
:key="item.label" |
|||
:value="item.value" |
|||
:label="item.label" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="shuliang">{{$t('otc.a5')}}</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
:placeholder="$t('otc.a6')" |
|||
id="shuliang" |
|||
v-model="form.amount" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="jaige">{{$t('otc.a7')}}</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
:placeholder="$t('otc.a8')" |
|||
id="jaige" |
|||
v-model="form.price" |
|||
/> |
|||
</div> |
|||
|
|||
<div class="form-row"> |
|||
<div class="form-group col-6"> |
|||
<label for="zuidi">{{$t('otc.a9')}}</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
:placeholder="$t('otc.a6')" |
|||
id="zuidi" |
|||
v-model="form.min_num" |
|||
/> |
|||
</div> |
|||
<div class="form-group col-6"> |
|||
<label for="zuidi">{{$t('otc.b0')}}</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
:placeholder="$t('otc.a6')" |
|||
id="zuidi" |
|||
v-model="form.max_num" |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group form-check-inline text-light"> |
|||
<div class="form-check" v-if="alipay"> |
|||
<input |
|||
class="form-check-input" |
|||
type="checkbox" |
|||
name="payType" |
|||
value="alipay" |
|||
v-model="form.pay_type" |
|||
id="zhifubao" |
|||
/> |
|||
<label class="form-check-label" for="zhifubao"> {{$t('otc.b1')}} </label> |
|||
</div> |
|||
<div class="form-check" v-if="wechat"> |
|||
<input |
|||
class="form-check-input" |
|||
type="checkbox" |
|||
name="payType" |
|||
value="wechat" |
|||
v-model="form.pay_type" |
|||
id="weixin" |
|||
/> |
|||
<label class="form-check-label" for="weixin"> {{$t('otc.b2')}} </label> |
|||
</div> |
|||
<div class="form-check" v-if="bank_card"> |
|||
<input |
|||
class="form-check-input" |
|||
type="checkbox" |
|||
name="payType" |
|||
value="bank_card" |
|||
v-model="form.pay_type" |
|||
id="yinhangka" |
|||
/> |
|||
<label class="form-check-label" for="yinhangka"> {{$t('otc.b3')}} </label> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="beizhu">{{$t('otc.b4')}}</label> |
|||
<input |
|||
type="text" |
|||
class="form-control" |
|||
:placeholder="$t('otc.b5')" |
|||
id="beizhu" |
|||
v-model="form.note" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="$emit('close')">{{$t('common.cancelBtn')}}</el-button> |
|||
<el-button type="primary" @click="storeEntrust">{{$t('common.confirmBtn')}}</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
export default { |
|||
name: "sendAd", |
|||
props: ["coinList"], |
|||
data() { |
|||
return { |
|||
form: { |
|||
virtual_coin: "", |
|||
side: 1, |
|||
price: "", |
|||
amount: "", |
|||
pay_type: [], |
|||
note: "", |
|||
min_num: "", |
|||
max_num: "", |
|||
}, |
|||
alipay: false, |
|||
bank_card: false, |
|||
wechat: false, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
storeEntrust() { |
|||
let data = { |
|||
...this.form, |
|||
}; |
|||
data.pay_type = JSON.stringify(data.pay_type); |
|||
Otc.storeEntrust(data).then((res) => { |
|||
this.$emit("success"); |
|||
this.$message.success(this.$t('otc.b6')); |
|||
this.form.price = ""; |
|||
this.form.amount = ""; |
|||
this.form.note = ""; |
|||
this.form.min_num = ""; |
|||
this.form.max_num = ""; |
|||
}); |
|||
}, |
|||
getList() { |
|||
Otc.userPayment().then((res) => { |
|||
this.alipay = !!res.alipay; |
|||
this.bank_card = !!res.bank_card; |
|||
this.wechat = !!res.wechat; |
|||
if (this.alipay) { |
|||
this.form.pay_type.push("alipay"); |
|||
} else if (this.wechat) { |
|||
this.form.pay_type.push("wechat"); |
|||
} else if (this.bank_card) { |
|||
this.form.pay_type.push("bank_card"); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,250 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-12 panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-panel"> |
|||
<h5 class="border-bottom pb-3 mb-2"> |
|||
{{ detail.cur_user_role == "seller" ? $t('otc.a2') : $t('otc.a1') }}{{$t('otc.d4')}} |
|||
</h5> |
|||
<div class="p-3"> |
|||
<div class="d-flex justify-content-between mb-2"> |
|||
<div>{{$t('otc.d5')}}：{{ detail.order_sn }}</div> |
|||
<div>{{$t('otc.c3')}}：{{ detail.status_text }}</div> |
|||
</div> |
|||
<div class="mb-2" v-if="seller_payments.pay_type == 'bank_card'"> |
|||
{{$t('otc.d6')}}：<span class="text-primary">{{ |
|||
seller_payments.pay_type_text |
|||
}}</span> |
|||
<div class="row my-2"> |
|||
<div class="col-md-4"> |
|||
{{$t('otc.d7')}}：{{ seller_payments.real_name }} |
|||
</div> |
|||
<div class="col-md-4">{{$t('otc.d8')}}：{{ seller_payments.card_no }}</div> |
|||
<div class="col-md-4"> |
|||
{{$t('otc.d9')}}：{{ seller_payments.bank_name }} |
|||
</div> |
|||
<div class="col-md-4"> |
|||
{{$t('otc.e0')}}：{{ seller_payments.open_bank }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="mb-2" v-if="seller_payments.pay_type == 'alipay'"> |
|||
{{$t('otc.d6')}}：<span class="text-primary">{{ |
|||
seller_payments.pay_type_text |
|||
}}</span> |
|||
<div class="row my-2"> |
|||
<div class="col-md-4"> |
|||
{{$t('otc.d7')}}：{{ seller_payments.real_name }} |
|||
</div> |
|||
<div class="col-md-4">{{$t('otc.d8')}}：{{ seller_payments.card_no }}</div> |
|||
</div> |
|||
<div class="paycode-box"> |
|||
<img :src="seller_payments.full_code_img" alt="" /> |
|||
</div> |
|||
</div> |
|||
<div class="mb-2" v-if="seller_payments.pay_type == 'wechat'"> |
|||
{{$t('otc.d6')}}：<span class="text-primary">{{ |
|||
seller_payments.pay_type_text |
|||
}}</span> |
|||
<div class="row my-2"> |
|||
<div class="col-md-4"> |
|||
{{$t('otc.d7')}}：{{ seller_payments.real_name }} |
|||
</div> |
|||
<div class="col-md-4">{{$t('otc.d8')}}：{{ seller_payments.card_no }}</div> |
|||
</div> |
|||
<div class="paycode-box"> |
|||
<img :src="seller_payments.full_code_img" alt="" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row mb-2"> |
|||
<div class="col-4">{{$t('otc.c5')}}：{{ detail.price }}</div> |
|||
<div class="col-4">{{$t('otc.a5')}}：{{ detail.amount }}</div> |
|||
<div class="col-4">{{$t('otc.c4')}}：{{ detail.money }}</div> |
|||
</div> |
|||
<div class="row mb-2"> |
|||
<div class="col-4"> |
|||
{{$t('otc.e1')}}：<span class="text-danger">{{ getTime(overed_time).m }}</span>{{$t('otc.e2')}}<span class="text-danger">{{ getTime(overed_time).s }}</span>{{$t('otc.e3')}} |
|||
</div> |
|||
</div> |
|||
<div class="row" v-if="false"> |
|||
<div class="col-12">{{$t('otc.b4')}}：{{ detail.note }}</div> |
|||
</div> |
|||
<div class="mb-2"> |
|||
<label>{{$t('otc.e4')}}：</label> |
|||
<div class="paycode-box" v-if="detail.paid_img"> |
|||
<img :src="detail.paid_img" alt="" /> |
|||
</div> |
|||
<upload-img :allowSize="5000" v-model="paid_img" class="mb-3" required :placeholder="$t('otc.e5')" v-else-if="detail.confirm_button == 'buyer'"> |
|||
<template #text> |
|||
<div class="text-primary">{{$t('otc.e6')}}</div> |
|||
</template> |
|||
</upload-img> |
|||
<div class="text-warning" v-else>{{$t('otc.e7')}}</div> |
|||
</div> |
|||
<div class="border-top pt-3 d-flex justify-content-end"> |
|||
<div class="" v-if="detail.confirm_button == 'buyer'"> |
|||
<button class="btn btn-danger" @click="ifCancelOrder"> |
|||
{{$t('otc.e8')}} |
|||
</button> |
|||
<button class="btn btn-primary" @click="ifConfirmPaidOrder"> |
|||
{{$t('otc.e9')}} |
|||
</button> |
|||
</div> |
|||
<div class="" v-if="detail.confirm_button == 'seller'"> |
|||
<button class="btn btn-danger" @click="ifNotConfirmOrder"> |
|||
{{$t('otc.f0')}} |
|||
</button> |
|||
<button class="btn btn-primary" @click="ifConfirmOrder"> |
|||
{{$t('otc.f1')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
export default { |
|||
name: "detail", |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
seller_payments: {}, |
|||
overed_time: 0, |
|||
dTime: undefined, |
|||
paid_img: "", |
|||
}; |
|||
}, |
|||
created() { |
|||
this.orderDetail(); |
|||
}, |
|||
computed: { |
|||
payTypeMap() { |
|||
return { |
|||
alipay: this.$t('otc.b1'), |
|||
wechat: this.$t('otc.b2'), |
|||
bank_card: this.$t('otc.b3'), |
|||
}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
getTime(s){ |
|||
return { |
|||
m:Math.floor(s/60), |
|||
s:s%60 |
|||
} |
|||
}, |
|||
orderDetail() { |
|||
let data = { |
|||
order_id: this.$route.query.id, |
|||
}; |
|||
Otc.orderDetail(data).then((res) => { |
|||
this.detail = res; |
|||
this.seller_payments = res.seller_payments; |
|||
this.overed_time = res.overed_time; |
|||
if (this.overed_time) { |
|||
this.lastTime(); |
|||
} |
|||
}); |
|||
}, |
|||
// 倒计时 |
|||
lastTime() { |
|||
this.dTime = setInterval(() => { |
|||
this.overed_time--; |
|||
if (!this.overed_time) { |
|||
clearInterval(this.dTime); |
|||
} |
|||
}, 1000); |
|||
}, |
|||
// 撤销订单 |
|||
ifCancelOrder() { |
|||
this.$confirm(this.$t('otc.f2')+"?", this.$t('otc.d2'), { |
|||
confirmButtonText:this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: "warning", |
|||
}).then(() => { |
|||
this.cancelOrder(); |
|||
}); |
|||
}, |
|||
cancelOrder() { |
|||
let data = { |
|||
order_id: this.$route.query.id, |
|||
}; |
|||
Otc.cancelOrder(data).then((res) => { |
|||
this.$router.back(); |
|||
this.$message.success(this.$t('otc.f5')); |
|||
}); |
|||
}, |
|||
// 确认付款 |
|||
ifConfirmPaidOrder() { |
|||
this.$confirm(this.$t('otc.f6')+"?", this.$t('otc.d2'), { |
|||
confirmButtonText: this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: "warning", |
|||
}).then(() => { |
|||
this.confirmPaidOrder(); |
|||
}); |
|||
}, |
|||
confirmPaidOrder() { |
|||
let data = { |
|||
order_id: this.$route.query.id, |
|||
paid_img: this.paid_img, |
|||
}; |
|||
Otc.confirmPaidOrder(data).then((res) => { |
|||
this.orderDetail(); |
|||
this.$message.success(this.$t('otc.f7')); |
|||
}); |
|||
}, |
|||
// 确认收款 |
|||
ifConfirmOrder() { |
|||
this.$confirm(this.$t('otc.f8'),this.$t('otc.d2'), { |
|||
confirmButtonText: this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: "warning", |
|||
}).then(() => { |
|||
this.confirmOrder(); |
|||
}); |
|||
}, |
|||
confirmOrder() { |
|||
let data = { |
|||
order_id: this.$route.query.id, |
|||
}; |
|||
Otc.confirmOrder(data).then((res) => { |
|||
this.orderDetail(); |
|||
this.$message.success(this.$t('otc.f7')); |
|||
}); |
|||
}, |
|||
// 未到账 |
|||
ifNotConfirmOrder() { |
|||
this.$confirm(this.$t('otc.f9'), this.$t('otc.d2'), { |
|||
confirmButtonText: this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
type: "warning", |
|||
}).then(() => { |
|||
this.notConfirmOrder(); |
|||
}); |
|||
}, |
|||
notConfirmOrder() { |
|||
let data = { |
|||
order_id: this.$route.query.id, |
|||
}; |
|||
Otc.notConfirmOrder(data).then((res) => { |
|||
this.orderDetail(); |
|||
this.$message.success(this.$t('otc.f7')); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.paycode-box { |
|||
width: 250px; |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,347 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<!-- <secondary-nav></secondary-nav> --> |
|||
<div class="container my-4"> |
|||
<div class="row"> |
|||
<div class="col-12 my-2"> |
|||
<div class="d-flex justify-content-between"> |
|||
<div class="d-flex align-items-center"> |
|||
<div class="btn-group"> |
|||
<button |
|||
class="btn" |
|||
:class="side == 0 ? 'btn-info' : 'btn-light'" |
|||
@click="changeSide(0)" |
|||
> |
|||
{{$t('otc.j9')}} |
|||
</button> |
|||
<button |
|||
class="btn" |
|||
:class="side == 1 ? 'btn-info' : 'btn-light'" |
|||
@click="changeSide(1)" |
|||
> |
|||
{{$t('otc.k0')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-6 p-3 bg-panel mt-3"> |
|||
<div class="fn-20 fn-bold orange pb-1">USDT</div> |
|||
<div class="col-12 mt-3 p-0 fn-16"> |
|||
<div class="form col-12 pl-0 mt-3"> |
|||
<div class="form-group col-12 px-0"> |
|||
<label v-if="side==0&&!showPrice">{{$t('otc.k1')}}</label> |
|||
<label v-if="side==0&&showPrice">{{$t('otc.k2')}}</label> |
|||
<label v-if="side==1&&!showPrice">{{$t('otc.k3')}}</label> |
|||
<label v-if="side==1&&showPrice">{{$t('otc.k4')}}</label> |
|||
<div class="input-group col-12 px-0"> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="money" |
|||
:placeholder="!showPrice?$t('otc.k5'):$t('otc.k6')" |
|||
v-if="side==0" |
|||
/> |
|||
<input |
|||
v-else |
|||
class="form-control" |
|||
type="text" |
|||
v-model="money" |
|||
:placeholder="!showPrice?$t('otc.k7'):$t('otc.k8')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<span class="input-group-text fn-12" v-if="!showPrice">CNY</span> |
|||
<span class="input-group-text fn-12" v-else>USDT</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-12 pl-0 d-flex justify-content-between"> |
|||
<p>{{$t('otc.c5')}}：{{price_cny}} CNY/USDT</p> |
|||
<div |
|||
class="d-flex justify-content-center align-items-center" |
|||
@click="showPrice=!showPrice" |
|||
> |
|||
<i class="ion ion-ios-swap fn-20"></i> |
|||
<span class="ml-1" v-if="!showPrice">{{$t('otc.k9')}}</span> |
|||
<span class="ml-1" v-else>{{$t('otc.k99')}}</span> |
|||
</div> |
|||
</div> |
|||
<button class="btn btn-primary rounded-pill mt-3" @click.prevent="submit"> |
|||
<span v-if="side==0">{{$t('otc.j9')}}</span> |
|||
<span v-else>{{$t('otc.k0')}}</span> |
|||
</button> |
|||
</div> |
|||
<div class="col-md-6 mt-3"> |
|||
<div class="panel-box bg-panel h-100"> |
|||
<div class="heading d-flex justify-content-between align-items-center"> |
|||
<div class="h6">{{$t('otc.l0')}}</div> |
|||
</div> |
|||
<div class="tab-content pl-3 pr-3"> |
|||
<ul> |
|||
<!-- <li class="mb-2">1.{{$t('otc.l1')}}100 USDT。</li> --> |
|||
<!-- <li class="mb-2">2.。</li> --> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="modal fade" |
|||
id="editAddress" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="exampleModalLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content bg-panel"> |
|||
<div class="modal-header"> |
|||
<h5 v-if="side==0" class="modal-title" id="exampleModalLabel"> |
|||
{{$t('otc.l2')}} |
|||
</h5> |
|||
<h5 v-else class="modal-title" id="exampleModalLabel"> |
|||
{{$t('otc.l3')}} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div class="d-flex justify-content-between"> |
|||
<p>{{$t('otc.a5')}}（USDT）</p> |
|||
<p>≈{{showPrice?money:money/price_cny | omitTo(6)}}CNY</p> |
|||
</div> |
|||
<div class="d-flex justify-content-between"> |
|||
<p>{{$t('otc.c5')}}（CNY/USDT）</p> |
|||
<p>≈{{price_cny}}</p> |
|||
</div> |
|||
<div class="d-flex justify-content-between"> |
|||
<p>{{$t('otc.c4')}}（CNY）</p> |
|||
<p>≈{{showPrice?money*price_cny:money | omitTo(2)}}</p> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary rounded-pill" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("common.cancelBtn") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary rounded-pill" |
|||
@click="sure" |
|||
> |
|||
{{ $t("common.confirmBtn") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="modal fade" |
|||
id="editAuth" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="exampleModalLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content bg-panel"> |
|||
<div class="modal-header"> |
|||
<h5 v-if="side==0" class="modal-title" id="exampleModalLabel"> |
|||
{{$t('otc.l2')}} |
|||
</h5> |
|||
<h5 v-else class="modal-title" id="exampleModalLabel"> |
|||
{{$t('otc.l3')}} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div class="d-flex justify-content-between"> |
|||
<p>{{$t('otc.a5')}}（USDT）</p> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary rounded-pill" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("common.cancelBtn") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary rounded-pill" |
|||
@click="goAuth" |
|||
> |
|||
{{ $t("common.confirmBtn") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
import Profile from "@/api/profile"; |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
side: 0, |
|||
money:"", |
|||
showPrice:false, |
|||
price_cny:'', |
|||
usdt_balance:'', |
|||
detail: {}, |
|||
}; |
|||
}, |
|||
components: { |
|||
}, |
|||
computed: { |
|||
}, |
|||
created() { |
|||
this.getCurrencyExCny() |
|||
this.fundAccount() |
|||
this.getAuthInfo() |
|||
}, |
|||
methods: { |
|||
changeSide(idx) { |
|||
this.side = idx; |
|||
this.money='' |
|||
}, |
|||
// 获取实名信息 |
|||
getAuthInfo() { |
|||
Profile.getAuthInfo() |
|||
.then(res => { |
|||
this.detail = res; |
|||
}) |
|||
.catch(res => {}); |
|||
}, |
|||
goAuth(){ |
|||
|
|||
}, |
|||
//获取u余额 |
|||
fundAccount() { |
|||
Wallet.fundAccount().then((res) => { |
|||
this.usdt_balance = res.list[0].usable_balance; |
|||
}); |
|||
}, |
|||
// 获取汇率 |
|||
getCurrencyExCny() { |
|||
let data={ |
|||
coin_name:'USDT', |
|||
type:this.side==0?'buy':'sell' |
|||
} |
|||
Otc.legalPrice(data).then(res=>{ |
|||
this.price_cny = res.price |
|||
}).catch((err) => { |
|||
setTimeout(() => { |
|||
this.$router.push(`/profile/certification`); |
|||
}, 2000); |
|||
}); |
|||
}, |
|||
submit(){ |
|||
if(!this.money&&!this.showPrice&&this.side==0){ |
|||
this.$message.error(this.$t('otc.k5')); |
|||
return |
|||
} |
|||
if(!this.money&&this.showPrice&&this.side==0){ |
|||
this.$message.error(this.$t('otc.k6')); |
|||
return |
|||
} |
|||
if(!this.money&&!this.showPrice&&this.side==1){ |
|||
this.$message.error(this.$t('otc.k7')); |
|||
return |
|||
} |
|||
if(!this.money&&this.showPrice&&this.side==1){ |
|||
this.$message.error(this.$t('otc.k8')); |
|||
return |
|||
} |
|||
var money=!this.showPrice?this.money/this.price_cny:this.money |
|||
if(this.usdt_balance<money&&this.side==1){ |
|||
this.$message.error(this.$t('otc.l4')) |
|||
return |
|||
} |
|||
if(this.detail.status!=2){ |
|||
$("#editAuth").modal("show"); |
|||
return |
|||
} |
|||
$("#editAddress").modal("show"); |
|||
}, |
|||
sure(){ |
|||
let data={ |
|||
currency:'USDT', |
|||
type:this.side==0?'buy':'sell', |
|||
amount:this.money, |
|||
number:this.money, |
|||
unitPrice:this.price_cny, |
|||
pay_type:this.showPrice?0:1 |
|||
} |
|||
Otc.legalBuy(data).then(res=>{ |
|||
$("#editAddress").modal("hide"); |
|||
window.open(res) |
|||
}).catch((err) => { |
|||
|
|||
}); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.user-head { |
|||
$size: 50px; |
|||
height: $size; |
|||
width: $size; |
|||
border: 3px solid white; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
color: white; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: linear-gradient(to right, #6d9ef9, #1f5df4); |
|||
} |
|||
::v-deep .el-dialog { |
|||
background-color: #222e3d; |
|||
color: #fff; |
|||
&__title { |
|||
color: #fff; |
|||
} |
|||
} |
|||
.orange{ |
|||
border-bottom: 1px solid #dbab40; |
|||
color: #dbab40; |
|||
width: fit-content; |
|||
} |
|||
.h-100{ |
|||
height: 100%; |
|||
} |
|||
.el-radio{ |
|||
color: white; |
|||
} |
|||
</style> |
|||
@ -1,182 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container my-4"> |
|||
<ul class="nav nav-pills markets-pair-list"> |
|||
<li class="nav-item"> |
|||
<a |
|||
href="javascript:void(0)" |
|||
class="nav-link" |
|||
:class="{ active: type == 1 }" |
|||
@click="changeType(1)" |
|||
>{{$t('otc.g7')}}</a |
|||
> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a |
|||
href="javascript:void(0)" |
|||
class="nav-link" |
|||
:class="{ active: type == 2 }" |
|||
@click="changeType(2)" |
|||
>{{$t('otc.g8')}}</a |
|||
> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a |
|||
href="javascript:void(0)" |
|||
class="nav-link" |
|||
:class="{ active: type == 3 }" |
|||
@click="changeType(3)" |
|||
>{{$t('otc.g9')}}</a |
|||
> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a |
|||
href="javascript:void(0)" |
|||
class="nav-link" |
|||
:class="{ active: type == 4 }" |
|||
@click="changeType(4)" |
|||
>{{$t('otc.h0')}}</a |
|||
> |
|||
</li> |
|||
<li class="flex-fill d-flex justify-content-end"> |
|||
<el-select :value="status" @input="changeStatus" style="width: 150px"> |
|||
<el-option :value="99" :label="$t('otc.h1')"></el-option> |
|||
<el-option :value="0" :label="$t('otc.h2')"></el-option> |
|||
<el-option :value="1" :label="$t('otc.h3')"></el-option> |
|||
<el-option :value="2" :label="$t('otc.h4')"></el-option> |
|||
<el-option :value="3" :label="$t('otc.c1')"></el-option> |
|||
<el-option :value="4" :label="$t('otc.h5')"></el-option> |
|||
</el-select> |
|||
</li> |
|||
</ul> |
|||
<div class="row"> |
|||
<div class="col-12 coin-list"> |
|||
<table class="w-100"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('otc.d5')}}</th> |
|||
<th>{{$t('otc.c3')}}</th> |
|||
<th>{{$t('otc.c4')}}</th> |
|||
<th>{{$t('otc.c5')}}</th> |
|||
<th>{{$t('otc.h6')}}</th> |
|||
<th>{{$t('otc.h7')}}</th> |
|||
<th>{{$t('otc.h8')}}</th> |
|||
<th>{{$t('otc.c9')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{$t('otc.d5')}}：{{ item.order_sn }}</td> |
|||
<td class="text-light">{{ item.status_text }}</td> |
|||
<td class="text-light">{{ item.money }}</td> |
|||
<td class="text-light">{{ item.price }} CNY</td> |
|||
<td>{{ item.amount }}</td> |
|||
<td>{{ item.seller_payments.pay_type_text }}</td> |
|||
<td>{{ item.created_at }}</td> |
|||
<td> |
|||
<button |
|||
class="btn btn-sm btn-primary" |
|||
@click=" |
|||
$router.push({ |
|||
path: '/otc/detail', |
|||
query: { id: item.id }, |
|||
}) |
|||
" |
|||
> |
|||
{{$t('otc.h9')}} |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="8"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="d-flex justify-content-center mt-3"> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="detail.per_page" |
|||
@current-change="changePage" |
|||
:total="detail.total" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
page: 1, |
|||
status: 99, |
|||
list: [], |
|||
type: 1, |
|||
}; |
|||
}, |
|||
computed: { |
|||
trans_type() { |
|||
return this.$route.params.type == "buy" ? 1 : 2; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.changePage(1); |
|||
}, |
|||
methods: { |
|||
changeType(type) { |
|||
this.type = type; |
|||
this.changePage(1); |
|||
}, |
|||
changeStatus(status) { |
|||
this.status = status; |
|||
this.changePage(1); |
|||
}, |
|||
changePage(idx) { |
|||
this.page = idx; |
|||
this.myOrders(); |
|||
}, |
|||
myOrders() { |
|||
let data = { |
|||
page: this.page, |
|||
type: this.type, |
|||
status: this.status, |
|||
}; |
|||
Otc.myOrders(data).then((res) => { |
|||
this.detail = res; |
|||
this.list = res.data; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.user-head { |
|||
$size: 50px; |
|||
height: $size; |
|||
width: $size; |
|||
border: 3px solid white; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
color: white; |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: linear-gradient(to right, #6d9ef9, #1f5df4); |
|||
} |
|||
::v-deep .el-dialog { |
|||
background-color: #222e3d; |
|||
color: #fff; |
|||
&__title { |
|||
color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,214 +0,0 @@ |
|||
<template > |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="row mt-4"> |
|||
<div class="col-12 bg-panel rounded p-3"> |
|||
<h5 class="border-bottom pb-3">{{$t('otc.b1')}}</h5> |
|||
<div class="py-3 border-bottom row"> |
|||
<div class="form col-md-6"> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.d8')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="alipay.card_no" |
|||
:placeholder="$t('otc.i0')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.d7')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="alipay.real_name" |
|||
:placeholder="$t('otc.i1')" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.i2')}}</label> |
|||
<upload-img |
|||
:allowSize="5000" |
|||
v-model="alipay.code_img" |
|||
class="mb-3" |
|||
required |
|||
:placeholder="$t('otc.e5')" |
|||
> |
|||
</upload-img> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-content-end pt-3"> |
|||
<div> |
|||
<button class="btn btn-sm btn-primary" @click="add(alipay)"> |
|||
{{$t('otc.i3')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row mt-4"> |
|||
<div class="col-12 bg-panel rounded p-3"> |
|||
<h5 class="border-bottom pb-3">{{$t('otc.b2')}}</h5> |
|||
<div class="py-3 border-bottom row"> |
|||
<div class="form col-md-6"> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.d8')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="wechat.card_no" |
|||
:placeholder="$t('otc.i0')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.d7')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="wechat.real_name" |
|||
:placeholder="$t('otc.i1')" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.i2')}}</label> |
|||
<upload-img |
|||
:allowSize="5000" |
|||
v-model="wechat.code_img" |
|||
class="mb-3" |
|||
required |
|||
:placeholder="$t('otc.e5')" |
|||
> |
|||
</upload-img> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-content-end pt-3"> |
|||
<div> |
|||
<button class="btn btn-sm btn-primary" @click="add(wechat)"> |
|||
{{$t('otc.i3')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row mt-4"> |
|||
<div class="col-12 bg-panel rounded p-3"> |
|||
<h5 class="border-bottom pb-3">{{$t('otc.b3')}}</h5> |
|||
<div class="py-3 border-bottom row"> |
|||
<div class="form col-md-6"> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.i4')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="bank_card.bank_name" |
|||
:placeholder="$t('otc.i5')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.e0')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="bank_card.open_bank" |
|||
:placeholder="$t('otc.i6')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.i7')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
v-model="bank_card.card_no" |
|||
:placeholder="$t('otc.i8')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="">{{$t('otc.d7')}}</label> |
|||
<input |
|||
class="form-control" |
|||
type="text" |
|||
:placeholder="$t('otc.i1')" |
|||
v-model="bank_card.real_name" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="d-flex justify-content-end pt-3"> |
|||
<div> |
|||
<button class="btn btn-sm btn-primary" @click="add(bank_card)"> |
|||
{{$t('otc.i3')}} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
export default { |
|||
name: "pays", |
|||
data() { |
|||
return { |
|||
alipay: { |
|||
pay_type: "alipay", |
|||
real_name: "", |
|||
card_no: "", |
|||
code_img: "", |
|||
}, |
|||
bank_card: { |
|||
pay_type: "bank_card", |
|||
real_name: "", |
|||
card_no: "", |
|||
bank_name: "", |
|||
open_bank: "", |
|||
}, |
|||
wechat: { |
|||
pay_type: "wechat", |
|||
real_name: "", |
|||
card_no: "", |
|||
code_img: "", |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
getList() { |
|||
Otc.userPayment().then((res) => { |
|||
this.alipay = res.alipay || this.alipay; |
|||
this.bank_card = res.bank_card || this.bank_card; |
|||
this.wechat = res.wechat || this.wechat; |
|||
}); |
|||
}, |
|||
add(obj) { |
|||
let data = { |
|||
...obj, |
|||
}; |
|||
for (let i in data) { |
|||
if (data[i] == null) delete data[i]; |
|||
} |
|||
if (data.id) { |
|||
data._method = "put"; |
|||
Otc.editUserPayment(data).then(() => { |
|||
this.$message.success(this.$t('otc.i9')); |
|||
this.getList(); |
|||
}); |
|||
} else { |
|||
Otc.addUserPayment(data).then((res) => { |
|||
this.$message.success(this.$t('otc.j0')); |
|||
this.getList(); |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -1,426 +0,0 @@ |
|||
<template> |
|||
<div class="profile-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('profile.realName')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12 mt-4"> |
|||
<el-steps :active="setp+1" align-center> |
|||
<el-step :title="$t('profile.primaryCertification')"></el-step> |
|||
<el-step :title="$t('profile.advancedCertification1')"></el-step> |
|||
<el-step :title="$t('profile.toExamine')"></el-step> |
|||
</el-steps> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-9 mx-auto mt-4 panel-box shadow-sm bg-panel" id="auth"> |
|||
<!-- 第一步 --> |
|||
<div class="tab-content" v-if="setp==0"> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('profile.fullName')}}（{{$t('profile.legal')}}）*</label> |
|||
<input |
|||
type="text" |
|||
required |
|||
v-model="form.realname" |
|||
class="form-control" |
|||
:placeholder="$t('profile.pleaseEnterName')" |
|||
/> |
|||
</div> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('profile.dateOfBirth')}}（YYYY-MM-DD）*</label> |
|||
<el-date-picker |
|||
required |
|||
v-model="form.birthday" |
|||
type="date" |
|||
:placeholder="$t('profile.selectDate')" |
|||
:picker-options="pickerOptions" |
|||
></el-date-picker> |
|||
</div> |
|||
</div> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-3"> |
|||
<label>{{$t('profile.documentType')}}*</label> |
|||
<el-select v-model="form.type" :placeholder="$t('profile.pelaseSelect')"> |
|||
<el-option |
|||
v-for="item in cardType" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
></el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="form-group col-md-9"> |
|||
<label>{{$t('profile.certificateNumber')}}*</label> |
|||
<input |
|||
type="text" |
|||
required |
|||
v-model="form.id_card" |
|||
class="form-control" |
|||
:placeholder="$t('profile.endterIDNumber')" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="label my-2 blue">{{$t('profile.addressInfo')}}</div> |
|||
<div class="form-group"> |
|||
<label>{{$t('profile.residentialAddress')}}*</label> |
|||
<input |
|||
type="text" |
|||
required |
|||
v-model="form.address" |
|||
class="form-control" |
|||
:placeholder="$t('profile.residentialAddress1')" |
|||
/> |
|||
</div> |
|||
<div class="form-row"> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('profile.ciy')}}*</label> |
|||
<input |
|||
type="text" |
|||
required |
|||
v-model="form.city" |
|||
class="form-control" |
|||
:placeholder="$t('profile.incity')" |
|||
/> |
|||
</div> |
|||
<div class="form-group col-md-6"> |
|||
<label>{{$t('profile.postalCode')}}*</label> |
|||
<input |
|||
type="text" |
|||
required |
|||
v-model="form.postal_code" |
|||
class="form-control" |
|||
:placeholder="$t('profile.thePostcode')" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="form-group"> |
|||
<label>{{$t('profile.additionalInformation')}}（{{$t('profile.optional')}}）</label> |
|||
<input type="text" v-model="form.extra" class="form-control" placeholder /> |
|||
</div> --> |
|||
<div class="label my-2 blue">{{$t('profile.contactInformation')}}</div> |
|||
<div class="form-row"> |
|||
<!-- <div class="form-group col-md-12"> --> |
|||
<!-- <label>{{$t('profile.phoneNumber')}}*</label> --> |
|||
<!-- <div class="input-group mb-3"> --> |
|||
<div class="form-group col-md-3"> |
|||
<label>{{$t('profile.SelectAreaCode')}}*</label> |
|||
<el-select v-model="form.country_id" filterable placeholder="请选择" > |
|||
<el-option |
|||
v-for="item in countryList" |
|||
:key="item.id" |
|||
:label="'+'+item.country_code +'('+item.name+')'" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<!-- <el-dropdown tragger="click" class="input-group-prepend"> |
|||
<button |
|||
class="btn btn-outline-secondary dropdown-toggle" |
|||
type="button" |
|||
>+{{country.country_code}}</button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
icon="el-icon-plus" |
|||
v-for="item in countryList" |
|||
:key="item.id" |
|||
@click.native="form.country_id=item.id" |
|||
>{{item.country_code}}（{{item.name}}）</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> --> |
|||
<div class="form-group col-md-9"> |
|||
<label>{{$t('profile.phoneNumber')}}*</label> |
|||
<input |
|||
type="text" |
|||
required |
|||
v-model="form.phone" |
|||
class="form-control" |
|||
:placeholder="$t('profile.enterPhoneNumber')" |
|||
/> |
|||
</div> |
|||
<!-- </div> |
|||
</div> --> |
|||
</div> |
|||
<div class="text-center"> |
|||
<button |
|||
type="button" |
|||
class="btn w-25 btn-primary rounded-pill" |
|||
@click="primaryAuth" |
|||
>{{$t('profile.nextStep')}}</button> |
|||
</div> |
|||
</div> |
|||
<!-- 第二步 --> |
|||
<div class="tab-content" v-if="setp==1"> |
|||
<p>{{$t('profile.clickUpload1')}}</p> |
|||
<p> |
|||
{{$t('profile.pelaseDownload')}} |
|||
<span |
|||
class="red" |
|||
v-if="detail.type==3" |
|||
>{{$t('profile.passport')}}</span> |
|||
<span class="red" v-if="detail.type==2">{{$t('profile.drivingLicense')}}</span> |
|||
<span class="red" v-if="detail.type==1">{{$t('profile.iD')}}</span> |
|||
{{$t('profile.upload')}}： |
|||
</p> |
|||
|
|||
<p>{{$t('profile.explain')}}：</p> |
|||
<ul class="mb-2"> |
|||
<li class="mb-2">1. {{$t('profile.unexpired')}}</li> |
|||
<li class="mb-2">2.{{$t('profile.pleaseConfirm')}}</li> |
|||
<li class="mb-2">3. {{$t('profile.fileFormat')}}：pdf./ gif./ jpeg./jpg./png.</li> |
|||
<li class="mb-2">4. {{$t('profile.maximumFileSize')}}：5 MB</li> |
|||
</ul> |
|||
<upload-img |
|||
class="mb-3" |
|||
v-model="topForm.front_img" |
|||
required |
|||
:placeholder="$t('profile.uploadPhoto')" |
|||
> |
|||
<template #text> |
|||
<div class="el-upload__text"> |
|||
{{$t('profile.positive')}}-{{$t('profile.dragHere')}} |
|||
<em>{{$t('profile.clickUpload')}}</em> |
|||
</div> |
|||
</template> |
|||
</upload-img> |
|||
<upload-img |
|||
class="mb-3" |
|||
v-model="topForm.back_img" |
|||
required |
|||
:placeholder="$t('profile.reversePhoto')" |
|||
> |
|||
<template #text> |
|||
<div class="el-upload__text"> |
|||
{{$t('profile.theOtherSide')}}-{{$t('profile.dragHere')}} |
|||
<em>{{$t('profile.clickUpload')}}</em> |
|||
</div> |
|||
</template> |
|||
</upload-img> |
|||
<!-- <upload-img |
|||
class="mb-3" |
|||
v-model="topForm.front_img" |
|||
required |
|||
:placeholder="$t('profile.uploadIDCard')" |
|||
> |
|||
<template #text> |
|||
<div class="el-upload__text"> |
|||
{{$t('profile.hold')}}-{{$t('profile.dragHere')}} |
|||
<em>{{$t('profile.clickUpload')}}</em> |
|||
</div> |
|||
</template> |
|||
</upload-img> --> |
|||
<div class="text-center mt-3"> |
|||
<button type="button" class="btn w-25 btn-primary rounded-pill" @click="topAuth">{{$t('profile.nextStep')}}</button> |
|||
</div> |
|||
</div> |
|||
<!-- 第三步 --> |
|||
<div class="tab-ceontent p-5 text-center" v-if="setp==2"> |
|||
<!-- 待审核 --> |
|||
<div v-if="detail.status==1"> |
|||
<p class="mt-3 mb-4">{{$t('profile.inSubmit')}}</p> |
|||
<i class="el-icon-s-order my-4 text-warning" style="font-size:70px"></i> |
|||
<div class="text-center"> |
|||
<button |
|||
type="button" |
|||
class="btn w-25 btn-primary rounded-pill" |
|||
@click="$router.go(-1)" |
|||
>{{$t('profile.gotIt')}}</button> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="detail.status==2"> |
|||
<p class="mt-3 mb-4" style="font-size:18px">{{$t('profile.congratulations')}}，{{detail.status_text_lang}}！</p> |
|||
<i class="el-icon-circle-check my-4 increace" style="font-size:60px"></i> |
|||
<div class="text-center"> |
|||
<button |
|||
type="button" |
|||
class="btn w-25 btn-primary rounded-pill" |
|||
@click="$router.go(-1)" |
|||
>{{$t('profile.back')}}</button> |
|||
</div> |
|||
</div> |
|||
<div v-else-if="detail.status==3"> |
|||
<p class="mt-3 mb-4">{{detail.status_text_lang}}！{{$t('profile.resetApply')}}</p> |
|||
<i class="el-icon-s-release my-4 decreace" style="font-size:60px"></i> |
|||
<div class="text-center"> |
|||
<button |
|||
type="button" |
|||
class="btn w-25 btn-outline-danger" |
|||
@click="setp=1" |
|||
>{{$t('profile.recertification')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Profile from "@/api/profile"; |
|||
import Member from "@/api/member"; |
|||
import server from "@/api/server"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
setp: 0, |
|||
detail: {}, |
|||
imgURL: server.defaults.baseURL, |
|||
countryList: [], |
|||
|
|||
form: { |
|||
country_code: "", |
|||
country_id: "", |
|||
realname: "", |
|||
id_card: "", |
|||
type: 2, |
|||
birthday: "", |
|||
address: "", |
|||
city: "", |
|||
postal_code: "", |
|||
phone: "", |
|||
extra: "" |
|||
}, |
|||
// 高级认证 |
|||
topForm: { |
|||
front_img: "", |
|||
back_img: "", |
|||
hand_img: "" |
|||
}, |
|||
pickerOptions:{ |
|||
disabledDate(time) { |
|||
return time.getTime() > Date.now(); |
|||
}, |
|||
} |
|||
}; |
|||
}, |
|||
computed: { |
|||
country() { |
|||
return ( |
|||
this.countryList.find(item => item.id == this.form.country_id) || {} |
|||
); |
|||
}, |
|||
cardType() { |
|||
return [ |
|||
{ |
|||
label: this.$t("profile.iD"), |
|||
value: 1, |
|||
}, |
|||
{ |
|||
label: this.$t("profile.driverLicense"), |
|||
value: 2, |
|||
}, |
|||
{ |
|||
label: this.$t("profile.passport"), |
|||
value: 3, |
|||
}, |
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取实名信息 |
|||
getAuthInfo() { |
|||
Profile.getAuthInfo() |
|||
.then(res => { |
|||
this.detail = res; |
|||
// 展示页面 |
|||
if (res.primary_status == 0) { |
|||
this.setp = 0; |
|||
return; |
|||
} else if (res.status == 0) { |
|||
this.setp = 1; |
|||
} else { |
|||
this.setp = 2; |
|||
} |
|||
}) |
|||
.catch(res => {}); |
|||
}, |
|||
// 获取区号列表 |
|||
getCountryCode() { |
|||
Member.getCountryCode().then(res => { |
|||
this.countryList = res; |
|||
for(let i=0; i<this.countryList.length;i++){ |
|||
let item=this.countryList[i]; |
|||
if(item.id==195){ |
|||
this.form.country_id = item.id; |
|||
break; |
|||
} |
|||
} |
|||
|
|||
}).catch(res => {}); |
|||
}, |
|||
// 初级认证 |
|||
primaryAuth() { |
|||
let data = this.form; |
|||
data.country_code = this.country.country_code; |
|||
if (utils.validate("#auth")) { |
|||
if(!data.birthday){ |
|||
this.$message.error(this.$t("profile.dateofbirth")); |
|||
return; |
|||
} |
|||
Profile.primaryAuth(data) |
|||
.then(res => { |
|||
this.$message.success(this.$t("profile.preliminary")); |
|||
// this.setp++; |
|||
this.$router.push("/wallet/assets/exchange") |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
}, |
|||
// 高级认证 |
|||
topAuth() { |
|||
let data = this.topForm; |
|||
if (utils.validate("#auth")) { |
|||
// if (!data.hand_img) { |
|||
// // this.$message.error(this.$t("profile.uploadIDCard")); |
|||
// this.$message.error(this.$t("profile.uploadPhoto")); |
|||
// return; |
|||
// } |
|||
if (!data.back_img) { |
|||
this.$message.error(this.$t("profile.reversePhoto")); |
|||
return; |
|||
} |
|||
if (!data.front_img) { |
|||
this.$message.error(this.$t("profile.uploadPhoto")); |
|||
return; |
|||
} |
|||
Profile.topAuth(data) |
|||
.then(res => { |
|||
this.$message.success(this.$t("profile.advancedCertification2")); |
|||
this.getAuthInfo(); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getCountryCode(); |
|||
this.getAuthInfo(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.upload-demo { |
|||
::v-deep .el-upload-dragger { |
|||
width: 300px; |
|||
height: 150px; |
|||
} |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
::v-deep{ |
|||
.el-step__title.is-process{ |
|||
color: white; |
|||
} |
|||
.el-upload-dragger{ |
|||
background-color: #1e2834; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,155 +0,0 @@ |
|||
<template> |
|||
<div class="profile-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('profile.userInfo')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-5 d-flex align-items-stretch mb-4"> |
|||
<!-- 账户信息 --> |
|||
<div class="panel-box bg-panel shadow-sm w-100"> |
|||
<div class="heading d-flex justify-content-between align-items-center"> |
|||
<div class="h6">{{$t('profile.userInfo')}}</div> |
|||
<div class="status fn-14 text-tips">{{detail.user_auth_level_text }}</div> |
|||
</div> |
|||
<div class="tab-content"> |
|||
<div class="mobile fn-30 font-weight-bolder"> |
|||
{{detail.account }} |
|||
<!-- | userFilter --> |
|||
</div> |
|||
<div class="label my-2">{{$t('profile.verState')}}：</div> |
|||
<div class="d-flex align-items-center"> |
|||
<div class="icon mr-2"> |
|||
<img src="../../assets/img/icon/top2.png" alt v-if="detail.user_auth_level==2"/> |
|||
<img src="../../assets/img/icon/top1.png" alt v-else/> |
|||
</div> |
|||
<div> |
|||
<!-- {{$t('profile.max')}} |
|||
<span class="font-weight-bold">1k</span> |
|||
<span class="font-weight-bold ">USD</span> |
|||
<span class="font-weight-bold">24</span> |
|||
{{$t('profile.limitH')}} |
|||
{{$t('profile.tips')}} --> |
|||
{{detail.user_auth_level==2?$t('profile.tips2'):$t('profile.tips1')}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-7 d-flex align-items-stretch mb-4"> |
|||
<!-- 实名认证 --> |
|||
<div class="panel-box bg-panel shadow-sm w-100"> |
|||
<div class="heading d-flex justify-content-between align-items-center"> |
|||
<div class="h6">{{$t('profile.verLeave')}}</div> |
|||
</div> |
|||
<div class="tab-content"> |
|||
<div class="step-group d-flex justify-content-center text-center"> |
|||
<div class="step"> |
|||
<div class="icon"> |
|||
<img src="../../assets/img/icon/top1.png" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('profile.max')}} 20K USDT</div> |
|||
</div> |
|||
<div class="next-icon mt-4"> |
|||
<img src="../../assets/img/icon/stepnext.png" alt /> |
|||
</div> |
|||
<div class="step"> |
|||
<div class="icon"> |
|||
<img src="../../assets/img/icon/top2.png" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('profile.max')}} 500K USDT</div> |
|||
<div class="btn"> |
|||
<span v-if="detail.user_auth_level==2" class="btn btn-sm btn-primary rounded-pill">{{$t('profile.clickToVerify1')}}</span> |
|||
<button type="button" v-else @click="$router.push('/profile/certification')" class="btn btn-sm btn-primary rounded-pill">{{$t('profile.clickToVerify')}}</button> |
|||
</div> |
|||
</div> |
|||
<div class="next-icon mt-4"> |
|||
<img src="../../assets/img/icon/stepnext.png" alt /> |
|||
</div> |
|||
<div class="step"> |
|||
<div class="icon"> |
|||
<img src="../../assets/img/icon/top3.png" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('profile.exceed')}} 500K USDT</div> |
|||
<div class="btn"> |
|||
<router-link |
|||
to="/contact-us" |
|||
tag="button" |
|||
type="button" |
|||
class="btn btn-sm btn-primary rounded-pill" |
|||
@click="$router.push('/contact-us')" |
|||
>{{$t('profile.contactUs')}}</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<!-- <div class="col-md-4 d-flex"> |
|||
邀请好友 |
|||
<div class="panel-box bg-panel shadow-sm w-100"> |
|||
<div class="heading d-flex justify-content-between">{{$t('profile.inviteFriends')}}</div> |
|||
<div class="tab-content"> |
|||
<div class="min-height-50">{{$t('profile.dividends',{name:'AMATAK',num:'30%'})}}</div> |
|||
<button type="button" class="bottom-left-btn btn btn-sm btn-primary rounded-pill" @click="$router.push('/profile/invite')">{{$t('profile.sendInvitation')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<div class="col-md-4 d-flex"> |
|||
<!-- 重置密码 --> |
|||
<div class="panel-box bg-panel shadow-sm w-100"> |
|||
<div class="heading d-flex justify-content-between">{{$t('profile.resetPassword')}}</div> |
|||
<div class="tab-content"> |
|||
<div class="min-height-50">{{$t('profile.forLoginAccount')}}。</div> |
|||
<button type="button" class="bottom-left-btn btn btn-sm btn-primary rounded-pill" @click="$router.push('/setting')">{{$t('profile.clickReset')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="col-md-4 d-flex"> |
|||
访问记录 |
|||
<div class="panel-box bg-panel shadow-sm w-100"> |
|||
<div class="heading d-flex justify-content-between">{{$t('profile.registrationDecord')}}</div> |
|||
<div class="tab-content"> |
|||
<div class="min-height-50">{{$t('profile.recording')}}。</div> |
|||
<button type="button" class="bottom-left-btn btn btn-sm btn-primary rounded-pill" @click="$router.push('/profile/login-history')">{{$t('profile.recordingDEtail')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Profile from "@/api/profile"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {} |
|||
}; |
|||
}, |
|||
filters: { |
|||
//显示（手机号|邮箱号）过滤 |
|||
userFilter(val) { |
|||
if (!val) return; |
|||
return val.replace(/(^\w{3})\w*(@|\w{3}$)/g, "$1***$2"); |
|||
} |
|||
}, |
|||
methods: { |
|||
getUserInfo() { |
|||
Profile.getUserInfo().then(res => { |
|||
this.detail = res; |
|||
}); |
|||
} |
|||
}, |
|||
created() { |
|||
this.getUserInfo(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,208 +0,0 @@ |
|||
<template> |
|||
<div class="profile-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex align-items-center mb-3 mt-4"> |
|||
<div class="h3 mr-1">{{$t('profile.invitationReward')}}</div> |
|||
<div class="border rounded-sm px-1 text-tips">{{$t('profile.dividends',{name:'AMATAK',num:'30%'})}}。</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12 mb-4"> |
|||
<div class="panel-box"> |
|||
<div class="heading d-flex justify-content-between aligin-items-center"> |
|||
<div>{{$t('profile.joinThePlan',{name:'AMATAK'})}}</div> |
|||
<div class="blue"> |
|||
<i class="el-icon-coin"></i> |
|||
{{$t('profile.checkMyDividend')}} |
|||
</div> |
|||
</div> |
|||
<div class="tab-content py-4"> |
|||
<div class="step-group d-flex justify-content-center text-center"> |
|||
<div class="step mx-5"> |
|||
<div class="icon"> |
|||
<img src="../../assets/img/icon/top1.png" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('profile.step1')}}：{{$t('profile.shareLink')}}</div> |
|||
</div> |
|||
<div class="next-icon mt-4"> |
|||
<img src="../../assets/img/icon/stepnext.png" alt /> |
|||
</div> |
|||
<div class="step mx-5"> |
|||
<div class="icon"> |
|||
<img src="../../assets/img/icon/top2.png" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('profile.step2')}}：{{$t('profile.shareFriend')}}</div> |
|||
</div> |
|||
<div class="next-icon mt-4"> |
|||
<img src="../../assets/img/icon/stepnext.png" alt /> |
|||
</div> |
|||
<div class="step mx-5"> |
|||
<div class="icon"> |
|||
<img src="../../assets/img/icon/top3.png" alt /> |
|||
</div> |
|||
<div class="txt">{{$t('profile.step3')}}：{{$t('profile.instantDividend')}}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-8 mb-4"> |
|||
<div class="panel-box"> |
|||
<div class="heading">{{$t('profile.invitationInformation')}}</div> |
|||
<div class="tab-content row"> |
|||
<div class="col-sm-8"> |
|||
<form> |
|||
<div class="form-group"> |
|||
<label>{{$t('profile.invitationLink')}}</label> |
|||
<div class="input-group"> |
|||
<input type="text" readonly :value="detail.invite_url" class="form-control" /> |
|||
<div class="input-group-append" @click="copy(detail.invite_url)"> |
|||
<button class="btn btn-outline-primary" type="button"> |
|||
<i class="el-icon-document-copy"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group mb-0"> |
|||
<label>{{$t('profile.invitationCode')}}</label> |
|||
<div class="input-group"> |
|||
<input type="text" readonly :value="detail.invite_code" class="form-control" /> |
|||
<div class="input-group-append" @click="copy(detail.invite_code)"> |
|||
<button class="btn btn-outline-primary" type="button"> |
|||
<i class="el-icon-document-copy"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="col-sm-4"> |
|||
<div class="form-group"> |
|||
<label>{{$t('profile.invitationLink')}}</label> |
|||
<div class="input-group"> |
|||
<vue-qr v-if="detail.invite_url" :text="detail.invite_url" :margin="10" :size="200" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-4 mb-4"> |
|||
<div class="panel-box"> |
|||
<div class="heading">{{$t('profile.registeredUser')}}</div> |
|||
<div class="tab-content" style="height:273px" v-infinite-scroll="load"> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('profile.accountNumber')}}</th> |
|||
<th class="text-right">{{$t('profile.registrationTime')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item"> |
|||
<td>{{item.username}}</td> |
|||
<td class="text-right">{{item.created_at}}</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="2"> |
|||
<no-record/> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="panel-box"> |
|||
<div class="heading">{{$t('profile.activityTerms')}}</div> |
|||
<div class="tab-content"> |
|||
<ul> |
|||
<li class="my-2"> |
|||
1. |
|||
<span class="font-weight-bold">{{$t('profile.handlingFeeDividend')}}</span> {{$t('profile.equalInvitee')}}30%{{$t('profile.fee')}}。 |
|||
</li> |
|||
<li class="my-2"> |
|||
2. |
|||
<span class="font-weight-bold">{{$t('profile.handlingFeeDividend')}}</span> {{$t('profile.afterThat')}}10{{$t('profile.follow')}}。 |
|||
</li> |
|||
<li class="my-2"> |
|||
<div> |
|||
3. |
|||
<span class="font-weight-bold">{{$t('profile.handlingFeeDividend')}}</span>{{$t('profile.limit')}} |
|||
<span class="font-weight-bold">{{$t('profile.handlingFeeDividend')}}</span>。 |
|||
</div> |
|||
<ul class="ml-3"> |
|||
<li class="my-2"> |
|||
3.1 |
|||
<span class="font-weight-bold">{{$t('profile.handlingFeeDividend')}}</span>{{$t('profile.activityStartTime')}}：2020{{$t('profile.Y')}}5{{$t('profile.M')}}9{{$t('profile.D')}} |
|||
</li> |
|||
<li class="my-2"> |
|||
3.2 |
|||
<span class="font-weight-bold">{{$t('profile.handlingFeeDividend')}}</span>{{$t('profile.endTime')}}：{{$t('profile.proceed')}} |
|||
</li> |
|||
</ul> |
|||
</li> |
|||
<li class="my-2">4. AMATAK{{$t('profile.atAnyTime',{name:'AMATAK'})}}</li> |
|||
<li class="my-2">5. AMATAK{{$t('profile.reservedRights')}}。</li> |
|||
<li class="my-2">6. AMATAK{{$t('profile.canDecide',{name:'AMATAK',link:'web.coin.amatak.net'})}}.</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Profile from "@/api/profile"; |
|||
import vueQr from "vue-qr"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
page:1, |
|||
list:[] |
|||
}; |
|||
}, |
|||
components: { |
|||
vueQr |
|||
}, |
|||
methods: { |
|||
load(){ |
|||
this.page++ |
|||
this.generalizeList() |
|||
}, |
|||
getUserInfo() { |
|||
Profile.generalizeInfo() |
|||
.then(res => { |
|||
this.detail = res; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
// 拷贝 |
|||
copy(txt) { |
|||
utils.copy(txt); |
|||
}, |
|||
// 获取推广记录 |
|||
generalizeList(){ |
|||
let data = {page:this.page} |
|||
Profile.generalizeList(data).then(res=>{ |
|||
this.list = [...this.list,...res.data] |
|||
}) |
|||
} |
|||
}, |
|||
created() { |
|||
this.getUserInfo(); |
|||
this.generalizeList() |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,93 +0,0 @@ |
|||
<template> |
|||
<div class="profile-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between mb-3 mt-4"> |
|||
<div class="h3">{{$t('profile.bill')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a |
|||
class="nav-link active" |
|||
data-toggle="pill" |
|||
href="#tab1" |
|||
role="tab" |
|||
aria-selected="false" |
|||
>{{$t('profile.bill')}}</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('profile.date')}}</th> |
|||
<th>{{$t('profile.address')}}</th> |
|||
<th>ip</th> |
|||
<th class="text-right">{{$t('profile.equipment')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.login_time_text"> |
|||
<td>{{item.login_time_text}}</td> |
|||
<td>{{item.login_site}}</td> |
|||
<td>{{filterAddress(item.login_ip,item.login_site)}}</td> |
|||
<td class="text-right">{{item.login_type}}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-pagination layout="prev, pager, next" :page-size="per_page" @current-change="changePage" :total="detail.total"></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Profile from "@/api/profile"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
page: 1, |
|||
per_page: 10, |
|||
list: [], |
|||
detail:{} |
|||
}; |
|||
}, |
|||
methods: { |
|||
changePage(idx) { |
|||
this.page = idx |
|||
this.getLoginLogs() |
|||
}, |
|||
getLoginLogs() { |
|||
let data = { |
|||
page: this.page, |
|||
per_page: this.per_page |
|||
}; |
|||
Profile.getLoginLogs(data).then(res => { |
|||
this.list = res.data; |
|||
this.detail = res; |
|||
}); |
|||
}, |
|||
filterAddress(ip,address){ |
|||
if(address.indexOf('China')!=-1){ |
|||
return ip.replace(/(^\d+\.).*/ig,'$1***.***.***') |
|||
}else{ |
|||
return ip |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.getLoginLogs(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,41 +0,0 @@ |
|||
<template> |
|||
<div class="profile-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="reset-password mx-auto shadow-sm p-4 rounded border"> |
|||
<div class="fn-22 font-weight-bold text-center mb-3">重置密码</div> |
|||
<form> |
|||
<div class="form-group"> |
|||
<label>旧密码</label> |
|||
<input type="password" class="form-control" placeholder="请输入旧密码" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>新密码</label> |
|||
<input type="password" class="form-control" placeholder="请输入新密码" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>确认新密码</label> |
|||
<input type="password" class="form-control" placeholder="请确认确认新密码" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>短信验证</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" class="form-control" placeholder="请输入验证码" /> |
|||
<div class="input-group-append"> |
|||
<button class="btn btn-outline-primary" type="button">发送验证码</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<button type="button" class="btn w-100 btn-primary">确定</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,480 +0,0 @@ |
|||
<template> |
|||
<div class="subscride-page"> |
|||
<!-- 表单 --> |
|||
<div class="container panel my-4 p-5 rounded shadow-sm bg-panel"> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<div class="h3 mb-3">{{ detail.coin_name }}</div> |
|||
<div class>{{ $t("purchase.sendPrice") }}</div> |
|||
<div class="price fn-20 blue"> |
|||
1 {{ detail.coin_name }} = {{issue_price}} |
|||
<!-- {{ detail.issue_price }} --> |
|||
USDT |
|||
</div> |
|||
<ul> |
|||
<li class="mt-3"> |
|||
<div class="label text-secondary"> |
|||
{{ $t("purchase.subscriptionCurrency") }} |
|||
</div> |
|||
<div class="txt">{{ detail.subscribe_currency }}</div> |
|||
</li> |
|||
<li class="mt-3"> |
|||
<div class="label text-secondary"> |
|||
{{ $t("purchase.expected") }} |
|||
</div> |
|||
<div class="txt"> |
|||
{{ parseTime(detail.expected_time_online) }} |
|||
</div> |
|||
</li> |
|||
<li class="mt-3"> |
|||
<div class="label text-secondary"> |
|||
{{ $t("purchase.startTime") }} |
|||
</div> |
|||
<div class="txt"> |
|||
{{ parseTime(detail.start_subscription_time) }} |
|||
</div> |
|||
</li> |
|||
<li class="mt-3"> |
|||
<div class="label text-secondary"> |
|||
{{ $t("purchase.applyForPurchase") }} |
|||
</div> |
|||
<div class="txt"> |
|||
{{ parseTime(detail.end_subscription_time) }} |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div |
|||
class="col-6 d-flex flex-column justify-content-end align-items-start" |
|||
> |
|||
<div class="input-group mb-3"> |
|||
<div class="input-group-prepend"> |
|||
<el-dropdown> |
|||
<span class="input-group-text"> |
|||
{{ activeCoin.coin_name }} |
|||
<i class="el-icon-caret-bottom"></i> |
|||
</span> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
v-for="item in coinList" |
|||
@click.native="activeCoin = item" |
|||
:key="item.coin_name" |
|||
>{{ item.coin_name }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</div> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
:placeholder="$t('purchase.enterNum')" |
|||
min="0" |
|||
step="0.0000000001" |
|||
:data-message="$t('nav.b9',{num:10})" |
|||
required |
|||
aria-label="Username" |
|||
v-model="num" |
|||
aria-describedby="basic-addon1" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="btn btn-outline-primary" |
|||
type="button" |
|||
@click="num = activeCoin.usable_balance" |
|||
> |
|||
{{ $t("purchase.all") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<!-- v-if="activeCoin.usable_balance" --> |
|||
<p > |
|||
{{ $t("wallet.availableBalance") }}：{{ activeCoin.usable_balance }} |
|||
</p> |
|||
<p> |
|||
1 |
|||
<!-- {{ activeCoin.coin_name }} --> |
|||
USDT |
|||
≈ |
|||
{{ 1 / detail.issue_price | omitTo(4)}} |
|||
<!-- {{ activeCoin.proportion_amount | omitTo(5) }} --> |
|||
{{ detail.coin_name }} |
|||
</p> |
|||
<p> |
|||
{{ num || 0 }} {{ activeCoin.coin_name }} ≈ |
|||
{{(activeCoin.CurrentPrice/ detail.issue_price)*num | omitTo(4)}} |
|||
<!-- {{ total }} --> |
|||
{{ detail.coin_name }} |
|||
</p> |
|||
<button |
|||
type="submit" |
|||
class="btn btn-primary rounded-pill" |
|||
@click="ifSubscribeNow" |
|||
> |
|||
{{ $t("purchase.subscribeNow") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 进度 --> |
|||
<div v-if="activityList[0].amount" class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-panel"> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<h5 class="border-bottom pb-3 mb-5"> |
|||
{{ $t('nav.c2') }} |
|||
</h5> |
|||
<el-steps :active="activestep+1" align-center> |
|||
<el-step |
|||
:description="$t('nav.c2')" |
|||
></el-step> |
|||
<el-step |
|||
:description="$t('nav.c1', { amount: activityList[0].amount,name:detail.coin_name,rate:activityList[0].rate*100})" |
|||
></el-step> |
|||
<el-step |
|||
:description="$t('nav.c1', { amount: activityList[1].amount,name:detail.coin_name,rate:activityList[1].rate*100})" |
|||
></el-step> |
|||
<el-step |
|||
:description="$t('nav.c1', { amount: activityList[2].amount,name:detail.coin_name,rate:activityList[2].rate*100})" |
|||
></el-step> |
|||
<el-step |
|||
:description="$t('nav.c1', { amount: activityList[3].amount,name:detail.coin_name,rate:activityList[3].rate*100})" |
|||
></el-step> |
|||
<el-step |
|||
:description="$t('nav.c1', { amount: activityList[4].amount,name:detail.coin_name,rate:activityList[4].rate*100})" |
|||
></el-step> |
|||
</el-steps> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-panel"> |
|||
<div class="col-md-12 mt15"> |
|||
<div class="markets-pair-list"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" data-toggle="pill" role="tab" aria-selected="false">{{ $t("common.a3") }}</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('purchase.subscribe')}}</th> |
|||
<th>{{$t('otc.a5')}}</th> |
|||
<th>{{$t('wallet.money')}}</th> |
|||
<th>{{$t('purchase.subscriptionCurrency')}}</th> |
|||
<th>{{$t('contract.b1')}}</th> |
|||
<th>{{$t('contract.l1')}}</th> |
|||
<th>{{$t('contract.l4')}} |
|||
<!-- （USDT） --> |
|||
</th> |
|||
<th class="text-right">{{$t('wallet.status')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in subscribeRecords" :key="item.id" v-if="seek(item)"> |
|||
<td> |
|||
<img src="../../assets/img/icon/1.png" alt="eth" /> |
|||
{{ item.subscription_currency_name }} |
|||
</td> |
|||
<td>{{ item.subscription_currency_amount }}</td> |
|||
<td>{{ item.payment_amount }}</td> |
|||
<td>{{ item.payment_currency }}</td> |
|||
<td>{{ item.subscription_time|parseTime }}</td> |
|||
<td>{{(item.increase_ratio).toFixed(5)}}%</td> |
|||
<td>{{(item.total_value).toFixed(5)}}</td> |
|||
<!-- <td>{{ ( ((detail.issue_price-(item.payment_amount/item.subscription_currency_amount))/detail.issue_price)*100 ).toFixed(2) }}%</td> --> |
|||
<!-- <td>{{ ( (((item.payment_amount/item.subscription_currency_amount))*detail.issue_price) ).toFixed(2) }}</td> --> |
|||
<td class="text-right"> |
|||
<span class="success">{{$t('wallet.success')}}</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 进度 --> |
|||
<div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-panel"> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<h5 class="border-bottom pb-3 mb-5"> |
|||
{{ $t("purchase.subscriptionCycle") }} |
|||
</h5> |
|||
<el-steps :active="detail.status" align-center> |
|||
<el-step |
|||
:title="$t('purchase.projectWarmUp')" |
|||
:icon="detail.status >= 1 ? 'el-icon-success' : undefined" |
|||
></el-step> |
|||
<el-step |
|||
:title="$t('purchase.startSubscription')" |
|||
:icon="detail.status >= 2 ? 'el-icon-success' : undefined" |
|||
:description="parseTime(detail.start_subscription_time)" |
|||
></el-step> |
|||
<el-step |
|||
:title="$t('purchase.endOfSubscription')" |
|||
:icon="detail.status >= 3 ? 'el-icon-success' : undefined" |
|||
:description="parseTime(detail.end_subscription_time)" |
|||
></el-step> |
|||
<el-step |
|||
:title="$t('purchase.announceResults')" |
|||
:icon="detail.status >= 4 ? 'el-icon-success' : undefined" |
|||
:description="parseTime(detail.announce_time)" |
|||
></el-step> |
|||
</el-steps> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 详情 --> |
|||
<div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-panel"> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<h5 class="border-bottom pb-3 mb-4"> |
|||
{{ $t("purchase.projectCetails") }} |
|||
</h5> |
|||
<div class="edit-content" v-html="detail.project_details"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div |
|||
class="modal fade" |
|||
id="editAddress" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="exampleModalLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content bg-panel"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalLabel"> |
|||
{{$t("purchase.useOrNot")}}{{activeCoin.coin_name}}{{$t("purchase.subscribe")}}? |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form> |
|||
<div class="form-group"> |
|||
<label for="comments" class="col-form-label" |
|||
>{{$t("contract.k9")}}:</label |
|||
> |
|||
<input |
|||
type="text" |
|||
class="form-control" |
|||
id="comments" |
|||
v-model="code" |
|||
/> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary rounded-pill" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("common.cancelBtn") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary rounded-pill" |
|||
@click="sbumit" |
|||
> |
|||
{{ $t("common.confirmBtn") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Subscride from "@/api/subscride"; |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
num: 1, |
|||
coinList: [], |
|||
detail: {}, |
|||
activeCoin: {}, |
|||
code:"", |
|||
transferRecords: [], |
|||
coinName:"", |
|||
subscribeRecords:[], |
|||
activityList:[{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""}], |
|||
activestep:0, |
|||
issue_price:0.03, |
|||
timer:'' |
|||
}; |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return utils.multiple( |
|||
this.num || 1, |
|||
this.activeCoin.proportion_amount * 1, |
|||
2 |
|||
); |
|||
}, |
|||
|
|||
isLogin() { |
|||
return Boolean(this.userAuth); |
|||
}, |
|||
|
|||
userAuth() { |
|||
const auth = localStorage.getItem("auth"); |
|||
let ret = ""; |
|||
if (auth) { |
|||
let { memberId, accessToken } = JSON.parse(auth); |
|||
ret = `?${accessToken}&${memberId}`; |
|||
} |
|||
return ret; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 过滤查找当前币种的记录 |
|||
seek(item) { |
|||
return !this.isCondition || item.coin_name === this.coinName; |
|||
}, |
|||
getTransferRecords() { |
|||
Wallet.subscribeRecords() |
|||
.then(data => { |
|||
this.subscribeRecords = data.data; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
activity() { |
|||
Subscride.activity() |
|||
.then(data => { |
|||
this.activityList=data.activity.params |
|||
this.activestep=data.step |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
parseTime(num) { |
|||
if (!num) return; |
|||
return utils.parseTime(num); |
|||
}, |
|||
subscribeTokenList() { |
|||
Subscride.subscribeTokenList().then((res) => { |
|||
this.coinList = res; |
|||
this.activeCoin = this.coinList[0]; |
|||
}); |
|||
}, |
|||
getInfo() { |
|||
Subscride.subscribe().then((res) => { |
|||
this.detail = res; |
|||
}); |
|||
}, |
|||
|
|||
chkValidate() { |
|||
// 验证登录 |
|||
if (!this.isLogin) { |
|||
this.$confirm( this.$t("contract.k8"), { |
|||
confirmButtonText: this.$t("contract.c5"), |
|||
cancelButtonText: this.$t("contract.c4"), |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
this.$router.push(`/sign-in`); |
|||
}) |
|||
.catch(); |
|||
} |
|||
return utils.validate(".input-group"); |
|||
}, |
|||
|
|||
ifSubscribeNow() { |
|||
if (this.chkValidate()) { |
|||
this.$confirm( |
|||
`${this.$t("purchase.useOrNot")}${this.activeCoin.coin_name}${this.$t( |
|||
"purchase.subscribe" |
|||
)}?`, |
|||
this.$t("purchase.prompt"), |
|||
{ |
|||
confirmButtonText: this.$t("common.confirmBtn"), |
|||
cancelButtonText: this.$t("common.cancelBtn"), |
|||
} |
|||
) |
|||
.then(() => { |
|||
this.subscribeNow(); |
|||
}) |
|||
.catch(() => {}); |
|||
} |
|||
}, |
|||
sbumit(){ |
|||
$("#editAddress").modal("hide"); |
|||
let data={ |
|||
purchase_code:this.code |
|||
} |
|||
Subscride.changePurchaseCode(data) |
|||
.then((res) => { |
|||
this.subscribeNow(); |
|||
}) |
|||
.catch((err) => { |
|||
$("#editAddress").modal("show"); |
|||
}); |
|||
}, |
|||
subscribeNow() { |
|||
let data = { |
|||
amount: this.num, |
|||
coin_name: this.activeCoin.coin_name, |
|||
}; |
|||
Subscride.subscribeNow(data).then((res) => { |
|||
if (res) { |
|||
this.$message.success(this.$t("purchase.subscribeSuccess")); |
|||
this.num = ""; |
|||
this.getTransferRecords() |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
if(err==4002){ |
|||
$("#editAddress").modal("show"); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.subscribeTokenList(); |
|||
this.getInfo(); |
|||
this.getTransferRecords() |
|||
this.activity() |
|||
this.timer=setInterval(this.getTransferRecords,5000) |
|||
}, |
|||
beforeDestroy() { |
|||
clearInterval(this.timer); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.table tr:hover{ |
|||
background: #e9e9e9 !important; |
|||
} |
|||
::v-deep { |
|||
.el-step__icon { |
|||
background: #222e3d; |
|||
} |
|||
.el-step__head.is-process { |
|||
color: inherit; |
|||
border-color: inherit; |
|||
} |
|||
.el-step__description.is-process, |
|||
.el-step__title.is-process { |
|||
color: inherit; |
|||
} |
|||
.el-step__description{ |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,49 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="edit-content py-4"> |
|||
<div v-html="article.body" v-cloak></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import College from "@/api/college"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
cid: this.$route.params.cid, |
|||
article: { |
|||
body : '' |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
initPage() { |
|||
College.getServiceDetail(this.cid).then(data => { |
|||
this.article = data; |
|||
}).catch(err => {}) |
|||
} |
|||
}, |
|||
watch: { |
|||
$route() { |
|||
this.cid = this.$route.params.cid; |
|||
this.initPage(); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.initPage(); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
[v-cloak] { |
|||
display: none!important; |
|||
} |
|||
</style> |
|||
@ -1,93 +0,0 @@ |
|||
<template> |
|||
<div class="edit-ver"> |
|||
<div class="form-group" v-if="detail.phone_status==1"> |
|||
<label>{{$t('setting.smsVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" required v-model="sms_code" class="form-control" :placeholder="$t('setting.enterCode')" /> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:1}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.email_status==1"> |
|||
<label>{{$t('setting.emailVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="email_code" |
|||
required |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterCode')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:2}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.google_status==1"> |
|||
<label>Google {{$t('setting.ver')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="google_code" |
|||
class="form-control" |
|||
required |
|||
:placeholder="$t('setting.enterNameCode',{name:'Google'})" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-secondary" @click="$emit('close')">{{$t('common.cancelBtn')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" @click="changeVer">{{$t('common.confirmBtn')}}</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Setting from "../../api/setting"; |
|||
export default { |
|||
props: ["detail", "changeObj"], |
|||
data() { |
|||
return { |
|||
sms_code: "", |
|||
email_code: "", |
|||
google_code: "" |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeVer() { |
|||
let data = { |
|||
sms_code: this.sms_code, |
|||
email_code: this.email_code, |
|||
google_code: this.google_code, |
|||
type: this.changeObj.type |
|||
}; |
|||
if (utils.validate(".edit-ver")) { |
|||
if (this.changeObj.status) { |
|||
// 启用 |
|||
Setting.enableSmsEmailGoogle(data) |
|||
.then(res => { |
|||
this.$emit('close') |
|||
this.$emit('change') |
|||
this.$message.success(this.$t('setting.openSuccess')) |
|||
}) |
|||
.catch(res => {}); |
|||
} else { |
|||
// 关闭 |
|||
Setting.disableSmsEmailGoogle(data) |
|||
.then(res => { |
|||
this.$emit('close') |
|||
this.$emit('change') |
|||
this.$message.success(this.$t('setting.closeSuccess')) |
|||
}) |
|||
.catch(res => {}); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
activated() {} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,87 +0,0 @@ |
|||
<template> |
|||
<div class="edit-email"> |
|||
<div class="form-group" v-if="!detail.email"> |
|||
<label>{{$t('setting.email')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="text" required v-model="form.email" class="form-control" :placeholder="$t('setting.enterEmail')" /> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>{{$t('setting.emailVerCode')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" required v-model="form.email_code" class="form-control" :placeholder="$t('setting.enterEmailVer')" /> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" v-if="detail.email" :data="{type:2}" :type="1" /> |
|||
<get-code class="btn btn-outline-primary" v-else :data="{email:form.email}" :type="3" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.phone_status==1"> |
|||
<label>SMS {{$t('setting.smsVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" required v-model="form.sms_code" class="form-control" :placeholder="$t('setting.enterSmsCode')" /> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:1}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.google_status==1"> |
|||
<label>Google {{$t('setting.ver')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" required v-model="form.google_code" class="form-control" :placeholder="$t('setting.enterNameCode',{name:'Google'})" /> |
|||
</div> |
|||
</div> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-secondary" @click="$emit('close')">{{$t('common.cancelBtn')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" v-if="!detail.email" @click="bindEmail">{{$t('setting.bind')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" v-else @click="unBind">{{$t('setting.unbind')}}</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Setting from "../../api/setting"; |
|||
export default { |
|||
props: ["detail"], |
|||
data() { |
|||
return { |
|||
form: { |
|||
email: "", |
|||
email_code: "", |
|||
sms_code: "", |
|||
google_code: "" |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
bindEmail() { |
|||
let data = this.form; |
|||
if (utils.validate(".edit-email")) { |
|||
Setting.bindEmail(data) |
|||
.then(res => { |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
this.$message.success(this.$t('setting.bindSuccess')); |
|||
}) |
|||
.catch(res => {}); |
|||
} |
|||
}, |
|||
unBind() { |
|||
let data = this.form; |
|||
if (utils.validate(".edit-email")) { |
|||
Setting.unbindEmail(data) |
|||
.then(res => { |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
this.$message.success(this.$t('setting.unbindSuccess')); |
|||
}) |
|||
.catch(res => {}); |
|||
} |
|||
} |
|||
}, |
|||
created() {} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,157 +0,0 @@ |
|||
<template> |
|||
<div class="edit-google"> |
|||
<!-- 绑定 --> |
|||
<div> |
|||
<div class="form-group" v-if="!detail.google_token"> |
|||
<label>{{$t('setting.scanQrCode')}}</label> |
|||
<div class="d-flex"> |
|||
<vue-qr |
|||
v-if="googleToken.qrcode_url" |
|||
class="mr-2" |
|||
:text="googleToken.qrcode_url" |
|||
:margin="0" |
|||
:size="100" |
|||
></vue-qr> |
|||
<div class="tip fn-12"> |
|||
<div>{{$t('setting.howToOpen',{name:'Google'})}}?</div> |
|||
<a href="#" class>{{$t('setting.read')}}。</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="!detail.google_token"> |
|||
<label>Google {{$t('setting.verKey')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="text" :value="googleToken.secret" disabled class="form-control" placeholder /> |
|||
<div class="input-group-append"> |
|||
<button class="btn btn-outline-primary" type="button" @click="copy(googleToken.secret)"> |
|||
<i class="el-icon-document-copy"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.phone_status==1"> |
|||
<label>{{$t('setting.smsVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="form.sms_code" |
|||
required |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterCode')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:1}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.email_status==1"> |
|||
<label>{{$t('setting.emailVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="form.email_code" |
|||
required |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterEmailVer')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:2}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>Google {{$t('setting.ver')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="form.google_code" |
|||
class="form-control" |
|||
required |
|||
:placeholder="$t('setting.enterNameCode',{name:'Google'})" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-secondary" @click="$emit('close')">{{$t('common.cancelBtn')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" v-if="!detail.google_token" @click="bindGoogleToken">{{$t('setting.bind')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" v-else @click="unBindGoogle">{{$t('setting.unbind')}}</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import vueQr from "vue-qr"; |
|||
import Setting from "@/api/setting"; |
|||
export default { |
|||
components: { |
|||
vueQr |
|||
}, |
|||
props: ["detail"], |
|||
data() { |
|||
return { |
|||
googleToken: {}, |
|||
form: { |
|||
google_token: "", |
|||
google_code: "", |
|||
sms_code: "", |
|||
email_code: "" |
|||
} |
|||
}; |
|||
}, |
|||
watch: { |
|||
["detail.google_token"]() { |
|||
this.getToken(); |
|||
} |
|||
}, |
|||
methods: { |
|||
getToken() { |
|||
Setting.getGoogleToken() |
|||
.then(res => { |
|||
this.googleToken = res; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
// 绑定谷歌验证码 |
|||
bindGoogleToken() { |
|||
let data = this.form; |
|||
data.google_token = this.googleToken.secret; |
|||
if (utils.validate(".edit-google")) { |
|||
Setting.bindGoogleToken(data) |
|||
.then(res => { |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
this.$message.success(this.$t('setting.bindSuccess')); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
}, |
|||
// 解绑谷歌验证 |
|||
unBindGoogle() { |
|||
let data = this.form; |
|||
if (utils.validate(".edit-google")) { |
|||
Setting.unbindGoogleToken(data) |
|||
.then(res => { |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
this.$message.success(this.$t('setting.unbindSuccess')); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
}, |
|||
copy(txt) { |
|||
utils.copy(txt); |
|||
// copy(txt) |
|||
} |
|||
}, |
|||
created() { |
|||
if (!this.detail.google_token) { |
|||
this.getToken(); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,205 +0,0 @@ |
|||
<template> |
|||
<div class="setting-page"> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('setting.safeSetting')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<!-- 登录密码 --> |
|||
<div class="col-md-6 d-flex"> |
|||
<div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column"> |
|||
<div class="heading">{{$t('setting.loginPassword')}}</div> |
|||
<div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-start"> |
|||
<div>{{$t('setting.loginPassword')}}</div> |
|||
<button class="btn btn-primary btn-sm" @click="loginShow=true">{{$t('setting.resLoginPassword')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 交易密码 --> |
|||
<!-- <div class="col-md-6 d-flex"> |
|||
<div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column"> |
|||
<div class="heading">{{$t('setting.transactionPassword')}}</div> |
|||
<div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-start"> |
|||
<div>{{$t('setting.usedFor')}}。</div> |
|||
<div class="status text-tips my-2" v-if="!detail.is_set_payword">{{$t('setting.notOpen')}}</div> |
|||
<button class="btn btn-primary btn-sm" @click="transShow=true" v-if="detail.is_set_payword">{{$t('setting.modifyPassword')}}</button> |
|||
<button class="btn btn-primary btn-sm" @click="transShow=true" v-else>{{$t('setting.safeSetting')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- Google验证 --> |
|||
<!-- <div class="col-md-4 d-flex"> |
|||
<div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column"> |
|||
<div class="heading">Google {{$t('setting.verCode')}}</div> |
|||
<div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-start"> |
|||
<div>{{$t('setting.forLogin')}}。</div> |
|||
<div class="tip fn-12 light-purple my-2">({{$t('setting.alLast')}})</div> |
|||
<div class="status text-tips my-2" v-if="detail.google_status==0&&detail.google_token">{{$t('setting.notOpen')}}</div> |
|||
<div class="group d-flex align-items-center"> |
|||
<button class="btn btn-primary btn-sm mr-2" @click="googleShow=true"> |
|||
<template v-if="!detail.google_token">{{$t('setting.bind')}}</template> |
|||
<template v-else>{{$t('setting.unbind')}}</template> |
|||
</button> |
|||
<div class="custom-control custom-switch" v-if="detail.google_token"> |
|||
<input type="checkbox" readonly @change="verificationChange(3,detail.google_status)" v-model="detail.google_status" class="custom-control-input" id="GoogleSwitch" /> |
|||
<label class="custom-control-label" v-if="detail.google_status" for="GoogleSwitch">{{$t('setting.close')}}</label> |
|||
<label class="custom-control-label" v-else for="GoogleSwitch">{{$t('setting.open')}}</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- 短信验证 --> |
|||
<!-- <div class="col-md-4 d-flex"> |
|||
<div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column"> |
|||
<div class="heading">SMS {{$t('setting.smsVer')}}</div> |
|||
<div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-start"> |
|||
<div>{{$t('setting.forLogin')}}。</div> |
|||
<div class="tip fn-12 light-purple my-2">({{$t('setting.alLast')}})</div> |
|||
<div class="num blue my-2" v-if="detail.phone">{{detail.phone|userFilter}}</div> |
|||
<div class="status text-tips my-2" v-if="detail.phone_status==0&&detail.phone">{{$t('setting.notOpen')}}</div> |
|||
<div class="group d-flex align-items-center"> |
|||
<button class="btn btn-primary btn-sm mr-2" @click="smsShow=true"> |
|||
<template v-if="detail.phone">{{$t('setting.unbind')}}</template> |
|||
<template v-else>{{$t('setting.bind')}}</template> |
|||
</button> |
|||
<div class="custom-control custom-switch" v-if="detail.phone"> |
|||
<input type="checkbox" readonly @change="verificationChange(1,detail.phone_status)" v-model="detail.phone_status" class="custom-control-input" id="SMSSwitch" /> |
|||
<label class="custom-control-label" v-if="detail.phone_status" for="SMSSwitch">{{$t('setting.close')}}</label> |
|||
<label class="custom-control-label" v-else for="SMSSwitch">{{$t('setting.open')}}</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<!-- 邮箱验证 --> |
|||
<!-- <div class="col-md-4 d-flex"> |
|||
<div class="panel-box bg-panel shadow-sm mb-4 w-100 d-flex flex-column"> |
|||
<div class="heading">{{$t('setting.emailVer')}}</div> |
|||
<div class="tab-content flex-fill d-flex flex-column justify-content-between align-items-start"> |
|||
<div>{{$t('setting.forLogin')}}。</div> |
|||
<div class="tip fn-12 light-purple my-2">({{$t('setting.alLast')}})</div> |
|||
<div class="num blue my-2" v-if="detail.email">{{detail.email|userFilter}}</div> |
|||
<div class="status text-tips my-2" v-if="detail.email_status==0&&detail.email">{{$t('setting.notOpen')}}</div> |
|||
<div class="group d-flex align-items-center"> |
|||
<button class="btn btn-primary btn-sm mr-2" @click="emailShow=true"> |
|||
<template v-if="detail.email">{{$t('setting.unbind')}}</template> |
|||
<template v-else>{{$t('setting.bind')}}</template> |
|||
</button> |
|||
<div class="custom-control custom-switch" v-if="detail.email"> |
|||
<input type="checkbox" readonly @change="verificationChange(2,detail.email_status)" v-model="detail.email_status" class="custom-control-input" id="EMAILSwitch" /> |
|||
<label class="custom-control-label" v-if="detail.email_status" for="EMAILSwitch">{{$t('setting.close')}}</label> |
|||
<label class="custom-control-label" v-else for="EMAILSwitch">{{$t('setting.open')}}</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
<!-- 短信 --> |
|||
<v-box v-model="smsShow" :title="'SMS' +$t('setting.ver')"> |
|||
<sms-verify @close="smsShow=false" @change="getUserInfo" :detail="detail" id="SMSModal" /> |
|||
</v-box> |
|||
<!-- 交易密码 --> |
|||
<v-box v-model="transShow" :title="$t('setting.transactionPassword')"> |
|||
<trans-pwd @close="transShow=false" @change="getUserInfo" :detail="detail" id="tranPsw" /> |
|||
</v-box> |
|||
<!-- 邮箱验证 --> |
|||
<v-box v-model="emailShow" :title="$t('setting.emailVer')"> |
|||
<email-verify @change="getUserInfo" @close="emailShow=false" :detail="detail" id="emailVerify" /> |
|||
</v-box> |
|||
<!-- 谷歌验证 --> |
|||
<v-box v-model="googleShow" :title="'Google '+ $t('setting.ver')"> |
|||
<google-verify @change="getUserInfo" @close="googleShow=false" :detail="detail" id="googleVerify" /> |
|||
</v-box> |
|||
<!-- 登录密码 --> |
|||
<v-box v-model="loginShow" :title="$t('setting.loginPassword')"> |
|||
<login-pwd @close="loginShow=false" @change="getUserInfo" :detail="detail" id="loginPwd" /> |
|||
</v-box> |
|||
|
|||
<!-- 校验开关 --> |
|||
<v-box v-model="verification" :title="`${changeVerificationObj.status?$t('setting.open'):$t('setting.close')}${changeVerificationObj.name}`"> |
|||
<change-verification @close="verification=false" :changeObj="changeVerificationObj" @change="getUserInfo" :detail="detail" /> |
|||
</v-box> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import SmsVerify from "./sms-verify"; |
|||
import TransPwd from "./trans-pwd"; |
|||
import LoginPwd from "./login-pwd"; |
|||
import EmailVerify from "./email-verify"; |
|||
import GoogleVerify from "./google-verify"; |
|||
import ChangeVerification from "./change-verification"; |
|||
import Setting from "../../api/setting"; |
|||
|
|||
export default { |
|||
components: { |
|||
SmsVerify, |
|||
TransPwd, |
|||
EmailVerify, |
|||
GoogleVerify, |
|||
LoginPwd, |
|||
ChangeVerification |
|||
}, |
|||
data() { |
|||
return { |
|||
detail: {}, |
|||
loginShow: false, |
|||
smsShow: false, |
|||
transShow: false, |
|||
emailShow: false, |
|||
googleShow: false, |
|||
verification: false, |
|||
// 变更校验开关的对象 |
|||
changeVerificationObj: { |
|||
status: '', |
|||
type: '', |
|||
name: '' |
|||
} |
|||
}; |
|||
}, |
|||
filters: { |
|||
//显示（手机号|邮箱号）过滤 |
|||
userFilter(val) { |
|||
return val.replace(/(^\w{3})\w*(@|\w{3}$)/g, '$1***$2') |
|||
} |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
getUserInfo() { |
|||
Setting.getUserInfo() |
|||
.then(res => { |
|||
this.detail = res; |
|||
}) |
|||
.catch(err => { }); |
|||
}, |
|||
// 校验开关 |
|||
verificationChange(type, status) { |
|||
this.changeVerificationObj.status = status; |
|||
this.changeVerificationObj.type = type; |
|||
this.$nextTick(() => { |
|||
if (type == 1) { |
|||
this.detail.phone_status = !status; |
|||
this.changeVerificationObj.name = this.$t('setting.smsVer'); |
|||
} else if (type == 2) { |
|||
this.detail.email_status = !status; |
|||
this.changeVerificationObj.name = this.$t('setting.emailVer'); |
|||
} else if (type == 3) { |
|||
this.detail.google_status = !status; |
|||
this.changeVerificationObj.name = "Google " + this.$t('setting.ver'); |
|||
} |
|||
}); |
|||
this.verification = true; |
|||
|
|||
} |
|||
}, |
|||
created() { |
|||
this.getUserInfo(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,105 +0,0 @@ |
|||
<template> |
|||
<div class="edit-password"> |
|||
<div class="form-group"> |
|||
<label>{{$t('setting.newPassword')}}</label> |
|||
<input |
|||
type="password" |
|||
required |
|||
v-model="form.password" |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterNewPassword')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>{{$t('setting.confirmPassword')}}</label> |
|||
<input |
|||
type="password" |
|||
v-model="form.password_confirmation" |
|||
required |
|||
class="form-control" |
|||
:placeholder="$t('setting.pleaseConfirmPassword')" |
|||
/> |
|||
</div> |
|||
<div class="form-group" v-if="detail.phone_status==1"> |
|||
<label>{{$t('setting.smsVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
required |
|||
v-model="form.sms_code" |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterCode')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:1}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.email_status==1"> |
|||
<label>{{$t('setting.emailVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="form.email_code" |
|||
required |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterEmailVer')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:2}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.google_status==1"> |
|||
<label>Google {{$t('setting.ver')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="form.google_code" |
|||
class="form-control" |
|||
required |
|||
:placeholder="$t('setting.enterNameCode',{name:'Google'})" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-secondary" @click="$emit('close')">{{$t('common.cancelBtn')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" @click="setPassword">{{$t('common.confirmBtn')}}</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Setting from "../../api/setting"; |
|||
export default { |
|||
props: ["detail"], |
|||
data() { |
|||
return { |
|||
form: { |
|||
password: "", |
|||
password_confirmation: "", |
|||
sms_code: "", |
|||
email_code: "", |
|||
google_code: "" |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
setPassword() { |
|||
let data = this.form; |
|||
if (utils.validate(".edit-password")) { |
|||
Setting.updatePassword(data) |
|||
.then(res => { |
|||
this.$message.success(this.$t('common.changeSuccess')); |
|||
this.$emit("close"); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
} |
|||
}, |
|||
activated() {} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,118 +0,0 @@ |
|||
<template> |
|||
<div class="edit-sms"> |
|||
<div class="form-group"> |
|||
<label>{{$t('setting.enterPhone')}}</label> |
|||
<div class="input-group mb-3" v-if="!detail.phone"> |
|||
<input |
|||
type="number" |
|||
required |
|||
v-model="form.country_code" |
|||
class="form-control col-4" |
|||
:placeholder="$t('setting.area')" |
|||
/> |
|||
<input |
|||
type="number" |
|||
required |
|||
v-model="form.phone" |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterPhone')" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>SMS {{$t('setting.smsVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
required |
|||
v-model="form.sms_code" |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterCode')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code |
|||
class="btn btn-outline-primary" |
|||
:data="{phone:form.phone,country_code:form.country_code}" |
|||
:type="2" |
|||
v-if="!detail.phone" |
|||
/> |
|||
<get-code v-else class="btn btn-outline-primary" :data="{type:1}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.email_status==1"> |
|||
<label>{{$t('setting.emailVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" v-model="form.email_code" class="form-control" :placeholder="$t('setting.enterCode')" /> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:2}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.google_status==1"> |
|||
<label>Google {{$t('setting.ver')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="form.google_code" |
|||
class="form-control" |
|||
required |
|||
:placeholder="$t('setting.enterNameCode',{name:'Google'})" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-secondary" @click="$emit('close')">{{$t('common.cancelBtn')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" v-if="!detail.phone" @click="bindPhone">{{$t('setting.bind')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" v-else @click="unBind">{{$t('setting.unbind')}}</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Setting from "../../api/setting"; |
|||
export default { |
|||
props: ["detail"], |
|||
data() { |
|||
return { |
|||
form: { |
|||
phone: "", |
|||
country_code: "", |
|||
sms_code: "", |
|||
email_code: "", |
|||
google_code: "" |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
bindPhone() { |
|||
let data = this.form; |
|||
if (utils.validate(".edit-sms")) { |
|||
Setting.bindPhone(data) |
|||
.then(res => { |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
this.$message.success(this.$t('setting.bindSuccess')); |
|||
}) |
|||
.catch(res => {}); |
|||
} |
|||
}, |
|||
unBind() { |
|||
let data = this.form; |
|||
if (utils.validate(".edit-sms")) { |
|||
Setting.unbindPhone(data) |
|||
.then(res => { |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
this.$message.success(this.$t('setting.unbindSuccess')); |
|||
}) |
|||
.catch(res => {}); |
|||
} |
|||
} |
|||
}, |
|||
created() {} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,103 +0,0 @@ |
|||
<template> |
|||
<div class="edit-payword"> |
|||
<div class="form-group"> |
|||
<label>{{$t('setting.newPassword')}}</label> |
|||
<input |
|||
type="password" |
|||
:name="$t('setting.newPassword')" |
|||
required |
|||
v-model="payword" |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterNewPassword')" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label>{{$t('setting.confirmPassword')}}</label> |
|||
<input |
|||
type="password" |
|||
required |
|||
v-model="payword_confirmation" |
|||
class="form-control" |
|||
:placeholder="$t('setting.pleaseConfirmPassword')" |
|||
/> |
|||
</div> |
|||
<div class="form-group" v-if="detail.phone_status==1"> |
|||
<label>{{$t('setting.smsVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input type="number" required v-model="sms_code" class="form-control" :placeholder="$t('setting.enterCode')" /> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:1}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.email_status==1"> |
|||
<label>{{$t('setting.emailVer')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="email_code" |
|||
required |
|||
class="form-control" |
|||
:placeholder="$t('setting.enterEmailVer')" |
|||
/> |
|||
<div class="input-group-append"> |
|||
<get-code class="btn btn-outline-primary" :data="{type:2}" :type="1" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="form-group" v-if="detail.google_status==1"> |
|||
<label>Google {{$t('setting.ver')}}</label> |
|||
<div class="input-group mb-3"> |
|||
<input |
|||
type="number" |
|||
v-model="google_code" |
|||
class="form-control" |
|||
required |
|||
:placeholder="$t('setting.enterNameCode',{name:'Google'})" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="text-center"> |
|||
<button type="button" class="btn w-25 btn-secondary" @click="$emit('close')">{{$t('common.cancelBtn')}}</button> |
|||
<button type="button" class="btn w-25 btn-primary" @click="setPassword">{{$t('common.confirmBtn')}}</button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Setting from "../../api/setting"; |
|||
export default { |
|||
props: ["detail"], |
|||
data() { |
|||
return { |
|||
payword: "", |
|||
payword_confirmation: "", |
|||
sms_code: "", |
|||
email_code: "", |
|||
google_code: "" |
|||
}; |
|||
}, |
|||
methods: { |
|||
setPassword() { |
|||
let data = { |
|||
payword: this.payword, |
|||
payword_confirmation: this.payword_confirmation, |
|||
sms_code: this.sms_code, |
|||
email_code: this.email_code, |
|||
google_code: this.google_code |
|||
}; |
|||
if (utils.validate(".edit-payword")) { |
|||
Setting.setOrResetPaypwd(data).then(res => { |
|||
this.$message.success(this.$t('setting.operationSuccess')); |
|||
this.$emit("close"); |
|||
this.$emit("change"); |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
created() {} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,646 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="vh-100 d-flex justify-content-center"> |
|||
<div class="form-access my-auto "> |
|||
<form class="login-body bg-panel"> |
|||
<div class="text-center h3"> |
|||
<span>{{ $t("login.sign-in") }}</span> |
|||
</div> |
|||
|
|||
<template v-if="step === 1 "> |
|||
<div class="form-group"> |
|||
<input type="text" name="account" v-model="user.account" required :data-has="$t('login.effectivePhoneEmail')" class="form-control" :placeholder="$t('login.enterPhoneEmail')" :data-message="$t('login.effectivePhoneEmail')" /> |
|||
</div> |
|||
<div class="form-group"> |
|||
<!-- <input type="password" v-model="user.password" class="form-control" name="password" required :data-has="$t('login.emailCode',{num:'8-15'})" pattern="(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{8,15}$" :data-message="$t('login.passwordLength',{num:'8-15'})" :placeholder="$t('login.password')" /> --> |
|||
<el-input v-model="user.password" show-password required :placeholder="$t('login.password')"></el-input> |
|||
</div> |
|||
<div class="text-right"> |
|||
<router-link to="/forget-pwd">{{$t('login.forgetPassword')}}?</router-link> |
|||
</div> |
|||
<div class="custom-control custom-checkbox"> |
|||
<input type="checkbox" v-model="isRember" class="custom-control-input" id="form-checkbox" /> |
|||
<label class="custom-control-label" for="form-checkbox">{{$t('login.rememberMe')}}</label> |
|||
</div> |
|||
<button type="submit" class="btn btn-primary rounded-pill" @click.prevent.stop="step1">{{$t('login.login')}}</button> |
|||
</template> |
|||
|
|||
<template v-else-if="step === 3"> |
|||
<div class="login-type" v-if="(status.google_status + status.phone_status + status.email_status) >= 2"> |
|||
<!-- 选项卡 --> |
|||
|
|||
<ul class="login-type__container"> |
|||
<li v-if="status.google_status" @click="checkType=3" :class="[`login-type__controls`, {active:checkType==3}]">Google</li> |
|||
<li v-if="status.phone_status" @click="checkType=1" :class="[`login-type__controls`, {active:checkType==1}]">{{$t('login.sms')}}</li> |
|||
<li v-if="status.email_status" @click="checkType=2" :class="[`login-type__controls`, {active:checkType==2}]">{{$t('login.email')}}</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<!-- show懒加载dom 以维持验证码的状态 --> |
|||
<div class="verify-box" v-for="(item, index) in codeLists" :key="index" v-show="item.type===checkType"> |
|||
<!-- 提示信息 --> |
|||
<figure class="login-tips"> |
|||
<img :src="item.url" alt /> |
|||
<figcaption class="content"> |
|||
{{ item.caption }} |
|||
<br /> |
|||
{{ ajar[item.account] }} |
|||
</figcaption> |
|||
</figure> |
|||
|
|||
<!-- google没有自动发送 --> |
|||
<div v-if="item.resend" class="resend-btn"> |
|||
<!-- 短信验证码 或者 邮箱 --> |
|||
<verify-code :type="item.type" :signature="user.signature" :autoSend="item.type===checkType && isFirst[item.name]"></verify-code> |
|||
</div> |
|||
|
|||
<h5 class="verify-title">{{item.title}}</h5> |
|||
|
|||
<ul class="code-inputs"> |
|||
<li v-for="pos in 6" class="code-items" :key="pos"> |
|||
<input pattern="[0-9]*" class="form-control" type="text" placeholder :ref="`space-${item.name}`" @keyup="handleKeyUp(item.name, pos-1, $event)" @input="handleInput(item.name, pos-1, $event)" @paste="autofill" /> |
|||
</li> |
|||
</ul> |
|||
<!-- <el-input v-model="googleCode" @change="step3"></el-input> --> |
|||
</div> |
|||
</template> |
|||
</form> |
|||
|
|||
<h2> |
|||
{{$t('login.noAccountYet')}}? |
|||
<router-link to="/sign-up">{{$t('login.goRegister1')}}</router-link> |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Step2 |
|||
滑块验证码Modal弹框 使用javascript控制--> |
|||
<div class="modal fade" id="captcha" tabindex="-1" role="dialog" aria-hidden="true"> |
|||
<div class="modal-dialog modal-dialog-centered modal-sm" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title">{{$t('login.safe')}}</h5> |
|||
<!-- 自定义刷新验证码按钮 --> |
|||
<a href class="refresh" @click.prevent="refreshSlider"> |
|||
<img src="@/assets/img/icon-refresh.svg" alt /> |
|||
</a> |
|||
<!-- 模态原生支持的关闭按钮 --> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<img src="@/assets/img/icon-close.svg" alt /> |
|||
<!-- × 自带图标 --> |
|||
</button> |
|||
</div> |
|||
<!-- <div class="modal-body"> |
|||
... |
|||
</div>--> |
|||
<iframe name="my-modal-body" class="my-modal-body" :src="`/static/SliderCaptcha/src/index.html?`+ encodeURIComponent(`nextStep=step2Login&slider_type=login&account=${user.account}&lang=${lang}`)" frameborder="0"></iframe> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import md5 from "md5"; |
|||
import Member from "@/api/member"; |
|||
import utils from '@/utils'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
user: { |
|||
account: "", |
|||
password: "", |
|||
smsCode: "", |
|||
emailCode: "", |
|||
signature: "" // 签名 用来生成token |
|||
}, |
|||
|
|||
isRember: false, |
|||
|
|||
step: 1, // 默认第一步 |
|||
|
|||
ajar: { |
|||
email: "", |
|||
phone: "" |
|||
}, |
|||
|
|||
// 验证码类型 |
|||
checkType: "", |
|||
|
|||
// 验证码输入 |
|||
codeLists: [{ |
|||
type: 3, |
|||
url: require("@/assets/icon/grip-vertical.svg"), |
|||
caption: this.$t('login.googleVer', { |
|||
num: '6' |
|||
}), |
|||
title: "Authentication Code", |
|||
resend: false, |
|||
name: "googleCode", |
|||
account: "google" |
|||
}, |
|||
{ |
|||
type: 1, |
|||
url: require("@/assets/icon/chat-dots.svg"), |
|||
caption: `${this.$t('login.phoneCode', { num: 6 })}：`, |
|||
title: "Verification Code", |
|||
resend: true, |
|||
name: "smsCode", |
|||
account: "phone" |
|||
}, |
|||
{ |
|||
type: 2, |
|||
url: require("@/assets/icon/envelope.svg"), |
|||
caption: `${this.$t('login.emailCode', { num: 6 })}：`, |
|||
title: "Verification Code", |
|||
resend: true, |
|||
name: "emailCode", |
|||
account: "email" |
|||
} |
|||
], |
|||
|
|||
isFirst: { |
|||
smsCode: null, |
|||
emailCode: null |
|||
}, |
|||
|
|||
exchange: false, |
|||
|
|||
// 验证码的值 |
|||
smsCode: new Array(6), |
|||
googleCode: new Array(6), |
|||
emailCode: new Array(6), |
|||
|
|||
// 输入框事件触发时 选择性处理 跳过部分事件 |
|||
skipKeyup: null, |
|||
skipInput: null, |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
checkType(newVal, oldVal) { |
|||
// 去除初始化发送 |
|||
if (newVal == 1) { |
|||
if (this.isFirst.smsCode === null) this.isFirst.smsCode = true; |
|||
else this.isFirst.smsCode = false; |
|||
} |
|||
|
|||
if (newVal == 3) { |
|||
if (this.isFirst.emailCode === null) this.isFirst.emailCode = true; |
|||
else this.isFirst.emailCode = false; |
|||
} |
|||
|
|||
// 进入之前 每次清空输入框并自动焦点 但需要等待DOM渲染完毕 |
|||
// 可以通过nextTick注册DOM渲染完毕的回调动作 |
|||
this.$nextTick(function () { |
|||
this.reset(newVal, true); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
computed: {}, |
|||
|
|||
methods: { |
|||
touchstart() { |
|||
|
|||
}, |
|||
// 当前语言 |
|||
lang() { |
|||
// let UALang = navigator.language.includes("zh") ? "cn" : "en"; |
|||
return localStorage.getItem('lang'); |
|||
}, |
|||
|
|||
test(){ |
|||
// var query=this.$route.query; |
|||
// console.log(query) |
|||
let rqtoken =this.$route.query.autooooooo; |
|||
// let uid = this.$route.query.user_id; |
|||
let acc = this.$route.query.account |
|||
if(typeof rqtoken!='undefined'){ |
|||
// let xuser='{"user_id":'+uid+',"account":"'+acc+'"}' |
|||
// console.log("simple json:"+xuser) |
|||
this.user.account=acc; |
|||
this.user.password="HJH^*jj8f9fj38j"; |
|||
this.isLogin=true |
|||
// localStorage.setItem("auth",xuser); |
|||
//localStorage.setItem("auth",JSON.stringify(uid)); |
|||
// localStorage.setItem('token', rqtoken); |
|||
//this.$router.push("/wallet/assets/exchange"); |
|||
//location.reload(); |
|||
// this.$router.push("/wallet/assets/exchange"); |
|||
// location.reload(); |
|||
} |
|||
}, |
|||
|
|||
refreshSlider() { |
|||
// name标记的iframe返回窗口对象 |
|||
// id标记的iframe返回dom对象 需要在通过contentWindow读取 |
|||
window.frames["my-modal-body"].$captcha.sliderCaptcha("reset"); |
|||
}, |
|||
|
|||
// 将值同步到vm 并验证提交 |
|||
chkLoginSave(name, pos, value) { |
|||
this[name][pos] = value; |
|||
|
|||
// 所有框都填满时 触发提交 |
|||
if (this[name].join("").match(/^\d{6}$/)) this.step3(); |
|||
|
|||
// if (this[name].every(item => /^\d$/.test(item))) this.step3(); |
|||
}, |
|||
|
|||
autofill($event) { |
|||
let data = $event.clipboardData.getData("text/plain"), |
|||
val; |
|||
if (!data) return; |
|||
else val = _.trim(data); |
|||
if (val.match(/^\d{6}$/)) { |
|||
$event.preventDefault(); |
|||
|
|||
this.skipInput = true; |
|||
|
|||
let { |
|||
name, |
|||
inputList |
|||
} = this.type2name(); |
|||
|
|||
inputList.forEach((item, index) => { |
|||
item.value = val.charAt(index); |
|||
this.chkLoginSave(name, index, val.charAt(index)); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
type2name(checkType = null) { |
|||
let type = checkType || this.checkType; |
|||
let inputList, name; |
|||
|
|||
switch (type) { |
|||
case 1: |
|||
name = "smsCode"; |
|||
inputList = this.$refs["space-smsCode"]; |
|||
break; |
|||
case 3: |
|||
name = "googleCode"; |
|||
inputList = this.$refs["space-googleCode"]; |
|||
break; |
|||
case 2: |
|||
name = "emailCode"; |
|||
inputList = this.$refs["space-emailCode"]; |
|||
break; |
|||
} |
|||
|
|||
return { |
|||
inputList, |
|||
name |
|||
}; |
|||
}, |
|||
|
|||
reset(checkType, autoFocus = false) { |
|||
let { |
|||
inputList, |
|||
name |
|||
} = this.type2name(checkType); |
|||
|
|||
// 亲空输入框并清除vm中的值 |
|||
inputList.forEach(item => (item.value = "")); |
|||
|
|||
this[name] = new Array(6); |
|||
|
|||
// 部分场景下 需要获取焦点 |
|||
if (autoFocus) inputList[0].focus(); |
|||
}, |
|||
|
|||
handleKeyUp(name, pos, $event) { |
|||
// 监听指令 |
|||
switch ($event.code) { |
|||
case "Backspace": |
|||
if (this.skipKeyup === true) { |
|||
this.skipKeyup = false; |
|||
return; |
|||
} |
|||
|
|||
if (pos - 1 >= 0) { |
|||
this.$refs[`space-${name}`][pos - 1].value = ""; |
|||
// 删除前值 |
|||
this.$refs[`space-${name}`][pos - 1].focus(); |
|||
} |
|||
break; |
|||
|
|||
case "ArrowLeft": |
|||
// case "ArrowUp": |
|||
if (pos - 1 >= 0) { |
|||
this.$refs[`space-${name}`][pos - 1].focus(); |
|||
} |
|||
break; |
|||
// case "ArrowDown": |
|||
case "ArrowRight": |
|||
if (pos + 1 <= 5) { |
|||
this.$refs[`space-${name}`][pos + 1].focus(); |
|||
} |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
handleInput(name, pos, $event) { |
|||
if (this.skipInput == true) { |
|||
this.skipInput = false; |
|||
return; |
|||
} |
|||
|
|||
let val = $event.target.value; |
|||
|
|||
if (val) { |
|||
// 执行了输入 |
|||
|
|||
if (val.match(/^\d{1,2}$/)) { |
|||
if (val.length == 2) { |
|||
// 再次输入时 重置值 |
|||
|
|||
val = _.trim(val, this[name][pos]); |
|||
$event.target.value = val; |
|||
} |
|||
// 找到下一个空节点 |
|||
const tmpArr = Array.from(this.$refs[`space-${name}`]); |
|||
for (let item of tmpArr) { |
|||
if (!item.value) { |
|||
item.focus(); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
this.chkLoginSave(name, pos, $event.target.value); |
|||
|
|||
// 非法的值 |
|||
} else { |
|||
$event.target.value = this[name][pos] || ""; |
|||
} |
|||
} else { |
|||
// 执行了删除 第一次删除跳过keyup事件 |
|||
this.skipKeyup = true; |
|||
} |
|||
}, |
|||
|
|||
// 前端有效性验证 |
|||
step1: _.throttle(function () { |
|||
// if (utils.isMobile()) { |
|||
this.step2() |
|||
// return |
|||
// } |
|||
// if (utils.validate(".login-body")) { |
|||
// // 滑块验证框 |
|||
// $("#captcha").modal({ |
|||
// backdrop: "static" // 点击背景时不关闭动态模态框 |
|||
// // keyboard : true, // 按下esc时关闭动态视窗 |
|||
// // show : false, // 初始化不显示 |
|||
// }); |
|||
// } |
|||
}), |
|||
|
|||
// 初始化登录验证 |
|||
step2(token) { |
|||
// 关闭模态框 |
|||
// $("#captcha").modal("hide"); |
|||
|
|||
// 自动验证与自动完成 |
|||
let type = this.user.account.includes("@") ? 2 : 1; |
|||
const data = { |
|||
account: this.user.account, |
|||
password: this.user.password, |
|||
type, |
|||
token |
|||
}; |
|||
|
|||
Member.login(data) |
|||
.then(response => { |
|||
let { |
|||
google_status, |
|||
phone_status, |
|||
email_status, |
|||
signature, |
|||
phone, |
|||
email |
|||
} = response; |
|||
|
|||
this.status = response; // 全局存储开启状态 便于模板展示 |
|||
|
|||
// 检查验证码类型并初始化checkType的值 用于默认选项卡 并设置顺序 |
|||
switch (1) { |
|||
case google_status: |
|||
this.checkType = 3; // google |
|||
break; |
|||
case phone_status: |
|||
this.checkType = 1; // phone |
|||
break; |
|||
case email_status: |
|||
this.checkType = 2; // email |
|||
break; |
|||
default: |
|||
// 将用户信息存入local |
|||
localStorage.setItem("auth", JSON.stringify(response.user)); |
|||
localStorage.setItem("token", response.token); |
|||
this.$router.push("/wallet/assets/exchange"); |
|||
location.reload(); |
|||
return; |
|||
} |
|||
|
|||
// 获取登录信息 用以验证码展示 |
|||
if (type === 1) { |
|||
// 手机登录 |
|||
this.ajar.phone = phone.replace( |
|||
/^(\d{3})\d{4}(\d{4})$/, |
|||
"$1****$2" |
|||
); |
|||
} else if (type === 2) { |
|||
// 邮箱登陆 |
|||
const res = /^([\w\-\.]+)@([\w\.\-]+)$/.exec(email); |
|||
this.ajar.email = `${res[1].slice(0, 3)}${"*".repeat(5)}@${res[2]}`; |
|||
} |
|||
|
|||
// 存储验证码接口参数 |
|||
this.user.signature = signature; |
|||
|
|||
// 打开验证提示 |
|||
this.step = 3; |
|||
|
|||
// 等待dom更新 |
|||
this.$nextTick(function () { |
|||
// DOM 现在更新了 找到验证码框 初始化 |
|||
this.reset(this.checkType, true); |
|||
}); |
|||
}) |
|||
.catch(err => { }); |
|||
}, |
|||
|
|||
// 提交登陆 获取token |
|||
step3: _.throttle(function () { |
|||
let code; |
|||
switch (this.checkType) { |
|||
case 1: |
|||
code = this.smsCode.join(""); |
|||
break; |
|||
case 2: |
|||
code = this.emailCode.join(""); |
|||
break; |
|||
case 3: |
|||
code = this.googleCode.join(""); |
|||
break; |
|||
} |
|||
const data = { |
|||
code_type: this.checkType, |
|||
code, |
|||
signature: this.user.signature |
|||
}; |
|||
|
|||
Member.loginConfirm(data) |
|||
.then(response => { |
|||
console.dir(response); |
|||
|
|||
// let rqtoken =this.$route.query; |
|||
// if(typeof rqtoken!='undefined'){ |
|||
// this.isLogin=true |
|||
// localStorage.setItem('token', rqtoken); |
|||
// }else { |
|||
// 将用户信息存入local |
|||
localStorage.setItem("auth", JSON.stringify(response.user)); |
|||
localStorage.setItem("token", response.token); |
|||
// } |
|||
// 登录和退出 需要刷新页面 才能更新头部 |
|||
this.$router.push("/wallet/assets/exchange"); |
|||
location.reload(); |
|||
}) |
|||
.catch(err => { |
|||
// 操作失败 清除当前输入框 并获取焦点 |
|||
this.reset(this.checkType, true); |
|||
}); |
|||
}, 10000) |
|||
}, |
|||
|
|||
created() { }, |
|||
|
|||
mounted() { |
|||
window.md5 = md5; |
|||
// 安全性验证成功时的回调函数 |
|||
window.step2Login = this.step2; |
|||
// console.log(localStorage.lang,navigator.language.includes("zh")) |
|||
// |
|||
this.test() |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
form.login-body { |
|||
.form-group { |
|||
margin: 1rem auto; |
|||
} |
|||
|
|||
.area-phone-box { |
|||
// width: 100%; |
|||
@include flexible(); |
|||
|
|||
.area { |
|||
width: 123px; |
|||
margin-right: 3px; |
|||
} |
|||
|
|||
.phone { |
|||
width: 162px; |
|||
} |
|||
} |
|||
|
|||
// 去除搜索输入框自带的下拉图标 |
|||
input::-webkit-calendar-picker-indicator { |
|||
display: none; |
|||
-webkit-appearance: none; |
|||
} |
|||
} |
|||
|
|||
.login-type { |
|||
border-bottom: 1px solid #eee; |
|||
|
|||
.login-type__container { |
|||
@include flexible(row, flex-start, center); |
|||
|
|||
.login-type__controls { |
|||
// border: 1px solid red; |
|||
width: 88px; |
|||
height: 40px; |
|||
@include flexible(row, center, center); |
|||
cursor: pointer; |
|||
|
|||
&.active { |
|||
border-bottom: 1px solid rgba(95, 116, 160, 0.8); |
|||
color: $cls-blue; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.verify-box { |
|||
min-width: 328px; |
|||
height: 258px; |
|||
@include flexible(column, flex-start, left); |
|||
|
|||
// border : 1px solid red; |
|||
|
|||
.login-tips { |
|||
margin: 15px 0; |
|||
@include flexible(row, flex-start, center); |
|||
|
|||
img { |
|||
width: 36px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.resend-btn { |
|||
margin: 15px auto; |
|||
} |
|||
|
|||
.verify-title { |
|||
margin: 15px 0; |
|||
@include font(OpenSans-Regular, 15, inherit, $cls-blue); |
|||
} |
|||
|
|||
.code-inputs { |
|||
@include flexible(row, space-between); |
|||
|
|||
.code-items input { |
|||
width: 48px; |
|||
height: 48px; |
|||
text-align: center; |
|||
@include font(OpenSans-Regular, 22, 32, #fff); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modal-content { |
|||
// iframe 底部没有设置圆角 超出时 隐藏 |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.modal-header { |
|||
// border:1px solid red; |
|||
.modal-title { |
|||
@include fs(16); |
|||
} |
|||
|
|||
.refresh { |
|||
position: absolute; |
|||
right: 58px; |
|||
top: 18px; |
|||
} |
|||
} |
|||
|
|||
.my-modal-body { |
|||
// border : 1px solid red; |
|||
// border: none; |
|||
width: calc(100% - 2px); |
|||
height: 260px; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
</style> |
|||
@ -1,693 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="vh-100 d-flex justify-content-center"> |
|||
<div class="form-access my-auto"> |
|||
<form class="register-body bg-panel"> |
|||
<div class="text-center h3"> |
|||
<span>代理注册</span> |
|||
</div> |
|||
|
|||
<!-- Step1 --> |
|||
<template v-if="step == 1"> |
|||
<ul class="nav nav-tabs" id="myTab" role="tablist"> |
|||
<li class="nav-item" @click="registerType = 1"> |
|||
<a :class="[`nav-link`, {active : registerType == 1}]" id="email-tab" data-toggle="tab" href="#email" role="tab" aria-controls="email" :aria-selected="registerType == 1">{{$t('login.email')}}</a> |
|||
</li> |
|||
<!-- <li class="nav-item" @click="registerType = 2"> |
|||
<a :class="[`nav-link`, {active : registerType == 2}]" id="phone-tab" data-toggle="tab" href="#phone" role="tab" aria-controls="phone" :aria-selected="registerType == 2">{{$t('login.phone')}}</a> |
|||
</li> --> |
|||
</ul> |
|||
|
|||
<!-- 切换显示不同类型的账号 --> |
|||
<div class="tab-content" id="myTabContent"> |
|||
<!-- email address active为切换时的动画效果 |
|||
show为默认的控制显示 这里替换为v-if的渲染 这样email和phone只能存在一个 避免同时创建require规则时报错--> |
|||
<div class="tab-pane fade" :class="{show:registerType == 1, active:registerType == 1}" v-if="registerType==1" id="email" role="tabpanel" aria-labelledby="email-tab"> |
|||
<div class="form-group"> |
|||
<input type="text" class="form-control" placeholder="请输入代理名称" v-model="user.name"/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<input type="email" name="email" class="form-control" :placeholder="$t('login.pleaseEmail')" v-model="user.email" :data-has="$t('login.pleaseEmail')" :data-message="$t('login.invalidEmail')" /> |
|||
</div> |
|||
</div> |
|||
<!-- phone number --> |
|||
<div class="tab-pane fade" :class="{show:registerType == 2, active:registerType == 2}" v-if="registerType==2" id="phone" role="tabpanel" aria-labelledby="phone-tab"> |
|||
<div class="form-group"> |
|||
<div class="d-flex"> |
|||
<div class="mr-2"> |
|||
<el-select v-model="user.country_id" filterable :placeholder="$t('login.country')"> |
|||
<el-option v-for="(item, index) in cacheOption" :key="index" :value="`${item.id}`" :label="`+${item.country_code} ${item.name} ${item.code}`"></el-option> |
|||
</el-select> |
|||
</div> |
|||
<input type="text" name="phone" class="form-control" :placeholder="$t('login.enterMobile')" v-model="user.phone" :data-has="$t('login.enterMobile')"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group row password"> |
|||
<input type="password" v-model="user.password" required :placeholder="$t('login.password')" class="form-control" /> |
|||
<label for="password" @click="showType('pwdType')"></label> |
|||
</div> |
|||
|
|||
<div class="form-group row password"> |
|||
<!-- 使用data-type指定额外的类型验证 --> |
|||
<input type="password" v-model="user.repassword" required :data-has="$t('login.enterLengthPassword',{num1:8,num2:15})" :placeholder="$t('login.confirm-password')" class="form-control" /> |
|||
<label @click="showType('repwdType')"></label> |
|||
</div> |
|||
|
|||
<div class="form-group row"> |
|||
<input type="text" class="form-control" v-model="user.parentCode" placeholder="邀请码（必填）" /> |
|||
</div> |
|||
<div class="form-group row"> |
|||
<input type="text" class="form-control" v-model="user.subscribe_rebate_rate" placeholder="申购返佣比率（请填0-1之间的数字）" /> |
|||
</div> |
|||
<div class="form-group row"> |
|||
<input type="text" class="form-control" v-model="user.contract_rebate_rate" placeholder="合约返佣比率（请填0-1之间的数字）" /> |
|||
</div> |
|||
<div class="form-group row"> |
|||
<input type="text" class="form-control" v-model="user.option_rebate_rate" placeholder="期权返佣比率（请填0-1之间的数字）" /> |
|||
</div> |
|||
|
|||
<div class="custom-control custom-checkbox"> |
|||
<input type="checkbox" class="custom-control-input" id="form-checkbox" v-model="isAgree" /> |
|||
<label class="custom-control-label" for="form-checkbox"> |
|||
{{$t('login.iSee')}} |
|||
<a href="#!">{{$t('login.terms')}}</a> |
|||
</label> |
|||
</div> |
|||
|
|||
<button type="submit" class="btn btn-primary rounded-pill" @click.prevent.stop="step1">{{$t('login.reg')}}</button> |
|||
</template> |
|||
|
|||
<!-- Step3 --> |
|||
<template v-if="step == 3"> |
|||
<div v-if="registerType === 1" class="verify-code"> |
|||
<div class="form-text text-muted"> |
|||
{{$t('login.enterEmailCode',{email:ajar.email,num:6})}} |
|||
<br /> |
|||
{{$t('login.accountActivated')}}， |
|||
<a href @click.prevent="step = 1;">{{$t('login.backOld')}}</a>。 |
|||
</div> |
|||
<section class="my-codes"> |
|||
<header class="my-codes__title">{{$t('login.verCode')}}</header> |
|||
<div class="my-codes__controls"> |
|||
<input type="text" v-for="pos in 6" :key="pos" pattern="[0-9]*" @focus="current=pos" @blur="current=-1" ref="spaces" class="form-control" @keyup="handleKeyUp(pos-1, $event)" @input="handleInput(pos-1, $event)" @paste="autofill" /> |
|||
</div> |
|||
</section> |
|||
<aside class="prompt"> |
|||
<header class="prompt__no-recieved">{{$t('login.notEmail')}}：</header> |
|||
<ul class="prompt__inner"> |
|||
<li>· {{$t('login.confirmEmail')}}。</li> |
|||
<li>· {{$t('login.confing')}}。</li> |
|||
<li>· {{$t('login.checkTrashCan')}}。</li> |
|||
</ul> |
|||
</aside> |
|||
</div> |
|||
|
|||
<div v-if="registerType === 2" class="verify-code"> |
|||
<div class="form-text text-muted"> |
|||
{{$t('login.enterPhone1')}} ( |
|||
<b>{{ ajar.phone }}</b> |
|||
) {{$t('login.enterPhone2',{num:6})}} |
|||
<br /> |
|||
{{$t('login.accountActivated')}}， |
|||
<a href @click.prevent="step = 1;">{{$t('login.backOld')}}</a>。 |
|||
</div> |
|||
<section class="my-codes"> |
|||
<header class="my-codes__title">Code</header> |
|||
<div class="my-codes__controls"> |
|||
<input type="text" v-for="pos in 6" :key="pos" pattern="[0-9]*" @focus="current=pos" @blur="current=-1" ref="spaces" class="form-control" @keyup="handleKeyUp(pos-1, $event)" @input="handleInput(pos-1, $event)" @paste="autofill" /> |
|||
</div> |
|||
</section> |
|||
<aside class="prompt"> |
|||
<header class="prompt__no-recieved">{{$t('login.smsNotReceived')}}：</header> |
|||
<ul class="prompt__inner"> |
|||
<li>· {{$t('login.phoneCorrect')}}。</li> |
|||
<li>· {{$t('login.securePhone')}}。</li> |
|||
</ul> |
|||
</aside> |
|||
</div> |
|||
</template> |
|||
</form> |
|||
<!-- <h2> |
|||
{{$t('login.hasAccount')}}? |
|||
<router-link to="sign-in">{{$t('login.toLogin')}}</router-link> |
|||
</h2> --> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Step2 滑块验证码Modal弹框 使用javascript控制--> |
|||
<div class="modal fade" id="captcha" tabindex="-1" role="dialog" aria-hidden="true"> |
|||
<div class="modal-dialog modal-dialog-centered modal-sm" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title">{{$t('login.safety')}}</h5> |
|||
<!-- 自定义刷新验证码按钮 --> |
|||
<a href class="refresh" @click.prevent="refreshSlider"> |
|||
<img src="@/assets/img/icon-refresh.svg" alt /> |
|||
</a> |
|||
<!-- 模态原生支持的关闭按钮 --> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<img src="@/assets/img/icon-close.svg" alt /> |
|||
<!-- × 自带图标 --> |
|||
</button> |
|||
</div> |
|||
<!-- <div class="modal-body"> |
|||
... |
|||
</div>--> |
|||
<iframe name="my-modal-body" class="my-modal-body" :src="`/static/SliderCaptcha/src/index.html?`+ encodeURIComponent(`nextStep=step2Register&slider_type=register&account=${account}&lang=${lang}`)" frameborder="0"></iframe> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import md5 from "md5"; |
|||
import Member from "@/api/member"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
pwdType: "password", |
|||
repwdType: "password", |
|||
|
|||
step: 1, |
|||
cacheRegisterType: null, // 注册类型中间值 |
|||
|
|||
user: { |
|||
name: "", |
|||
email: "", |
|||
password: "", |
|||
repassword: "", |
|||
country_id: "", // 区号id |
|||
phone: "", |
|||
parentCode: "", |
|||
subscribe_rebate_rate:'', |
|||
contract_rebate_rate:'', |
|||
option_rebate_rate:'' |
|||
}, |
|||
|
|||
isAgree: false, |
|||
|
|||
options: [], // 原始数据 |
|||
cacheOption: [], |
|||
storeOption: null, // 存储的有效options |
|||
storeTel: null, // 存储的tel |
|||
|
|||
valueTel: "", |
|||
valueTelPhone: "", |
|||
showBox: false, //滑动弹窗 |
|||
|
|||
ajar: { |
|||
email: "", |
|||
phone: "" |
|||
}, |
|||
skipKeyup: null, |
|||
skipInput: null, |
|||
isFirst: { |
|||
smsCode: null, |
|||
emailCode: null |
|||
}, |
|||
|
|||
codes: new Array(6) |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
// 当前语言 |
|||
lang() { |
|||
let UALang = navigator.language.includes("zh") ? "cn" : "en"; |
|||
return localStorage.lang || UALang; |
|||
}, |
|||
|
|||
// 根据语言切换注册的类型 2为手机 1为邮箱 |
|||
registerType: { |
|||
get() { |
|||
return 1 |
|||
}, |
|||
|
|||
set(val) { |
|||
// 缓存注册类型值 |
|||
this.cacheRegisterType = val; |
|||
} |
|||
}, |
|||
|
|||
// |
|||
account() { |
|||
return this.registerType === 2 ? this.user.phone : this.user.email; |
|||
}, |
|||
// 当前选中的区号 |
|||
country() { |
|||
return ( |
|||
this.cacheOption.find(item => item.id == this.user.country_id) || {} |
|||
); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
showType(type) { |
|||
this[type] = this[type] == "text" ? "password" : "text"; |
|||
}, |
|||
|
|||
step1: _.throttle(function () { |
|||
|
|||
if (utils.validate(".register-body")) { |
|||
if (this.user.password !== this.user.repassword) { |
|||
this.$message( |
|||
{ |
|||
type: "error", |
|||
message: this.$t('login.confirmpassword') + "！" |
|||
}, |
|||
1000 |
|||
); |
|||
return |
|||
} |
|||
// 其他补充的验证 |
|||
if (!this.isAgree) { |
|||
// 没有同意条款 |
|||
this.$message( |
|||
{ |
|||
type: "warning", |
|||
message: this.$t("login.disagree") + "！" |
|||
}, |
|||
1000 |
|||
); |
|||
return; |
|||
} |
|||
|
|||
// 滑块安全性验证 |
|||
// if (this.user.parentCode) { |
|||
// // this.chkRefer(this.user.parentCode, () => { |
|||
// // this.showBox = true; |
|||
// // }); |
|||
// } else { |
|||
// 调用模态框 |
|||
// if (utils.isMobile()) { |
|||
this.step2(); |
|||
// return; |
|||
// } |
|||
// $("#captcha").modal({ |
|||
// backdrop: "static" // 点击背景时不关闭动态模态框 |
|||
// // keyboard : true, // 按下esc时关闭动态视窗 |
|||
// // show : false, // 初始化不显示 |
|||
// }); |
|||
// } |
|||
} |
|||
}, 1000), |
|||
|
|||
step2(token) { |
|||
if(!this.user.name){ |
|||
this.$message.error('请输入代理名称'); |
|||
return |
|||
} |
|||
if(!this.user.parentCode){ |
|||
this.$message.error('请输入邀请码'); |
|||
return |
|||
} |
|||
switch ( |
|||
this.registerType // 发送邮箱验证码 |
|||
) { |
|||
case 1: |
|||
Member.sendEmailCode({ |
|||
email: this.user.email, |
|||
token |
|||
}) |
|||
.then(data => { |
|||
// console.log(data) |
|||
const res = /^([\w\-\.]+)@([\w\.\-]+)$/.exec(this.user.email); |
|||
this.ajar.email = `${res[1].slice(0, 3)}${"*".repeat(5)}@${res[2] |
|||
}`; |
|||
this.step = 3; |
|||
// 自动第一个焦点 |
|||
this.$nextTick(function () { |
|||
// DOM 现在更新了 |
|||
this.$refs.spaces[0].focus(); |
|||
}); |
|||
}) |
|||
.catch(err => { }); |
|||
break; |
|||
case 2: // 发送手机验证码 |
|||
Member.sendSmsCode({ |
|||
phone: this.user.phone, |
|||
country_code: this.country.country_code, // 国际电话应该前缀00 |
|||
token |
|||
}) |
|||
.then(data => { |
|||
this.ajar.phone = this.user.phone.replace( |
|||
/^(\d{3})\d{4}(\d{4})$/, |
|||
"$1****$2" |
|||
); |
|||
this.step = 3; |
|||
// 自动第一个焦点 |
|||
this.$nextTick(function () { |
|||
// DOM 现在更新了 |
|||
this.$refs.spaces[0].focus(); |
|||
}); |
|||
}) |
|||
.catch(err => { }); |
|||
break; |
|||
|
|||
default: |
|||
break; |
|||
} |
|||
// 关闭模态框 |
|||
$("#captcha").modal("hide"); |
|||
}, |
|||
|
|||
refreshSlider() { |
|||
// name标记的iframe返回窗口对象 |
|||
// id标记的iframe返回dom对象 需要在通过contentWindow读取 |
|||
window.frames["my-modal-body"].$captcha.sliderCaptcha("reset"); |
|||
}, |
|||
|
|||
autofill($event) { |
|||
let data = $event.clipboardData.getData("text/plain"), |
|||
val; |
|||
if (!data) return; |
|||
else val = _.trim(data); |
|||
if (val.match(/^\d{6}$/)) { |
|||
$event.preventDefault(); |
|||
this.skipInput = true; |
|||
|
|||
this.$refs.spaces.forEach((item, index) => { |
|||
item.value = val.charAt(index); |
|||
this.chkLoginSave(index, val.charAt(index)); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
reset(checkType) { |
|||
// 清空输入框的值 |
|||
Array.from(this.$refs.spaces).forEach(item => (item.value = "")); |
|||
// 清除存储的值 |
|||
this.codes = new Array(6); |
|||
// 自动获取焦点 |
|||
this.$refs.spaces[0].focus(); |
|||
}, |
|||
|
|||
handleKeyUp(pos, $event) { |
|||
// 监听删除动作 |
|||
switch ($event.code) { |
|||
case "Backspace": |
|||
if (this.skipKeyup === true) { |
|||
this.skipKeyup = false; |
|||
return; |
|||
} |
|||
if (pos - 1 >= 0) { |
|||
// 删除前值 |
|||
|
|||
this.$refs.spaces[pos - 1].value = ""; |
|||
|
|||
this.$refs.spaces[pos - 1].focus(); |
|||
} |
|||
break; |
|||
|
|||
case "ArrowLeft": |
|||
// case "ArrowUp": |
|||
if (pos - 1 >= 0) { |
|||
this.$refs.spaces[pos - 1].focus(); |
|||
} |
|||
break; |
|||
// case "ArrowDown": |
|||
case "ArrowRight": |
|||
if (pos + 1 <= 5) { |
|||
this.$refs.spaces[pos + 1].focus(); |
|||
} |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
// 将值同步到vm 并验证提交 |
|||
chkLoginSave(pos, value) { |
|||
this.codes[pos] = value; |
|||
|
|||
// 所有框都填满时 触发提交 |
|||
if (this.codes.join("").match(/^\d{6}$/)) this.step3(); |
|||
|
|||
// if (this[name].every(item => /^\d$/.test(item))) this.step3(); |
|||
}, |
|||
|
|||
handleInput(pos, $event) { |
|||
if (this.skipInput == true) { |
|||
this.skipInput = false; |
|||
return; |
|||
} |
|||
|
|||
let val = $event.target.value; |
|||
|
|||
if (val) { |
|||
// 执行了输入 |
|||
// 合法的值 |
|||
if (val.match(/^\d{1,2}$/)) { |
|||
if (val.length == 2) { |
|||
// 再次输入时 重置值 |
|||
|
|||
val = _.trim(val, this.codes[pos]); |
|||
$event.target.value = val; |
|||
} |
|||
// 找到下一个空节点 |
|||
const tmpArr = Array.from(this.$refs.spaces); |
|||
for (let item of tmpArr) { |
|||
if (!item.value) { |
|||
item.focus(); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
this.chkLoginSave(pos, $event.target.value); |
|||
|
|||
// 非法的值 |
|||
} else { |
|||
$event.target.value = this.codes[pos] || ""; |
|||
} |
|||
} else { |
|||
// 执行了删除 第一次删除跳过keyup事件 |
|||
this.skipKeyup = true; |
|||
} |
|||
}, |
|||
|
|||
step3() { |
|||
// 基础参数 |
|||
const base = { |
|||
email: this.user.email, |
|||
name:this.user.name, |
|||
code: this.codes.join(""), |
|||
password:this.user.password, |
|||
password_confirmation:this.user.repassword, |
|||
invite_code:this.user.parentCode, |
|||
subscribe_rebate_rate:this.user.subscribe_rebate_rate, |
|||
contract_rebate_rate:this.user.contract_rebate_rate, |
|||
option_rebate_rate:this.user.option_rebate_rate |
|||
}; |
|||
|
|||
// 分离参数 |
|||
let data = {}; |
|||
switch (this.registerType) { |
|||
case 2: // 手机 |
|||
data.type = `1`; |
|||
data.country_id = this.user.country_id; |
|||
data.account = this.user.phone; |
|||
data.country_code = this.country.country_code; |
|||
break; |
|||
case 1: |
|||
data.type = `2`; |
|||
data.account = this.user.email; |
|||
break; |
|||
|
|||
default: |
|||
break; |
|||
} |
|||
// Member.agent({ |
|||
// email: this.user.email, |
|||
// name:this.user.name, |
|||
// code: this.codes.join(""), |
|||
// password:this.user.password, |
|||
// password_confirmation:this.user.repassword, |
|||
// invite_code:this.user.parentCode, |
|||
// subscribe_rebate_rate:0.8, |
|||
// contract_rebate_rate:0.8, |
|||
// option_rebate_rate:0.8 |
|||
// }) |
|||
// .then(data => { |
|||
// this.$message.success('success'); |
|||
// }) |
|||
// .catch(err => { |
|||
// this.step=1 |
|||
// }); |
|||
// 服务端真实性验证 |
|||
Member.agent(Object.assign(base, data)) |
|||
.then(response => { |
|||
this.$message({ |
|||
type: "success", |
|||
message: 'success', |
|||
duration: 2000, |
|||
onClose: () => { |
|||
// 注册完成 进入登录页 |
|||
this.step=1 |
|||
this.user.name='' |
|||
this.user.email='' |
|||
this.user.password='' |
|||
this.user.repassword='' |
|||
this.user.parentCode='' |
|||
} |
|||
}); |
|||
}) |
|||
.catch(err => { |
|||
this.step=1 |
|||
this.reset(this.registerType); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
Member.getCountryCode() |
|||
.then(data => { |
|||
this.cacheOption = data; |
|||
}) |
|||
.catch(err => { }); |
|||
if (this.$route.query.invite_code) { |
|||
this.user.parentCode = this.$route.query.invite_code; |
|||
if (document.body.clientWidth < 750) { |
|||
window.location.href = this.Globals.mobileUrl + '/#/pages/reg/index?invite_code=' + this.$route.query.invite_code |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// |
|||
window.md5 = md5; |
|||
// 安全性验证成功时的回调函数 |
|||
window.step2Register = this.step2; |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/base/_common.scss'; |
|||
form.register-body { |
|||
.form-group { |
|||
margin: 1rem auto; |
|||
} |
|||
|
|||
.password { |
|||
label { |
|||
width: 2em; |
|||
height: 2em; |
|||
// border: 1px solid red; |
|||
display: inline-block; |
|||
content: ""; |
|||
background: url("../../assets/img/eyed.svg") no-repeat center center; |
|||
// background-repeat: no-repeat; |
|||
background-size: 1rem 1rem; |
|||
position: absolute; |
|||
right: 1em; |
|||
top: calc(50% - 1em); |
|||
cursor: pointer; |
|||
opacity: 0.5; |
|||
} |
|||
position: relative; |
|||
} |
|||
|
|||
.area-phone-box { |
|||
// width: 100%; |
|||
@include flexible(); |
|||
|
|||
.area { |
|||
width: 123px; |
|||
margin-right: 3px; |
|||
} |
|||
|
|||
.phone { |
|||
width: 162px; |
|||
} |
|||
} |
|||
|
|||
// 去除搜索输入框自带的下拉图标 |
|||
input::-webkit-calendar-picker-indicator { |
|||
display: none; |
|||
-webkit-appearance: none; |
|||
} |
|||
} |
|||
|
|||
div.verify-code { |
|||
// min-width: 375px; |
|||
flex-basis: 400px; |
|||
@include flexible(column); |
|||
|
|||
.my-codes { |
|||
width: 100%; |
|||
height: 138px; |
|||
@include flexible(column, center, flex-start); |
|||
|
|||
// border: 1px solid red; |
|||
.my-codes__title { |
|||
color: #007bff; |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.my-codes__controls { |
|||
width: 100%; |
|||
@include flexible(row, space-between, center); |
|||
|
|||
.form-control { |
|||
width: 48px; |
|||
height: 48px; |
|||
text-align: center; |
|||
@include font(OpenSans-Regular, 22, 32, #000000); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-text { |
|||
@extend .break-word; |
|||
} |
|||
|
|||
.prompt { |
|||
.prompt__no-recieved { |
|||
@include font(Overpass-Regular, 13, 30, #555); |
|||
} |
|||
|
|||
.prompt__inner { |
|||
@include font(Overpass-Regular, 12, 20, #666); |
|||
@extend .form-text; |
|||
@extend .text-muted; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modal-content { |
|||
// iframe 底部没有设置圆角 超出时 隐藏 |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.modal-header { |
|||
// border:1px solid red; |
|||
.modal-title { |
|||
@include fs(16); |
|||
} |
|||
|
|||
.refresh { |
|||
position: absolute; |
|||
right: 58px; |
|||
top: 18px; |
|||
} |
|||
} |
|||
|
|||
.my-modal-body { |
|||
// border : 1px solid red; |
|||
// border: none; |
|||
width: calc(100% - 2px); |
|||
height: 260px; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.form-control:disabled, .form-control[disabled]{ |
|||
background-color: #1e2834; |
|||
} |
|||
.form-control:disabled, .form-control[readonly]{ |
|||
background-color: #1e2834; |
|||
} |
|||
</style> |
|||
@ -1,734 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="vh-100 d-flex justify-content-center"> |
|||
<div class="form-access my-auto"> |
|||
<form class="register-body"> |
|||
<div class="text-center h3"> |
|||
<span>{{$t('login.goRegister')}}</span> |
|||
</div> |
|||
|
|||
<!-- Step1 --> |
|||
<template v-if="step == 1"> |
|||
<ul class="nav nav-tabs" id="myTab" role="tablist"> |
|||
<li class="nav-item" @click="registerType = 1"> |
|||
<a :class="[`nav-link`, {active : registerType == 1}]" id="email-tab" data-toggle="tab" href="#email" role="tab" aria-controls="email" :aria-selected="registerType == 1">{{$t('login.email')}}</a> |
|||
</li> |
|||
<!-- <li class="nav-item" @click="registerType = 2"> |
|||
<a :class="[`nav-link`, {active : registerType == 2}]" id="phone-tab" data-toggle="tab" href="#phone" role="tab" aria-controls="phone" :aria-selected="registerType == 2">{{$t('login.phone')}}</a> |
|||
</li> --> |
|||
</ul> |
|||
|
|||
<!-- 切换显示不同类型的账号 --> |
|||
<div class="tab-content" id="myTabContent"> |
|||
<!-- email address active为切换时的动画效果 |
|||
show为默认的控制显示 这里替换为v-if的渲染 这样email和phone只能存在一个 避免同时创建require规则时报错--> |
|||
<div class="tab-pane fade" :class="{show:registerType == 1, active:registerType == 1}" v-if="registerType==1" id="email" role="tabpanel" aria-labelledby="email-tab"> |
|||
<div class="form-group"> |
|||
<input type="email" name="email" class="form-control" :placeholder="$t('login.pleaseEmail')" v-model="user.email" :data-has="$t('login.pleaseEmail')" :data-message="$t('login.invalidEmail')" /> |
|||
</div> |
|||
</div> |
|||
<!-- phone number --> |
|||
<div class="tab-pane fade" :class="{show:registerType == 2, active:registerType == 2}" v-if="registerType==2" id="phone" role="tabpanel" aria-labelledby="phone-tab"> |
|||
<div class="form-group"> |
|||
<div class="d-flex"> |
|||
<div class="mr-2"> |
|||
<el-select v-model="user.country_id" filterable :placeholder="$t('login.country')"> |
|||
<el-option v-for="(item, index) in cacheOption" :key="index" :value="`${item.id}`" :label="`+${item.country_code} ${item.name} ${item.code}`"></el-option> |
|||
</el-select> |
|||
</div> |
|||
<input type="text" name="phone" class="form-control" :placeholder="$t('login.enterMobile')" v-model="user.phone" :data-has="$t('login.enterMobile')"/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group row password"> |
|||
<input :type="pwdType" id="password" v-model="user.password" required :placeholder="$t('login.password')" class="form-control" /> |
|||
<label for="password" @click="showType('pwdType')"></label> |
|||
</div> |
|||
|
|||
<div class="form-group row password"> |
|||
<!-- 使用data-type指定额外的类型验证 --> |
|||
<input :type="repwdType" id="repassword" v-model="user.repassword" required :placeholder="$t('login.confirm-password')" class="form-control" /> |
|||
<label @click="showType('repwdType')"></label> |
|||
</div> |
|||
|
|||
<div class="form-group row password"> |
|||
<!-- 增加图形验证码 --> |
|||
<input :type="txtType" id="gccode" v-model="user.gc_code" required :placeholder="$t('homeNewText.ee6')" class="form-control col-6" /> |
|||
<!-- <img class="col-6" :src="Graph_che" @click="gett_gc_code"> --> |
|||
<img class="" style="flex:0 0 50%;max-width: 50%;" :src="Graph_che" @click="gett_gc_code"> |
|||
</div> |
|||
|
|||
<div class="form-group row"> |
|||
<input type="text" class="form-control" :disabled="$route.query.invite_code?true:false" v-model="user.parentCode" :placeholder="`${$t('login.c6')}`" /> |
|||
<!-- （${$t('login.optional')}） --> |
|||
</div> |
|||
|
|||
<div class="custom-control custom-checkbox"> |
|||
<input type="checkbox" class="custom-control-input" id="form-checkbox" v-model="isAgree" /> |
|||
<label class="custom-control-label" for="form-checkbox"> |
|||
{{$t('login.iSee')}} |
|||
<router-link to="service/10"> |
|||
<a>{{$t('login.terms')}}</a> |
|||
</router-link> |
|||
</label> |
|||
</div> |
|||
|
|||
<button type="submit" class="btn btn-primary rounded-pill theme-bg-color-a" style="background-image: none;" @click.prevent.stop="step1">{{$t('login.reg')}}</button> |
|||
</template> |
|||
|
|||
<!-- Step3 --> |
|||
<template v-if="step == 3"> |
|||
<div v-if="registerType === 1" class="verify-code"> |
|||
<div class="form-text text-muted"> |
|||
{{$t('login.enterEmailCode',{email:ajar.email,num:6})}} |
|||
<br /> |
|||
{{$t('login.accountActivated')}}， |
|||
<a href @click.prevent="step = 1;">{{$t('login.backOld')}}</a>。 |
|||
</div> |
|||
<section class="my-codes"> |
|||
<header class="my-codes__title">{{$t('login.verCode')}}</header> |
|||
<div class="my-codes__controls"> |
|||
<input type="text" v-for="pos in 6" :key="pos" pattern="[0-9]*" @focus="current=pos" @blur="current=-1" ref="spaces" class="form-control" @keyup="handleKeyUp(pos-1, $event)" @input="handleInput(pos-1, $event)" @paste="autofill" /> |
|||
</div> |
|||
</section> |
|||
<aside class="prompt"> |
|||
<header class="prompt__no-recieved">{{$t('login.notEmail')}}：</header> |
|||
<ul class="prompt__inner"> |
|||
<li>· {{$t('login.confirmEmail')}}。</li> |
|||
<li>· {{$t('login.confing')}}。</li> |
|||
<li>· {{$t('login.checkTrashCan')}}。</li> |
|||
</ul> |
|||
</aside> |
|||
</div> |
|||
|
|||
<div v-if="registerType === 2" class="verify-code"> |
|||
<div class="form-text text-muted"> |
|||
{{$t('login.enterPhone1')}} ( |
|||
<b>{{ ajar.phone }}</b> |
|||
) {{$t('login.enterPhone2',{num:6})}} |
|||
<br /> |
|||
{{$t('login.accountActivated')}}， |
|||
<a href @click.prevent="step = 1;">{{$t('login.backOld')}}</a>。 |
|||
</div> |
|||
<section class="my-codes"> |
|||
<header class="my-codes__title">Code</header> |
|||
<div class="my-codes__controls"> |
|||
<input type="text" v-for="pos in 6" :key="pos" pattern="[0-9]*" @focus="current=pos" @blur="current=-1" ref="spaces" class="form-control" @keyup="handleKeyUp(pos-1, $event)" @input="handleInput(pos-1, $event)" @paste="autofill" /> |
|||
</div> |
|||
</section> |
|||
<aside class="prompt"> |
|||
<header class="prompt__no-recieved">{{$t('login.smsNotReceived')}}：</header> |
|||
<ul class="prompt__inner"> |
|||
<li>· {{$t('login.phoneCorrect')}}。</li> |
|||
<li>· {{$t('login.securePhone')}}。</li> |
|||
</ul> |
|||
</aside> |
|||
</div> |
|||
</template> |
|||
</form> |
|||
<h2> |
|||
{{$t('login.hasAccount')}}? |
|||
<router-link to="sign-in">{{$t('login.toLogin')}}</router-link> |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Step2 滑块验证码Modal弹框 使用javascript控制--> |
|||
<div class="modal fade" id="captcha" tabindex="-1" role="dialog" aria-hidden="true"> |
|||
<div class="modal-dialog modal-dialog-centered modal-sm" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title">{{$t('login.safety')}}</h5> |
|||
<!-- 自定义刷新验证码按钮 --> |
|||
<a href class="refresh" @click.prevent="refreshSlider"> |
|||
<img src="@/assets/img/icon-refresh.svg" alt /> |
|||
</a> |
|||
<!-- 模态原生支持的关闭按钮 --> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<img src="@/assets/img/icon-close.svg" alt /> |
|||
<!-- × 自带图标 --> |
|||
</button> |
|||
</div> |
|||
<!-- <div class="modal-body"> |
|||
... |
|||
</div>--> |
|||
<iframe name="my-modal-body" class="my-modal-body" :src="`/static/SliderCaptcha/src/index.html?`+ encodeURIComponent(`nextStep=step2Register&slider_type=register&account=${account}&lang=${lang}`)" frameborder="0"></iframe> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import md5 from "md5"; |
|||
import Member from "@/api/member"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
current: 0, |
|||
pwdType: "password", |
|||
repwdType: "password", |
|||
txtType:"text", |
|||
|
|||
step: 1, |
|||
registerType:1, |
|||
cacheRegisterType: null, // 注册类型中间值 |
|||
|
|||
user: { |
|||
name: "", |
|||
email: "", |
|||
password: "", |
|||
repassword: "", |
|||
country_id: "", // 区号id |
|||
phone: "", |
|||
parentCode: "", |
|||
gc_code: "" |
|||
}, |
|||
|
|||
isAgree: false, |
|||
|
|||
options: [], // 原始数据 |
|||
cacheOption: [], |
|||
storeOption: null, // 存储的有效options |
|||
storeTel: null, // 存储的tel |
|||
|
|||
valueTel: "", |
|||
valueTelPhone: "", |
|||
showBox: false, //滑动弹窗 |
|||
|
|||
ajar: { |
|||
email: "", |
|||
phone: "" |
|||
}, |
|||
skipKeyup: null, |
|||
skipInput: null, |
|||
isFirst: { |
|||
smsCode: null, |
|||
emailCode: null |
|||
}, |
|||
Graph_che:'', // gc code image |
|||
gc_key:'', // tuxiangyanzheng key |
|||
codes: new Array(6) |
|||
}; |
|||
}, |
|||
|
|||
computed: { |
|||
// 当前语言 |
|||
lang() { |
|||
let UALang = navigator.language.includes("zh") ? "cn" : "en"; |
|||
return localStorage.lang || UALang; |
|||
}, |
|||
|
|||
// 根据语言切换注册的类型 2为手机 1为邮箱 |
|||
registerType: { |
|||
get() { |
|||
if (this.cacheRegisterType) return this.cacheRegisterType; |
|||
else return this.lang == "cn" ? 2 : 1; |
|||
}, |
|||
|
|||
set(val) { |
|||
// 缓存注册类型值 |
|||
this.cacheRegisterType = val; |
|||
} |
|||
}, |
|||
|
|||
// |
|||
account() { |
|||
return this.registerType === 2 ? this.user.phone : this.user.email; |
|||
}, |
|||
// 当前选中的区号 |
|||
country() { |
|||
return ( |
|||
this.cacheOption.find(item => item.id == this.user.country_id) || {} |
|||
); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
showType(type) { |
|||
this[type] = this[type] == "text" ? "password" : "text"; |
|||
}, |
|||
|
|||
step1: _.throttle(function () { |
|||
|
|||
if (utils.validate(".register-body")) { |
|||
if (this.user.password !== this.user.repassword) { |
|||
this.$message( |
|||
{ |
|||
type: "error", |
|||
message: this.$t('login.confirmpassword') + "！" |
|||
}, |
|||
1000 |
|||
); |
|||
return |
|||
} |
|||
// check gc code has fill |
|||
if(this.Graph_che==''){ |
|||
this.$message({ |
|||
type:"warning", |
|||
message:"input gc code pls.", |
|||
}) |
|||
} |
|||
// 其他补充的验证 |
|||
if (!this.isAgree) { |
|||
// 没有同意条款 |
|||
this.$message( |
|||
{ |
|||
type: "warning", |
|||
message: this.$t("login.disagree") + "！" |
|||
}, |
|||
1000 |
|||
); |
|||
return; |
|||
} |
|||
if (this.user.parentCode=="") { |
|||
// 没有填写推荐人/邀请码 |
|||
this.$message( |
|||
{ |
|||
type: "warning", |
|||
message: this.$t("login.c7") + "！" |
|||
}, |
|||
1000 |
|||
); |
|||
return; |
|||
} |
|||
|
|||
// 滑块安全性验证 |
|||
// if (this.user.parentCode) { |
|||
// // this.chkRefer(this.user.parentCode, () => { |
|||
// // this.showBox = true; |
|||
// // }); |
|||
// } else { |
|||
// 调用模态框 |
|||
// if (utils.isMobile()) { |
|||
this.step2(); |
|||
// return; |
|||
// } |
|||
// $("#captcha").modal({ |
|||
// backdrop: "static" // 点击背景时不关闭动态模态框 |
|||
// // keyboard : true, // 按下esc时关闭动态视窗 |
|||
// // show : false, // 初始化不显示 |
|||
// }); |
|||
// } |
|||
} |
|||
}, 1000), |
|||
|
|||
step2(token) { |
|||
switch ( |
|||
this.registerType // 发送邮箱验证码 |
|||
) { |
|||
case 1: |
|||
// console.log(token); |
|||
Member.sendEmailCode({ |
|||
email: this.user.email, |
|||
gc_code: this.user.gc_code, |
|||
gc_key: this.gc_key, |
|||
token |
|||
}).then(data => { |
|||
// console.log(res,1111); |
|||
sessionStorage.removeItem("COde"); |
|||
const res = /^([\w\-\.]+)@([\w\.\-]+)$/.exec(this.user.email); |
|||
this.ajar.email = `${res[1].slice(0, 3)}${"*".repeat(5)}@${res[2] |
|||
}`; |
|||
this.step = 3; |
|||
// 自动第一个焦点 |
|||
this.$nextTick(function () { |
|||
// DOM 现在更新了 |
|||
this.$refs.spaces[0].focus(); |
|||
}); |
|||
}) |
|||
.catch(err => { |
|||
const Code = sessionStorage.getItem('COde') |
|||
if(Code==4001){ |
|||
setTimeout(()=>{ |
|||
this.gett_gc_code() |
|||
},1000) |
|||
} |
|||
}); |
|||
break; |
|||
|
|||
case 2: // 发送手机验证码 |
|||
Member.sendSmsCode({ |
|||
phone: this.user.phone, |
|||
country_code: this.country.country_code, // 国际电话应该前缀00 |
|||
token |
|||
}) |
|||
.then(data => { |
|||
this.ajar.phone = this.user.phone.replace( |
|||
/^(\d{3})\d{4}(\d{4})$/, |
|||
"$1****$2" |
|||
); |
|||
this.step = 3; |
|||
// 自动第一个焦点 |
|||
this.$nextTick(function () { |
|||
// DOM 现在更新了 |
|||
this.$refs.spaces[0].focus(); |
|||
}); |
|||
}) |
|||
.catch(err => { }); |
|||
break; |
|||
|
|||
default: |
|||
break; |
|||
} |
|||
// 关闭模态框 |
|||
$("#captcha").modal("hide"); |
|||
}, |
|||
|
|||
refreshSlider() { |
|||
// name标记的iframe返回窗口对象 |
|||
// id标记的iframe返回dom对象 需要在通过contentWindow读取 |
|||
window.frames["my-modal-body"].$captcha.sliderCaptcha("reset"); |
|||
}, |
|||
|
|||
// get gc code from api |
|||
gett_gc_code(){ |
|||
// console.log("dddddd") |
|||
Member.sendGCode().then( (res) =>{ |
|||
this.gc_key = res.key |
|||
this.Graph_che = res.img |
|||
// console.log(this.gc_key); |
|||
// console.log("gc",res) |
|||
this.$message({ |
|||
message: `${type} ${this.$t("login.sendOK")}`, |
|||
type: "success", |
|||
duration : 2000, |
|||
}); |
|||
}).catch( err =>{ |
|||
console.log(err) |
|||
}); |
|||
}, |
|||
|
|||
autofill($event) { |
|||
let data = $event.clipboardData.getData("text/plain"), |
|||
val; |
|||
if (!data) return; |
|||
else val = _.trim(data); |
|||
if (val.match(/^\d{6}$/)) { |
|||
$event.preventDefault(); |
|||
this.skipInput = true; |
|||
|
|||
this.$refs.spaces.forEach((item, index) => { |
|||
item.value = val.charAt(index); |
|||
this.chkLoginSave(index, val.charAt(index)); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
reset(checkType) { |
|||
// 清空输入框的值 |
|||
Array.from(this.$refs.spaces).forEach(item => (item.value = "")); |
|||
// 清除存储的值 |
|||
this.codes = new Array(6); |
|||
// 自动获取焦点 |
|||
this.$refs.spaces[0].focus(); |
|||
}, |
|||
|
|||
handleKeyUp(pos, $event) { |
|||
// 监听删除动作 |
|||
switch ($event.code) { |
|||
case "Backspace": |
|||
if (this.skipKeyup === true) { |
|||
this.skipKeyup = false; |
|||
return; |
|||
} |
|||
if (pos - 1 >= 0) { |
|||
// 删除前值 |
|||
|
|||
this.$refs.spaces[pos - 1].value = ""; |
|||
|
|||
this.$refs.spaces[pos - 1].focus(); |
|||
} |
|||
break; |
|||
|
|||
case "ArrowLeft": |
|||
// case "ArrowUp": |
|||
if (pos - 1 >= 0) { |
|||
this.$refs.spaces[pos - 1].focus(); |
|||
} |
|||
break; |
|||
// case "ArrowDown": |
|||
case "ArrowRight": |
|||
if (pos + 1 <= 5) { |
|||
this.$refs.spaces[pos + 1].focus(); |
|||
} |
|||
break; |
|||
} |
|||
}, |
|||
|
|||
// 将值同步到vm 并验证提交 |
|||
chkLoginSave(pos, value) { |
|||
this.codes[pos] = value; |
|||
|
|||
// 所有框都填满时 触发提交 |
|||
if (this.codes.join("").match(/^\d{6}$/)) this.step3(); |
|||
|
|||
// if (this[name].every(item => /^\d$/.test(item))) this.step3(); |
|||
}, |
|||
|
|||
handleInput(pos, $event) { |
|||
if (this.skipInput == true) { |
|||
this.skipInput = false; |
|||
return; |
|||
} |
|||
|
|||
let val = $event.target.value; |
|||
|
|||
if (val) { |
|||
// 执行了输入 |
|||
// 合法的值 |
|||
if (val.match(/^\d{1,2}$/)) { |
|||
if (val.length == 2) { |
|||
// 再次输入时 重置值 |
|||
|
|||
val = _.trim(val, this.codes[pos]); |
|||
$event.target.value = val; |
|||
} |
|||
// 找到下一个空节点 |
|||
const tmpArr = Array.from(this.$refs.spaces); |
|||
for (let item of tmpArr) { |
|||
if (!item.value) { |
|||
item.focus(); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
this.chkLoginSave(pos, $event.target.value); |
|||
|
|||
// 非法的值 |
|||
} else { |
|||
$event.target.value = this.codes[pos] || ""; |
|||
} |
|||
} else { |
|||
// 执行了删除 第一次删除跳过keyup事件 |
|||
this.skipKeyup = true; |
|||
} |
|||
}, |
|||
|
|||
step3() { |
|||
// 基础参数 |
|||
const base = { |
|||
password: this.user.password, |
|||
password_confirmation: this.user.password, |
|||
code: this.codes.join(""), |
|||
invite_code: this.user.parentCode |
|||
}; |
|||
|
|||
// 分离参数 |
|||
let data = {}; |
|||
switch (this.registerType) { |
|||
case 2: // 手机 |
|||
data.type = `1`; |
|||
data.country_id = this.user.country_id; |
|||
data.account = this.user.phone; |
|||
data.country_code = this.country.country_code; |
|||
break; |
|||
case 1: |
|||
data.type = `2`; |
|||
data.account = this.user.email; |
|||
break; |
|||
|
|||
default: |
|||
break; |
|||
} |
|||
|
|||
// 服务端真实性验证 |
|||
Member.register(Object.assign(base, data)) |
|||
.then(response => { |
|||
this.$message({ |
|||
type: "success", |
|||
message: this.$t("login.registrationSuccess"), |
|||
duration: 3000, |
|||
onClose: () => { |
|||
// 注册完成 进入登录页 |
|||
this.$router.push("/sign-in"); |
|||
// 手机访问提示下载 |
|||
if (utils.isMobile()) { |
|||
this.$confirm(this.$t("home.download") + "？", '', { |
|||
center: true, |
|||
confirmButtonText:this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn'), |
|||
}) |
|||
.then(() => { |
|||
location.origin = "/down"; |
|||
}) |
|||
.catch(() => { }); |
|||
return; |
|||
} |
|||
} |
|||
}); |
|||
}) |
|||
.catch(err => { |
|||
this.reset(this.registerType); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
Member.getCountryCode() |
|||
.then(data => { |
|||
this.cacheOption = data; |
|||
}) |
|||
.catch(err => { }); |
|||
if (this.$route.query.invite_code) { |
|||
this.user.parentCode = this.$route.query.invite_code; |
|||
if (document.body.clientWidth < 750) { |
|||
window.location.href = this.Globals.mobileUrl + '/#/pages/reg/index?invite_code=' + this.$route.query.invite_code |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted() { |
|||
// |
|||
window.md5 = md5; |
|||
// 安全性验证成功时的回调函数 |
|||
window.step2Register = this.step2; |
|||
|
|||
// bind get gc code |
|||
this.gett_gc_code(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '@/assets/scss/base/_common.scss'; |
|||
form.register-body { |
|||
.form-group { |
|||
margin: 1rem auto; |
|||
} |
|||
|
|||
.password { |
|||
label { |
|||
width: 2em; |
|||
height: 2em; |
|||
// border: 1px solid red; |
|||
display: inline-block; |
|||
content: ""; |
|||
background: url("../../assets/img/eyed.svg") no-repeat center center; |
|||
// background-repeat: no-repeat; |
|||
background-size: 1rem 1rem; |
|||
position: absolute; |
|||
right: 1em; |
|||
top: calc(50% - 1em); |
|||
cursor: pointer; |
|||
opacity: 0.5; |
|||
} |
|||
position: relative; |
|||
} |
|||
|
|||
.area-phone-box { |
|||
// width: 100%; |
|||
@include flexible(); |
|||
|
|||
.area { |
|||
width: 123px; |
|||
margin-right: 3px; |
|||
} |
|||
|
|||
.phone { |
|||
width: 162px; |
|||
} |
|||
} |
|||
|
|||
// 去除搜索输入框自带的下拉图标 |
|||
input::-webkit-calendar-picker-indicator { |
|||
display: none; |
|||
-webkit-appearance: none; |
|||
} |
|||
} |
|||
|
|||
div.verify-code { |
|||
// min-width: 375px; |
|||
flex-basis: 400px; |
|||
@include flexible(column); |
|||
|
|||
.my-codes { |
|||
width: 100%; |
|||
height: 138px; |
|||
@include flexible(column, center, flex-start); |
|||
|
|||
// border: 1px solid red; |
|||
.my-codes__title { |
|||
color: #007bff; |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.my-codes__controls { |
|||
width: 100%; |
|||
@include flexible(row, space-between, center); |
|||
|
|||
.form-control { |
|||
width: 48px; |
|||
height: 48px; |
|||
text-align: center; |
|||
@include font(OpenSans-Regular, 22, 32, #000000); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.form-text { |
|||
@extend .break-word; |
|||
} |
|||
|
|||
.prompt { |
|||
.prompt__no-recieved { |
|||
@include font(Overpass-Regular, 13, 30, #555); |
|||
} |
|||
|
|||
.prompt__inner { |
|||
@include font(Overpass-Regular, 12, 20, #666); |
|||
@extend .form-text; |
|||
@extend .text-muted; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.modal-content { |
|||
// iframe 底部没有设置圆角 超出时 隐藏 |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.modal-header { |
|||
// border:1px solid red; |
|||
.modal-title { |
|||
@include fs(16); |
|||
} |
|||
|
|||
.refresh { |
|||
position: absolute; |
|||
right: 58px; |
|||
top: 18px; |
|||
} |
|||
} |
|||
|
|||
.my-modal-body { |
|||
// border : 1px solid red; |
|||
// border: none; |
|||
width: calc(100% - 2px); |
|||
height: 260px; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.form-control:disabled, .form-control[disabled]{ |
|||
background-color: #1e2834; |
|||
} |
|||
.form-control:disabled, .form-control[readonly]{ |
|||
background-color: #1e2834; |
|||
} |
|||
.form-control { |
|||
background-color: #f8f8f8 !important; |
|||
border: none !important; |
|||
} |
|||
.nav-tabs { |
|||
border-bottom-color: #DEE2E6; |
|||
} |
|||
.nav-tabs .nav-item{ |
|||
margin-bottom: 0px !important; |
|||
} |
|||
.nav-tabs .nav-link.active{ |
|||
border: none !important; |
|||
} |
|||
</style> |
|||
@ -1,184 +0,0 @@ |
|||
<template> |
|||
<div class="subscride-page border-top border-bottom"> |
|||
<!-- 表单 --> |
|||
<div class="container panel my-4 p-5 rounded shadow-sm bg-white"> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<div class="h3 mb-3">{{detail.coin_name}}</div> |
|||
<div class>{{$t('subscride.sendPrice')}}</div> |
|||
<div class="price fn-20 blue">1 {{detail.coin_name}} = {{detail.issue_price}} USDT</div> |
|||
<ul> |
|||
<li class="mt-3"> |
|||
<div class="label">{{$t('subscride.subscriptionCurrency')}}</div> |
|||
<div class="txt text-secondary">{{detail.subscribe_currency}}</div> |
|||
</li> |
|||
<li class="mt-3"> |
|||
<div class="label">{{$t('subscride.expected')}}</div> |
|||
<div class="txt text-secondary">{{parseTime(detail.expected_time_online)}}</div> |
|||
</li> |
|||
<li class="mt-3"> |
|||
<div class="label">{{$t('subscride.startTime')}}</div> |
|||
<div class="txt text-secondary">{{parseTime(detail.start_subscription_time)}}</div> |
|||
</li> |
|||
<li class="mt-3"> |
|||
<div class="label">{{$t('subscride.applyForPurchase')}}</div> |
|||
<div class="txt text-secondary">{{parseTime(detail.end_subscription_time)}}</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="col-6 d-flex flex-column justify-content-end align-items-start"> |
|||
<div class="input-group mb-3"> |
|||
<div class="input-group-prepend"> |
|||
<el-dropdown> |
|||
<span class="input-group-text"> |
|||
{{activeCoin.coin_name}} |
|||
<i class="el-icon-caret-bottom"></i> |
|||
</span> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item v-for="item in coinList" @click.native="activeCoin=item" :key="item.coin_name">{{item.coin_name}}</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</div> |
|||
<input type="number" class="form-control" :placeholder="$t('subscride.enterNum')" required aria-label="Username" v-model="num" aria-describedby="basic-addon1" /> |
|||
<div class="input-group-append" v-if="false"> |
|||
<button class="btn btn-outline-primary" type="button">{{$t('subscride.all')}}</button> |
|||
</div> |
|||
</div> |
|||
<p>1 {{activeCoin.coin_name}} = {{activeCoin.proportion_amount}} {{detail.coin_name}}</p> |
|||
<p>{{num||0}} {{activeCoin.coin_name}} = {{total}} {{detail.coin_name}}</p> |
|||
<button type="submit" class="btn btn-primary" @click="ifSubscribeNow">{{$t('subscride.subscribeNow')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 进度 --> |
|||
<div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-white"> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<h5 class="border-bottom pb-3 mb-5">{{$t('subscride.subscriptionCycle')}}</h5> |
|||
<el-steps :active="detail.status" align-center> |
|||
<el-step :title="$t('subscride.projectWarmUp')" :icon="detail.status>=1?'el-icon-success':undefined"></el-step> |
|||
<el-step :title="$t('subscride.startSubscription')" :icon="detail.status>=2?'el-icon-success':undefined" :description="parseTime(detail.start_subscription_time)"></el-step> |
|||
<el-step :title="$t('subscride.endOfSubscription')" :icon="detail.status>=3?'el-icon-success':undefined" :description="parseTime(detail.end_subscription_time)"></el-step> |
|||
<el-step :title="$t('subscride.announceResults')" :icon="detail.status>=4?'el-icon-success':undefined" :description="parseTime(detail.announce_time)"></el-step> |
|||
</el-steps> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 详情 --> |
|||
<div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-white"> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<h5 class="border-bottom pb-3 mb-4">{{$t('subscride.projectCetails')}}</h5> |
|||
<div class="edit-content" v-html="detail.project_details"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Subscride from "@/api/subscride"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
num: "", |
|||
coinList: [], |
|||
detail: {}, |
|||
activeCoin: {} |
|||
}; |
|||
}, |
|||
computed: { |
|||
total() { |
|||
return utils.multiple( |
|||
this.num || 0, |
|||
this.activeCoin.proportion_amount * 1 |
|||
); |
|||
}, |
|||
|
|||
isLogin() { |
|||
return Boolean(this.userAuth); |
|||
}, |
|||
|
|||
userAuth() { |
|||
const auth = localStorage.getItem("auth"); |
|||
let ret = ""; |
|||
if (auth) { |
|||
let { |
|||
memberId, |
|||
accessToken |
|||
} = JSON.parse(auth); |
|||
ret = `?${accessToken}&${memberId}`; |
|||
} |
|||
return ret; |
|||
}, |
|||
}, |
|||
methods: { |
|||
parseTime(num) { |
|||
if (!num) return; |
|||
return utils.parseTime(num); |
|||
}, |
|||
subscribeTokenList() { |
|||
Subscride.subscribeTokenList().then(res => { |
|||
this.coinList = res; |
|||
this.activeCoin = this.coinList[0]; |
|||
}); |
|||
}, |
|||
getInfo() { |
|||
Subscride.subscribe().then(res => { |
|||
this.detail = res; |
|||
}); |
|||
}, |
|||
|
|||
chkValidate() { |
|||
// 验证登录 |
|||
if (!this.isLogin) { |
|||
this.$confirm(this.$t('contract.k8'), { |
|||
confirmButtonText: this.$t('contract.c5'), |
|||
cancelButtonText: this.$t('contract.c4'), |
|||
type: 'warning' |
|||
}).then(() => { |
|||
this.$router.push(`/sign-in`); |
|||
}).catch(); |
|||
} |
|||
return utils.validate(".input-group"); |
|||
}, |
|||
|
|||
ifSubscribeNow() { |
|||
if (this.chkValidate()) { |
|||
this.$confirm(`${this.$t('subscride.useOrNot')}${this.activeCoin.coin_name}${this.$t('subscride.subscribe')}?`, this.$t('subscride.prompt'), { |
|||
confirmButtonText: this.$t('commom.confirmBtn'), |
|||
cancelButtonText: this.$t('commom.cancelBtn') |
|||
}) |
|||
.then(() => { |
|||
this.subscribeNow(); |
|||
}) |
|||
.catch(() => {}); |
|||
} |
|||
}, |
|||
|
|||
subscribeNow() { |
|||
let data = { |
|||
amount: this.num, |
|||
coin_name: this.activeCoin.coin_name |
|||
}; |
|||
Subscride.subscribeNow(data) |
|||
.then(res => { |
|||
if (res) { |
|||
this.$message.success(this.$t('subscride.subscribeSuccess')); |
|||
this.num = ""; |
|||
} |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
this.subscribeTokenList(); |
|||
this.getInfo(); |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
</style> |
|||
@ -1,411 +0,0 @@ |
|||
<template> |
|||
<div class="wallet-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div |
|||
class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4" |
|||
> |
|||
<div class="h3">{{ $t("wallet.addressManagement1") }}</div> |
|||
<div class> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary" |
|||
data-toggle="modal" |
|||
data-target="#editAddress" |
|||
@click="add" |
|||
> |
|||
<span class="ion-ios-add-circle-outline"></span> |
|||
{{ $t("wallet.addAddress") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<!-- <div class="panel-box"> |
|||
<div class="heading">筛选器</div> |
|||
<div class="container"> |
|||
<div class="row py-3"> |
|||
<div class="form-group col-sm-3"> |
|||
<label>搜索资产</label> |
|||
<el-select value='1' placeholder="请选择活动区域"> |
|||
<el-option label="区域一" value="shanghai"></el-option> |
|||
<el-option label="区域二" value="beijing"></el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> --> |
|||
<div class="row"> |
|||
<div class="col-md-12 mt15"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<!-- <ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link active" data-toggle="pill" href="#tab1" role="tab" aria-selected="false">地址列表</a> |
|||
</li> |
|||
</ul> --> |
|||
<div class="tab-content panel-box"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<ul> |
|||
<li class="heading"> |
|||
<span class="pr-2 border-right d-inline-block">{{ |
|||
$t("wallet.assets") |
|||
}}</span> |
|||
<span class="pr-2 border-right d-inline-block">{{ |
|||
$t("wallet.addressNum") |
|||
}}</span> |
|||
<span class="pr-2 d-inline-block">{{ |
|||
$t("wallet.fee1") |
|||
}}</span> |
|||
</li> |
|||
|
|||
<el-collapse accordion> |
|||
<el-collapse-item |
|||
v-for="coin in userAdressList" |
|||
:key="coin.coin_id" |
|||
> |
|||
<li slot="title" class="p-2"> |
|||
<span> |
|||
<img :src="coin.icon" with="20" /> |
|||
{{ coin.coin_name }} ( {{ coin.full_name }} ) |
|||
</span> |
|||
<span> |
|||
{{ coin.total_address }} |
|||
</span> |
|||
<span> |
|||
{{ coin.withdrawal_fee }} |
|||
</span> |
|||
</li> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>#</th> |
|||
<th>{{ $t("wallet.creationTime") }}</th> |
|||
<th>{{ $t("wallet.detailAddress") }}</th> |
|||
<th>{{ $t("wallet.remarks1") }}</th> |
|||
<th>{{ $t("wallet.operating") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr |
|||
v-for="(address, index) in coin.list" |
|||
:key="address.id" |
|||
> |
|||
<td>{{ index + 1 }}</td> |
|||
<td> |
|||
{{ address.datetime | parseTime }} |
|||
</td> |
|||
<td> |
|||
<span :id="`withdrawal-address-${index}`"> |
|||
{{ address.address }} |
|||
</span> |
|||
<!-- 使用clipboard-target指定复制的元素 --> |
|||
<span |
|||
:class="`my-pop-${index}`" |
|||
data-toggle="popover" |
|||
data-placement="bottom" |
|||
:data-content="$t('wallet.complete') + '!'" |
|||
> |
|||
<a |
|||
href="javascript:void 0" |
|||
:data-clipboard-target="`#withdrawal-address-${index}`" |
|||
alt="Copy to clipboard" |
|||
:data-index="index" |
|||
class="btn btn-outline-light btn-sm withdrawal-control" |
|||
>{{ $t("wallet.copy") }}</a |
|||
> |
|||
</span> |
|||
</td> |
|||
<td>{{ address.address_note }}</td> |
|||
<td class="text-right"> |
|||
<!-- <div class="btn-group btn-group-sm text-nowrap" role="group" aria-label="Basic example"> --> |
|||
<button |
|||
type="button" |
|||
class="btn btn-sm btn-info" |
|||
data-toggle="modal" |
|||
data-target="#editAddress" |
|||
@click="edit(address)" |
|||
> |
|||
{{ $t("wallet.editAddress") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-sm btn-danger" |
|||
@click="del(address.id)" |
|||
> |
|||
{{ $t("wallet.deleteAddress") }} |
|||
</button> |
|||
<!-- </div> --> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="modal fade" |
|||
id="editAddress" |
|||
tabindex="-1" |
|||
role="dialog" |
|||
aria-labelledby="exampleModalLabel" |
|||
aria-hidden="true" |
|||
> |
|||
<div class="modal-dialog modal-dialog-centered"> |
|||
<div class="modal-content bg-panel"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalLabel"> |
|||
{{ action == "add" ? $t("wallet.add") : $t("wallet.edit") |
|||
}}{{ $t("wallet.address") }} |
|||
</h5> |
|||
<button |
|||
type="button" |
|||
class="close" |
|||
data-dismiss="modal" |
|||
aria-label="Close" |
|||
> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form> |
|||
<div class="form-group"> |
|||
<label for="recipient-assets" class="col-form-label" |
|||
>{{ $t("wallet.assets") }}:</label |
|||
> |
|||
<div> |
|||
<!-- 编辑时禁止选择币种 --> |
|||
<el-select |
|||
:placeholder="$t('wallet.selectAssets')" |
|||
v-model="userAdress.coin_name" |
|||
:disabled="action == 'edit'" |
|||
> |
|||
<el-option |
|||
:label="coin.coin_name" |
|||
:value="coin.coin_name" |
|||
v-for="coin in coinsForWithdrawal" |
|||
:key="coin.coin_id" |
|||
> |
|||
<img :src="coin.image" width="20" /> |
|||
{{ coin.coin_name }}({{ coin.full_name }}) |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="recipient-adress" class="col-form-label" |
|||
>{{ $t("wallet.drawAddress") }}:</label |
|||
> |
|||
<input |
|||
type="text" |
|||
class="form-control" |
|||
id="recipient-adress" |
|||
v-model="userAdress.address" |
|||
/> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="comments" class="col-form-label" |
|||
>{{ $t("wallet.addressRemarks") }}:</label |
|||
> |
|||
<input |
|||
type="text" |
|||
class="form-control" |
|||
id="comments" |
|||
v-model="userAdress.address_note" |
|||
/> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-secondary rounded-pill" |
|||
data-dismiss="modal" |
|||
> |
|||
{{ $t("common.cancelBtn") }} |
|||
</button> |
|||
<button |
|||
type="button" |
|||
class="btn btn-primary rounded-pill" |
|||
@click="handleUserAddress" |
|||
> |
|||
{{ $t("common.confirmBtn") }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
import ClipboardJS from "clipboard"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
action: null, |
|||
userAdressList: [], // 用户币种地址集合 |
|||
userAdress: { |
|||
// 添加或编辑地址集合 |
|||
address: "", |
|||
coin_name: "", |
|||
address_note: "", |
|||
}, |
|||
editAddressId: null, |
|||
coinsForWithdrawal: [], // 所有提币地址 |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
getUserAdressList() { |
|||
Wallet.getUserWithdrawAdress() |
|||
.then((data) => { |
|||
this.userAdressList = data; |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
|
|||
getCoinsForWithdraw() { |
|||
Wallet.withdrawalSelectAddress() |
|||
.then((data) => { |
|||
this.coinsForWithdrawal = data.list; |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
|
|||
// 清除模态框数据 |
|||
resetModal() { |
|||
this.userAdress = { |
|||
address: "", |
|||
coin_name: "", |
|||
address_note: "", |
|||
}; |
|||
}, |
|||
|
|||
add() { |
|||
// 设置动作 |
|||
this.action = "add"; |
|||
// 清空输入框 |
|||
this.resetModal(); |
|||
// 查询币种 |
|||
if (!this.coinsForWithdrawal.length) this.getCoinsForWithdraw(); |
|||
}, |
|||
|
|||
edit(item) { |
|||
this.action = "edit"; |
|||
// 写入记录值 |
|||
this.userAdress = item; |
|||
this.editAddressId = item.id; |
|||
if (!this.coinsForWithdrawal.length) this.getCoinsForWithdraw(); |
|||
}, |
|||
|
|||
del(id) { |
|||
this.$confirm(this.$t("wallet.remarksDelete") + "?",{ |
|||
confirmButtonText:this.$t('common.confirmBtn'), |
|||
cancelButtonText: this.$t('common.cancelBtn') |
|||
}) |
|||
.then(() => { |
|||
Wallet.withdrawalAddressDeleted({ id }) |
|||
.then((res) => { |
|||
this.$message({ |
|||
type: "success", |
|||
message: this.$t("wallet.optionSuccess") + "！", |
|||
}); |
|||
// 更新页面数据 |
|||
this.getUserAdressList(); |
|||
}) |
|||
.catch((err) => {}); |
|||
}) |
|||
.catch((err) => { |
|||
this.$message({ |
|||
type: "info", |
|||
message: err.message, |
|||
}); |
|||
}); |
|||
}, |
|||
|
|||
handleUserAddress() { |
|||
let pms; |
|||
switch (this.action) { |
|||
case "add": |
|||
pms = Wallet.addWithdrawAddress(this.userAdress); |
|||
break; |
|||
case "edit": |
|||
pms = Wallet.withdrawalAddressModify( |
|||
Object.assign( |
|||
{ |
|||
id: this.editAddressId, |
|||
}, |
|||
this.userAdress |
|||
) |
|||
); |
|||
break; |
|||
} |
|||
|
|||
pms |
|||
.then((res) => { |
|||
if (res == true) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: this.$t("wallet.optionSuccess") + "！", |
|||
}); |
|||
// 更新页面数据 |
|||
this.getUserAdressList(); |
|||
// 清空订单状态 |
|||
this.resetModal(); |
|||
// 关闭模态框 |
|||
$("#editAddress").modal("hide"); |
|||
} |
|||
}) |
|||
.catch((err) => {}); |
|||
}, |
|||
}, |
|||
|
|||
created() { |
|||
this.getUserAdressList(); |
|||
}, |
|||
|
|||
mounted() { |
|||
const clipboard = new ClipboardJS(".withdrawal-control"); |
|||
|
|||
clipboard.on("success", function (e) { |
|||
let index = e.trigger.dataset.index; |
|||
|
|||
$(`.my-pop-${index}`).popover("show"); |
|||
setTimeout(function () { |
|||
$(`.my-pop-${index}`).popover("hide"); |
|||
}, 500); |
|||
// 清除选取内容 |
|||
// e.clearSelection(); |
|||
}); |
|||
|
|||
clipboard.on("error", function (e) { |
|||
// console.error('Action:', e.action); |
|||
// console.error('Trigger:', e.trigger); |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
::v-deep { |
|||
.el-collapse { |
|||
border-top-color: #4e4e5d; |
|||
border-bottom-color: #4e4e5d; |
|||
} |
|||
.el-collapse-item__header { |
|||
background: transparent; |
|||
color: inherit; |
|||
border-color:#4e4e5d; |
|||
} |
|||
.el-collapse-item__wrap{ |
|||
background: transparent; |
|||
border-color:#4e4e5d; |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -1,102 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div |
|||
class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4" |
|||
> |
|||
<div class="h3">{{ $t("wallet.ContractAccount") }}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item fn-16"> |
|||
<a |
|||
class="nav-link active" |
|||
data-toggle="pill" |
|||
role="tab" |
|||
aria-selected="false" |
|||
>{{ $t("wallet.contractFlow") }}</a |
|||
> |
|||
</li> |
|||
</ul> |
|||
|
|||
<div class="tab-content"> |
|||
<div class="tab-pane funding-table fade show active"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{ $t("wallet.dateTime") }}</th> |
|||
<th>{{ $t("wallet.info") }}</th> |
|||
<th>{{ $t("wallet.money") }}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{ item.created_at }}</td> |
|||
<td>{{ item.log_type_text }}</td> |
|||
<td |
|||
:class="{ |
|||
increace: item.amount >= 0, |
|||
decreace: item.amount < 0 |
|||
}" |
|||
> |
|||
{{ item.amount >= 0 ? "+" : "" }}{{ item.amount }} |
|||
{{ item.coin_name }} |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="3"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<el-pagination |
|||
layout="prev, pager, next" |
|||
:page-size="CurrentObj.per_page" |
|||
@current-change="changePageCurrent" |
|||
:total="CurrentObj.total" |
|||
></el-pagination> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import wallet from "../../api/wallet.js"; |
|||
export default { |
|||
name: "contract-assets", |
|||
data() { |
|||
return { |
|||
CurrentObj: {}, |
|||
list: [] |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
changePageCurrent(idx) { |
|||
this.CurrentObj.page = idx; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
let data = { |
|||
page: this.CurrentObj.page |
|||
}; |
|||
wallet.accountFlow(data).then(res => { |
|||
this.CurrentObj = res; |
|||
this.list = res.data; |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,980 +0,0 @@ |
|||
<template> |
|||
<div class="settings wallet-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="user"> |
|||
<div class="container" style="margin: 0px auto 50px;padding:60px 0px;"> |
|||
<div class="d-flex fn-28 align-items-center mb-4 px-3" style="height: 90px;font-weight:bold;"> |
|||
<img src="@/assets/img/home/login.png" alt="" style="width: 90px;height: 90px;margin-right:20px;"> |
|||
<div>{{ userInfo.email }}</div> |
|||
</div> |
|||
<div class="d-flex px-5 mb-2 fn-16" style="color:#7A7A7A;"> |
|||
<!-- <div class="w-6/24">{{$t('login.phone')}}</div> --> |
|||
<div class="w-5/24">{{$t('login.email')}}</div> |
|||
<div class="w-6/24">{{$t('wallet.Authentication')}}</div> |
|||
<!-- <div class="w-6/24">{{$t('wallet.countryRegion')}}</div> --> |
|||
</div> |
|||
<div class="d-flex px-5 fn-16"> |
|||
<!-- <div class="w-6/24">{{ phoneNumbe }}</div> --> |
|||
<div class="w-5/24" style="word-wrap: break-word;">{{ userInfo.email }}</div> |
|||
<div class="w-6/24">{{ userInfo.user_auth_level_text }}</div> |
|||
<!-- <div class="w-6/24">{{ userInfo.country_code }}</div> --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 资产 --> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('wallet.assets')}}</div> |
|||
<div> |
|||
<!-- 24小时提币限额： 0 / 20000 USD --> |
|||
<span class="icon-Icon-Increase"></span> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-7"> |
|||
<div class="panel-box bg-panel"> |
|||
<div class="heading d-flex justify-content-between align-items-center"> |
|||
<div class="h6">{{$t('wallet.allAssets')}}</div> |
|||
<div> |
|||
<div class="custom-control custom-switch"> |
|||
<input type="checkbox" v-model="showValue" class="custom-control-input" |
|||
id="numerical-control" /> |
|||
<label class="custom-control-label" |
|||
for="numerical-control">{{$t('wallet.showNum')}}</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content tab-content"> |
|||
<div class="my-1"> |
|||
≈ |
|||
<span class="num h2 light-purple"> |
|||
<template v-if="showValue">{{userAssets.total_assets_btc|omitTo(4)}}</template> |
|||
<template v-else>********</template> |
|||
</span> |
|||
BTC |
|||
</div> |
|||
<div class="my-1"> |
|||
≈ |
|||
<span class="num h2 light-purple"> |
|||
<template v-if="showValue">{{userAssets.total_assets_usd|omitTo(2)}}</template> |
|||
<template v-else>********</template> |
|||
</span> |
|||
USDT |
|||
</div> |
|||
<div class="container"> |
|||
<div class="row mt-4"> |
|||
<div class="col-6"> |
|||
<div class="label">{{$t('wallet.capitalAccount')}}</div> |
|||
<div> |
|||
<span class="num h3 light-purple"> |
|||
<template |
|||
v-if="showValue">{{userAssets.funds_account_usd|omitTo(2)}}</template> |
|||
<template v-else>********</template> |
|||
</span> |
|||
USDT |
|||
</div> |
|||
</div> |
|||
<!-- <div class="col-6"> |
|||
<div class="label">{{$t('otc.j1')}}</div> |
|||
<div> |
|||
<span class="num h3 light-purple"> |
|||
<template v-if="showValue">{{userAssets.otc_account_usd|omitTo(4)}}</template> |
|||
<template v-else>********</template> |
|||
</span> |
|||
USDT |
|||
</div> |
|||
</div> --> |
|||
</div> |
|||
<div class="row mt-4"> |
|||
<div class="col-6"> |
|||
<div class="label">{{$t('common.contractaccount')}}</div> |
|||
<div> |
|||
<span class="num h3 light-purple"> |
|||
<template |
|||
v-if="showValue">{{userAssets.contract_account_usd|omitTo(2)}}</template> |
|||
<template v-else>********</template> |
|||
</span> |
|||
USDT |
|||
</div> |
|||
</div> |
|||
<div class="col-6" v-if="false"> |
|||
<div class="label">{{$t('wallet.financialAccount')}}</div> |
|||
<div> |
|||
<span class="num h3 light-purple"> |
|||
<template v-if="showValue">-</template> |
|||
<template v-else>********</template> |
|||
</span> |
|||
BTC |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-5"> |
|||
<inner-transfer @change="getUserAssets"></inner-transfer> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12 mt15"> |
|||
<div class="markets-pair-list"> |
|||
<!-- <ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link active" data-toggle="pill" href="#tab1" role="tab" aria-selected="false">现货账户</a> |
|||
</li> |
|||
</ul>--> |
|||
<form class="form-inline search-box"> |
|||
<div class="form-check mb-2 mr-sm-2"> |
|||
<input class="form-check-input" type="checkbox" id="hideZero" v-model="isHideZero" /> |
|||
<label class="form-check-label" for="hideZero">{{$t('wallet.hide')}} 0 |
|||
{{$t('wallet.balanceAssets')}}</label> |
|||
</div> |
|||
|
|||
<div class="mb-2 mr-sm-2"> |
|||
<input type="text" v-model="keyword" class="form-control mb-2 mr-sm-2" |
|||
:placeholder="$t('wallet.searchCurrency')" /> |
|||
|
|||
<router-link to="/wallet/address" |
|||
class="btn btn-primary rounded-pill mb-2">{{$t('wallet.addressManagement')}}</router-link> |
|||
</div> |
|||
</form> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>#</th> |
|||
<th>{{$t('wallet.assets')}}</th> |
|||
<!-- <th>{{$t('wallet.totalAssets')}}</th> --> |
|||
<th>{{$t('wallet.availableBalance')}}</th> |
|||
<th>{{$t('wallet.fee')}}</th> |
|||
<th>USD{{$t('wallet.valuation')}}</th> |
|||
<!-- color-gray-6 m-r-xs --> |
|||
<th>{{$t('wallet.operating')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, index) in coinAssets" :key="item.id" v-if="seek(item)"> |
|||
<td>{{ index + 1}}</td> |
|||
<td> |
|||
<!-- <img :src="item.image" alt="eth" /> --> |
|||
{{ item.coin_name }} |
|||
</td> |
|||
<!-- <td>{{ item.freeze_balance|add(item.usable_balance) }}</td> --> |
|||
<td>{{item.usable_balance |omitTo(2)}}</td> |
|||
<td>{{item.freeze_balance}}</td> |
|||
<td>{{item.usd_estimate |omitTo(2)}}</td> |
|||
<td> |
|||
<div class="btn-group btn-group-sm" role="group" |
|||
aria-label="Basic example"> |
|||
<!-- data-target="#deposite" --> |
|||
<button type="button" class="btn btn-outline-primary" |
|||
data-toggle="modal" @click="enterDeposite(item)" |
|||
:disabled="!item.is_withdraw">{{$t('wallet.recharge')}}</button> |
|||
<!-- <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#withdraw" @click="enterWithdraw(item)" :disabled="!item.is_withdraw">{{$t('wallet.withdrawal')}}</button> --> |
|||
<button type="button" class="btn btn-outline-primary" |
|||
data-target="#withdraw" @click="enterWithdraw(item)" |
|||
:disabled="!item.is_withdraw">{{$t('wallet.withdrawal')}}</button> |
|||
<div class="btn-group btn-group-sm" role="group"> |
|||
<button id="btnGroupDrop1" type="button" |
|||
class="btn btn-outline-primary dropdown-toggle" |
|||
data-toggle="dropdown" aria-haspopup="true" |
|||
aria-expanded="false">{{$t('wallet.transaction')}}</button> |
|||
|
|||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1" |
|||
v-for="(symbol,index) in item.symbol" :key="index"> |
|||
<router-link |
|||
:to="`/exchange/${symbol.coin_name.replace(/\//g, '')}`">{{symbol.coin_name.toUpperCase()}}</router-link> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 充值 --> |
|||
<div class="modal fade" tabindex="-1" role="dialog" id="deposite" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl modal-dialog-centered"> |
|||
<div class="modal-content bg-panel"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" @click="active=0" :class="active==0?'active':''"> |
|||
{{$t('wallet.recharge')}}（{{depositeCoin}}）</h5> |
|||
<!-- <h5 class="ml-5 modal-title" @click="active=1" :class="active==1?'active':''">PayPal</h5> --> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body" v-if="active==0"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-md-4"> |
|||
<form action class="deposite-body"> |
|||
<template v-if="depositeCoin =='USDT'"> |
|||
<!-- <div class="form-check form-check-inline"> |
|||
<input class="form-check-input" type="radio" v-model="depositeAdressType" name="deposite—address-type" id="deposite-omni" value="1" /> |
|||
<label class="form-check-label" for="deposite-omni">OMNI</label> |
|||
</div> --> |
|||
<div class="form-check form-check-inline"> |
|||
<input class="form-check-input" type="radio" |
|||
v-model="depositeAdressType" name="deposite—address-type" |
|||
id="deposite-erc20" value="2" /> |
|||
<label class="form-check-label" for="deposite-erc20">ERC20</label> |
|||
</div> |
|||
<div class="form-check form-check-inline"> |
|||
<input class="form-check-input" type="radio" |
|||
v-model="depositeAdressType" name="deposite—address-type" |
|||
id="deposite-trc20" value="3" /> |
|||
<label class="form-check-label" for="deposite-trc20">TRC20</label> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<div class="form-group mt-2"> |
|||
<label for="formGroupExampleInput"> |
|||
{{$t('wallet.rechargeAddress')}} |
|||
<template v-if="depositeCoin == 'USDT'">(USDT - |
|||
<span v-show="depositeAdressType==1">OMNI</span> |
|||
<span v-show="depositeAdressType==2">ERC20</span> |
|||
<span v-show="depositeAdressType==3">TRC20</span> |
|||
)</template> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<!-- <input type="text" v-model="deposite.address" readonly class="form-control" id="deposite-address" required /> |
|||
<div class="input-group-append dopsite-control" data-clipboard-target="#deposite-address"> |
|||
<span class="my-pop input-group-text" data-toggle="popover" data-placement="bottom" :data-content="$t('wallet.rechargeAddress')+'!'"> |
|||
<a href="javascript:void 0" alt="Copy to clipboard">{{$t('wallet.copy')}}</a> |
|||
</span> |
|||
</div> --> |
|||
<template v-if="deposite.address!=''"> |
|||
<input type="text" v-model="deposite.address" readonly |
|||
class="form-control" id="deposite-address" required /> |
|||
<div class="input-group-append dopsite-control" |
|||
data-clipboard-target="#deposite-address"> |
|||
<span class="my-pop input-group-text" data-toggle="popover" |
|||
data-placement="bottom" |
|||
:data-content="$t('wallet.rechargeAddress')+'!'"> |
|||
<a href="javascript:void 0" |
|||
alt="Copy to clipboard">{{$t('wallet.copy')}}</a> |
|||
</span> |
|||
</div> |
|||
</template> |
|||
<template v-else> |
|||
<el-button type="primary" style="width:100%" |
|||
@click="getRechargeAdd">{{$t('wallet.obtain')}}</el-button> |
|||
</template> |
|||
</div> |
|||
</div> |
|||
<div class="form-group mt-2" v-if="false"> |
|||
<label |
|||
for="formGroupExampleInput">{{$t('wallet.rechargeQuantity')}}</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="number" class="form-control" required min="0" |
|||
step="0.00000001" v-model="deposite.amount" |
|||
:placeholder="$t('wallet.enterQuantity')" /> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="col-md-3 text-center"> |
|||
<vue-qr class="mr-2" v-if="deposite.address" :text="deposite.address" |
|||
:margin="0" :size="150" /> |
|||
<!-- <img src="http://iph.href.lu/150x150" alt /> --> |
|||
</div> |
|||
<div class="col-md-5"> |
|||
<p>{{$t('wallet.rechargeInstructions')}}</p> |
|||
<ul> |
|||
<li>1. {{$t('wallet.automaticallyCredited')}} |
|||
{{$t('wallet.tran',{num:10,name:depositeCoin})}}</li> |
|||
<li>2. {{$t('wallet.only',{name:depositeCoin})}}</li> |
|||
<!-- <li>3. {{depositeAdressType==2?$t('wallet.Ethereun',{name:'Ethereun'}):$t('wallet.Ethereun',{name:'TRON'})}}</li> --> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="modal-body" v-else> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-md-5"> |
|||
<form action class="withdraw-body"> |
|||
<label class="d-flex justify-content-between" for="formGroupExampleInput"> |
|||
<span> |
|||
Paypal {{$t('otc.d8')}} |
|||
</span> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="text" v-model="paypal.number" readonly class="form-control" |
|||
id="deposite-address1" required /> |
|||
<div class="input-group-append dopsite-control1" |
|||
data-clipboard-target="#deposite-address1"> |
|||
<span class="my-pop1 input-group-text" data-toggle="popover" |
|||
data-placement="bottom" |
|||
:data-content="'Paypal'+$t('otc.d8')+'!'"> |
|||
<a href="javascript:void 0" |
|||
alt="Copy to clipboard">{{$t('wallet.copy')}}</a> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
<div class="form-group mt-2"> |
|||
<label class="d-flex justify-content-between" |
|||
for="formGroupExampleInput"> |
|||
<span> |
|||
{{$t('wallet.rechargeQuantity')}} |
|||
</span> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="number" |
|||
:placeholder="$t('application.pleaseEnter')+$t('wallet.rechargeQuantity')" |
|||
v-model="paypal.amount" class="form-control" /> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="col-md-7 text-center"> |
|||
<upload-img class="mb-3" v-model="paypal.images" required |
|||
:placeholder="$t('profile.uploadPhoto')"> |
|||
<template #text> |
|||
<div class="el-upload__text"> |
|||
{{$t('otc.e4')}}-{{$t('profile.dragHere')}} |
|||
<em>{{$t('profile.clickUpload')}}</em> |
|||
</div> |
|||
</template> |
|||
</upload-img> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer" v-if="active==1"> |
|||
<button type="button" class="btn btn-primary" |
|||
@click="paypalSbumit">{{$t('common.confirmBtn')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 提币 --> |
|||
<div class="modal fade" tabindex="-1" role="dialog" id="withdraw"> |
|||
<div class="modal-dialog modal-xl modal-dialog-centered"> |
|||
<div class="modal-content bg-panel"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title">{{$t('wallet.withdrawal')}}（{{withdrawCoin}}）</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-md-6"> |
|||
<form action class="withdraw-body"> |
|||
<template v-if="withdrawCoin =='USDT'"> |
|||
<!-- <div class="form-check form-check-inline"> |
|||
<input class="form-check-input" type="radio" name="withdraw-address-type" id="withdraw-omni" v-model="withdraw.addressType" value="1" /> |
|||
<label class="form-check-label" for="withdraw-omni">OMNI</label> |
|||
</div> --> |
|||
<div class="form-check form-check-inline"> |
|||
<input class="form-check-input" type="radio" |
|||
name="withdraw-address-type" id="withdraw-erc20" |
|||
v-model="withdraw.addressType" value="2" /> |
|||
<label class="form-check-label" for="withdraw-erc20">ERC20</label> |
|||
</div> |
|||
<div class="form-check form-check-inline"> |
|||
<input class="form-check-input" type="radio" |
|||
name="withdraw-address-type" id="withdraw-trc20" |
|||
v-model="withdraw.addressType" value="3" /> |
|||
<label class="form-check-label" for="withdraw-trc20">TRC20</label> |
|||
</div> |
|||
|
|||
</template> |
|||
<div class="form-group mt-2"> |
|||
<label class="d-flex justify-content-between" |
|||
for="formGroupExampleInput"> |
|||
<span> |
|||
{{$t('wallet.drawAddress')}} |
|||
<template v-if="withdrawCoin == 'USDT'">(USDT- |
|||
<span v-show="withdraw.addressType==1">OMNI</span> |
|||
<span v-show="withdraw.addressType==2">ERC20</span> |
|||
<span |
|||
v-show="withdraw.addressType==3">TRC20</span>)</template> |
|||
</span> |
|||
<span> |
|||
{{$t('wallet.low')}}:{{withdrawFee.withdrawal_min}} |
|||
{{withdrawCoin}} |
|||
<router-link to="" @click.native="addressText" class="text-primary">{{$t('wallet.addressList')}}</router-link> |
|||
</span> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="text" :placeholder="$t('wallet.enterDrawAddress')" |
|||
:data-message="$t('wallet.invalidWallet')+'！'" |
|||
v-model="withdraw.address" class="form-control" required /> |
|||
</div> |
|||
</div> |
|||
<div class="form-group mt-2"> |
|||
<label class="d-flex justify-content-between" |
|||
for="formGroupExampleInput"> |
|||
<span>{{$t('wallet.withdrawalsNumber')}}</span> |
|||
<span> |
|||
<input class="form-check-input" type="checkbox" id="allAssets" |
|||
v-model="allAssets" /> |
|||
<label for="allAssets">{{$t('wallet.all')}}</label> |
|||
<span>{{$t('wallet.availableBalance')}}: |
|||
{{withdrawFee.usable_balance}} {{withdrawCoin}}</span> |
|||
</span> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="number" v-model="withdraw.amount" step="0.00000001" |
|||
:placeholder="$t('wallet.enterDrawNum')" class="form-control" /> |
|||
</div> |
|||
<span class="text-right">{{$t('wallet.handlingFee1')}}: |
|||
{{withdrawCoin=='USDT'&&withdraw.addressType==3?withdrawFee.trc20:withdrawFee.withdrawal_fee }} |
|||
{{withdrawCoin}}</span> |
|||
</div> |
|||
<div class="form-group mt-2"> |
|||
<label class="d-flex justify-content-between" for="formGroupPWDInput"> |
|||
<span>{{$t('login.password')}}</span> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="password" v-model="withdraw.password" |
|||
:placeholder="$t('common.enterPwd')" class="form-control" |
|||
id="formGroupPWDInput" /> |
|||
</div> |
|||
</div> |
|||
<div class="form-group mt-2"> |
|||
<label class="d-flex justify-content-between" for="" |
|||
style="align-items: center;"> |
|||
<span>{{$t('login.email-code')}}</span> |
|||
<span class="getCodeAA" @click="getEmailCode"> |
|||
<span v-if="!getEmailCodeLock">{{$t('common.getCode')}}</span> |
|||
<span v-else>{{ daojishi }}</span> |
|||
</span> |
|||
</label> |
|||
<div class="input-group input-group-sm"> |
|||
<input type="text" id="EmailCode" v-model="withdraw.emailcode" |
|||
:placeholder="$t('common.enterEmailCode')" |
|||
class="form-control" /> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<p>{{$t('wallet.withdrawalInstructions')}}</p> |
|||
<ul> |
|||
<li>1. {{$t('wallet.enterAddress')}}</li> |
|||
<li>2. {{$t('wallet.notSend')}}</li> |
|||
<li>3. {{$t('wallet.deductionFee')}}</li> |
|||
<!-- <li>4. {{withdraw.addressType==2?$t('wallet.Ethereun',{name:'Ethereun'}):$t('wallet.Ethereun',{name:'TRON'})}}</li> --> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-primary rounded-pill" |
|||
@click="toHandleWithdraw">{{$t('common.confirmBtn')}}</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<v-box v-model="verShow" :title="$t('setting.ver')"> |
|||
<d-code :status="withdrawFee" @complete="codeComplete" /> |
|||
</v-box> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import InnerTransfer from "../components/inner-transfer.vue"; |
|||
import Wallet from "@/api/wallet"; |
|||
import Profile from "@/api/profile"; |
|||
import Member from "@/api/member"; |
|||
import ClipboardJS from "clipboard"; |
|||
import getCode from "./getCode"; |
|||
import vueQr from "vue-qr"; |
|||
export default { |
|||
components: { |
|||
InnerTransfer, |
|||
vueQr, |
|||
dCode: getCode |
|||
}, |
|||
data() { |
|||
return { |
|||
// 所有资产列表，需要接口返回 |
|||
userAssets: { |
|||
contract_account_btc: 0, |
|||
contract_account_usd: 0, |
|||
funds_account_btc: 0, |
|||
funds_account_usd: 0, |
|||
total_assets_btc: 0, |
|||
total_assets_usd: 0 |
|||
}, |
|||
userInfo: {}, //账户信息 |
|||
ProfileDetail: {}, |
|||
coinAssets: [], // 币种账户 |
|||
|
|||
isHideZero: false, // 是否隐藏0余额资产 |
|||
keyword: "", |
|||
showValue: true, // 默认隐藏资产数值 |
|||
|
|||
depositeCoin: null, |
|||
depositeAdressType: 2, // 默认充值类型 1 为 omin 2 为 erc20 |
|||
|
|||
withdrawCoin: null, |
|||
|
|||
// 充值币种 |
|||
deposite: { |
|||
coin_id: "", |
|||
amount: "", |
|||
address: "" |
|||
}, |
|||
|
|||
// 提取币种 |
|||
withdraw: { |
|||
coin_id: "", |
|||
amount: "", |
|||
address: "", |
|||
password: "", |
|||
addressType: 2, // 默认提币类型 1 为 omni； 2 为 erc20, |
|||
code_type: 1, |
|||
code: '', |
|||
emailcode: '' |
|||
}, |
|||
|
|||
withdrawFee: { |
|||
usable_balance: "-", |
|||
withdrawal_fee: "-", |
|||
withdrawal_min: "-", |
|||
withdrawal_max: "-" |
|||
}, // 提币手续费和余额 |
|||
|
|||
// 所有资产提取 |
|||
allAssets: false, // |
|||
cacheInputAssets: null, |
|||
verShow: false, |
|||
active: 0, |
|||
paypal: { |
|||
number: "", |
|||
amount: "", |
|||
images: "" |
|||
}, |
|||
getEmailCodeLock: false, |
|||
JStime: 0, |
|||
tiemr: null, |
|||
}; |
|||
}, |
|||
|
|||
// 保留用户行为 |
|||
|
|||
watch: { |
|||
// 协议改变时 重新获取地址 |
|||
depositeAdressType() { |
|||
this.getDepositeAdress(); |
|||
}, |
|||
|
|||
allAssets(val) { |
|||
if (val) { |
|||
this.cacheInputAssets = this.withdraw.amount; |
|||
this.withdraw.amount = this.withdrawFee.usable_balance; |
|||
} else { |
|||
this.withdraw.amount = this.cacheInputAssets; |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
daojishi() { |
|||
|
|||
return '(' + this.JStime + 's' + ')'; |
|||
} |
|||
}, |
|||
methods: { |
|||
//确认提交贝宝支付 |
|||
paypalSbumit() { |
|||
if (!this.paypal.amount) { |
|||
this.$message({ |
|||
type: "error", |
|||
message: this.$t('application.pleaseEnter') + this.$t('wallet.rechargeQuantity'), |
|||
duration: 1000 |
|||
}); |
|||
return |
|||
} |
|||
if (!this.paypal.images) { |
|||
this.$message({ |
|||
type: "error", |
|||
message: this.$t('otc.e6'), |
|||
duration: 1000 |
|||
}); |
|||
return |
|||
} |
|||
var item = { |
|||
account: this.paypal.number, |
|||
amount: this.paypal.amount, |
|||
image: this.paypal.images |
|||
} |
|||
Wallet.rechargeManualPost(item) |
|||
.then(data => { |
|||
this.$message.success(this.$t("wallet.submitSuccess")); |
|||
this.paypal.images = '' |
|||
this.paypal.amount = '' |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
seek(item) { |
|||
// 搜索关键字 |
|||
const reg = new RegExp(this.keyword, "gi"); |
|||
let res1 = !this.keyword || item.coin_name.search(reg) >= 0; |
|||
|
|||
// 隐藏零余额 |
|||
let res2 = !this.isHideZero || item.usable_balance > 0; |
|||
|
|||
return res1 && res2; |
|||
}, |
|||
|
|||
// 获取用户资产 |
|||
getUserAssets() { |
|||
Wallet.personalAssets() |
|||
.then(data => { |
|||
this.userAssets = data; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
// 获取paypal账号 |
|||
getPaypal() { |
|||
Wallet.paypal() |
|||
.then(data => { |
|||
this.paypal.number = data.paypal_account; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
// 获取币种资产 |
|||
getCoinAssets() { |
|||
Wallet.fundAccount() |
|||
.then(data => { |
|||
this.coinAssets = data.list; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
// 生成充值地址 |
|||
getDepositeAdress() { |
|||
Wallet.walletImage({ |
|||
coin_id: this.deposite.coin_id, |
|||
address_type: this.depositeAdressType // 充值地址类型 |
|||
}) |
|||
.then(data => { |
|||
this.deposite.address = data.address; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
// 进入充值 |
|||
enterDeposite(item) { |
|||
if (this.userInfo.user_auth_level != 0) { |
|||
this.depositeCoin = item.coin_name; |
|||
this.deposite.coin_id = item.coin_id; |
|||
// 初始化充值地址 |
|||
this.getDepositeAdress(); |
|||
$("#deposite").modal("show"); |
|||
} else { |
|||
// this.$message.error(this.$t("wallet.auth")) |
|||
this.$router.push("/profile/certification") |
|||
} |
|||
}, |
|||
//获取充值地址 |
|||
getRechargeAdd() {}, |
|||
|
|||
// 处理充值 |
|||
handleDeposite() { |
|||
// |
|||
if (utils.validate(".deposite-body")) { |
|||
Wallet.recharge(this.deposite) |
|||
.then(data => { |
|||
this.$message({ |
|||
type: "success", |
|||
message: this.$t("wallet.submitSuccess") + "！", |
|||
duration: 1000 |
|||
}); |
|||
// 手动关闭模态框 |
|||
$("#deposite").modal("hide"); |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
}, |
|||
|
|||
// 进入提币 |
|||
enterWithdraw(item) { |
|||
// console.log(this.ProfileDetail.status) |
|||
if (this.ProfileDetail.status != 2) { |
|||
this.$router.push("/profile/certification"); |
|||
return; |
|||
} |
|||
$('#withdraw').modal('show'); |
|||
this.withdrawCoin = item.coin_name; |
|||
this.withdraw.coin_id = item.coin_id; |
|||
// 查找余额 手续费等信息 |
|||
Wallet.withdrawalBalance({ |
|||
coin_name: item.coin_name |
|||
}) |
|||
.then(data => { |
|||
this.withdrawFee = data; |
|||
}) |
|||
.catch(err => {}); |
|||
}, |
|||
|
|||
// 处理提币 |
|||
toHandleWithdraw() { |
|||
let data = this.withdrawFee |
|||
if (utils.validate(".withdraw-body")) { |
|||
if (data.withdraw_switch == 1) { |
|||
$("#withdraw").modal("hide"); |
|||
this.verShow = true |
|||
} else { |
|||
this.handleWithdraw() |
|||
|
|||
} |
|||
} |
|||
}, |
|||
handleWithdraw() { |
|||
|
|||
Wallet.withdraw(this.withdraw) |
|||
.then(data => { |
|||
// this.$message(this.$t("wallet.operationComplete") ); |
|||
$("#withdraw").modal("hide"); |
|||
this.verShow = false |
|||
this.$router.push('/wallet/funding?currentTab=withdrawal') |
|||
}) |
|||
.catch(err => {}); |
|||
|
|||
}, |
|||
// 验证码输入完成 |
|||
codeComplete(obj) { |
|||
this.withdraw.code_type = obj.code_type |
|||
this.withdraw.code = obj.code |
|||
this.verShow = false |
|||
this.handleWithdraw() |
|||
}, |
|||
// 创建充币地址 |
|||
createWalletAddress() { |
|||
// 文鹏写的接口 |
|||
// Wallet.createWalletAddress(); |
|||
}, |
|||
// 获取个人信息 |
|||
getUserInfo() { |
|||
Profile.getUserInfo({}).then(res => { |
|||
this.userInfo = res |
|||
}); |
|||
}, |
|||
getAuthInfo() { |
|||
Profile.getAuthInfo({}).then(res => { |
|||
this.ProfileDetail = res; |
|||
// console.log(this.ProfileDetail, 11111) |
|||
}); |
|||
}, |
|||
// 滚动到页面指定位置 |
|||
PageScrollTo(num) { |
|||
document.documentElement.scrollTop = num; |
|||
}, |
|||
// 獲取邮箱验证码 |
|||
getEmailCode() { |
|||
if (!this.withdraw.address) { |
|||
this.$message({ |
|||
message: this.$t('wallet.enterDrawAddress'), |
|||
type: "warn", |
|||
duration: 2000, |
|||
}); |
|||
return; |
|||
} |
|||
if (!this.withdraw.amount) { |
|||
this.$message({ |
|||
message: this.$t('wallet.enterDrawNum'), |
|||
type: "warn", |
|||
duration: 2000, |
|||
}); |
|||
return; |
|||
} |
|||
if (!this.withdraw.password) { |
|||
this.$message({ |
|||
// message: this.$t('login.password'), |
|||
message: this.$t('common.enterPwd'), |
|||
type: "warn", |
|||
duration: 2000, |
|||
}); |
|||
return; |
|||
} |
|||
if (this.getEmailCodeLock) { |
|||
return |
|||
}; |
|||
this.JStime = 300; |
|||
this.tiemr = setInterval(() => { |
|||
if (this.JStime === 0) { |
|||
this.getEmailCodeLock = false; |
|||
clearInterval(this.tiemr); |
|||
return; |
|||
} |
|||
this.JStime--; |
|||
}, 1000) |
|||
this.getEmailCodeLock = true; |
|||
// |
|||
// let gdata = {bt:this.withdraw.addressType,baddr:this.withdraw.address,bnum:this.withdraw.amount} |
|||
let gdata = { |
|||
bt: this.withdrawCoin, |
|||
baddr: this.withdraw.address, |
|||
bnum: this.withdraw.amount |
|||
} |
|||
Member.getWdcode(gdata).then(res => { |
|||
// console.log(res, 11111) |
|||
this.$message({ |
|||
message: `${this.$t("login.sendOK")}`, |
|||
type: "success", |
|||
duration: 2000, |
|||
}); |
|||
}); |
|||
}, |
|||
addressText(){ |
|||
$("#withdraw").modal("hide"); |
|||
this.$router.push("/wallet/address") |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
this.getPaypal() |
|||
this.getUserAssets(); |
|||
this.getCoinAssets(); |
|||
this.createWalletAddress(); |
|||
this.getUserInfo(); |
|||
this.getAuthInfo(); |
|||
}, |
|||
|
|||
mounted() { |
|||
const clipboard = new ClipboardJS(".dopsite-control"); |
|||
const clipboard1 = new ClipboardJS(".dopsite-control1"); |
|||
|
|||
clipboard.on("success", function(e) { |
|||
$(".my-pop").popover("show"); |
|||
setTimeout(function() { |
|||
$("#deposite-address").blur(); |
|||
$(".my-pop").popover("hide"); |
|||
}, 1000); |
|||
// 清除选取内容 |
|||
// e.clearSelection(); |
|||
}); |
|||
clipboard1.on("success", function(e) { |
|||
$(".my-pop1").popover("show"); |
|||
setTimeout(function() { |
|||
$("#deposite-address1").blur(); |
|||
$(".my-pop1").popover("hide"); |
|||
}, 1000); |
|||
// 清除选取内容 |
|||
// e.clearSelection(); |
|||
}); |
|||
|
|||
clipboard.on("error", function(e) { |
|||
// console.error('Action:', e.action); |
|||
// console.error('Trigger:', e.trigger); |
|||
}); |
|||
clipboard1.on("error", function(e) { |
|||
// console.error('Action:', e.action); |
|||
// console.error('Trigger:', e.trigger); |
|||
}); |
|||
// 首页直接进入充值 |
|||
let isNeedScroll = this.$route.fullPath.split('?buy=')[1]; |
|||
// console.log(this.$route.fullPath,121212121, isNeedScroll); |
|||
if (isNeedScroll) { |
|||
setTimeout(() => { |
|||
this.PageScrollTo(775); |
|||
}, 1500); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.nav-two { |
|||
.nav-item { |
|||
cursor: pointer; |
|||
position: relative; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
width: 0; |
|||
height: 2px; |
|||
background: #007bff; |
|||
position: absolute; |
|||
bottom: -13px; |
|||
left: 0; |
|||
@include css3(transition, width 0.2s); |
|||
} |
|||
|
|||
&.active, |
|||
&:hover { |
|||
&::after { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
tr { |
|||
color: #172636; |
|||
|
|||
&:nth-of-type(2n-1) { |
|||
background-color: #e9e9e9; |
|||
} |
|||
|
|||
&:nth-of-type(2n) { |
|||
background-color: #e9e9e9; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-box { |
|||
@include flexible(row, space-between); |
|||
} |
|||
|
|||
.active { |
|||
border-bottom: 1px solid; |
|||
} |
|||
|
|||
.upload-demo { |
|||
::v-deep .el-upload-dragger { |
|||
width: 200px; |
|||
height: 150px; |
|||
} |
|||
|
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
|
|||
::v-deep { |
|||
.el-step__title.is-process { |
|||
color: white; |
|||
} |
|||
|
|||
.el-upload-dragger { |
|||
background-color: #1e2834; |
|||
} |
|||
} |
|||
|
|||
.label { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.getCodeAA { |
|||
border: 1px solid #444; |
|||
padding: 5px 10px; |
|||
border-radius: 30px; |
|||
} |
|||
|
|||
.user { |
|||
background-color: #ccc; |
|||
} |
|||
</style> |
|||
@ -1,277 +0,0 @@ |
|||
<template> |
|||
<div class="wallet-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('wallet.recharge')}}&{{$t('wallet.withdrawal')}}</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-12 mt15"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item fn-16"> |
|||
<a class="nav-link " :class="currentTab =='deposit'? 'active':''" data-toggle="pill" href="#deposit" role="tab" aria-selected="false" @click="currentTab = 'deposit'">{{$t('wallet.rechargeRecord')}}</a> |
|||
</li> |
|||
<li class="nav-item fn-16"> |
|||
<a class="nav-link " :class="currentTab =='withdrawal'? 'active':''" data-toggle="pill" href="#withdrawal" role="tab" aria-selected="false" @click="currentTab = 'withdrawal'">{{$t('wallet.withdrawalRecord')}}</a> |
|||
</li> |
|||
<!-- <li class="nav-item fn-16"> |
|||
<a class="nav-link " data-toggle="pill" href="#paypal" role="tab" aria-selected="false" @click="currentTab = 'paypal'">Paypal{{$t('wallet.rechargeRecord')}}</a> |
|||
</li> --> |
|||
</ul> |
|||
<div class="row pt-3"> |
|||
<div class="form-group col-sm-3"> |
|||
<input type="text" v-model="search_coin" class="form-control" :placeholder="$t('wallet.assetsName')" /> |
|||
</div> |
|||
<div class="form-group col-sm-3"> |
|||
<el-select v-model="submitStatus" :placeholder="$t('wallet.selectStatus')"> |
|||
<el-option v-for="item in states" :key="item.value" :value="item.value" :label="item.label"> |
|||
<span>{{item.label}}</span> |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<!-- <div class="form-group col-sm-5"> |
|||
<el-date-picker :value="timeRange" type="daterange" :range-separator="$t('wallet.to')" :start-placeholder="$t('wallet.startTime')" :end-placeholder="$t('wallet.entTIme')" @change="setTimeRange"></el-date-picker> |
|||
</div> --> |
|||
<!-- <div class="form-group col-sm-1 px-0"> |
|||
<button class="btn btn-outline-primary mb-2" @click="addCondition">{{$t('wallet.search')}}</button> |
|||
</div> --> |
|||
</div> |
|||
<div class="tab-content"> |
|||
<!-- 充值 --> |
|||
<div v-infinite-scroll="load1" class="tab-pane funding-table fade show" :class="currentTab =='deposit'? 'active':''" id="deposit" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('wallet.assets')}}</th> |
|||
<th>{{$t('wallet.date')}}</th> |
|||
<!-- <th>{{$t('wallet.address')}}/{{$t('wallet.hash')}}</th> --> |
|||
<th>{{$t('wallet.num')}}</th> |
|||
<!-- <th>{{$t('wallet.progress')}}</th> --> |
|||
<th class="text-right">{{$t('wallet.status')}}</th> |
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in depositHistories" :key="item.id" v-if="seek(item)"> |
|||
<td> |
|||
<img src="../../assets/img/icon/1.png" alt="eth" /> {{item.coin_name}} |
|||
</td> |
|||
<td>{{item.datetime|parseTime}}</td> |
|||
<!-- <td>{{item.address}}</td> --> |
|||
<td>{{item.amount}}</td> |
|||
<!-- <td>-/-</td> --> |
|||
<td class="text-right"> |
|||
<span class="decreace" v-if="item.status == Globals.Status.Funding.FAIL">{{$t('wallet.error')}}</span> |
|||
<span class="increace" v-if="item.status == Globals.Status.Funding.SUCCESS">{{$t('wallet.success')}}</span> |
|||
<span class="color-cls-gray" v-if="item.status == Globals.Status.Funding.PENDING">{{$t('wallet.underReview')}}</span> |
|||
</td> |
|||
|
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<!-- 提币 --> |
|||
<div v-infinite-scroll="load2" class="tab-pane funding-table fade show" :class="currentTab =='withdrawal'? 'active':''" id="withdrawal" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('wallet.assets')}}</th> |
|||
<th>{{$t('wallet.date')}}</th> |
|||
<th>{{$t('wallet.address')}}/{{$t('wallet.hash')}}</th> |
|||
<th>{{$t('wallet.num')}}</th> |
|||
<th>{{$t('wallet.handlingFee1')}}</th> |
|||
<th class="text-right">{{$t('wallet.status')}}</th> |
|||
<!-- <th class="text-right">{{$t('contract.c0')}}</th> --> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in withdrawRecords" :key="item.id" v-if="seek(item)"> |
|||
<td> |
|||
<img src="../../assets/img/icon/1.png" alt="eth" /> |
|||
{{ item.coin_name }} |
|||
</td> |
|||
<td>{{ item.datetime|parseTime }}</td> |
|||
<td>{{ item.address }}</td> |
|||
<td>{{ item.amount }}</td> |
|||
<td>{{item.withdrawal_fee}}</td> |
|||
<td class="text-right"> |
|||
{{item.status_text}} |
|||
</td> |
|||
<!-- <td v-if="item.status==0" class="text-right">{{$t('wallet.processing')}}</td> |
|||
<td v-if="item.status==1" class="text-right">{{$t('wallet.success')}}</td> |
|||
<td v-if="item.status==2" class="text-right">{{$t('wallet.error')}}</td> --> |
|||
<!-- <td class="text-right"> |
|||
<button v-if="item.status==0" class="btn btn-danger btn-sm" @click="cancelWithdraw(item)">{{$t('contract.c2')}}</button> |
|||
</td> --> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<!-- paypal充值记录 --> |
|||
<div v-infinite-scroll="load3" class="tab-pane funding-table fade show" id="paypal" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('wallet.assets')}}</th> |
|||
<th>{{$t('wallet.date')}}</th> |
|||
<th>{{$t('wallet.num')}}</th> |
|||
<th class="text-right">{{$t('wallet.status')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item,index) in rechargeManualLogs" :key="index"> |
|||
<td> |
|||
<img src="../../assets/img/Group12@2x.png" alt="eth" /> |
|||
<!-- {{ item.coin_name }} --> |
|||
</td> |
|||
<td>{{ item.created_at|parseTime }}</td> |
|||
<td>{{ item.num }}</td> |
|||
<td v-if="item.status==0" class="text-right">{{$t('wallet.processing')}}</td> |
|||
<td v-if="item.status==1" class="text-right">{{$t('wallet.success')}}</td> |
|||
<td v-if="item.status==2" class="text-right">{{$t('wallet.error')}}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentTab: null, |
|||
withdrawRecords: [], // 提币记录 |
|||
depositHistories: [], // 充值记录 |
|||
rechargeManualLogs: [],// paypal充值记录 |
|||
search_coin: '', // 搜索币种 |
|||
submitStatus: '', // 提交状态 |
|||
timeRange: [], |
|||
} |
|||
}, |
|||
|
|||
computed: { |
|||
states() { |
|||
return [{ |
|||
label: this.$t('wallet.success'), |
|||
value: this.Globals.Status.Funding.SUCCESS, |
|||
}, |
|||
{ |
|||
label: this.$t('wallet.error'), |
|||
value: this.Globals.Status.Funding.FAIL, |
|||
}, |
|||
{ |
|||
label: this.$t('wallet.processing'), |
|||
value: this.Globals.Status.Funding.PENDING, |
|||
} |
|||
]; |
|||
}, |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
getWithdrawRecords() { |
|||
Wallet.withdrawalRecord().then(data => { |
|||
this.withdrawRecords = data.data; |
|||
}).catch(err => { }); |
|||
}, |
|||
|
|||
getDepositHistories() { |
|||
Wallet.depositHistory().then(data => { |
|||
this.depositHistories = data.data; |
|||
// console.log( this.depositHistories, ' this.depositHistories') |
|||
}).catch(err => { }); |
|||
}, |
|||
|
|||
getRechargeManualLog() { |
|||
Wallet.rechargeManualLog().then(data => this.rechargeManualLogs = data.data).catch(err => { }); |
|||
}, |
|||
|
|||
update() { |
|||
if (this.currentTab == "deposit") { |
|||
// 获取充值记录 |
|||
this.getDepositHistories(); |
|||
} else if (this.currentTab == "withdrawal") { |
|||
// 获取提币记录 |
|||
this.getWithdrawRecords(); |
|||
}else if(this.currentTab == "paypal"){ |
|||
// 获取paypal充值记录 |
|||
this.getRechargeManualLog(); |
|||
} |
|||
}, |
|||
|
|||
setTimeRange(...args) { |
|||
// console.log(args); |
|||
}, |
|||
|
|||
addCondition() { |
|||
|
|||
}, |
|||
|
|||
seek(item) { |
|||
let res1, |
|||
res2, |
|||
res3; |
|||
const reg = new RegExp(this.search_coin, "gi"); |
|||
if(this.currentTab!='paypal'){ |
|||
res1 = !this.search_coin || item.coin_name.search(reg) >= 0; |
|||
} |
|||
|
|||
res2 = !this.submitStatus || item.status === this.submitStatus; |
|||
|
|||
return res1 && res2; |
|||
|
|||
}, |
|||
cancelWithdraw(item) { |
|||
Wallet.cancelWithdraw({ withdraw_id: item.id }).then(res => { |
|||
this.$message.success(this.$t('contract.d4')); |
|||
this.getWithdrawRecords() |
|||
}) |
|||
}, |
|||
load1() { |
|||
console.log('load1') |
|||
}, |
|||
|
|||
load2() { |
|||
console.log('load2') |
|||
}, |
|||
|
|||
load3() { |
|||
console.log('load3') |
|||
}, |
|||
}, |
|||
|
|||
watch: { |
|||
currentTab() { |
|||
|
|||
this.update(); |
|||
} |
|||
}, |
|||
|
|||
created() { |
|||
// console.log(this.Funding); |
|||
// console.info(this.$route.query.currentTab) |
|||
if(this.$route.query.currentTab){ |
|||
this.currentTab=this.$route.query.currentTab |
|||
}else{ |
|||
this.currentTab = "deposit"; |
|||
} |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
</style> |
|||
@ -1,248 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<div class="login-type"> |
|||
<!-- 选项卡 --> |
|||
<ul class="login-type__container"> |
|||
<li v-if="status.google_status" @click="checkType=3" :class="[`login-type__controls`, {active:checkType==3}]">Google</li> |
|||
<li v-if="status.phone_status" @click="checkType=1" :class="[`login-type__controls`, {active:checkType==1}]">{{$t('login.sms')}}</li> |
|||
<li v-if="status.email_status" @click="checkType=2" :class="[`login-type__controls`, {active:checkType==2}]">{{$t('login.email')}}</li> |
|||
</ul> |
|||
</div> |
|||
<!-- show懒加载dom 以维持验证码的状态 --> |
|||
<div class="verify-box" v-for="(item, index) in codeLists" :key="index" v-show="item.type===checkType"> |
|||
<!-- 提示信息 --> |
|||
<figure class="login-tips"> |
|||
<img :src="item.url" alt /> |
|||
<figcaption class="content"> |
|||
{{ item.caption }} |
|||
<br /> |
|||
{{ ajar[item.account] }} |
|||
</figcaption> |
|||
</figure> |
|||
|
|||
<!-- google没有自动发送 --> |
|||
<div v-if="item.resend" class="resend-btn"> |
|||
<!-- 短信验证码 或者 邮箱 --> |
|||
<get-code class="btn-primary" :ref="item.name" :type="1" :data="{type:item.type}" /> |
|||
</div> |
|||
|
|||
<h5 class="verify-title">{{item.title}}</h5> |
|||
<ul class="code-inputs"> |
|||
<li v-for="pos in 6" class="code-items" :key="pos"> |
|||
<input pattern="[0-9]*" class="form-control" type="text" placeholder :ref="`space-${item.name}`" @keyup="handleKeyUp(item.name, pos-1, $event)" @input="handleInput(item.name, pos-1, $event)" @paste="true" /> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: 'dcode', |
|||
props: [ |
|||
'status' |
|||
], |
|||
mounted() { |
|||
let data = this.status |
|||
if (data.google_status == 1) { |
|||
this.checkType = 3; |
|||
} else if (data.phone_status == 1) { |
|||
this.checkType = 1; |
|||
this.$nextTick(() => { |
|||
this.$refs.smsCode[0].handle(); |
|||
}); |
|||
} else if (data.email_status == 1) { |
|||
this.checkType = 2; |
|||
this.$nextTick(() => { |
|||
this.$refs.emailCode[0].handle(); |
|||
}); |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 验证码类型 |
|||
checkType: 1, |
|||
|
|||
// 验证码输入 |
|||
codeLists: [{ |
|||
type: 3, |
|||
url: require("@/assets/icon/grip-vertical.svg"), |
|||
caption: this.$t('login.googleVer', { |
|||
num: '6' |
|||
}), |
|||
title: "Authentication Code", |
|||
resend: false, |
|||
name: "googleCode", |
|||
account: "google" |
|||
}, |
|||
{ |
|||
type: 1, |
|||
url: require("@/assets/icon/chat-dots.svg"), |
|||
caption: `${this.$t('login.phoneCode', { num: 6 })}：`, |
|||
title: "Verification Code", |
|||
resend: true, |
|||
name: "smsCode", |
|||
account: "phone" |
|||
}, |
|||
{ |
|||
type: 2, |
|||
url: require("@/assets/icon/envelope.svg"), |
|||
caption: `${this.$t('login.emailCode', { num: 6 })}：`, |
|||
title: "Verification Code", |
|||
resend: true, |
|||
name: "emailCode", |
|||
account: "email" |
|||
} |
|||
], |
|||
ajar: {}, |
|||
skipKeyup: false, |
|||
// 验证码的值 |
|||
smsCode: new Array(6), |
|||
googleCode: new Array(6), |
|||
emailCode: new Array(6), |
|||
} |
|||
}, |
|||
methods: { |
|||
handleKeyUp(name, pos, $event) { |
|||
// 监听指令 |
|||
switch ($event.code) { |
|||
|
|||
case "Backspace": |
|||
console.log(11222); |
|||
if (this.skipKeyup === true) { |
|||
this.skipKeyup = false; |
|||
return; |
|||
} |
|||
|
|||
if (pos - 1 >= 0) { |
|||
this.$refs[`space-${name}`][pos - 1].value = ""; |
|||
// 删除前值 |
|||
this.$refs[`space-${name}`][pos - 1].focus(); |
|||
} |
|||
break; |
|||
|
|||
case "ArrowLeft": |
|||
// case "ArrowUp": |
|||
if (pos - 1 >= 0) { |
|||
this.$refs[`space-${name}`][pos - 1].focus(); |
|||
} |
|||
break; |
|||
// case "ArrowDown": |
|||
case "ArrowRight": |
|||
if (pos + 1 <= 5) { |
|||
this.$refs[`space-${name}`][pos + 1].focus(); |
|||
} |
|||
break; |
|||
} |
|||
}, |
|||
handleInput(name, pos, $event) { |
|||
if (this.skipInput == true) { |
|||
this.skipInput = false; |
|||
return; |
|||
} |
|||
|
|||
let val = $event.target.value; |
|||
if (val) { |
|||
// 执行了输入 |
|||
|
|||
if (val.match(/^\d{1,2}$/)) { |
|||
if (val.length == 2) { |
|||
// 再次输入时 重置值 |
|||
|
|||
val = _.trim(val, this[name][pos]); |
|||
$event.target.value = val; |
|||
} |
|||
|
|||
// 找到下一个空节点 |
|||
const tmpArr = Array.from(this.$refs[`space-${name}`]); |
|||
for (let item of tmpArr) { |
|||
if (!item.value) { |
|||
item.focus(); |
|||
break; |
|||
} |
|||
} |
|||
|
|||
this.chkLoginSave(name, pos, $event.target.value); |
|||
|
|||
// 非法的值 |
|||
} else { |
|||
$event.target.value = this[name][pos] || ""; |
|||
} |
|||
} else { |
|||
// 执行了删除 第一次删除跳过keyup事件 |
|||
this.skipKeyup = true; |
|||
} |
|||
}, |
|||
chkLoginSave(name, pos, value) { |
|||
this[name][pos] = value; |
|||
// 所有框都填满时 触发提交 |
|||
if (this[name].join("").match(/^\d{6}$/)) { |
|||
this.$emit('complete', { code_type: this.checkType, code: this[name].join("") }) |
|||
}; |
|||
|
|||
// if (this[name].every(item => /^\d$/.test(item))) this.step3(); |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.login-type { |
|||
border-bottom: 1px solid #eee; |
|||
|
|||
.login-type__container { |
|||
@include flexible(row, flex-start, center); |
|||
|
|||
.login-type__controls { |
|||
// border: 1px solid red; |
|||
width: 88px; |
|||
height: 40px; |
|||
@include flexible(row, center, center); |
|||
cursor: pointer; |
|||
|
|||
&.active { |
|||
border-bottom: 1px solid rgba(95, 116, 160, 0.8); |
|||
color: $cls-blue; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.verify-box { |
|||
min-width: 328px; |
|||
height: 258px; |
|||
@include flexible(column, flex-start, left); |
|||
|
|||
// border : 1px solid red; |
|||
|
|||
.login-tips { |
|||
margin: 15px 0; |
|||
@include flexible(row, flex-start, center); |
|||
|
|||
img { |
|||
width: 36px; |
|||
margin-right: 8px; |
|||
} |
|||
} |
|||
|
|||
.resend-btn { |
|||
margin: 15px auto; |
|||
} |
|||
|
|||
.verify-title { |
|||
margin: 15px 0; |
|||
@include font(OpenSans-Regular, 15, inherit, $cls-blue); |
|||
} |
|||
|
|||
.code-inputs { |
|||
@include flexible(row, space-between); |
|||
|
|||
.code-items input { |
|||
width: 48px; |
|||
height: 48px; |
|||
text-align: center; |
|||
@include font(OpenSans-Regular, 22, 32, #fff); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,16 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
期权账户 |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
|
|||
</style> |
|||
@ -1,84 +0,0 @@ |
|||
<template> |
|||
<div> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div |
|||
class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4" |
|||
> |
|||
<div class="h3">{{$t('otc.j1')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane funding-table fade show active"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('otc.j2')}}</th> |
|||
<th>{{$t('otc.j3')}}</th> |
|||
<th>{{$t('otc.j4')}}</th> |
|||
<th>{{$t('otc.c9')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in list" :key="item.id"> |
|||
<td>{{ item.created_at }}</td> |
|||
<td> |
|||
{{ item.usable_balance }} |
|||
{{ item.coin_name }} |
|||
</td> |
|||
<td> |
|||
{{ item.freeze_balance }} |
|||
{{ item.coin_name }} |
|||
</td> |
|||
<td> |
|||
<button class="btn btn-primary btn-sm" @click="$router.push({path:'/otc/index'})">{{$t('otc.b7')}}</button> |
|||
</td> |
|||
</tr> |
|||
<tr v-if="!list.length"> |
|||
<td colspan="4"> |
|||
<no-record /> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import Otc from "@/api/otc"; |
|||
export default { |
|||
name: "contract-assets", |
|||
data() { |
|||
return { |
|||
CurrentObj: {}, |
|||
list: [], |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.getList(); |
|||
}, |
|||
methods: { |
|||
changePageCurrent(idx) { |
|||
this.CurrentObj.page = idx; |
|||
this.getList(); |
|||
}, |
|||
getList() { |
|||
let data = { |
|||
page: this.CurrentObj.page, |
|||
}; |
|||
Otc.otcAccount(data).then((res) => { |
|||
this.CurrentObj = res; |
|||
this.list = res; |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,93 +0,0 @@ |
|||
<template> |
|||
<div class="wallet-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">返佣记录</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="panel-box container"> |
|||
<div class="row pt-3"> |
|||
<div class="div-group col-sm-3"> |
|||
<label>资产名</label> |
|||
<input type="text" class="form-control" placeholder="请输入资产名" /> |
|||
</div> |
|||
<div class="form-group col-sm-2"> |
|||
<label class="d-block"> </label> |
|||
<button type="submit" class="btn btn-outline-primary mb-2">搜索</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12 mt15"> |
|||
<div class="markets-pair-list mb-3"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a |
|||
class="nav-link active" |
|||
data-toggle="pill" |
|||
href="#tab1" |
|||
role="tab" |
|||
aria-selected="false" |
|||
>返佣记录</a> |
|||
</li> |
|||
</ul> |
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table"> |
|||
<thead> |
|||
<tr> |
|||
<th>日期</th> |
|||
<th>资产</th> |
|||
<th>数量</th> |
|||
<th class="text-right">返佣号</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in 10" :key="item"> |
|||
<td>2020-10-10 20:20:20</td> |
|||
<td> |
|||
<img src="../../assets/img/icon/1.png" alt="eth" /> ETH |
|||
</td> |
|||
<td>123</td> |
|||
<td class="text-right">321</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<nav aria-label="Page navigation"> |
|||
<ul class="pagination"> |
|||
<li class="page-item disabled"> |
|||
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a> |
|||
</li> |
|||
<li class="page-item"> |
|||
<a class="page-link" href="#">1</a> |
|||
</li> |
|||
<li class="page-item"> |
|||
<a class="page-link" href="#">2</a> |
|||
</li> |
|||
<li class="page-item"> |
|||
<a class="page-link" href="#">3</a> |
|||
</li> |
|||
<li class="page-item"> |
|||
<a class="page-link" href="#">下一页</a> |
|||
</li> |
|||
</ul> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -1,142 +0,0 @@ |
|||
<template> |
|||
<div class="wallet-page"> |
|||
<secondary-nav></secondary-nav> |
|||
<div class="container"> |
|||
<div class="w-100 d-flex justify-content-between align-items-center mb-3 mt-4"> |
|||
<div class="h3">{{$t('wallet.transfer')}}</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-5"> |
|||
<inner-transfer :coinName.sync="coinName" :showHistoryLink="false" :isRestCoin="true"></inner-transfer> |
|||
</div> |
|||
<div class="col-md-7"> |
|||
<div class="panel-box bg-panel"> |
|||
<div class="heading d-flex justify-content-between align-items-center"> |
|||
<div class="h6">{{$t('wallet.transferDescription')}}</div> |
|||
</div> |
|||
<div class="tab-content"> |
|||
<ul> |
|||
<li class="mb-2">1.{{$t('wallet.handlingFee')}}</li> |
|||
<!-- <li class="mb-2">2.{{$t('wallet.onlyForeignExchange',{name:'USDT'})}}。</li> |
|||
<li class="mb-2">3.{{$t('wallet.onlySustainable',{name:'BTC'})}}。</li> |
|||
<li class="mb-2">4.{{$t('wallet.inCase1',{name:'USDT'})}}。</li> --> |
|||
<li class="mb-2">2.{{$t('wallet.inCase2',{name:'USDT'})}}</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12 mt15"> |
|||
<div class="markets-pair-list"> |
|||
<ul class="nav nav-pills" id="pills-tab" role="tablist"> |
|||
<li class="nav-item" v-if="coinName"> |
|||
<a class="nav-link active" data-toggle="pill" href @click.prevent="isCondition=true" role="tab" aria-selected="false">{{coinName}} {{$("transfer.transferRecord")}}</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" data-toggle="pill" href @click.prevent="isCondition=false" role="tab" aria-selected="false">{{ $t("wallet.allTransfer") }}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<div class="tab-content"> |
|||
<div class="tab-pane fade show active" id="tab1" role="tabpanel"> |
|||
<table class="table stripe"> |
|||
<thead> |
|||
<tr> |
|||
<th>{{$t('wallet.assets')}}</th> |
|||
<th>{{$t('wallet.transferQuantity')}}</th> |
|||
<th>{{$t('wallet.direction')}}</th> |
|||
<th>{{$t('wallet.date')}}</th> |
|||
<th class="text-right">{{$t('wallet.status')}}</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="item in transferRecords" :key="item.id" v-if="seek(item)"> |
|||
<td> |
|||
<img src="../../assets/img/icon/1.png" alt="eth" /> |
|||
{{ item.coin_name }} |
|||
</td> |
|||
<td>{{ item.amount }}</td> |
|||
<td>{{ $t(`wallet.${item.draw_out_direction}`) }} -> {{ $t(`wallet.${item.into_direction}`) }}</td> |
|||
<td>{{ item.datetime|parseTime }}</td> |
|||
<td class="text-right"> |
|||
<!--1 成功 2 失败 --> |
|||
<span class="fail" v-if="item.status == Globals.Status.Transfer.FAIL">{{$t('wallet.error')}}</span> |
|||
<span class="success" v-else-if="item.status == Globals.Status.Transfer.SUCCESS">{{$t('wallet.success')}}</span> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import InnerTransfer from "../components/inner-transfer.vue"; |
|||
import Wallet from "@/api/wallet"; |
|||
export default { |
|||
components: { |
|||
InnerTransfer |
|||
}, |
|||
data() { |
|||
return { |
|||
transferRecords: [], |
|||
isCondition: false, // 用于tab切换 默认不条件切换 |
|||
coinName: '', |
|||
}; |
|||
}, |
|||
|
|||
watch: { |
|||
|
|||
coinName(val, oldVal) { |
|||
// 第一次选择币种 手动添加条件 |
|||
if (val && !oldVal) this.isCondition = true; |
|||
|
|||
// 清空币种时 默认查询所有 |
|||
if (!val && oldVal) this.isCondition = false; |
|||
}, |
|||
|
|||
isCondition(val) { |
|||
// console.log(val) |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
// 过滤查找当前币种的记录 |
|||
seek(item) { |
|||
return !this.isCondition || item.coin_name === this.coinName; |
|||
}, |
|||
|
|||
getTransferRecords() { |
|||
Wallet.transferRecord() |
|||
.then(data => { |
|||
this.transferRecords = data.data; |
|||
}) |
|||
.catch(err => {}); |
|||
} |
|||
}, |
|||
created() { |
|||
this.getTransferRecords(); |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.table { |
|||
tr { |
|||
td { |
|||
cursor: default !important; |
|||
} |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
|
Before Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in new issue