feat: 修改

src/views/mallManagement/activity/special_index/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="app-container">
+    <div style="font-size:18px;margin-bottom:20px">活动专区配置</div>
+
+    <div class="table">
+      <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row
+        stripe>
+        <el-table-column align="center" label="操作" width="200" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="toConfigure(scope.row)">配置</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="活动专区名称" prop="activityName" min-width="160"
+          show-overflow-tooltip></el-table-column>
+        <el-table-column align="center" label="状态" prop="status" min-width="160" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{ scope.row.status ? "开启" : "隐藏" }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getEnterpriseTemplate } from "@/api/special"
+import { findElem } from '@/utils/util'
+
+export default {
+  data() {
+    return {
+      companyWechatId: "", // 企业微信id
+      companyWechatTemplateId: "", // 小程序模板id
+      useTemplate: "", // 模板类型 1=模板1 2=模板2
+      listLoading: false, // 列表加载loading
+      dataList: [
+        {
+          activityName: '首页弹窗',
+          status: false,
+          type: 2,
+          popupBackgroundColor: "",
+          popupHeadImage: "",
+          popupImage: "",
+          popupQrcode: "",
+          ratio: '600*700'
+        },
+        {
+          activityName: '胶囊图',
+          status: false,
+          type: 3,
+          active1BackgroundColor: "",
+          active1HeadImage: "",
+          active1Image: "",
+          active1Qrcode: "",
+          ratio: '710*220'
+        },
+        {
+          activityName: '活动专区2-左侧专区',
+          status: false,
+          type: 4,
+          active2LeftBackgroundColor: "",
+          active2LeftHeadImage: "",
+          active2LeftImage: "",
+          active2LeftQrcode: "",
+          ratio: '350*240'
+        },
+        {
+          activityName: '活动专区2-右侧专区',
+          status: false,
+          type: 5,
+          active2RightBackgroundColor: "",
+          active2RightHeadImage: "",
+          active2RightImage: "",
+          active2RightQrcode: "",
+          ratio: '350*240'
+        },
+        {
+          activityName: '专场专区-01',
+          status: false,
+          type: 6,
+          only1BackgroundColor: "",
+          only1HeadImage: "",
+          only1Image: "",
+          only1Qrcode: "",
+          ratio: '320*200'
+        },
+        {
+          activityName: '专场专区-02',
+          status: false,
+          type: 7,
+          only2BackgroundColor: "",
+          only2HeadImage: "",
+          only2Image: "",
+          only2Qrcode: "",
+          ratio: '320*200'
+        },
+        {
+          activityName: '专场专区-03',
+          status: false,
+          type: 8,
+          only3BackgroundColor: "",
+          only3HeadImage: "",
+          only3Image: "",
+          only3Qrcode: "",
+          ratio: '320*200'
+        },
+        {
+          activityName: '专场专区-04',
+          status: false,
+          type: 9,
+          only4BackgroundColor: "",
+          only4HeadImage: "",
+          only4Image: "",
+          only4Qrcode: "",
+          ratio: '320*200'
+        }
+      ]
+    }
+  },
+  created() {
+    this.getEnterpriseTemplate()
+  },
+
+  methods: {
+    // 获取企业下模板
+    getEnterpriseTemplate() {
+      this.companyWechatId = JSON.parse(
+        localStorage.getItem("jsmmall_user")
+      ).companyWechatId;
+      this.useTemplate = JSON.parse(
+        localStorage.getItem("jsmmall_user")
+      ).useTemplate;
+      getEnterpriseTemplate({
+        companyId: this.companyWechatId
+      }).then(res => {
+        if (!res.data && res.data.length < 1) return false;
+        let obj = res.data.find(item => {
+          return item.templateType == this.useTemplate;
+        })
+
+        this.dataList[0].status = obj.popupStatus;  // 首页弹窗 开启状态
+        this.dataList[1].status = obj.active1Status;  // 活动专区1 开启状态 
+        this.dataList[2].status = obj.active2Status;  // 活动专区2 开启状态 
+        this.dataList[3].status = obj.active2Status;  // 活动专区2 开启状态 
+        this.dataList[4].status = obj.onlyStatus; // 专场专区 开启状态
+        this.dataList[5].status = obj.onlyStatus; // 专场专区 开启状态
+        this.dataList[6].status = obj.onlyStatus; // 专场专区 开启状态
+        this.dataList[7].status = obj.onlyStatus; // 专场专区 开启状态
+
+        // 首页弹窗
+        this.dataList[0].popupBackgroundColor = obj.popupBackgroundColor; // 首页背景颜色
+        this.dataList[0].popupHeadImage = obj.popupHeadImage; // 首页表头图片
+        this.dataList[0].popupImage = obj.popupImage; // 首页图片
+        this.dataList[0].popupQrcode = obj.popupQrcode; // 首页活动分享图片
+        // 活动专区1
+        this.dataList[1].active1BackgroundColor = obj.active1BackgroundColor; // 活动专区1背景颜色用(,)隔开
+        this.dataList[1].active1HeadImage = obj.active1HeadImage; // 活动专区1表头图片
+        this.dataList[1].active1Image = obj.active1Image; // 活动专区1图片
+        this.dataList[1].active1Qrcode = obj.active1Qrcode; // 活动专区1活动分享图片
+        // 活动专区2 左侧
+        this.dataList[2].active2LeftBackgroundColor = obj.active2LeftBackgroundColor; // 活动专区2左侧背景颜色用(,)隔开
+        this.dataList[2].active2LeftHeadImage = obj.active2LeftHeadImage; // 活动专区2左侧表头图片
+        this.dataList[2].active2LeftImage = obj.active2LeftImage; // 活动专区2左侧图片
+        this.dataList[2].active2LeftQrcode = obj.active2LeftQrcode; // 活动专区2活动分享图片
+        // 活动专区2 右侧
+        this.dataList[3].active2RightBackgroundColor = obj.active2RightBackgroundColor; // 活动专区2右侧背景颜色用(,)隔开
+        this.dataList[3].active2RightHeadImage = obj.active2RightHeadImage; // 活动专区2右侧表头图片
+        this.dataList[3].active2RightImage = obj.active2RightImage; // 活动专区2右侧图片
+        this.dataList[3].active2RightQrcode = obj.active2RightQrcode; // 活动专区2活动分享图片
+        // 专场专区1
+        this.dataList[4].only1BackgroundColor = obj.only1BackgroundColor; // 专场专区背景颜色用(,)隔开
+        this.dataList[4].only1HeadImage = obj.only1HeadImage; // 专场专区表头图片
+        this.dataList[4].only1Image = obj.only1Image; // 专场专区图片
+        this.dataList[4].only1Qrcode = obj.only1Qrcode; // 专场专区活动分享图片
+        // 专场专区2
+        this.dataList[5].only2BackgroundColor = obj.only2BackgroundColor; // 专场专区背景颜色用(,)隔开
+        this.dataList[5].only2HeadImage = obj.only2HeadImage; // 专场专区表头图片
+        this.dataList[5].only2Image = obj.only2Image; // 专场专区图片
+        this.dataList[5].only2Qrcode = obj.only2Qrcode; // 专场专区活动分享图片
+        // 专场专区3
+        this.dataList[6].only3BackgroundColor = obj.only3BackgroundColor; // 专场专区背景颜色用(,)隔开
+        this.dataList[6].only3HeadImage = obj.only3HeadImage; // 专场专区表头图片
+        this.dataList[6].only3Image = obj.only3Image; // 专场专区图片
+        this.dataList[6].only3Qrcode = obj.only3Qrcode; // 专场专区活动分享图片
+        // 专场专区4
+        this.dataList[7].only4BackgroundColor = obj.only4BackgroundColor; // 专场专区背景颜色用(,)隔开
+        this.dataList[7].only4HeadImage = obj.only4HeadImage; // 专场专区表头图片
+        this.dataList[7].only4Image = obj.only4Image; // 专场专区图片
+        this.dataList[7].only4Qrcode = obj.only4Qrcode; // 专场专区活动分享图片
+
+        this.companyWechatTemplateId = obj.companyWechatTemplateId;
+      })
+    },
+
+    // 配置
+    toConfigure(item) {
+      console.log('配置', item)
+      item.objectId = this.companyWechatTemplateId
+      this.$router.push({
+        name: "special_set",
+        query: {
+          item
+        }
+      })
+    },
+
+
+  }
+
+}
+</script>
+
+<style></style>

src/views/mallManagement/activity/special_set/index.vue

@@ -0,0 +1,1011 @@
+<template>
+  <div class="app-container">
+    <!-- 活动专区配置 -->
+    <el-page-header @back="goBack" :content="activityName"></el-page-header>
+    <el-divider></el-divider>
+
+    <div class="form-container">
+      <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules">
+        <el-upload
+          class="avatar-uploader"
+          :action="baseURL + 'common/upload'"
+          :headers="myHeaders"
+          :show-file-list="false"
+          :on-success="uploadSuccess"
+          :before-upload="beforeUpload">
+        </el-upload>
+        <el-form-item :label="'活动专区图片:'" prop="img1_url">
+          <div class="images">
+            <div class="main-img">
+              <div class="img" v-if="img1_url" @mouseover="img1_hover = true;" @mouseout="img1_hover = false;">
+                <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <div class="mask" v-show="img1_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
+                </div>
+              </div>
+              <div class="add" v-else @click="uploadImage('img1')">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </div>
+          </div>
+          <div class="tips">
+            <span>尺寸比例为:{{ratio}}</span>
+          </div>
+        </el-form-item>
+
+        <el-form-item :label="'活动专区表头图片:'">
+          <div class="images">
+            <div class="main-img">
+              <div class="img" v-if="img2_url" @mouseover="img2_hover = true;" @mouseout="img2_hover = false;">
+                <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <div class="mask" v-show="img2_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
+                  <i class="el-icon-delete" @click="deleteImage('img2')"></i>
+                </div>
+              </div>
+              <div class="add" v-else @click="uploadImage('img2')">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </div>
+          </div>
+          <div class="tips">
+            <span>尺寸比例为:750*800</span>
+          </div>
+        </el-form-item>
+
+        <el-form-item :label="'活动分享图片:'">
+          <div class="images">
+            <div class="main-img">
+              <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
+                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <div class="mask" v-show="img3_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
+                  <i class="el-icon-delete" @click="deleteImage('img3')"></i>
+                </div>
+              </div>
+              <div class="add" v-else @click="uploadImage('img3')">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </div>
+          </div>
+          <div class="tips">
+            <span>尺寸比例为:750*750</span>
+          </div>
+        </el-form-item>
+        <el-form-item :label="'活动专区背景颜色:'" prop="backGroundColor">
+          <div style="display: flex">
+            <el-color-picker v-model="mainForm.backGroundColor">
+            </el-color-picker>
+            <el-button style="margin-left: 20px" @click="resetFn">重置</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      
+    </div>
+
+    <div class="btn-group">
+      <el-button size="small" type="primary" @click="addClassify">选择分类</el-button>
+      <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
+    </div>
+
+    <div class="diy-table">
+      <div class="table-head clearfix">
+        <div class="item goods">商品名称</div>
+        <div class="right">
+          <div class="item name">规格</div>
+          <div class="item input">划线价格</div>
+          <div class="item input">销售价</div>
+          <div class="item input">分销金额</div>
+          <div class="item input">佣金比例</div>
+          <div class="item input">内部分销金额</div>
+          <div class="item input">内部佣金比例</div>
+          <div class="item input">库存</div>
+          <div class="item input">销量</div>
+        </div>
+        <div class="blank">操作</div>
+      </div>
+      <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
+        <div class="goods-info" >
+          <img :src="item.imgUrl" alt="" />
+          {{ item.goodsName }}
+        </div>
+        <div class="spec-list">
+          <div class="spec-item" v-for="(it, idx) in item.goodsSpecs" :key="idx">
+            <div class="col name">{{it.name}}-{{it.specValue}}</div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.orgPrice"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.price"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.shareAmount"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerShareAmount"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.innerSharePercent"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.stockNum"></el-input></div>
+            <div class="col input"><el-input disabled type="number" size="small" v-model="it.soldNum"></el-input></div>
+          </div>
+        </div>
+        <div class="operation">
+          <el-button type="text" style="color: #f56c6c" @click="deleteGoods(item.goodsId,index)">删除</el-button>
+        </div>
+      </div>
+      <div class="empty-text" v-if="goodsList.length < 1">暂无数据</div>
+    </div>
+
+    <div class="page-footer">
+      <div class="footer" :class="classObj">
+        <el-button
+          type="primary"
+          @click="submitMainForm"
+          :loading="formLoading"
+          >{{ formLoading ? "提交中 ..." : "提 交" }}</el-button
+        >
+        <el-button @click="goBack">关 闭</el-button>
+      </div>
+    </div>
+    
+    <!-- 选择商品 -->
+    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="50%" :close-on-click-modal="false">
+      <div class="dialog-container clearfix">
+        <div class="left fl">
+          <div class="item" @click="changeClassify('')">全部分类</div>
+          <div class="group" v-for="(item, index) in classifyList" :key="index">
+            <div class="item" @click="toggleOpen(index)">
+              <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
+            </div>
+            <div class="child" v-if="item.isOpen">
+              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="right fl">
+          <div class="search">
+            <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small" style="width: 250px">
+              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
+            </el-input>
+          </div>
+          <div class="table" style="margin: 10px 0 20px;">
+            <el-table 
+              v-loading="table_listLoading" 
+              :data="table_dataList" 
+              element-loading-text="Loading" 
+              tooltip-effect="dark" 
+              style="width: 100%" 
+              max-height="270"
+              @selection-change="handleChooseGoods">
+              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
+              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
+              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
+              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
+            </el-table>
+          </div>
+          <div class="pagination clearfix">
+            <div class="fr">
+              <el-pagination
+                @current-change="handleTableCurrentChange"
+                :current-page="table_currentPage"
+                :page-size="table_pageSize"
+                background
+                layout="prev, pager, next"
+                :total="table_listTotal">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
+        <el-button @click="cancelAddGoods">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 选择分类 -->
+    <el-dialog title="选择分类" :visible.sync="addClassifyVisible" :show-close="false" width="40%" :close-on-click-modal="false">
+      <div class="classify-list">
+        <el-tree
+          :data="classifyList"
+          show-checkbox
+          default-expand-all
+          node-key="categoryId"
+          ref="tree"
+          highlight-current
+          :props="defaultProps">
+        </el-tree>
+      </div>
+      
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitAddClassify">保 存</el-button>
+        <el-button @click="cancelAddClassify">取 消</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+import { getactivityGoodsDetail,addActiveGoods,editEnterpriseTemplate, getClassifyList, getGoodsList, getMoreGoodsList } from "@/api/special";
+export default {
+  data() {
+    return {
+      companyWechatId:"",
+      useTemplate:"",
+      activityName: "", // 头部标题
+      ratio: '',
+      objectId: "", // 小程序模板id
+      type: "", // 类型
+      baseURL: process.env.VUE_APP_BASE_API,
+      myHeaders: { "x-token": getToken() },
+      formLoading: false,
+      mainForm: {
+        backGroundColor: "#F4F2F2",
+      },
+      mainFormRules: {
+        // img1_url: [
+        //   { required: true, message: "请上传活动专区图片", trigger: "blur" },
+        // ],
+      },
+      goodsList: [], // 列表数据
+
+      addGoodsVisible: false,
+
+      classifyList: [],
+      classifyCurrent: '',
+      keyword: '',
+      table_dataList: null, // 列表数据
+      table_listLoading: true, // 列表加载loading
+      table_currentPage: 1, // 当前页码
+      table_pageSize: 10, // 每页数量
+      table_listTotal: 0, // 列表总数
+      table_chooseGoods: [], // table中 当前选择商品
+
+      addClassifyVisible: false,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      },
+
+      uploadImageType: null,
+      img1_url: '',
+      img1_hover: false,
+      img2_url: '',
+      img2_hover: false,
+      img3_url: '',
+      img3_hover: false,
+    };
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+      };
+    },
+  },
+  created() {
+    const { item } = this.$route.query;
+    this.activityName = item.activityName;
+    this.objectId = item.objectId;
+    this.type = item.type;
+    this.ratio = item.ratio;
+
+    this.companyWechatId = JSON.parse(localStorage.getItem("jsmmall_user")).companyWechatId;
+    this.useTemplate = JSON.parse(localStorage.getItem("jsmmall_user")).useTemplate;
+   
+    this.getactivityGoodsDetail();
+
+    if(item.type == 2){
+      this.img1_url=item.popupImage
+      this.img2_url=item.popupHeadImage
+      this.img3_url=item.popupQrcode
+      this.mainForm.backGroundColor=item.popupBackgroundColor
+    } else if(item.type==3){
+      this.img1_url=item.active1Image
+      this.img2_url=item.active1HeadImage
+      this.img3_url=item.active1Qrcode
+      this.mainForm.backGroundColor=item.active1BackgroundColor
+    }
+    else if(item.type==4){
+      this.img1_url=item.active2LeftImage
+      this.img2_url=item.active2LeftHeadImage
+      this.img3_url=item.active2LeftQrcode
+      this.mainForm.backGroundColor=item.active2LeftBackgroundColor
+    }else if(item.type==5){
+      this.img1_url=item.active2RightImage
+      this.img2_url=item.active2RightHeadImage
+      this.img3_url=item.active2RightQrcode
+      this.mainForm.backGroundColor=item.active2RightBackgroundColor
+    }else if(item.type==6){
+      this.img1_url=item.only1Image
+      this.img2_url=item.only1HeadImage
+      this.img3_url=item.only1Qrcode
+      this.mainForm.backGroundColor=item.only1BackgroundColor
+    } else if(item.type==7){
+      this.img1_url=item.only2Image
+      this.img2_url=item.only2HeadImage
+      this.img3_url=item.only2Qrcode
+      this.mainForm.backGroundColor=item.only2BackgroundColor
+    } else if(item.type==8){
+      this.img1_url=item.only3Image
+      this.img2_url=item.only3HeadImage
+      this.img3_url=item.only3Qrcode
+      this.mainForm.backGroundColor=item.only3BackgroundColor
+    }else  {
+      this.img1_url=item.only4Image
+      this.img2_url=item.only4HeadImage
+      this.img3_url=item.only4Qrcode
+      this.mainForm.backGroundColor=item.only4BackgroundColor
+    }
+  },
+
+  methods: {
+    // 更改模板信息
+    editEnterpriseTemplate(params){
+      editEnterpriseTemplate(params).then(res=>{console.log('更改模板信息',res)})
+    },
+
+    // 添加活动商品
+    addActiveGoods(params){
+      addActiveGoods(params).then(res=>{
+        if(res.code==200){
+          this.$router.go(-1)
+        }
+      })
+    },
+
+    // 获取活动商品详情
+    getactivityGoodsDetail() {
+      const params = {
+        objectId: this.objectId, // 小程序模板id
+        type: this.type, // 类型: 1=新维度分类，2=首页弹窗， 3=活动专区1，4=活动专区2左侧，5=活动专区2右侧，6=专场专区1，7=专场专区2 ， 8=专场专区3 ， 9=专场专区4
+      };
+      getactivityGoodsDetail(params).then((res) => {
+        res.data.activeGoodsList.forEach(item=> {
+          item.imgUrl = item.goods.imgUrl
+        });
+
+        this.goodsList = res.data.activeGoodsList
+      });
+    },
+
+    // 重置
+    resetFn() {
+      this.mainForm.backGroundColor = "#F4F2F2";
+    },
+
+    // 删除商品
+    deleteGoods(item,index) {
+      this.goodsList.splice(index,1)
+    },
+
+    uploadImage(type) {
+      this.uploadImageType = type;
+      document.querySelector('.avatar-uploader input').click();
+    },
+
+    // 上传图片
+    uploadSuccess(res, file) {
+      this[this.uploadImageType + '_url'] = res.data.url;
+    },
+
+    beforeUpload(file) {
+      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+      const whiteList = ['jpg', 'jpeg', 'png'];
+      if (whiteList.indexOf(fileSuffix) === -1) {
+        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
+        return false;
+      }
+    },
+
+    // 预览图片
+    previewImage(type) {
+      this.$refs[type].showViewer = true;
+    },
+
+    // 删除图片
+    deleteImage(type) {
+      this[type + '_url'] = '';
+    },
+
+    // 返回
+    goBack() {
+      this.$router.go(-1);
+    },
+
+    // 获取分类列表
+    getClassifyList(state) {
+      getClassifyList({categoryLevel: 1, status: true}).then(res => {
+        res.data.forEach(item => {
+          item.isOpen = false;
+        });
+        this.classifyList = res.data;
+        this.classifyCurrent = '';
+        if(!state) {
+          this.getGoodsList();
+        }
+      })
+    },
+
+    // 展开/收起 分类
+    toggleOpen(index) {
+      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
+    },
+
+    // 切换分类
+    changeClassify(cid) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分类');
+      }
+      this.classifyCurrent = cid;
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 搜索
+    getGoodsListByScreen() {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可搜索');
+      }
+      this.table_currentPage = 1;
+      this.getGoodsList();
+    },
+
+    // 获取商品列表
+    getGoodsList() {
+      getGoodsList({
+        pageNum: this.table_currentPage,
+        pageSize: this.table_pageSize,
+        keyword: this.keyword,
+        categoryId: this.classifyCurrent,
+      }).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = res.data.records;
+        for(let i = 0; i < oldGoodsList.length; i++) {
+          let oldItem = oldGoodsList[i]
+          for(let j = 0; j < newGoodsList.length; j++) {
+            let newItem = newGoodsList[j]
+            if(newItem.goodsId === oldItem.goodsId){
+              newGoodsList[j].selected = true;
+              break;
+            }
+          }
+        }
+        for(let j = 0; j < newGoodsList.length; j++) {
+          let newItem = newGoodsList[j]
+          if(newItem.promotionGroup === true){
+            newGoodsList[j].selected = true;
+          }
+        }
+        this.table_dataList = newGoodsList;
+        this.table_listTotal = res.data.total;
+        this.table_listLoading = false;
+      })
+    },
+
+    // 查询重复值并禁选
+    checkboxSelect (row, rowIndex) {
+      if (row.selected) {
+        return false // 禁用
+      }else{
+        return true // 不禁用
+      }
+    },
+
+    // 更改列表当前页
+    handleTableCurrentChange(val) {
+      if(this.table_chooseGoods.length > 0) {
+        return this.$errorMsg('当前已选择商品，不可切换分页');
+      }
+      this.table_currentPage = val;
+      this.getGoodsList();
+    },
+
+    // table点击选择商品
+    handleChooseGoods(val) {
+      this.table_chooseGoods = val;
+    },
+
+    // 打开 选择商品
+    addGoods() {
+      this.addGoodsVisible = true;
+      this.getClassifyList();
+    },
+
+    // 取消 选择商品
+    cancelAddGoods(){
+      this.addGoodsVisible = false;
+    },
+
+    // 提交 选择商品
+    submitAddGoods() {
+      let oldGoodsList = this.goodsList;
+      let newGoodsList = this.table_chooseGoods;
+      this.goodsList = oldGoodsList.concat(newGoodsList);
+      this.addGoodsVisible = false;
+    },
+
+    // 打开 选择分类
+    addClassify() {
+      this.addClassifyVisible = true;
+      this.getClassifyList(true);
+    },
+
+    // 取消 选择分类
+    cancelAddClassify(){
+      this.addClassifyVisible = false;
+    },
+
+    // 提交 选择分类
+    submitAddClassify() {
+      if(this.$refs.tree.getCheckedNodes().length <= 0) {
+        return this.$errorMsg('请选择分类');
+      }
+      let checkeds = this.$refs.tree.getCheckedNodes();
+      let ids = [];
+      checkeds.forEach(item => {
+        if(item.level === 2) {
+          ids.push(item.categoryId);
+        }
+      })
+      getMoreGoodsList({ categoryIds: ids.join(',')}).then(res => {
+        let oldGoodsList = this.goodsList;
+        let newGoodsList = [];
+        res.data.forEach(item => {
+          if(item.promotionGroup === false) {
+            newGoodsList.push(item);
+          }
+        })
+        let allGoodsList = oldGoodsList.concat(newGoodsList);
+        let showGoodsList = [];
+        let obj = {};
+        for(var i =0; i<allGoodsList.length; i++){
+          if(!obj[allGoodsList[i].goodsId]){
+            showGoodsList.push(allGoodsList[i]);
+            obj[allGoodsList[i].goodsId] = true;
+          }
+        }
+        this.goodsList = showGoodsList;
+        this.addClassifyVisible = false;
+      })
+    },
+
+    // 提交
+    submitMainForm() {
+      this.$refs.mainForm.validate((valid) => {
+        if (valid) {
+          const params={
+            goodsList: this.goodsList,
+            objectId: this.objectId,
+            type: this.type
+          }
+          this.addActiveGoods(params)
+
+          let comParams = {
+            companyWechatTemplateId: this.objectId,
+            companyWechatId:this.companyWechatId,
+            templateType:this.useTemplate
+          }
+          let params1 = {}
+
+          if(this.type == 2){
+            params1 = {
+              popupBackgroundColor: this.mainForm.backGroundColor,
+              popupHeadImage: this.img2_url,
+              popupImage: this.img1_url,
+              popupQrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 3){
+            params1 = {
+              active1BackgroundColor: this.mainForm.backGroundColor,
+              active1HeadImage: this.img2_url,
+              active1Image: this.img1_url,
+              active1Qrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 4){
+            params1 = {
+              active2LeftBackgroundColor: this.mainForm.backGroundColor,
+              active2LeftHeadImage: this.img2_url,
+              active2LeftImage: this.img1_url,
+              active2LeftQrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 5){
+            params1 = {
+              active2RightBackgroundColor: this.mainForm.backGroundColor,
+              active2RightHeadImage: this.img2_url,
+              active2RightImage: this.img1_url,
+              active2RightQrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 6){
+            params1 = {
+              only1BackgroundColor: this.mainForm.backGroundColor,
+              only1HeadImage: this.img2_url,
+              only1Image: this.img1_url,
+              only1Qrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 7){
+            params1 = {
+              only2BackgroundColor: this.mainForm.backGroundColor,
+              only2HeadImage: this.img2_url,
+              only2Image: this.img1_url,
+              only2Qrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 8){
+            params1 = {
+              only3BackgroundColor: this.mainForm.backGroundColor,
+              only3HeadImage: this.img2_url,
+              only3Image: this.img1_url,
+              only3Qrcode: this.img3_url,
+              ...comParams
+            }
+          } else if(this.type == 9){
+            params1 = {
+              only4BackgroundColor: this.mainForm.backGroundColor,
+              only4HeadImage: this.img2_url,
+              only4Image: this.img1_url,
+              only4Qrcode: this.img3_url,
+              ...comParams
+            }
+          }
+          this.editEnterpriseTemplate(params1)
+        }
+      });
+    },
+
+
+    
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+  margin-top: 40px;
+  // padding: 0 6%;
+  .title {
+    font-size: 16px;
+    margin-bottom: 30px;
+    padding-left: 10px;
+    font-weight: bold;
+  }
+  .tips {
+    margin-top: 10px;
+    span {
+      display: inline-block;
+      width: 300px;
+      text-align: center;
+      line-height: 32px;
+      background: #ffefef;
+      font-size: 14px;
+      color: #f66460;
+    }
+  }
+  .tips2 {
+    font-size: 12px;
+    color: #999999;
+    line-height: 30px;
+  }
+  .container {
+    padding: 10px 20px 0;
+    background: #f5f5f5;
+    border-radius: 10px;
+  }
+  .addBtn {
+    padding: 10px 0;
+  }
+}
+
+.dialog-container {
+  .left {
+    width: 140px;
+    height: 350px;
+    overflow-y: scroll;
+    .group {
+      margin-top: 10px;
+    }
+    .child {
+      margin-top: 5px;
+      .item {
+        padding-left: 18px;
+      }
+    }
+    .item {
+      cursor: pointer;
+      line-height: 24px;
+    }
+  }
+  .right {
+    width: calc(100% - 140px);
+    height: 350px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+}
+
+.images {
+  display: flex;
+  flex-wrap: wrap;
+  .main-img {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    margin-right: 20px;
+    .img {
+      border: 1px dashed #eaeaea;
+      border-radius: 5px;
+      overflow: hidden;
+      position: relative;
+      .el-image {
+        display: block;
+      }
+      .mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 120px;
+        height: 120px;
+        background: rgba($color: #000000, $alpha: 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        i {
+          font-size: 20px;
+          color: #ffffff;
+          cursor: pointer;
+          margin: 0 8px;
+        }
+      }
+    }
+    .text {
+      font-size: 14px;
+      color: #666666;
+    }
+  }
+  .add {
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #eaeaea;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i {
+      font-size: 30px;
+      color: #999;
+    }
+  }
+  .tmp-img {
+    position: relative;
+    .tmp {
+      position: absolute;
+      left: 0;
+      top: 0;
+      line-height: 20px;
+      padding: 0 8px;
+      background: #f66460;
+      border-radius: 0 0 10px 0;
+      font-size: 12px;
+      color: #ffffff;
+    }
+  }
+}
+
+.classify-list {
+  height: 50vh;
+  overflow-y: scroll;
+}
+
+.diy-table {
+  overflow-x: scroll;
+  border-left: 1px solid #f5f5f5;
+  margin-top: 20px;
+  width: 100%;
+  // margin-left: 77px;
+  // min-width: 1185px;
+  max-width: 100%;
+  .table-head {
+    display: flex;
+    .item {
+      height: 40px;
+      line-height: 40px;
+      float: left;
+      font-weight: 500;
+      font-size: 14px;
+      background: #f5f5f5;
+      text-align: center;
+    }
+    .right {
+      float: left;
+      width: 94%;
+      min-width: 1150px;
+      flex-shrink: 0;
+      height: 40px;
+    }
+    .goods {
+      width: 20%;
+      min-width: 250px;
+    }
+    .name {
+      width: 11.1111%;
+      min-width: 100px;
+    }
+    .input {
+      width: 11.1111%;
+      min-width: 100px;
+    }
+    .opera {
+      width: 11.1111%;
+      min-width: 80px;
+      // text-align: right;
+    }
+    .blank {
+      width: 6%;
+      min-width: 90px;
+      font-weight: 500;
+      font-size: 14px;
+      background: #f5f5f5;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+  .goods-item {
+    display: flex;
+    align-content: center;
+    .goods-info {
+      flex-shrink: 0;
+      width: 20%;
+      min-width: 250px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #f5f5f5;
+      border-right: 1px solid #f5f5f5;
+      font-size: 14px;
+      &:last-child {
+        border-bottom: none;
+      }
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 10px;
+        flex-shrink: 0;
+      }
+    }
+    .spec-list {
+      width: 94%;
+      min-width: 1150px;
+      border-bottom: 1px solid #f5f5f5;
+      border-right: 1px solid #f5f5f5;
+      &:last-child {
+        border-bottom: none;
+      }
+      .spec-item {
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #f5f5f5;
+        &:last-child {
+          border-bottom: none;
+        }
+        .col {
+          flex-shrink: 0;
+          height: 50px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          border-right: 1px solid #f5f5f5;
+          &:last-child {
+            border-right: none;
+          }
+        }
+        .name {
+          width: 11.1111%;
+          min-width: 100px;
+          font-size: 14px;
+          text-align: center;
+        }
+        .input {
+          width: 11.1111%;
+          min-width: 100px;
+        }
+        .btn {
+          width: 11.1111%;
+          min-width: 80px;
+        }
+      }
+    }
+    .operation {
+      flex-shrink: 0;
+      width: 6%;
+      min-width: 90px;
+      padding: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid #f5f5f5;
+      border-right: 1px solid #f5f5f5;
+    }
+  }
+  .empty-text {
+    line-height: 60px;
+    text-align: center;
+    color: #909399;
+  }
+}
+
+.dialog-container {
+  .left {
+    width: 140px;
+    height: 350px;
+    overflow-y: scroll;
+    .group {
+      margin-top: 10px;
+    }
+    .child {
+      margin-top: 5px;
+      .item {
+        padding-left: 18px;
+      }
+    }
+    .item {
+      cursor: pointer;
+      line-height: 24px;
+    }
+  }
+  .right {
+    width: calc(100% - 140px);
+    height: 350px;
+    box-sizing: border-box;
+    padding-left: 20px;
+  }
+}
+
+.page-footer {
+  height: 70px;
+}
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  background: #fff;
+  padding: 15px 40px;
+  box-sizing: border-box;
+  transition: all 0.28s;
+  text-align: right;
+  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
+  &.hideSidebar {
+    margin-left: 54px;
+    width: calc(100vw - 54px);
+  }
+  &.openSidebar {
+    margin-left: 210px;
+    width: calc(100vw - 210px);
+  }
+}
+
+::v-deep input::-webkit-outer-spin-button,
+::v-deep input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+::v-deep input[type="number"] {
+  -moz-appearance: textfield;
+}
+::v-deep .el-form-item__label {
+  margin-left: 0px !important;
+}
+</style>