新增授权页

src/components/Ftemplate.vue

@@ -183,7 +183,7 @@
           <li class="menu_item" :class="{'Fchecked':isChecked==3}" @click="isChecked=3,CommonJump('CustomPage')">
             <i class="el-icon-menu"></i><span>自定义页面</span>
           </li>
-          <li class="menu_item" :class="{'Fchecked':isChecked==4}" @click="isChecked=4">
+          <li class="menu_item" :class="{'Fchecked':isChecked==4}" @click="isChecked=4,CommonJump('authorization')">
             <i class="el-icon-menu"></i><span>授权页面</span>
           </li>
           <li style="display:none;" class="menu_item" :class="{'Fchecked':isChecked==5}" @click="isChecked=5">

src/components/sallCenter/authorization.vue

+<template>
+  <div class="authoriza">
+    <template>
+      <div class="head-title">
+        授权自定义
+      </div>
+      <div class="content">
+        <div style="display:flex;" flex="box:first">
+          <div class="Auth_outside">
+            <div flex="dir:left main:center cross:center" class="inside">
+              <img v-if="addMsg.imgUrl!=''" class="authPic" :src="getIconLink(addMsg.imgUrl)" alt="">
+              <img v-else class="authPic" :src="domainManager().ImageUrl+'/Static/auth-default.png'" alt="" />
+            </div>
+          </div>
+          <div class="Auth_right">
+            <el-card shadow="never">
+              <div slot="header">设置</div>
+              <el-form label-width="100px">
+                <el-form-item label="是否开启">
+                  <el-switch v-model="addMsg.isOpen" :active-value="1" :inactive-value="0"></el-switch>
+                </el-form-item>
+                <el-form-item label="上传图片">
+                  <el-tooltip class="item" effect="dark" content="推荐尺寸650*700" placement="bottom">
+                    <el-button size="mini" @click="choicImg=true">选择文件</el-button>
+                  </el-tooltip>
+                  <div class="Auth_imgList" flex="main:center cross:center" v-if="addMsg.imgUrl!=''">
+                    <img :src="getIconLink(addMsg.imgUrl)" alt="">
+                    <el-button type="danger" v-if="addMsg.imgUrl!=''" class="image-delete" size="mini"
+                    icon="el-icon-close" @click.stop="addMsg.imgUrl=''" circle></el-button>
+                  </div>
+                </el-form-item>
+                <el-form-item label="热区">
+                    <choiceArea :multiple="true" :max="2" :pic-url="addMsg.imgUrl==''?domainManager().ImageUrl+'/Static/auth-default.png':getIconLink(addMsg.imgUrl)" mode='auth' :hotspot-array="addMsg.hotspot"
+                        width="650px" height="700px" @confirm="selectHotspot" :is-link="false">
+                        <el-button size="mini">划分热区</el-button>
+                    </choiceArea>
+                    <div>注：需要划分两个热区：一个是登录按钮热区，一个是暂不登录按钮热区</div>
+                </el-form-item>
+              </el-form>
+            </el-card>
+            <el-button type="primary" style="margin-top:20px;padding:9px 25px" size="small" @click="saveMsg">保存</el-button>
+          </div>
+        </div>
+      </div>
+    </template>
+    <!-- 选择图片文件 -->
+    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  import choiceArea from "../common/choiceArea.vue";
+  export default {
+    data() {
+      return {
+        choicImg: false,
+        dataList: [],
+        msg: {
+          pageIndex: 1,
+          pageSize: 15,
+          Name: "",
+        },
+        addMsg: {
+          isOpen: 0, //是否开启
+          imgUrl: '', //图片
+          hotspot: [] //热区
+        },
+      };
+    },
+    created() {
+
+    },
+    components: {
+      ChooseImg,
+      choiceArea
+    },
+    methods: {
+      //保存
+      saveMsg() {
+        this.apipost("/api/Tenant/SetMallMagic", this.addMsg, res => {
+          if (res.data.resultCode == 1) {
+            this.getList();
+            this.clearInfo();
+            this.authorizaAdd = true;
+          } else {
+            this.Info(res.data.message);
+          }
+        })
+      },
+      //选择图片
+      SelectId(msg) {
+        this.addMsg.imgUrl = msg.url;
+        this.choicImg = false;
+      },
+     // 热区选择(edit)
+      selectHotspot(list) {
+        this.addMsg.hotspot = list;
+      },
+
+    },
+    mounted() {
+    }
+  };
+
+</script>
+<style>
+  .authoriza .content {
+    margin-top: 12px;
+    box-sizing: border-box;
+  }
+
+  .authoriza .Auth_outside {
+    width: 401px;
+    height: 741px;
+    background-color: #fff;
+    border-radius: 30px;
+    padding: 37px 13px;
+    margin-right: 24px;
+  }
+
+  .authoriza .inside {
+    width: 375px;
+    height: 667px;
+    background-color: #eee;
+  }
+
+  .authoriza .authPic {
+    width: auto;
+    height: auto;
+    max-width: 750px;
+    max-height: 1334px;
+    transform: scale(0.5);
+  }
+
+  .authoriza .Auth_imgList{
+    height: 222px; 
+    width: 125px;
+    border: 1px solid #e3e3e3;
+    border-radius: 2px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    position: relative;
+  }
+  .authoriza .Auth_imgList img{
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .authoriza .image-delete{
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    padding: 4px 4px;
+  }
+</style>

src/router/index.js

@@ -91,6 +91,10 @@ export default new Router({
         path: '/CustomPage',
         name: 'CustomPage',
         component: resolve => require(['@/components/sallCenter/CustomPage'], resolve),
+      },{ //授权页面
+        path: '/authorization',
+        name: 'authorization',
+        component: resolve => require(['@/components/sallCenter/authorization'], resolve),
       }]
     },
     {