首页配置~

src/api/activity/home/home.js

@@ -0,0 +1,458 @@
+import request from '@/utils/request'
+/**
+ * 获取商品列表(过滤)
+ * @param {*} id 专区ID
+ * @param {*} productId 商品ID
+ * @param {*} shopName 供应商名称
+ * @param {*} productName 商品名称
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function selectProductList(params) {
+  return request({
+    url: '/page/selectProductList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取推荐商品列表(过滤)
+ * @param {*} id 专区ID
+ * @param {*} productId 商品ID
+ * @param {*} shopName 供应商名称
+ * @param {*} productName 商品名称
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function recommendProductList(params) {
+  return request({
+    url: '/page/select/recommendProductList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取首页专区列表
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function getPageZoneList(params) {
+  return request({
+    url: '/page/zoneList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 首页专区保存
+ * @param {*} id 专区Id
+ * @param {*} floorTitle 专区标题
+ * @param {*} floorDetail 专区描述
+ * @param {*} sort 排序
+ * @param {*} wwwEnabledStatus Pc端状态 0停用 1启用
+ * @param {*} crmEnabledStatus CRM端状态 0停用 1启用
+ * @param {*} createBy 操作人
+ * @returns
+ */
+export function savePageZone(data) {
+  return request({
+    url: '/page/saveZone',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 删除专区
+ * @param {*} id 专区Id
+ * @returns
+ */
+export function delPageZone(params) {
+  return request({
+    url: '/page/delZone/',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 更新专区状态
+ * @param {*} id 专区Id
+ * @param {*} status 0停用 1启用
+ * @param {*} type  0www 1小程序
+ * @returns
+ */
+export function updateZoneStatus(params) {
+  return request({
+    url: '/page/updateEnabledStatus',
+    method: 'get',
+    params
+  })
+}
+/**
+/**
+ * 更新专区排序
+ * @param {*} id 专区Id
+ * @param {*} sort 排序值
+ * @returns
+ */
+export function updateZoneSort(params) {
+  return request({
+    url: '/page/updateSort',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 获取专区商品列表
+ * @param {*} id 专区Id
+ * @param {*} productId 商品Id
+ * @param {*} shopName 供应商名称
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function getZoneProductList(params) {
+  return request({
+    url: '/page/zoneProductList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 删除专区商品
+ * @param {*} id 专区Id
+ * @param {*} ids 商品Id逗号拼接
+ * @returns
+ */
+export function delZoneProduct(params) {
+  return request({
+    url: '/page/delZoneProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 保存专区商品
+ * @param {*} id 专区Id
+ * @param {*} ids 商品Id逗号拼接
+ * @returns
+ */
+export function addZoneProduct(params) {
+  return request({
+    url: '/page/addZoneProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专区商品排序
+ * @param {*} id 专区Id
+ * @param {*} productId 商品Id
+ * @param {*} sort 排序值
+ * @returns
+ */
+export function updateProductSort(params) {
+  return request({
+    url: '/page/updateProductSort',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取专区轮播图列表
+ * @param {*} id 专区Id
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function getZoneImageList(params) {
+  return request({
+    url: '/page/zoneImageList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专区轮播图保存
+ * @param {*} zoneId 专区Id
+ * @param {*} imageId 轮播图Id
+ * @param {*} title 专区标题
+ * @param {*} image WWW图片
+ * @param {*} crmImage 小程序图片
+ * @param {*} link WWW跳转链接
+ * @param {*} crmLink 小程序跳转链接
+ * @param {*} wwwEnabledStatus Pc端状态 0停用 1启用
+ * @param {*} crmEnabledStatus 小程序端状态 0停用 1启用
+ * @param {*} sort 排序
+ * @returns
+ */
+export function saveZoneImage(data) {
+  return request({
+    url: '/page/saveZoneImage',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 删除专区轮播
+ * @param {*} imageId 轮播图Id
+ * @returns
+ */
+export function delZoneImage(params) {
+  return request({
+    url: '/page/delZoneImage/',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专区轮播图排序
+ * @param {*} imageId 专区Id
+ * @param {*} sort 排序值
+ * @returns
+ */
+export function updateImageSort(params) {
+  return request({
+    url: '/page/updateImageSort',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专区轮播图状态更新
+ * @param {*} imageId 专区Id
+ * @param {*} status 0停用 1启用
+ * @param {*} type  0www 1小程序
+ * @returns
+ */
+export function updateImageStatus(params) {
+  return request({
+    url: '/page/updateImageStatus',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专区轮播图编辑回显
+ * @param {*} imageId 轮播Id
+ * @returns
+ */
+export function getZoneImageById(params) {
+  return request({
+    url: '/page/zoneImageForm',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取首页推荐商品列表
+ * @param {*} productId 商品Id
+ * @param {*} shopName 供应商名称
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function getRecommendList(params) {
+  return request({
+    url: '/page/recommendList',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 删除推荐商品
+ * @param {*} ids 商品Id逗号拼接
+ * @returns
+ */
+export function delRecommendProduct(params) {
+  return request({
+    url: '/page/recommendDel',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 保存推荐商品
+ * @param {*} ids 商品Id逗号拼接
+ * @returns
+ */
+export function addRecommendProduct(params) {
+  return request({
+    url: '/page/addRecommendProduct',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专区商品排序
+ * @param {*} productId 商品Id
+ * @param {*} sort 排序值
+ * @returns
+ */
+export function updateRecommendSort(params) {
+  return request({
+    url: '/page/recommendSort',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取首页专属广告图列表
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function getTopAdvertisement(params) {
+  return request({
+    url: '/page/topAdvertisement/list',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专属广告图保存
+ * @param {*} id 广告图Id
+ * @param {*} title PC标题
+ * @param {*} crmTitle 小程序标题
+ * @param {*} image WWW图片
+ * @param {*} crmImage 小程序图片
+ * @param {*} link WWW跳转链接
+ * @param {*} crmLink 小程序跳转链接
+ * @param {*} wwwEnabledStatus Pc端状态 0停用 1启用
+ * @param {*} crmEnabledStatus 小程序端状态 0停用 1启用
+ * @param {*} sort 排序
+ * @returns
+ */
+export function saveTopAdvertisement(data) {
+  return request({
+    url: '/page/saveTopAdvertisement',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 删除专属广告图
+ * @param {*} id 广告图Id
+ * @returns
+ */
+export function topAdvertisementDel(params) {
+  return request({
+    url: '/page/topAdvertisementDel',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专属广告图状态更新
+ * @param {*} id 广告图Id
+ * @param {*} status 0停用 1启用
+ * @param {*} type  0www 1小程序
+ * @returns
+ */
+export function updateTopStatus(params) {
+  return request({
+    url: '/page/updateTopStatus',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 专属广告图编辑回显
+ * @param {*} id 广告图Id
+ * @returns
+ */
+export function getTopAdvertisementForm(params) {
+  return request({
+    url: '/page/topAdvertisement/form',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取首页小广告图列表
+ * @param {*} pageNum 页码
+ * @param {*} pageSize 条数
+ * @returns
+ */
+export function getAdvertisement(params) {
+  return request({
+    url: '/page/advertisement/list',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 小广告图保存
+ * @param {*} id 广告图Id
+ * @param {*} title PC标题
+ * @param {*} crmTitle 小程序标题
+ * @param {*} image WWW图片
+ * @param {*} crmImage 小程序图片
+ * @param {*} link WWW跳转链接
+ * @param {*} crmLink 小程序跳转链接
+ * @param {*} wwwEnabledStatus Pc端状态 0停用 1启用
+ * @param {*} crmEnabledStatus 小程序端状态 0停用 1启用
+ * @param {*} sort 排序
+ * @returns
+ */
+export function saveAdvertisement(data) {
+  return request({
+    url: '/page/saveAdvertisement',
+    method: 'post',
+    data: data
+  })
+}
+/**
+ * 删除小广告图
+ * @param {*} id 广告图Id
+ * @returns
+ */
+export function advertisementDel(params) {
+  return request({
+    url: '/page/advertisementDel',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 小广告图排序
+ * @param {*} id 小广告图Id
+ * @param {*} sort 排序值
+ * @returns
+ */
+export function updateAdvertisementSort(params) {
+  return request({
+    url: '/page/advertisement/sort',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 小广告图状态更新
+ * @param {*} id 广告图Id
+ * @param {*} status 0停用 1启用
+ * @param {*} type  0www 1小程序
+ * @returns
+ */
+export function updateAdvertiStatus(params) {
+  return request({
+    url: '/page/updateAdvertiStatus',
+    method: 'get',
+    params
+  })
+}
+/**
+ * 小广告图编辑回显
+ * @param {*} id 广告图Id
+ * @returns
+ */
+export function getAdvertisementForm(params) {
+  return request({
+    url: '/page/advertisement/form',
+    method: 'get',
+    params
+  })
+}

src/api/common/common.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+// 获取供应商列表
+export function fetchFindShop(params) {
+  return request({
+    url: '/svip/member/findShopList',
+    method: 'get',
+    params
+  })
+}
+// 获取所有商品信息列表
+export function fetchProductList(params) {
+  return request({
+    url: '/svip/member/findProductDialogList',
+    method: 'get',
+    params
+  })
+}
+// 获取所有机构
+export function fetchClubList(params) {
+  return request({
+    url: '/svip/member/findClubList',
+    method: 'get',
+    params
+  })
+}

src/router/modules/activity.js

@@ -10,6 +10,69 @@ const keywordLibraryRouter = {
   name: 'OperateActivity', // name必须和后台配置一致，不然匹配不到
   meta: { title: '运营专区' },
   children: [
+    {
+      path: 'zones',
+      name: 'ZonesMenu',
+      redirect: '/operate/zones',
+      alwaysShow: true,
+      component: () => import('@/views/index'),
+      meta: { title: '首页配置', useDefault: true },
+      children: [
+        {
+          path: 'zones-list',
+          name: 'ZonesList',
+          component: () => import('@/views/operate/home/zones-list'),
+          meta: { title: '专区管理' }
+        },
+        {
+          path: 'zones-goods',
+          name: 'ZonesGoods',
+          component: () => import('@/views/operate/home/zones-goods'),
+          meta: { title: '专区商品管理' },
+          hidden: true
+        },
+        {
+          path: 'zones-image',
+          name: 'ZonesImage',
+          component: () => import('@/views/operate/home/zones-image'),
+          meta: { title: '专区轮播图管理' },
+          hidden: true
+        },
+        {
+          path: 'zones-image-edit',
+          name: 'ZonesImageEdit',
+          component: () => import('@/views/operate/home/zones-image-edit'),
+          meta: { title: '专区轮播图添加' },
+          hidden: true
+        },
+        {
+          path: 'recom-goods',
+          name: 'RecomGoods',
+          component: () => import('@/views/operate/home/recom-goods'),
+          meta: { title: '商品推荐' }
+        },
+        {
+          path: 'exclusive-image',
+          name: 'ExclusiveImage',
+          component: () => import('@/views/operate/home/exclusive-image'),
+          meta: { title: '广告配置' }
+        },
+        {
+          path: 'exclusive-img-edit',
+          name: 'ExclusiveImgEdit',
+          component: () => import('@/views/operate/home/exclusive-img-edit'),
+          meta: { title: '专属广告添加/编辑' },
+          hidden: true
+        },
+        {
+          path: 'exclusive-small-edit',
+          name: 'ExclusiveSmallEdit',
+          component: () => import('@/views/operate/home/exclusive-small-edit'),
+          meta: { title: '小广告添加/编辑' },
+          hidden: true
+        }
+      ]
+    },
     {
       path: 'activity',
       name: 'ActivityMenu',

src/views/operate/home/components/exclusive-img.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container" style="padding-bottom: 0;">
+      <div class="filter-control">
+        <span>网站状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已启用" />
+          <el-option :value="1" label="已停用" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>小程序状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已启用" />
+          <el-option :value="1" label="已停用" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="handleoOerate('add')"> 添加专属广告图 </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="500">
+      <el-table-column prop="title" label="轮播标题" align="center" width="200" />
+      <el-table-column prop="image" label="网站广告图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.image" alt="" style="width: 132px; height: 60px;" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="crmImage" label="小程序广告图" align="center">
+        <template slot-scope="{ row }">
+          <img v-if="row.crmImage" :src="row.crmImage" alt="" style="width: 132px; height: 60px;" />
+          <span v-else>--</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="wwwEnabledStatus" label="网站状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.wwwEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.wwwEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="crmEnabledStatus" label="小程序状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.crmEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.crmEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="220">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleoOerate('edit', row)">
+            编辑
+          </el-button>
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDelete(row)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getTopAdvertisement"
+    />
+  </div>
+</template>
+
+<script>
+
+import { getTopAdvertisement, topAdvertisementDel, updateTopStatus } from '@/api/activity/home/home'
+export default {
+  name: 'ExclusiveImg',
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0,
+      timesValue: [],
+      logoForm: {
+        id: '',
+        title: '',
+        logo: ''
+      },
+      rules: {
+        title: [{ required: true, message: '请输入广告图标题', trigger: 'blur' }],
+        status: [{ required: true, message: '请设置统计状态', trigger: 'blur' }],
+        logo: [{ required: true, message: '请上传弹窗图片', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    getToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  watch: {
+    timesValue: {
+      handler() {
+        this.getList()
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取专属广告图列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.getTopAdvertisement()
+    },
+
+    // 获取专属广告图列表
+    async getTopAdvertisement() {
+      try {
+        this.isLoading = true
+        const res = await getTopAdvertisement(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 添加专属广告图
+    handleoOerate(type, row) {
+      if (type === 'add') {
+        this.$router.push({
+          path: '/operate/zones/exclusive-img-edit',
+          query: { type: type }
+        })
+      } else {
+        this.$router.push({
+          path: '/operate/zones/exclusive-img-edit',
+          query: { id: row.id, type: type }
+        })
+      }
+    },
+    // 操作启用停用广告图
+    handleShangeStatus(id, status, type) {
+      let confirmTxt = ''
+      let paramsStatus
+      if (status === 1) {
+        confirmTxt = '确定停用该广告图？'
+        paramsStatus = 0
+      } else {
+        confirmTxt = '确定启用该广告图？'
+        paramsStatus = 1
+      }
+      this.$confirm(confirmTxt)
+        .then((_) => {
+          this.updateTopStatus(id, paramsStatus, type)
+        })
+        .catch(() => {
+          this.$notify.info({ title: '用户取消操作~', message: '' })
+        })
+    },
+    // 停用启用广告图
+    async updateTopStatus(id, paramsStatus, type) {
+      try {
+        await updateTopStatus({ id: id, status: paramsStatus, type: type })
+        this.$notify.success({ title: '更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 操作删除广告图
+    async handleDelete(row) {
+      try {
+        await this.$confirm('确定删除该广告图吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.topAdvertisementDel(row)
+      } catch (error) {
+        this.$notify.info('用户取消操作~')
+      }
+    },
+    // 调用删除广告图
+    async topAdvertisementDel(row) {
+      try {
+        await topAdvertisementDel({ id: row.id })
+        this.$notify.success({ title: '删除成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/views/operate/home/components/exclusive-small-img.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container" style="padding-bottom: 0;">
+      <!--<div class="filter-control">
+        <span>广告图状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已启用" />
+          <el-option :value="1" label="已停用" />
+        </el-select>
+      </div>-->
+      <!--<div class="filter-control">
+        <span>小程序状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已启用" />
+          <el-option :value="1" label="已停用" />
+        </el-select>
+      </div>-->
+      <div class="filter-control">
+        <!--<el-button type="primary" @click="getList"> 查询 </el-button>-->
+        <el-button type="primary" @click="handleoOerate('add')"> 添加小广告图 </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="500">
+      <el-table-column prop="id" label="ID" align="center" width="50" />
+      <el-table-column prop="title" label="轮播标题" align="center" />
+      <el-table-column prop="image" label="广告图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.image" alt="" style="width: 132px; height: 60px;" />
+        </template>
+      </el-table-column>
+      <!--<el-table-column prop="crmImage" label="小程序广告图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.crmImage" alt="" style="width: 132px; height: 60px;" />
+        </template>
+      </el-table-column>-->
+      <!--<el-table-column prop="wwwEnabledStatus" label="广告图状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.wwwEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.wwwEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>-->
+      <!--<el-table-column prop="crmEnabledStatus" label="小程序状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.crmEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.crmEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>-->
+      <el-table-column label="排序" width="70" align="center">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="handleOnInputBlur(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="220">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleoOerate('edit', row)">
+            编辑
+          </el-button>
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDelete(row)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[10]"
+      :page-size="10"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getAdvertisement"
+    />
+  </div>
+</template>
+
+<script>
+
+import { getAdvertisement, advertisementDel, updateAdvertisementSort, updateAdvertiStatus } from '@/api/activity/home/home'
+export default {
+  name: 'ExclusiveSmallImg',
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      floorTitle: this.$route.query.floorTitle,
+      listQuery: {
+        id: this.$route.query.id,
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0,
+      timesValue: []
+    }
+  },
+  computed: {},
+  watch: {
+    timesValue: {
+      handler() {
+        this.getList()
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取小广告图列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.getAdvertisement()
+    },
+
+    // 获取小广告图列表
+    async getAdvertisement() {
+      try {
+        this.isLoading = true
+        const res = await getAdvertisement(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 添加小广告图
+    handleoOerate(type, row) {
+      if (type === 'add') {
+        this.$router.push({
+          path: '/operate/zones/exclusive-small-edit',
+          query: { type: type }
+        })
+      } else {
+        this.$router.push({
+          path: '/operate/zones/exclusive-small-edit',
+          query: { id: row.id, type: type }
+        })
+      }
+    },
+    // 操作启用停用广告图
+    handleShangeStatus(id, status, type) {
+      let confirmTxt = ''
+      let paramsStatus
+      if (status === 1) {
+        confirmTxt = '确定停用该广告图？'
+        paramsStatus = 0
+      } else {
+        confirmTxt = '确定启用该广告图？'
+        paramsStatus = 1
+      }
+      this.$confirm(confirmTxt)
+        .then((_) => {
+          this.updateAdvertiStatus(id, paramsStatus, type)
+        })
+        .catch(() => {
+          this.$notify.info({ title: '用户取消操作~', message: '' })
+        })
+    },
+    // 停用启用广告图
+    async updateAdvertiStatus(id, paramsStatus, type) {
+      try {
+        await updateAdvertiStatus({ id: id, status: paramsStatus, type: type })
+        this.$notify.success({ title: '更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 操作删除广告图
+    async handleDelete(row) {
+      try {
+        await this.$confirm('确定删除该广告图吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.advertisementDel(row)
+      } catch (error) {
+        this.$notify.info('用户取消操作~')
+      }
+    },
+    // 调用删除广告图
+    async advertisementDel(row) {
+      try {
+        await advertisementDel({ id: row.id })
+        this.$notify.success({ title: '删除成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 广告图排序
+    async handleOnInputBlur(row) {
+      try {
+        await updateAdvertisementSort({ id: row.id, sort: row.sort })
+        this.$notify.success({ title: '排序更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 机构跳转
+    handleClubHrefLink(row) {
+      return (
+        process.env.VUE_APP_ADMIN_URL +
+        `/a/user/jumpLink/toOldAdmin?type=1&clubId=${row.clubId}&clubName=${row.corporateName}`
+      )
+    }
+  }
+}
+</script>
+
+<style>
+.tags-sms-span{
+  font-weight: bold;
+  font-size: 16px !important;
+}
+</style>

src/views/operate/home/components/goods-dialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-dialog title="添加商品" :visible.sync="visible" width="1200px" :close-on-click-modal="false" :show-close="false" top="8vh">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>商品ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          @keyup.enter.native="getList"
+          @input="e => (listQuery.productId= checkedInput(e,1))"
+        />
+      </div>
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="商品名称"
+          clearable
+          @keyup.enter.native="getList"
+          @input="e => (listQuery.name= checkedInput(e,2))"
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.shopName"
+          placeholder="供应商名称"
+          clearable
+          style="width:160px;"
+          @keyup.enter.native="getList"
+          @input="e => (listQuery.shopName= checkedInput(e,2))"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+      </div>
+    </div>
+    <el-table
+      ref="table"
+      v-loading="isLoading"
+      :data="list"
+      height="500px"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="商品ID" prop="productId" align="center" width="100" />
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="120">
+        <template slot-scope="{ row }">
+          <el-popover v-if="row.mainImage" placement="top-start" title="" width="120" trigger="hover">
+            <img :src="row.mainImage" alt="" style="width: 80px; height: 80px" />
+            <img slot="reference" :src="row.mainImage" alt="" style="width: 40px; height: 40px" />
+          </el-popover>
+          <span v-else>---</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" prop="name" align="center" />
+      <el-table-column label="供应商" prop="shopName" align="center" />
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20, 30]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="selectProductList"
+    />
+    <div slot="footer">
+      <el-button @click="handleCanle"> 取 消 </el-button>
+      <el-button type="primary" :disabled="disabled" @click="handleConfirm"> 确 定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { selectProductList } from '@/api/activity/home/home'
+
+export default {
+  name: 'GoodsDialog',
+  filters: {
+    NumFormat(value) {
+      // 处理金额
+      return Number(value).toFixed(2)
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      listQuery: {
+        id: this.$route.query.id, // 专区ID
+        productId: '', // 商品id
+        name: '', // 商品名称
+        shopName: '', // 供应商名称
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      shopsRadio: null,
+      isLoading: true
+    }
+  },
+  computed: {
+    disabled() {
+      return this.shopsRadio === null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取所有供应商列表
+    async getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.selectProductList()
+    },
+    // 获取所有商品
+    async selectProductList() {
+      try {
+        const res = await selectProductList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 选择商品
+    handleSelectionChange(row) {
+      this.shopsRadio = row
+      console.log('row', row)
+    },
+    // 确认选择商品
+    async handleConfirm() {
+      try {
+        await this.$confirm('确定添加所选商品吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.$emit('confirm', this.shopsRadio)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    },
+    // 已选择的禁用勾选框
+    selectable(row) {
+      if (row.flag) {
+        return true
+      } else {
+        return false
+      }
+    },
+    checkedInput(event, type) {
+      let pattern = ''
+      switch (type) {
+        case 1:
+          pattern = /[^\d]/g
+          break
+        case 2:
+          pattern = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
+          break
+      }
+      return event.replace(pattern, '')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/views/operate/home/components/goods-recom-dialog.vue

@@ -0,0 +1,176 @@
+<template>
+  <el-dialog title="添加商品" :visible.sync="visible" width="1200px" :close-on-click-modal="false" :show-close="false" top="8vh">
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>商品ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          @keyup.enter.native="getList"
+          @input="e => (listQuery.productId= checkedInput(e,1))"
+        />
+      </div>
+      <div class="filter-control">
+        <span>商品名称:</span>
+        <el-input
+          v-model="listQuery.name"
+          placeholder="商品名称"
+          clearable
+          @keyup.enter.native="getList"
+          @input="e => (listQuery.name= checkedInput(e,2))"
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.shopName"
+          placeholder="供应商名称"
+          clearable
+          style="width:160px;"
+          @keyup.enter.native="getList"
+          @input="e => (listQuery.shopName= checkedInput(e,2))"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+      </div>
+    </div>
+    <el-table
+      ref="table"
+      v-loading="isLoading"
+      :data="list"
+      height="500px"
+      border
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
+      <el-table-column label="商品ID" prop="productId" align="center" width="100" />
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="120">
+        <template slot-scope="{ row }">
+          <el-popover v-if="row.mainImage" placement="top-start" title="" width="120" trigger="hover">
+            <img :src="row.mainImage" alt="" style="width: 80px; height: 80px" />
+            <img slot="reference" :src="row.mainImage" alt="" style="width: 40px; height: 40px" />
+          </el-popover>
+          <span v-else>---</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名称" prop="name" align="center" />
+      <el-table-column label="供应商" prop="shopName" align="center" />
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20, 30]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="recommendProductList"
+    />
+    <div slot="footer">
+      <el-button @click="handleCanle"> 取 消 </el-button>
+      <el-button type="primary" :disabled="disabled" @click="handleConfirm"> 确 定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { recommendProductList } from '@/api/activity/home/home'
+
+export default {
+  name: 'GoodsDialog',
+  filters: {
+    NumFormat(value) {
+      // 处理金额
+      return Number(value).toFixed(2)
+    }
+  },
+  data() {
+    return {
+      visible: true,
+      listQuery: {
+        id: this.$route.query.id, // 专区ID
+        productId: '', // 商品id
+        name: '', // 商品名称
+        shopName: '', // 供应商名称
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      shopsRadio: null,
+      isLoading: true
+    }
+  },
+  computed: {
+    disabled() {
+      return this.shopsRadio === null
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取所有供应商列表
+    async getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.recommendProductList()
+    },
+    // 获取所有商品
+    async recommendProductList() {
+      try {
+        const res = await recommendProductList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 选择商品
+    handleSelectionChange(row) {
+      this.shopsRadio = row
+      console.log('row', row)
+    },
+    // 确认选择商品
+    async handleConfirm() {
+      try {
+        await this.$confirm('确定添加所选商品吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.$emit('confirm', this.shopsRadio)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    handleCanle() {
+      // 取消弹窗
+      this.$emit('cancel')
+    },
+    // 已选择的禁用勾选框
+    selectable(row) {
+      if (row.flag) {
+        return true
+      } else {
+        return false
+      }
+    },
+    checkedInput(event, type) {
+      let pattern = ''
+      switch (type) {
+        case 1:
+          pattern = /[^\d]/g
+          break
+        case 2:
+          pattern = /[^u4E00-u9FA5|d|a-zA-Z|rns,.?!，。？！…—&$=()-+/*{}[]]|s/g
+          break
+      }
+      return event.replace(pattern, '')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped></style>

src/views/operate/home/exclusive-image.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+      <el-tab-pane label="专属广告" name="first" />
+      <el-tab-pane label="小广告位" name="second" />
+      <!-- 列表 -->
+      <template v-if="activeName === 'first'">
+        <exclusive-img />
+      </template>
+      <template v-if="activeName === 'second'">
+        <exclusive-small-img />
+      </template>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import ExclusiveImg from './components/exclusive-img'
+import ExclusiveSmallImg from './components/exclusive-small-img'
+export default {
+  name: 'ExclusiveImage',
+  components: {
+    ExclusiveImg,
+    ExclusiveSmallImg
+  },
+  filters: {},
+  data() {
+    return {
+      activeName: 'first',
+      isLoading: true,
+      list: [],
+      total: 0
+    }
+  },
+  computed: {},
+  created() {
+    if (this.$route.query.activeName === 'second') {
+      this.activeName = 'second'
+    } else {
+      this.activeName = 'first'
+    }
+  },
+  mounted() {},
+  methods: {
+    // tab切换
+    handleClick(tab, event) {}
+  }
+}
+</script>
+
+<style></style>

src/views/operate/home/exclusive-img-edit.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="app-container" style="width: 800px; margin: 0 auto">
+    <el-form ref="bannerForm" :model="form" label-width="130px">
+      <el-form-item label="广告图标题:" prop="title" :rules="rules.title">
+        <el-input v-model="form.title" placeholder="请输入广告图标题" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="PC端图片:" prop="image" :rules="rules.image" style="margin-bottom: 40px">
+        <div class="form-el-upload" style="width: 264px; height: 120px">
+          <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :headers="getToken"
+            :show-file-list="false"
+            :on-success="handleSuccessPcImage"
+            :before-upload="beforeUpload"
+          >
+            <div v-loading="loadPcImageLoading" class="avatar" style="width: 264px; height: 120px; display: block">
+              <img
+                v-if="form.image"
+                :src="form.image"
+                style="width: 264px; height: 120px; display: block"
+                @error="reloadImage"
+                @load="loadPcImageSucess"
+              />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                style="width: 264px; height: 120x; line-height: 120px"
+              ></i>
+            </div>
+          </el-upload>
+          <p class="uploader-tips">注：请上传尺寸1080*540(px)的图片。</p>
+        </div>
+      </el-form-item>
+      <el-form-item label="PC端链接:" prop="link" :rules="rules.link">
+        <el-input v-model="form.link" placeholder="请输入PC端链接" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="小程序端标题:" prop="crmTitle">
+        <el-input v-model="form.crmTitle" placeholder="请输入小程序端标题" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="小程序端图片:" prop="crmImage" style="margin-bottom: 40px">
+        <div class="form-el-upload" style="width: 264px; height: 120px">
+          <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :headers="getToken"
+            :show-file-list="false"
+            :on-success="handleSuccessAppImage"
+            :before-upload="beforeUpload"
+          >
+            <div v-loading="loadImgLoading" class="avatar" style="width: 264px; height: 120px; display: block">
+              <img
+                v-if="form.crmImage"
+                :src="form.crmImage"
+                style="width: 264px; height: 120px; display: block"
+                @error="reloadImage"
+                @load="loadSucess"
+              />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                style="width: 264px; height: 120px; line-height: 120px"
+              ></i>
+            </div>
+          </el-upload>
+          <p class="uploader-tips">注：请上传尺寸528*240(px)的图片。</p>
+        </div>
+      </el-form-item>
+      <el-form-item label="小程序端链接:" prop="crmLink">
+        <el-input v-model="form.crmLink" placeholder="请输入小程序端链接" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="PC端状态" prop="wwwEnabledStatus">
+        <el-select v-model="form.wwwEnabledStatus" placeholder="请选择网站状态">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="小程序状态" prop="crmEnabledStatus">
+        <el-select v-model="form.crmEnabledStatus" placeholder="请选择小程序状态">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="el-dialog__footer" style="text-align: center">
+      <el-button type="primary" @click="onSubmit('bannerForm')"> 保存 </el-button>
+      <el-button plain @click="backToList"> 返回 </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getTopAdvertisementForm, saveTopAdvertisement } from '@/api/activity/home/home'
+
+export default {
+  name: 'ExclusiveImgEdit',
+  data() {
+    const defaultForm = () => {
+      return {
+        id: '',
+        title: '', // PC端标题
+        crmTitle: '', // 小程序标题
+        image: '', // PC广告图
+        crmImage: '', // 小程序广告图
+        link: '', // PC链接链接
+        crmLink: '', // 小程序链接
+        wwwEnabledStatus: 1, // 停启用状态 1 启用 0 停用
+        crmEnabledStatus: 0 // 停启用状态 1 启用 0 停用
+      }
+    }
+    return {
+      form: defaultForm(),
+      editType: 'add',
+      loadImgLoading: false,
+      loadPcImageLoading: false,
+      rules: {
+        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+        image: [{ required: true, message: '请上传PC广告图', trigger: 'blur' }],
+        crmImage: [{ required: true, message: '请上传小程序广告图', trigger: 'blur' }],
+        link: [{ required: true, message: '请输入PC端链接', trigger: 'blur' }],
+        crmLink: [{ required: true, message: '请输入小程序链接', trigger: 'blur' }],
+        wwwEnabledStatus: [{ required: true, message: '请选择PC端状态', trigger: 'blur' }],
+        crmEnabledStatus: [{ required: true, message: '请选择小程序状态', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    getToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  created() {
+    this.editType = this.$route.query.type || 'edit'
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.getTopAdvertisementForm(this.$route.query.id)
+    }
+  },
+  methods: {
+    async getTopAdvertisementForm(id) {
+      // 获取轮播详情
+      try {
+        const res = await getTopAdvertisementForm({ id: id })
+        this.form = { ...this.form, ...res.data }
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否提交保存数据？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            console.log('form', this.form)
+            this.saveTopAdvertisement(this.form)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    async saveTopAdvertisement(params) {
+      // 保存
+      await saveTopAdvertisement(params)
+      this.$notify.success({ title: '保存成功~', message: '' })
+      setTimeout(() => {
+        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+          this.$nextTick(() => {
+            this.$router.replace({
+              path: '/operate/zones/exclusive-image',
+              query: { activeName: 'first' }
+            })
+          })
+        })
+      }, 1000)
+    },
+    // 取消选择商品
+    handleCancel() {
+      this.shopDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 上传PC广告图事件
+    handleSuccessPcImage(response, file) {
+      this.loadPcImageLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.image = response.data
+        }, 1000 * 2)
+      })
+    },
+    // 上传小程序广告图事件
+    handleSuccessAppImage(response, file) {
+      this.loadImgLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.crmImage = response.data
+        }, 1000 * 2)
+      })
+    },
+    // 对上传图片的大小、格式进行限制
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
+      if (!isLt5M) {
+        this.$message.error('请上传5MB以内的图片!')
+      }
+      return (isJPG || isJPG2 || isPNG) && isLt5M
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadPcImageSucess() {
+      this.loadPcImageLoading = false
+    },
+    loadSucess() {
+      this.loadImgLoading = false
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/operate/zones/exclusive-image',
+            query: { activeName: 'first' }
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 30px;
+  color: #999999;
+}
+.el-form-item__label {
+  text-align: right !important;
+}
+.el-upload__tip {
+  line-height: 20px;
+  color: red;
+  text-align: left;
+}
+.span_tip {
+  font-size: 12px;
+  color: red;
+  margin-left: 5px;
+}
+.filter-item-temp {
+  width: 100px;
+}
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 280px;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
+</style>

src/views/operate/home/exclusive-small-edit.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="app-container" style="width: 800px; margin: 0 auto">
+    <el-form ref="bannerForm" :model="form" label-width="130px">
+      <el-form-item label="标题:" prop="title" :rules="rules.title">
+        <el-input v-model="form.title" placeholder="请输入标题" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="广告图片:" prop="image" :rules="rules.image" style="margin-bottom: 40px">
+        <div class="form-el-upload" style="width: 236px; height: 117px">
+          <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :headers="getToken"
+            :show-file-list="false"
+            :on-success="handleSuccessPcImage"
+            :before-upload="beforeUpload"
+          >
+            <div v-loading="loadPcImageLoading" class="avatar" style="width: 236px; height: 117px; display: block">
+              <img
+                v-if="form.image"
+                :src="form.image"
+                style="width: 236px; height: 117px; display: block"
+                @error="reloadImage"
+                @load="loadPcImageSucess"
+              />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                style="width: 236px; height: 117px; line-height: 117px"
+              ></i>
+            </div>
+          </el-upload>
+          <p class="uploader-tips">注：请上传尺寸232*117(px)的图片。</p>
+        </div>
+      </el-form-item>
+      <el-form-item label="广告链接:" prop="link" :rules="rules.link">
+        <el-input v-model="form.link" placeholder="请输入广告链接" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <!--<el-form-item label="小程序端标题:" prop="crmTitle">
+        <el-input v-model="form.crmTitle" placeholder="请输入小程序端标题" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="小程序端图片:" prop="crmImage" style="margin-bottom: 40px">
+        <div class="form-el-upload" style="width: 264px; height: 120px">
+          <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :headers="getToken"
+            :show-file-list="false"
+            :on-success="handleSuccessAppImage"
+            :before-upload="beforeUpload"
+          >
+            <div v-loading="loadImgLoading" class="avatar" style="width: 264px; height: 120px; display: block">
+              <img
+                v-if="form.crmImage"
+                :src="form.crmImage"
+                style="width: 264px; height: 120px; display: block"
+                @error="reloadImage"
+                @load="loadSucess"
+              />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                style="width: 264px; height: 120px; line-height: 120px"
+              ></i>
+            </div>
+          </el-upload>
+          <p class="uploader-tips">注：请尽量上传270*135(px)尺寸的图片。</p>
+        </div>
+      </el-form-item>
+      <el-form-item label="小程序端链接:" prop="crmLink">
+        <el-input v-model="form.crmLink" placeholder="请输入小程序端链接" maxlength="200" style="width: 600px" />
+      </el-form-item>-->
+      <el-form-item label="广告排序:" prop="sort">
+        <el-input v-model="form.sort" type="number" placeholder="请设置广告排序" maxlength="3" style="width: 218px" />
+      </el-form-item>
+      <!--<el-form-item label="广告状态" prop="wwwEnabledStatus">
+        <el-select v-model="form.wwwEnabledStatus" placeholder="请选择广告状态">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>-->
+      <!--<el-form-item label="小程序状态" prop="crmEnabledStatus">
+        <el-select v-model="form.crmEnabledStatus" placeholder="请选择小程序状态">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>-->
+    </el-form>
+    <div class="el-dialog__footer" style="text-align: center">
+      <el-button type="primary" @click="onSubmit('bannerForm')"> 保存 </el-button>
+      <el-button plain @click="backToList"> 返回 </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAdvertisementForm, saveAdvertisement } from '@/api/activity/home/home'
+
+export default {
+  name: 'ExclusiveSmallEdit',
+  data() {
+    const defaultForm = () => {
+      return {
+        id: '',
+        title: '', // PC端标题
+        // crmTitle: '', // 小程序标题
+        image: '', // PC广告图
+        // crmImage: '', // 小程序广告图
+        link: '', // PC链接链接
+        sort: 0,
+        // crmLink: '', // 小程序链接
+        wwwEnabledStatus: 1 // 停启用状态 1 启用 0 停用
+        // crmEnabledStatus: 0// 停启用状态 1 启用 0 停用
+      }
+    }
+    return {
+      form: defaultForm(),
+      editType: 'add',
+      loadImgLoading: false,
+      loadPcImageLoading: false,
+      rules: {
+        title: [{ required: true, message: '请输入轮播标题', trigger: 'blur' }],
+        image: [{ required: true, message: '请上传PC广告图', trigger: 'blur' }],
+        crmImage: [{ required: true, message: '请上传小程序广告图', trigger: 'blur' }],
+        shops: [{ required: true, type: 'array', message: '请添加供应商', trigger: ['change'] }],
+        link: [{ required: true, message: '请输入广告链接', trigger: 'blur' }],
+        crmLink: [{ required: true, message: '请输入小程序链接', trigger: 'blur' }],
+        wwwEnabledStatus: [{ required: true, message: '请选择PC端状态', trigger: 'blur' }],
+        crmEnabledStatus: [{ required: true, message: '请选择小程序状态', trigger: 'blur' }],
+        sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    getToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  created() {
+    this.editType = this.$route.query.type || 'edit'
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.getAdvertisementForm(this.$route.query.id)
+    }
+  },
+  methods: {
+    async getAdvertisementForm(id) {
+      // 获取轮播详情
+      try {
+        const res = await getAdvertisementForm({ id: id })
+        this.form = { ...this.form, ...res.data }
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否提交保存数据？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            console.log('form', this.form)
+            this.saveAdvertisement(this.form)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    async saveAdvertisement(params) {
+      // 保存
+      await saveAdvertisement(params)
+      this.$notify.success({ title: '保存成功~', message: '' })
+      setTimeout(() => {
+        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+          this.$nextTick(() => {
+            this.$router.replace({
+              path: '/operate/zones/exclusive-image',
+              query: { activeName: 'second' }
+            })
+          })
+        })
+      }, 1000)
+    },
+    // 取消选择商品
+    handleCancel() {
+      this.shopDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 上传PC广告图事件
+    handleSuccessPcImage(response, file) {
+      this.loadPcImageLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.image = response.data
+        }, 1000 * 2)
+      })
+    },
+    // 上传小程序广告图事件
+    handleSuccessAppImage(response, file) {
+      this.loadImgLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.crmImage = response.data
+        }, 1000 * 2)
+      })
+    },
+    // 对上传图片的大小、格式进行限制
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
+      if (!isLt5M) {
+        this.$message.error('请上传5MB以内的图片!')
+      }
+      return (isJPG || isJPG2 || isPNG) && isLt5M
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadPcImageSucess() {
+      this.loadPcImageLoading = false
+    },
+    loadSucess() {
+      this.loadImgLoading = false
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/operate/zones/exclusive-image',
+            query: { activeName: 'second' }
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 30px;
+  color: #999999;
+}
+.el-form-item__label {
+  text-align: right !important;
+}
+.el-upload__tip {
+  line-height: 20px;
+  color: red;
+  text-align: left;
+}
+.span_tip {
+  font-size: 12px;
+  color: red;
+  margin-left: 5px;
+}
+.filter-item-temp {
+  width: 100px;
+}
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 250px;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
+</style>

src/views/operate/home/recom-goods.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container" style="padding-bottom: 0;">
+      <div class="filter-control">
+        <span>商品ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.shopName"
+          placeholder="供应商名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="goodsDialogVisible = true"> 添加商品 </el-button>
+        <el-button v-permission="'tag:list:del'" type="danger" :disabled="disabled" @click="handleDeletePros">
+          批量删除
+        </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="660" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="productId" label="商品ID" align="center" width="80" />
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
+        <template slot-scope="{ row }">
+          <img :src="row.mainImage" alt="" style="width: 50px; height: 50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="商品名称" align="center" />
+      <el-table-column prop="shopName" label="供应商名称" align="center" />
+      <el-table-column prop="sort" label="排序" width="70" align="center">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="updateRecommendSort(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDeletePros(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[10,20]"
+      :page-size="10"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getRecommendList"
+    />
+    <!--  选择商品弹窗 -->
+    <goods-dialog v-if="goodsDialogVisible" ref="goodsDialog" @confirm="handleAddShopConfirm" @cancel="handleCancel" />
+  </div>
+</template>
+
+<script>
+import { getRecommendList, addRecommendProduct, delRecommendProduct, updateRecommendSort } from '@/api/activity/home/home'
+import GoodsDialog from './components/goods-recom-dialog'
+export default {
+  name: 'RecomGoods',
+  components: { GoodsDialog },
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      floorTitle: this.$route.query.floorTitle,
+      listQuery: {
+        shopName: '',
+        productId: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0,
+      goodsDialogVisible: false,
+      dialogFormVisible: false,
+      logoFormVisible: false,
+      loadImgLoading: false,
+      renewCustome: {
+        id: '',
+        status: ''
+      },
+      currentList: []
+    }
+  },
+  computed: {
+    disabled() {
+      return this.currentList.length === 0
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取专区商品列表
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.getRecommendList()
+    },
+    // 获取专区商品列表
+    async getRecommendList() {
+      try {
+        this.isLoading = true
+        const res = await getRecommendList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 确认选择商品
+    handleAddShopConfirm(data) {
+      console.log('data', data)
+      const productIds = []
+      data.forEach((ele) => {
+        productIds.push(ele.productId)
+      })
+      this.addRecommendProduct({ ids: productIds.join(',') })
+    },
+    // 取消选择商品
+    handleCancel() {
+      this.goodsDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 选择列表项
+    handleSelectionChange(current) {
+      this.currentList = current
+      console.log('currentList', current)
+    },
+    // 专区商品排序
+    async updateRecommendSort(row) {
+      try {
+        await updateRecommendSort({ productId: row.productId, sort: row.sort })
+        this.$notify.success({ title: '排序更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存添加商品
+    async addRecommendProduct(params) {
+      try {
+        await addRecommendProduct(params)
+        this.goodsDialogVisible = false
+        this.$notify.success({ title: '保存成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 操作删除商品
+    async handleDeletePros(row) {
+      try {
+        let confirmText = ''
+        if (this.currentList.length > 0) {
+          confirmText = '确定删除所选商品吗?'
+        } else {
+          confirmText = '确定删除该商品吗？'
+        }
+        await this.$confirm(confirmText, {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.delRecommendProduct(row)
+      } catch (error) {
+        this.$notify.info({ title: '用户取消操作~', message: '' })
+      }
+    },
+    // 调用删除推荐商品
+    async delRecommendProduct(row) {
+      try {
+        const productIds = row instanceof Event ? this.currentList : [].concat(row)
+        const ids = productIds.map((item) => item.productId).join(',')
+        await delRecommendProduct({ ids: ids })
+        this.$notify.success({ title: '删除成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.tags-sms-span{
+  font-weight: bold;
+  font-size: 16px !important;
+}
+</style>

src/views/operate/home/zones-goods.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container" style="padding-bottom: 0;">
+      <div class="filter-control">
+        <span class="tags-sms-span">【{{ floorTitle }}】</span>
+      </div>
+      <div class="filter-control">
+        <span>商品ID:</span>
+        <el-input
+          v-model="listQuery.productId"
+          placeholder="商品ID"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>供应商名称:</span>
+        <el-input
+          v-model="listQuery.shopName"
+          placeholder="供应商名称"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="goodsDialogVisible = true"> 添加商品 </el-button>
+        <el-button v-permission="'tag:list:del'" type="danger" :disabled="disabled" @click="handleDeletePros">
+          批量删除
+        </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="660" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" />
+      <el-table-column prop="productId" label="商品ID" align="center" width="80" />
+      <el-table-column prop="mainImage" label="商品图片" align="center" width="100">
+        <template slot-scope="{ row }">
+          <img :src="row.mainImage" alt="" style="width: 50px; height: 50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="商品名称" align="center" />
+      <el-table-column prop="shopName" label="供应商名称" align="center" />
+      <el-table-column prop="sort" label="排序" width="70" align="center">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="updateProductSort(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDeletePros(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[10,20]"
+      :page-size="10"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getZoneProductList"
+    />
+    <!--  选择商品弹窗 -->
+    <goods-dialog v-if="goodsDialogVisible" ref="shopDialog" @confirm="handleAddShopConfirm" @cancel="handleCancel" />
+  </div>
+</template>
+
+<script>
+import { getZoneProductList, addZoneProduct, delZoneProduct, updateProductSort } from '@/api/activity/home/home'
+import GoodsDialog from './components/goods-dialog'
+export default {
+  name: 'RecordList',
+  components: { GoodsDialog },
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      floorTitle: this.$route.query.floorTitle,
+      listQuery: {
+        id: this.$route.query.id,
+        shopName: '',
+        productId: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0,
+      goodsDialogVisible: false,
+      dialogFormVisible: false,
+      logoFormVisible: false,
+      loadImgLoading: false,
+      renewCustome: {
+        id: '',
+        status: ''
+      },
+      currentList: []
+    }
+  },
+  computed: {
+    disabled() {
+      return this.currentList.length === 0
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取专区商品列表
+    getList() {
+      this.list = []
+      this.listQuery.pageNum = 1
+      this.getZoneProductList()
+    },
+    // 获取专区商品列表
+    async getZoneProductList() {
+      try {
+        this.isLoading = true
+        const res = await getZoneProductList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 确认选择商品
+    handleAddShopConfirm(data) {
+      console.log('data', data)
+      const productIds = []
+      data.forEach((ele) => {
+        productIds.push(ele.productId)
+      })
+      this.addZoneProduct({ id: this.listQuery.id, ids: productIds.join(',') })
+    },
+    // 取消选择商品
+    handleCancel() {
+      this.goodsDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 选择列表项
+    handleSelectionChange(current) {
+      this.currentList = current
+      console.log('currentList', current)
+    },
+    // 专区商品排序
+    async updateProductSort(row) {
+      try {
+        await updateProductSort({ id: this.listQuery.id, productId: row.productId, sort: row.sort })
+        this.$notify.success({ title: '排序更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存添加商品
+    async addZoneProduct(params) {
+      try {
+        await addZoneProduct(params)
+        this.goodsDialogVisible = false
+        this.$notify.success({ title: '保存成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 操作删除商品
+    async handleDeletePros(row) {
+      try {
+        let confirmText = ''
+        if (this.currentList.length > 0) {
+          confirmText = '确定删除所选商品吗?'
+        } else {
+          confirmText = '确定删除该商品吗？'
+        }
+        await this.$confirm(confirmText, {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.delZoneProduct(row)
+      } catch (error) {
+        this.$notify.info({ title: '用户取消操作~', message: '' })
+      }
+    },
+    // 调用删除商品
+    async delZoneProduct(row) {
+      try {
+        const productIds = row instanceof Event ? this.currentList : [].concat(row)
+        const ids = productIds.map((item) => item.productId).join(',')
+        await delZoneProduct({ id: this.listQuery.id, ids: ids })
+        this.$notify.success({ title: '删除成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.tags-sms-span{
+  font-weight: bold;
+  font-size: 16px !important;
+}
+</style>

src/views/operate/home/zones-image-edit.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="app-container" style="width: 800px; margin: 0 auto">
+    <el-form ref="bannerForm" :model="form" label-width="130px">
+      <el-form-item label="轮播标题:" prop="title" :rules="rules.title">
+        <el-input v-model="form.title" placeholder="请输入轮播标题" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="PC端图片:" prop="image" :rules="rules.image" style="margin-bottom: 40px">
+        <div class="form-el-upload" style="width: 264px; height: 120px">
+          <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :headers="getToken"
+            :show-file-list="false"
+            :on-success="handleSuccessPcImage"
+            :before-upload="beforeUpload"
+          >
+            <div v-loading="loadPcImageLoading" class="avatar" style="width: 264px; height: 120px; display: block">
+              <img
+                v-if="form.image"
+                :src="form.image"
+                style="width: 264px; height: 120px; display: block"
+                @error="reloadImage"
+                @load="loadPcImageSucess"
+              />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                style="width: 264px; height: 120x; line-height: 120px"
+              ></i>
+            </div>
+          </el-upload>
+          <p class="uploader-tips">注：请上传尺寸1184*400(px)的图片。</p>
+        </div>
+      </el-form-item>
+      <el-form-item label="PC端链接:" prop="link" :rules="rules.link">
+        <el-input v-model="form.link" placeholder="请输入PC端链接" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="小程序端标题:" prop="crmTitle" :rules="rules.crmTitle">
+        <el-input v-model="form.crmTitle" placeholder="请输入小程序端标题" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="小程序端图片:" prop="crmImage" :rules="rules.crmImage" style="margin-bottom: 40px">
+        <div class="form-el-upload" style="width: 264px; height: 120px">
+          <el-upload
+            class="avatar-uploader"
+            :action="actionUrl"
+            :headers="getToken"
+            :show-file-list="false"
+            :on-success="handleSuccessAppImage"
+            :before-upload="beforeUpload"
+          >
+            <div v-loading="loadImgLoading" class="avatar" style="width: 264px; height: 120px; display: block">
+              <img
+                v-if="form.crmImage"
+                :src="form.crmImage"
+                style="width: 264px; height: 120px; display: block"
+                @error="reloadImage"
+                @load="loadSucess"
+              />
+              <i
+                v-else
+                class="el-icon-plus avatar-uploader-icon"
+                style="width: 264px; height: 120px; line-height: 120px"
+              ></i>
+            </div>
+          </el-upload>
+          <p class="uploader-tips">注：请上传尺寸702*240(px)的图片。</p>
+        </div>
+      </el-form-item>
+      <el-form-item label="小程序端链接:" prop="crmLink" :rules="rules.crmLink">
+        <el-input v-model="form.crmLink" placeholder="请输入小程序端链接" maxlength="200" style="width: 600px" />
+      </el-form-item>
+      <el-form-item label="轮播排序:" prop="sort">
+        <el-input v-model="form.sort" type="number" placeholder="请设置专区排序" maxlength="3" style="width: 218px" />
+      </el-form-item>
+      <el-form-item label="PC端状态" prop="wwwEnabledStatus">
+        <el-select v-model="form.wwwEnabledStatus" placeholder="请选择网站状态">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="小程序状态" prop="crmEnabledStatus">
+        <el-select v-model="form.crmEnabledStatus" placeholder="请选择小程序状态">
+          <el-option label="启用" :value="1" />
+          <el-option label="停用" :value="0" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div class="el-dialog__footer" style="text-align: center">
+      <el-button type="primary" @click="onSubmit('bannerForm')"> 保存 </el-button>
+      <el-button plain @click="backToList"> 返回 </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getZoneImageById, saveZoneImage } from '@/api/activity/home/home'
+
+export default {
+  name: 'ZonesImageEdit',
+  data() {
+    const defaultForm = () => {
+      return {
+        imageId: '',
+        zoneId: this.$route.query.zoneId,
+        title: '', // PC端标题
+        crmTitle: '', // 小程序标题
+        image: '', // PC广告图
+        crmImage: '', // 小程序广告图
+        link: '', // PC链接链接
+        crmLink: '', // 小程序链接
+        wwwEnabledStatus: 1, // 停启用状态 1 启用 0 停用
+        crmEnabledStatus: 1, // 停启用状态 1 启用 0 停用
+        sort: 0
+      }
+    }
+    return {
+      form: defaultForm(),
+      editType: 'add',
+      loadImgLoading: false,
+      loadPcImageLoading: false,
+      rules: {
+        title: [{ required: true, message: '请输入轮播标题', trigger: 'blur' }],
+        image: [{ required: true, message: '请上传PC广告图', trigger: 'blur' }],
+        crmImage: [{ required: true, message: '请上传小程序广告图', trigger: 'blur' }],
+        link: [{ required: true, message: '请输入PC端链接', trigger: 'blur' }],
+        crmLink: [{ required: true, message: '请输入小程序链接', trigger: 'blur' }],
+        sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
+        wwwEnabledStatus: [{ required: true, message: '请选择PC端状态', trigger: 'blur' }],
+        crmEnabledStatus: [{ required: true, message: '请选择小程序状态', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    getToken() {
+      return {
+        token: this.$store.getters.token
+      }
+    },
+    actionUrl() {
+      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
+    }
+  },
+  created() {
+    this.editType = this.$route.query.type || 'edit'
+    if (this.editType === 'edit') {
+      console.log('edit')
+      this.getZoneImageById(this.$route.query.imageId)
+    }
+  },
+  methods: {
+    async getZoneImageById(imageId) {
+      // 获取轮播详情
+      try {
+        const res = await getZoneImageById({ imageId: imageId })
+        this.form = { ...this.form, ...res.data }
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    onSubmit(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.$confirm('是否提交保存数据？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            console.log('form', this.form)
+            this.saveZoneImage(this.form)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    async saveZoneImage(params) {
+      // 保存
+      await saveZoneImage(params)
+      this.$notify.success({ title: '保存成功~', message: '' })
+      setTimeout(() => {
+        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+          this.$nextTick(() => {
+            this.$router.replace({
+              path: '/operate/zones/zones-image',
+              query: { id: this.$route.query.zoneId, floorTitle: this.$route.query.floorTitle }
+            })
+          })
+        })
+      }, 1000)
+    },
+    // 取消选择商品
+    handleCancel() {
+      this.shopDialogVisible = false
+      this.$refs.shopDialog.visible = false
+    },
+    // 上传PC广告图事件
+    handleSuccessPcImage(response, file) {
+      this.loadPcImageLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.image = response.data
+        }, 1000 * 2)
+      })
+    },
+    // 上传小程序广告图事件
+    handleSuccessAppImage(response, file) {
+      this.loadImgLoading = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.form.crmImage = response.data
+        }, 1000 * 2)
+      })
+    },
+    // 对上传图片的大小、格式进行限制
+    beforeUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isJPG2 = file.type === 'image/jpg'
+      const isPNG = file.type === 'image/png'
+      const isLt5M = file.size / 1024 / 1024 < 5
+      if (!isJPG && !isJPG2 && !isPNG) {
+        this.$message.error('只支持jpg或png格式图片')
+      }
+      if (!isLt5M) {
+        this.$message.error('请上传5MB以内的图片!')
+      }
+      return (isJPG || isJPG2 || isPNG) && isLt5M
+    },
+    reloadImage() {
+      this.loadImgLoading = true
+      setTimeout(() => {
+        this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
+      }, 1000 * 2)
+    },
+    loadPcImageSucess() {
+      this.loadPcImageLoading = false
+    },
+    loadSucess() {
+      this.loadImgLoading = false
+    },
+    backToList() {
+      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
+        this.$nextTick(() => {
+          this.$router.replace({
+            path: '/operate/zones/zones-image',
+            query: { id: this.$route.query.zoneId, floorTitle: this.$route.query.floorTitle }
+          })
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  float: left;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 30px;
+  color: #999999;
+}
+.el-form-item__label {
+  text-align: right !important;
+}
+.el-upload__tip {
+  line-height: 20px;
+  color: red;
+  text-align: left;
+}
+.span_tip {
+  font-size: 12px;
+  color: red;
+  margin-left: 5px;
+}
+.filter-item-temp {
+  width: 100px;
+}
+.uploader-tips {
+  position: absolute;
+  bottom: 0;
+  left: 280px !important;
+  line-height: 28px;
+  color: red;
+  margin: 0;
+}
+</style>

src/views/operate/home/zones-image.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+
+    <div class="filter-container" style="padding-bottom: 0;">
+      <div class="filter-control">
+        <span class="tags-sms-span">【{{ floorTitle }}】</span>
+      </div>
+      <div class="filter-control">
+        <span>轮播标题:</span>
+        <el-input
+          v-model="listQuery.title"
+          placeholder="轮播标题"
+          clearable
+          @keyup.enter.native="getList"
+          @clear="getList"
+        />
+      </div>
+      <div class="filter-control">
+        <span>网站状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已启用" />
+          <el-option :value="1" label="已停用" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>小程序状态:</span>
+        <el-select v-model="listQuery.status" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="0" label="已启用" />
+          <el-option :value="1" label="已停用" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <el-button type="primary" @click="getList"> 查询 </el-button>
+        <el-button type="primary" @click="handleoOerate('add')"> 添加轮播 </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="660">
+      <el-table-column prop="imageId" label="ID" align="center" width="50" />
+      <el-table-column prop="title" label="轮播标题" align="center" width="200" />
+      <el-table-column prop="image" label="网站广告图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.image" alt="" style="width: 132px; height: 60px;" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="crmImage" label="小程序广告图" align="center">
+        <template slot-scope="{ row }">
+          <img :src="row.crmImage" alt="" style="width: 132px; height: 60px;" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="wwwEnabledStatus" label="网站状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.wwwEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.wwwEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.imageId, row.wwwEnabledStatus, 0)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.imageId, row.wwwEnabledStatus, 0)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="crmEnabledStatus" label="小程序状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.crmEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.crmEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.imageId, row.crmEnabledStatus, 1)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.imageId, row.crmEnabledStatus, 1)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="排序" width="70" align="center">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="handleOnInputBlur(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="220">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleoOerate('edit', row)">
+            编辑
+          </el-button>
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDelete(row)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[20]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getZoneImageList"
+    />
+  </div>
+</template>
+
+<script>
+
+import { getZoneImageList, delZoneImage, updateImageSort, updateImageStatus } from '@/api/activity/home/home'
+export default {
+  name: 'ZonesImage',
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      floorTitle: this.$route.query.floorTitle,
+      listQuery: {
+        id: this.$route.query.id,
+        pageNum: 1,
+        pageSize: 10
+      },
+      list: [],
+      total: 0,
+      timesValue: []
+    }
+  },
+  computed: {},
+  watch: {
+    timesValue: {
+      handler() {
+        this.getList()
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取行为记录列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.list = []
+      this.getZoneImageList()
+    },
+
+    // 获取关键词列表
+    async getZoneImageList() {
+      try {
+        this.isLoading = true
+        const res = await getZoneImageList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 添加专区广告图
+    handleoOerate(type, row) {
+      if (type === 'add') {
+        this.$router.push({
+          path: '/operate/zones/zones-image-edit',
+          query: { zoneId: this.listQuery.id, type: type, floorTitle: this.floorTitle }
+        })
+      } else {
+        this.$router.push({
+          path: '/operate/zones/zones-image-edit',
+          query: { zoneId: this.listQuery.id, imageId: row.imageId, type: type, floorTitle: this.floorTitle }
+        })
+      }
+    },
+    // 操作启用停用广告图
+    handleShangeStatus(imageId, status, type) {
+      let confirmTxt = ''
+      let paramsStatus
+      if (status === 1) {
+        confirmTxt = '确定停用该广告图？'
+        paramsStatus = 0
+      } else {
+        confirmTxt = '确定启用该广告图？'
+        paramsStatus = 1
+      }
+      this.$confirm(confirmTxt)
+        .then((_) => {
+          this.updateImageStatus(imageId, paramsStatus, type)
+        })
+        .catch(() => {
+          this.$notify.info({ title: '用户取消操作~', message: '' })
+        })
+    },
+    // 停用启用广告图
+    async updateImageStatus(imageId, paramsStatus, type) {
+      try {
+        await updateImageStatus({ imageId: imageId, status: paramsStatus, type: type })
+        this.$notify.success({ title: '更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 操作删除广告图
+    async handleDelete(row) {
+      try {
+        await this.$confirm('确定删除该广告图吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.delZoneImage(row)
+      } catch (error) {
+        this.$notify.info('用户取消操作~')
+      }
+    },
+    // 调用删除广告图
+    async delZoneImage(row) {
+      try {
+        await delZoneImage({ imageId: row.imageId })
+        this.$notify.success({ title: '删除成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 广告图排序
+    async handleOnInputBlur(row) {
+      try {
+        await updateImageSort({ imageId: row.imageId, sort: row.sort })
+        this.$notify.success({ title: '排序更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 机构跳转
+    handleClubHrefLink(row) {
+      return (
+        process.env.VUE_APP_ADMIN_URL +
+        `/a/user/jumpLink/toOldAdmin?type=1&clubId=${row.clubId}&clubName=${row.corporateName}`
+      )
+    }
+  }
+}
+</script>
+
+<style>
+.tags-sms-span{
+  font-weight: bold;
+  font-size: 16px !important;
+}
+</style>

src/views/operate/home/zones-list.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部操作区域 -->
+    <div class="filter-container">
+      <!--<div class="filter-control">
+        <span>网站状态:</span>
+        <el-select v-model="listQuery.wwwEnabledStatus" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="1" label="启用" />
+          <el-option :value="0" label="停用" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>小程序状态:</span>
+        <el-select v-model="listQuery.crmEnabledStatus" style="width: 120px" clearable @change="getList">
+          <el-option value="" label="请选择" />
+          <el-option :value="1" label="启用" />
+          <el-option :value="0" label="停用" />
+        </el-select>
+      </div>-->
+      <div class="filter-control">
+        <el-button type="primary" @click="dialogFormVisible = true"> 添加专区 </el-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table v-loading="isLoading" :data="list" border style="width: 100%">
+      <el-table-column label="序号" align="center" width="50">
+        <template slot-scope="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="floorTitle" label="专区标题" align="center" width="200" />
+      <el-table-column prop="floorDetail" label="专区描述" align="center" />
+      <el-table-column prop="wwwEnabledStatus" label="网站状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.wwwEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.wwwEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.wwwEnabledStatus, 0)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="crmEnabledStatus" label="小程序状态" align="center" width="150">
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.crmEnabledStatus === 1" type="success" size="small">已启用</el-tag>
+          <el-tag v-else type="danger" size="small">已停用</el-tag>
+          <el-button v-if="row.crmEnabledStatus === 1" type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
+            停用
+          </el-button>
+          <el-button v-else type="primary" size="mini" @click="handleShangeStatus(row.id, row.crmEnabledStatus, 1)">
+            启用
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="排序" width="70" align="center">
+        <template slot-scope="{ row }">
+          <el-input v-model="row.sort" maxlength="4" minlength="1" @blur="updateZoneSort(row)" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="createDate" label="创建时间" align="center" width="180">
+        <template slot-scope="{ row }">
+          {{ row.createDate }}
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" align="center">
+        <template slot-scope="{ row }">
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handleEdit(row)"> 编辑 </el-button>
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handlePath(1,row)"> 专区商品 </el-button>
+          <el-button type="primary" size="mini" style="margin: 2px" @click="handlePath(2,row)"> 专区轮播 </el-button>
+          <el-button type="danger" size="mini" style="margin: 2px" @click="handleDelete(row)"> 删除 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 页码 -->
+    <pagination
+      :total="total"
+      :page-sizes="[10, 20, 30, 100]"
+      :page-size="20"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="getPageZoneList"
+    />
+    <!-- 专区添加 -->
+    <el-dialog title="专区添加" :visible.sync="dialogFormVisible" width="500px">
+      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="100px">
+        <el-form-item label="专区标题:" prop="floorTitle">
+          <el-input v-model="form.floorTitle" type="text" placeholder="请输入专区标题" maxlength="10" />
+        </el-form-item>
+        <el-form-item label="专区描述:" prop="floorDetail">
+          <el-input v-model="form.floorDetail" type="text" placeholder="请输入专区描述" maxlength="50" />
+        </el-form-item>
+        <el-form-item label="标题背景色:" prop="backColor">
+          <el-input v-model="form.backColor" type="text" placeholder="请输入标题背景色(如：#FF5B00)" maxlength="10" />
+        </el-form-item>
+        <el-form-item label="专区排序:" prop="sort">
+          <el-input v-model="form.sort" type="number" placeholder="请设置专区排序" maxlength="3" />
+        </el-form-item>
+        <el-form-item label="网站状态" prop="wwwEnabledStatus">
+          <el-select v-model="form.wwwEnabledStatus" placeholder="请选择网站状态">
+            <el-option label="启用" :value="1" />
+            <el-option label="停用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="小程序状态" prop="crmEnabledStatus">
+          <el-select v-model="form.crmEnabledStatus" placeholder="请选择小程序状态">
+            <el-option label="启用" :value="1" />
+            <el-option label="停用" :value="0" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="handleSavePageZone">确定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPageZoneList, savePageZone, delPageZone, updateZoneSort, updateZoneStatus } from '@/api/activity/home/home'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'ZonesList',
+  filters: {},
+  data() {
+    return {
+      isLoading: true,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      list: [],
+      total: 0,
+      dialogFormVisible: false,
+      form: {
+        id: '',
+        floorTitle: '', // 专区标题
+        floorDetail: '', // 专区描述
+        backColor: '', // 标题背景色
+        sort: 0, // 专区排序
+        crmEnabledStatus: 1, // 小程序状态
+        wwwEnabledStatus: 1, // WWW状态
+        createBy: ''
+      },
+      rules: {
+        floorTitle: [{ required: true, message: '请输入专区标题', trigger: 'blur' }],
+        floorDetail: [{ required: true, message: '请输入专区描述', trigger: 'blur' }],
+        backColor: [{ required: true, message: '请输入标题背景色', trigger: 'blur' }],
+        sort: [{ required: true, message: '请设置专区排序', trigger: 'blur' }],
+        wwwEnabledStatus: [{ required: true, message: '请选择网站状态', trigger: 'blur' }],
+        crmEnabledStatus: [{ required: true, message: '请选择小程序状态', trigger: 'blur' }]
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['fullName'])
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    // 获取专区列表
+    getList() {
+      this.listQuery.pageNum = 1
+      this.getPageZoneList()
+    },
+
+    // 获取专区列表
+    async getPageZoneList() {
+      try {
+        this.isLoading = true
+        const res = await getPageZoneList(this.listQuery)
+        this.list = res.data.results
+        this.total = res.data.totalRecord
+        this.isLoading = false
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 操作启用停用
+    handleShangeStatus(id, status, type) {
+      let confirmTxt = ''
+      let paramsStatus
+      if (status === 1) {
+        confirmTxt = '确定停用该专区？'
+        paramsStatus = 0
+      } else {
+        confirmTxt = '确定启用该专区？'
+        paramsStatus = 1
+      }
+      this.$confirm(confirmTxt)
+        .then((_) => {
+          this.updateZoneStatus(id, paramsStatus, type)
+        })
+        .catch(() => {
+          this.$notify.info({ title: '用户取消操作~', message: '' })
+        })
+    },
+    // 停用启用专区
+    async updateZoneStatus(id, paramsStatus, type) {
+      try {
+        await updateZoneStatus({ id: id, status: paramsStatus, type: type })
+        this.$notify.success({ title: '更新成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log('error', error)
+      }
+    },
+    // 确认保存专区
+    async handleSavePageZone() {
+      try {
+        await this.$refs.dataForm.validate()
+        this.form.createBy = this.fullName
+        this.savePageZone(this.form)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存专区
+    async savePageZone(params) {
+      await savePageZone(params)
+      this.$notify.success({ title: '保存成功~', message: '' })
+      this.closeDialog()
+      this.getList()
+    },
+    // 添加取消
+    closeDialog() {
+      this.$refs.dataForm.resetFields()
+      this.dialogFormVisible = false
+    },
+    // 编辑专区
+    handleEdit(row) {
+      this.form = { ...this.form, ...row }
+      this.dialogFormVisible = true
+    },
+    // 操作删除专区
+    async handleDelete(row) {
+      try {
+        await this.$confirm('确定删除该专区吗？', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.delPageZone(row)
+      } catch (error) {
+        this.$notify.info({ title: '用户取消操作~', message: '' })
+      }
+    },
+    // 调用删除专区
+    async delPageZone(row) {
+      try {
+        await delPageZone({ id: row.id })
+        this.$notify.success({ title: '删除成功~', message: '' })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 专区排序
+    async updateZoneSort(row) {
+      try {
+        await updateZoneSort({ id: row.id, sort: row.sort })
+        this.getList()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 跳转
+    handlePath(type, row) {
+      switch (type) {
+        case 1: // 专区商品
+          this.$router.push({
+            path: '/operate/zones/zones-goods',
+            query: { id: row.id, floorTitle: row.floorTitle }
+          })
+          break
+        case 2: // 专区轮播
+          this.$router.push({
+            path: '/operate/zones/zones-image',
+            query: { id: row.id, floorTitle: row.floorTitle }
+          })
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style></style>

src/views/user/club-portrait/index.vue

@@ -87,16 +87,17 @@
 </template>
 
 <script>
-import SelectTime from "./components/select-time";
-import PieEcharts from "./components/pei-echarts.vue";
-import BarEcharts from "./components/bar-echarts.vue";
-import HotTips from "./components/hot-tips.vue";
-import ClubDialog from "./components/club-dialog.vue";
+import SelectTime from './components/select-time'
+import PieEcharts from './components/pei-echarts.vue'
+import BarEcharts from './components/bar-echarts.vue'
+import HotTips from './components/hot-tips.vue'
+import ClubDialog from './components/club-dialog.vue'
 import {
   getIns_statistics,
   getIns_orderTrends,
   getIns_accessStatistics,
-} from "@/api/mallPortrait/disitrib";
+  getCulbDemand
+} from '@/api/mallPortrait/disitrib'
 
 export default {
   components: {
@@ -104,121 +105,121 @@ export default {
     SelectTime,
     PieEcharts,
     BarEcharts,
-    HotTips,
+    HotTips
   },
   data() {
     return {
-      clubId:'',
-      clubName:'',
+      clubId: '',
+      clubName: '',
       dialogVisible: false,
       dialogType: 1,
       keywordData: [
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌logo", label: 1 },
-        { text: "品牌名称", label: 1 },
-        { text: "品牌名称", label: 1 },
-        { text: "品牌名称", label: 1 },
-        { text: "TOP", label: 0 },
-        { text: "TOP", label: 0 },
-        { text: "TOP", label: 0 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌logo', label: 1 },
+        { text: '品牌名称', label: 1 },
+        { text: '品牌名称', label: 1 },
+        { text: '品牌名称', label: 1 },
+        { text: 'TOP', label: 0 },
+        { text: 'TOP', label: 0 },
+        { text: 'TOP', label: 0 }
       ],
       storeColumns: [
-        { text: "商品图片", label: "image", labelWidth: 80 },
-        { text: "商品名称", label: "name" },
-        { text: "TOP", label: "top", labelWidth: 80 },
+        { text: '商品图片', label: 'image', labelWidth: 80 },
+        { text: '商品名称', label: 'name' },
+        { text: 'TOP', label: 'TOP', labelWidth: 80 }
       ],
       keyColumns: [
-        { text: "搜索词", labelWidth: 120 },
-        { text: "TOP", label: "top" },
+        { text: '搜索词', labelWidth: 120 },
+        { text: 'TOP', label: 'TOP' }
       ],
       dataValue: {
         // 机构活跃度统计
         clubActivityCount: {
           data: {
             不活跃机构: 0,
-            活跃机构: 0,
-          },
+            活跃机构: 0
+          }
         },
         // 订单统计
         orderData: {
           orderTotalNum: 1,
-          name: "订单总量",
-          color: ["#3aa0ff", "#36cbcb", "#fad337", "#4dcb73", "#f2637b", "#975fe4"],
+          name: '订单总量',
+          color: ['#3aa0ff', '#36cbcb', '#fad337', '#4dcb73', '#f2637b', '#975fe4'],
           seriesData: [
             {
-              name: "普通订单 【100%】 【1个】",
-              value: 1,
+              name: '普通订单 【100%】 【1个】',
+              value: 1
             },
             {
-              name: "二手订单 【 0 %】 【0个】",
-              value: 0,
-            },
-          ],
+              name: '二手订单 【 0 %】 【0个】',
+              value: 0
+            }
+          ]
         },
         // 咨询记录
         consultData: {
           data: {
-            name: "咨询记录",
+            name: '咨询记录',
             yAxisData: [
-              "撒肯德基阿拉基",
-              "水阿斯达四大光",
-              "士大夫撒多发生的",
-              "asdas阿瑟的",
-              "奥术大师大所多",
-              "第三方士大夫",
-              "从VB餐补v",
-              "水电费",
+              '撒肯德基阿拉基',
+              '水阿斯达四大光',
+              '士大夫撒多发生的',
+              'asdas阿瑟的',
+              '奥术大师大所多',
+              '第三方士大夫',
+              '从VB餐补v',
+              '水电费'
             ],
             xAxisData: [1, 1, 2, 2, 2, 3, 5, 6],
-            color: "#FF5B00",
+            color: '#FF5B00'
           },
-          count: 11,
+          count: 11
         },
         keyWordsData: {
           data: {
-            name: "搜索关键词",
+            name: '搜索关键词',
             yAxisData: [
-              "热玛吉",
-              "水光",
-              "超清秀",
-              "黄金微针",
-              "LDM",
-              "皮秒",
-              "检测",
-              "水光仪",
+              '热玛吉',
+              '水光',
+              '超清秀',
+              '黄金微针',
+              'LDM',
+              '皮秒',
+              '检测',
+              '水光仪'
             ],
             xAxisData: [1, 1, 2, 2, 2, 3, 5, 6],
-            color: "#07c160",
+            color: '#07c160'
           },
-          count: 11,
+          count: 11
         },
         // 访问记录
         accessData: {
           data: {
-            name: "访问记录",
+            name: '访问记录',
             yAxisData: [
-              "玩儿玩儿",
-              "让他也让他也让他",
-              "日也同样",
-              "水电费",
-              "发挂号费",
-              "CVBS",
-              "不你们部门",
-              "电饭锅电饭锅",
+              '玩儿玩儿',
+              '让他也让他也让他',
+              '日也同样',
+              '水电费',
+              '发挂号费',
+              'CVBS',
+              '不你们部门',
+              '电饭锅电饭锅'
             ],
             xAxisData: [1, 1, 2, 2, 2, 3, 5, 6],
-            color: "#6585fa",
+            color: '#6585fa'
           },
-          count: 11,
+          count: 11
         },
         // 机构新增趋势
         addClubCount: {},
@@ -230,64 +231,63 @@ export default {
         remarks: {
           data: {
             游客咨询: 0,
-            机构咨询: 0,
-          },
+            机构咨询: 0
+          }
         },
         // 热门品牌
         brandProductSalesRecords: [],
         // 热门商品
         productSalesRecords: [],
         // 热搜词
-        keywords: [],
+        keywords: []
       },
       timeList: [
         {
           id: 5,
-          content: "近一周",
+          content: '近一周'
         },
         {
           id: 2,
-          content: "近1月",
+          content: '近1月'
         },
         {
           id: 3,
-          content: "近6月",
+          content: '近6月'
         },
         {
           id: 4,
-          content: "近1年",
-        },
-      ],
-    };
+          content: '近1年'
+        }
+      ]
+    }
   },
   created() {
     this.clubId = this.$route.query.clubId
     this.clubName = this.$route.query.clubName
-
   },
   methods: {
-    handleRouter(type){
+    handleRouter(type) {
       switch (type) {
         case 1: // 咨询记录
           this.$router.push({
             path: '/user/consult/list',
-            query: { clubName:this.clubName,clubId: this.clubId }
+            query: { clubName: this.clubName, clubId: this.clubId }
           })
           break
         case 2: // 行为记录
           this.$router.push({
             path: '/user/record-list',
-            query: { type:'first',corporateName:this.clubName,clubId: this.clubId }
+            query: { type: 'first', corporateName: this.clubName, clubId: this.clubId }
           })
           break
       }
     },
     handleClubDialog(type) {
-      this.dialogType = type;
-      this.dialogVisible = true;
+      this.dialogType = type
+      this.dialogVisible = true
     },
     handleCancel() {
-      this.dialogVisible = false;
+      this.dialogVisible = false
     },
     /**
      * 获取机构需求
@@ -295,10 +295,10 @@ export default {
     async getCulbDemand(e) {
       const { data } = await getCulbDemand({
         startCreateTime: e[0],
-        endCreateTime: e[1],
-      });
-      this.dataValue.clubActivityCount = data.clubActivityCount;
-      this.dataValue.clubCount = data.clubCount;
+        endCreateTime: e[1]
+      })
+      this.dataValue.clubActivityCount = data.clubActivityCount
+      this.dataValue.clubCount = data.clubCount
     },
     /**
      * 机构订单数据
@@ -306,49 +306,49 @@ export default {
     async getIns_statistics(e) {
       const { data } = await getIns_statistics({
         startCreateTime: e[0],
-        endCreateTime: e[1],
-      });
-      this.dataValue.clubActivityCount = data.clubActivityCount;
-      this.dataValue.clubCount = data.clubCount;
+        endCreateTime: e[1]
+      })
+      this.dataValue.clubActivityCount = data.clubActivityCount
+      this.dataValue.clubCount = data.clubCount
     },
-     /**
+    /**
      * 获取机构搜索词
      */
     async getIns_orderTrends(e) {
       const { data } = await getIns_orderTrends({
         startCreateTime: e[0],
-        endCreateTime: e[1],
-      });
-      this.dataValue.addClubCount = data.clubCount;
-      this.dataValue.clubOrder = data.clubOrder;
+        endCreateTime: e[1]
+      })
+      this.dataValue.addClubCount = data.clubCount
+      this.dataValue.clubOrder = data.clubOrder
     },
-     /**
+    /**
      * 获取机构咨询数据
      */
-    async getIns_accessStatistics(e) {
+    async getIns_accessS(e) {
       const { data } = await getIns_accessStatistics({
         startCreateTime: e[0],
-        endCreateTime: e[1],
-      });
-      this.dataValue.record = data.record;
-      this.dataValue.remarks = data.remarks;
-      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords;
-      this.dataValue.productSalesRecords = data.productSalesRecords;
-      this.dataValue.keywords = data.keywords;
+        endCreateTime: e[1]
+      })
+      this.dataValue.record = data.record
+      this.dataValue.remarks = data.remarks
+      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords
+      this.dataValue.productSalesRecords = data.productSalesRecords
+      this.dataValue.keywords = data.keywords
     },
-     /**
+    /**
      * 获取机构访问记录数据
      */
     async getIns_accessStatistics(e) {
       const { data } = await getIns_accessStatistics({
         startCreateTime: e[0],
-        endCreateTime: e[1],
-      });
-      this.dataValue.record = data.record;
-      this.dataValue.remarks = data.remarks;
-      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords;
-      this.dataValue.productSalesRecords = data.productSalesRecords;
-      this.dataValue.keywords = data.keywords;
+        endCreateTime: e[1]
+      })
+      this.dataValue.record = data.record
+      this.dataValue.remarks = data.remarks
+      this.dataValue.brandProductSalesRecords = data.brandProductSalesRecords
+      this.dataValue.productSalesRecords = data.productSalesRecords
+      this.dataValue.keywords = data.keywords
     },
     handleSelectTime(e, num) {
       const obj = {
@@ -356,12 +356,12 @@ export default {
         1: () => this.getIns_statistics(e),
         2: () => this.getIns_orderTrends(e),
         3: () => this.getIns_accessStatistics(e),
-        4: () => this.getIns_accessStatistics(e),
-      };
-      obj[num]();
-    },
-  },
-};
+        4: () => this.getIns_accessStatistics(e)
+      }
+      obj[num]()
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>