NN2022060801/addons/admin/src/views/system/sellorder/index.vue

<template>
    <div class="ele-body">
        <el-card shadow="never">
            <!-- 搜索表单 -->
            <el-form :model="table.where" label-width="77px" class="ele-form-search"
                     @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :md="6" :sm="12">
                        <el-form-item label="订单号:">
                            <el-input v-model="table.where.order_no" placeholder="请输入订单号" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item label="订单状态:">
                            <el-select v-model="table.where.status" placeholder="请选择" class="ele-fluid">
                                <el-option label="全部" value="0"/>
                                <el-option label="待付款" value="1"/>
                                <el-option label="交易中" value="2"/>
                                <el-option label="已付款" value="3"/>
                                <el-option label="已完成" value="4"/>
                                <el-option label="异常订单" value="5"/>
                                <el-option label="退款订单" value="6"/>
                                <el-option label="超时订单" value="7"/>
                                <el-option label="已取消" value="8"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item label="异常状态:">
                            <el-select v-model="table.where.exception_status" placeholder="请选择" class="ele-fluid">
                                <el-option label="全部" value="0"/>
                                <el-option label="处理中" value="1"/>
                                <el-option label="已处理" value="2"/>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :md="6" :sm="8">
                        <el-form-item label="起止日期:" prop="date">
                            <el-date-picker
                                v-model="table.where.date"
                                type="daterange"
                                placeholder="选择起止日期"
                                size="small"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <div class="ele-form-actions">
                            <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search"
                                       class="ele-btn-icon">查询
                            </el-button>
                            <el-button
                                @click="(table.where={type: '2',status: '0', exception_status: '0'})&&$refs.table.reload()">
                                重置
                            </el-button>
                            <el-button @click="exportData" icon="el-icon-download" type="success" class="ele-btn-icon" v-if="permission.includes('sys:buyorder:export')">导出</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 操作按钮 -->
            <div class="ele-table-tool ele-table-tool-default">
                <el-button @click="remove()" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="small"
                           v-if="permission.includes('sys:user:dall')">批量删除
                </el-button>
            </div>
            <!-- 数据表格 -->
            <ele-data-table ref="table" :config="table" :choose.sync="choose" height="calc(100vh - 315px)"
                            highlight-current-row>
                <template slot-scope="{index}">
                    <el-table-column type="selection" :index="index" width="45" align="center" fixed="left"/>
                    <el-table-column prop="time_text" label="提交时间" width="60" align="center" fixed="left"
                                     show-overflow-tooltip/>
                    <el-table-column prop="c_username" label="提交用户" fixed="left" show-overflow-tooltip width="110"/>
                    <el-table-column prop="order_no" label="订单号" min-width="100" align="center" show-overflow-tooltip/>
                    <el-table-column prop="num" label="交易数量(USDT)" min-width="130" align="center" show-overflow-tooltip>
                        <template slot-scope="{row}">
                            {{ row.num }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价(¥)" sortable="custom" show-overflow-tooltip min-width="90"/>
                    <el-table-column prop="total" label="交易总额(¥)" sortable="custom" show-overflow-tooltip
                                     min-width="110"/>
                    <el-table-column prop="payment" label="收款信息" sortable="custom" show-overflow-tooltip
                                     min-width="180">
                        <template slot-scope="{row}">
                            <div v-if="row.paymentData && row.paymentData.payment_id>0">
                                <div v-if="row.paymentData.type==1">
                                    <div>收款人名称：{{ row.paymentData.real_name }}</div>
                                    <div>收款人账号：{{ row.paymentData.bank_card }}</div>
                                    <div>收款银行：{{ row.paymentData.bank_name }} {{ row.paymentData.branch_name }}</div>
                                </div>
                                <div v-else>
                                    <div>收款人名称：{{ row.paymentData.real_name }}</div>
                                    <div>收款人账号：{{ row.paymentData.account }}</div>
                                    <div>{{ (row.paymentData.type == 2 ? '微信' : '支付宝') }}收款码：
                                        <el-image
                                            style="width: 100px; height: 100px"
                                            :src="row.paymentData.qrcode"
                                            :preview-src-list="[row.paymentData.qrcode]">
                                        </el-image>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" min-width="90px" sortable="custom">
                        <template slot-scope="{row}">
                            <span v-if="row.status ==1" class=" ele-text-info">待付款</span>
                            <span v-else-if="row.status ==2" class=" ele-text-info">交易中</span>
                            <span v-else-if="row.status ==3" class=" ele-text-primary" title="点击查看打款信息">您已打款<br><el-link
                                type="success" :underline="true"
                                @click="showPay(row,index)">({{ row.pay_name }})</el-link></span>
                            <span v-else-if="row.status ==4" class=" ele-text-success">交易完成</span>
                            <span v-else-if="row.status ==5" class=" ele-text-danger">异常订单</span>
                            <span v-else-if="row.status ==6" class=" ele-text-warning">退款订单</span>
                            <span v-else-if="row.status ==7" class=" ele-text-info">超时订单</span>
                            <span v-else-if="row.status ==8" class=" ele-text-danger">
                                {{ (row.exception_remark ? row.exception_remark : '已取消') }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="220px" align="center" :resizable="false" fixed="right">
                        <template slot-scope="{row}">
                            <el-link @click="detail(row, index)" icon="el-icon-edit" type="primary" :underline="false"
                                     v-if="$store.state.user.user.user_type==1 && permission.includes('sys:buyorder:edit')">
                                详情
                            </el-link>
                            <el-link icon="el-icon-edit" type="success" @click="showPay(row, index)"
                                     :underline="false"
                                     v-if="$store.state.user.user.user_type==2 && (row.status<3 || row.status==7) && permission.includes('sys:buyorder:edit')">
                                确认打款
                            </el-link>

                            <el-link icon="el-icon-edit" type="success" @click="collection(row, index)"
                                     :underline="false"
                                     v-if="$store.state.user.user.user_type==1 && (row.status<4 || row.status==7) && permission.includes('sys:buyorder:edit')">
                                确认完成
                            </el-link>

                            <el-link @click="catchOrder(row, index)" icon="el-icon-edit" type="danger"
                                     :underline="false"
                                     v-if="(row.status >= 3 && row.status != 4 && row.status != 8) && permission.includes('sys:buyorder:edit')">
                                异常处理
                            </el-link>

                            <el-link @click="catchOrder(row, index)" icon="el-icon-edit" type="danger"
                                     :underline="false"
                                     v-if="row.status<=2 || row.status==7  && permission.includes('sys:buyorder:edit')">
                                取消订单
                            </el-link>

                            <el-link @click="showReassign(row, index)" icon="el-icon-edit" type="warning"
                                     :underline="false"
                                     v-if="$store.state.user.user.user_type==1 && (row.status<3 || row.status==7 || row.status == 5) && permission.includes('sys:buyorder:edit')">
                                重新派单
                            </el-link>
                        </template>
                    </el-table-column>
                </template>
            </ele-data-table>
        </el-card>


        <!-- 详情 -->
        <el-dialog :title="'订单信息'" :visible.sync="showEdit" width="700px"
                   @closed="editForm={}" :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
            <el-form :model="editForm" ref="editForm" label-width="100px">
                <el-row :gutter="15">
                    <el-col :sm="12">
                        <el-form-item label="客户：">
                            <span>{{ editForm.c_username }}</span>
                        </el-form-item>
                        <el-form-item label="订单号：">
                            <span>{{ editForm.order_no }}</span>
                        </el-form-item>
                        <el-form-item label="交易数量：">
                            <span>{{ editForm.num }} <img class="usdt" src="../../../assets/usdt.png" alt=""></span>
                        </el-form-item>
                        <el-form-item label="交易金额：">
                            <span>{{ editForm.total }}</span>
                        </el-form-item>
                        <template v-if="editForm.paymentData && editForm.paymentData.type == 1">
                            <el-form-item label="收款人：">
                                <span>{{ editForm.paymentData.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="收款银行：">
                                <span>{{ editForm.paymentData.bank_name }}</span>
                            </el-form-item>
                            <el-form-item label="银行卡号：">
                                <span>{{ editForm.paymentData.bank_card }}</span>
                            </el-form-item>
                        </template>
                        <template v-else-if="editForm.paymentData">
                            <el-form-item label="收款人：">
                                <span>{{ editForm.paymentData.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="收款账号：">
                                <span>{{
                                        editForm.paymentData.account
                                    }}({{ editForm.paymentData.type == 2 ? '微信' : '支付宝' }})</span>
                            </el-form-item>
                        </template>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label="打款方式：">
                            <span>{{ editForm.pay_name }}</span>
                        </el-form-item>
                        <el-form-item label="打款凭证：">
                            <el-image
                                style="width: 100px; height: 100px"
                                :src="editForm.pay_img"
                                :preview-src-list="[editForm.pay_img]">
                            </el-image>
                        </el-form-item>
                        <el-form-item label="打款备注：">
                            <span>{{ editForm.pay_remark }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="showEdit=false">取消</el-button>
            </div>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog :title="'重新派单'" :visible.sync="showReassignEdit" width="700px"
                   @closed="editForm={}" :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
            <el-form :model="editForm" ref="editForm" label-width="120px">
                <el-row :gutter="15">
                    <el-col :sm="15">
                        <el-form-item label="客户：">
                            <span>{{ editForm.c_username }}</span>
                        </el-form-item>
                        <el-form-item label="订单号：">
                            <span>{{ editForm.order_no }}</span>
                        </el-form-item>
                        <el-form-item label="交易数量：">
                            <span>{{ editForm.num }} <img class="usdt" src="../../../assets/usdt.png" alt=""></span>
                        </el-form-item>
                        <el-form-item label="交易金额：">
                            <span>{{ editForm.total }}</span>
                        </el-form-item>
                        <el-form-item label="当前派单用户：">
                            <span>{{ editForm.username }}</span>
                        </el-form-item>
                        <el-col :sm="24">
                            <el-form-item label="重新派单给：">
                                <el-select v-model="editForm.new_business_id" filterable
                                           remote
                                           reserve-keyword
                                           placeholder="请输入关键词"
                                           :remote-method="getReassign"
                                           :loading="loading" class="ele-fluid reassign">
                                    <el-option v-for="(v,k) in reassigns" :key="k" :label="v.username" :value="v.id">
                                        <span class="label"
                                              :title="'ID:'+v.id+', USDT:'+v.usdt_num">{{ v.username }}</span>
                                        <span class="credit">信誉：{{ v.credit }}分</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="showReassignEdit=false">取消</el-button>
                <el-button type="success" @click="reassign(editForm,editForm.index)">确定重新派单</el-button>
            </div>
        </el-dialog>

        <!-- 收款信息 -->
        <el-dialog :title="'确认打款'" :visible.sync="showPayEdit" width="700px"
                   @closed="editForm={}" :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
            <el-form :model="editForm" ref="editForm" label-width="100px">
                <el-row :gutter="15">
                    <el-col :sm="12">
                        <el-form-item label="客户：">
                            <span>{{ editForm.c_username }}</span>
                        </el-form-item>
                        <el-form-item label="订单号：">
                            <span>{{ editForm.order_no }}</span>
                        </el-form-item>
                        <el-form-item label="交易数量：">
                            <span>{{ editForm.num }} <img class="usdt" src="../../../assets/usdt.png" alt=""></span>
                        </el-form-item>
                        <el-form-item label="交易金额：">
                            <span>{{ editForm.total }}</span>
                        </el-form-item>
                        <template v-if="editForm.paymentData && editForm.paymentData.type == 1">
                            <el-form-item label="收款人：">
                                <span>{{ editForm.paymentData.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="收款银行：">
                                <span>{{ editForm.paymentData.bank_name }}</span>
                            </el-form-item>
                            <el-form-item label="银行卡号：">
                                <span>{{ editForm.paymentData.bank_card }}</span>
                            </el-form-item>
                        </template>
                        <template v-else-if="editForm.paymentData">
                            <el-form-item label="收款人：">
                                <span>{{ editForm.paymentData.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="收款账号：">
                                <span>{{
                                        editForm.paymentData.account
                                    }}({{ editForm.paymentData.type == 2 ? '微信' : '支付宝' }})</span>
                            </el-form-item>
                        </template>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label="打款方式：" class="is-required">
                            <el-radio-group v-model="editForm.pay_type">
                                <el-radio :label="1" style="margin-bottom: 20px">银行卡</el-radio>
                                <el-radio :label="2" style="margin-bottom: 20px">微信</el-radio>
                                <el-radio :label="3" style="margin-bottom: 20px">支付宝</el-radio>
                                <el-radio :label="4" style="margin-bottom: 20px">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="打款凭证：" class="is-required">
                            <uploadImage :limit="1" v-model="editForm.pay_img"></uploadImage>
                        </el-form-item>
                        <el-form-item label="打款备注：" class="is-required">
                            <el-input v-model="editForm.pay_remark" placeholder="请输入打款备注" clearable/>
                        </el-form-item>
                        <el-form-item label="交易密码：" class="is-required">
                            <el-input type="password" v-model="editForm.trade_password" placeholder="请输入交易密码" clearable/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="showPayEdit=false">取消</el-button>
                <el-button type="success" v-if="editForm.status != 3 && editForm.status != 4 && editForm.status != 8" @click="pay()">确认打款</el-button>
            </div>
        </el-dialog>

        <!-- 打款信息 -->
        <el-dialog :title="'异常订单处理'" :visible.sync="showCatchEdit" width="700px"
                   :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
            <el-form :model="editForm" ref="editForm" label-width="164px">
                <el-row :gutter="15">
                    <el-col :sm="24">
                        <el-form-item label="客户：">
                            <span>{{ editForm.c_username }}</span>
                        </el-form-item>
                        <el-form-item label="订单号：">
                            <span>{{ editForm.order_no }}</span>
                        </el-form-item>
                        <el-form-item label="交易数量：">
                            <span>{{ editForm.num }} <img class="usdt" src="../../../assets/usdt.png" alt=""></span>
                        </el-form-item>
                        <el-form-item label="交易金额：">
                            <span>{{ editForm.total }}</span>
                        </el-form-item>
                        <template
                            v-if="editForm.type == 1 || (editForm.type == 2 && editForm.status>=3 && editForm.status<8)">
                            <el-form-item label="请选择订单异常原因：" class="is-required">
                            </el-form-item>
                            <el-form-item label="" style="margin-left: -80px">
                                <el-radio-group v-model="editForm.exception_type" @change="changeExceptionType">
                                    <el-radio :label="1" style="margin-bottom: 20px">异常订单<br><span
                                        class="ele-text-danger error">说明：未付款或银行已到账，但是由于延迟或金额不符取消订单，可选择此项</span>
                                    </el-radio>
                                    <el-radio :label="2">申请退款<br><span class="ele-text-danger error">说明：银行已到账，但是由于以下原因需退款，1.非本人付款 2.备注敏感词，可选择此项</span>
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-col :sm="15">
                                <el-form-item label="退款原因：" class="is-required" v-if="editForm.exception_type==2">
                                    <el-input v-model="editForm.exception_remark" placeholder="请输入退款原因" clearable/>
                                </el-form-item>
                                <el-form-item label="退款金额：" class="is-required" v-if="editForm.exception_type==2">
                                    <el-input v-model="editForm.refund_money" placeholder="请输入退款金额" clearable/>
                                </el-form-item>
                            </el-col>
                        </template>
                        <template v-else>
                            <el-form-item label="请选择取消原因：" class="is-required">
                            </el-form-item>
                            <el-form-item label="" style="margin-left: -80px">
                                <el-radio-group v-model="editForm.exception_type" @change="changeExceptionType">
                                    <el-radio :label="1" style="margin-bottom: 20px">账号不合法</el-radio>
                                    <el-radio :label="2" style="margin-bottom: 20px">信息不全</el-radio>
                                    <el-radio :label="3" style="margin-bottom: 20px">其他</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-col :sm="24">
                                <el-form-item label="取消原因：" v-if="editForm.exception_type==3">
                                    <el-input v-model="editForm.exception_remark" placeholder="请输入其他原因" clearable/>
                                </el-form-item>
                            </el-col>
                        </template>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" v-if="editForm.type == 1">
                <el-button @click="showCatchEdit=false">取消</el-button>
                <!-- 币商申请取消 -->
                <el-button type="success" v-if="editForm.status<3 && $store.state.user.user.user_type == 1"
                           @click="exceptionCancel(5, 0)">确定取消
                </el-button>
                <!-- 平台取消 -->
                <el-button type="success"
                           v-else-if="(editForm.status<3 || (editForm.status == 5 && editForm.exception_type == 1)) && $store.state.user.user.user_type == 2"
                           @click="exceptionCancel(8, 0)">确定取消
                </el-button>
                <!-- 币商申请异常或平台异常处理 -->
                <el-button type="success"
                           v-else-if="(editForm.status==3 || (editForm.exception_type == 2 && editForm.status != 8) || (editForm.status != 4 && $store.state.user.user.user_type== 1) || editForm.status==7) "
                           @click="catchOrderNext()">下一步
                </el-button>
            </div>
            <div slot="footer" v-else>
                <el-button @click="showCatchEdit=false">取消</el-button>
                <!-- 币商或平台直接取消 -->
                <el-button type="success" v-if="editForm.status<3"
                           @click="exceptionCancel(8, 0)">确定取消
                </el-button>
                <!-- 币商或平台异常处理 -->
                <el-button type="success"
                           v-else-if="(editForm.status==3 || editForm.status == 5 || editForm.status==7) || (editForm.status == 8 && $store.state.user.user.user_type== 1)"
                           @click="catchOrderNext()">下一步
                </el-button>
            </div>
        </el-dialog>

        <!-- 异常处理弹窗第二步 -->
        <el-dialog :title="'订单异常信息处理'" :visible.sync="showCatchNextEdit" width="700px"
                   :destroy-on-close="true" custom-class="ele-dialog-form" :lock-scroll="false">
            <el-form :model="editForm" ref="editForm" :rules="exceptionRules" label-width="120px">
                <el-row :gutter="15">
                    <el-col :sm="24">
                        <el-form-item label="客户：">
                            <span>{{ editForm.c_username }}</span>
                        </el-form-item>
                        <el-form-item label="订单号：">
                            <span>{{ editForm.order_no }}</span>
                        </el-form-item>
                        <el-form-item label="交易数量：">
                            <span>{{ editForm.num }} <img class="usdt" src="../../../assets/usdt.png" alt=""></span>
                        </el-form-item>
                        <el-form-item label="交易金额：">
                            <span>{{ editForm.total }}</span>
                        </el-form-item>
                        <template v-if="editForm.paymentData && editForm.paymentData.type == 1">
                            <el-form-item label="收款人：">
                                <span>{{ editForm.paymentData.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="收款银行：">
                                <span>{{ editForm.paymentData.bank_name }}</span>
                            </el-form-item>
                            <el-form-item label="银行卡号：">
                                <span>{{ editForm.paymentData.bank_card }}</span>
                            </el-form-item>
                        </template>
                        <template v-else-if="editForm.paymentData">
                            <el-form-item label="收款人：">
                                <span>{{ editForm.paymentData.real_name }}</span>
                            </el-form-item>
                            <el-form-item label="收款账号：">
                                <span>{{
                                        editForm.paymentData.account
                                    }}({{ editForm.paymentData.type == 2 ? '微信' : '支付宝' }})</span>
                            </el-form-item>
                        </template>
                        <el-form-item label="打款方式：">
                            <span>{{ editForm.pay_name }}</span>
                        </el-form-item>
                        <el-form-item label="打款凭证：">
                            <el-image
                                style="width: 100px; height: 100px"
                                :src="editForm.pay_img"
                                :preview-src-list="[editForm.pay_img]">
                            </el-image>
                        </el-form-item>
                        <el-form-item label="打款备注：">
                            <span>{{ editForm.pay_remark }}</span>
                        </el-form-item>
                        <el-form-item label="异常处理类型：" class="is-required">
                            <el-radio-group v-model="editForm.exception_sub_type">
                                <el-radio :label="1" style="margin-bottom: 20px">延迟到账</el-radio>
                                <el-radio :label="2" style="margin-bottom: 20px">金额不符</el-radio>
                                <el-radio :label="3" style="margin-bottom: 20px">备注敏感词</el-radio>
                                <el-radio :label="4" style="margin-bottom: 20px">未付款</el-radio>
                                <el-radio :label="5" style="margin-bottom: 20px">非本人付款</el-radio>
                                <el-radio :label="6" style="margin-bottom: 20px">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="上传异常凭证：" class="is-required">
                            <uploadImage v-if="$refs.table" :limit="1" v-model="editForm.exception_img"></uploadImage>
                        </el-form-item>
                        <el-col :sm="16">
                        <el-form-item label="异常备注：" class="is-required">
                            <el-input v-model="editForm.exception_remark" placeholder="请输入异常备注" clearable/>
                        </el-form-item>
                        <el-form-item label="交易密码：" v-if="$store.state.user.user.user_type == 2 && editForm.status != 4 && editForm.status != 5 && editForm.status != 8" class="is-required">
                            <el-input type="password" v-model="editForm.trade_password" placeholder="请输入交易密码" clearable/>
                        </el-form-item>
                        </el-col>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="showCatchNextEdit=false;">取消</el-button>
                <el-button @click="lastStep()">上一步</el-button>
                <el-button type="danger" v-if="$store.state.user.user.user_type == 1 && editForm.status != 8"
                           @click="exceptionCancel(8, 0)">取消订单
                </el-button>
                <el-button type="primary" v-if="$store.state.user.user.user_type == 1 && editForm.status != 6"
                           @click="exceptionCancel(6, 1)">确定退款
                </el-button>
                <el-button type="success"
                           v-if="$store.state.user.user.user_type == 1 && editForm.status != 4 && editForm.status != 8"
                           @click="exceptionConfirm(4)">完成订单
                </el-button>
                <el-button type="primary"
                           v-else-if="$store.state.user.user.user_type == 2 && editForm.status != 4 && editForm.status != 5"
                           @click="exceptionConfirm(5)">确定提交
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import XLSX from 'xlsx'
import uploadImage from '@/components/uploadImage'
import {mapGetters} from "vuex";

export default {
    name: "SysUser",
    data() {
        return {
            table: {url: '/tradeorder/index', where: {type: '2', status: '0', exception_status: '0'}},  // 表格配置
            choose: [],  // 表格选中数据
            reassigns: [],
            loading: false,
            showEdit: false,  // 是否显示表单弹窗
            showPayEdit: false,  // 打款信息
            showCatchEdit: false,  // 异常处理弹窗
            showReassignEdit: false,  // 重新派单
            showCatchNextEdit: false,  // 异常处理弹窗下一步
            editForm: {},  // 表单数据
            editRules: {  // 表单验证规则
                exception_type: [
                    {required: true, message: '请选择异常原因', trigger: 'blur'}
                ],
                exception_remark: [
                    {required: true, message: '请输入用户姓名', trigger: 'blur'}
                ],
                refund_money: [
                    {required: true, message: '退款金额', trigger: 'blur'}
                ],
            },
            exceptionRules: {  // 表单验证规则
                exception_type: [
                    {required: true, message: '请选择异常原因', trigger: 'blur'}
                ],
                exception_remark: [
                    {required: true, message: '请输入用户姓名', trigger: 'blur'}
                ],
                refund_money: [
                    {required: true, message: '退款金额', trigger: 'blur'}
                ],
            },
        }
    },
    computed: {
        ...mapGetters(["permission"]),
    },
    components: {uploadImage},
    created() {
        let order_no = typeof (this.$route.query.order_no) != 'undefined' ? this.$route.query.order_no : '';
        if (order_no) {
            this.table.where.order_no = order_no;
        }
    },
    methods: {
        // 异常类型
        changeExceptionType(type) {
            if (this.editForm.type == 1) {
                if (type == 1) {
                    this.editForm.exception_remark = '异常订单'
                    this.editForm.refund_status = 0
                    this.editForm.exception_status = 1
                } else {
                    this.editForm.exception_remark = '申请退款'
                    this.editForm.refund_status = 1
                    this.editForm.exception_status = 1
                    this.editForm.refund_money = this.editForm.total
                }
            } else {
                if (type == 1) {
                    this.editForm.exception_remark = '账号不合法'
                    this.editForm.exception_status = 2
                } else if (type == 2) {
                    this.editForm.exception_remark = '信息不全'
                    this.editForm.exception_status = 2

                }
            }
        },
        /* 异常订单处理 */
        catchOrder(row, index) {
            this.editForm = Object.assign({}, row);
            this.editForm.exception_type = 1;
            this.editForm.refund_money = this.editForm.total
            this.editForm.index = index;
            this.showCatchEdit = true;
        },
        /* 异常订单处理下一步 */
        catchOrderNext() {
            this.editForm.exception_sub_type = this.editForm.exception_sub_type? this.editForm.exception_sub_type : 1
            this.showCatchEdit = false;
            this.showCatchNextEdit = true;
        },
        // 上一步
        lastStep() {
            this.showCatchEdit = true
            this.showCatchNextEdit = false
        },
        // 查看打款信息
        showPay(row, index) {
            this.editForm = Object.assign({}, row);
            this.editForm.index = index;
            this.showPayEdit = true;
        },
        // 详情
        detail(row, index) {
            this.editForm = Object.assign({}, row);
            this.editForm.index = index;
            this.showEdit = true;
        },
        // 派单窗口
        showReassign(row, index) {
            this.editForm = Object.assign({}, row);
            this.editForm.index = index;
            this.showReassignEdit = true;
            // 获取可派单用户
            this.getReassign();
        },
        // 打款
        pay(){
            let _this = this
            if (this.editForm.pay_type <= 0) {
                this.$message({type: 'danger', message: '请选择打款方式'});
                return false;
            }
            if (this.editForm.pay_img == '') {
                this.$message({type: 'danger', message: '请上传打款凭证'});
                return false;
            }
            if (this.editForm.pay_remark == '') {
                this.$message({type: 'danger', message: '请填写打款备注'});
                return false;
            }
            if (this.editForm.trade_password == '') {
                this.$message({type: 'danger', message: '请填写交易密码'});
                return false;
            }
            this.$confirm('确定已打款？', '提示', {type: 'success'}).then(() => {
                this.$message.closeAll();
                const loading = this.$loading({lock: true});
                this.$http.post('/tradeorder/pay', _this.editForm).then(res => {
                    loading.close();
                    if (res.data.success === true) {
                        this.showPayEdit = false
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            });
        },
        // 直接确认收款完成
        collection(data, index) {
            this.$confirm('确定已收款，并完成该订单？', '提示', {type: 'primary'}).then(() => {
                this.$message.closeAll();
                const loading = this.$loading({lock: true});
                this.$http.post('/tradeorder/collection', {id: data.id, status: 4}).then(res => {
                    loading.close();
                    if (res.data.success === true) {
                        this.showPayEdit = false
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            });
        },
        // 直接取消订单
        cancel(data, index) {
            this.$confirm('确定取消该订单，该操作不可逆谨慎操作？', '提示', {type: 'danger'}).then(() => {
                this.$message.closeAll();
                const loading = this.$loading({lock: true});
                this.$http.post('/tradeorder/cancel', {id: data.id, status: 8}).then(res => {
                    loading.close();
                    if (res.data.success === true) {
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            });
        },
        // 异常取消
        exceptionCancel(status, refund_status) {
            if (this.showCatchNextEdit) {
                if (this.editForm.exception_sub_type <= 0) {
                    this.$message({type: 'danger', message: '请选择异常处理类型'});
                    return false;
                }
                if (this.editForm.exception_img == '') {
                    this.$message({type: 'danger', message: '请上传异常凭证'});
                    return false;
                }
                if (this.editForm.exception_remark == '') {
                    this.$message({type: 'danger', message: '请填写异常备注'});
                    return false;
                }
            }
            this.$confirm((status == 5 ? '确定申请' : '确定') + '异常处理该订单，该操作不可逆谨慎操作？', '提示', {type: 'danger'}).then(() => {
                this.$message.closeAll();
                const loading = this.$loading({lock: true});
                let tempStatus =  this.editForm.status
                this.editForm.status = status;
                this.editForm.refund_status = refund_status;
                this.$http.post('/tradeorder/cancel', this.editForm).then(res => {
                    loading.close();
                    if (res.data.success === true) {
                        this.showCatchEdit = false;
                        this.showCatchNextEdit = false;
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.editForm.status = tempStatus
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            });
        },
        // 异常处理
        exceptionConfirm(status) {
            if (this.showCatchNextEdit) {
                if (this.editForm.exception_sub_type <= 0) {
                    this.$message({type: 'danger', message: '请选择异常处理类型'});
                    return false;
                }
                if (this.editForm.exception_img == '') {
                    this.$message({type: 'danger', message: '请上传异常凭证'});
                    return false;
                }
                if (this.editForm.exception_remark == '') {
                    this.$message({type: 'danger', message: '请填写异常备注'});
                    return false;
                }
            }
            this.$confirm((status == 5 ? '确定申请' : '确定') + '异常处理该订单，该操作不可逆谨慎操作？', '提示', {type: 'danger'}).then(() => {
                this.$message.closeAll();
                const loading = this.$loading({lock: true});
                let tempStatus =  this.editForm.status
                this.editForm.status = status;
                this.$http.post('/tradeorder/collection', this.editForm).then(res => {
                    loading.close();
                    if (res.data.success === true) {
                        this.showCatchNextEdit = false;
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.editForm.status = tempStatus
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            });
        },
        // 派单用户
        getReassign(keyword) {
            const loading = this.$loading({lock: true});
            this.$http.post('/tradeorder/reassignList', {
                keyword: keyword,
                userId: this.editForm.business_id,
                num: this.editForm.num,
                type: this.editForm.type
            }).then(res => {
                loading.close();
                if (res.data.success === true) {
                    this.reassigns = res.data.data;
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                loading.close();
                this.$message.error(e.message);
            });
        },
        // 重新派单
        reassign(data, index) {
            if (data.new_business_id <= 0) {
                this.$message({type: 'danger', message: '请选择重新派单的用户'});
                return false;
            }
            this.$confirm('确定重新派单给该用户？', '提示', {type: 'danger'}).then(() => {
                this.$message.closeAll();
                const loading = this.$loading({lock: true});
                this.$http.post('/tradeorder/reassign', {
                    id: data.id,
                    business_id: data.new_business_id,
                }).then(res => {
                    loading.close();
                    if (res.data.success === true) {
                        this.showReassignEdit = false;
                        this.$message({type: 'success', message: res.data.msg});
                        this.$refs.table.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            });
        },
        /* 导出数据 */
        exportData() {
            let array = [['提交时间','提交用户', '订单号', '交易量', '单价(¥)', '交易总额(¥)', '收款人信息', '交易状态', '备注', '操作时间']];
            // 请求查询全部(不分页)的接口
            const loading = this.$loading({lock: true});
            let params = this.table.where;
            params.pageSize = 2000;
            this.$http.post('/tradeorder/index', params).then(res => {
                loading.close();
                if (res.data.code === 0) {
                    let statusArr = ['未知','待付款','待付款','已打款','交易完成','异常订单','退款订单','超时订单','已取消'];
                    res.data.data.forEach(d => {

                        let payment = '';
                        if(d.paymentData && d.paymentData.type == 1){
                            payment += '收款方式：'+d.paymentData.real_name+' '+d.paymentData.bank_name+' '+d.paymentData.branch_name+' '+d.paymentData.bank_card;
                        }else{
                            payment += '收款方式：'+d.paymentData.real_name+' '+(d.paymentData.type==2?'微信':'支付宝')+' '+d.paymentData.account;
                        }
                        let status = typeof(statusArr[d.status]) != 'undefined'? statusArr[d.status] : '未知';
                        array.push([
                            d.create_time_text, d.c_username, d.order_no,
                            d.num, d.price, d.total,payment, status,
                            d.exception_remark, d.update_time_text
                        ]);
                    });
                    let sheet = XLSX.utils.aoa_to_sheet(array);
                    this.$util.exportSheet(XLSX, sheet, '客户卖单订单记录');
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                loading.close();
                this.$message.error(e.message);
            });
        },
    }
}
</script>

<style scoped>
.ele-block >>> .el-upload, .ele-block >>> .el-upload-dragger {
    width: 100%;
}

/* 用户资料卡片 */
.user-info-card {
    padding-top: 8px;
    text-align: center;
}

.user-info-card .user-info-avatar-group {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
}

.user-info-card .user-info-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info-card .user-info-avatar-group > i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-size: 30px;
    display: none;
    z-index: 2;
}

.user-info-card .user-info-avatar-group:hover > i {
    display: block;
}

.user-info-card .user-info-avatar-group:hover:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
}

.usdt {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 4px;
}

.el-form-item .error {
    margin-top: 10px;
    white-space: pre-wrap;
    display: inline-block;
}

.el-select-dropdown__item .credit {
    float: right;
    color: #fbb52c;
}
.el-date-editor--daterange.el-input__inner {
    width: auto;
}
</style>