You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1071 lines
30 KiB
1071 lines
30 KiB
<template> |
|
<div> |
|
<!-- 出售 OTC二级标题 --> |
|
<ul class="exchange-menu-tab"> |
|
<li class="exchange-item" v-for="(item, index) in list" :key="index"> |
|
<a |
|
class="blue" |
|
:class="{blueOne: changeblue == index}" |
|
@click="hangdelClickBlue(index, item)" |
|
>{{ item.coinName }}</a |
|
> |
|
</li> |
|
</ul> |
|
<!-- <ExchangeSellBtn :sellcoinName="coinName"></ExchangeSellBtn> --> |
|
<div> |
|
<!-- 出售 表格 --> |
|
<div class="bian"> |
|
<!-- 商家（成单|完成率) --> |
|
<el-table :data="tableData" style="width: 100%"> |
|
<el-table-column |
|
prop="userImg" |
|
:label=" |
|
$t('exchangeotc.transaction.user') + |
|
'（' + |
|
$t('exchangeotc.transaction.userSuccess') + |
|
'|' + |
|
$t('exchangeotc.transaction.userAchieve') + |
|
')' |
|
" |
|
> |
|
<template slot-scope="scope"> |
|
<div class="specialInfor"> |
|
<span class="imgTou" v-if="scope.row.userImg"> |
|
<img :src="fileImg + scope.row.userImg" alt /> |
|
</span> |
|
<span class="imgTou" v-else="(scope.row.userImg = !'')"> |
|
<img src="../../assets/otc/touxiang.png" alt /> |
|
</span> |
|
<span> |
|
<span class="touxiangs"> |
|
{{ scope.row.nickname }} |
|
<br /> |
|
<span class="marAdnum"> |
|
（ |
|
{{ scope.row.adTransNum }} |
|
| |
|
{{ |
|
(scope.row.adMarkNum / scope.row.adTransNum) | formatW |
|
}} |
|
%） |
|
</span> |
|
</span> |
|
</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<!-- 数量 --> |
|
<el-table-column |
|
prop="lastNum" |
|
:label="$t('exchangeotc.transaction.lastNum')" |
|
> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.lastNum }} {{ scope.row.coinName }}</span> |
|
</template> |
|
</el-table-column> |
|
<!-- 限额 --> |
|
<el-table-column |
|
prop="minLimit" |
|
:label="$t('exchangeotc.transaction.minLimit')" |
|
> |
|
<template slot-scope="scope"> |
|
<span |
|
>{{ scope.row.minLimit }}-{{ scope.row.maxLimit |
|
}}{{ scope.row.unitName }}</span |
|
> |
|
</template> |
|
</el-table-column> |
|
<!-- 单价 --> |
|
<el-table-column |
|
prop="price" |
|
:label="$t('exchangeotc.transaction.price')" |
|
> |
|
<template slot-scope="scope"> |
|
<span>{{ scope.row.price }}{{ scope.row.unitName }}</span> |
|
</template> |
|
</el-table-column> |
|
<!-- 支付方式 --> |
|
<el-table-column |
|
prop="adPay" |
|
:label="$t('exchangeotc.transaction.adPay')" |
|
> |
|
<template slot-scope="scope"> |
|
<div class="fukung"> |
|
<span v-if="scope.row.adPay.indexOf('WX') != -1"> |
|
<img |
|
src="../../assets/otc/weixin.png" |
|
alt |
|
class="tableimg tableimgWX" |
|
/> |
|
</span> |
|
<span v-if="scope.row.adPay.indexOf('ZFB') != -1"> |
|
<img |
|
src="../../assets/otc/zhifubao.png" |
|
alt |
|
class="tableimg tableimgZFB" |
|
/> |
|
</span> |
|
<span v-if="scope.row.adPay.indexOf('BANK') != -1"> |
|
<img |
|
src="../../assets/otc/qianbao.png" |
|
alt |
|
class="tableimg tableimgBANK" |
|
/> |
|
</span> |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<!-- 操作 --> |
|
<el-table-column |
|
prop="operation" |
|
:label="$t('exchangeotc.transaction.operation')" |
|
> |
|
<template slot-scope="scope"> |
|
<!-- 出售 --> |
|
<div class="btn-exchange" @click="hangdleBuy(scope.row)"> |
|
{{ $t('exchangeotc.transaction.sell') }} |
|
{{ scope.row.coinName }} |
|
</div> |
|
</template> |
|
</el-table-column> |
|
<div slot="empty"> |
|
<div> |
|
<img src="../../assets/home/ic_shuju.png" alt /> |
|
</div> |
|
<!-- 暂无数据 --> |
|
<div>{{ $t('balances.table.header_nodata') }}</div> |
|
</div> |
|
</el-table> |
|
<!-- 添加分页 --> |
|
<div v-show="total"> |
|
<el-pagination |
|
class="page" |
|
@size-change="handleSizeChange" |
|
@current-change="handleCurrentChange" |
|
:current-page.sync="currentPage" |
|
:page-size="pageSize" |
|
layout="total, prev, pager, next" |
|
:total="total" |
|
></el-pagination> |
|
</div> |
|
</div> |
|
|
|
<!-- 购买对话框 --> |
|
<el-dialog |
|
@close="closeDialog()" |
|
:visible.sync="dialogVisible" |
|
width="1540px" |
|
> |
|
<!-- 第1行 --> |
|
<div class="exchange-dialog"> |
|
<span class="imgTou" v-if="buyData.userImg"> |
|
<img :src="fileImg + buyData.userImg" alt /> |
|
</span> |
|
<span class="imgTou" v-else="(buyData.userImg = !'')"> |
|
<img src="../../assets/otc/touxiang.png" alt /> |
|
</span> |
|
<!-- 名字 --> |
|
<span class="yan"> |
|
{{ buyData.nickname }} |
|
<br /> |
|
({{ buyData.adTransNum }}|{{ |
|
(buyData.adMarkNum / buyData.adTransNum) | formatW |
|
}}%) |
|
</span> |
|
<!-- 单价 --> |
|
<span class="univalence1"> |
|
<span>{{ $t('exchangeotc.transaction.price') }}</span> |
|
<br /> |
|
{{ buyData.price }}{{ buyData.unitName }} |
|
</span> |
|
<!-- 单价 ,数量 --> |
|
<div class="dialog-input"> |
|
<!-- 最多出售 --> |
|
<el-input |
|
v-model="priceInput" |
|
:placeholder=" |
|
$t('exchangeotc.transaction.sell_un') + |
|
buyData.maxLimit + |
|
buyData.unitName |
|
" |
|
@keyup.native="priceProving($event, buyData.maxLimit)" |
|
@input="priceChange($event)" |
|
> |
|
<template slot="suffix"> |
|
<span class="wei">{{ buyData.unitName }}</span> |
|
</template> |
|
</el-input> |
|
|
|
<span>≈</span> |
|
<!-- 最多可出售 --> |
|
<el-input |
|
v-model="totalInput" |
|
:placeholder=" |
|
$t('exchangeotc.transaction.sell_cion') + |
|
buyData.lastNum + |
|
buyData.coinName |
|
" |
|
@keyup.native="totalProving($event)" |
|
@input="totalChange($event)" |
|
> |
|
<template slot="suffix"> |
|
<span class="wei">{{ buyData.coinName }}</span> |
|
</template> |
|
</el-input> |
|
</div> |
|
<div class="dialog-btnSELL"> |
|
<!-- 出售 --> |
|
<el-button @click="handleGou()" class="dialog-btn1">{{ |
|
$t('exchangeotc.transaction.sell') |
|
}}</el-button> |
|
<!-- 取 消 --> |
|
<div @click="dialogVisible = false" class="dialog-btn2"> |
|
{{ $t('exchangeotc.transaction.delete') }} |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 第2行 数量 --> |
|
<div class="exchange-total"> |
|
<span |
|
>{{ $t('exchangeotc.transaction.lastNum') }} {{ buyData.lastNum }} |
|
{{ buyData.coinName }}</span |
|
> |
|
</div> |
|
<!-- 第3行 支付方式--> |
|
<div class="exchange-money"> |
|
<div class="fukung"> |
|
<span v-if="buyDataType.indexOf('WX') != -1"> |
|
<img |
|
src="../../assets/otc/weixin.png" |
|
alt |
|
class="tableimg tableimgWX" |
|
/> |
|
</span> |
|
<span v-if="buyDataType.indexOf('ZFB') != -1"> |
|
<img |
|
src="../../assets/otc/zhifubao.png" |
|
alt |
|
class="tableimg tableimgZFB" |
|
/> |
|
</span> |
|
<span v-if="buyDataType.indexOf('BANK') != -1"> |
|
<img |
|
src="../../assets/otc/qianbao.png" |
|
alt |
|
class="tableimg tableimgBANK" |
|
/> |
|
</span> |
|
</div> |
|
</div> |
|
</el-dialog> |
|
|
|
<!-- 交易密码对话框 --> |
|
<div class="pawDialog"> |
|
<el-dialog |
|
:title="$t('exchangeotc.transaction.pwd')" |
|
:visible.sync="passdialogVisible" |
|
width="650px" |
|
> |
|
<div class="passIn"> |
|
<div>{{ $t('exchangeotc.transaction.tanPwd') }}:</div> |
|
<el-input |
|
v-model="passInput" |
|
:placeholder="$t('exchangeotc.transaction.pleasePwd')" |
|
type="password" |
|
></el-input> |
|
</div> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="handleDelSELL()">{{ |
|
$t('exchangeotc.transaction.delete') |
|
}}</el-button> |
|
<el-button |
|
type="primary" |
|
@click="handleSure(passInput)" |
|
:loading="loading" |
|
>{{ $t('exchangeotc.transaction.sure') }}</el-button |
|
> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
<script> |
|
// 引入子组件 |
|
// import ExchangeSellBtn from './exchange-sell-btn.vue'; |
|
// 获取请求 |
|
import {getCoin} from '@/api/coin.js'; |
|
import {getAdSellList} from '@/api/ad.js'; |
|
import {getSellOrder} from '@/api/order.js'; |
|
import {getKey} from '@/api/eth.js'; |
|
import {FILE_URL} from '@/api/app'; |
|
import {getListUserPay} from '@/api/userPay'; |
|
|
|
// 引入加密模块,对密码进行处理 |
|
const JSEncrypt = require('jsencrypt'); |
|
// 获取格式化时间函数 |
|
import {formatDate} from '@/common/filter'; |
|
// 引入cookie |
|
import Cookie from '@/common/cookie.js'; |
|
|
|
export default { |
|
name: 'ExchangeTableSell', |
|
// components: { |
|
// ExchangeSellBtn, |
|
// }, |
|
data() { |
|
return { |
|
list: [], |
|
changeblue: 0, |
|
coinName: {}, |
|
tableData: [], //列表 |
|
buyData: {}, //被点击购买的那一行 |
|
buyDataType: '', |
|
dialogVisible: false, |
|
passdialogVisible: false, |
|
priceInput: '', |
|
totalInput: '', |
|
passInput: '', |
|
gongKey: '', |
|
pageNum: 1, //接口固定数 |
|
pageSize: 10, //接口固定数，每页条数 |
|
currentPage: 1, //分页焦点页码 |
|
total: 0, //分页总条数 |
|
coinDecimal: 0, //小数位数 |
|
unitDecimal: 0, |
|
regCoin: '', //正则 |
|
regUnit: '', |
|
fileImg: '', |
|
userListPay: [], |
|
userData: '', //获取登陆信息 |
|
loading: false, |
|
// chushouLoading: false, |
|
// nowDate: '', //当前时间 |
|
}; |
|
}, |
|
created() { |
|
// if (Boolean(localStorage.getItem('nowPassNOValue'))) { |
|
// this.passdialogVisible = Boolean(localStorage.getItem('nowPassNOValue')); |
|
// } |
|
// if ( |
|
// localStorage.getItem('userpass') != '' && |
|
// localStorage.getItem('userpass') != null |
|
// ) { |
|
// if ( |
|
// localStorage.getItem('userdate') != '' && |
|
// localStorage.getItem('userdate') != null |
|
// ) { |
|
// this.passdialogVisible = false; |
|
// this.passInput = localStorage.getItem('userpass'); |
|
// this.nowDate = localStorage.getItem('userdate'); |
|
// } |
|
// } |
|
// this.userData = Cookie.get('userData'); //获取登陆信息 |
|
this.userData = localStorage.getItem('userData'); //获取登陆信息 |
|
this.fileImg = FILE_URL; |
|
// 获取币种 |
|
this.initCoin(); |
|
}, |
|
methods: { |
|
// 点击切换table栏，变色 |
|
hangdelClickBlue(index, text) { |
|
this.changeblue = index; |
|
this.coinName = text; |
|
// console.log(text); |
|
this.initBuyList(this.coinName); |
|
// console.log(this.coinName); |
|
}, |
|
// 获取币种 |
|
initCoin() { |
|
getCoin().then(res => { |
|
// console.log(res); |
|
this.list = res.data.data; |
|
this.coinName = this.list[0]; |
|
// console.log(this.coinName); |
|
|
|
this.coinDecimal = this.coinName.coinDecimal; |
|
this.unitDecimal = this.coinName.unitDecimal; |
|
this.regCoin = '^(\\d+)\\.(\\d{' + this.coinDecimal + '}).*$'; |
|
this.regUnit = '^(\\d+)\\.(\\d{' + this.unitDecimal + '}).*$'; |
|
// console.log(this.coinName); |
|
this.initBuyList(this.coinName); |
|
}); |
|
}, |
|
// 获取列表 |
|
initBuyList(name) { |
|
getAdSellList({ |
|
coinName: name.coinName, |
|
unitName: name.unitName, |
|
pageNum: this.pageNum, |
|
}).then(res => { |
|
this.pageNum = 0; |
|
// console.log(res); |
|
if (res.data.code === 200) { |
|
// alert('1212') |
|
this.tableData = res.data.data.rows; |
|
this.total = res.data.data.total; |
|
// console.log(this.tableData); |
|
} |
|
}); |
|
}, |
|
// 点击出售弹窗 |
|
hangdleBuy(row) { |
|
if (this.userData != '' && this.userData != undefined) { |
|
var id = localStorage.getItem('userID'); |
|
// console.log(id); |
|
// console.log(row); |
|
if (id == row.id) { |
|
// 请勿与自己发布的广告进行交易 |
|
this.$message.warning(this.$t('exchangeotc.input.order_tan')); |
|
return; |
|
} |
|
// 判断用户绑定支付方式跟广告支付方式的区别 |
|
getListUserPay().then(res => { |
|
if (res.data.code == 200) { |
|
this.userListPay = res.data.data; |
|
if (this.userListPay.length == 0) { |
|
// 您需激活至少一种的卖方的收款方式,才可以进行出售! |
|
this.$message.warning(this.$t('exchangeotc.input.adpay_one')); |
|
return; |
|
} |
|
|
|
for (let i = 0; i < this.userListPay.length; i++) { |
|
if (row.adPay.indexOf(this.userListPay[i].payType) != -1) { |
|
this.dialogVisible = true; |
|
this.buyData = row; |
|
this.buyDataType = this.buyData.adPay; |
|
return; |
|
} else { |
|
// 您需激活至少一种的卖方的收款方式,才可以进行出售! |
|
this.$message.warning(this.$t('exchangeotc.input.adpay_one')); |
|
return; |
|
} |
|
} |
|
} |
|
}); |
|
} else { |
|
// 您还未登录,请先登录! |
|
this.$message.warning(this.$t('exchangeotc.input.login_warn')); |
|
return; |
|
} |
|
}, |
|
// CNY 框的验证方法 |
|
priceProving(e, name) { |
|
if (e.target.value > name) { |
|
// 输入的数量大于最大限额,请重新输入 |
|
this.$message.warning(this.$t('exchangeotc.input.big_total')); |
|
this.totalInput = ''; |
|
this.priceInput = ''; |
|
return; |
|
} |
|
e.target.value = e.target.value.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符 |
|
// e.target.value = e.target.value.replace(/^\./g, ''); //验证第一个字符是数字 |
|
e.target.value = e.target.value.replace(/\.{2,}/g, ''); //只保留第一个, 清除多余的 |
|
e.target.value = e.target.value |
|
.replace('.', '$#$') |
|
.replace(/\./g, '') |
|
.replace('$#$', '.'); |
|
var reg = new RegExp(this.regUnit); //保留2位小数 |
|
e.target.value = e.target.value.replace(reg, '$1.$2'); |
|
if (e.target.value.indexOf('.') < 0 && e.target.value != '') { |
|
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 |
|
e.target.value = parseFloat(e.target.value); |
|
} |
|
if (e.target.value.indexOf('.') == 0) { |
|
//如果输入类似.123 变为0.123 |
|
e.target.value = '0' + e.target.value; |
|
} |
|
}, |
|
// BTC框的验证方法 |
|
totalProving(e) { |
|
e.target.value = e.target.value.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符 |
|
// e.target.value = e.target.value.replace(/^\./g, ''); //验证第一个字符是数字 |
|
e.target.value = e.target.value.replace(/\.{2,}/g, ''); //只保留第一个, 清除多余的 |
|
e.target.value = e.target.value |
|
.replace('.', '$#$') |
|
.replace(/\./g, '') |
|
.replace('$#$', '.'); |
|
var reg = new RegExp(this.regCoin); //保留6位小数 |
|
e.target.value = e.target.value.replace(reg, '$1.$2'); |
|
if (e.target.value.indexOf('.') < 0 && e.target.value != '') { |
|
//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 |
|
e.target.value = parseFloat(e.target.value); |
|
} |
|
if (e.target.value.indexOf('.') == 0) { |
|
//如果输入类似.123 变为0.123 |
|
e.target.value = '0' + e.target.value; |
|
} |
|
}, |
|
// CNY 传递参数给 BTC 函数 |
|
priceChange(e) { |
|
if (e == '') { |
|
this.totalInput = ''; |
|
var reg = new RegExp(this.regUnit); //保留2位小数 |
|
e = this.buyData.price * this.totalInput; |
|
e = e.toString().replace(reg, '$1.$2'); |
|
} else { |
|
this.totalInput = ''; |
|
var reg = new RegExp(this.regCoin); //保留6位小数 |
|
this.totalInput = e / this.buyData.price; |
|
this.totalInput = this.totalInput.toString().replace(reg, '$1.$2'); |
|
} |
|
}, |
|
// BTC 传递参数给 CNY 函数 |
|
totalChange(e) { |
|
if (e == '') { |
|
this.priceInput = ''; |
|
var reg = new RegExp(this.regCoin); //保留6位小数 |
|
e = this.priceInput / this.buyData.price; |
|
e = e.toString().replace(reg, '$1.$2'); |
|
} else { |
|
this.priceInput = ''; |
|
var reg = new RegExp(this.regUnit); //保留2位小数 |
|
this.priceInput = this.buyData.price * e; |
|
this.priceInput = this.priceInput.toString().replace(reg, '$1.$2'); |
|
} |
|
}, |
|
//关闭弹框的事件 |
|
closeDialog() { |
|
this.priceInput = ''; //清空数据 |
|
this.totalInput = ''; |
|
}, |
|
// 点击出售 密码弹窗 |
|
handleGou() { |
|
// 验证判断 |
|
if (this.priceInput == '') { |
|
this.$message.warning(this.$t('exchangeotc.input.total_data')); |
|
return; |
|
} |
|
if (this.totalInput == '') { |
|
this.$message.warning(this.$t('exchangeotc.input.amount_total')); |
|
return; |
|
} |
|
if (this.buyData.minLimit > this.priceInput) { |
|
// 交易额不能小于 |
|
this.$message.warning( |
|
this.$t('exchangeotc.input.total_small') + |
|
this.buyData.minLimit + |
|
this.buyData.unitName |
|
); |
|
return; |
|
} |
|
|
|
// // 判断5分钟时间密码是否过期 |
|
// if (!this.passdialogVisible) { |
|
// var data = this.nowDate.replace(new RegExp(/-/gm), '/'); |
|
// //结束时间戳 |
|
// var lastTime = Date.parse(new Date(data)) + '5' * 60 * 1000; |
|
// //当前时间戳 |
|
// var now = Date.parse(new Date()); |
|
// //剩余时间戳 |
|
// var msec = lastTime - now; |
|
// //时间已结束 |
|
// if (msec <= 0) { |
|
// this.$message.warning(this.$t('nav.owner_password')); |
|
// // 密码输入框出现,清除缓存 |
|
// this.passInput = ''; |
|
// this.passdialogVisible = true; |
|
// localStorage.removeItem('userpass'); |
|
// localStorage.removeItem('userdate'); |
|
// localStorage.removeItem('nowPassNOValue'); |
|
// return; |
|
// } |
|
// } |
|
|
|
// // 弹窗前先判断是否有缓存密码 |
|
// if ( |
|
// localStorage.getItem('userpass') != '' && |
|
// localStorage.getItem('userpass') != null |
|
// ) { |
|
// if ( |
|
// localStorage.getItem('userdate') != '' && |
|
// localStorage.getItem('userdate') != null |
|
// ) { |
|
// this.passInput = localStorage.getItem('userpass'); |
|
// this.nowDate = localStorage.getItem('userdate'); |
|
// this.passdialogVisible = false; |
|
// this.chushouLoading = true; |
|
// this.handleSure(this.passInput); |
|
// } |
|
// } else |
|
if (localStorage.getItem('is_pay') === 'true') { |
|
// 在弹窗之前先判断用户是否设置支付密码,无,则提示用户 |
|
this.passdialogVisible = true; |
|
} else { |
|
// 您还未设置支付密码,请返回个人中心进行设置 |
|
this.$message({ |
|
type: 'warning', |
|
message: this.$t('exchangeotc.input.pwd_no'), |
|
}); |
|
} |
|
}, |
|
// 取消密码弹窗 |
|
handleDelSELL() { |
|
this.passdialogVisible = false; |
|
this.passInput = ''; |
|
}, |
|
// 输入密码 确定 |
|
handleSure(pass) { |
|
if (this.passInput == '') { |
|
// 您还未输入支付密码! |
|
this.$message({ |
|
type: 'error', |
|
message: this.$t('exchangeotc.input.pwd_write'), |
|
}); |
|
return; |
|
} |
|
|
|
var regTwo = new RegExp(this.regUnit); //保留2位小数 |
|
var reg = new RegExp(this.regCoin); //保留6位小数 |
|
this.priceInput = this.priceInput.toString().replace(regTwo, '$1.$2'); |
|
this.totalInput = this.totalInput.toString().replace(reg, '$1.$2'); |
|
this.loading = true; |
|
// 发送请求,获取公钥 |
|
getKey().then(res => { |
|
this.gongKey = res.data.data; // 获取到公钥 |
|
// 传入所请求回来的公钥,对密码进行处理 |
|
// 实例化加密对象 |
|
var crypt = new JSEncrypt.JSEncrypt({ |
|
default_key_size: 1024, |
|
}); |
|
crypt.setPublicKey(this.gongKey); |
|
// 拿到加密明文 |
|
let passWord = crypt.encrypt(pass); |
|
// console.log(passWord); |
|
// 发送请求 |
|
getSellOrder({ |
|
adId: this.buyData.id, |
|
amount: this.totalInput, |
|
price: this.buyData.price, |
|
turnover: this.priceInput, |
|
pass: passWord, |
|
}).then(res => { |
|
if (res.data.code === 200) { |
|
// // 5分钟内不输入密码 |
|
// this.nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'); |
|
// this.passdialogVisible = false; |
|
// localStorage.setItem('userpass', this.passInput); |
|
// localStorage.setItem('userdate', this.nowDate); |
|
// localStorage.setItem('nowPassNOValue', this.passdialogVisible); |
|
|
|
// 成功跳转订单详情页面 |
|
this.passInput = ''; |
|
this.loading = false; |
|
// this.chushouLoading = false; |
|
window.location.href = |
|
'/echangeGoods/goodsSell?id=' + res.data.data; |
|
this.$message.success(res.data.msg); |
|
} else { |
|
this.dialogVisible = false; |
|
this.passdialogVisible = false; |
|
this.loading = false; |
|
// this.chushouLoading = false; |
|
this.passInput = ''; |
|
this.$message.error(res.data.msg); |
|
} |
|
// else if (res.data.code === 12710) { |
|
// this.loading = false; |
|
// this.chushouLoading = false; |
|
// this.$message.error(res.data.msg); |
|
// this.passInput = ''; |
|
// // 密码输入框出现,清除缓存 |
|
// this.passdialogVisible = true; |
|
|
|
// localStorage.removeItem('userpass'); |
|
// localStorage.removeItem('userdate'); |
|
// localStorage.removeItem('nowPassNOValue'); |
|
// } |
|
}); |
|
}); |
|
}, |
|
// 分页功能 |
|
handleSizeChange(val) { |
|
// console.log(`每页 ${val} 条`); |
|
this.pageSize = val; |
|
}, |
|
handleCurrentChange(val) { |
|
// console.log(`当前页: ${val}`); |
|
this.pageNum = val; |
|
this.initBuyList(this.coinName); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.exchange-menu-tab { |
|
position: relative; |
|
display: flex; |
|
flex-wrap: wrap; |
|
height: 100%; |
|
color: #545663; |
|
font-size: 16px; |
|
.exchange-item { |
|
border-bottom: 2px solid #474855; |
|
display: flex; |
|
align-items: center; |
|
font-size: 16px; |
|
color: #545663; |
|
> a { |
|
color: #545663; |
|
} |
|
} |
|
} |
|
.blue { |
|
width: 40px; |
|
height: 25px; |
|
font-size: 16px; |
|
font-weight: 400; |
|
color: #e8494a; |
|
line-height: 24px; |
|
margin-right: 73px; |
|
} |
|
.blueOne { |
|
width: 40px; |
|
height: 25px; |
|
font-size: 16px; |
|
font-weight: 400; |
|
line-height: 24px; |
|
border-bottom: 2px solid #e8494a; |
|
margin-right: 73px; |
|
color: #e8494a !important; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.bian { |
|
margin-top: 38px; |
|
.el-table { |
|
background-color: #1f2026; |
|
thead { |
|
color: #545663; |
|
font-weight: 500; |
|
font-size: 14px; |
|
th { |
|
height: 45px; |
|
background-color: #1f2026; |
|
} |
|
} |
|
td { |
|
height: 65px; |
|
font-size: 12px; |
|
font-weight: 500; |
|
color: #545663; |
|
} |
|
tr { |
|
background-color: #24252c; |
|
&:nth-of-type(2n) { |
|
background: #1f2026; |
|
} |
|
} |
|
} |
|
} |
|
.touxiangs { |
|
position: relative; |
|
top: 0px; |
|
left: 15px; |
|
color: #9ba0bc; |
|
font-size: 12px; |
|
// margin-bottom: 10px; |
|
} |
|
.univalence1 { |
|
color: #9ba0bc; |
|
margin-left: 130px; |
|
font-size: 14px; |
|
span { |
|
display: inline-block; |
|
color: #545663; |
|
padding-bottom: 12px; |
|
margin-left: 14px; |
|
} |
|
} |
|
.tableimg { |
|
margin-right: 10px; |
|
} |
|
.tableimgWX { |
|
// margin-top: 2px; |
|
width: 16px; |
|
height: 16px; |
|
} |
|
.tableimgZFB { |
|
width: 16px; |
|
height: 16px; |
|
} |
|
.tableimgBANK { |
|
// margin-top: 3px; |
|
width: 16px; |
|
height: 16px; |
|
} |
|
.yan { |
|
color: #9ba0bc !important; |
|
font-size: 16px; |
|
// margin-left: 1% !important; |
|
} |
|
.wei { |
|
color: #9ba0bc; |
|
font-size: 14px; |
|
position: relative; |
|
top: 7px; |
|
right: -29px; |
|
} |
|
// .posiBuy{ |
|
// position: relative; |
|
// top: 8px; |
|
// left: 0px; |
|
// height: 20px; |
|
// } |
|
.exchange-dialog { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.el-input__inner { |
|
width: 225px !important; |
|
height: 30px; |
|
} |
|
.dialog-input { |
|
margin-left: 180px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
line-height: none; |
|
span { |
|
margin: 0 11px; |
|
} |
|
.el-input__inner { |
|
// padding: 13px 15px; |
|
color: #9ba0bc; |
|
width: 250px; |
|
background-color: #1f2026; |
|
border: 1px solid #191a21; |
|
border-color: #545663; |
|
&:hover { |
|
border-color: #545663; |
|
} |
|
&:focus { |
|
border-color: #545663; |
|
} |
|
} |
|
} |
|
.dialog-btnSELL { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
.el-button { |
|
width: 80px; |
|
height: 32px; |
|
background: #e8494a; |
|
border: 1px solid #e8494a; |
|
border-radius: 4px; |
|
font-size: 14px; |
|
color: #fff; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
span { |
|
position: relative; |
|
top: -4px; |
|
} |
|
&:active { |
|
background: #e8494a; |
|
border: 1px solid #e8494a; |
|
color: #fff; |
|
} |
|
} |
|
} |
|
.dialog-btn1 { |
|
margin-left: 54px; |
|
} |
|
.dialog-btn2 { |
|
cursor: pointer; |
|
margin-left: 22px; |
|
color: #9ba0bc; |
|
} |
|
.exchange-total { |
|
color: #ffffff; |
|
margin-left: 12px; |
|
margin-top: 18px; |
|
// padding: 0px 18px; |
|
// position: relative; |
|
display: flex; |
|
justify-content: space-between; |
|
span:nth-of-type(1) { |
|
margin-left: 89px; |
|
} |
|
span:nth-of-type(2) { |
|
margin-right: 55px; |
|
color: #545663; |
|
} |
|
} |
|
.exchange-money { |
|
margin-left: 100px; |
|
margin-top: 15px; |
|
} |
|
.btn-exchange { |
|
cursor: pointer; |
|
width: 70px; |
|
height: 24px; |
|
background: #e8494a; |
|
border: 1px solid #e8494a; |
|
border-radius: 4px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
color: #fff; |
|
font-size: 12px; |
|
} |
|
.marAdnum { |
|
margin-left: -8px; |
|
} |
|
.imgTou { |
|
width: 28px; |
|
height: 28px; |
|
position: relative; |
|
// top: 10px; |
|
left: 0; |
|
top: 6px; |
|
// padding-top: 10px; |
|
img { |
|
width: 28px; |
|
height: 28px; |
|
} |
|
} |
|
.fukung { |
|
display: flex; |
|
flex-direction: row; |
|
} |
|
.passIn { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
color: #9ba0bc; |
|
font-size: 14px; |
|
div { |
|
flex: 1; |
|
} |
|
.el-input { |
|
flex: 3; |
|
} |
|
} |
|
.el-button--primary { |
|
color: #ffffff; |
|
background-color: #c7282c; |
|
// border-color: #c7282c; |
|
&:hover { |
|
color: #ffffff; |
|
background-color: #c7282c; |
|
} |
|
&:active { |
|
color: #ffffff; |
|
background-color: #c7282c; |
|
} |
|
} |
|
|
|
.page { |
|
background: #181a1e; |
|
float: right; |
|
margin: 30px 0; |
|
} |
|
.el-pagination .btn-prev { |
|
background: #181a1e; |
|
color: #545663; |
|
} |
|
.el-pager li { |
|
background: #181a1e; |
|
color: #545663; |
|
} |
|
.el-pagination .btn-next { |
|
background: #181a1e; |
|
color: #545663; |
|
} |
|
.el-pager li.btn-quickprev { |
|
color: #545663; |
|
} |
|
.el-pager li.btn-quicknext { |
|
color: #545663; |
|
} |
|
.el-pagination button:disabled { |
|
background: #181a1e; |
|
color: #545663; |
|
} |
|
.el-pagination__total { |
|
color: #545663; |
|
} |
|
.el-pager li:hover { |
|
color: #9ba0bc; |
|
} |
|
.el-pager li.active { |
|
color: #9ba0bc; |
|
} |
|
.el-icon:hover { |
|
color: #9ba0bc; |
|
} |
|
.el-dialog__header { |
|
padding: 0; |
|
padding-bottom: 0; |
|
} |
|
.el-dialog__body { |
|
padding: 68px 122px; |
|
.imgTou { |
|
img { |
|
width: 30px; |
|
height: 30px; |
|
position: relative; |
|
top: -4px; |
|
left: -17px; |
|
} |
|
} |
|
} |
|
|
|
.el-table__empty-text { |
|
line-height: 14px; |
|
color: #9ba0bc; |
|
} |
|
.el-table__empty-block { |
|
height: 400px; |
|
background-color: #24252c; |
|
} |
|
.pawDialog { |
|
.el-dialog__header { |
|
color: #9ba0bc; |
|
font-size: 16px; |
|
padding: 18px 31px; |
|
} |
|
.el-dialog__body { |
|
background-color: #191a21; |
|
.el-input__inner { |
|
padding: 13px 15px; |
|
color: #9ba0bc; |
|
width: 250px; |
|
background-color: #1f2026; |
|
border: 1px solid #191a21; |
|
border-color: #545663; |
|
&:hover { |
|
border-color: #545663; |
|
} |
|
&:focus { |
|
border-color: #545663; |
|
} |
|
} |
|
} |
|
.el-dialog__footer { |
|
background-color: #191a21; |
|
.el-button { |
|
width: 100px; |
|
height: 40px; |
|
background: rgba(232, 73, 74, 0); |
|
border: 1px solid rgba(84, 86, 99, 1); |
|
border-radius: 3px; |
|
} |
|
.el-button--primary { |
|
background: #e8494a; |
|
border-color: #e8494a; |
|
color: #fff; |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
.specialInfor { |
|
display: flex; |
|
flex-direction: row; |
|
} |
|
</style>
|
|
|