开屏

src/views/carouselFigure/advertisement.vue

@@ -5,224 +5,235 @@
         <div class="flex-item flex-h">
           <el-button size="mini" type="success" @click='addDynamic'>新增</el-button>
         </div>
+        <el-select v-model="buildingId" placeholder="请选择" @change="getList">
+          <el-option
+                  v-for="item in buildingList"
+                  :key="item.buildingId"
+                  :label="item.buildingName"
+                  :value="item.buildingId">
+          </el-option>
+        </el-select>
       </div>
       <div class="moreFilter"></div>
     </div>
-    <el-table
-      :data="dynamics.list || []"
-      >
+    <el-table :data="carouselList.records || []">
       <el-table-column
-        type="index">
+              type="index">
         <template slot-scope="scope">
           <span>{{ GetIndex(scope.$index) }}</span>
         </template>
       </el-table-column>
       <el-table-column
-        label="主图">
+              label="主图">
         <template slot-scope="scope">
           <div class="header">
-            <img :src="scope.row.imgUrl" alt="" />
+            <img :src="scope.row.image" alt="" />
           </div>
         </template>
       </el-table-column>
       <el-table-column
-        prop="title"
-        label="类型">
+              prop="showType"
+              label="类型">
+        <template slot-scope="scope">{{ scope.row.showType === 'banner' ? '轮播图' : scope.row.showType === 'screen' ? '开屏' : '' }}</template>
       </el-table-column>
       <el-table-column
-        prop="createDate"
-        label="发布时间">
+              label="发布时间"
+              width="180">
+        <template slot-scope="scope">
+          <span>{{FormatDate(scope.row.createDate)}}</span>
+        </template>
       </el-table-column>
       <el-table-column
-        label="状态"
-        >
+              label="状态">
         <template slot-scope="scope">
           <span>{{scope.row.status == 1 ? '启用' : '停用'}}</span>
         </template>
       </el-table-column>
       <el-table-column
-        fixed="right"
-        label="操作"
-        width="180">
+              fixed="right"
+              label="操作"
+              width="180">
         <template slot-scope="scope">
           <el-button type="text" @click="handleEdit(scope.row)" v-if="scope.row.status === 0" size="small">编辑</el-button>
-          <el-button type="text" @click="handlePulic(scope.row)" size="small" v-if="scope.row.status === 0">启用</el-button>
-          <el-button type="text" @click="handleUnPulic(scope.row)" size="small" v-if="scope.row.status === 1">禁用</el-button>
-
+          <el-button type="text" @click="handlePulic(scope.row.contentId, 1)" size="small" v-if="scope.row.status === 0">启用</el-button>
+          <el-button type="text" @click="Prohibit(scope.row.contentId, 0)" size="small" v-if="scope.row.status === 1">禁用</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
-      small
-      style="margin-top:10px;"
-      layout="prev, pager, next"
-      :current-page.sync="currentPage"
-      :pageSize="pageSize"
-      :total="dynamics.total || 0"
-      @current-change="getList"
+            small
+            style="margin-top:10px;"
+            layout="prev, pager, next"
+            :current-page.sync="currentPage"
+            :pageSize="pageSize"
+            :total="carouselList.total || 0"
+            @current-change="getList"
     >
     </el-pagination>
   </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from 'vuex';
+  import { createNamespacedHelpers } from "vuex";
+  import dayjs from 'dayjs'
 
-const {mapState: mapDynamicState, mapActions: mapDynamicActions} = createNamespacedHelpers('dynamic')
-const {mapState: mapBuildingState, mapActions: mapBuildingActions} = createNamespacedHelpers('building')
+  const {
+    mapState: mapCarouselFigureState,
+    mapActions: mapCarouselFigureActions
+  } = createNamespacedHelpers("carouselFigure");
 
-export default {
-  data() {
-    return {
-      pageSize: 20,
-      currentPage: 1,
-      name: '',
-      buildingId: '',
-    }
-  },
-  computed: {
-    ...mapDynamicState({
-      dynamics: x => x.dynamics
-    }),
-    ...mapBuildingState({
-      buildings: x => x.buildings
-    })
-  },
-  methods: {
-    ...mapDynamicActions([
-      'getDynamics',
-      'setDetailNull',
-      'deleteDynamics',
-      'publicDynamic',
-      'cancelDynamic'
-    ]),
-    ...mapBuildingActions([
-      'getBuildings',
-    ]),
-    GetIndex (inx) {
-      return (this.currentPage - 1) * this.pageSize + inx + 1
-    },
-    FormatDate (date) {
-      if (date) {
-        return dayjs(date).formate('yyyy-MM-DD HH:mm:ss')
-      } else {
-        return ''
-      }
+  const {
+    mapState: mapBuildingState,
+    mapActions: mapBuildingActions
+  } = createNamespacedHelpers("building");
+
+  export default {
+    data() {
+      return {
+        pageSize: 20,
+        currentPage: 1,
+        name: "",
+        buildingId: "",
+        buildingList: [], // 所属项目
+        buildingForm: { // 所属项目条件
+          pageNum: 1,
+          pageSize: 100
+        },
+      };
     },
-    getList () {
-      this.getDynamics({
-        pageNum: this.currentPage,
-        pageSize: this.pageSize,
-        name: this.name,
-        buildingId: this.buildingId
+    computed: {
+      ...mapCarouselFigureState({
+        carouselList: x => x.carouselList
+      }),
+      ...mapBuildingState({
+        buildings: x => x.buildings
       })
     },
-    getBuildingName (id) {
-      return ((this.buildings.list || []).filter(x => x.buildingId === id)[0] || {}).buildingName || ''
-    },
-    search () {
-      this.currentPage = 1
-      this.getList()
-    },
-    handleEdit (row) {
-      this.setDetailNull()
-      this.$router.push({name: 'advertisementEdit', query: {id: row.dynamicId}})
-    },
-    handlePulic (row) {
-      this.$confirm('确认发布此数据?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.publicDynamic({
-          id: row.dynamicId
+    methods: {
+      ...mapCarouselFigureActions(["getExtendContent","handleExtendContent"]),
+      ...mapBuildingActions(["getBuildings"]),
+      GetIndex(inx) {
+        return (this.currentPage - 1) * this.pageSize + inx + 1;
+      },
+      FormatDate(date) {
+        if (!date || date.indexOf('0001-') > -1) return ''
+
+        return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+      },
+
+      getList() {
+        this.getExtendContent({
+          pageNum: this.currentPage,
+          pageSize: this.pageSize,
+          buildingId: this.buildingId,
+          showType: 'screen'
+        });
+      },
+      getBuildingName(id) {
+        return (
+                ((this.buildings.list || []).filter(x => x.buildingId === id)[0] || {})
+                        .buildingName || ""
+        );
+      },
+      search() {
+        this.currentPage = 1;
+        this.getList();
+      },
+      handleEdit(row) {
+        this.$router.push({ name: "advertisementEdit", query: { id: row.contentId } });
+      },
+      handlePulic(contentId, status) {
+        this.$confirm("确认发布此数据?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
         }).then(() => {
-          this.getList()
-        })
-      })
-    },
-    handleUnPulic (row) {
-      this.$confirm('确认取消发布此数据?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.cancelDynamic({
-          id: row.dynamicId}).then(() => {
-          this.getList()
-        })
-      })
-    },
-    handleDel (row) {
-      this.$confirm('确认删除此数据?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        if (row.status === 1) {
-          this.$message.error('当前活动处于发布状态，不允许删除！')
-          return false
-        }
-        this.deleteDynamics({
-          id: row.dynamicId
+          this.updateExtendContent(contentId, status)
+        });
+      },
+      Prohibit(contentId, status) {
+        this.$confirm("确认停用此轮播图?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.updateExtendContent(contentId, status)
+        });
+      },
+      handleDel(contentId, status) {
+        this.$confirm("确认删除此数据?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
         }).then(() => {
-          this.getList()
+          if (row.status === 1) {
+            this.$message.error("当前活动处于发布状态，不允许删除！");
+            return false;
+          }
+        });
+      },
+      updateExtendContent(contentId, status) { // 修改轮播状态
+        this.$store.dispatch('carouselFigure/updateExtendContent', { contentId: contentId, status: status }).then((res) => {
+          this.getList();
+        }).catch(() =>{
+          console.log('carouselFigure/updateExtendContent err')
         })
-      })
+      },
+      addDynamic() {
+        this.$router.push({ name: "advertisementEdit" });
+      },
+      getBuildList() {
+        this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
+          this.buildingList = res.records
+        }).catch(() => {
+          console.log('building/getBuildings err')
+        })
+      },
     },
-    addDynamic () {
-      this.setDetailNull()
-      this.$router.push({name: 'advertisementEdit'})
+    created() {
+      this.getBuildList()
+      this.getList();
     }
-  },
-  created () {
-    this.getBuildings({
-      pageNum: 1,
-      pageSize: 100,
-    }).then(() => {
-      this.getList()
-    })
-  }
-}
+  };
 </script>
 
 <style lang="scss" scoped>
-.header{
-  width: 50px;
-  height: 50px;
-  img{
-    width: 100%;
-    height: 100%;
+  .header {
+    width: 50px;
+    height: 50px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
-}
 
-.system-table-search{
-  width: calc(100% - 40px);
-  margin: 20px auto 0;
-}
+  .system-table-search {
+    width: calc(100% - 40px);
+    margin: 20px auto 0;
+  }
 
-.system-table-search li{
-  margin-right: 20px;
-}
+  .system-table-search li {
+    margin-right: 20px;
+  }
 
-.system-table-search ul{
-  font-size: 0;
-  white-space: nowrap;
-}
+  .system-table-search ul {
+    font-size: 0;
+    white-space: nowrap;
+  }
 
-.system-table-search ul>li{
-  display: inline-block;
-}
+  .system-table-search ul > li {
+    display: inline-block;
+  }
 
-.flex-h {
-  display: flex;
-  display: -webkit-flex;
-}
+  .flex-h {
+    display: flex;
+    display: -webkit-flex;
+  }
 
-.flex-item {
-  flex: 1;
-  -webkit-flex: 1;
-  position: relative;
-  overflow: hidden;
-}
+  .flex-item {
+    flex: 1;
+    -webkit-flex: 1;
+    position: relative;
+    overflow: hidden;
+  }
 </style>

src/views/carouselFigure/advertisementEdit.vue

@@ -1,454 +1,546 @@
 <template>
-    <div class="edit-carousel">
-      <el-form ref="form" :model="building" label-width="180px">
-        <el-form-item label="所属项目：">
-          <el-select v-model="buildingProperty" multiple placeholder="请选择">
-            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="主图：">
-          <el-upload
-            :action="upFileUrl"
-            name='file'
-            list-type="picture-card"
-            :headers="uploadHeaders"
-            :file-list="imgList"
-            :show-file-list="true"
-            :before-upload="beforeImgUpload"
-            :on-success="handleAvatarSuccess"
-            :on-remove="handleRemove">
-            <i class="el-icon-plus"></i>
-          </el-upload>
-          <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="">
-          </el-dialog>
-        </el-form-item>
-        <el-form-item label="标题：">
-          <el-input v-model="building.tel"></el-input>
-        </el-form-item>
-        <el-form-item label="类型：">
-          <el-select v-model="buildingProperty" multiple placeholder="请选择">
-            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发布内容：">
-          <div id="websiteEditorElem" style="height: 400px"></div>
-        </el-form-item>
-        <el-form-item label="发布内容：" class="publish">
-          <p>活动名称展示处<span class="choose" v-popover:popover4>{{showPlace?showPlace:'请选择'}}</span></p>
-          <el-popover ref="popover4"  placement="right"  width="560" v-model="popover4"  trigger="click">
-            <el-table :data="gridData">
-            <el-table-column width="360" property="name" label="标题"></el-table-column>
-            <el-table-column width="200" label="操作">
-              <template slot-scope="scope">
-                <el-button type="text" @click="handleEdit(scope.row)" size="small">选择</el-button>
-        </template>
-            </el-table-column>
-            </el-table>
-          </el-popover>
-        </el-form-item>
-        <el-form-item label="状态：">
-          <el-select v-model="buildingProperty" multiple placeholder="请选择">
-            <el-option v-for="(t,i) in propertyType" :key="i" :label="t.name" :value="t.id"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSubmit">保存</el-button>
-          <el-button @click="onCancel">取消</el-button>
-        </el-form-item>
-      </el-form>
-    </div>    
+  <div class="edit-carousel">
+    <el-form ref="form" :model="form" label-width="180px">
+      <el-form-item label="所属项目：">
+        <el-select v-model="form.buildingId" placeholder="请选择">
+          <el-option
+                  v-for="item in buildingList"
+                  :key="item.buildingId"
+                  :label="item.buildingName"
+                  :value="item.buildingId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="主图：">
+        <el-upload
+                :headers="uploadHeaders"
+                :action="upFileUrl"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="标题：">
+        <el-input v-model="form.title"></el-input>
+      </el-form-item>
+      <el-form-item label="发布位置：">
+        <el-select v-model="form.showPosition" placeholder="请选择">
+          <el-option v-for="(item,i) in showPositionList" :key="i" :label="item.name" :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="类型：">
+        <el-select v-model="form.contentType" placeholder="请选择">
+          <el-option v-for="(t,i) in contentTypeList" :key="i" :label="t.name" :value="t.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发布内容：" v-if=" form.contentType === 'other'">
+        <rich-editor v-model="form.content" style="height: 400px; width: 1000px;" />
+      </el-form-item>
+      <el-form-item label="发布活动：" class="publish" v-if=" form.contentType === 'activity'">
+        <p>{{ showPlace }}<span class="choose" @click="showDial">请选择</span></p>
+      </el-form-item>
+      <el-form-item label="状态：">
+        <el-select v-model="form.status" placeholder="请选择">
+          <el-option v-for="(t,i) in extendContentStatus" :key="i" :label="t.name" :value="t.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitAddOrUpdate">保存</el-button>
+        <el-button @click="onCancel">取消</el-button>
+      </el-form-item>
+
+
+      <el-dialog title="选择活动" :visible.sync="dialogTableVisible">
+        <el-table :data="activityList">
+          <el-table-column property="title" label="活动名称"></el-table-column>
+          <el-table-column fixed="right" label="操作">
+            <template slot-scope="scope">
+              <el-button type="text" @click="handleDel(scope.row)" size="small">选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+                @size-change="dialogHandleSizeChange"
+                @current-change="dialogHandleCurrentChange"
+                :current-page.sync="activityForm.pageNum"
+                :page-size="activityForm.pageSize"
+                layout="total, prev, pager, next"
+                :total="activityTotal">
+        </el-pagination>
+      </el-dialog>
+    </el-form>
+  </div>
 </template>
 
 <script>
-import { createNamespacedHelpers } from "vuex";
-import apis from "../../config/api";
-import { mapState } from "vuex";
-import E from "wangeditor";
+  import { createNamespacedHelpers } from "vuex";
+  import apis from "../../config/api";
+  import { mapState } from "vuex";
+  import E from "wangeditor";
 
-const {
-  mapState: mapBuildingState,
-  mapActions: mapBuildingActions,
-  mapMutations: mapBuildingMutations
-} = createNamespacedHelpers("building");
+  const {
+    mapState: mapBuildingState,
+    mapActions: mapBuildingActions,
+    mapMutations: mapBuildingMutations
+  } = createNamespacedHelpers("building");
 
-const { mapActions: mapApartmentActions } = createNamespacedHelpers(
-  "apartment"
-);
+  const { mapActions: mapApartmentActions } = createNamespacedHelpers(
+          "apartment"
+  );
 
-const { mapActions: mapImgActions } = createNamespacedHelpers("img");
+  const { mapActions: mapImgActions } = createNamespacedHelpers("img");
 
-export default {
-  data() {
-    var _self = this;
-    return {
-      popover4:false,//弹框
-      showPlace:'',//活动名称展示处
-      gridData: [
-        {
-          date: "2016-05-02",
-          name: "高奢生活，在遇到它之前你想象不到"
+  export default {
+    data() {
+      var _self = this;
+      return {
+        form: {
+          contentId: '',
+          buildingId: '',
+          image: '',
+          title: '',
+          showPosition: '',
+          contentType: '',
+          content: '',
+          status: 0,
+          targetId: '',
+          showType: 'banner'
         },
-        {
-          date: "2016-05-04",
-          name: "欢乐套圈圈，福利大放送"
+        imageUrl: '',
+        buildingList: [], // 所属项目
+        buildingForm: { // 所属项目条件
+          pageNum: 1,
+          pageSize: 100
         },
-        {
-          date: "2016-05-01",
-          name: "上海市普陀区金沙江路 1518 弄"
-        }
-      ],
-      upFileUrl: apis.file.upload.url,
-      commPrefix: "",
-      imgurl: "",
-      loadingZm: false,
-      activeName: "detail",
-      dialogImageUrl: "",
-      dialogVisible: false,
-      dialogApartImageUrl: "",
-      dialogApartVisible: false,
-      showHx: false,
-      imgList: [],
-      tags: [],
-      buildingProperty: [],
-      aparments: [],
-      aparmentInfo: {},
-      aparmentImg: [],
-      saleType: [
-        {
-          id: 1,
-          name: "待定"
+        showPositionList: [
+          {
+            name: '首页',
+            value: 'index'
+          },
+          {
+            name: '商城',
+            value: 'mall'
+          }
+        ],
+        contentTypeList: [
+          {
+            name: '活动',
+            value: 'activity'
+          },
+          {
+            name: '项目',
+            value: 'project'
+          },
+          {
+            name: '资讯',
+            value: 'news'
+          },
+          {
+            name: '其他',
+            value: 'other'
+          }
+        ],
+        extendContentStatus: [ // 状态
+          {
+            name: "启用",
+            value: 1
+          },
+          {
+            name: "停用",
+            value: 0
+          },
+        ],
+        activityForm: { // 活动查询条件
+          pageNum: 1,
+          pageSize: 10
         },
-        {
-          id: 2,
-          name: "售罄"
-        },
-        {
-          id: 3,
-          name: "在售"
-        }
-      ]
-    };
-  },
-  computed: {
-    ...mapBuildingState({
-      detail: x => x.detail
-    }),
-    ...mapState({
-      dicts: x => x.dicts
-    }),
-    building: {
-      get() {
-        return this.detail;
-      },
-      set(val) {
-        return this.updateDetail(val);
-      }
-    },
-    propertyType() {
-      return (this.dicts || []).filter(x => x.type === "propertyType");
-    },
-    uploadHeaders() {
-      const token = localStorage.getItem("x-token") || "";
-      return {
-        Authorization: `Bearer ${token}`
-      };
-    }
-  },
-  methods: {
-    ...mapBuildingMutations(["updateDetail"]),
-    ...mapBuildingActions(["getDetail", "addBuilding", "editBuilding"]),
-    ...mapApartmentActions([
-      "getApartments",
-      "getApartmentDetail",
-      "addApartment",
-      "editApartment",
-      "deleteApartment"
-    ]),
-    ...mapImgActions(["uploadImg"]),
-    getSaleTypeName(id) {
-      return (this.saleType.filter(x => x.id == id)[0] || {}).name;
-    },
-    onCancel() {
-      this.$router.push({ name: "buildinglist" });
-    },
-    handleRemove(file, fileList) {
-      this.imgList = fileList;
-    },
-    handleAparmentRemove(file, fileList) {
-      this.aparmentImg = fileList;
-    },
+        activityTotal: 0, // 活动总数
+        dialogTableVisible: false, //选择活动弹框
+        activityList: [], // 活动列表
 
-    beforeImgUpload(file) {
-      if (file.type !== "image/jpeg" && file.type !== "image/png") {
-        this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
-        return false;
-      }
-      // if (file.size / 1024 > 300) {
-      //   this.$message.error('图片大小不允许超过300k!')
-      //   return false
-      // }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中...",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)"
-      });
 
-      return true;
-    },
-    handleAvatarSuccess(res) {
-      this.imgList = [
-        ...this.imgList,
-        {
-          url: res.data
-        }
-      ];
-      this.loading.close();
-    },
-    handleMapImgSuccess(res) {
-      this.building = { ...this.building, mapImg: res.data };
-      this.loading.close();
-    },
-    handlePosterSuccess(res) {
-      this.building = { ...this.building, poster: res.data };
-      this.loading.close();
-    },
-    handleAparmentSuccess(res) {
-      this.aparmentImg = [
-        ...this.aparmentImg,
-        {
-          url: res.data
-        }
-      ];
-      this.loading.close();
-    },
-    onSubmit() {
-      const imgs = this.imgList.map((x, i) => {
-        return {
-          imgType: "banner",
-          url: x.url,
-          orderNo: i + 1
-        };
-      });
-      const tag = this.tags.map(x => {
-        return {
-          tagName: x
-        };
-      });
-      const building = {
-        ...this.building,
-        img: imgs,
-        propertyType: this.buildingProperty.join(","),
-        tag
+
+
+
+
+        // 下面的不敢删除
+        popover4:false,//弹框
+        showPlace:'',//活动名称展示处
+        gridData: [
+          {
+            date: "2016-05-02",
+            name: "高奢生活，在遇到它之前你想象不到"
+          },
+          {
+            date: "2016-05-04",
+            name: "欢乐套圈圈，福利大放送"
+          },
+          {
+            date: "2016-05-01",
+            name: "上海市普陀区金沙江路 1518 弄"
+          }
+        ],
+        upFileUrl: apis.file.upload.url,
+        commPrefix: "",
+        imgurl: "",
+        loadingZm: false,
+        activeName: "detail",
+        dialogImageUrl: "",
+        dialogVisible: false,
+        dialogApartImageUrl: "",
+        dialogApartVisible: false,
+        showHx: false,
+        imgList: [],
+        tags: [],
+        buildingProperty: [],
+        aparments: [],
+        aparmentInfo: {},
+        aparmentImg: [],
+        saleType: [
+          {
+            id: 1,
+            name: "待定"
+          },
+          {
+            id: 2,
+            name: "售罄"
+          },
+          {
+            id: 3,
+            name: "在售"
+          }
+        ]
       };
-      if (!building.buildingId) {
-        // 新增
-        this.addBuilding({
-          onSuccess: this.onCancel,
-          detail: JSON.stringify(building)
-        });
-      } else {
-        // 修改
-        this.editBuilding({
-          onSuccess: this.onCancel,
-          detail: JSON.stringify(building)
-        });
-      }
     },
-    FormatDate(date) {
-      return (date || "").split("T")[0] === "0001-01-01"
-        ? ""
-        : (date || "").split("T")[0];
-    },
-    saveAparment() {
-      const imgs = this.aparmentImg.map((x, i) => {
+    computed: {
+      ...mapBuildingState({
+        detail: x => x.detail
+      }),
+      ...mapState({
+        dicts: x => x.dicts
+      }),
+      building: {
+        get() {
+          return this.detail;
+        },
+        set(val) {
+          return this.updateDetail(val);
+        }
+      },
+      propertyType() {
+        return (this.dicts || []).filter(x => x.type === "propertyType");
+      },
+      uploadHeaders() {
+        const token = localStorage.getItem("x-token") || "";
         return {
-          imgType: "aparment",
-          url: x.url,
-          orderNo: i + 1
+          Authorization: `Bearer ${token}`
         };
-      });
-      if (!this.aparmentInfo.apartmentId) {
-        this.addApartment(
-          JSON.stringify({
-            ...this.aparmentInfo,
-            img: imgs
-          })
-        ).then(() => {
-          this.getAparmentList();
-          this.showHx = false;
-        });
-      } else {
-        this.editApartment(
-          JSON.stringify({
-            ...this.aparmentInfo,
-            img: imgs
-          })
-        ).then(() => {
-          this.getAparmentList();
-          this.showHx = false;
-        });
       }
     },
-    addHx() {
-      this.aparmentImg = [];
-      this.aparmentInfo = { buildingId: this.building.buildingId };
-      this.showHx = true;
-    },
-    getAparmentList() {
-      this.getApartments({ buildingId: this.$route.query.id }).then(data => {
-        this.aparments = data;
-      });
-    },
-    handleEdit(row){
-      this.showPlace = row.name
-      this.popover4 = false
-
+    methods: {
+      ...mapBuildingMutations(["updateDetail"]),
+      ...mapBuildingActions(["getDetail", "addBuilding", "editBuilding"]),
+      ...mapApartmentActions([
+        "getApartments",
+        "getApartmentDetail",
+        "addApartment",
+        "editApartment",
+        "deleteApartment"
+      ]),
+      ...mapImgActions(["uploadImg"]),
+      getSaleTypeName(id) {
+        return (this.saleType.filter(x => x.id == id)[0] || {}).name;
+      },
+      onCancel() {
+        this.$router.push({ name: "buildinglist" });
+      },
+      handleRemove(file, fileList) {
+        this.imgList = fileList;
+      },
+      handleAparmentRemove(file, fileList) {
+        this.aparmentImg = fileList;
+      },
 
-    },
-    // handleEdit(row) {
-    //   this.aparmentImg = [];
-    //   this.getApartmentDetail({
-    //     id: row.apartmentId
-    //   }).then(data => {
-    //     console.log("...", data);
-    //     this.aparmentImg = data.buildingImgList.map(x => {
-    //       return {
-    //         name: x.imgId,
-    //         url: x.url
-    //       };
-    //     });
-    //     this.aparmentInfo = data;
-    //     this.showHx = true;
-    //   });
-    // },
-    handleDel(row) {
-      this.$confirm("确认删除此数据?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        if (this.building.status === 1) {
-          this.$message.error("当前楼盘处于发布状态，不允许删除！");
+      beforeImgUpload(file) {
+        if (file.type !== "image/jpeg" && file.type !== "image/png") {
+          this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
           return false;
         }
-        this.deleteApartment({
-          id: row.apartmentId
-        }).then(() => {
-          this.getAparmentList();
+        // if (file.size / 1024 > 300) {
+        //   this.$message.error('图片大小不允许超过300k!')
+        //   return false
+        // }
+        this.loading = this.$loading({
+          lock: true,
+          text: "上传中...",
+          spinner: "el-icon-loading",
+          background: "rgba(0, 0, 0, 0.7)"
         });
-      });
-    }
-  },
-  mounted() {
-    const _that = this;
-    const phoneEditor = new E("#websiteEditorElem");
-    phoneEditor.customConfig.onchange = function(html) {
-      _that.building = { ..._that.building, remark: html };
-    };
-    phoneEditor.customConfig.customUploadImg = function(files, insert) {
-      _that.uploadImg(files[0]).then(data => {
-        insert(data[0]);
-      });
-    };
-    phoneEditor.customConfig.menus = [
-      "head", // 标题
-      "bold", // 粗体
-      "fontSize", // 字号
-      "fontName", // 字体
-      "italic", // 斜体
-      "underline", // 下划线
-      "strikeThrough", // 删除线
-      "foreColor", // 文字颜色
-      "backColor", // 背景颜色
-      "justify", // 对齐方式
-      "image" // 插入图片
-    ];
-    phoneEditor.create();
-    if ((this.$route.query.id || "") !== "") {
-      this.getAparmentList();
-      window.console.log(this.getDetail);
-      this.getDetail({ id: this.$route.query.id }).then(data => {
-        this.buildingProperty = data.propertyType.split(",");
-        phoneEditor.txt.html(data.remark);
-        this.imgList = data.buildingImg.map(x => {
+
+        return true;
+      },
+      handleAvatarSuccess(res) {
+        this.imageUrl = res.data
+        this.form.image = res.data
+      },
+      handleMapImgSuccess(res) {
+        this.building = { ...this.building, mapImg: res.data };
+        this.loading.close();
+      },
+      handlePosterSuccess(res) {
+        this.building = { ...this.building, poster: res.data };
+        this.loading.close();
+      },
+      handleAparmentSuccess(res) {
+        this.aparmentImg = [
+          ...this.aparmentImg,
+          {
+            url: res.data
+          }
+        ];
+        this.loading.close();
+      },
+      onSubmit() {
+        const imgs = this.imgList.map((x, i) => {
+          return {
+            imgType: "banner",
+            url: x.url,
+            orderNo: i + 1
+          };
+        });
+        const tag = this.tags.map(x => {
+          return {
+            tagName: x
+          };
+        });
+        const building = {
+          ...this.building,
+          img: imgs,
+          propertyType: this.buildingProperty.join(","),
+          tag
+        };
+        if (!building.buildingId) {
+          // 新增
+          this.addBuilding({
+            onSuccess: this.onCancel,
+            detail: JSON.stringify(building)
+          });
+        } else {
+          // 修改
+          this.editBuilding({
+            onSuccess: this.onCancel,
+            detail: JSON.stringify(building)
+          });
+        }
+      },
+      FormatDate(date) {
+        return (date || "").split("T")[0] === "0001-01-01"
+                ? ""
+                : (date || "").split("T")[0];
+      },
+      saveAparment() {
+        const imgs = this.aparmentImg.map((x, i) => {
           return {
-            name: x.imgId,
-            url: x.url
+            imgType: "aparment",
+            url: x.url,
+            orderNo: i + 1
           };
         });
-        this.tags = data.buildingTag.map(x => x.tagName);
-      });
-    } else {
-      phoneEditor.txt.html("");
+        if (!this.aparmentInfo.apartmentId) {
+          this.addApartment(
+                  JSON.stringify({
+                    ...this.aparmentInfo,
+                    img: imgs
+                  })
+          ).then(() => {
+            this.getAparmentList();
+            this.showHx = false;
+          });
+        } else {
+          this.editApartment(
+                  JSON.stringify({
+                    ...this.aparmentInfo,
+                    img: imgs
+                  })
+          ).then(() => {
+            this.getAparmentList();
+            this.showHx = false;
+          });
+        }
+      },
+      addHx() {
+        this.aparmentImg = [];
+        this.aparmentInfo = { buildingId: this.building.buildingId };
+        this.showHx = true;
+      },
+      getAparmentList() {
+        this.getApartments({ buildingId: this.$route.query.id }).then(data => {
+          this.aparments = data;
+        });
+      },
+      handleEdit(row){
+        this.showPlace = row.name
+        this.popover4 = false
+
+
+      },
+      // handleEdit(row) {
+      //   this.aparmentImg = [];
+      //   this.getApartmentDetail({
+      //     id: row.apartmentId
+      //   }).then(data => {
+      //     console.log("...", data);
+      //     this.aparmentImg = data.buildingImgList.map(x => {
+      //       return {
+      //         name: x.imgId,
+      //         url: x.url
+      //       };
+      //     });
+      //     this.aparmentInfo = data;
+      //     this.showHx = true;
+      //   });
+      // },
+      handleDel(row) { // 选择
+        this.form.targetId = row.dynamicId
+        this.showPlace = row.title
+        this.dialogTableVisible = false
+      },
+
+      showDial() { // 显示活动弹窗
+        this.dialogTableVisible = true
+        this.getActivityList()
+      },
+      getExtendContentById() {
+        this.$store.dispatch('carouselFigure/getByIdExtendContent', this.form).then((res) => {
+          console.log('carouselFigure/getByIdExtendContent', res)
+          this.form = res
+          this.imageUrl = res.image
+          this.showPlace = res.targetName
+        }).catch(() => {
+          console.log('carouselFigure/getByIdExtendContent err')
+        })
+      },
+      getBuildList() {
+        this.$store.dispatch('building/getBuildings', this.buildingForm).then((res) => {
+          this.buildingList = res.records
+        }).catch(() => {
+          console.log('building/getBuildings err')
+        })
+      },
+      getActivityList() { // 活动列表
+        this.$store.dispatch('activity/getActivityList',this.activityForm).then(res => {
+          this.activityList = res.list;
+          this.activityForm.pageSize = res.pageSize
+          this.activityForm.pageNum = res.pageNum
+          this.activityTotal = res.total
+        }).catch(err => {
+          this.$notify.error(err.msg || err.message);
+        });
+      },
+      dialogHandleSizeChange(value) {
+        this.activityForm.pageSize = value
+        this.getActivityList()
+      },
+      dialogHandleCurrentChange(value) {
+        this.activityForm.pageNum = value
+        this.getActivityList()
+      },
+      submitAddOrUpdate() { // 添加或者修改
+
+        // 添加
+        if (this.form.contentId === undefined || this.form.contentId === '') {
+          this.$store.dispatch('carouselFigure/addExtendContent', this.form).then((res) => {
+            this.$message.success('操作成功')
+            this.$router.go(-1)
+          }).catch(() => {
+
+          })
+          return
+        }
+
+        // 修改
+        this.$store.dispatch('carouselFigure/updateExtendContent', this.form).then((res) => {
+          this.$message.success('操作成功')
+          this.$router.go(-1)
+        }).catch(() => {
+          console.log('carouselFigure/updateExtendContent err')
+        })
+      },
+
+    },
+    created() {
+      this.form.contentId = this.$route.query.id
+      if (this.$route.query.id !== undefined) {
+        this.getExtendContentById()
+      }
+      this.getBuildList()
     }
-  }
-};
+  };
 </script>
 
 <style lang="scss">
-.header {
-  width: 50px;
-  height: 50px;
-  img {
-    width: 100%;
-    height: 100%;
+  .header {
+    width: 50px;
+    height: 50px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
-}
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409eff;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-}
-.avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-.edit-carousel {
-  .el-select {
-    max-width: 300px !important;
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
   }
-  .el-input {
-    max-width: 400px;
+  .avatar-uploader .el-upload:hover {
+    border-color: #409eff;
   }
-  .publish {
-    p {
-      margin: 0;
-      font-size: 15.4px;
-      .choose {
-        color: blue;
-        margin-left: 15px;
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  .edit-carousel {
+    .el-select {
+      max-width: 300px !important;
+    }
+    .el-input {
+      max-width: 400px;
+    }
+    .publish {
+      p {
+        margin: 0;
+        font-size: 15.4px;
+        .choose {
+          color: blue;
+          margin-left: 15px;
+        }
       }
     }
   }
-}
-.el-popover {
-  z-index: 10004 !important;
-  .el-table .cell{
-    text-align: center;
+  .el-popover {
+    z-index: 10004 !important;
+    .el-table .cell{
+      text-align: center;
+    }
   }
-}
 
-.el-select-dropdown {
-  z-index: 10003 !important;
-}
+  .el-select-dropdown {
+    z-index: 10003 !important;
+  }
 
-.el-date-picker {
-  z-index: 10002 !important;
-}
+  .el-date-picker {
+    z-index: 10002 !important;
+  }
 </style>

src/views/carouselFigure/list.vue

@@ -34,7 +34,7 @@
       <el-table-column
         prop="showType"
         label="类型">
-        <template slot-scope="scope">{{ scope.row.showType === 'banner' ? '轮播图' : '' }}</template>
+        <template slot-scope="scope">{{ scope.row.showType === 'banner' ? '轮播图' : scope.row.showType === 'screen' ? '开屏' : '' }}</template>
       </el-table-column>
       <el-table-column
         prop="showPosition"
@@ -131,7 +131,8 @@ export default {
       this.getExtendContent({
         pageNum: this.currentPage,
         pageSize: this.pageSize,
-        buildingId: this.buildingId
+        buildingId: this.buildingId,
+        showType: 'banner'
       });
     },
     getBuildingName(id) {