订单列表

src/assets/styles/index.scss

@@ -385,3 +385,52 @@ aside {
 .image-table .el-table__cell {
   position: static !important;
 }
+
+.common-info-box {
+  width: 100%;
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 5%, rgba(220, 239, 255, 0.15) 100%);
+  box-shadow: 0 2px 1px 0 rgba(24, 144, 255, 0.14);
+  border-top: 1px solid #ebf4ff;
+  //filter: blur(20px);
+  padding: 6px 0 13px;
+  margin-top: 24px;
+  .common-info-header {
+    display: flex;
+    align-items: center;
+    .line-icon {
+      display: inline-block;
+      width: 6px;
+      height: 17px;
+      background-image: linear-gradient(180deg, #00FCE7 0%, #2C81FF 100%);
+      border-radius: 0 3px 0 0;
+      margin-right: 9px;
+    }
+    .common-info-title {
+      font-weight: bold;
+    }
+  }
+  .common-info-content {
+    padding: 0 8px;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: 8px;
+    .common-info-item {
+      display: flex;
+      align-items: center;
+      margin-top: 9px;
+      &:nth-child(4n + 1) {
+        width: 31%;
+      }
+      &:nth-child(4n + 2) {
+        width: 23%;
+      }
+      &:nth-child(4n + 3) {
+        width: 23%;
+      }
+      &:nth-child(4n + 4) {
+        width: 23%;
+      }
+    }
+  }
+}

src/views/orderList/index.vue

@@ -1,84 +1,84 @@
 <template>
   <div class="app-container">
-    <div v-show="!commodityManageFormState.show">
-      <FilterButton :filter-items="filterItems" :active-value="activeFilter" @filter-change="handleFilterChange" />
-      <transition name="fade">
-        <div>
-          <el-form ref="queryFormRef" :model="queryParams">
-            <el-row :gutter="20">
-              <el-col :span="5">
-                <el-form-item label="输入搜索：" prop="name">
-                  <el-input v-model="queryParams.name" placeholder="请输入报告名称" clearable @keyup.enter="handleQuery" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="5">
-                <el-form-item label="收货人：" prop="consignee">
-                  <el-select v-model="queryParams.serviceClass" clearable>
-                    <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="5">
-                <el-form-item label="商品类型：" prop="submissionTime">
-                  <el-select v-model="queryParams.serviceStatus" clearable>
-                    <!--<el-option v-for="item in mm_event_type" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="5">
-                <el-form-item label="提交时间：" prop="serviceStatus">
-                  <el-date-picker v-model="value1" type="datetime" placeholder="请选择时间" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="1.5">
-                <el-button type="primary" @click="handleQuery">查询</el-button>
-                <el-button @click="resetQuery">重置</el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-        </div>
-      </transition>
-      <el-row :gutter="10" class="mb8">
-        <el-col :span="1.5">
-          <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-        </el-col>
-      </el-row>
-      <!-- 表格组件 -->
-      <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="订单编号" align="center" prop="id" />
-        <el-table-column label="提交时间" align="center" prop="submissionTime" />
-        <el-table-column label="用户账号" align="center" prop="userAccount" />
-        <el-table-column label="订单金额" align="center" prop="orderAmount" />
-        <el-table-column label="支付方式" align="center" prop="paymentMethod" />
-        <el-table-column label="商品分类" align="center" prop="category" />
-        <el-table-column label="订单状态" align="center" prop="orderStatus" />
-        <el-table-column label="接口状态" align="center" prop="status" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <!-- 待签署和待付款状态显示取消订单 -->
-            <el-text v-if="['待签署', '待付款'].includes(scope.row.orderStatus)" class="common-btn-text-primary" @click="cancelOrder(scope.row)">
-              取消订单
-            </el-text>
+    <div v-show="!eventDetailsState.show">
+      <div v-show="!commodityManageFormState.show">
+        <FilterButton :filter-items="filterItems" :active-value="activeFilter" @filter-change="handleFilterChange" />
+        <transition name="fade">
+          <div>
+            <el-form ref="queryFormRef" :model="queryParams">
+              <el-row :gutter="20">
+                <el-col :span="5">
+                  <el-form-item label="输入搜索：" prop="name">
+                    <el-input v-model="queryParams.name" placeholder="请输入报告名称" clearable @keyup.enter="handleQuery" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="收货人：" prop="consignee">
+                    <el-input v-model="queryParams.consignee" placeholder="请输入报告名称" clearable @keyup.enter="handleQuery" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="商品类型：" prop="submissionTime">
+                    <el-select v-model="queryParams.serviceStatus" clearable>
+                      <el-option v-for="item in service_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="5">
+                  <el-form-item label="提交时间：" prop="serviceStatus">
+                    <el-date-picker v-model="value1" type="datetime" placeholder="请选择时间" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="1.5">
+                  <el-button type="primary" @click="handleQuery">查询</el-button>
+                  <el-button @click="resetQuery">重置</el-button>
+                </el-col>
+              </el-row>
+            </el-form>
+          </div>
+        </transition>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+          </el-col>
+        </el-row>
+        <!-- 表格组件 -->
+        <el-table ref="multipleTable" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="订单编号" align="center" prop="id" />
+          <el-table-column label="提交时间" align="center" prop="submissionTime" />
+          <el-table-column label="用户账号" align="center" prop="userAccount" />
+          <el-table-column label="订单金额" align="center" prop="orderAmount" />
+          <el-table-column label="支付方式" align="center" prop="paymentMethod" />
+          <el-table-column label="商品分类" align="center" prop="category" />
+          <el-table-column label="订单状态" align="center" prop="orderStatus" />
+          <el-table-column label="接口状态" align="center" prop="status" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <!-- 待签署和待付款状态显示取消订单 -->
+              <el-text v-if="['待签署', '待付款'].includes(scope.row.orderStatus)" class="common-btn-text-primary" @click="cancelOrder(scope.row)">
+                取消订单
+              </el-text>
 
-            <!-- 已完成状态显示查看详情 -->
-            <el-text v-if="scope.row.orderStatus === '已完成'" class="common-btn-text-primary" @click="viewDetails(scope.row)"> 查看详情 </el-text>
+              <!-- 已完成状态显示查看详情 -->
+              <el-text v-if="scope.row.orderStatus === '已完成'" class="common-btn-text-primary" @click="viewDetails(scope.row)"> 查看详情 </el-text>
 
-            <!-- 已退款和已取消状态不显示操作按钮 -->
-            <span v-if="['已退款', '已取消'].includes(scope.row.orderStatus)">-</span>
-          </template>
-        </el-table-column>
-      </el-table>
+              <!-- 已退款和已取消状态不显示操作按钮 -->
+              <span v-if="['已退款', '已取消'].includes(scope.row.orderStatus)">-</span>
+            </template>
+          </el-table-column>
+        </el-table>
 
-      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.page_size" :total="total" @pagination="getList" />
+      </div>
+      <CommodityManageForm
+        v-if="commodityManageFormState.show"
+        @on-cancel="commodityManageFormState.show = false"
+        @on-confirm="handleCommodityManageFormState"
+      />
     </div>
-    <CommodityManageForm
-      v-if="commodityManageFormState.show"
-      @on-cancel="commodityManageFormState.show = false"
-      @on-confirm="handleCommodityManageFormState"
-    />
+    <order-details v-if="eventDetailsState.show" :id="eventDetailsState.id" @close="handleEventDetailsClose" />
   </div>
-  <order-details v-if="eventDetailsState.show" :id="eventDetailsState.id" @close="handleEventDetailsClose" />
 </template>
 
 <script setup name="CommodityManage">
@@ -86,6 +86,7 @@ import CommodityManageForm from '@/views/commodityManage/CommodityManageForm.vue
 import OrderDetails from '@/views/orderList/orderDetails.vue';
 
 const { proxy } = getCurrentInstance();
+const { service_class, service_status } = toRefs(proxy?.useDict('service_class', 'service_status'));
 const queryFormRef = ref();
 const value1 = ref();
 // 搜索条件
@@ -228,8 +229,6 @@ const handleSelectionChange = (selection) => {
 
 const activeFilter = ref('all');
 
-
-
 const dataList = computed(() => {
   if (activeFilter.value === 'all') {
     return originalData;

src/views/orderList/orderDetails.vue

@@ -1,11 +1,113 @@
 <template>
-
+  <div class="detail-container">
+    <div class="common-back-box" @click="handleBack">
+      <i class="common-back" />
+      返回上一级
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">报告概况</div>
+      </div>
+      <div class="common-info-content">
+        <div class="common-info-item">报告编号：{{ props.id }}</div>
+        <div class="common-info-item">报告生成时间：</div>
+        <div class="common-info-item">报告一共涉及6项内容</div>
+        <div class="common-info-item">报告中需要重点关注的内容有0项</div>
+        <div class="common-info-item">报告中失信记录、不良记录异常</div>
+      </div>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">基本信息</div>
+      </div>
+      <el-table :data="tableData" style="margin-top: 10px">
+        <el-table-column label="接口名称" align="center" prop="data1" />
+        <el-table-column label="接口状态" align="center" prop="data2" />
+        <el-table-column label="查询结果" align="center" prop="data3" />
+        <el-table-column label="调用时间" align="center" prop="data4" />
+        <el-table-column label="数据来源" align="center" prop="data5" />
+      </el-table>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">收入评分</div>
+      </div>
+      <el-table :data="tableData" style="margin-top: 10px">
+        <el-table-column label="接口名称" align="center" prop="data1" />
+        <el-table-column label="接口状态" align="center" prop="data2" />
+        <el-table-column label="查询结果" align="center" prop="data3" />
+        <el-table-column label="调用时间" align="center" prop="data4" />
+        <el-table-column label="数据来源" align="center" prop="data5" />
+      </el-table>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">不良记录</div>
+      </div>
+      <el-table :data="tableData" style="margin-top: 10px">
+        <el-table-column label="接口名称" align="center" prop="data1" />
+        <el-table-column label="接口状态" align="center" prop="data2" />
+        <el-table-column label="查询结果" align="center" prop="data3" />
+        <el-table-column label="调用时间" align="center" prop="data4" />
+        <el-table-column label="数据来源" align="center" prop="data5" />
+      </el-table>
+    </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">涉案信息</div>
+      </div>
+      <el-table :data="tableData" style="margin-top: 10px">
+        <el-table-column label="接口名称" align="center" prop="data1" />
+        <el-table-column label="接口状态" align="center" prop="data2" />
+        <el-table-column label="查询结果" align="center" prop="data3" />
+        <el-table-column label="调用时间" align="center" prop="data4" />
+        <el-table-column label="数据来源" align="center" prop="data5" />
+      </el-table>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true
+  }
+});
+const tableData = [
+  {
+    data1: '用户信息查询接口',
+    data2: '正常',
+    data3: '查询成功',
+    data4: '2023-11-15 14:30:22',
+    data5: '核心业务系统'
+  },
+  {
+    data1: '订单状态同步接口',
+    data2: '异常',
+    data3: '连接超时',
+    data4: '2023-11-15 15:12:45',
+    data5: '订单管理系统'
+  },
+  {
+    data1: '支付结果通知接口',
+    data2: '正常',
+    data3: '回调成功',
+    data4: '2023-11-15 16:05:33',
+    data5: '支付网关'
+  }
+];
 
-</script>
+const emits = defineEmits(['close']);
 
-<style lang="scss" scoped>
+const handleBack = () => {
+  emits('close');
+};
+</script>
 
-</style>
+<style lang="scss" scoped></style>