增加页面

src/components/StoreDesign/ShufflingFigure.vue

+<template>
+  <div class="shuffing">
+    <template>
+      <div class="head-title">
+        轮播图管理
+      </div>
+      <div class="content clearfix">
+        <div class="app-banner-list" style="float:left;" @click="isShowLunbo=true">
+          <div class="el-card app-banner-list-item" style="text-align:center;">
+            <div class="el-card__body" style="padding: 0px;">
+              <i class="el-icon-plus app-banner-add-icon"></i>
+              <div class="shuff_add">添加轮播图</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="app-banner-list">
+            <div class="el-card app-banner-list-item">
+              <div style="padding:0">
+                <div style="position: relative;"><img class="banner_topImg"
+                    src="https://cdnimg.iotweixin.com/uploads/mall1285/20200519/8d4e60ccdcc4ec7f06eb9f9a09aa116f.jpg"
+                    alt=""> 
+                    <el-tooltip slot="label" class="item" effect="dark" content="删除" placement="top">
+                        <img class="delImg" src="../../assets/img/userman/del.png" alt="">
+                    </el-tooltip>
+                </div>
+              </div>
+              <div class="banner_btmDiv">
+                <div class="app-banner-text">标题：12</div>
+                <div class="app-banner-text">路径：12</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <!-- 选择图片文件 -->
+    <el-dialog title="轮播图编辑" :visible.sync="isShowLunbo" width="960px">
+        <el-form label-width="100px" :model="addMsg" :rules="rules" ref="addMsg">
+            <el-form-item label="标题">
+                <el-input type="text" v-model="addMsg.title" size="small" maxlength="100"></el-input>
+            </el-form-item>
+            <el-form-item label="跳转链接">
+                <el-input type="text" v-model="addMsg.link" size="small" maxlength="200">
+                    <el-button slot="append" @click="isShowLink=true">选择链接</el-button>
+                </el-input>
+            </el-form-item>
+            <el-form-item label="图片" prop="imgUrl">
+              <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 350" placement="top">
+                <el-button size="mini" @click="choicImg=true">选择图片</el-button>
+              </el-tooltip>
+              <div class="zk_pic_box" flex="main:center cross:center" style="width:80px;height:80px;"
+                :style="{backgroundImage:'url(' + getIconLink(addMsg.imgUrl) + ')'}">
+                <i v-if="addMsg.imgUrl==''" class="el-icon-picture-outline"></i>
+              </div>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="isShowLunbo = false" size="small">取消</el-button>
+            <el-button type="primary" @click="addShuffImg" size="small">提交</el-button>
+        </span>
+    </el-dialog>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+    <!-- 选择链接 -->
+    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
+      <chooseMeun ref="chooseMeun"></chooseMeun>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="isShowLink=false">取 消</el-button>
+        <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import chooseMeun from "../common/chooseMeun.vue";
+  export default {
+    data() {
+      return {
+        loading: false,
+        //添加图片弹窗
+        isShowLunbo:false,
+        //选择图片弹窗
+        choicImg:false,
+        //选择链接弹窗
+        isShowLink:false,
+        dataList: [],
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+        },
+        addMsg: {
+            title:'', //标题
+            link:'', //跳转链接
+            imgUrl:'' //图片链接
+        },
+        rules: {
+          imgUrl: [{
+            required: true,
+            message: "图片不能为空",
+            trigger: "change"
+          }]
+        },
+      };
+    },
+    created() {
+
+    },
+    components: {
+      ChooseImg,
+      chooseMeun
+    },
+
+    methods: {
+      //添加图片
+      addShuffImg(){
+
+      },
+      //选择图片
+      SelectId(msg) {
+        this.addMsg.imgUrl = msg.url;
+        this.choicImg = false;
+      },
+      //获取选择链接
+      getChoiceLink() {
+        //调用子组件方法
+        var obj = this.$refs.chooseMeun.getChooseMenu();
+        this.addMsg.link = obj.PageUrl;
+        this.isShowLink = false;
+      },
+
+      getList() {
+        this.apipost("/api/Employee/GetRolePageList", this.msg, res => {
+          if (res.data.resultCode == 1) {
+            this.dataList = res.data.data.pageData;
+            this.total = res.data.data.count;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      submitform(addMsg) {
+        //提交创建、修改表单
+        this.$refs[addMsg].validate(valid => {
+          if (valid) {
+            this.addShuffImg();
+          } else {
+            return false;
+          }
+        });
+      },
+      //修改
+      EditRole(item) {
+        this.apipost("/api/Employee/GetRole", {
+          RoleId: item.RoleId
+        }, res => {
+          if (res.data.resultCode == 1) {
+            this.addMsg = res.data.data;
+            let newArr = this.addMsg.RoleAuth.split(',');
+            setTimeout(() => {
+              this.$refs.tree.setCheckedKeys(newArr);
+            }, 10)
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //删除
+      RemmoveRole(item) {
+        var that = this;
+        that.Confirm("是否要删除?", function () {
+          that.apipost("/api/Employee/RemoveRole", {
+            RoleId: item.RoleId
+          }, res => {
+            if (res.data.resultCode == 1) {
+              that.getList();
+            } else {
+              that.Info(res.data.message);
+            }
+          })
+        })
+      },
+    },
+    mounted() {
+      this.getList();
+    }
+  };
+
+</script>
+<style>
+  .shuffing .content {
+    background: #fff;
+    padding: 20px 0;
+    box-sizing: border-box;
+    margin-top: 10px;
+    min-height: 400px;
+  }
+
+  .shuffing .app-banner-list {
+    display: inline-block;
+    padding-right: 5px;
+    height: 280px;
+    width: 250px;
+    margin: 0 20px;
+    cursor: pointer;
+  }
+
+  .shuffing .app-banner-list-item {
+    height: 280px;
+    width: 250px;
+  }
+
+  .shuffing .app-banner-add-icon {
+    font-size: 62px;
+    color: #C0C4CC;
+    margin-top: 90px;
+    margin-bottom: 20px;
+  }
+
+  .shuffing .shuff_add {
+    color: rgb(192, 196, 204);
+    font-size: 16px;
+  }
+
+  .shuffing .app-banner-list-item:hover {
+    border: 1px solid #409EFF;
+  }
+
+  .shuffing .app-banner-list {
+    display: inline-block;
+    padding-right: 5px;
+    height: 280px;
+    width: 250px;
+    margin-right: 20px;
+    cursor: pointer;
+  }
+  .shuffing .app-banner-text {
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-top:10px;
+  }
+  .shuffing .delImg{
+      display: none;
+      position: absolute; 
+      bottom: 20px; 
+      right: 20px; 
+      padding: 0px;
+  }
+  .shuffing .app-banner-list:hover .delImg{
+      display: block;
+  }
+  .shuffing .banner_btmDiv{
+      height: 90px; 
+      padding: 10px; 
+      font-size: 12px; 
+      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  }
+  .shuffing .banner_topImg{
+    height: 190px; 
+    width: 250px; 
+    display: block;
+  }
+</style>

src/router/index.js

@@ -273,7 +273,12 @@ export default new Router({
           name: 'ruleSetup',
           component: resolve => require(['@/components/setup/ruleSetup'], resolve),
         },
-
+        //店铺管理 轮播图
+        {
+          path: '/ShufflingFigure',
+          name: 'ShufflingFigure',
+          component: resolve => require(['@/components/StoreDesign/ShufflingFigure'], resolve),
+        },
         //店铺管理 导航图标
         {
           path: '/navigationIcon',