38 changed files with 3646 additions and 1579 deletions
Binary file not shown.
@ -0,0 +1,173 @@ |
|||||
|
<template> |
||||
|
<div class="chart-box" :style="styObj"> |
||||
|
<!-- 进度条部分 --> |
||||
|
<div class="outer-box"> |
||||
|
<div class="inner-box"> |
||||
|
<div class="pointer-box"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 插槽内容 --> |
||||
|
<div class="slot-content"> |
||||
|
<slot></slot> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
rate: { |
||||
|
type: Number, |
||||
|
default: 0, |
||||
|
}, |
||||
|
circleColor: { |
||||
|
type: String, |
||||
|
default: ' ', |
||||
|
}, |
||||
|
config: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
computed: { |
||||
|
styObj() { |
||||
|
let rate = 0; |
||||
|
if (this.rate <= 0) { |
||||
|
rate = 0; |
||||
|
} else if (this.rate >= 1) { |
||||
|
rate = 1; |
||||
|
} else { |
||||
|
rate = this.rate; |
||||
|
} |
||||
|
let endPos = `${rate * 100}%`; |
||||
|
let obj = Object.assign({}, this.defaultConfig, this.config); |
||||
|
let rotate = `rotate(${360 * rate}deg)`; |
||||
|
let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)"; |
||||
|
let showEyes = obj.showEyes ? 1 : 0; |
||||
|
return { |
||||
|
"--background-image": `conic-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`, |
||||
|
"--border-width": obj.borderWidth, |
||||
|
"--dot-width": obj.circleSize, |
||||
|
"--pointer-rotate": rotate, |
||||
|
"--background-color": obj.borderBackground, |
||||
|
"--center-gap-bg": obj.centerCircleBg, |
||||
|
"--circle-color": obj.circleColor, |
||||
|
"--clockwise-wise": chartRotate, |
||||
|
"--show-eyes": showEyes, |
||||
|
"--eyes-size": obj.eyesSize, |
||||
|
"--start-color": obj.startColor, |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
/* 此配置下所有属性均可在config中进行覆盖，实现个性化配置 */ |
||||
|
defaultConfig: { |
||||
|
borderWidth: "1px", // 描边宽度 |
||||
|
borderBackground: "#eee", // 描边背景颜色 |
||||
|
circleSize: "16px", // 结尾处圆点直径 |
||||
|
circleColor: "#2ec4a7", // 结尾处圆点颜色 |
||||
|
startColor: "#d5f4ee", // 进度条起始颜色 |
||||
|
endColor: "#2ec4a7", // 进度条结束颜色 |
||||
|
centerCircleBg: "#fff", // 中间空心圆背景 |
||||
|
clockwise: true, // 是否顺时针 |
||||
|
showEyes: false, // 是否显示结尾处小眼睛 |
||||
|
eyesSize: "10px", // 结尾处小眼睛大小 |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.chart-box { |
||||
|
position: relative; |
||||
|
width: 110px; |
||||
|
height: 110px; |
||||
|
} |
||||
|
/* 核心代码、控制进度条样式及进度 */ |
||||
|
.outer-box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 50%; |
||||
|
box-sizing: border-box; |
||||
|
/* background-color: var(--background-color); |
||||
|
background-image: var(--background-image); */ |
||||
|
background-color: #fff; |
||||
|
background-image: #fff; |
||||
|
padding: var(--border-width); |
||||
|
transform: var(--clockwise-wise); |
||||
|
} |
||||
|
/* 开始处增加一个圆形端点, 模拟圆角效果 */ |
||||
|
.outer-box::after { |
||||
|
content: ""; |
||||
|
width: var(--border-width); |
||||
|
height: var(--border-width); |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 0; |
||||
|
transform: translateX(-50%); |
||||
|
background: var(--start-color); |
||||
|
} |
||||
|
/* 中间添加一个和背景色一样的圆圈 */ |
||||
|
.inner-box { |
||||
|
position: relative; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: 50%; |
||||
|
background: var(--center-gap-bg); |
||||
|
} |
||||
|
/* 指示针 */ |
||||
|
.pointer-box { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: calc(0px - var(--border-width) / 2); |
||||
|
bottom: calc(0px - var(--border-width) / 2); |
||||
|
z-index: 1; |
||||
|
transform-origin: center center; |
||||
|
transform: var(--pointer-rotate); |
||||
|
} |
||||
|
/* 指示针的头部添加一个小圆点 */ |
||||
|
.pointer-box::after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0%; |
||||
|
top: -6px; |
||||
|
width: var(--dot-width); |
||||
|
height: var(--dot-width); |
||||
|
border-radius: 50%; |
||||
|
background: var(--circle-color); |
||||
|
transform: translate(-50%, -50%); |
||||
|
background: var(--circle-color); |
||||
|
border: 1px solid #FFFFFF; |
||||
|
box-shadow: 0px 0px 6px 0px #00000040; |
||||
|
} |
||||
|
/* 进度条结尾处添加一个小眼睛，背景白色 */ |
||||
|
.pointer-box::before { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: 0%; |
||||
|
top: 0; |
||||
|
width: var(--eyes-size); |
||||
|
height: var(--eyes-size); |
||||
|
border-radius: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
z-index: 1; |
||||
|
opacity: var(--show-eyes); |
||||
|
|
||||
|
|
||||
|
} |
||||
|
/* 插槽内容样式 */ |
||||
|
.slot-content { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -1,218 +0,0 @@ |
|||||
|
|
||||
<template> |
|
||||
<div class="radial-indicator-container" :style="{'width':size+'px','height':size+'px'}"> |
|
||||
<div class="percentloop"> |
|
||||
<div class="circle-left" :style="{ background: 'linear-gradient(231.58deg, #2ED283 17.34%, #48F4C1 82.12%)'}"> |
|
||||
<div :style="{ background: backgroundColor}" ref="leftcontent"></div> |
|
||||
</div> |
|
||||
<div class="circle-right" :style="{ background: 'linear-gradient(231.58deg, #2ED283 17.34%, #48F4C1 82.12%)'}"> |
|
||||
<div :style="{ background: backgroundColor}" ref="rightcontent"></div> |
|
||||
</div> |
|
||||
<div class="content-wrap"> |
|
||||
<span class="content-number" :title="percent+'%'">{{percent}}%</span> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// Events: animationFinished |
|
||||
|
|
||||
export default { |
|
||||
name: 'RadialIndicator', |
|
||||
|
|
||||
props: { |
|
||||
size: { |
|
||||
type: [String, Number], |
|
||||
default: 155 |
|
||||
}, |
|
||||
icon: { |
|
||||
type: String, |
|
||||
default: 'mail' |
|
||||
}, |
|
||||
content: String, |
|
||||
color: { |
|
||||
type: String, |
|
||||
default: '#00b3ef' |
|
||||
}, |
|
||||
backgroundColor: { |
|
||||
type: String, |
|
||||
default: '#7fd9f7' |
|
||||
}, |
|
||||
percentNum: { |
|
||||
type: [String, Number], |
|
||||
default: 0 |
|
||||
}, |
|
||||
speed: { |
|
||||
// suggest 1~3 |
|
||||
type: [String, Number], |
|
||||
default: 1 |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
data () { |
|
||||
return { |
|
||||
percent: 0, |
|
||||
initDeg: 0, |
|
||||
timeId: null, |
|
||||
animationing: false |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
created () { |
|
||||
this.goRotate(this.transformToDeg(this.percentNum)) |
|
||||
}, |
|
||||
|
|
||||
watch: { |
|
||||
'percentNum': function (val) { |
|
||||
if (this.animationing) return |
|
||||
this.goRotate(this.transformToDeg(val)) |
|
||||
} |
|
||||
}, |
|
||||
|
|
||||
methods: { |
|
||||
transformToDeg (percent) { |
|
||||
let deg = 0 |
|
||||
if (percent >= 100) { |
|
||||
deg = 360 |
|
||||
} else { |
|
||||
deg = parseInt(360 * percent / 100) |
|
||||
} |
|
||||
return deg |
|
||||
}, |
|
||||
|
|
||||
transformToPercent (deg) { |
|
||||
let percent = 0 |
|
||||
if (deg >= 360) { |
|
||||
percent = 100 |
|
||||
} else { |
|
||||
percent = parseInt(100 * deg / 360) |
|
||||
} |
|
||||
return percent |
|
||||
}, |
|
||||
|
|
||||
// > 180 |
|
||||
rotateLeft (deg) { |
|
||||
this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)' |
|
||||
}, |
|
||||
|
|
||||
// < 180 |
|
||||
rotateRight (deg) { |
|
||||
this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)' |
|
||||
}, |
|
||||
|
|
||||
goRotate (deg) { |
|
||||
this.animationing = true |
|
||||
this.timeId = setInterval(() => { |
|
||||
if (deg > this.initDeg) { |
|
||||
this.initDeg += Number(this.speed) |
|
||||
if (this.initDeg >= 180) { |
|
||||
this.rotateLeft(this.initDeg) |
|
||||
this.rotateRight(180) |
|
||||
} else { |
|
||||
this.rotateRight(this.initDeg) |
|
||||
} |
|
||||
} else { |
|
||||
this.initDeg -= Number(this.speed) |
|
||||
if (this.initDeg >= 180) { |
|
||||
this.rotateLeft(this.initDeg) |
|
||||
} else { |
|
||||
this.rotateLeft(180) |
|
||||
this.rotateRight(this.initDeg) |
|
||||
} |
|
||||
} |
|
||||
this.percent = this.transformToPercent(this.initDeg) |
|
||||
const remainer = Number(deg) - this.initDeg |
|
||||
if (Math.abs(remainer) < this.speed) { |
|
||||
this.initDeg += remainer |
|
||||
if (this.initDeg > 180) { |
|
||||
this.rotateLeft(deg) |
|
||||
} else { |
|
||||
this.rotateRight(deg) |
|
||||
} |
|
||||
this.animationFinished() |
|
||||
} |
|
||||
}, 10) |
|
||||
}, |
|
||||
|
|
||||
animationFinished () { |
|
||||
this.percent = this.percentNum |
|
||||
this.animationing = false |
|
||||
clearInterval(this.timeId) |
|
||||
this.$emit('animationFinished') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
.radial-indicator-container{ |
|
||||
width: 120px; |
|
||||
height: 120px; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .percentloop { |
|
||||
position: relative; |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
border-radius: 50%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .circle-left, |
|
||||
.radial-indicator-container .circle-right { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
width: 50%; |
|
||||
height: 100%; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .circle-left>div, |
|
||||
.radial-indicator-container .circle-right>div { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
transform-origin: right center; |
|
||||
/* transition: all .5s linear; */ |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .circle-right { |
|
||||
left: 50%; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .circle-right>div { |
|
||||
transform-origin: left center; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .content-wrap { |
|
||||
position: absolute; |
|
||||
top: 9%; |
|
||||
bottom: 9%; |
|
||||
left: 9%; |
|
||||
right: 9%; |
|
||||
background-color: #fff; |
|
||||
border-radius: 50%; |
|
||||
overflow: hidden; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
color: #000; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .content-wrap .content-number { |
|
||||
font-size: 24px; |
|
||||
padding: 5px 0 7px 0; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
.radial-indicator-container .content-wrap .content-text { |
|
||||
display: inline-block; |
|
||||
max-width: 90px; |
|
||||
overflow: hidden; |
|
||||
text-overflow: ellipsis; |
|
||||
white-space: nowrap; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,498 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
|
||||
|
<div class="bg bg-white"> |
||||
|
<div class="flex"> |
||||
|
<div class="detailTit flex m-r-32"> |
||||
|
<div class="circle"></div> |
||||
|
订单编号：{{rowData.orderNo}} |
||||
|
</div> |
||||
|
<div class="detailTit flex"> |
||||
|
<div class="circle"></div> |
||||
|
商家名称：{{rowData.storeName}} |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-row :gutter="10" class="m-b-16"> |
||||
|
<!-- <el-col :span="1.5">--> |
||||
|
<!-- <el-button--> |
||||
|
<!-- type="primary"--> |
||||
|
<!-- plain--> |
||||
|
<!-- icon="el-icon-plus"--> |
||||
|
<!-- size="medium"--> |
||||
|
<!-- @click="handleAdd"--> |
||||
|
<!-- v-hasPermi="['otc:otcOrder:add']"--> |
||||
|
<!-- >新增</el-button>--> |
||||
|
<!-- </el-col>--> |
||||
|
<!-- <el-col :span="1.5">--> |
||||
|
<!-- <el-button--> |
||||
|
<!-- type="success"--> |
||||
|
<!-- plain--> |
||||
|
<!-- icon="el-icon-edit"--> |
||||
|
<!-- size="medium"--> |
||||
|
<!-- :disabled="single"--> |
||||
|
<!-- @click="handleUpdate"--> |
||||
|
<!-- v-hasPermi="['otc:otcOrder:edit']"--> |
||||
|
<!-- >修改</el-button>--> |
||||
|
<!-- </el-col>--> |
||||
|
<!-- <el-col :span="1.5">--> |
||||
|
<!-- <el-button--> |
||||
|
<!-- type="danger"--> |
||||
|
<!-- plain--> |
||||
|
<!-- icon="el-icon-delete"--> |
||||
|
<!-- size="medium"--> |
||||
|
<!-- :disabled="multiple"--> |
||||
|
<!-- @click="handleDelete"--> |
||||
|
<!-- v-hasPermi="['otc:otcOrder:remove']"--> |
||||
|
<!-- >删除</el-button>--> |
||||
|
<!-- </el-col>--> |
||||
|
<!-- <el-col :span="1.5"> |
||||
|
<el-button type="primary" size="medium" @click="handleExport" |
||||
|
v-hasPermi="['otc:otcOrder:export']">导出</el-button> |
||||
|
</el-col> |
||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> --> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-table v-loading="loading" :data="otcOrderList" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column label="流水编号" align="center" prop="id" />--> |
||||
|
<el-table-column label="订单编号" align="center" prop="orderNo" /> |
||||
|
<el-table-column label="订单类型" align="center" prop="tradeType" :formatter="tradeTypeFormat" /> |
||||
|
<!-- <el-table-column label="商家昵称" align="center" prop="storeName" /> --> |
||||
|
<el-table-column label="用户名称" align="center" prop="userName" /> |
||||
|
<el-table-column label="币种" align="center" prop="coin" /> |
||||
|
<el-table-column label="购买数量" align="center" prop="realityCoinNum" /> |
||||
|
<!-- <el-table-column label="实际数量" align="center" prop="realitySettleCoinNums" /> --> |
||||
|
<!-- <el-table-column label="法币金额" align="center" prop="realityLegalNums" /> --> |
||||
|
<el-table-column label="价格" align="center" prop="legalCurrency" /> |
||||
|
<!-- <el-table-column label="手续费类型" align="center" prop="feeType" :formatter="feeTypeFormat"/>--> |
||||
|
<!-- <el-table-column label="手续费" align="center" prop="fee" /> --> |
||||
|
<!-- <el-table-column label="订单状态" align="center" prop="orderStatus" :formatter="orderStatusFormat" /> --> |
||||
|
|
||||
|
<el-table-column label="订单状态" align="center" prop="orderStatus" width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span :style="classObje(scope.row.orderStatus)">{{ orderStatusFormat(scope.row) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<!-- <el-table-column label="支付方式" align="center" prop="paymentType" /> --> |
||||
|
<!-- <el-table-column label="付款时间倒计时" align="center" prop="paymentEndTime" width="180">--> |
||||
|
<!-- <template slot-scope="scope">--> |
||||
|
<!-- <span>{{ parseTime(scope.row.paymentEndTime, '{y}-{m}-{d}') }}</span>--> |
||||
|
<!-- </template>--> |
||||
|
<!-- </el-table-column>--> |
||||
|
<!-- <el-table-column label="确定放行时间" align="center" prop="releaseTime" width="180">--> |
||||
|
<!-- <template slot-scope="scope">--> |
||||
|
<!-- <span>{{ parseTime(scope.row.releaseTime) }}</span>--> |
||||
|
<!-- </template>--> |
||||
|
<!-- </el-table-column>--> |
||||
|
<!-- <el-table-column label="支付时间" align="center" prop="paymentTime" width="180">--> |
||||
|
<!-- <template slot-scope="scope">--> |
||||
|
<!-- <span>{{ parseTime(scope.row.paymentTime) }}</span>--> |
||||
|
<!-- </template>--> |
||||
|
<!-- </el-table-column>--> |
||||
|
<!-- <el-table-column label="完成时间" align="center" prop="closeTime" width="180">--> |
||||
|
<!-- <template slot-scope="scope">--> |
||||
|
<!-- <span>{{ parseTime(scope.row.closeTime) }}</span>--> |
||||
|
<!-- </template>--> |
||||
|
<!-- </el-table-column>--> |
||||
|
<!-- <el-table-column label="收款人" align="center" prop="payee" /> |
||||
|
<el-table-column label="收款银行" align="center" prop="collectionBank" /> |
||||
|
<el-table-column label="收款账号" align="center" prop="collectionAccount" /> --> |
||||
|
<!-- <el-table-column label="支付参考账号" align="center" prop="paymentAccount" /> |
||||
|
<el-table-column label="是否可以申诉" align="center" prop="isAppeal" /> |
||||
|
<el-table-column label="申诉订单编号" align="center" prop="appealOrderId" /> |
||||
|
<el-table-column label="申诉状态" align="center" prop="appealStatus" /> |
||||
|
<el-table-column label="取消类型" align="center" prop="cancelType" /> --> |
||||
|
<el-table-column label="创建时间" align="center" prop="crateTime" width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ parseTime(scope.row.createTime) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
</el-table> |
||||
|
|
||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" |
||||
|
@pagination="getList" /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 添加或修改用户otc订单对话框 --> |
||||
|
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> |
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> |
||||
|
<el-form-item label="订单编号" prop="orderNo"> |
||||
|
<el-input v-model="form.orderNo" placeholder="请输入订单编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="总订单编号" prop="storeOrder"> |
||||
|
<el-input v-model="form.storeOrder" placeholder="请输入总订单编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="交易类型" prop="tradeType"> |
||||
|
<el-select v-model="form.tradeType" placeholder="请选择交易类型"> |
||||
|
<el-option v-for="dict in tradeTypeStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="商家编号" prop="storeId"> |
||||
|
<el-input v-model="form.storeName" placeholder="请输入商家编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="用户编号" prop="userId"> |
||||
|
<el-input v-model="form.userName" placeholder="请输入用户编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="币种" prop="coin"> |
||||
|
<el-input v-model="form.coin" placeholder="请输入币种" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="交易数量" prop="realityCoinNum"> |
||||
|
<el-input v-model="form.realityCoinNum" placeholder="请输入交易数量" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="得到数量" prop="realitySettleCoinNums"> |
||||
|
<el-input v-model="form.realitySettleCoinNums" placeholder="请输入结算得到数量" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="法币金额" prop="realityLegalNums"> |
||||
|
<el-input v-model="form.realityLegalNums" placeholder="请输入法币金额" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="法币价格" prop="legalCurrency"> |
||||
|
<el-input v-model="form.legalCurrency" placeholder="请输入法币价格" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="手续费类型" prop="feeType"> |
||||
|
<el-select v-model="form.feeType" placeholder="请选择类型"> |
||||
|
<el-option v-for="dict in feeTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="手续费" prop="fee"> |
||||
|
<el-input v-model="form.fee" placeholder="请输入手续费" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="订单状态"> |
||||
|
<!-- <el-radio-group v-model="form.orderStatus">--> |
||||
|
<!-- <el-radio label="1">请选择字典生成</el-radio>--> |
||||
|
<!-- </el-radio-group>--> |
||||
|
<el-select v-model="form.orderStatus" placeholder="请选择订单状态"> |
||||
|
<el-option v-for="dict in orderStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付方式" prop="paymentType"> |
||||
|
<el-select v-model="form.paymentType" placeholder="请选择支付方式"> |
||||
|
<el-option label="请选择字典生成" value="" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<!-- <el-form-item label="付款结束时间" prop="paymentEndTime">--> |
||||
|
<!-- <el-date-picker clearable size="medium"--> |
||||
|
<!-- v-model="form.paymentEndTime"--> |
||||
|
<!-- type="dateTime"--> |
||||
|
<!-- value-format="yyyy-MM-dd hh:mm:ss"--> |
||||
|
<!-- placeholder="选择付款结束时间">--> |
||||
|
<!-- </el-date-picker>--> |
||||
|
<!-- </el-form-item>--> |
||||
|
<!-- <el-form-item label="确定放行时间" prop="releaseTime">--> |
||||
|
<!-- <el-date-picker clearable size="medium"--> |
||||
|
<!-- v-model="form.releaseTime"--> |
||||
|
<!-- type="dateTime"--> |
||||
|
<!-- value-format="yyyy-MM-dd hh:mm:ss"--> |
||||
|
<!-- placeholder="选择确定放行时间">--> |
||||
|
<!-- </el-date-picker>--> |
||||
|
<!-- </el-form-item>--> |
||||
|
<el-form-item label="支付时间" prop="paymentTime"> |
||||
|
<el-date-picker clearable size="medium" v-model="form.paymentTime" type="dateTime" |
||||
|
value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择支付时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="完成时间" prop="closeTime"> |
||||
|
<el-date-picker clearable size="medium" v-model="form.closeTime" type="dateTime" |
||||
|
value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择完成时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="收款人" prop="payee"> |
||||
|
<el-input v-model="form.payee" placeholder="请输入收款人" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="收款银行" prop="collectionBank"> |
||||
|
<el-input v-model="form.collectionBank" placeholder="请输入收款银行" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="收款账号" prop="collectionAccount"> |
||||
|
<el-input v-model="form.collectionAccount" placeholder="请输入收款账号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付参考账号" prop="paymentAccount"> |
||||
|
<el-input v-model="form.paymentAccount" placeholder="请输入支付参考账号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否可以申诉" prop="isAppeal"> |
||||
|
<el-input v-model="form.isAppeal" placeholder="请输入是否可以申诉" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="申诉订单编号" prop="appealOrderId"> |
||||
|
<el-input v-model="form.appealOrderId" placeholder="请输入申诉订单编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="申诉状态"> |
||||
|
<!-- <el-radio-group v-model="form.appealStatus">--> |
||||
|
<!-- <el-radio label="1">请选择字典生成</el-radio>--> |
||||
|
<!-- </el-radio-group>--> |
||||
|
<el-select v-model="form.appealStatus" placeholder="请选择订单状态"> |
||||
|
<el-option v-for="dict in appealStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="取消类型" prop="cancelType"> |
||||
|
<el-select v-model="form.cancelType" placeholder="请选择取消类型"> |
||||
|
<!-- <el-option label="请选择字典生成" value="" />--> |
||||
|
<el-option v-for="dict in cancelTypeOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<!-- <el-button type="primary" @click="submitForm">确 定</el-button>--> |
||||
|
<el-button @click="cancel">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { listOtcOrder, getOtcOrder, delOtcOrder, addOtcOrder, updateOtcOrder, exportOtcOrder } from "@/api/otc/otcOrder"; |
||||
|
|
||||
|
export default { |
||||
|
name: "OtcOrder", |
||||
|
components: { |
||||
|
}, |
||||
|
props: { |
||||
|
}, |
||||
|
computed:{ |
||||
|
classObje(status){ |
||||
|
return(status)=>{ |
||||
|
if(status=='in_appeal'){ |
||||
|
return {'color':'rgba(237, 80, 89, 1)'} |
||||
|
} |
||||
|
if(status=='fail_appeal'){ |
||||
|
return {'color':'rgba(237, 80, 89, 1)'} |
||||
|
} |
||||
|
if(status=='released'){ |
||||
|
return {'color':'rgba(255, 124, 30, 1)'} |
||||
|
} |
||||
|
if(status=='success_appeal'){ |
||||
|
return {'color':'rgba(80, 188, 146, 1)'} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
colorMany:null, |
||||
|
rowData:{}, |
||||
|
// 遮罩层 |
||||
|
loading: true, |
||||
|
// 选中数组 |
||||
|
ids: [], |
||||
|
// 非单个禁用 |
||||
|
single: true, |
||||
|
// 非多个禁用 |
||||
|
multiple: true, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// 用户otc订单表格数据 |
||||
|
otcOrderList: [], |
||||
|
feeTypeOptions: [], |
||||
|
orderStatusOptions: [], |
||||
|
tradeTypeStatusOptions: [], |
||||
|
//申诉字典 |
||||
|
appealStatusOptions: [], |
||||
|
cancelTypeOptions: [], |
||||
|
// 弹出层标题 |
||||
|
title: "", |
||||
|
// 是否显示弹出层 |
||||
|
open: false, |
||||
|
// 查询参数 |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
orderNo: null, |
||||
|
storeOrder: null, |
||||
|
tradeType: null, |
||||
|
storeId: null, |
||||
|
userId: null, |
||||
|
coin: null, |
||||
|
realityCoinNum: null, |
||||
|
realityLegalNums: null, |
||||
|
realitySettleCoinNums: null, |
||||
|
legalCurrency: null, |
||||
|
feeType: null, |
||||
|
fee: null, |
||||
|
orderStatus: null, |
||||
|
paymentType: null, |
||||
|
paymentEndTime: null, |
||||
|
releaseTime: null, |
||||
|
paymentTime: null, |
||||
|
closeTime: null, |
||||
|
payee: null, |
||||
|
collectionBank: null, |
||||
|
collectionAccount: null, |
||||
|
paymentAccount: null, |
||||
|
isAppeal: null, |
||||
|
appealOrderId: null, |
||||
|
appealStatus: null, |
||||
|
cancelType: null |
||||
|
}, |
||||
|
// 表单参数 |
||||
|
form: {}, |
||||
|
// 表单校验 |
||||
|
rules: { |
||||
|
orderNo: [ |
||||
|
{ required: true, message: "订单编号不能为空", trigger: "blur" } |
||||
|
], |
||||
|
storeOrder: [ |
||||
|
{ required: true, message: "总订单编号不能为空", trigger: "blur" } |
||||
|
], |
||||
|
tradeType: [ |
||||
|
{ required: true, message: "交易类型不能为空", trigger: "change" } |
||||
|
], |
||||
|
storeId: [ |
||||
|
{ required: true, message: "商家编号不能为空", trigger: "blur" } |
||||
|
], |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.queryParams.storeName = this.$route.params.row.storeName |
||||
|
this.rowData = this.$route.params.row |
||||
|
this.getList(); |
||||
|
this.getDicts("trade_type").then(response => { |
||||
|
this.tradeTypeStatusOptions = response.data; |
||||
|
}); |
||||
|
this.getDicts("order_status").then(response => { |
||||
|
this.orderStatusOptions = response.data; |
||||
|
}); |
||||
|
|
||||
|
this.getDicts("fee_type").then(response => { |
||||
|
this.feeTypeOptions = response.data; |
||||
|
}); |
||||
|
this.getDicts("appeal_status").then(response => { |
||||
|
this.appealStatusOptions = response.data; |
||||
|
}); |
||||
|
this.getDicts("cancel_type").then(response => { |
||||
|
this.cancelTypeOptions = response.data; |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
/** 查询用户otc订单列表 */ |
||||
|
getList() { |
||||
|
this.loading = true; |
||||
|
listOtcOrder(this.queryParams).then(response => { |
||||
|
this.otcOrderList = response.rows; |
||||
|
this.total = Number(response.total); |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
}, |
||||
|
tradeTypeFormat(row, column) { |
||||
|
|
||||
|
return this.selectDictLabel(this.tradeTypeStatusOptions, row.tradeType); |
||||
|
}, |
||||
|
orderStatusFormat(row, column) { |
||||
|
return this.selectDictLabel(this.orderStatusOptions, row.orderStatus); |
||||
|
}, |
||||
|
|
||||
|
feeTypeFormat(row, column) { |
||||
|
|
||||
|
return this.selectDictLabel(this.feeTypeOptions, row.feeType); |
||||
|
}, |
||||
|
// 取消按钮 |
||||
|
cancel() { |
||||
|
this.open = false; |
||||
|
this.reset(); |
||||
|
}, |
||||
|
// 表单重置 |
||||
|
reset() { |
||||
|
this.form = { |
||||
|
|
||||
|
}; |
||||
|
this.resetForm("form"); |
||||
|
}, |
||||
|
/** 搜索按钮操作 */ |
||||
|
handleQuery() { |
||||
|
this.queryParams.pageNum = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery() { |
||||
|
this.resetForm("queryForm"); |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
// 多选框选中数据 |
||||
|
handleSelectionChange(selection) { |
||||
|
this.ids = selection.map(item => item.id) |
||||
|
this.single = selection.length !== 1 |
||||
|
this.multiple = !selection.length |
||||
|
}, |
||||
|
/** 新增按钮操作 */ |
||||
|
handleAdd() { |
||||
|
this.reset(); |
||||
|
this.open = true; |
||||
|
this.title = "添加用户otc订单"; |
||||
|
}, |
||||
|
/** 修改按钮操作 */ |
||||
|
handleUpdate(row) { |
||||
|
this.reset(); |
||||
|
const id = row.id || this.ids |
||||
|
getOtcOrder(id).then(response => { |
||||
|
this.form = response.data; |
||||
|
this.open = true; |
||||
|
this.title = "查询用户otc订单"; |
||||
|
}); |
||||
|
}, |
||||
|
/** 提交按钮 */ |
||||
|
submitForm() { |
||||
|
this.$refs["form"].validate(valid => { |
||||
|
if (valid) { |
||||
|
if (this.form.id != null) { |
||||
|
updateOtcOrder(this.form).then(response => { |
||||
|
this.msgSuccess("修改成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
} else { |
||||
|
addOtcOrder(this.form).then(response => { |
||||
|
this.msgSuccess("新增成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
/** 删除按钮操作 */ |
||||
|
handleDelete(row) { |
||||
|
const ids = row.id || this.ids; |
||||
|
this.$confirm('是否确认删除用户otc订单编号为"' + ids + '"的数据项?', "警告", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}).then(function () { |
||||
|
return delOtcOrder(ids); |
||||
|
}).then(() => { |
||||
|
this.getList(); |
||||
|
this.msgSuccess("删除成功"); |
||||
|
}) |
||||
|
}, |
||||
|
/** 导出按钮操作 */ |
||||
|
handleExport() { |
||||
|
const queryParams = this.queryParams; |
||||
|
this.$confirm('是否确认导出所有用户otc订单数据项?', "警告", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}).then(function () { |
||||
|
return exportOtcOrder(queryParams); |
||||
|
}).then(response => { |
||||
|
this.download(response.msg); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
.tableRed{ |
||||
|
color: rgba(237, 80, 89, 1); |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
|
||||
@ -0,0 +1,383 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="search_con m-b-28"> |
||||
|
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> |
||||
|
<!-- <el-form-item label="用户编号" prop="userId"> |
||||
|
<el-input |
||||
|
v-model="queryParams.userId" |
||||
|
placeholder="请输入用户编号" |
||||
|
clearable |
||||
|
size="medium" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> --> |
||||
|
|
||||
|
<el-form-item label="转账类型" prop="type"> |
||||
|
<el-select v-model="queryParams.type" placeholder="请选择转账类型" clearable size="medium"> |
||||
|
<el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="币种" prop="coinId"> |
||||
|
<el-input |
||||
|
v-model="queryParams.coinId" |
||||
|
placeholder="请输入币种" |
||||
|
clearable |
||||
|
size="medium" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="业务编号" prop="serviceId"> |
||||
|
<el-input |
||||
|
v-model="queryParams.serviceId" |
||||
|
placeholder="请输入业务编号" |
||||
|
clearable |
||||
|
size="medium" |
||||
|
@keyup.enter.native="handleQuery" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item> |
||||
|
<el-button type="primary" size="medium" @click="handleQuery">搜索</el-button> |
||||
|
<el-button size="medium" @click="resetQuery">重置</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bg bg-white"> |
||||
|
<el-row :gutter="10" class="m-b-16"> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
@click="handleAdd" |
||||
|
v-hasPermi="['user:walletAssetsRecord:add']" |
||||
|
>新增</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
:disabled="single" |
||||
|
@click="handleUpdate" |
||||
|
v-hasPermi="['user:walletAssetsRecord:edit']" |
||||
|
>修改</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
:disabled="multiple" |
||||
|
@click="handleDelete" |
||||
|
v-hasPermi="['user:walletAssetsRecord:remove']" |
||||
|
>删除</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
@click="handleExport" |
||||
|
v-hasPermi="['user:walletAssetsRecord:export']" |
||||
|
>导出</el-button> |
||||
|
</el-col> |
||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-table v-loading="loading" :data="walletAssetsRecordList" @selection-change="handleSelectionChange"> |
||||
|
<el-table-column type="selection" width="55" align="center" /> |
||||
|
<el-table-column label="流水编号" align="center" prop="id" /> |
||||
|
<!-- <el-table-column label="用户编号" align="center" prop="userId" /> --> |
||||
|
<el-table-column label="用户姓名" align="center" prop="userName" /> |
||||
|
<el-table-column label="转账类型" align="center" prop="type" :formatter="typeFormat"/> |
||||
|
<el-table-column label="币种" align="center" prop="coinId" /> |
||||
|
<el-table-column label="数量" align="center" prop="num" /> |
||||
|
<el-table-column label="手续费" align="center" prop="fee" /> |
||||
|
<!-- <el-table-column label="类型 完成complete" align="center" prop="status" /> --> |
||||
|
<el-table-column label="剩下金额" align="center" prop="remainBalance" /> |
||||
|
<el-table-column label="业务编号" align="center" prop="serviceId" /> |
||||
|
<!-- <el-table-column label="是否显示" align="center" prop="isShow" /> --> |
||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button |
||||
|
size="medium" |
||||
|
type="text" |
||||
|
icon="el-icon-edit" |
||||
|
@click="handleUpdate(scope.row)" |
||||
|
v-hasPermi="['user:walletAssetsRecord:edit']" |
||||
|
>修改</el-button> |
||||
|
<el-button |
||||
|
size="medium" |
||||
|
type="text" |
||||
|
icon="el-icon-delete" |
||||
|
@click="handleDelete(scope.row)" |
||||
|
v-hasPermi="['user:walletAssetsRecord:remove']" |
||||
|
>删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<pagination |
||||
|
v-show="total>0" |
||||
|
:total="total" |
||||
|
:page.sync="queryParams.pageNum" |
||||
|
:limit.sync="queryParams.pageSize" |
||||
|
@pagination="getList" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 添加或修改钱包资金流水记录对话框 --> |
||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> |
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
||||
|
<el-form-item label="用户编号" prop="userId"> |
||||
|
<el-input v-model="form.userId" placeholder="请输入用户编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="转账类型" prop="type"> |
||||
|
<el-select v-model="form.type" placeholder="请选择转账类型" clearable size="medium"> |
||||
|
<el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" |
||||
|
:value="dict.dictValue" /> |
||||
|
</el-select> |
||||
|
|
||||
|
</el-form-item> |
||||
|
<el-form-item label="币种" prop="coinId"> |
||||
|
<el-input v-model="form.coinId" placeholder="请输入币种" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="数量" prop="num"> |
||||
|
<el-input v-model="form.num" placeholder="请输入数量" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="地址" prop="address"> |
||||
|
<el-input v-model="form.address" placeholder="请输入地址" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="手续费" prop="fee"> |
||||
|
<el-input v-model="form.fee" placeholder="请输入手续费" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="类型 完成complete"> |
||||
|
<el-radio-group v-model="form.status"> |
||||
|
<el-radio label="1">请选择字典生成</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="剩下金额" prop="remainBalance"> |
||||
|
<el-input v-model="form.remainBalance" placeholder="请输入剩下金额" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="添加时间" prop="createTime"> |
||||
|
<el-date-picker clearable size="medium" |
||||
|
v-model="form.createTime" |
||||
|
type="date" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
placeholder="选择添加时间"> |
||||
|
</el-date-picker> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="业务编号" prop="serviceId"> |
||||
|
<el-input v-model="form.serviceId" placeholder="请输入业务编号" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="是否显示" prop="isShow"> |
||||
|
<el-input v-model="form.isShow" placeholder="请输入是否显示" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
|
<el-button @click="cancel">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { listWalletAssetsRecord, getWalletAssetsRecord, delWalletAssetsRecord, addWalletAssetsRecord, updateWalletAssetsRecord, exportWalletAssetsRecord } from "@/api/user/walletAssetsRecord"; |
||||
|
|
||||
|
export default { |
||||
|
name: "WalletAssetsRecord", |
||||
|
components: { |
||||
|
}, |
||||
|
props: { |
||||
|
pkCouponId: { |
||||
|
type: Number, |
||||
|
default() { |
||||
|
return null; |
||||
|
}, |
||||
|
}, |
||||
|
pkCouponStore: { |
||||
|
type: Object, |
||||
|
default: {} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 遮罩层 |
||||
|
loading: true, |
||||
|
// 选中数组 |
||||
|
ids: [], |
||||
|
// 非单个禁用 |
||||
|
single: true, |
||||
|
// 非多个禁用 |
||||
|
multiple: true, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// 钱包资金流水记录表格数据 |
||||
|
walletAssetsRecordList: [], |
||||
|
typeOptions: [], |
||||
|
// 弹出层标题 |
||||
|
title: "", |
||||
|
// 是否显示弹出层 |
||||
|
open: false, |
||||
|
// 查询参数 |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
userId: null, |
||||
|
type: null, |
||||
|
coinId: null, |
||||
|
num: null, |
||||
|
address: null, |
||||
|
fee: null, |
||||
|
status: null, |
||||
|
remainBalance: null, |
||||
|
serviceId: null, |
||||
|
isShow: null, |
||||
|
userName:null, |
||||
|
}, |
||||
|
// 表单参数 |
||||
|
form: {}, |
||||
|
// 表单校验 |
||||
|
rules: { |
||||
|
userId: [ |
||||
|
{ required: true, message: "用户编号不能为空", trigger: "blur" } |
||||
|
], |
||||
|
type: [ |
||||
|
{ required: true, message: "转账类型不能为空", trigger: "change" } |
||||
|
], |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.pkCouponId && (this.queryParams.userName = this.pkCouponId); |
||||
|
this.getList(); |
||||
|
this.getDicts("assets_type").then(response => { |
||||
|
this.typeOptions = response.data; |
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
/** 查询钱包资金流水记录列表 */ |
||||
|
getList() { |
||||
|
this.loading = true; |
||||
|
listWalletAssetsRecord(this.queryParams).then(response => { |
||||
|
this.walletAssetsRecordList = response.rows; |
||||
|
this.total = response.total; |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
}, |
||||
|
// 取消按钮 |
||||
|
cancel() { |
||||
|
this.open = false; |
||||
|
this.reset(); |
||||
|
}, |
||||
|
|
||||
|
// 状态字典 |
||||
|
typeFormat(row, column) { |
||||
|
return this.selectDictLabel(this.typeOptions, row.type); |
||||
|
}, |
||||
|
|
||||
|
// 表单重置 |
||||
|
reset() { |
||||
|
this.form = { |
||||
|
id: null, |
||||
|
userId: null, |
||||
|
type: null, |
||||
|
coinId: null, |
||||
|
num: null, |
||||
|
address: null, |
||||
|
fee: null, |
||||
|
status: "0", |
||||
|
remainBalance: null, |
||||
|
createTime: null, |
||||
|
updateTime: null, |
||||
|
serviceId: null, |
||||
|
isShow: null |
||||
|
}; |
||||
|
this.resetForm("form"); |
||||
|
}, |
||||
|
/** 搜索按钮操作 */ |
||||
|
handleQuery() { |
||||
|
this.queryParams.pageNum = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery() { |
||||
|
this.resetForm("queryForm"); |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
// 多选框选中数据 |
||||
|
handleSelectionChange(selection) { |
||||
|
this.ids = selection.map(item => item.id) |
||||
|
this.single = selection.length!==1 |
||||
|
this.multiple = !selection.length |
||||
|
}, |
||||
|
/** 新增按钮操作 */ |
||||
|
handleAdd() { |
||||
|
this.reset(); |
||||
|
this.open = true; |
||||
|
this.title = "添加钱包资金流水记录"; |
||||
|
}, |
||||
|
/** 修改按钮操作 */ |
||||
|
handleUpdate(row) { |
||||
|
this.reset(); |
||||
|
const id = row.id || this.ids |
||||
|
getWalletAssetsRecord(id).then(response => { |
||||
|
this.form = response.data; |
||||
|
this.open = true; |
||||
|
this.title = "修改钱包资金流水记录"; |
||||
|
}); |
||||
|
}, |
||||
|
/** 提交按钮 */ |
||||
|
submitForm() { |
||||
|
this.$refs["form"].validate(valid => { |
||||
|
if (valid) { |
||||
|
if (this.form.id != null) { |
||||
|
updateWalletAssetsRecord(this.form).then(response => { |
||||
|
this.msgSuccess("修改成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
} else { |
||||
|
addWalletAssetsRecord(this.form).then(response => { |
||||
|
this.msgSuccess("新增成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
/** 删除按钮操作 */ |
||||
|
handleDelete(row) { |
||||
|
const ids = row.id || this.ids; |
||||
|
this.$confirm('是否确认删除钱包资金流水记录编号为"' + ids + '"的数据项?', "警告", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}).then(function() { |
||||
|
return delWalletAssetsRecord(ids); |
||||
|
}).then(() => { |
||||
|
this.getList(); |
||||
|
this.msgSuccess("删除成功"); |
||||
|
}) |
||||
|
}, |
||||
|
/** 导出按钮操作 */ |
||||
|
handleExport() { |
||||
|
const queryParams = this.queryParams; |
||||
|
this.$confirm('是否确认导出所有钱包资金流水记录数据项?', "警告", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}).then(function() { |
||||
|
return exportWalletAssetsRecord(queryParams); |
||||
|
}).then(response => { |
||||
|
this.download(response.msg); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,486 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div class="bg bg-white"> |
||||
|
<div class="flex detailTit m-b-16"> |
||||
|
<div class="circle"></div> |
||||
|
用户基本信息 |
||||
|
</div> |
||||
|
<el-table v-loading="loading" :data="rowData"> |
||||
|
<el-table-column label="昵称" align="center" prop="nickname" /> |
||||
|
<el-table-column label="邮箱" align="center" prop="email" /> |
||||
|
|
||||
|
<el-table-column label="用户类型" align="center" prop="userType" :formatter="userRoleFormat" /> |
||||
|
|
||||
|
<el-table-column label="注册时间" align="center" prop="addTime" width="180"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d}') }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="是否质押" align="center" prop="headImgPath"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{scope.row.isPledge?'是':'否'}} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
|
||||
|
</el-table> |
||||
|
|
||||
|
<div class="flex status-con" v-if="UserCertificationList.length" style="align-items: flex-start;flex-wrap:wrap"> |
||||
|
<div class="let item m-r-16 m-b-16" v-if="kycData.authType"> |
||||
|
<div class="title m-b-16 flex"> |
||||
|
<div class="circle"></div> |
||||
|
KYC认证信息 |
||||
|
</div> |
||||
|
<div class="status"> |
||||
|
<div class="status-bar" |
||||
|
:style="{ background: kycData.auditStatus == 'agree' ? '#08B97A' : kycData.auditStatus == 'apply' ? '#F8A562' : '#E73535' }" |
||||
|
v-if="kycData.auditStatus"> |
||||
|
<span class="status-text" v-if="kycData.authType == 'basic'">{{ kycData.auditStatus == 'agree' ? |
||||
|
'已通过' : kycData.auditStatus == 'apply' ? '审核中' : '不通过' }} |
||||
|
</span> |
||||
|
|
||||
|
</div> |
||||
|
<div class="text m-b-10"> |
||||
|
姓名：{{ kycData.name ? kycData.name : '无' }} |
||||
|
</div> |
||||
|
<div class="text m-b-10"> |
||||
|
证件号：{{ kycData.certId ? kycData.certId : '无' }} |
||||
|
</div> |
||||
|
<div class="flex m-b-16" style="align-items:flex-start"> |
||||
|
<div class="img-con m-r-16"> |
||||
|
<div class="text m-b-10"> |
||||
|
证件正面 |
||||
|
</div> |
||||
|
<div class="img-con-border" v-if="kycData.certFrontImg"> |
||||
|
<el-image @click="previewImage(kycData.certFrontImg)" :src="kycData.certFrontImg" |
||||
|
:preview-src-list="srcList" class="avatar"> |
||||
|
</el-image> |
||||
|
</div> |
||||
|
<span class="text" v-else>无</span> |
||||
|
</div> |
||||
|
<div class="img-con"> |
||||
|
<div class="text m-b-10"> |
||||
|
证件反面 |
||||
|
</div> |
||||
|
<div class="img-con-border" v-if="kycData.certReverseImg"> |
||||
|
<el-image @click="previewImage(kycData.certReverseImg)" :src="kycData.certReverseImg" |
||||
|
:preview-src-list="srcList" class="avatar"> |
||||
|
</el-image> |
||||
|
|
||||
|
</div> |
||||
|
<span class="text" v-else>无</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="img-con m-r-16 m-b-16"> |
||||
|
<div class="text m-b-10"> |
||||
|
手持证件照 |
||||
|
</div> |
||||
|
<div class="img-con-border" v-if="kycData.certHandImg"> |
||||
|
<el-image @click="previewImage(kycData.certHandImg)" :src="kycData.certHandImg" |
||||
|
:preview-src-list="srcList" class="avatar"> |
||||
|
</el-image> |
||||
|
|
||||
|
</div> |
||||
|
<span class="text" v-else>无</span> |
||||
|
</div> |
||||
|
<div style="color:red"> |
||||
|
审核备注：{{ kycData.auditReason ? kycData.auditReason : '无' }} |
||||
|
</div> |
||||
|
<!-- <div class="flex btnCon" v-if="kycData.auditStatus == 'apply'"> |
||||
|
<el-button type="primary" @click="handleSuccess('agree', kycData)">通过</el-button> |
||||
|
<el-button type="danger" @click="handleFail('reject', kycData)">驳回</el-button> |
||||
|
</div> --> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="right item" v-if="storeData.authType"> |
||||
|
<div class="title m-b-16 flex"> |
||||
|
<div class="circle"></div> |
||||
|
商家认证信息 |
||||
|
</div> |
||||
|
<div class="status"> |
||||
|
<div class="status-bar" |
||||
|
:style="{ background: storeData.auditStatus == 'agree' ? '#08B97A' : storeData.auditStatus == 'apply' ? '#F8A562' : '#E73535' }"> |
||||
|
<span class="status-text">{{ storeData.auditStatus == 'agree' ? '已通过' : storeData.auditStatus == |
||||
|
'apply' ? '审核中' : '不通过' }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text m-b-10"> |
||||
|
是否质押：{{ storeData.storePledge ? '是' : '否' }} |
||||
|
</div> |
||||
|
<div class="text m-b-10"> |
||||
|
质押金额：{{ storeData.storePledgeBalance }}{{ storeData.pledgeCoin }} |
||||
|
</div> |
||||
|
<!-- <div class="flex btnCon" v-if="storeData.auditStatus == 'apply'"> |
||||
|
<el-button type="primary" @click="handleSuccess('agree', storeData)">通过</el-button> |
||||
|
<el-button type="danger" @click="handleFail('reject', storeData)">驳回</el-button> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="right item" v-if="proData.authType"> |
||||
|
<div class="title m-b-16 flex"> |
||||
|
<div class="circle"></div> |
||||
|
Pro商家认证信息 |
||||
|
</div> |
||||
|
<div class="status"> |
||||
|
<div class="status-bar" |
||||
|
:style="{ background: proData.auditStatus == 'agree' ? '#08B97A' : proData.auditStatus == 'apply' ? '#F8A562' : '#E73535' }"> |
||||
|
<span class="status-text">{{ proData.auditStatus == 'agree' ? '已通过' : proData.auditStatus == |
||||
|
'apply' ? '审核中' : '不通过' }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="text m-b-10"> |
||||
|
是否质押：{{ proData.storePledge ? '是' : '否' }} |
||||
|
</div> |
||||
|
<div class="text m-b-10"> |
||||
|
质押金额：{{ proData.storePledgeBalance }} {{ proData.pledgeCoin }} |
||||
|
</div> |
||||
|
<div class="flex m-b-16"> |
||||
|
<div class="img-con m-r-16"> |
||||
|
<div class="text m-b-10"> |
||||
|
公司营业执照 |
||||
|
</div> |
||||
|
<div class="img-con-border" v-if="proData.corporateLicense"> |
||||
|
<el-image @click="previewImage(proData.corporateLicense)" |
||||
|
:src="proData.corporateLicense" :preview-src-list="srcList" class="avatar"> |
||||
|
</el-image> |
||||
|
</div> |
||||
|
<span class="text" v-else>无</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="flex btnCon" v-if="proData.auditStatus == 'apply'"> |
||||
|
<el-button type="primary" @click="handleSuccess('agree', proData)">通过</el-button> |
||||
|
<el-button type="danger" @click="handleFail('reject', proData)">驳回</el-button> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<!-- 成功对话框 --> |
||||
|
<el-dialog title="通过" :visible.sync="open" width="400px" append-to-body> |
||||
|
<div class="sub-tit m-b-16"> |
||||
|
是否通过该认证申请？ |
||||
|
</div> |
||||
|
<div slot="footer" class="dialog-footer flex-between"> |
||||
|
<el-button type="text" @click="cancelApple">取消</el-button> |
||||
|
<el-button type="text" @click="submitFormApple('agree')">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<!-- 驳回对话框 --> |
||||
|
<el-dialog title="驳回" :visible.sync="openApple" width="400px" append-to-body> |
||||
|
<el-form ref="form" :model="formApple" :rules="rulesApple" label-width="0px"> |
||||
|
<div class="sub-tit m-b-16"> |
||||
|
是否确认驳回该认证申请？ |
||||
|
</div> |
||||
|
<el-form-item label="" prop="auditReason"> |
||||
|
<el-input v-model="formApple.auditReason" type="textarea" placeholder="驳回备注" rows="5" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer flex-between"> |
||||
|
<el-button type="text" @click="cancelApple">取消</el-button> |
||||
|
<el-button type="text" @click="submitFormApple('reject')">确定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { listUserCertification, getUserCertification, delUserCertification, addUserCertification, updateUserCertification, exportUserCertification } from "@/api/user/UserCertification"; |
||||
|
|
||||
|
export default { |
||||
|
name: "UserDetail", |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
userRoleOptions: [], |
||||
|
rowData: [], |
||||
|
openApple: false, |
||||
|
kycData: {}, |
||||
|
storeData: {}, |
||||
|
proData: {}, |
||||
|
|
||||
|
// 遮罩层 |
||||
|
loading: false, |
||||
|
// 选中数组 |
||||
|
ids: [], |
||||
|
// 非单个禁用 |
||||
|
single: true, |
||||
|
// 非多个禁用 |
||||
|
multiple: true, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// 实名认证信息表格数据 |
||||
|
UserCertificationList: [], |
||||
|
|
||||
|
auditStatusOptions: [], |
||||
|
authTypeOptions: [], |
||||
|
// 弹出层标题 |
||||
|
title: "", |
||||
|
// 是否显示弹出层 |
||||
|
open: false, |
||||
|
// 查询参数 |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
witNo: null, |
||||
|
userId: null, |
||||
|
|
||||
|
}, |
||||
|
// 表单参数 |
||||
|
formApple: { |
||||
|
auditReason: null, |
||||
|
}, |
||||
|
// 表单校验 |
||||
|
rulesApple: { |
||||
|
authType: [ |
||||
|
{ required: true, message: "认证类型：基础basic 高级advanced不能为空", trigger: "change" } |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
// 预览 |
||||
|
srcList: ["http://118.25.187.239:9099/img/adImg/557097620301025280.jpg"], |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getDicts("audit_status").then(response => { |
||||
|
this.auditStatusOptions = response.data; |
||||
|
}); |
||||
|
this.getDicts("auth_type").then(response => { |
||||
|
this.authTypeOptions = response.data; |
||||
|
}); |
||||
|
this.getDicts("user_role").then(response => { |
||||
|
this.userRoleOptions = response.data; |
||||
|
}); |
||||
|
this.queryParams.userId = this.$route.params.row.userId |
||||
|
this.rowData[0] = this.$route.params.row |
||||
|
|
||||
|
this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
// 角色字典 |
||||
|
userRoleFormat(row, column) { |
||||
|
return this.selectDictLabel(this.userRoleOptions, row.userRole); |
||||
|
}, |
||||
|
// 预览图片 |
||||
|
previewImage(abUrl) { |
||||
|
this.srcList[0] = abUrl; |
||||
|
}, |
||||
|
// 取消按钮 |
||||
|
cancelApple() { |
||||
|
this.openApple = false; |
||||
|
this.open = false; |
||||
|
this.resetApple(); |
||||
|
}, |
||||
|
// 表单重置 |
||||
|
resetApple() { |
||||
|
this.formApple = { |
||||
|
|
||||
|
}; |
||||
|
this.resetForm("formApple"); |
||||
|
}, |
||||
|
handleFail(v, d) { |
||||
|
this.resetApple() |
||||
|
this.formApple.auditStatus = v |
||||
|
this.formApple.witNo = d.witNo |
||||
|
this.openApple = true |
||||
|
}, |
||||
|
handleSuccess(v, d) { |
||||
|
this.resetApple(); |
||||
|
this.open = true; |
||||
|
this.formApple.witNo = d.witNo |
||||
|
this.formApple.auditStatus = v |
||||
|
}, |
||||
|
/** 审核提交 */ |
||||
|
submitFormApple(v) { |
||||
|
if (!this.formApple.auditReason && v == 'reject') { |
||||
|
this.$message.error('驳回备注不能为空'); |
||||
|
return; |
||||
|
} |
||||
|
updateUserCertification(this.formApple).then(response => { |
||||
|
this.msgSuccess("操作成功"); |
||||
|
this.open = false; |
||||
|
this.openApple = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
}, |
||||
|
/** 查询实名认证信息列表 */ |
||||
|
getList() { |
||||
|
this.loading = true; |
||||
|
listUserCertification(this.queryParams).then(response => { |
||||
|
this.UserCertificationList = response.rows; |
||||
|
this.loading = false; |
||||
|
for (var i = this.UserCertificationList.length - 1; i >= 0; i--) { |
||||
|
if (this.UserCertificationList[i].authType == 'advanced') { |
||||
|
this.storeData = this.UserCertificationList[i] |
||||
|
if (this.UserCertificationList[i].auditStatus == 'apply') { |
||||
|
this.storeData = this.UserCertificationList[i] |
||||
|
} |
||||
|
} |
||||
|
if (this.UserCertificationList[i].authType == 'basic') { |
||||
|
this.kycData = this.UserCertificationList[i] |
||||
|
if (this.UserCertificationList[i].auditStatus == 'apply') { |
||||
|
this.kycData = this.UserCertificationList[i] |
||||
|
} |
||||
|
} |
||||
|
if (this.UserCertificationList[i].authType == 'pro') { |
||||
|
this.proData = this.UserCertificationList[i] |
||||
|
if (this.UserCertificationList[i].auditStatus == 'apply') { |
||||
|
this.proData = this.UserCertificationList[i] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
auditStatusFormat(row, column) { |
||||
|
return this.selectDictLabel(this.auditStatusOptions, row.auditStatus); |
||||
|
}, |
||||
|
authTypeFormat(row, column) { |
||||
|
return this.selectDictLabel(this.authTypeOptions, row.authType); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.status-con .item { |
||||
|
width: 46%; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__footer { |
||||
|
border-top: 1px solid rgba(223, 230, 236, 1); |
||||
|
padding: 0; |
||||
|
height: 60px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__footer .el-button { |
||||
|
width: 50%; |
||||
|
height: 60px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__footer .el-button:nth-child(1) { |
||||
|
border-right: 1px solid rgba(223, 230, 236, 1); |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__footer .el-button:nth-child(1) span { |
||||
|
color: rgba(102, 102, 102, 1); |
||||
|
} |
||||
|
|
||||
|
.sub-tit { |
||||
|
font-size: 13px; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
color: rgba(51, 51, 51, 1); |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-textarea__inner { |
||||
|
background: #F3F6F8 !important; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__body { |
||||
|
padding: 15px 20px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-dialog__header { |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.btnCon { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
::v-deep .btnCon .el-button { |
||||
|
width: 110px; |
||||
|
height: 40px; |
||||
|
border-radius: 4px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.status-text {} |
||||
|
|
||||
|
.status-bar { |
||||
|
width: 40px; |
||||
|
height: 160px; |
||||
|
background: rgba(231, 53, 53, 1); |
||||
|
position: absolute; |
||||
|
right: 12px; |
||||
|
top: -32px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
transform: rotate(-40deg); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
writing-mode: vertical-lr; |
||||
|
justify-content: center; |
||||
|
letter-spacing: 8px; |
||||
|
} |
||||
|
|
||||
|
.circle { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
background: rgba(9, 186, 122, 1); |
||||
|
margin-right: 10px; |
||||
|
} |
||||
|
|
||||
|
.img-con-border { |
||||
|
border: 1px solid rgba(223, 230, 236, 1); |
||||
|
padding: 9px; |
||||
|
width: 359px; |
||||
|
height: 203px; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
|
||||
|
.img-con-border .avatar { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.status-con { |
||||
|
margin-top: 52px; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
border: 1px solid rgba(223, 230, 236, 1); |
||||
|
padding: 20px 16px; |
||||
|
border-radius: 8px; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.status .text { |
||||
|
font-size: 12px; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,305 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
|
||||
|
|
||||
|
<div class="bg bg-white"> |
||||
|
<!-- <el-row :gutter="10" class="m-b-16"> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
@click="handleAdd" |
||||
|
v-hasPermi="['user:wallet:add']" |
||||
|
>新增</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
:disabled="single" |
||||
|
@click="handleUpdate" |
||||
|
v-hasPermi="['user:wallet:edit']" |
||||
|
>修改</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
:disabled="multiple" |
||||
|
@click="handleDelete" |
||||
|
v-hasPermi="['user:wallet:remove']" |
||||
|
>删除</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="1.5"> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
size="medium" |
||||
|
@click="handleExport" |
||||
|
v-hasPermi="['user:wallet:export']" |
||||
|
>导出</el-button> |
||||
|
</el-col> |
||||
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
||||
|
</el-row> --> |
||||
|
<div class="flex m-b-20"> |
||||
|
<div class="circle m-r-10"></div> |
||||
|
|
||||
|
用户：{{ queryParams.userName }} |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<el-table v-loading="loading" :data="walletList" @selection-change="handleSelectionChange"> |
||||
|
<!-- <el-table-column type="selection" width="55" align="center" /> --> |
||||
|
<el-table-column label="币种" align="center" prop="coinId" width="120" /> |
||||
|
<el-table-column label="钱包地址" align="center" prop="address" /> |
||||
|
<el-table-column label="可用余额" align="center" prop="balance" /> |
||||
|
<el-table-column label="冻结余额" align="center" prop="frozenBalance" /> |
||||
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button size="medium" type="text" @click="handleUpdate(scope.row)" |
||||
|
v-hasPermi="['user:wallet:edit']">修改余额</el-button> |
||||
|
<el-button size="medium" type="text" @click="handleWater(scope.row)" |
||||
|
>资金流水</el-button> |
||||
|
<!-- <el-button |
||||
|
size="medium" |
||||
|
type="text" |
||||
|
icon="el-icon-delete" |
||||
|
@click="handleDelete(scope.row)" |
||||
|
v-hasPermi="['user:wallet:remove']" |
||||
|
>删除</el-button> --> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" |
||||
|
@pagination="getList" /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 添加或修改otc钱包信息对话框 --> |
||||
|
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> |
||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="110px"> |
||||
|
|
||||
|
<el-form-item label="类型" prop="alterationType"> |
||||
|
<el-select v-model="form.alterationType" placeholder="请选择类型"> |
||||
|
<el-option label="增加" value="add"></el-option> |
||||
|
<el-option label="减少" value="alterationType"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="修改金额" prop="updateAmount"> |
||||
|
<el-input v-model="form.updateAmount" placeholder="请输入修改金额" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="备注" prop="remark"> |
||||
|
<el-input v-model="form.remark" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="谷歌验证码" prop="googleSecret"> |
||||
|
<el-input v-model="form.googleSecret" placeholder="请输入备注" /> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="primary" @click="submitForm">确 定</el-button> |
||||
|
<el-button @click="cancel">取 消</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
<!-- 通道列表 --> |
||||
|
<el-dialog v-dialogDrag title="资金流水" :visible.sync="pkCouponScopeRangeParkingStoreOpen" width="80%" append-to-body |
||||
|
:close-on-click-modal="false"> |
||||
|
<pkCouponScopeRangeStoreList v-if="pkCouponScopeRangeParkingStoreOpen" :pkCouponStore="pkCouponStore" |
||||
|
:pkCouponId="pkCouponStoreId"> |
||||
|
</pkCouponScopeRangeStoreList> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { listWallet, getWallet, delWallet, addWallet, updateWallet, exportWallet } from "@/api/user/wallet"; |
||||
|
import pkCouponScopeRangeStoreList from "./pkCouponScopeRangeStoreList"; |
||||
|
|
||||
|
export default { |
||||
|
name: "Wallet", |
||||
|
components: { |
||||
|
pkCouponScopeRangeStoreList |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
pkCouponScopeRangeParkingStoreOpen: false, |
||||
|
pkCouponStore: {}, |
||||
|
pkCouponStoreId: '', |
||||
|
// 遮罩层 |
||||
|
loading: true, |
||||
|
// 选中数组 |
||||
|
ids: [], |
||||
|
// 非单个禁用 |
||||
|
single: true, |
||||
|
// 非多个禁用 |
||||
|
multiple: true, |
||||
|
// 显示搜索条件 |
||||
|
showSearch: true, |
||||
|
// 总条数 |
||||
|
total: 0, |
||||
|
// otc钱包信息表格数据 |
||||
|
walletList: [], |
||||
|
// 弹出层标题 |
||||
|
title: "", |
||||
|
// 是否显示弹出层 |
||||
|
open: false, |
||||
|
// 查询参数 |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 10, |
||||
|
coinId: null, |
||||
|
chainName: null, |
||||
|
balance: null, |
||||
|
frozenBalance: null, |
||||
|
isEnable: null, |
||||
|
userName: null, |
||||
|
}, |
||||
|
// 表单参数 |
||||
|
form: {}, |
||||
|
rules: { |
||||
|
alterationType: [ |
||||
|
{ required: true, message: "类型不能为空", trigger: "blur" } |
||||
|
], |
||||
|
updateAmount: [ |
||||
|
{ required: true, message: "金额不能为空", trigger: "blur" } |
||||
|
], |
||||
|
googleSecret: [ |
||||
|
{ required: true, message: "谷歌验证码不能为空", trigger: "blur" } |
||||
|
], |
||||
|
} |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.queryParams.userName = this.$route.params.row.name |
||||
|
this.getList(); |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
/** 查询otc钱包信息列表 */ |
||||
|
getList() { |
||||
|
this.loading = true; |
||||
|
listWallet(this.queryParams).then(response => { |
||||
|
this.walletList = response.rows; |
||||
|
this.total = Number(response.total); |
||||
|
this.loading = false; |
||||
|
}); |
||||
|
}, |
||||
|
// 取消按钮 |
||||
|
cancel() { |
||||
|
this.open = false; |
||||
|
this.reset(); |
||||
|
}, |
||||
|
// 表单重置 |
||||
|
reset() { |
||||
|
this.form = { |
||||
|
id: null, |
||||
|
userId: null, |
||||
|
coinId: null, |
||||
|
chainName: null, |
||||
|
balance: null, |
||||
|
frozenBalance: null, |
||||
|
isEnable: null, |
||||
|
createTime: null, |
||||
|
updateTime: null, |
||||
|
googleSecret: null |
||||
|
}; |
||||
|
this.resetForm("form"); |
||||
|
}, |
||||
|
/** 搜索按钮操作 */ |
||||
|
handleQuery() { |
||||
|
this.queryParams.pageNum = 1; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
/** 重置按钮操作 */ |
||||
|
resetQuery() { |
||||
|
this.resetForm("queryForm"); |
||||
|
this.handleQuery(); |
||||
|
}, |
||||
|
// 多选框选中数据 |
||||
|
handleSelectionChange(selection) { |
||||
|
this.ids = selection.map(item => item.id) |
||||
|
this.single = selection.length !== 1 |
||||
|
this.multiple = !selection.length |
||||
|
}, |
||||
|
/** 新增按钮操作 */ |
||||
|
handleAdd() { |
||||
|
this.reset(); |
||||
|
this.open = true; |
||||
|
this.title = "添加otc钱包信息"; |
||||
|
}, |
||||
|
/** 修改按钮操作 */ |
||||
|
handleUpdate(row) { |
||||
|
this.reset(); |
||||
|
const id = row.id || this.ids |
||||
|
getWallet(id).then(response => { |
||||
|
this.form = response.data; |
||||
|
this.open = true; |
||||
|
this.title = "变改余额"; |
||||
|
}); |
||||
|
}, |
||||
|
/** 修改按钮操作 */ |
||||
|
handleWater(row) { |
||||
|
this.reset(); |
||||
|
this.pkCouponStore = row; |
||||
|
this.pkCouponStoreId = row.userName; |
||||
|
this.pkCouponScopeRangeParkingStoreOpen = true; |
||||
|
}, |
||||
|
/** 提交按钮 */ |
||||
|
submitForm() { |
||||
|
this.$refs["form"].validate(valid => { |
||||
|
if (valid) { |
||||
|
updateWallet(this.form).then(response => { |
||||
|
this.msgSuccess("修改成功"); |
||||
|
this.open = false; |
||||
|
this.getList(); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
/** 删除按钮操作 */ |
||||
|
handleDelete(row) { |
||||
|
const ids = row.id || this.ids; |
||||
|
this.$confirm('是否确认删除otc钱包信息编号为"' + ids + '"的数据项?', "警告", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}).then(function () { |
||||
|
return delWallet(ids); |
||||
|
}).then(() => { |
||||
|
this.getList(); |
||||
|
this.msgSuccess("删除成功"); |
||||
|
}) |
||||
|
}, |
||||
|
/** 导出按钮操作 */ |
||||
|
handleExport() { |
||||
|
const queryParams = this.queryParams; |
||||
|
this.$confirm('是否确认导出所有otc钱包信息数据项?', "警告", { |
||||
|
confirmButtonText: "确定", |
||||
|
cancelButtonText: "取消", |
||||
|
type: "warning" |
||||
|
}).then(function () { |
||||
|
return exportWallet(queryParams); |
||||
|
}).then(response => { |
||||
|
this.download(response.msg); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.search_con { |
||||
|
font-size: 16px; |
||||
|
font-weight: 500; |
||||
|
color: rgba(51, 51, 51, 1); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.circle { |
||||
|
width: 8px; |
||||
|
height: 8px; |
||||
|
background: rgba(9, 186, 122, 1); |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue