接口对接

src/api/points/pointsMall_api.js

@@ -0,0 +1,69 @@
+import request from "@/utils/request";
+
+/**
+ * 积分商城页接口
+ */
+
+//查询商品分类
+export function productCategoryList() {
+  return request({
+    url: "/product/category/list",
+    method: "get",
+  });
+}
+//新增商品规格
+export function productSpecSetup(data) {
+  return request({
+    url: "/product/spec/setup",
+    method: "post",
+    data: data,
+  });
+}
+//生成商品分类
+export function productGenerateProductNo(query) {
+  return request({
+    url: "/product/generateProductNo",
+    method: "get",
+    params: query,
+  });
+}
+//获取商品规格组合
+export function productSpecCombinations(query) {
+  return request({
+    url: "/product/spec/combinations",
+    method: "get",
+    params: query,
+  });
+}
+//上下架商品
+export function productUpdateStatus(data) {
+  return request({
+    url: "/product/updateStatus",
+    method: "post",
+    data: data,
+  });
+}
+//查询商品列表
+export function productList(query) {
+  return request({
+    url: "/product/list",
+    method: "get",
+    params: query,
+  });
+}
+//查询商品详情
+export function productGetById(query) {
+  return request({
+    url: "/product/getById",
+    method: "get",
+    params: query,
+  });
+}
+//编辑商品
+export function productUpdate(data) {
+  return request({
+    url: "/product/update",
+    method: "post",
+    data: data,
+  });
+}

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -3,95 +3,104 @@
     <div>
       <el-form label-width="110px" label-position="right" ref="formInlineRef" :rules="rules" :model="formInline"
         size="small">
+        <!-- 基础信息 -->
         <div class="titleInfo">基础信息</div>
         <div style="padding:0 20px;">
           <div style="display: flex;">
-            <el-form-item label="商品分类" prop="name1">
-              <DictSelect v-model="formInline.name1" :dictOptions="navigateMenuOption" placeholder="请选择" />
+            <el-form-item label="商品分类" prop="categoryId">
+              <DictSelect v-model="formInline.categoryId" @change="changeShopType" :dictOptions="shopType"
+                placeholder="请选择" />
             </el-form-item>
-            <el-form-item label="商品编号" prop="name1">
-              <el-input v-model="formInline.name1" placeholder="请输入商品编号"></el-input>
+            <el-form-item label="商品编号">
+              <el-input v-model="formInline.productNo" :disabled="true" placeholder="请输入商品编号"></el-input>
             </el-form-item>
-            <el-form-item label="商品名称" prop="name1">
-              <el-input v-model="formInline.name1" placeholder="请输入商品类型"></el-input>
+            <el-form-item label="商品名称" prop="name">
+              <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
             </el-form-item>
           </div>
-          <el-form-item label="商品主图" prop="name1">
-            <ImageUpload v-model="formInline.shopMainImg" :limit="1" />
+          <el-form-item label="商品主图" prop="productMainImage">
+            <ImageUpload v-model="formInline.productMainImage" :limit="1" />
           </el-form-item>
-          <el-form-item label="商品图" prop="name1">
-            <ImageUpload v-model="formInline.shopImg" :limit="6" tipText="建议上传商品图，最多6张" />
+          <el-form-item label="商品图" prop="productImage">
+            <div style="display: flex;">
+              <ImageUpload v-model="formInline.productImage" :limit="6" tipText="建议上传商品图，最多6张" />
+            </div>
+
           </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 label="商品描述" prop="summary">
+            <el-input v-model="formInline.summary" placeholder="请输入商品描述"></el-input>
           </el-form-item>
-          <el-form-item label="商品详情描述" prop="name1">
-            <Tinymce :height="'280px'" :width="'100%'" v-model="tiny.value"></Tinymce>
+          <el-form-item label="商品详情描述" prop="detail">
+            <Tinymce :height="'280px'" :width="'100%'" v-model="formInline.detail"></Tinymce>
           </el-form-item>
         </div>
+        <!-- 售卖信息 -->
         <div class="titleInfo">售卖信息</div>
         <div style="padding:0 20px;">
           <el-form-item label="规格">
             <el-button type="primary" size="small" plain @click="dialogVisibleSpec = true"
               style="margin-bottom: 15px;">编辑</el-button>
-            <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef1" :tableData="list1"
+            <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef1" :tableData="this.formInline.specList"
               :columnData="columnData1">
             </tableCompontent>
           </el-form-item>
           <el-form-item label="规格明细">
-            <DictSelect v-model="formInline.selectPaymentMethodValue" :dictOptions="selectPaymentMethod"
-              placeholder="请选择" style="margin-bottom: 15px;" />
-            <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef3" :tableData="list3"
+            <DictSelect v-model="formInline.paymentType" :dictOptions="selectPaymentMethod" placeholder="请选择"
+              style="margin-bottom: 15px;" />
+            <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef3" :tableData="formInline.skuList"
               :columnData="columnData3">
               <template v-slot:img="row">
                 <div style="display: flex;justify-content: center;">
-                  <ImageUpload :isShowTip="false" v-model="row.img" :limit="1" />
+                  <ImageUpload :isShowTip="false" v-model="row.image" :limit="1" />
                 </div>
               </template>
               <template v-slot:pointsOrprice="row">
-                <div v-if="formInline.selectPaymentMethodValue == 1 || formInline.selectPaymentMethodValue == 2">
-                  <el-input-number :model="formInline.selectPaymentMethodValue == 1 ? row.points : row.price"
-                    controls-position="right" :min="1" :max="10"></el-input-number>
-                  <span>{{ formInline.selectPaymentMethodValue == 1 ? '积分' : '元' }}</span>
+                <div v-if="formInline.paymentType == 1 || formInline.paymentType == 2">
+                  <el-input-number v-model="row.pricePoint" controls-position="right" :min="1"></el-input-number>
+                  <span>{{ formInline.paymentType == 1 ? '积分' : '元' }}</span>
                 </div>
-                <div v-if="formInline.selectPaymentMethodValue == 3">
-                  <el-input-number v-model="row.price" controls-position="right" :min="1" :max="10"></el-input-number>
+                <div v-if="formInline.paymentType == 3">
+                  <el-input-number v-model="row.pricePoint" controls-position="right" :min="1"></el-input-number>
                   <span>元 +</span>
-                  <el-input-number v-model="row.points" controls-position="right" :min="1" :max="10"></el-input-number>
+                  <el-input-number v-model="row.pricePoint" controls-position="right" :min="1"></el-input-number>
                   <span>积分</span>
                 </div>
-
-
               </template>
             </tableCompontent>
           </el-form-item>
         </div>
+        <!-- 服务信息 -->
         <div class="titleInfo">服务信息</div>
         <div style="display: flex;padding:0 20px;">
-          <el-form-item label="基础运费" prop="name1">
-            <el-input v-model="formInline.name1" placeholder="请输入基础运费"></el-input>
+          <el-form-item label="基础运费" prop="freight">
+            <el-input-number v-model="formInline.freight" placeholder="请输入基础运费" controls-position="right"
+              :min="0"></el-input-number>
+
           </el-form-item>
-          <el-form-item label="承诺发货时间" prop="name1">
-            <DictSelect v-model="formInline.name1" :dictOptions="seedTime" placeholder="请选择" />
+          <el-form-item label="承诺发货时间" prop="deliveryTime">
+            <DictSelect v-model="formInline.deliveryTime" :dictOptions="seedTime" placeholder="请选择" />
           </el-form-item>
           <el-form-item label="上架时间" prop="dateRange">
             <el-date-picker v-model="formInline.dateRange" value-format="yyyy-MM-dd" type="daterange"
               range-separator="-" style="width: 220px" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
           </el-form-item>
         </div>
-        <el-form-item style="padding:0 20px;" label="服务承诺" prop="name1">
-          <el-checkbox-group v-model="checkedCities" @change="handleCheckedChange">
-            <el-checkbox v-for="(item, index) in cLdList" :label="item.cdescribe" :key="index">{{ item.cdescribe }}
+        <el-form-item style="padding:0 20px;" label="服务承诺" prop="servicePromise">
+          <el-checkbox-group v-model="formInline.servicePromise" @change="handleCheckedChange">
+            <el-checkbox v-for="(item, index) in servicePromiseArr" :label="item.cdescribe" :key="index">{{
+              item.cdescribe
+            }}
             </el-checkbox>
           </el-checkbox-group>
         </el-form-item>
       </el-form>
     </div>
-
+    <!-- 规格编辑 -->
     <el-dialog center title="规格设置" width="80%" :append-to-body="true" :destroy-on-close="true"
       :visible.sync="dialogVisibleSpec" append-to-body :close-on-click-modal="false">
       <div>
@@ -107,7 +116,7 @@
         <!-- 操作按钮 -->
         <div style="display: flex;justify-content: center;margin-top: 25px;">
           <el-button @click="dialogVisibleSpec = false">取 消</el-button>
-          <el-button type="primary" @click="dialogVisibleSpec = false">保存</el-button>
+          <el-button type="primary" @click="specSetSave">保存</el-button>
         </div>
       </div>
 
@@ -116,13 +125,23 @@
   </div>
 </template>
 <script>
+
 import tableCompontent from "@/components/tableCompontent/index.vue";
 import Tinymce from "@/components/tinymce/index.vue";
+import { productSpecSetup, productGenerateProductNo, productSpecCombinations } from "@/api/points/pointsMall_api";
 export default {
   components: {
     Tinymce, tableCompontent
   },
   props: {
+    shopType: {
+      type: Array,
+      default: [],
+    },
+    params:{
+      type:Object,
+      default: {}
+    }
     // dialogVisible: {
     //   type: Boolean,
     //   default: false,
@@ -132,26 +151,49 @@ export default {
     return {
       dialogVisibleSpec: false,
       checkedCities: [],
-      cLdList: [
+      servicePromiseArr: [
         { cdescribe: '假一赔十' },
         { cdescribe: '7天无理由退货' },
         { cdescribe: '破损包退换' },
       ],
-      tiny: {
-        value: undefined,
-      },
       mainImageUid: null,
       formInline: {
-        name1: '',
-        region: '',
-        shopMainImg: '',
-        shopImg: '',
-        selectPaymentMethodValue: '1',
+        detail: '',
+        categoryId: '',
+        productNo: '',
+        productMainImage: '',
+        productImage: '',
+        paymentType: 1,
+        freight: '',
+        deliveryTime: '',
+        summary: '',
+        dateRange: '',
+        servicePromise: [],
+        //规格展示table
+        specList: [],
+        //规格明细table
+        skuList: [
+          //{ specCombo: "白色、加粗、大号", image: "", pricePoint: '', originPrice: 2, stock: 6 },
+        ],
+      },
+      rules: {
+        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' },],
+        productMainImage: [{ required: true, message: '请上传主图', trigger: 'change' }],
+        productImage: [{ required: true, message: '请上传商品图', trigger: 'change' }],
+        categoryId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
+        region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
+        deliveryTime: [{ required: true, message: '请选择承诺发货时间', trigger: 'change' }],
+        dateRange: [{ required: true, message: '请选择上架时间', trigger: 'change' }],
+        summary: [{ required: true, message: '请输入商品描述', trigger: 'blur' },],
+        freight: [{ required: true, message: '请输入基础运费', trigger: 'blur' },],
+        detail: [{ required: true, message: '请输入商品详情描述', trigger: 'blur' },],
+        servicePromise: [{ type: 'array', required: true, message: '请至少选择一个服务承诺', trigger: 'change' }],
+
       },
       selectPaymentMethod: [
-        { label: '积分', value: '1' },
-        { label: '金额', value: '2' },
-        { label: '积分+金额', value: '3' }
+        { label: '积分', value: 1 },
+        { label: '金额', value: 2 },
+        { label: '积分+金额', value: 3 }
       ],
       navigateMenuOption: [
         { label: '测试数据', value: '1' },
@@ -166,73 +208,130 @@ export default {
       ],
       // 数量限制
       limit: 6,
-      rules: {
-        name1: [
-          { required: true, message: '请输入活动名称', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-        ],
-        region: [
-          { required: true, message: '请选择活动区域', trigger: 'change' }
-        ],
-        type: [
-          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
-        ],
-      },
-      list1: [
-        {
-          shopNum1: 'XXX',
-          shopNum: '王小虎',
-        }
-      ],
-      columnData1: [
-        {
-          prop: 'shopNum',
-          label: '规格',
-          align: 'center',
-        }, {
-          prop: 'shopNum1',
-          label: '规格值1',
-          align: 'center',
-        }, {
-          prop: 'shopNum3',
-          label: '规格2',
-          align: 'center',
-        }, {
-          prop: 'shopNum4',
-          label: '规格值2',
-          align: 'center',
-        },
-      ],
+      columnData1: [],//{prop: 'specName',label: '规格', },
 
-      // 动态列配置（核心：控制表格有哪些列）
+      //规格编辑列 动态列配置（核心：控制表格有哪些列）
       columnData2: [
-        { label: "规格", prop: "col1", type: 'editItem', tag: 'input', icon: 'el-icon-remove-outline', align: 'center' },
-        { label: "规格值1", prop: "col2", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline', align: 'center' },
-        { label: "规格值3", prop: "col3", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline', align: 'center' },
-      ],
-      // 表格数据
-      list2: [
-        { col1: "", col2: "" },
+        { label: "规格", prop: "specName", type: 'editItem', tag: 'input', icon: 'el-icon-remove-outline', align: 'center' },
+        { label: "规格值1", prop: "specValue1", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline', align: 'center' },
+        { label: "规格值2", prop: "specValue2", type: 'editItem', tag: 'input', headerIcon: 'el-icon-remove-outline', align: 'center' },
       ],
 
-      list3: [
-        { col1: "白色、加粗、大号", img: "", price: '', oriangePrice: 2, number: 6 },
+      list2: [{ specName: '', specValue1: "", specValue2: "" },],
+
+      //规格明细列
+      columnData3: [
+        { label: "规格", prop: "specValueText", type: 'diy', align: 'center', },
+        { label: "图片", prop: "img", type: 'diy', align: 'center', },
+        { label: "价格", prop: "pricePoint", type: 'diy', width: 400, align: 'center', },
+        { label: "原价", prop: "oriangePrice", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
+        { label: "库存", prop: "number", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
       ],
-      columnData3: [],
 
     }
   },
   created() {
-    this.columnData3 = [
-      { label: "规格", prop: "col1", type: 'diy', align: 'center', },
-      { label: "图片", prop: "img", type: 'diy', align: 'center', },
-      { label: "价格", prop: "pointsOrprice", type: 'diy', width: 400, align: 'center', },
-      { label: "原价", prop: "oriangePrice", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
-      { label: "库存", prop: "number", type: 'editItem', tag: 'inputNumber', min: 0, align: 'center', },
-    ]
+    if(this.title=='详情')
+    this.formInline=this.params
+  console.log(this.formInline,'this.formInline')
+
 
   },
   methods: {
+    //新增、编辑---保存
+    validate(callback) {
+      this.$refs.formInlineRef.validate((valid) => {
+        callback(valid);
+      });
+    },
+    //商品分类
+    changeShopType(e) {
+      //获取商品编号
+      productGenerateProductNo({ categoryId: e }).then((res) => {
+        this.formInline.productNo = res.data
+        //查询规格组合
+        this.getSpecDetail(this.formInline.productNo)
+      });
+
+    },
+    //规格设置保存
+    specSetSave() {
+      //return
+      let specListTime = []
+      this.list2.forEach((item, index) => {
+        let obj = { specName: '', sort: '', specValues: [] }
+        obj.specName = item.specName
+        obj.sort = index + 1
+
+        for (let key in item) {
+          if (key !== 'specName') {
+            let obj2 = { specValue: '', sort: '' }
+            obj2.specValue = item[key]
+            obj2.sort = Number(key.split("specValue")[1])
+            obj.specValues.push(obj2)
+          }
+        }
+        specListTime.push(obj)
+      })
+      productSpecSetup({ specList: specListTime }).then((res) => {
+        if (res.code == 200) {
+          this.getSpecDetail(this.formInline.productNo)
+          this.$message.success(res.msg);
+          this.dialogVisibleSpec = false
+
+        } else {
+          this.$message.error(res.msg);
+        }
+      });
+
+
+    },
+
+    //查询商品规格和规格明细
+    getSpecDetail( productNo) {
+      productSpecCombinations({productNo:this.formInline.productNo}).then(res => {
+        this.formInline.specList = []
+        this.formInline.skuList = []//规格明细table
+        this.columnData1 = [{ label: '规格', prop: 'specName' }]
+        let arr = res.data
+        const map = new Map();
+        arr.forEach(item => {
+          let obj = { specValueText: null, img: null, pricePoint: null, oriangePrice: null, number: null }
+          obj.specValueText = item.specValueText
+          //生成规格明细table数据
+          this.formInline.skuList.push(obj)
+
+          item.specNameValueList.forEach(spec => {
+            const key = spec.specName;
+            if (!map.has(key)) {
+              map.set(key, new Set());
+            }
+            map.get(key).add(spec.specValue);
+          });
+        })
+        let maxSpecValueCount = 0;
+        // 2. 转成要的格式：specName + specValue1 + specValue2
+        map.forEach((valueSet, specName, index) => {
+          const values = Array.from(valueSet);
+          const obj = { specName: specName };
+          // 循环：自动加 specValue1、specValue2、specValue3...
+          values.forEach((val, index) => {
+            obj[`specValue${index + 1}`] = val;
+          });
+          maxSpecValueCount = Math.max(maxSpecValueCount, valueSet.size)
+          this.formInline.specList.push(obj);
+        });
+        for (let i = 1; i <= maxSpecValueCount; i++) {
+          this.columnData1.push({
+            prop: `specValue${i}`,
+            label: `规格值${i}`,
+          });
+        }
+        console.log(this.formInline.skuList, 'this.formInline.skuList')
+      })
+    },
+
+
     // 文件个数超出
     handleExceed() {
       this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
@@ -262,12 +361,10 @@ export default {
         newRow[col.prop] = "";
       });
       this.list2.push(newRow);
-      console.log(this.list2, this.columnData2, 'this.list2新增列')
     },
 
     // 2. 删除行
     delRow(index) {
-      console.log(index, '3333333333')
       this.list2.splice(index, 1);
     },
 
@@ -276,7 +373,7 @@ export default {
       let colIndex = this.columnData2.length;
       let newCol = {
         label: `规格值${colIndex}`,
-        prop: `col${colIndex}`,
+        prop: `specValue${colIndex}`,
         tag: 'input',
         type: "editItem",
         headerIcon: 'el-icon-remove-outline',
@@ -305,7 +402,7 @@ export default {
     //服务承诺复选框
     handleCheckedChange(val) {
       // this.checkedCities = val ? cityOptions : [];
-      this.form.cLdList = val.join(",");
+      this.formInline.servicePromise = val.join(",");
     },
 
   }
@@ -332,12 +429,19 @@ export default {
 ::v-deep .el-upload--picture-card {
   width: 90px;
   height: 90px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
+  .el-icon-plus {
+    position: relative;
+    top: -20px;
+  }
+
+  //display: flex;
+  //align-items: center;
+  //justify-content: center;
 }
 
 ::v-deep .el-upload-list--picture-card {
+
   .el-upload-list__item {
     width: 90px;
     height: 90px;

src/views/pointsManagement/pointsMall/index.vue

@@ -1,18 +1,20 @@
 <template>
   <div>
     <div style="padding: 15px 15px 0 15px">
-      <el-form :inline="true" ref="formInlineRef" :model="formInline" size="small" class="demo-form-inline">
+      <el-form :inline="true" ref="formInlineParentRef" :model="formInlineParent" size="small" class="demo-form-inline">
         <el-form-item label="商品名称" prop="name">
-          <el-input v-model="formInline.name" placeholder="请输入商品名称"></el-input>
+          <el-input v-model="formInlineParent.name" placeholder="请输入商品名称" clearable></el-input>
         </el-form-item>
-        <el-form-item label="商品编号" prop="name">
-          <el-input v-model="formInline.name" placeholder="请输入商品编号"></el-input>
+        <el-form-item label="商品编号" prop="productNo">
+          <el-input v-model="formInlineParent.productNo" placeholder="请输入商品编号" clearable></el-input>
         </el-form-item>
-        <el-form-item label="商品类型" prop="name">
-          <el-input v-model="formInline.name" placeholder="请输入商品类型"></el-input>
+        <el-form-item label="商品类型" prop="shopTypeValue">
+          <DictSelect v-model="formInlineParent.shopTypeValue" :dictOptions="shopType" :clearable="true"
+            placeholder="请选择" />
         </el-form-item>
-        <el-form-item label="状态" prop="region">
-          <DictSelect v-model="formInline.region" :dictOptions="navigateMenuOption" placeholder="请选择" />
+        <el-form-item label="状态" prop="status">
+          <DictSelect v-model="formInlineParent.status" :dictOptions="navigateMenuOption" :clearable="true"
+            placeholder="请选择" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="onSubmit">搜索</el-button>
@@ -23,27 +25,34 @@
     <div style="padding:0 15px;">
       <el-button style="margin-bottom: 15px;" type="primary" size="small"
         @click="handleAddOrEditOrDetails('新增')">新增商品</el-button>
-        <!-- :selection="true" -->
-      <tableCompontent ref="tableRef" :loading="loading"  :tableData="list"
-        :height="'calc(100vh - 280px)'" :columnData="columnData">
+      <!-- :selection="true" -->
+      <tableCompontent ref="tableRef" :loading="loading" :tableData="list" :height="'calc(100vh - 280px)'"
+        :columnData="columnData">
+        <template v-slot:status="row">
+          {{ row.status === 1 ? '上架' : '下架' }}
+        </template>
+        <template v-slot:sellTime="row">
+          {{ row.saleStartTime + '-' + row.saleEndTime }}
+        </template>
         <template v-slot:operation="row">
-          <el-button size="mini" type="primary" plain @click="handleEdit(row)">下架</el-button>
-          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('编辑')">编辑</el-button>
-          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('详情')">详情</el-button>
+          <el-button size="mini" type="primary" plain @click="handleUpdateStatus(row)">{{ row.status === 0 ? '上架' : '下架'
+          }}</el-button>
+          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('编辑',row.id)">编辑</el-button>
+          <el-button size="mini" type="primary" plain @click="handleAddOrEditOrDetails('详情', row.id)">详情</el-button>
         </template>
       </tableCompontent>
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current" :limit.sync="queryParams.size"
-        @pagination="getList" />
+      <pagination v-show="total > 0" :total="total" :page.sync="formInlineParent.current"
+        :limit.sync="formInlineParent.size" @pagination="getList" />
     </div>
 
     <!-- 编辑、新增、详情 -->
     <el-dialog center :title="title" width="80%" :append-to-body="true" :destroy-on-close="true"
       :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false">
       <div style="overflow-y: auto;height:80vh">
-        <AddOrEditOrDetail></AddOrEditOrDetail>
+        <AddOrEditOrDetail :shopType="shopType" ref="AddOrEditOrDetailRef" :params="params"></AddOrEditOrDetail>
         <div style="display: flex;justify-content: center;margin-top: 25px;">
           <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="dialogVisible = false">保存</el-button>
+          <el-button type="primary" @click="addOrEditOrDetailSave">保存</el-button>
         </div>
       </div>
 
@@ -57,7 +66,10 @@
 import tableCompontent from "@/components/tableCompontent/index.vue";
 import AddOrEditOrDetail from './addOrEditOrDetail.vue'
 import Tinymce from "@/components/tinymce/index.vue";
+import { productCategoryList, productUpdateStatus, productList, productGetById, productUpdate } from "@/api/points/pointsMall_api";
+
 import { Divider } from "element-ui";
+import { setTimeout } from "core-js";
 export default {
   components: {
     tableCompontent,
@@ -69,14 +81,15 @@ export default {
       title: null,
       dialogVisible: false,
       loading: false,
-      formInline: {
-        user: '',
-        region: ''
+      formInlineParent: {
+        current: 1,
+        size: 10,
+        categoryId: '',
+        name: '',
+        status: '',
+        productNo: '',
       },
-      list: [{
-        sellTime: '2026-1-29 0:00:00 - 2026-2-29 0:00:00',
-        shopName: '王小虎',
-      }],
+      list: [],
       columnData: [
         {
           prop: 'seq',
@@ -87,38 +100,39 @@ export default {
           fixed: 'left'
         },
         {
-          prop: 'shopNum',
+          prop: 'productNo',
           label: '商品编号',
           align: 'center',
           width: 180,
 
         },
         {
-          prop: 'shopName',
+          prop: 'name',
           label: '商品名称',
           align: 'center',
           width: 180,
         },
         {
-          prop: 'shopType',
+          prop: 'categoryName',
           label: '商品分类',
           align: 'center',
+          type: 'diy',
           width: 120,
         },
         {
-          prop: 'shopPrice',
+          prop: 'pricePoint',
           label: '价格（元+积分）',
           align: 'center',
           width: 120,
         },
         {
-          prop: 'shopSave',
+          prop: 'stock',
           label: '库存',
           align: 'center',
           width: 100,
         },
         {
-          prop: 'shopSell',
+          prop: 'sales',
           label: '已售',
           align: 'center',
           width: 100,
@@ -126,12 +140,14 @@ export default {
         {
           prop: 'sellTime',
           label: '销售时间',
+          type: 'diy',
           align: 'center',
         },
         {
-          prop: 'shopStatus',
+          prop: 'status',
           label: '状态',
           color: 'red',
+          type: 'diy',
           align: 'center',
           width: 100,
         },
@@ -147,16 +163,12 @@ export default {
       multipleSelection: [],
       // 总条数
       total: 2,
-      // 查询参数
-      queryParams: {
-        current: 1,
-        size: 10,
-      },
       navigateMenuOption: [
-        { label: '测试数据', value: '1' },
-        { label: '测试数据1', value: '2' },
-        { label: '测试数据2', value: '3' }
+        { label: '上架', value: 1 },
+        { label: '下架', value: 0 },
       ],
+      shopType: [],//商品类型
+      params:null
     }
   },
   created() {
@@ -165,24 +177,70 @@ export default {
   methods: {
     //搜索
     onSubmit() {
-      console.log('submit!');
+      this.getList();
     },
     //重置
     resetForm(formRefName) {
-      this.$refs.formInlineRef.resetFields();
+      this.$refs.formInlineParentRef.resetFields();
+    },
+    //上下架
+    handleUpdateStatus(row) {
+      productUpdateStatus({ id: row.id, status: row.status }).then(res => {
+        this.$message.success(res.msg);
+      })
     },
     //新增、编辑、详情商品
-    handleAddOrEditOrDetails(title) {
+    handleAddOrEditOrDetails(title, id) {
       this.title = title
-      this.dialogVisible = true
+      productGetById({ id: id }).then(res => {
+        this.params=res.data
+        setTimeout(()=>{
+          this.dialogVisible = true
+        },300)
+
+      })
+
 
     },
+    ////新增、编辑、详情商品 ----保存
+    addOrEditOrDetailSave() {
+      console.log(this.$refs.AddOrEditOrDetailRef.formInline)
+
+      this.$refs.AddOrEditOrDetailRef.validate((valid) => {
+        if (valid) {
+          //验证通过
+          let params = this.$refs.AddOrEditOrDetailRef.formInline
+          params.saleStartTime = params.dateRange[0]
+          params.saleEndTime = params.dateRange[1]
+          params.delete('dateRange')
+          console.log(params, 'params')
+          console.log(this.$refs.AddOrEditOrDetailRef, 'formInline')
+          //this.dialogVisible = false
+        }
+      });
+      return
+    },
+
     //table点击选中
     handleSelectionChange(val) {
       this.multipleSelection = val;
     },
     /** 查询列表 */
     getList() {
+      productCategoryList().then((res) => {
+        this.shopType = res.data
+        this.shopType.forEach(obj => {
+          obj.label = obj.childName
+          obj.value = obj.childId
+        })
+      });
+      productList(this.formInlineParent).then((res) => {
+        this.list = res.data.records
+        this.total = res.data.total
+        this.formInlineParent.current = res.data.current
+        this.formInlineParent.size = res.data.size
+
+      });
 
     },
   }