projectionscreenPc/src/views/currency/currency_order_details.vue

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