2024.06.13

- 重构平台活动页；

src/views/active/activeData.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="activeData">
-    <h3>实时统计</h3>
-    <div class="couponTit">活动名称：{{ activityName }}</div>
-    <div class="dataListBox">
-      <div class="dataItem">
-        <span>{{ dataInfo.orders }}</span>
-        <p>成交笔数</p>
-      </div>
-      <div class="dataItem">
-        <span>{{ dataInfo.users }}</span>
-        <p>成交人数</p>
-      </div>
-      <div class="dataItem">
-        <span>{{ dataInfo.total }}</span>
-        <p>成交金额</p>
-      </div>
-    </div>
-    <div class="tabListInfo">活动成交的商品</div>
-    <div class="tableBox">
-      <el-table
-        ref="multipleTable" v-loading="loading" :data="dataInfo.datas.list" border
-        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-        max-height="600" @selection-change="handleSelectionChange"
-      >
-        <el-table-column prop="productId" label="商品id" />
-        <el-table-column label="商品主图">
-          <template slot-scope="scope">
-            <img height="80" width="80" :src="scope.row.image" alt srcset>
-          </template>
-        </el-table-column>
-        <el-table-column prop="productName" label="商品名称" />
-        <el-table-column prop="sectionPrice" label="活动价" />
-        <el-table-column prop="stockNumber" label="库存" />
-        <el-table-column prop="valume" label="活动销量" />
-        <el-table-column prop="total" label="活动成交金额" />
-        <el-table-column prop="number" label="商品限量（件）" />
-      </el-table>
-      <div class="fenye">
-        <el-pagination
-          :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import {
-  getShopId
-} from '@/utils/auth'
-import { getDatas } from '@/api/active'
-
-export default {
-  name: 'ActiveData',
-  props: {
-    form: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      formInline: {
-        page: 1,
-        pageSize: 10,
-        signType: 2,
-        shopId: 0
-      },
-      loading: false,
-      activityName: '',
-      total: 0,
-      dataInfo: {
-        datas: {}
-      }
-    }
-  },
-  watch: {
-    form: {
-      handler(nVal, oVal) {
-        this.formInline.activityId = nVal.activityId
-        this.formInline.signId = nVal.signId
-        this.activityName = nVal.activityName
-        this.getAll(this.formInline)
-      }
-    }
-  },
-  mounted() {
-    this.formInline.shopId = parseInt(getShopId())
-    // 活动相关数据
-    this.formInline.activityId = this.form.activityId
-    this.formInline.signId = this.form.signId
-    this.activityName = this.form.activityName
-    this.getAll(this.formInline)
-  },
-  methods: {
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      this.loading = true
-      const res = await getDatas(formInline)
-      this.dataInfo = res.data
-      this.total = res.data.datas.total
-      this.loading = false
-    },
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    handleSelectionChange(val) { }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../styles/elDialog.scss");
-
-.activeData {
-	padding: 20px;
-
-	.couponTit {
-		margin: 20px 0;
-	}
-
-	.dataListBox {
-		display: flex;
-		justify-content: center;
-		margin: 30px 0;
-
-		.dataItem {
-			width: 220px;
-			height: 120px;
-			border-radius: 8px;
-			border: 1px solid #999999;
-			text-align: center;
-			margin: 0 10px;
-
-			span {
-				display: block;
-				margin-top: 35px;
-			}
-		}
-	}
-
-	.tabListInfo {
-		margin: 20px 0;
-	}
-}
-</style>

src/views/active/components/ActivityDetail.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-dialog :visible.sync="visible" v-bind="modalOptions">
+    <div class="activeData">
+      <h3>实时统计</h3>
+      <div class="couponTit">活动名称：{{ formData.activityName || '--' }}</div>
+      <div class="dataListBox">
+        <div class="dataItem">
+          <span>{{ activityInfo.orders }}</span>
+          <p>成交笔数</p>
+        </div>
+        <div class="dataItem">
+          <span>{{ activityInfo.users }}</span>
+          <p>成交人数</p>
+        </div>
+        <div class="dataItem">
+          <span>{{ activityInfo.total }}</span>
+          <p>成交金额</p>
+        </div>
+      </div>
+
+      <div class="tabListInfo">活动成交的商品</div>
+
+      <!-- 查询结果 -->
+      <div>
+        <el-table
+          v-loading="listLoading" max-height="600" element-loading-text="正在查询中。。。" :data="list"
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
+          v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
+        >
+          <el-table-column prop="productId" label="商品id" />
+          <el-table-column label="商品主图">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.image" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="商品名称" />
+          <el-table-column prop="sectionPrice" label="活动价" />
+          <el-table-column prop="stockNumber" label="库存" />
+          <el-table-column prop="valume" label="活动销量" />
+          <el-table-column prop="total" label="活动成交金额" />
+          <el-table-column prop="number" label="商品限量（件）" />
+        </el-table>
+      </div>
+
+      <div>
+        <el-pagination
+          :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+          layout="total, sizes, prev, pager, next, jumper" :total="total"
+          @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+          @current-change="(val) => ((listQuery.page = val) && getList())"
+        />
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getShopId } from '@/utils/auth'
+import { getDatas } from '@/api/active'
+
+export default {
+  name: 'ActivityDetail',
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '1000px',
+        title: '查看活动数据详情'
+      },
+      visible: false,
+      formData: {
+        activityName: ''
+      },
+      activityInfo: {
+        orders: '',
+        users: '',
+        total: ''
+      },
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 10,
+        signType: 2,
+        shopId: getShopId(),
+        activityId: '',
+        signId: ''
+      }
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    handleOpen(params = {}) {
+      this.formData = Object.assign(this.$options.data().formData, params)
+      this.listQuery.activityId = params.activityId
+      this.listQuery.signId = params.signId
+      if (params.activityId) {
+        // this.getInfo(params.activityId)
+        this.getList()
+      }
+      this.visible = true
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          xxx: res.data.xxx || ''
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getDatas(this.listQuery)
+        this.activityInfo = res.data
+        this.list = res.data.datas.list
+        this.total = res.data.datas.total
+      } finally {
+        this.listLoading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.activeData {
+	padding: 20px;
+
+	.couponTit {
+		margin: 20px 0;
+	}
+
+	.dataListBox {
+		display: flex;
+		justify-content: center;
+		margin: 30px 0;
+
+		.dataItem {
+			width: 220px;
+			height: 120px;
+			border-radius: 8px;
+			border: 1px solid #999999;
+			text-align: center;
+			margin: 0 10px;
+
+			span {
+				display: block;
+				margin-top: 35px;
+			}
+		}
+	}
+
+	.tabListInfo {
+		margin: 20px 0;
+	}
+}
+</style>

src/views/active/components/SignActivity.vue

@@ -0,0 +1,392 @@
+<template>
+  <el-dialog class="activity-dialog" :visible.sync="visible" v-bind="modalOptions">
+    <div>
+      <div style="padding: 6px;font-size: 20px;font-weight: bold;">活动列表/报名</div>
+      <div>
+        <div v-if="formData.ifBond">
+          <el-steps :active="activeStep">
+            <el-step title="选择商品" />
+            <el-step v-if="formData.ifBond" title="缴纳保证金" />
+            <el-step title="完成" />
+          </el-steps>
+        </div>
+        <div v-if="activeStep === 1">
+          <!-- 查询和其他操作 -->
+          <div class="filter-container">
+            <el-select
+              v-model="listQuery.condition" clearable size="mini" class="filter-item"
+              style="width: 200px;"
+              placeholder="请选择查找类型"
+            >
+              <el-option label="商品id" value="1" />
+              <el-option label="商品名称" value="2" />
+            </el-select>
+            <el-input
+              v-model="listQuery.search" clearable size="mini" class="filter-item"
+              style="width: 200px;margin-left: 10px;" placeholder="请输入内容"
+            />
+            <el-cascader
+              v-model="listQuery.classifyId" placeholder="请选择官方分类" :options="categoryList"
+              :props="{ checkStrictly: true, expandTrigger: 'hover', label: 'categoryName', value: 'id', children: 'childs' }"
+              clearable size="mini" class="filter-item" style="width: 200px;margin-left: 10px;"
+            />
+            <el-select
+              v-model="listQuery.groupId" size="mini" class="filter-item"
+              style="width: 200px;margin-left: 10px;" placeholder="请选择商品分组"
+            >
+              <el-option
+                v-for="(item, index) in groupList" :key="index" :label="item.groupName"
+                :value="item.shopGroupId"
+              />
+            </el-select>
+            <el-button
+              size="mini" class="filter-item" type="primary" icon="el-icon-search"
+              style="margin-left:10px;"
+              @click="handleSearch"
+            >
+              查找
+            </el-button>
+            <el-button size="mini" type="info" class="filter-item" @click="handleReset">
+              重置
+            </el-button>
+          </div>
+
+          <!-- 表格 -->
+          <div style="position: relative;padding: 0 0 10px;">
+            <div style="font-size: 20px;">
+              已选中{{ multipleSelection.length }}商品
+            </div>
+            <el-table
+              ref="multipleTable" v-loading="listLoading" :data="tableDataList" border
+              :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+              :row-key="(row) => row.productId" @selection-change="(e) => multipleSelection = e"
+            >
+              <el-table-column type="selection" :reserve-selection="true" width="55" />
+              <el-table-column prop="productId" label="商品id" />
+              <el-table-column label="商品主图" width="220" align="center" prop="image">
+                <template slot-scope="{ row }">
+                  <el-image
+                    v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:80px;height:80px;"
+                    fit="cover" :preview-src-list="[ common.seamingImgUrl(row.image) ]"
+                  />
+                  <span v-else>--</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="productName" label="商品名称" />
+              <el-table-column prop="sectionPrice" label="售价区间" />
+              <el-table-column prop="stockNumber" label="库存" />
+              <el-table-column label="商品限量（件）">
+                <template slot-scope="scope">
+                  <el-input
+                    v-model="scope.row.number" maxlength="9" value="$page"
+                    oninput="value=value.replace(/[^\d]/g,'')" @blur="handleBlurNumber(scope.row)"
+                  />
+                </template>
+              </el-table-column>
+            </el-table>
+            <div style="position: sticky;bottom: -5px;z-index: 1;padding: 10px;background-color: #eeeeee;">
+              <el-pagination
+                :current-page="listQuery.page" :page-sizes="[50, 100, 200, 500, 1000]"
+                :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
+                @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+                @current-change="(val) => ((listQuery.page = val) && getList())"
+              />
+            </div>
+          </div>
+        </div>
+        <!-- 缴纳保证金 -->
+        <div v-if="activeStep === 2">
+          <div style="text-align: center;">
+            <div style="font-size: 18px;font-weight: bold;">保 证 金：￥{{ formData.bondMoney }}</div>
+            <div style="margin: 6px 0 0;">
+              <div id="qrcode">
+                <el-image
+                  v-if="payImage" lazy :src="payImage" style="width:200px;height:200px;"
+                  fit="cover" :preview-src-list="[ payImage ]"
+                />
+              </div>
+              <div style="font-size: 16px;font-weight: bold;">扫我付钱</div>
+            </div>
+            <ul style="margin: 6px 0 0;">
+              <li>tips:</li>
+              <li
+                v-for="(item, index) in ['、缴纳保证金是为了防止活动中出现纠纷或退款时账户无钱退返的情况。', '、平台不接触保证金，会由第三方存管机构冻结。', '、活动结束后15天内将退返保证金', '、活动开始后未完成审核将自动退返保证金', '、报名失败且3天内未重新报名也会自动退返保证金']" :key="index"
+              >
+                {{ index + 1 }}{{ item }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!-- 报名成功 -->
+        <div v-if="activeStep === 3">
+          <div style="font-size: 16px;text-align: center;">
+            <div style="font-size: 18px;font-weight: bold;">报名成功</div>
+            <div v-if="infoData.signCode">成功支付￥{{ infoData.price }}</div>
+            <div v-if="infoData.signCode">
+              <span>交易类型:{{ infoData.type }}</span>
+              <span>交易流水号:{{ infoData.signCode }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="mini" @click="handleClose">返 回</el-button>
+      <el-button v-if="activeStep !== 3" type="primary" size="mini" @click="handleSubmit">报 名</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getClassify } from '@/api/commodity'
+import { getGroups, getProducts, activitySave, checkPay } from '@/api/active'
+
+export default {
+  name: 'SignActivity',
+  components: {
+  },
+  data() {
+    return {
+      modalOptions: {
+        closeOnClickModal: false,
+        width: '1120px',
+        title: ''
+      },
+      visible: false,
+      formData: {
+        type: 1,
+        activityId: '',
+        bondMoney: '',
+        ifBond: '',
+        signType: ''
+      },
+
+      groupList: [],
+      categoryList: [],
+      activeStep: 1,
+      listQuery: {
+        page: 1,
+        pageSize: 50,
+        condition: '1', // 商品模糊搜索条件 1-商品id 2-商品名称
+        search: '', // 搜索字段
+        classifyId: '', // 分类id
+        groupId: '' // 商品分组id
+      },
+      infoData: {
+        price: '',
+        type: '',
+        signCode: ''
+      },
+      total: 0,
+      tableDataList: [],
+      multipleSelection: [],
+      payImage: '',
+      boneTimer: null,
+      listLoading: false,
+      inputTableData: [] // 存储输入框有值的数据
+    }
+  },
+  methods: {
+    handleClose() {
+      this.visible = false
+    },
+    async initList() {
+      // 初始化查询商品分组
+      const res1 = await getGroups({})
+      this.groupList = res1.data
+      // 初始化查询所有分类
+      const res2 = await getClassify()
+      this.categoryList = res2.data
+    },
+    handleOpen(params = {}) {
+      this.modalOptions.title = params.activityId ? '活动报名' : '报名'
+      this.formData.activityId = params.activityId
+      this.formData.bondMoney = params.bondMoney
+      this.formData.ifBond = params.ifBond
+      this.formData.signType = params.signType
+      this.activeStep = 1
+      this.visible = true
+      this.$nextTick(() => {
+        this.inputTableData = []
+        this.$refs.multipleTable && this.$refs.multipleTable.clearSelection()
+      })
+      this.initList()
+      if (params.activityId) {
+        // this.getInfo(params.activityId)
+        this.getList()
+        // this.initSignProcess()
+      } else {
+        this.$refs.formData && this.$refs.formData.resetFields()
+      }
+    },
+    async getInfo(id) {
+      const loading = this.$loading({ text: '加载中' })
+      try {
+        const res = await xxx({ id })
+        this.formData = Object.assign(this.$options.data().formData, res.data, {
+          xxx: res.data.xxx || ''
+        })
+        this.$nextTick(() => {
+          this.$refs.formData && this.$refs.formData.validate()
+        })
+      } finally {
+        loading.close()
+      }
+    },
+    handleSubmit() {
+      this.$confirm('请问您是否需要报名参加此次活动?', '提示', {
+        confirmButtonText: '确定参加',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        if ((this.activeStep === 2) && !this.infoData.signCode) return this.$message.error('请支付保证金')
+        if (!this.multipleSelection.length) return this.$message.error('请选择商品')
+        if (this.activeStep === 1) {
+          const tempArray = []
+          let limitFlag = false
+          this.multipleSelection.forEach((element) => {
+            const item = {}
+            item.productId = element.productId
+            if (element.number) {
+              if (element.number > element.stockNumber) {
+                this.$message.warning('商品限量不能大于库存数')
+                limitFlag = true
+              } else {
+                item.number = parseInt(element.number)
+              }
+            }
+            tempArray.push(item)
+          })
+          if (limitFlag) return false
+          const loading = this.$loading({ text: '提交中，请稍候……' })
+          try {
+            if (this.formData.ifBond) {
+              const res = await activitySave({
+                activityId: this.formData.activityId,
+                signType: this.formData.signType,
+                bondMoney: this.formData.bondMoney,
+                products: tempArray
+              })
+              this.activeStep = 2
+              this.payImage = res.data.url
+              this.boneTimer = setInterval(this.getResult, 3000)
+            } else {
+              await activitySave({
+                activityId: this.formData.activityId,
+                signType: this.formData.signType,
+                products: tempArray
+              })
+              this.activeStep = 3
+            }
+            loading.close()
+            this.$message({ message: `操作成功!`, type: 'success' })
+            this.$emit('success')
+            this.visible = false
+          } catch (e) {
+            loading.close()
+          } finally {
+            loading.close()
+          }
+        }
+      })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '取消成功'
+          })
+        })
+    },
+    // 查询付款结果
+    async getResult() {
+      const res = await checkPay({
+        activityId: this.formData.activityId
+      })
+      if (res.data.code === 'SUCCESS') {
+        this.activeStep = 3
+        this.infoData = res.data
+        clearInterval(this.boneTimer)
+      }
+    },
+
+    // async initSignProcess() {
+    //   const res = await getActivitySignDetail({ activityId: this.formData.activityId })
+    //   if (res.code === '') {
+    //     if (res.data) {
+    //       this.activeStep = 2
+    //     }
+    //   }
+    // },
+    handleBlurNumber(data) {
+      const index = this.inputTableData.findIndex((item) => item.productId === data.productId)
+      if (index === -1) {
+        this.inputTableData.push(data)
+      } else {
+        this.inputTableData[index].number = data.number
+      }
+    },
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleReset() {
+      this.listQuery = { page: 1, pageSize: 10, condition: '1', search: '', classifyId: '', groupId: '' }
+      this.getList()
+    },
+    // 初始化查询所有数据
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await getProducts({
+          ...this.listQuery,
+          classifyId: Array.isArray(this.listQuery.classifyId) && this.listQuery.classifyId.length ? this.listQuery.classifyId[this.listQuery.classifyId.length - 1] : ''
+        })
+        res.data.list.forEach((item) => {
+          // 处理切换分页输入框内容保留
+          if (this.inputTableData.length > 0) {
+            const index = this.inputTableData.findIndex((cItem) => cItem.productId === item.productId)
+            if (index !== -1) {
+              item.number = this.inputTableData[index].number
+            }
+          }
+          // 处理库存
+          item.number = item.stockNumber
+        })
+        this.tableDataList = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
+      }
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.filter-container {
+	.filter-item {
+		display: inline-block;
+		vertical-align: middle;
+		margin-bottom: 10px;
+	}
+}
+
+.small-padding {
+	.cell {
+		padding-left: 5px;
+		padding-right: 5px;
+	}
+}
+
+.fixed-width {
+	.el-button--mini {
+		padding: 7px 10px;
+	}
+}
+
+.activity-dialog {
+	::v-deep .el-dialog__body {
+		padding: 30px 20px 0;
+	}
+}
+</style>

src/views/active/getActive.vue

@@ -1,645 +0,0 @@
-<template>
-  <!-- 卡片 -->
-  <el-card class="activityCardPage">
-    <div slot="header">
-      <span>活动列表/报名</span>
-      <el-button v-if="active !== 3" type="primary" size="small" class="cardNext" @click="open">
-        报名
-      </el-button>
-      <el-button v-if="active === 3" type="primary" size="small" class="cardNext" @click="cancel">
-        返回
-      </el-button>
-    </div>
-    <div>
-      <!-- 步骤条  -->
-      <div v-if="form.ifBond" class="stepsLIst">
-        <el-steps :active="active">
-          <el-step title="选择商品" />
-          <el-step v-if="form.ifBond" title="缴纳保证金" />
-          <el-step title="完成" />
-        </el-steps>
-      </div>
-      <div v-if="active === 1">
-        <!-- 顶部搜索 -->
-        <nav class="formSearch">
-          <el-input v-model="formInline.search" maxlength="20" class="searchInput" placeholder="请输入内容">
-            <el-select slot="prepend" v-model="formInline.condition" style="width:130px" placeholder="请选择">
-              <el-option label="商品id" value="1" />
-              <el-option label="商品名称" value="2" />
-            </el-select>
-          </el-input>
-          <div class="searchItem">
-            <span>官方分类：</span>
-            <el-cascader
-              v-model="formInline.classifyId" maxlength="20" :options="categoryList" clearable
-              :props="{
-                checkStrictly: true,
-                expandTrigger: 'hover',
-                label: 'categoryName',
-                value: 'id',
-                children: 'childs'
-              }"
-            />
-          </div>
-          <div class="searchItem">
-            <span>商品分组：</span>
-            <el-select v-model="formInline.groupId" class="type" placeholder="请选择商品分组">
-              <el-option
-                v-for="(item, index) in groupLists" :key="index" :label="item.groupName"
-                :value="item.shopGroupId"
-              />
-            </el-select>
-          </div>
-          <el-button type="primary" plain @click="search">
-            查询
-          </el-button>
-          <el-button type="primary" plain @click="clear">
-            重置
-          </el-button>
-        </nav>
-        <!-- <div class="formSearch">
-          <el-form :inline="true" :model="formInline" class="demo-form-inline">
-          <el-form-item>
-          <div>
-          <el-input v-model="formInline.search" placeholder="请输入内容">
-          <el-select
-          slot="prepend"
-          v-model="formInline.condition"
-          style="width:130px"
-          placeholder="请选择"
-          >
-          <el-option label="商品id" value="1" />
-          <el-option label="商品名称" value="2" />
-          </el-select>
-          </el-input>
-          </div>
-          </el-form-item>
-          <el-form-item label="官方分类">
-          <el-cascader
-          v-model="formInline.classifyId"
-          :options="categoryList"
-          clearable
-          :props="{
-          checkStrictly: true,
-          expandTrigger: 'hover',
-          label:'categoryName',
-          value:'id',
-          children:'childs'
-          }"
-          />
-          </el-form-item>
-          <el-form-item label="商品分组">
-          <el-select v-model="formInline.groupId" placeholder="请选择商品分组">
-          <el-option
-          v-for="(item,index) in groupLists"
-          :key="index"
-          :label="item.groupName"
-          :value="item.shopGroupId"
-          />
-          </el-select>
-          </el-form-item>
-          <el-form-item>
-          <el-button type="primary" plain @click="search">查询</el-button>
-          <el-button type="primary" plain @click="clear">重置</el-button>
-          </el-form-item>
-          </el-form>
-          </div> -->
-        <!-- 表格 -->
-        <div class="tableBox">
-          <div class="text">
-            已选中
-            <span>{{ multipleSelection.length }}</span>商品
-          </div>
-          <el-table
-            ref="multipleTable" v-loading="loading" :data="tableData" border
-            :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-            :row-key="getRowKeys" height="600" @selection-change="handleSelectionChange"
-          >
-            <el-table-column type="selection" :reserve-selection="true" width="55" />
-            <el-table-column prop="productId" label="商品id" />
-            <el-table-column label="商品主图">
-              <template slot-scope="scope">
-                <img height="80" width="80" :src="scope.row.image" alt srcset>
-              </template>
-            </el-table-column>
-            <el-table-column prop="productName" label="商品名称" />
-            <el-table-column prop="sectionPrice" label="售价区间" />
-            <el-table-column prop="stockNumber" label="库存" />
-            <el-table-column label="商品限量（件）">
-              <template slot-scope="scope">
-                <el-input
-                  v-model="scope.row.number" maxlength="9" value="$page"
-                  oninput="value=value.replace(/[^\d]/g,'')" @blur="BlurNumber(scope.row)"
-                />
-              </template>
-            </el-table-column>
-          </el-table>
-          <div class="fenye">
-            <el-pagination
-              :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-              @current-change="handleCurrentChange"
-            />
-          </div>
-        </div>
-      </div>
-      <!-- 缴纳保证金 -->
-      <div v-if="active === 2" class="pay_page">
-        <div class="pay_content">
-          <p>
-            <span>保 证 金:</span>
-            ¥{{ form.bondMoney }}
-          </p>
-          <!-- <div class="pay_type">
-            <span>支付方式:</span>
-            微信
-            </div> -->
-          <div class="pay_img">
-            <div id="qrcode" class="img">
-              <img :src="image" alt srcset>
-            </div>
-            <p>扫我付钱</p>
-          </div>
-          <ul>
-            <li>tips:</li>
-            <li v-for="(item, index) in list" :key="index">
-              {{ index + 1 }}
-              {{ item }}
-            </li>
-          </ul>
-        </div>
-      </div>
-      <!-- 报名成功 -->
-      <div v-if="active === 3" class="finish_page">
-        <div class="pay_content">
-          <div class="finish_pay" />
-          <p>报名成功</p>
-          <p v-if="infoData.signCode !== ''">成功支付¥{{ infoData.price }}</p>
-          <p v-if="infoData.signCode !== ''">
-            <span>交易类型:{{ infoData.type }}</span>
-            <span>交易流水号:{{ infoData.signCode }}</span>
-          </p>
-          <div class="btn">
-            <el-button type="primary" @click="cancel">
-              返回活动列表
-            </el-button>
-          </div>
-          <ul v-if="form.signCode !== ''">
-            <li>tips:</li>
-            <li v-for="(item, index) in list" :key="index">
-              {{ index + 1 }}
-              {{ item }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { getClassify } from '@/api/commodity'
-import { getGroups, getProducts, activitySave, checkPay } from '@/api/active'
-
-export default {
-  props: {
-    form: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      // 新增
-      getRowKeys(row) {
-        return row.productId
-      },
-      formInline: {
-        condition: '1', // 商品模糊搜索条件 1-商品id 2-商品名称
-        search: '', // 搜索字段
-        classifyId: '', // 分类id
-        groupId: '', // 商品分组id
-        page: 1,
-        pageSize: 10
-      },
-      infoData: {
-        signCode: ''
-      },
-      total: 1,
-      tableData: [],
-      groupLists: [],
-      active: 1,
-      categoryList: [],
-      giveMoney: false,
-      multipleSelection: [],
-      image: '',
-      list: [
-        '、缴纳保证金是为了防止活动中出现纠纷或退款时账户无钱退返的情况。',
-        '、平台不接触保证金，会由第三方存管机构冻结。',
-        '、活动结束后15天内将退返保证金',
-        '、活动开始后未完成审核将自动退返保证金',
-        '、报名失败且3天内未重新报名也会自动退返保证金'
-      ],
-      timer: null,
-      loading: false,
-      inputTableData: [] // 存储输入框有值的数据
-    }
-  },
-  // computed: {
-  //   info() {
-  //     return this.$route.params
-  //   }
-  // },
-  watch: {
-    form: {
-      handler(nVal, oVal) {
-        console.log('watch', nVal)
-        if (Object.keys(nVal).length > 0) {
-          this.getGroup()
-          this.getAll(this.formInline)
-          this.queryAllCategory()
-        }
-      },
-      deep: true
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.timer)
-  },
-  mounted() {
-    this.getGroup()
-    this.getAll(this.formInline)
-    this.queryAllCategory()
-    // this.initSignProcess()
-  },
-  methods: {
-    BlurNumber(data) {
-      const index = this.inputTableData.findIndex((item) => item.productId === data.productId)
-      // console.log(index,'index')
-      if (index === -1) {
-        this.inputTableData.push(data)
-      } else {
-        this.inputTableData[index].number = data.number
-      }
-    },
-    async initSignProcess() {
-      /* const res = await getActivitySignDetail({
-				activityId: this.form.activityId
-			})
-			if (res.code === '') {
-				console.dir(res.data)
-				if (res.data) {
-					this.active = 2
-				}
-			} */
-    },
-    handleSelectionChange(val) {
-      console.log(val, 'val')
-      this.multipleSelection = val
-    },
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    open() {
-        this.$confirm('请问您是否需要报名参加此次活动?', '提示', {
-          confirmButtonText: '确定参加',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.next()
-        }).catch(() => {
-          this.$message({
-            type: 'info',
-            message: '取消成功'
-          });          
-        });
-      },
-    async next() {
-      if (this.active === 2) {
-        if (this.infoData.signCode === '') {
-          this.$message.error('请支付保证金')
-          return false
-        }
-      }
-      if (this.multipleSelection.length === 0) {
-        this.$message.error('请选择商品')
-        return
-      }
-      if (this.active === 1) {
-        const arr = []
-        var limitFlag = true
-        this.multipleSelection.forEach((element) => {
-          var item = {}
-          item.productId = element.productId
-          if (element.number) {
-            if (element.number > element.stockNumber) {
-              this.$message.warning('商品限量不能大于库存数')
-              limitFlag = false
-            } else {
-              item.number = parseInt(element.number)
-            }
-          }
-          arr.push(item)
-        })
-        if (!limitFlag) {
-          return false
-        }
-        if (this.form.ifBond) {
-          const res = await activitySave({
-            activityId: this.form.activityId,
-            signType: this.form.signType,
-            bondMoney: this.form.bondMoney,
-            products: arr
-          })
-          if (res.code === '') {
-            this.image = res.data.url
-            this.timer = setInterval(this.getResult, 3000)
-          } else {
-            return
-          }
-        } else {
-          const res = await activitySave({
-            activityId: this.form.activityId,
-            signType: this.form.signType,
-            products: arr
-          })
-          if (res.code === '') {
-            this.active = 2
-          } else {
-            return
-          }
-        }
-      }
-      if (this.active++ > 2) this.active = 1
-    },
-    // 查询
-    search() {
-      if (this.formInline.classifyId.length === 0) {
-        this.formInline.classifyId = ''
-      }
-      this.total = 1
-      this.formInline.page = 1
-      this.getAll(this.formInline)
-    },
-    // 返回活动列表
-    cancel() {
-      this.active = 1
-      this.$emit('cancel')
-    },
-    // 查询付款结果
-    async getResult() {
-      const res = await checkPay({
-        activityId: this.form.activityId
-      })
-      if (res.data.code === 'SUCCESS') {
-        this.active = 3
-        this.infoData = res.data
-        clearInterval(this.timer)
-      }
-    },
-    // 清除
-    clear() {
-      this.formInline = {
-        condition: '1', // 商品模糊搜索条件 1-商品id 2-商品名称
-        search: '', // 搜索字段
-        classifyId: '', // 分类id
-        groupId: '', // 商品分组id
-        page: 1,
-        pageSize: 10
-      }
-      this.getAll(this.formInline)
-    },
-    // 初始化查询商品分组
-    async getGroup() {
-      const res = await getGroups({})
-      if (res.code === '') {
-        this.groupLists = res.data
-      }
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      this.loading = true
-      this.formInline.classifyId =
-        this.formInline.classifyId[2] ||
-        this.formInline.classifyId[1] ||
-        this.formInline.classifyId[0] ||
-        this.formInline.classifyId
-      const res = await getProducts(formInline)
-      const dataList = res.data.list
-      // 处理切换分页输入框内容保留
-      if (this.inputTableData.length > 0) {
-        dataList.forEach((item) => {
-          const index = this.inputTableData.findIndex((cItem) => cItem.productId === item.productId)
-          if (index !== -1) {
-            item.number = this.inputTableData[index].number
-          }
-        })
-      }
-      // 处理库存
-      dataList.forEach((item) => {
-        item.number = item.stockNumber
-      })
-      this.tableData = dataList
-      this.total = res.data.total
-      this.loading = false
-    },
-    // 初始化查询所有分类
-    async queryAllCategory() {
-      const res = await getClassify()
-      this.categoryList = res.data
-    },
-    // 重置table和input内容
-    reset() {
-      this.inputTableData = []
-      this.$refs.multipleTable.clearSelection()
-    }
-  }
-}
-</script>
-
-<style
-  scoped
-  lang="scss"
->
-@import url("../../styles/elDialog.scss");
-
-.activityCardPage {
-	font-size: 24px;
-
-	.cardNext {
-		float: right;
-		background: #3a68f2;
-		border-radius: 4px;
-	}
-
-	.formSearch {
-		height: 40px;
-		margin-bottom: 12px;
-		display: flex;
-
-		.searchInput {
-			max-width: 350px;
-			margin-right: 20px;
-
-			::v-deep.el-input__inner {
-				width: 100%;
-			}
-		}
-
-		.searchItem {
-			margin-right: 20px;
-			display: flex;
-			line-height: 40px;
-
-			span {
-				min-width: 80px;
-				font-size: 16px;
-			}
-
-			.type {
-				max-width: 150px;
-			}
-		}
-	}
-
-	.text {
-		margin-bottom: 20px;
-
-		span {
-			color: #ff7a12;
-			margin-right: 5px;
-		}
-	}
-
-	.stepsLIst {
-		width: 70%;
-		margin: 0 auto;
-		margin-bottom: 30px;
-		margin-top: 20px;
-	}
-
-	.pay_page {
-		height: 100%;
-		width: 100%;
-
-		.pay_content {
-			width: 550px;
-			margin: 0 auto;
-			box-sizing: border-box;
-			padding: 40px 0;
-
-			span {
-				margin-right: 10px;
-			}
-		}
-
-		.pay_img {
-			width: 200px;
-			margin: 20px auto 30px;
-
-			.img {
-				width: 200px;
-				height: 200px;
-				border: 1px #dedede solid;
-
-				img {
-					width: 100%;
-					height: 100%;
-				}
-			}
-
-			p {
-				text-align: center;
-				color: #666666;
-				font-size: 16px;
-				margin-top: 20px;
-			}
-		}
-
-		ul {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-
-			li {
-				font-size: 16px;
-				color: #666666;
-				line-height: 25px;
-			}
-		}
-	}
-
-	.finish_page {
-		height: 100%;
-		width: 100%;
-		box-shadow: 1px 5px 20px 0px rgba(52, 52, 52, 0.15);
-
-		.pay_content {
-			width: 550px;
-			margin: 0 auto;
-			box-sizing: border-box;
-			padding: 40px 0;
-
-			.finish_pay {
-				background: url("../../assets/images/finish_pay.png") center no-repeat;
-				width: 110px;
-				height: 110px;
-				margin: 30px auto;
-			}
-
-			p {
-
-				&:nth-of-type(1),
-				&:nth-of-type(2) {
-					font-size: 16px;
-					color: #666666;
-					text-align: center;
-					margin: 0;
-				}
-
-				&:nth-of-type(1) {
-					font-size: 24px;
-					font-weight: 600;
-				}
-
-				&:nth-of-type(2) {
-					margin: 20px 0;
-				}
-
-				&:nth-of-type(3) {
-					color: #343434;
-					font-size: 16px;
-
-					span {
-						&:nth-child(2) {
-							float: right;
-						}
-					}
-				}
-			}
-
-			.btn {
-				margin: 40px auto 20px;
-				width: 128px;
-			}
-		}
-
-		ul {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-
-			li {
-				font-size: 16px;
-				color: #666666;
-				line-height: 25px;
-			}
-		}
-	}
-}
-</style>

src/views/active/index.vue

@@ -1,49 +1,61 @@
 <template>
-  <div class="commonActivityPage">
-    <div class="acTab">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
-        <el-tab-pane label="全部" name="1" />
-        <el-tab-pane label="我参与的" name="2" />
-      </el-tabs>
-      <el-radio-group v-model="formInline.signType" @change="signTypeChange">
+  <div class="app-container">
+    <!-- 查询和其他操作 -->
+    <div class="filter-container">
+      <el-radio-group v-model="listQuery.type" class="filter-item" size="mini" @input="handleSearch">
+        <el-radio-button :label="1">全部</el-radio-button>
+        <el-radio-button :label="2">我参与的</el-radio-button>
+      </el-radio-group>
+      <el-radio-group
+        v-model="listQuery.signType" class="filter-item" style="margin-left:10px;" size="mini"
+        @input="handleSearch"
+      >
         <el-radio-button :label="1">平台优惠券</el-radio-button>
         <el-radio-button :label="2">平台秒杀</el-radio-button>
         <el-radio-button :label="3">平台限时折扣</el-radio-button>
         <el-radio-button :label="5">消费金活动</el-radio-button>
+        <el-radio-button :label="6">组合活动</el-radio-button>
       </el-radio-group>
+      <el-input
+        v-model="listQuery.activityName" clearable size="mini" class="filter-item"
+        maxlength="15"
+        style="width: 200px;margin-left:10px;" placeholder="请输入活动名称"
+      />
+      <el-select
+        v-model="listQuery.state" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择活动状态"
+      >
+        <el-option label="报名未开始" value="0" />
+        <el-option label="报名进行中" value="1" />
+        <el-option label="活动待开始" value="2" />
+        <el-option label="活动进行中" value="3" />
+        <el-option label="活动已结束" value="4" />
+      </el-select>
+      <el-select
+        v-model="listQuery.state" clearable size="mini" class="filter-item"
+        style="width: 200px;margin-left: 10px;" placeholder="请选择审核状态"
+      >
+        <el-option label="待审核" value="0" />
+        <el-option label="报名成功" value="1" />
+        <el-option label="报名失败" value="2" />
+      </el-select>
+      <el-button
+        size="mini" class="filter-item" type="primary" icon="el-icon-search"
+        style="margin-left:10px;"
+        @click="handleSearch"
+      >
+        查找
+      </el-button>
+      <el-button size="mini" type="info" class="filter-item" @click="handleReset">
+        重置
+      </el-button>
     </div>
-    <!-- 搜索 -->
-    <FixedNav class="formSearch" :height="260">
-      <div class="searchItem">
-        <span>活动名称：</span>
-        <el-input v-model="formInline.activityName" maxlength="15" placeholder="请输入活动名称" />
-      </div>
-      <div class="searchItem">
-        <span>活动状态：</span>
-        <el-select v-model="formInline.state" placeholder="请选择活动状态" clearable>
-          <el-option label="报名未开始" value="0" />
-          <el-option label="报名进行中" value="1" />
-          <el-option label="活动待开始" value="2" />
-          <el-option label="活动进行中" value="3" />
-          <el-option label="活动已结束" value="4" />
-        </el-select>
-      </div>
-      <div class="searchItem">
-        <span>审核状态：</span>
-        <el-select v-model="formInline.examineState" placeholder="请选择审核状态" clearable>
-          <el-option label="待审核" value="0" />
-          <el-option label="报名成功" value="1" />
-          <el-option label="报名失败" value="2" />
-        </el-select>
-      </div>
-      <el-button type="primary" plain @click="search">查询</el-button>
-      <el-button plain @click="clear">重置</el-button>
-    </FixedNav>
-    <!-- 表格 -->
-    <div class="tableBox">
+
+    <!-- 查询结果 -->
+    <div v-tableHeight>
       <el-table
-        ref="multipleTable" :data="tableData" border
-        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
+        v-loading="listLoading" height="100%" element-loading-text="正在查询中。。。" :data="list"
+        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
       >
         <el-table-column prop="activityName" label="活动名称" show-overflow-tooltip />
         <el-table-column prop="bondMoney" label="活动保证金" show-overflow-tooltip />
@@ -74,196 +86,137 @@
             <span v-if="scope.row.signState == null">未报名</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" fixed="right" show-overflow-tooltip width="220">
-          <template slot-scope="scope">
-            <div class="btnList">
-              <el-button v-if="scope.row.operation === 1" type="primary" @click="getTotal(scope.row, 1)">立即报名</el-button>
-              <el-button
-                v-if="scope.row.operation === 2" type="primary" disabled
-                @click="getTotal(scope.row, 1)"
-              >
-                立即报名
-              </el-button>
-              <el-button v-if="scope.row.operation === 4" type="primary" @click="getTotal(scope.row, 1)">重新报名</el-button>
-              <el-button v-if="scope.row.operation === 5" type="primary" @click="getTotal(scope.row, 1)">继续报名</el-button>
-              <el-button v-if="scope.row.operation === 3" @click="goActiveData(scope.row)">活动数据</el-button>
-            </div>
+        <el-table-column align="center" label="操作" width="260" fixed="right" class-name="small-padding fixed-width">
+          <template slot-scope="{ row }">
+            <el-button
+              v-if="row.operation === 1" type="primary" size="mini"
+              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+            >
+              立即报名
+            </el-button>
+            <el-button
+              v-if="row.operation === 2" type="primary" size="mini" disabled
+              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+            >
+              立即报名
+            </el-button>
+            <el-button
+              v-if="row.operation === 3" type="warning" size="mini"
+              @click="$refs.ActivityDetail && $refs.ActivityDetail.handleOpen(row)"
+            >
+              活动数据
+            </el-button>
+            <el-button
+              v-if="row.operation === 4" type="primary" size="mini"
+              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+            >
+              重新报名
+            </el-button>
+            <el-button
+              v-if="row.operation === 5" type="primary" size="mini"
+              @click="$refs.SignActivity && $refs.SignActivity.handleOpen(row)"
+            >
+              继续报名
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <div class="fenye">
-        <el-pagination
-          :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
-      </div>
     </div>
 
-    <el-dialog
-      title="活动报名" :visible.sync="signVisible" width="80%" center
-      :close-on-click-modal="false"
-      @close="closeDialog"
-    >
-      <SignActivity ref="signActivity" :form="form" @cancel="goList" />
-    </el-dialog>
+    <div>
+      <el-pagination
+        :current-page="listQuery.page" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="(val) => ((listQuery.pageSize = val) && getList())"
+        @current-change="(val) => ((listQuery.page = val) && getList())"
+      />
+    </div>
 
-    <el-dialog title="活动报名" :visible.sync="detailVisible" width="80%" center :close-on-click-modal="false">
-      <DataActivity :form="form" @cancel="detailVisible = false" />
-    </el-dialog>
+    <!-- 活动报名 -->
+    <SignActivity ref="SignActivity" @success="getList" />
+    <!-- 查看活动详情 -->
+    <ActivityDetail ref="ActivityDetail" @success="getList" />
   </div>
 </template>
 
 <script>
-import FixedNav from '@/components/FixedNav/index.vue'
-import SignActivity from '@/views/active/getActive.vue'
-import DataActivity from '@/views/active/activeData.vue'
+import SignActivity from './components/SignActivity'
+import ActivityDetail from './components/ActivityDetail'
 
 import { activityGetAll } from '@/api/active'
 export default {
+  name: 'Active',
   components: {
-    FixedNav,
     SignActivity,
-    DataActivity
+    ActivityDetail
   },
   data() {
     return {
-      activeName: '1',
-      formInline: {
+      list: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        pageSize: 10,
         type: 1, // 查询类型 1-全部 2-我参与的
         activityName: '', // 活动名称
         state: '',
         examineState: '',
-        page: 1,
-        pageSize: 10,
         signType: 1
-      },
-      total: 1,
-      tableData: [],
-      signVisible: false,
-      form: {},
-      detailVisible: false,
-      active: 1
+      }
     }
   },
-  mounted() {
-    this.getAll(this.formInline)
+  created() {
+    this.getList()
   },
   methods: {
-    closeDialog() {
-      console.log(this.$refs.signActivity, 'this.$refs.signActivity')
-      this.$refs.signActivity.reset()
-    },
-    goList() {
-      console.log('122121212')
-      this.signVisible = false
-      this.getAll(this.formInline)
-    },
-    //
-    signTypeChange() {
-      this.getAll(this.formInline)
-    },
-    handleSizeChange(val) {
-      this.formInline.pageSize = val
-      this.getAll(this.formInline)
-    },
-    handleCurrentChange(val) {
-      this.formInline.page = val
-      this.getAll(this.formInline)
-    },
-    // 活动切换
-    handleClick(tab, event) {
-      this.formInline.type = parseInt(tab.name)
-      if (tab.name === '2') {
-        this.getAll(this.formInline)
-      } else {
-        this.getAll(this.formInline)
+    async getList() {
+      this.listLoading = true
+      try {
+        const res = await activityGetAll(this.listQuery)
+        this.list = res.data.list
+        this.total = res.data.total
+      } finally {
+        this.listLoading = false
       }
     },
-    // 查询
-    search() {
-      this.total = 1
-      this.formInline.page = 1
-      this.getAll(this.formInline)
+    handleSearch() {
+      this.listQuery.page = 1
+      this.getList()
     },
-    // 清除
-    clear() {
-      this.activeName = '1'
-      this.formInline = {
-        activityName: '', // 活动名称
-        state: '',
-        examineState: '',
-        page: 1,
-        pageSize: 10
-      }
-      this.getAll(this.formInline)
-    },
-    // 立即报名
-    getTotal(row, index) {
-      this.active = 1
-      this.signVisible = true
-      this.form = {
-        activityId: row.activityId,
-        bondMoney: row.bondMoney,
-        type: index,
-        ifBond: row.ifBond,
-        signType: row.signType
-      }
-    },
-    // 活动数据
-    goActiveData(row) {
-      this.form = {
-        activityName: row.activityName,
-        activityId: row.activityId,
-        signId: row.signId
-      }
-      this.detailVisible = true
-    },
-    // 初始化查询所有数据
-    async getAll(formInline) {
-      const res = await activityGetAll(formInline)
-      this.tableData = res.data.list
-      this.total = res.data.total
-    },
-    // 查看
-    seeMore() { },
-    // 编辑
-    edit() { },
-    // 删除
-    del() { }
+    handleReset() {
+      this.listQuery = { page: 1, pageSize: 10, type: 1, activityName: '', state: '', examineState: '', signType: 1 }
+      this.getList()
+    }
   }
 }
 </script>
 
-<style lang='scss' scoped>
-//@import url(); 引入公共css类
-@import url("../../styles/elDialog.scss");
-
-.commonActivityPage {
-	// padding: 20px;
-	$bothSides: 20px;
+<style lang="scss" scoped>
+.app-container {
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
 
-	.acTab {
-		margin: 0 $bothSides;
+	.filter-container {
+		.filter-item {
+			display: inline-block;
+			vertical-align: middle;
+			margin-bottom: 10px;
+		}
 	}
 
-	.formSearch {
-		padding: 12px $bothSides;
-		display: flex;
-
-		.searchItem {
-			margin-right: 20px;
-			display: flex;
-			line-height: 40px;
-
-			span {
-				min-width: 80px;
-			}
+	.small-padding {
+		.cell {
+			padding-left: 5px;
+			padding-right: 5px;
 		}
 	}
 
-	.tableBox {
-		margin: 10px $bothSides;
+	.fixed-width {
+		.el-button--mini {
+			padding: 7px 10px;
+		}
 	}
 }
 </style>

src/views/commodity/commodityList/components/EditModal.vue

@@ -152,7 +152,7 @@
             <el-table-column label="产品主图" width="220" align="center" prop="image">
               <template slot-scope="{ row }">
                 <el-image
-                  v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:80px; height:80px"
+                  v-if="row.image" lazy :src="common.seamingImgUrl(row.image)" style="width:80px;height:80px;"
                   fit="cover" :preview-src-list="[ common.seamingImgUrl(row.image) ]"
                 />
                 <span v-else>--</span>
@@ -169,7 +169,7 @@
               @size-change="(val) => ((listQuery.pageSize = val) && initList())"
               @current-change="(val) => ((listQuery.page = val) && initList())"
             />
-            <span slot="footer">
+            <span>
               <el-button type="primary" @click="handleSaveIdList">确 定</el-button>
               <el-button @click="isShowManualAdd = false">取 消</el-button>
             </span>

src/views/selectionCenter/productSelectionList/components/DetailModal.vue

@@ -46,7 +46,7 @@
         <div v-if="formData.images && formData.images.length">
           <el-image
             v-for="(item, index) in formData.images.map(i => i.imgPath)" :key="index"
-            :src="common.seamingImgUrl(item)" style="width:80px; height:80px; margin-right: 10px;" fit="cover"
+            :src="common.seamingImgUrl(item)" style="width:80px;height:80px;margin-right: 10px;" fit="cover"
             :preview-src-list="formData.images.map(i => common.seamingImgUrl(i.imgPath))"
           />
         </div>

vue.config.js

@@ -41,8 +41,8 @@ module.exports = {
     proxy: {
       '/businessapi': {
         // target: 'http://192.168.0.91:9104',
-        // target: 'https://nsbusinessapitest.tuanfengkeji.cn',
-        target: 'https://nsbusinessapi.tuanfengkeji.cn',
+        target: 'https://nsbusinessapitest.tuanfengkeji.cn',
+        // target: 'https://nsbusinessapi.tuanfengkeji.cn',
         changeOrigin: true,
         pathRewrite: {
           '^/businessapi': ''