|
|
|
<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>
|