积分商城一级列表页

src/views/pointsManagement/pointsMall/index.vue

@@ -1,3 +1,165 @@
 <template>
-  <h3>积分商城</h3>
+  <div>
+    <div style="padding: 15px 15px 0 15px">
+      <el-form :inline="true" ref="formInlineRef" :model="formInline" size="small" class="demo-form-inline">
+        <el-form-item label="商品名称" prop="name">
+          <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
+        </el-form-item>
+        <el-form-item label="商品编号" prop="name">
+          <el-input v-model="formInline.name" placeholder="请输入商品编号"></el-input>
+        </el-form-item>
+        <el-form-item label="商品类型" prop="name">
+          <el-input v-model="formInline.name" placeholder="请输入商品类型"></el-input>
+        </el-form-item>
+        <el-form-item label="状态" prop="region">
+          <el-select v-model="formInline.region" placeholder="状态">
+            <el-option label="全部" value="shanghai"></el-option>
+            <el-option label="上架" value="beijing1"></el-option>
+            <el-option label="下架" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">搜索</el-button>
+          <el-button @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="padding:0 15px;">
+      <el-button type="primary" size="small" @click="add">新增商品</el-button>
+      <el-table v-loading="loading" :data="tableData" tooltip-effect="dark" size="small"
+        style="width: 100%;margin-top: 15px;" @selection-change="handleSelectionChange" height="calc(100vh - 280px)"
+         :cell-class-name="cellClass">
+
+        <el-table-column type="selection" width="55" align="center"></el-table-column>
+        <el-table-column label="序号" align="center" type="index" width="50">
+        </el-table-column>
+        <el-table-column label="商品编号" align="center" width="180">
+          <template slot-scope="scope">{{ scope.row.number }}</template>
+        </el-table-column>
+
+        <el-table-column label="商品名称" prop="name" align="center" width="180">
+        </el-table-column>
+        <el-table-column label="商品分类" prop="name" align="center" width="120">
+        </el-table-column>
+        <el-table-column label="价格（元+积分）" prop="name" align="center" width="120">
+        </el-table-column>
+        <el-table-column label="库存" prop="name" align="center" width="120">
+        </el-table-column>
+        <el-table-column label="已售" prop="name" align="center" width="120">
+        </el-table-column>
+        <el-table-column label="销售时间" align="center">
+          <template slot-scope="scope">{{ scope.row.date }}</template>
+        </el-table-column>
+        <el-table-column label="状态" prop="name" align="center" width="120">
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="220" class="operation">
+          <template slot-scope="scope">
+            <el-badge :value="2" size="mini" class="badgeClass">
+              <el-button size="mini" type="primary" plain @click="handleEdit(scope.$index, scope.row)">下架</el-button>
+            </el-badge>
+            <el-button size="mini" type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button size="mini" type="primary" plain @click="handleDelete(scope.$index, scope.row)">详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
+        @pagination="getList" />
+    </div>
+
+  </div>
+
+
+
 </template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      formInline: {
+        user: '',
+        region: ''
+      },
+      tableData: [{
+        date: '2026-1-29 0:00:00 - 2026-2-29 0:00:00',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      }, {
+        date: '2026-1-29 0:00:00 - 2026-2-29 0:00:00',
+        name: '王小虎',
+        address: '上海市普陀区金沙江路 1518 弄'
+      },],
+      multipleSelection: [],
+      // 总条数
+      total: 2,
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+      },
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    cellClass(item) {
+      if (item.column.label == "操作") {
+        return "cellClass";
+      }
+    },
+    //搜索
+    onSubmit() {
+      console.log('submit!');
+    },
+    //重置
+    resetForm(formRefName) {
+      this.$refs.formInlineRef.resetFields();
+    },
+    //新增商品
+    add() {
+
+    },
+    //table点击选中
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    /** 查询列表 */
+    getList() {
+
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .cellClass {
+  .cell {
+    overflow: visible;
+  }
+}
+::v-deep .badgeClass {
+  margin-right: 10px;
+  .el-badge__content {
+    background-color: #fbfc64;
+    box-shadow: 0 2px 2px #888888;
+    color: #000;
+    position: absolute;
+    top: -2px;
+    border-radius: 2px;
+    display: flex;
+    align-items: center;
+    font-size: 9px;
+    height: 15px;
+    line-height: 15px;
+    padding: 3px;
+  }
+
+}
+
+.el-pagination {
+  float: right;
+  padding: 30px 0;
+}
+</style>