bellezhuo
6 years ago
10 changed files with 964 additions and 63 deletions
-
62src/assets/css/other.css
-
75src/assets/data/en.js
-
73src/assets/data/zh.js
-
6src/components/header.vue
-
8src/router.js
-
4src/views/currency/currency_deal.vue
-
23src/views/currency/currency_order.vue
-
722src/views/currency/currency_order_details.vue
-
42src/views/currency/currency_release.vue
-
12src/views/login/login.vue
@ -0,0 +1,722 @@ |
|||||
|
<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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue