Merge remote-tracking branch 'origin/pointsShop' into pointsShop

src/components/tableCompontent/index.vue

@@ -12,6 +12,7 @@
       @selection-change="handleSelectionChange"
       style="width: 100%; min-height: 45vh"
       :row-key="rowKey"
+      :cell-class-name="setCellClass"
       :height="height ? height : undefined"
     >
       <el-table-column
@@ -87,6 +88,14 @@ export default {
       type: String,
       default: "",
     },
+    cellClassName: {
+      type: String,
+      default: null,
+    },
+    cellProperty: {
+      type: String,
+      default: null,
+    },
     rowKey: {
       type: Function,
       default: null,
@@ -120,6 +129,12 @@ export default {
       this.showViewer = false;
       this.urlList = [];
     },
+    setCellClass(item) {
+      if(!this.cellProperty || !this.cellClassName) return
+      if(item.column.property==this.cellProperty){
+        return this.cellClassName
+      }
+    },
     handleSelectionChange(val) {
       this.$emit("selectionChange", val);
     },

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="dialogContent">
+    <div>
+      <el-form :inline="true" label-width="110px" label-position="left" ref="formInlineRef" :rules="rules"
+        :model="formInline" size="small">
+        <div class="titleInfo">基础信息</div>
+        <div style="padding:0 20px;">
+          <el-form-item label="商品分类" prop="name1">
+            <DictSelect v-model="formInline.name1" :dictOptions="navigateMenuOption" placeholder="请选择" />
+          </el-form-item>
+          <el-form-item label="商品编号" prop="name1">
+            <el-input v-model="formInline.name1" placeholder="请输入商品编号"></el-input>
+          </el-form-item>
+          <el-form-item label="商品名称" prop="name1">
+            <el-input v-model="formInline.name1" placeholder="请输入商品类型"></el-input>
+          </el-form-item>
+          <el-form-item label="商品图" prop="name1">
+            <el-upload class="uploadDemo" ref="upload" :limit="limit" :on-exceed="handleExceed"
+              action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card">
+              <i slot="default" style="display: block;font-size: 18px;margin:20% 0 -60% 0;" class="el-icon-upload2"></i>
+              <span style="font-size: 12px;">上传附件</span>
+
+              <div slot="file" slot-scope="{file}">
+                <div class="imgClass">
+                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+                </div>
+                <div style="display: flex;justify-content: space-between;padding: 0 5px;">
+                  <el-button type="text" @click="handleMainImage(file)">{{ mainImageUid == file.uid ? '主图' : '设为主图'}}</el-button>
+                  <el-button type="text" @click="handleRemove(file)">删除</el-button>
+                </div>
+
+              </div>
+
+            </el-upload>
+          </el-form-item>
+        </div>
+        <div class="titleInfo">描述信息</div>
+        <div style="padding:0 20px;">
+          <el-form-item label="商品描述" prop="name1">
+            <el-input v-model="formInline.name1" placeholder="请输入商品编号"></el-input>
+          </el-form-item>
+        </div>
+        <el-form-item label="商品详情描述" prop="name1">
+            <el-input v-model="formInline.name1" placeholder=""></el-input>
+          </el-form-item>
+
+      </el-form>
+    </div>
+  </div>
+</template>
+<script>
+import { Divider } from 'element-ui';
+import AddOrEditOrDetail from './addOrEditOrDetail.vue'
+export default {
+  components: {
+    AddOrEditOrDetail,
+  },
+  data() {
+    return {
+      mainImageUid: null,
+      formInline: {
+        name1: '',
+        region: ''
+      },
+      navigateMenuOption: [
+        { label: '测试数据', value: '1' },
+        { label: '测试数据1', value: '2' },
+        { label: '测试数据2', value: '3' }
+      ],
+      // 数量限制
+      limit: 6,
+      rules: {
+        name1: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+        ],
+        region: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ],
+        // date1: [
+        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+        // ],
+        // date2: [
+        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+        // ],
+        type: [
+          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+        ],
+      },
+
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    handleMainImage(file) {
+      this.mainImageUid = file.uid
+      let fileList = this.$refs.upload.uploadFiles;
+      fileList.forEach((fileItem) => {
+        fileItem.type = null
+        if (fileItem.uid === file.uid) {
+          fileItem.type = 'mainImage'
+        }
+      });
+      console.log(file, fileList, 'fileList')
+    },
+    handleRemove(file) {
+      let fileList = this.$refs.upload.uploadFiles;
+      let index = fileList.findIndex((fileItem) => {
+        return fileItem.uid === file.uid;
+      });
+      fileList.splice(index, 1);
+    },
+
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep .dialogContent {}
+
+.titleInfo {
+  font-size: 14px;
+  font-weight: 800;
+  margin: -20px 0 15px 0;
+}
+
+::v-deep .uploadDemo {
+
+  .el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+
+  }
+
+  .imgClass {
+    width: 90px;
+    height: 90px;
+    border: 1px solid #c0ccda;
+  }
+
+  .el-upload-list--picture-card {
+    .el-upload-list__item {
+      width: 93px;
+      height: 120px;
+      border: 1px solid #00000000;
+    }
+
+    .el-upload-list__item-actions {
+      width: 90px;
+      height: 90px;
+    }
+  }
+
+
+
+
+
+}
+</style>

src/views/pointsManagement/pointsMall/index.vue

@@ -12,11 +12,7 @@
           <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>
+          <DictSelect v-model="formInline.region" :dictOptions="navigateMenuOption" placeholder="请选择" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">搜索</el-button>
@@ -25,72 +21,119 @@
       </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>
+      <el-button style="margin-bottom: 15px;" type="primary" size="small" @click="handleAddOrEditOrDetails('新增')">新增商品</el-button>
+      <tableCompontent ref="tableRef" :loading="loading" :selection="true" :tableData="list"
+        :height="'calc(100vh - 280px)'" :columnData="columnData" :cellClassName="'cellClass'"
+        :cellProperty="'operation'">
+        <template v-slot:operation="row">
+          <el-badge :value="2" size="mini" class="badgeClass">
+            <el-button size="mini" type="primary" plain @click="handleEdit(row)">下架</el-button>
+          </el-badge>
+          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('编辑')">编辑</el-button>
+          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('详情')">详情</el-button>
+        </template>
+      </tableCompontent>
       <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
         @pagination="getList" />
     </div>
 
-  </div>
-
-
+    <!-- 编辑、新增、详情 -->
+    <el-dialog :title="title" width="55%" :visible.sync="dialogVisible" :close-on-click-modal="false">
+      <AddOrEditOrDetail></AddOrEditOrDetail>
+    </el-dialog>
 
+  </div>
 </template>
 
 
 <script>
+import tableCompontent from "@/components/tableCompontent/index.vue";
+import AddOrEditOrDetail from './addOrEditOrDetail.vue'
 export default {
+  components: {
+    tableCompontent,
+    AddOrEditOrDetail,
+  },
   data() {
     return {
+      title: null,
+      dialogVisible: false,
       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 弄'
-      },],
+      list: [{
+        sellTime: '2026-1-29 0:00:00 - 2026-2-29 0:00:00',
+        shopName: '王小虎',
+      }],
+      columnData: [
+        {
+          prop: 'seq',
+          label: '序号',
+          getIndex: this.getIndex,
+          width: 55,
+          align: 'center',
+          fixed: 'left'
+        },
+        {
+          prop: 'shopNum',
+          label: '商品编号',
+          align: 'center',
+          width: 180,
+
+        },
+        {
+          prop: 'shopName',
+          label: '商品名称',
+          align: 'center',
+          width: 180,
+        },
+        {
+          prop: 'shopType',
+          label: '商品分类',
+          align: 'center',
+          width: 120,
+        },
+        {
+          prop: 'shopPrice',
+          label: '价格（元+积分）',
+          align: 'center',
+          width: 120,
+        },
+        {
+          prop: 'shopSave',
+          label: '库存',
+          align: 'center',
+          width: 100,
+        },
+        {
+          prop: 'shopSell',
+          label: '已售',
+          align: 'center',
+          width: 100,
+        },
+        {
+          prop: 'sellTime',
+          label: '销售时间',
+          align: 'center',
+        },
+        {
+          prop: 'shopStatus',
+          label: '状态',
+          color: 'red',
+          align: 'center',
+          width: 100,
+        },
+        {
+          prop: 'operation',
+          label: '操作',
+          align: 'center',
+          fixed: 'right',
+          type: 'custom',
+          width: 220
+        },
+      ],
       multipleSelection: [],
       // 总条数
       total: 2,
@@ -99,14 +142,21 @@ export default {
         current: 1,
         size: 10,
       },
+      navigateMenuOption: [
+        { label: '测试数据', value: '1' },
+        { label: '测试数据1', value: '2' },
+        { label: '测试数据2', value: '3' }
+      ],
     }
   },
   created() {
     this.getList();
   },
   methods: {
-    cellClass(item) {
+    setCellClass(item) {
+      console.log(item, '666666')
       if (item.column.label == "操作") {
+        console.log(item, 'item')
         return "cellClass";
       }
     },
@@ -118,8 +168,10 @@ export default {
     resetForm(formRefName) {
       this.$refs.formInlineRef.resetFields();
     },
-    //新增商品
-    add() {
+    //新增、编辑、详情商品
+    handleAddOrEditOrDetails(title) {
+      this.title = title
+      this.dialogVisible = true
 
     },
     //table点击选中
@@ -139,8 +191,10 @@ export default {
     overflow: visible;
   }
 }
+
 ::v-deep .badgeClass {
   margin-right: 10px;
+
   .el-badge__content {
     background-color: #fbfc64;
     box-shadow: 0 2px 2px #888888;