|
|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
|
|
|
+ <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">
|
|
|
+ <span>{{ scope.row.product.product_name }}</span>
|
|
|
+ <span class="dec">商品编码：{{ scope.row.product.product_id }}</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="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>已完成</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>
|
|
|
+ </template>
|
|
|
+ </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="操作" 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" text size="small" @click="table_del(scope.row)">删除</el-button>
|
|
|
+ </el-button-group>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </scTable>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ list: {
|
|
|
+ apiObj: this.$API.merOrder.list
|
|
|
+ },
|
|
|
+ dataSelect:[],
|
|
|
+ dataSelectFull:[],
|
|
|
+ searchKey:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ table_view(data){
|
|
|
+
|
|
|
+ },
|
|
|
+ table_del(data){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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>
|
Zory