Przeglądaj źródła

feat: 积分订单一级界面提交

xyh 5 miesięcy temu
rodzic
commit
e689168ae8

+ 51 - 0
src/api/points/order_api.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+
+
+/**
+ * 获取积分订单列表的函数
+ * @param {Object} query - 查询参数对象,包含查询条件
+ */
+export function getOrderPointsList(query) {
+  let res = {
+    "total": 4,
+    "rows": [
+      {
+        "orderNo": "DORDER2026020100001",
+        "shopName": "广誉源毛巾",
+        "shopNum": "1",
+        "shopPrice": "¥10+1000积分",
+        "nickName": '张三',
+        "phone": "15036985236",
+        "orderTime": "2026-1-27 10:00:00",
+        "deliveryTime": "2026-1-27 10:00:00",
+        "logisticsNo": "SF2014523698",
+        "orderStatus": '2',
+      },
+      {
+        "orderNo": "DORDER2026020100001",
+        "shopName": "广誉源被子",
+        "shopNum": "3",
+        "shopPrice": "1000积分",
+        "nickName": '李四',
+        "phone": "15036985236",
+        "orderTime": "2026-1-27 10:00:00",
+        "deliveryTime": "2026-1-27 10:00:00",
+        "logisticsNo": "SF2014523698",
+        "orderStatus": '3',
+      },
+    ],
+    "code": 200,
+    "msg": "查询成功"
+  }
+  return new Promise((resolve, reject) => {
+    // 模拟网络延迟 1000ms
+    setTimeout(() => {
+      resolve(res)
+    }, 1000);
+  });
+  // return request({
+  //   url: '/ylxAlarm/getAlarmList', // 请求的API地址
+  //   method: 'get', // 请求方法为GET
+  //   params: query // 将查询参数作为请求参数发送
+  // })
+}

+ 180 - 1
src/views/pointsManagement/pointsOrdeManagement/index.vue

@@ -1,3 +1,182 @@
 <template>
-  <h3>积分订单管理</h3>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="订单号" prop="orderNo">
+        <el-input
+          v-model="queryParams.orderNo"
+          placeholder="请输入订单号"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="物流单号" prop="logisticsNo">
+        <el-input
+          v-model="queryParams.logisticsNo"
+          placeholder="请输入物流单号"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="orderStatus">
+        <DictSelect v-model="queryParams.orderStatus" :dictOptions="orderStatusOption" placeholder="请选择"/>
+      </el-form-item>
+      <el-form-item label="下单时间" prop="dateRange">
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <tableCompontent ref="tableRef" height="" :loading="loading" :tableData="list" :columnData="columnData">
+      <template v-slot:operation="row">
+        <el-button size="mini" type="text" @click="handleView(row)">详情</el-button>
+      </template>
+    </tableCompontent>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
 </template>
+
+<script>
+import { getOrderPointsList } from "@/api/points/order_api";
+import tableCompontent from "@/components/tableCompontent/index.vue";
+import listMixin from '@/utils/listMixin';
+export default {
+  name: "pointsRules",
+  mixins: [listMixin],
+  components: {
+    tableCompontent,
+  },
+  data() {
+    return {
+      // 用户表格数据
+      list: null,
+      orderStatusOption:[
+        {label:'全部',value:'1'},
+        {label:'待发货',value:'2'},
+        {label:'已发货',value:'3'}
+      ],
+      columnData:[
+        {
+          prop: 'seq',
+          label: '序号',
+          getIndex: this.getIndex,
+          width: 55,
+          align:'center',
+          fixed: 'left'
+        },
+        {
+          prop: 'orderNo',
+          label: '订单号',
+          align:'center',
+        },
+        {
+          prop: 'shopName',
+          label: '商品',
+          align:'center',
+        },
+        {
+          prop: 'shopNum',
+          label: '数量',
+          align:'center',
+        },
+        {
+          prop: 'shopPrice',
+          label: '价格',
+          align:'center',
+        },
+        {
+          prop: 'nickName',
+          label: '客户昵称',
+          align:'center',
+        },
+        {
+          prop: 'phone',
+          label: '客户手机号',
+          align:'center',
+        },
+        {
+          prop: 'orderTime',
+          label: '下单时间',
+          align:'center',
+        },
+        {
+          prop: 'deliveryTime',
+          label: '发货时间',
+          align:'center',
+        },
+        {
+          prop: 'logisticsNo',
+          label: '物流单号',
+          align:'center',
+        },
+        {
+          prop: 'orderStatus',
+          label: '状态',
+          align:'center',
+          type:'find',
+          option:[]
+        },
+        {
+          prop: 'operation',
+          label: '操作',
+          align:'center',
+          fixed: 'right',
+          type:'custom',
+          width: 120
+        },
+      ],
+    };
+  },
+  created() {
+    this.queryParams = {
+      ...this.queryParams,
+      orderNo:'',
+      logisticsNo:'',
+      orderStatus:'',
+      dateRange:[],
+    }
+    this.isImmediateLoad = false;
+    this.getListUrl = getOrderPointsList;
+    // 或者设置自定义数据处理函数
+    this.customProcessDataFun = (val) => {
+      // 自定义处理查询参数
+      this.queryParams = this.DateRange(this.queryParams,val.dateRange || [],['startTime','endTime'],'s')
+    };
+  },
+  mounted(){
+    this.columnData.find(item => item.prop === 'orderStatus').option = this.orderStatusOption;
+    this.handleQuery();
+  },
+  methods: {
+    /** 查看详情 */
+    handleView(row) {
+
+    },
+  }
+};
+</script>