jiaoyi-vue/src/views/service/order/index/components/table.vue

<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id" :row-class-name="tableRowClassName">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="订单编号" width="260" fixed="left" prop="goods_id">
            <template #default="scope">
                <div class="order-name">
                    <span>{{ scope.row.order_sn }}</span>
                    <span class="dec">系统单号：{{ scope.row.out_order_no }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="商品类型" prop="types" width="100">
            <template #default="scope">
                {{ scope.row.product?scope.row.product.types:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="商品信息" width="340" prop="name">
            <template #default="scope">
                <div class="goods-img">
                    <div class="img">
                        <el-image 
                        style="width: 54px; height: 54px"
                        :src="scope.row.img"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[scope.row.img]"
                        preview-teleported
                        z-index="999"
                        fit="cover"></el-image>
                    </div>
                    <div class="name">
                        <template v-if="scope.row.product">
                            <span v-if="scope.row.product.is_new == 1">{{scope.row.product.price}}元代{{scope.row.product.line_price}}元商场权益券{{ scope.row.product.product_name }}</span>
                            <span v-else>{{ scope.row.product?scope.row.product.product_name:'-' }}</span>
                            <span class="dec">商品编码：{{ scope.row.product?scope.row.product.product_id:'-' }}</span>
                        </template>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="下单用户" width="340" prop="name">
            <template #default="scope">
                <div class="goods-img">
                    <div class="img">
                        <el-image 
                        style="width: 54px; height: 54px"
                        :src="scope.row.user.avatar"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[scope.row.user.avatar]"
                        preview-teleported
                        z-index="999"
                        fit="cover"></el-image>
                    </div>
                    <div class="name">
                        <span>{{ scope.row.user.nickname }}</span>
                        <span class="dec">{{ scope.row.user.openid }}</span>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="商品售价" prop="types" width="120" align="right">
            <template #default="scope">
                <div class="order-name">
                    <span>{{ scope.row.price?$TOOL.money(scope.row.price):'-' }}</span>
                    <span class="dec">{{ scope.row.number }}份</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="顾客支付" prop="types" width="120" align="right">
            <template #default="scope">
                {{ scope.row.pay_money?$TOOL.money(scope.row.pay_money):'-' }}
            </template>
        </el-table-column>
        <el-table-column label="留资号码" prop="types" width="120">
            <template #default="scope">
                {{ scope.row.mobile?scope.row.mobile:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="订单状态" prop="types" width="160" align="left">
            <template #default="scope">
                <div class="order-name" v-if="scope.row.status == 0">
                    <span>待支付</span>
                    <span class="dec" v-if="scope.row.end_time.min == 0 && scope.row.end_time.sec == 0">已超时，取消支付</span>
                    <span class="dec" v-else>剩余{{ scope.row.end_time.min }}:{{ scope.row.end_time.sec }}</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 1">
                    <span>待使用</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 2">
                    <span v-if="scope.row.is_error == 1" style="color: #f00;">异常</span>
                    <span v-else>已完成</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 3">
                    <span>已退款</span>
                    <span class="dec">款项已原路退回</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 4">
                    <span>退款中</span>
                    <span class="dec">款项已原路退回</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 5">
                    <span>已关闭</span>
                    <span class="dec">用户已取消</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 6">
                    <span>部分退款</span>
                    <span class="dec">已退款 <em style="color: #f00;">{{ scope.row.refund_num }}</em> 份</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 7">
                    <span>履约中</span>
                    <span class="dec">货物运输中</span>
                </div>
                <div class="order-name" v-if="scope.row.status == 8">
                    <span>退款审核中</span>
                    <span class="dec">已发快递，等待审核拦截</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="发货状态" prop="types" width="160" align="left">
            <template #default="scope">
                <div v-if="scope.row.status == 2">
                    <div class="order-name" v-if="scope.row.express_status == 1 || scope.row.express_status == 0">
                        <span>待发货</span>
                    </div>
                    <div class="order-name" v-if="scope.row.express_status == 2">
                        <span>已发货</span>
                    </div>
                    <div class="order-name" v-if="scope.row.express_status == 3">
                        <span>已签收</span>
                    </div>
                </div>
                <div v-else>待订单完成</div>
            </template>
        </el-table-column>
        <el-table-column label="来源达人" prop="scene" width="260">
            <template #default="scope">
                <div class="goods-img" v-if="scope.row.star">
                    <div class="name">
                        <span>{{ scope.row.star?scope.row.star.nick_name:'-' }}</span>
                        <span class="dec">抖音ID：{{ scope.row.star?scope.row.star.uid:'-' }}</span>
                    </div>
                </div>
                <div v-else>-</div>
            </template>
        </el-table-column>
        <el-table-column label="来源" prop="scene" width="160"></el-table-column>
        <el-table-column label="下单时间" prop="create_at" width="160"></el-table-column>
        <el-table-column label="支付时间" prop="pay_at" width="160">
            <template #default="scope">
                {{ scope.row.pay_at?scope.row.pay_at:'未支付' }}
            </template>
        </el-table-column>
        <el-table-column label="核销时间" prop="pay_at" width="160">
            <template #default="scope">
                {{ scope.row.done_at?scope.row.done_at:'-' }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="left" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button size="small" text @click="table_view(scope.row)">详情</el-button>
                    <el-button type="danger" size="small" text @click="table_refund(scope.row)" v-if="scope.row.status==1">退款</el-button>
                    <el-button type="danger" size="small" text @click="table_done(scope.row)" v-if="scope.row.status==7 && scope.row.is_new==1">核销</el-button>
                </el-button-group>
                <el-button-group>
                    <el-button type="danger" size="small" text @click="table_black(scope.row)">拉黑</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <orderDetail ref="orderDetail" @success="orderSuccess"></orderDetail>
</template>

<script>
import orderDetail from "@/components/imFloat/order";
export default {
    components:{
        orderDetail
    },
    props: {
        trade: { type: String, default: "0" },
    },
    data(){
        return {
            list: {
                apiObj: this.$API.merOrder.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{}
        }
    },
    methods: {
        tableRowClassName(row, rowIndex) {
            if (row.row.is_error === 1) {
                return 'error-row';
            } else {
                return 'success-row';
            }
        },
        orderSuccess(){
            this.$refs.table.refresh()
        },
        table_view(data){
            this.$nextTick(() => {
                data.order = data.out_order_no
                this.$refs.orderDetail.open("edit").setData(data)
            })
        },
        table_black(data){
            this.$confirm(`拉黑该用户后，用户再整个系统将无法再次下单`, '提示', {
                type: 'warning'
            }).then(async () => {
                var loading = this.$loading();
                var resp = await this.$API.merOrder.black.post({"order":data.out_order_no,});
                loading.close();
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        table_refund(data){
            this.$confirm(`该操作退款为直接为订单申请退款，无需用户二次操作`, '提示', {
                type: 'warning'
            }).then(async () => {
                var loading = this.$loading();
                var resp = await this.$API.merOrder.refundUser.post({"order":data.out_order_no,});
                loading.close();
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        table_del(data){
            
        },
        table_done(data){
            this.$confirm(`核销后，订单不再支持退款，确定要执行吗`, '提示', {
                type: 'warning'
            }).then(async () => {
                var resp = await this.$API.merOrder.doneMini.post({"order":data.out_order_no});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        table_cancel(data){
            this.$confirm(`取消该笔订单的核销，并非是直接退款，订单状态将恢复到【待使用】状态`, '提示', {
                type: 'warning'
            }).then(async () => {
                var resp = await this.$API.merOrder.save.post({"order":data.out_order_no,"field":'status',"val":1});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        table_error(data){
            this.$confirm(`订单标记异常后，该笔订单只能通过【异常订单】中进行下一步的操作，并且需等待24小时后系统判定后方可操作`, '提示', {
                type: 'warning'
            }).then(async () => {
                var resp = await this.$API.merOrder.save.post({"order":data.out_order_no,"field":'is_error',"val":1});
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.$refs.table.refresh()
            }).catch(() => {

            })
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
    }
}
</script>

<style>
.order-name span{display: block;}
.order-name span.dec{color: #999;font-size: 12px;}
.goods-img{display: flex;gap: 5px;}
.goods-img .name span{display: block;}
.goods-img .name span.dec{color: #999;font-size: 12px;}
.goods-price,.price{display: flex;align-items: center;gap: 5px;font-size: 14px;}
.goods-price .del{text-decoration: line-through;}
.goods-price span{background-color: #fff !important;
    border: 1px solid #d3d9e0 !important;
    border-radius: 4px;
    box-sizing: border-box;
    color: #6c737a !important;
    display: inline-flex;
    flex: none;
    font-size: 12px;
    line-height: 18px !important;
    padding: 1px 6px !important;text-decoration: none;}
</style>