<template>
|
<div v-if="configDetail" class="flex flex-col w-full h-full">
|
<order-nav class="w-full" :title="$t(configDetail.methodName)" />
|
<div class="flex-1 w-full pt-56 overflow-auto">
|
<div class="content pr-32 pl-32">
|
<div class="flex items-center justify-center mb-60">
|
<img class="w-80" :src="imgSrc(configDetail.methodImg)" alt="">
|
</div>
|
<c2c-input color="#7B7F87" :disabled="true" :value="configDetail.methodName" :label="$t('支付方式配置')" />
|
<c2c-input color="#7B7F87" :disabled="true" :value="configDetail.methodTypeName" :label="$t('支付方式类型')" />
|
<c2c-input v-model="params.name" :label="$t('真实姓名')" :placeholder="$t('真实姓名')" />
|
<c2c-input v-for="(item, index) in list" :key="index" :label="$t(item[`paramName${parseInt(index) + 1}`])"
|
v-model="item[`param_value${parseInt(index) + 1}`]"
|
:placeholder="$t(item[`paramName${parseInt(index) + 1}`])" />
|
<div class="mb-60" v-if="configDetail.methodType !== 1">
|
<p class="mb-18 font-28" style="color: rgb(134, 141, 154);">{{ $t('支付二维码') }}</p>
|
<van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1" />
|
</div>
|
<c2c-input :isTextArea="true" v-model="params.remark" :label="$t('备注')" :placeholder="$t('备注')" />
|
</div>
|
<div class="w-full pl-32 pr-32 pb-72 mt-325 box-border">
|
<div class="font-24 mb-24" :style="{ 'color': '#868D9A' }">
|
{{ $t('温馨提示：当您出售数字货币时，您选择的收款方式将向买方展示，请确认信息填写准确无误。') }}
|
</div>
|
<otc-button :disabled="fullDisabled" :text="$t('保存')" @btnClick="handlerClick"></otc-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import otcApi from "@/API/otc";
|
|
import { Button, Toast, Uploader } from 'vant';
|
import { _uploadImage } from '@/API/fund.api'
|
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import C2cInput from "@/page/placeAnOrder/components/c2cInput/C2cInput";
|
import OtcButton from "@/components/otc-button/OtcButton";
|
import { BASE_URL } from "@/config";
|
|
export default {
|
name: "CN",
|
// configType 编辑/添加
|
props: ["configType", 'id'],
|
data() {
|
return {
|
configDetail: null,
|
disabled1: false, //
|
disabled2: false, //
|
list: [],
|
params: {
|
name: '',
|
remark: '',
|
},
|
fileList: [],
|
}
|
},
|
created() {
|
if (this.configType === 'add') {
|
this.getPaymentMethodConfigDetail();
|
this.getUserName();
|
} else if (this.configType === 'edit') {
|
this.getPaymentMethodDetail();
|
}
|
|
},
|
methods: {
|
afterRead(file) {
|
file.status = 'uploading'
|
file.message = this.$t('上传中...')
|
// 上传图片到服务器
|
_uploadImage(file).then(res => {
|
file.status = 'success';
|
file.message = this.$t('上传成功');
|
file.resURL = res
|
}).catch(err => {
|
file.status = 'failed';
|
file.message = this.$t('图片上传失败');
|
})
|
},
|
handlerClick() {
|
if (this.configType === 'add') {
|
this.save();
|
} else {
|
this.edit();
|
}
|
},
|
// 获取实名
|
async getUserName() {
|
const res = await otcApi.getUserName()
|
this.params.name = res.data.name || '';
|
},
|
// 添加
|
async save() {
|
const params = this.formatParams('method_config_id');
|
|
const res = await otcApi.ctcPaymentMethodAddPay(params)
|
|
Toast({
|
message: this.$t('添加成功')
|
})
|
|
setTimeout(() => {
|
this.$router.replace({
|
path: '/paymentMethod'
|
})
|
}, 1000)
|
},
|
formatParams(id) {
|
const params = {
|
[id]: this.configDetail.id,
|
real_name: this.params.name,
|
remark: this.params.remark,
|
qrcode: (this.fileList[0] && this.fileList[0].resURL) || (this.fileList[0] && this.fileList[0].url) || ''
|
}
|
|
this.list.forEach(item => {
|
Object.keys(item).forEach(key => {
|
if (key.indexOf('param_value') !== -1) {
|
params[key] = item[key]
|
}
|
})
|
})
|
|
return params;
|
},
|
async edit() {
|
const params = this.formatParams('id');
|
console.log(params);
|
|
const res = await otcApi.ctcPaymentMethodUpdate(params);
|
console.log(res);
|
Toast({
|
message: this.$t('保存')
|
})
|
|
setTimeout(() => {
|
this.$router.replace({
|
path: '/paymentMethod'
|
})
|
}, 1000)
|
},
|
formatData(data) {
|
let index = 1;
|
Object.keys(data).forEach(key => {
|
if (key.indexOf('paramName') !== -1) {
|
if (this.configDetail[key] && this.configDetail[key].length > 0) {
|
if (this.configType === 'edit') {
|
console.log(key, index);
|
this.list.push({
|
['paramName' + index]: this.configDetail['paramName' + index],
|
['param_value' + index]: this.configDetail['paramValue' + index],
|
})
|
} else {
|
this.list.push({
|
['paramName' + index]: this.configDetail[key],
|
['param_value' + index]: '',
|
})
|
}
|
index++;
|
}
|
}
|
})
|
},
|
async getPaymentMethodConfigDetail() {
|
const res = await otcApi.paymentMethodConfigDetail({ id: this.id, language: this.$i18n.locale })
|
this.configDetail = res.data;
|
|
this.formatData(this.configDetail)
|
},
|
async getPaymentMethodDetail() {
|
const res = await otcApi.ctcPaymentMethodDetail({ id: this.id, language: this.$i18n.locale })
|
this.configDetail = res.data;
|
this.formatData(this.configDetail)
|
this.initData();
|
},
|
initData() {
|
this.params.name = this.configDetail.realName;
|
this.params.remark = this.configDetail.remark;
|
this.fileList.push({
|
url: this.imgSrc(this.configDetail.qrcode),
|
resURL: this.configDetail.qrcode
|
})
|
},
|
imgSrc(path) {
|
if (path.indexOf('http') !== -1) {
|
return path
|
} else {
|
const url = `${BASE_URL}public/showimg!showImg.action?imagePath=`
|
return url + path;
|
}
|
},
|
},
|
computed: {
|
bankNumber: {
|
get() {
|
return this.info.number && this.info.number.replace(/(\d{4})/g, '$1 ').trim()
|
},
|
set(newVal) {
|
this.info.number = newVal;
|
}
|
},
|
fullDisabled() {
|
return this.disabled1 && this.disabled2
|
}
|
},
|
components: {
|
[Button.name]: Button,
|
[Uploader.name]: Uploader,
|
OrderNav,
|
C2cInput,
|
OtcButton,
|
},
|
watch: {
|
// 是否存在空值
|
list: {
|
deep: true,
|
handler() {
|
const res = this.list.filter((item, index) => {
|
if (index != 2) {
|
return item[`param_value${parseInt(index) + 1}`] === "" || item[`param_value${parseInt(index) + 1}`] === undefined
|
}
|
})
|
this.disabled1 = res.length === 0;
|
},
|
immediate: true
|
},
|
params: {
|
deep: true,
|
handler() {
|
const res = Object.keys(this.params).filter(key => {
|
if (key !== 'remark') {
|
return this.params[key] === "" || this.params[key] === undefined
|
}
|
}
|
)
|
this.disabled2 = res.length === 0;
|
},
|
immediate: true
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.payment-input-wrapper {
|
margin-bottom: 60px;
|
|
input {
|
height: 100px;
|
}
|
}
|
|
.van-uploader__upload {
|
width: 180px !important;
|
height: 180px !important;
|
}
|
|
.van-button--info {
|
@include themify() {
|
background: themed("btn_main");
|
}
|
|
@include themify() {
|
border-color: themed("btn_main");
|
}
|
}
|
}
|
|
.desc {
|
width: 100%;
|
padding: 46px 24px;
|
border-radius: 8px;
|
background: #F0F1F4;
|
}
|
</style>
|
