You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
722 lines
27 KiB
722 lines
27 KiB
<template>
|
|
<div class="global-width">
|
|
<div class="container">
|
|
<!--当前位置-->
|
|
<div class="hc-breadcrumb">
|
|
<span class="hc-color4">{{$t('法币订单管理')}}</span>
|
|
<i class="hc-breadcrumb-icon"></i>
|
|
<span class="margin0" v-if="orderDetails.dealType == 'E_I_D_T_BUY'">{{$t('购买')}} {{orderDetails.inCoin}}</span>
|
|
<span class="margin0" v-if="orderDetails.dealType == 'E_I_D_T_SELL'">{{$t('出售')}} {{orderDetails.outCoin}}</span>
|
|
</div>
|
|
|
|
<div class="hc-breadcrumb trade-center-top">
|
|
<span>{{$t('订单详情')}}</span>
|
|
</div>
|
|
|
|
<div class="trade-detail-warp purchase-warp">
|
|
<div class="trade-detail-left">
|
|
<router-link to="/" class="trade-detail-left-div1">
|
|
<div class="trade-detail-left-top">
|
|
<img src="../../assets/images/user-head-img.png" class="trade-detail-left-headimg">
|
|
</div>
|
|
|
|
<div class="trade-detail-left-top">
|
|
<div class="trade-detail-left-nickname">{{orderDetails.dealUserIdentity}}</div>
|
|
<div class="merchants-tag">
|
|
<img src="../../assets/images/trade/icon-authentication.png">
|
|
<span class="hc-color">{{($t('认证商家'))}}</span>
|
|
</div>
|
|
</div>
|
|
</router-link>
|
|
|
|
<div class="trade-detail-left-div2">
|
|
<div class="trade-detail-left-div3">
|
|
<div class="hc-color">{{$t('交易次数')}}</div>
|
|
<div class="div2-d1">{{dealerInfo.sumOfFinishedFlow || 0}}</div>
|
|
</div>
|
|
|
|
<div class="trade-detail-left-div4">
|
|
<div class="hc-color">{{$t('完成率')}}</div>
|
|
<div class="div2-d1">{{dealerInfo.finishedRate || 0}}%</div>
|
|
</div>
|
|
|
|
<div class="trade-detail-left-div5">
|
|
<div class="hc-color">{{$t('平均放行')}}</div>
|
|
<div class="div2-d1">{{dealerInfo.avgReleaseMinus || 0}}分钟</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trade-detail-explain">
|
|
<h3>{{$t('广告说明')}}:</h3>
|
|
<p class="hc-color">{{$t('1.订单有效期为15分钟，请您及时在有效期内付款并点击「标记付款已完成」按钮，我才可以释放数字币给您。')}}</p>
|
|
<p class="hc-color">{{$t('2.开始交易后数字币由系统锁定托管，请安心下单。')}}</p>
|
|
</div>
|
|
<div class="trade-detail-explain">
|
|
<h3>{{$t('交易备注')}}:</h3>
|
|
<p class="hc-color">{{$t('请勿在汇款备注内填写比特币、BTC、OTC等任何数字币有关字眼，防止您的汇款被银行拦截。')}}</p>
|
|
<p class="hc-color">{{$t('银行帐号：')}}xxxx xxxx xxxx xxxx</p>
|
|
<p class="hc-color">{{$t('支付宝帐号：')}}xxxxxxx</p>
|
|
<p class="hc-color">{{$t('单后可以直接加我微信跟我联系，我会尽快回复。')}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="trade-detail-right">
|
|
<div class="top-price">
|
|
<span class="hc-color2" v-if="orderDetails.dealType == 'E_I_D_T_BUY'">{{$t('购买')}} {{orderDetails.inCoin}}</span>
|
|
<span class="hc-color1" v-if="orderDetails.dealType == 'E_I_D_T_SELL'">{{$t('出售')}} {{orderDetails.outCoin}}</span>
|
|
|
|
<div class="top-price-r">{{$t('订单编号')}}：{{id}}</div>
|
|
<div class="top-price-r top-price-rm">{{$t('时间')}}： {{orderDetails.createDatetime | dateFormat('YYYY-MM-DD HH:mm:ss')}}</div>
|
|
</div>
|
|
|
|
<ul class="ul-information">
|
|
<li class="li-1">
|
|
<div class="div1-d1">{{$t('价格')}}</div>
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_BUY'">¥{{orderDetails.amount}}/{{orderDetails.outCoin}}</p>
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_SELL'">¥{{orderDetails.amount}}/{{orderDetails.inCoin}}</p>
|
|
</li>
|
|
<li class="li-2">
|
|
<div class="div1-d1">{{$t('数量')}}</div>
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_BUY'">{{orderDetails.inAmount}}{{orderDetails.inCoin}}</p>
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_SELL'">{{orderDetails.outAmount}}{{orderDetails.outCoin}}</p>
|
|
</li>
|
|
<li class="li-3">
|
|
<div class="div1-d1">{{$t('交易金额')}}</div>
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_BUY'">¥{{orderDetails.outAmount}}</p>
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_SELL'">¥{{orderDetails.inAmount}}</p>
|
|
</li>
|
|
<!-- <li class="li-4">
|
|
<div class="div1-d1">{{$t('交易方式')}}</div>
|
|
<p>
|
|
<img src="../../theme/images/trade/icon-alipay.png" />
|
|
</p>
|
|
</li> -->
|
|
<li class="li-5">
|
|
<div class="div1-d1">{{$t('付款期限')}}</div>
|
|
<p>15分钟</p>
|
|
</li>
|
|
<li class="li-6">
|
|
<div class="div1-d1">{{$t('状态')}}</div>
|
|
<p v-if="orderDetails.statusStr == '待付款'">{{$t('请付款')}}</p>
|
|
<p v-else-if="orderDetails.status == 'M_O_F_S_CANCEL'">{{$t('已取消')}}</p>
|
|
<p v-else-if="orderDetails.statusStr == '完成'">{{$t('已完成')}}</p>
|
|
<p v-else-if="orderDetails.appeal">{{$t('申诉中')}}</p>
|
|
<p v-else>{{orderDetails.statusStr}}</p>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="order-list-total">
|
|
<div class="order-list-notice-one">
|
|
<span class="list-notice-title">{{$t('手续费')}}:</span><span>￥2</span>
|
|
<div class="question-box">
|
|
<img class="fa-question" src="../../assets/images/icon-question.png" />
|
|
<div class="free-explanation">
|
|
<h3>{{$t('手续费说明')}}:</h3>
|
|
<p>{{$t('交易手续费扣除百分之零点一')}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-list-notice-two">
|
|
<p>
|
|
<span class="list-notice-title">{{$t('总额：')}}</span>
|
|
<span class="list-notice-detail" v-if="orderDetails.dealType == 'E_I_D_T_BUY'">¥{{orderDetails.outAmount}}</span>
|
|
<span class="list-notice-detail" v-if="orderDetails.dealType == 'E_I_D_T_SELL'">¥{{orderDetails.inAmount}}</span>
|
|
</p>
|
|
|
|
<p>
|
|
<span class="list-notice-title">{{$t('兑换：')}}</span>
|
|
<span v-if="orderDetails.dealType == 'E_I_D_T_BUY'">{{orderDetails.inAmount}}{{orderDetails.inCoin}}</span>
|
|
<span v-if="orderDetails.dealType == 'E_I_D_T_SELL'">{{orderDetails.outAmount}}{{orderDetails.outCoin}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-person-info">
|
|
<div class="person-info-left">
|
|
<!-- 买家 待付款 -->
|
|
<div class="info-left-one" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_WAIT_PAY' && !orderDetails.appeal">
|
|
<div class="one-title">{{$t('商家收款账号')}}</div>
|
|
|
|
<div class="one-body">
|
|
<button type="button" class="el-popover_reference" @click="showPaymentInfo(item)" v-for="item of memberPayWayList" :key="item.paymentType">
|
|
<span>
|
|
<img src="../../assets/images/trade/icon-wechat2.png" v-if="item.paymentType == 1">
|
|
<img src="../../assets/images/trade/icon-alipay2.png" v-if="item.paymentType == 2">
|
|
<img src="../../assets/images/trade/icon-bankpayicon2.png" v-if="item.paymentType == 3">
|
|
<span class="one-body-bank">{{item.paymentTypeStr}}</span>
|
|
</span>
|
|
</button>
|
|
|
|
<!--收款信息-->
|
|
<div class="collection-information" v-if="showPayment">
|
|
<!--银行卡-->
|
|
<div class="bank-card">
|
|
<div class="account_info">
|
|
<span class="account_info_span">{{$t('姓名')}}：</span>
|
|
<span>{{paymentInfo.realName}}</span>
|
|
<div class="account-copy" v-clipboard:copy="paymentInfo.realName" v-clipboard:success="copySuccess">{{$t('复制')}}</div>
|
|
</div>
|
|
<div class="account_info" v-if="paymentInfo.paymentType == 3">
|
|
<span class="account_info_span">{{$t('开户行')}}：</span>
|
|
<span>{{paymentInfo.remark}}</span>
|
|
<div class="account-copy" v-clipboard:copy="paymentInfo.remark" v-clipboard:success="copySuccess">{{$t('复制')}}</div>
|
|
</div>
|
|
<div class="account_info" v-if="paymentInfo.paymentType == 3">
|
|
<span class="account_info_span">{{$t('银行卡号')}}：</span>
|
|
<span>{{paymentInfo.account}}</span>
|
|
<div class="account-copy" v-clipboard:copy="paymentInfo.account" v-clipboard:success="copySuccess">{{$t('复制')}}</div>
|
|
</div>
|
|
<div class="account_info" v-if="paymentInfo.paymentType != 3">
|
|
<span class="account_info_span">{{$t('账号')}}：</span>
|
|
<span>{{paymentInfo.account}}</span>
|
|
<div class="account-copy" v-clipboard:copy="paymentInfo.account" v-clipboard:success="copySuccess">{{$t('复制')}}</div>
|
|
</div>
|
|
<div class="account_info" v-if="paymentInfo.paymentType != 3">
|
|
<span class="account_info_span">{{$t('付款二维码')}}：</span>
|
|
<span><img :src="paymentInfo.img" style="width: 100%;"></span>
|
|
<a :href="paymentInfo.img" target="_blank" class="account-copy">{{$t('看大图')}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="one-body-notice">※ {{$t('使用微信、支付宝、银行卡转账时，请不要添加任何备注内容！ 否则可能会被支付系统拦截')}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-left-one" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_WAIT_PASS' && !orderDetails.appeal">
|
|
<div class="chat-title">
|
|
<span class="chat-m">{{$t('买家')}}：</span>
|
|
<img class="chat-title-headimg" src="../../assets/images/user-head-img.png">
|
|
<span class="chat-title-nickname co-nickname">{{orderDetails.dealUserIdentity}}</span>
|
|
<div class="merchants-tag">
|
|
<img src="../../assets/images/trade/icon-authentication.png"> <span class="hc-color">{{($t('认证商家'))}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="confirm-price">
|
|
<div class="confirm-price-t">
|
|
<span>{{$t('查收买家付款')}}</span>
|
|
<h1 class="hc-color1">¥{{orderDetails.inAmount}}</h1>
|
|
</div>
|
|
|
|
<div class="confirm-price-t">
|
|
<div class="confirm-price-text">
|
|
<ul>
|
|
<li>
|
|
<span>{{$t('付款留言：')}}</span>{{payMessage ? payMessage : '无'}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="one-body-notice">※ 请务必登录收款账户确认到账明细，避免因错误点击放行造成财产损失。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-left-two">
|
|
<div class="two-title">
|
|
<div class="order-title-seven order-title" v-if="!orderDetails.appeal">
|
|
<!-- 已取消 -->
|
|
<p class="is-center" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_CANCEL'">{{$t('该订单已经取消，请勿再执行任何转帐行为')}}</p>
|
|
<p class="is-center" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_CANCEL'">{{$t('该订单已经取消')}}</p>
|
|
|
|
<!-- 买家 待付款 -->
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_WAIT_PAY'">
|
|
{{$t('付款时间剩余')}}<span>{{countDown | countDown}}</span>{{$t('，逾期订单将自动取消，请及时付款并点击标记付款')}}
|
|
</p>
|
|
<!-- 卖家 待付款 -->
|
|
<p v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_WAIT_PAY'">
|
|
{{$t('付款时间剩余')}}<span>{{countDown | countDown}}</span>{{$t('，逾期订单将自动取消，等待买家付款')}}
|
|
</p>
|
|
|
|
<!-- 买家 待放行 -->
|
|
<p class="is-center" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_WAIT_PASS'">
|
|
{{orderDetails.inCoin}} {{$t('将持续由系统锁定托管')}}<br>{{$t('待放行剩余时间')}}<span>{{countDown | countDown}}</span>
|
|
</p>
|
|
<!-- 卖家 待放行 -->
|
|
<p class="is-center" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_WAIT_PASS'">
|
|
{{$t('请务必查收到账账户再确认收款')}}<br>{{$t('待放行剩余时间')}}<span>{{countDown | countDown}}</span>
|
|
</p>
|
|
|
|
<!-- 已完成 -->
|
|
<p class="is-center" v-if="orderDetails.status == 'M_O_F_S_FINISH'">{{$t('已完成交易')}}</p>
|
|
</div>
|
|
|
|
<div class="order-title-seven order-title" v-if="orderDetails.appeal">
|
|
<p class="is-center">{{$t('此订单已经入申诉状态，请耐心等待客服介入处理')}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tips two-body">
|
|
<div class="tips-seven" v-if="!orderDetails.appeal">
|
|
<!-- 已取消 -->
|
|
<div class="tips-body" v-if="orderDetails.status == 'M_O_F_S_CANCEL'">
|
|
<button class="el-button el-button3 cursor-no">
|
|
<span>{{$t('订单已取消')}}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 买家 待付款 -->
|
|
<div class="tips-body" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_WAIT_PAY'">
|
|
<button type="button" class="el-button el-button2" @click="confirmPay">
|
|
<span>{{$t('标记付款已完成')}}</span>
|
|
</button>
|
|
<button type="button" class="el-button complete" @click="cancleOrder">
|
|
<span>{{$t('取消交易')}}</span>
|
|
</button>
|
|
</div>
|
|
<!-- 卖家 待付款 -->
|
|
<div class="tips-body" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_WAIT_PAY'">
|
|
<button type="button" class="el-button el-button2 cursor-no">
|
|
<span>{{$t('等待买家付款')}}</span>
|
|
</button>
|
|
<button type="button" class="el-button complete" @click="cancleOrder">
|
|
<span>{{$t('取消交易')}}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 买家 待放行 -->
|
|
<div class="tips-body" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_WAIT_PASS'">
|
|
<button type="button" class="el-button el-button3 cursor-no">
|
|
<span>{{$t('已标记付款，请等待卖家核实后释放数字币')}}</span>
|
|
</button>
|
|
<button type="button" class="el-button complete" @click="openAppeal">
|
|
<span>{{$t('我要申诉')}}</span>
|
|
</button>
|
|
</div>
|
|
<!-- 卖家 待放行 -->
|
|
<div class="tips-body" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_WAIT_PASS'">
|
|
<button type="button" @click="confirmPass" class="el-button el-button3 hc-color4">
|
|
<span>{{$t('确认收款并放行')}}</span>
|
|
</button>
|
|
<button type="button" class="el-button complete" @click="openAppeal">
|
|
<span>{{$t('我要申诉')}}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 买家 已完成 -->
|
|
<div class="tips-body" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_FINISH'">
|
|
<button type="button" class="el-button el-button3 cursor-no">
|
|
<span>{{$t('数字货币已转到你的账户')}}</span>
|
|
</button>
|
|
<button type="button" class="el-button complete">
|
|
<span>{{$t('查看账户')}}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 买家 已完成 -->
|
|
<div class="tips-body" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_FINISH'">
|
|
<button type="button" class="el-button el-button3 cursor-no">
|
|
<span>{{$t('数字货币已转到买家的账户')}}</span>
|
|
</button>
|
|
<button type="button" class="el-button complete">
|
|
<span>{{$t('查看账户')}}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tips-text" v-if="orderDetails.appeal">
|
|
<h3 class="apeal-text">{{$t('申诉订单处理中')}}...</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 买家 待付款 -->
|
|
<div class="person-info-right" v-if="orderDetails.dealType == 'E_I_D_T_BUY' && orderDetails.status == 'M_O_F_S_WAIT_PAY' && !orderDetails.appeal">
|
|
<div class="chat">
|
|
<div class="chat-title">
|
|
<span class="chat-title-nickname co-nickname">{{$t('上传付款截图')}}</span>
|
|
</div>
|
|
<div class="chat-body-div">
|
|
<div class="title-tips">{{$t('选择付款方式')}}</div>
|
|
<div class="address-form-input choose-payment">
|
|
<el-select v-model="payTypeText" @change="choosePayment">
|
|
<el-option v-for="(item, index) in paymentList" :key="index" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div class="title-tips">{{$t('备注')}}</div>
|
|
<div class="address-form-input">
|
|
<el-input :placeholder="$t('请输入备注')" v-model="payRemark" type="text" clearable autocomplete="off" @keyup.enter.native="submitPay">
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="title-tips">{{$t('请上传付款凭证')}}</div>
|
|
<div class="upload-photo" :class="{'hide': payImage}">
|
|
<el-upload
|
|
:action="this.common.baseURL+'/user/api/file/image'"
|
|
:headers="{'Authorization': 'Bearer '+this.common.getItem(common.tokenKey)}"
|
|
list-type="picture-card"
|
|
accept="image/jpeg,image/gif,image/png"
|
|
:file-list="fileList"
|
|
:on-success="uploadSuccess"
|
|
:on-error="uploadError"
|
|
:on-remove="uploadDelete"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</div>
|
|
|
|
<div class="pay-submit">
|
|
<el-button type="primary" :loading="true" v-if="upload">{{$t('提交中...')}}</el-button>
|
|
<el-button type="primary" @click="submitPay" v-else>{{$t('提交')}}</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 买家 待放行 -->
|
|
<div class="person-info-right" v-if="orderDetails.dealType == 'E_I_D_T_SELL' && orderDetails.status == 'M_O_F_S_WAIT_PASS' && !orderDetails.appeal">
|
|
<div class="chat">
|
|
<div class="chat-title">
|
|
<span class="chat-title-nickname co-nickname">买家付款截图</span>
|
|
</div>
|
|
|
|
<div class="chat-body-div">
|
|
<a :href="payVoucher" target="_blank">
|
|
<img :src="payVoucher" style="max-width: 100%;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 申诉的弹窗 -->
|
|
<el-dialog class="user-dialog" :title="$t('订单申诉')" :visible.sync="showAppeal" :before-close="closeAppeal">
|
|
<div class="title-tips">{{$t('申诉理由')}}</div>
|
|
<div class="address-form-input choose-payment">
|
|
<el-select v-model="reasonCodeText" @change="chooseReason">
|
|
<el-option v-for="(item, index) in reasonList" :key="index" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div class="title-tips">{{$t('申诉内容')}}</div>
|
|
<div class="address-form-input">
|
|
<el-input :placeholder="$t('请输入申诉内容')" v-model="appealContent" type="text" clearable autocomplete="off" @keyup.enter.native="submitAppeal">
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="title-tips">{{$t('上传问题截图')}}</div>
|
|
<div class="upload-photo">
|
|
<el-upload
|
|
:action="this.common.baseURL+'/user/api/file/image'"
|
|
:headers="{'Authorization': 'Bearer '+this.common.getItem(common.tokenKey)}"
|
|
list-type="picture-card"
|
|
accept="image/jpeg,image/gif,image/png"
|
|
:file-list="fileList"
|
|
:on-success="uploadSuccess2"
|
|
:on-error="uploadError"
|
|
:on-remove="uploadDelete2"
|
|
>
|
|
<i class="el-icon-plus"></i>
|
|
</el-upload>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" :loading="true" v-if="appealLoading">{{$t('提交中...')}}</el-button>
|
|
<el-button type="primary" @click="submitAppeal" v-else>{{$t('确定')}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
let count; //全局定义倒计时
|
|
export default {
|
|
name: 'currencyOrderDetails',
|
|
data() {
|
|
return {
|
|
id: '', //订单id
|
|
orderDetails: {}, //订单详情
|
|
dealerInfo: {}, //交易方信息
|
|
|
|
memberPayWayList: [], //支付方式
|
|
showPayment: false,
|
|
paymentInfo: {},
|
|
payVoucher: '', //付款凭证
|
|
payMessage: '', //付款留言
|
|
|
|
fileList: [], //上传插件 上传图片列表
|
|
payTypeText: '选择付款方式', //付款方式
|
|
payType: '', //付款方式
|
|
payImage: '', //付款截图
|
|
payRemark: '', //付款留言
|
|
upload: false, //上传按钮
|
|
|
|
showAppeal: false, //申诉弹窗
|
|
reasonList: [], //申诉理由列表
|
|
reasonCodeText: '请选择理由',
|
|
reasonCode: '', //申诉选择的理由
|
|
appealContent: '', //申诉内容
|
|
fileIds: [], //上传图片列表
|
|
appealLoading: '', //提交申诉按钮
|
|
|
|
countDown: 0, //倒计时时间
|
|
}
|
|
},
|
|
computed: {
|
|
paymentList() {
|
|
let list = [];
|
|
this.memberPayWayList.forEach(item => {
|
|
list.push({
|
|
value: item.paymentType,
|
|
label: item.paymentTypeStr
|
|
})
|
|
});
|
|
return list;
|
|
}
|
|
},
|
|
methods: {
|
|
getDetails() { //获取订单详情
|
|
this.getAxios('/api/market/order/flow/detail/' + this.id)
|
|
.then(data => {
|
|
if (data.data.cancel) { //取消
|
|
this.orderDetails = data.data.cancel.flowBaseInfo;
|
|
}
|
|
|
|
if (data.data.obligation) { //待付款
|
|
this.orderDetails = data.data.obligation.flowBaseInfo;
|
|
this.timer(data.data.obligation.seconds);
|
|
|
|
let list = data.data.obligation.userPaymentVoList;
|
|
this.memberPayWayList = list;
|
|
}
|
|
|
|
if (data.data.release) { //待放行
|
|
this.orderDetails = data.data.release.flowBaseInfo;
|
|
if (data.data.release.paymentVoucherImg) {
|
|
this.payVoucher = data.data.release.paymentVoucherImg;
|
|
}
|
|
this.payMessage = data.data.release.remark;
|
|
this.timer(data.data.release.seconds);
|
|
}
|
|
|
|
if (data.data.complaining) { //申诉中
|
|
this.orderDetails = data.data.complaining.flowBaseInfo;
|
|
}
|
|
|
|
if (data.data.finish) { //已完成
|
|
this.orderDetails = data.data.finish.flowBaseInfo;
|
|
}
|
|
|
|
setTimeout(() => {
|
|
this.getDealerInfo(this.orderDetails.dealUserId);
|
|
}, 300)
|
|
})
|
|
},
|
|
getDealerInfo(id) { //获取交易对象的信息
|
|
this.postAxios('/api/market/order/business/info/' + id)
|
|
.then(data => {
|
|
this.dealerInfo = data.data;
|
|
})
|
|
},
|
|
getReasonList() { //获取申诉理由
|
|
this.getAxios('/api/user/appeal/reason/list')
|
|
.then(data => {
|
|
let list = data.data;
|
|
list.forEach(item => {
|
|
this.reasonList.push({
|
|
value: item.reasonCode,
|
|
label: item.reasonStr
|
|
})
|
|
});
|
|
})
|
|
},
|
|
timer(seconds) { //倒计时
|
|
//剩余时间(秒)
|
|
this.countDown = seconds; //倒计时时间
|
|
|
|
count = setInterval(() => { //开始倒计时
|
|
this.countDown--;
|
|
if (this.countDown == 0) {
|
|
clearInterval(count);
|
|
setTimeout(() => {
|
|
this.getDetails();
|
|
}, 1000);
|
|
}
|
|
}, 1000);
|
|
},
|
|
|
|
showPaymentInfo(item) { //查看支付方式
|
|
this.showPayment = !this.showPayment;
|
|
console.log(this.showPayment)
|
|
this.paymentInfo = item;
|
|
},
|
|
copySuccess() {
|
|
this.$message.success(this.$t('复制成功！'));
|
|
},
|
|
choosePayment(value) { //选择付款方式
|
|
this.payType = value;
|
|
},
|
|
chooseReason(value) { //选择申诉理由
|
|
this.reasonCode = value;
|
|
},
|
|
|
|
//图片组件
|
|
uploadSuccess(res) {
|
|
this.payImage = res.data
|
|
},
|
|
uploadSuccess2(res) {
|
|
this.fileIds.push(res.data);
|
|
},
|
|
uploadDelete() {
|
|
this.payImage = '';
|
|
},
|
|
uploadDelete2() {
|
|
|
|
},
|
|
uploadError(err) { //上传失败
|
|
console.log(JSON.stringify(err))
|
|
},
|
|
|
|
//订单操作
|
|
submitPay() { //上传付款凭证
|
|
if(this.upload) {
|
|
return;
|
|
}
|
|
if(!this.payType) {
|
|
this.$message.error(this.$t('请选择付款方式！'));
|
|
return;
|
|
}
|
|
if(!this.payImage) {
|
|
this.$message.error(this.$t('请上传付款凭证！'));
|
|
return;
|
|
}
|
|
this.upload = true;
|
|
|
|
let params = {
|
|
flowId: this.id,
|
|
paymentType: this.payType,
|
|
fileImg: this.payImage,
|
|
remark: this.payRemark
|
|
}
|
|
this.postAxios('/api/market/order/upload/payment', params)
|
|
.then(() => {
|
|
this.$message.success(this.$t('支付凭证上传成功，请点击确认付款按钮完成支付！'));
|
|
this.upload = false;
|
|
})
|
|
.catch(() => {
|
|
this.upload = false;
|
|
})
|
|
},
|
|
confirmPay() { //标记为已支付
|
|
this.$confirm(this.$t('恶意点击将冻结帐户！您确定要标记为已支付吗？'), this.$t('提示'), {
|
|
cancelButtonText: this.$t('取消'),
|
|
confirmButtonText: this.$t('确定'),
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.putAxios('/api/market/order/confirm/play/' + this.id)
|
|
.then(() => {
|
|
this.$message.success('成功标记订单为已支付！');
|
|
setTimeout(() => {
|
|
this.getDetails();
|
|
}, 800);
|
|
})
|
|
})
|
|
},
|
|
confirmPass() { //确认放行
|
|
this.$confirm(this.$t('请务必登录收款账户确认到账明细，避免因错误点击放行造成财产损失。'), this.$t('提示'), {
|
|
cancelButtonText: this.$t('取消'),
|
|
confirmButtonText: this.$t('确定放行'),
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.putAxios('/api/market/order/confirm/release/' + this.id)
|
|
.then(() => {
|
|
this.$message.success('放行成功！');
|
|
setTimeout(() => {
|
|
this.getDetails();
|
|
}, 800);
|
|
})
|
|
})
|
|
},
|
|
cancleOrder() { //取消订单
|
|
this.$confirm(this.$t('您是否确定取消订单？取消的订单无法恢复！'), this.$t('提示'), {
|
|
cancelButtonText: this.$t('取消'),
|
|
confirmButtonText: this.$t('确定'),
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
this.putAxios('/api/market/order/cancel/' + this.id)
|
|
.then(() => {
|
|
this.$message.success('订单取消成功！');
|
|
setTimeout(() => {
|
|
this.getDetails();
|
|
}, 800);
|
|
})
|
|
})
|
|
},
|
|
openAppeal() { //打开申诉
|
|
this.getReasonList();
|
|
this.showAppeal = true;
|
|
},
|
|
submitAppeal() { //提交申诉
|
|
if(this.appealLoading) {
|
|
return;
|
|
}
|
|
if(!this.reasonCode) {
|
|
this.$message.error(this.$t('请选择申诉理由！'));
|
|
return;
|
|
}
|
|
if(!this.appealContent) {
|
|
this.$message.error(this.$t('请输入申诉内容！'));
|
|
return;
|
|
}
|
|
this.appealLoading = true;
|
|
let params = {
|
|
flowId: this.id,
|
|
reasonCode: this.reasonCode,
|
|
content: this.appealContent,
|
|
fileIds: this.fileIds
|
|
}
|
|
this.postAxios('/api/user/appeal/submit', params)
|
|
.then(() => {
|
|
this.$message.success('申诉成功，请耐心等待申诉结果！');
|
|
setTimeout(() => {
|
|
this.closeAppeal();
|
|
this.getDetails();
|
|
}, 800)
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
})
|
|
},
|
|
closeAppeal() { //关闭申诉
|
|
this.showAppeal = false;
|
|
//清除数据
|
|
this.appealContent = '';
|
|
this.reasonCode = '';
|
|
this.fileIds = [];
|
|
this.fileList = [];
|
|
},
|
|
},
|
|
created() {
|
|
this.id = this.$route.params.id;
|
|
this.getDetails();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pay-submit{
|
|
width: 100%;
|
|
clear: both;
|
|
padding-top: 20px;
|
|
}
|
|
.apeal-text {
|
|
font-size: 14px;
|
|
color: #8488f5;
|
|
text-align: center;
|
|
padding: 30px 0;
|
|
}
|
|
</style>
|