1

src/components/phoneManage.vue

+<style>
+  .FALiPaySetting {
+    height: 100%;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    min-width: 0;
+    font-size: 14px;
+  }
+
+  .FALiPaySetting .mainLeftMenu {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    color: #fff;
+  }
+
+  .FALiPaySetting .leftMenu1 {
+    background: #444444;
+    cursor: pointer;
+    width: 200px;
+    height: 100%;
+    overflow-y: auto;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .FALiPaySetting .asideInner {
+    background: rgba(0, 0, 0, 0.15);
+    padding: 6px 6px;
+    width: 100%;
+    border-radius: 3px;
+    font-weight: bold;
+  }
+
+  .FALiPaySetting .F_Logo {
+    height: 60px;
+    background: #464d54;
+    color: #f2f2f2;
+    cursor: pointer;
+    font-weight: bold;
+    text-align: center;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  .FALiPaySetting .mainRightContent {
+    width: 100%;
+    height: 100%;
+    background-color: #f3f3f3;
+  }
+
+  .FALiPaySetting .mainRightTop {
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    color: #909399;
+  }
+
+  .FALiPaySetting .mainRightLeft {
+    width: 110px;
+    height: 60px;
+    line-height: 62px;
+    text-align: center;
+    margin-left: 30px;
+    cursor: pointer;
+    position: relative;
+    top: -2px;
+  }
+
+  .FALiPaySetting .marinRightList {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 300px;
+    float: right;
+  }
+
+  .FALiPaySetting .marinRightList ul {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  .FALiPaySetting .marinRightList ul li {
+    display: block;
+    list-style-type: none;
+    cursor: pointer;
+    color: #909399;
+    outline: none;
+    border: none;
+  }
+
+  .FALiPaySetting .main_routerPage {
+    padding: 20px;
+    overflow-y: scroll;
+  }
+
+  .FALiPaySetting .FALiPaySettingUU {
+    position: fixed;
+    width: 200px;
+    height: 100%;
+    position: fixed;
+    top: 60px;
+    left: 0;
+    overflow: auto;
+    z-index: 5;
+    background-color: rgb(84, 92, 100);
+  }
+
+  .FALiPaySetting .FALiPaySettingUU .menu_item {
+    font-size: 14px;
+    color: #303133;
+    padding: 0 20px;
+    cursor: pointer;
+    -webkit-transition: border-color .3s, background-color .3s, color .3s;
+    transition: border-color .3s, background-color .3s, color .3s;
+    box-sizing: border-box;
+    height: 56px;
+    line-height: 56px;
+    list-style: none;
+    white-space: nowrap;
+    color: #fff;
+    display: flex;
+    align-items: center;
+  }
+
+  .FALiPaySetting .FALiPaySettingUU .menu_item i {
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+    color: #909399;
+  }
+
+  .FALiPaySetting .menu_item:hover {
+    background-color: rgba(67, 74, 80);
+  }
+
+  .FALiPaySetting .F_Logo:hover {
+    background-color: #30353a;
+    color: #fff;
+  }
+
+  .FALiPaySetting .Fchecked {
+    color: rgb(255, 208, 75) !important;
+  }
+
+  .FALiPaySetting .Fchecked i {
+    color: rgb(255, 208, 75) !important;
+  }
+
+</style>
+<template>
+  <div class="FALiPaySetting">
+    <div class="mainLeftMenu">
+      <div class="leftMenu1">
+        <div class="F_Logo">
+          <div class="asideInner" @click="CommonJump('mallIndex')">{{currentUser.MallName}}
+          </div>
+        </div>
+        <ul class="FALiPaySettingUU">
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/adminList'}"
+            @click="isChecked='/adminList',CommonJump('adminList')">
+            <i class="el-icon-menu"></i><span>管理员列表</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="mainRightContent">
+      <div class="mainRightTop">
+        <div class="mainRightLeft">手机端管理</div>
+        <div class="marinRightList">
+          <ul>
+            <li style="display:none">缓存</li>
+            <li style="display:none" title="教程管理">
+              <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                  教程管理<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item>操作教程</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </li>
+            <li :title="currentUser.MallName">
+              <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                  {{currentUser.MallName}}<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item disabled>{{currentUser.MallName}}</el-dropdown-item>
+                  <el-dropdown-item disabled>{{currentUser.Account}}({{currentUser.MobilePhone}})</el-dropdown-item>
+                  <el-dropdown-item @click.native="CommonJump('index')">返回系统</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="main_routerPage" :style="{height: Height+'px'}">
+        <router-view />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        currentUser: {},
+        isChecked: '',
+        Height: 0
+      };
+    },
+    created() {
+      this.currentUser = this.getLocalStorage();
+      this.isChecked = this.$route.path;
+      if (this.$route.query.FIndex) {
+        this.CommonJump('adminList');
+        this.isChecked = '/adminList'
+      }
+    },
+    methods: {},
+    mounted() {
+      this.Height = document.documentElement.clientHeight - 60;
+      //监听浏览器窗口变化　
+      window.onresize = () => {
+        this.Height = document.documentElement.clientHeight - 60
+      }
+    }
+  };
+
+</script>

src/components/phoneManage/adminList.vue

+<template>
+  <div class="CustomPage">
+    <template>
+      <div class="head-title">
+        管理员列表
+        <el-button
+          @click="showDialog"
+          style="float:right;margin-top: -5px;"
+          size="small"
+          type="primary"
+        >
+          添加管理员
+        </el-button>
+      </div>
+      <div class="content">
+        <div
+          class="searchInput"
+          style="display:inline-block;width:200px;"
+        >
+          <el-select
+            v-model="msg.platform"
+            placeholder="请选择"
+            size="small"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="searchInput">
+          <el-input
+            style="display:inline-block;width:260px;height:30px"
+            placeholder="请输入ID/昵称/手机号/备注/联系方式"
+            v-model="msg.PageName"
+            size="small"
+            clearable
+            @keyup.enter.native="msg.pageIndex=1,getList()"
+            @clear="msg.pageIndex=1,getList()"
+          >
+            <i
+              slot="suffix"
+              class="el-input__icon el-icon-search"
+              @click="msg.pageIndex=1,getList()"
+            ></i>
+          </el-input>
+        </div>
+        <br>
+        <el-table
+          :data="dataList"
+          v-loading="loading"
+          border
+          style="width: 100%;margin:20px 0"
+        >
+          <el-table-column
+            prop="Id"
+            label="ID"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="PageName"
+            label="头像"
+          >
+          </el-table-column>
+          <!-- <el-table-column
+            label="导航与模板"
+            prop="DetailsList"
+            width="500"
+          >
+            <template slot-scope="scope">
+              <div class="templat-list">
+                <template
+                  v-if="scope.row.DetailsList && scope.row.DetailsList.length>0"
+                  v-for="(subItem,subIndex) in scope.row.DetailsList"
+                >
+                  <div
+                    class="templat-item"
+                    :key="subIndex"
+                  >
+                    <div>{{subItem.NavName}}</div>
+                    <div style="color: rgb(153, 153, 153);">{{subItem.TemplateShowName}}</div>
+                  </div>
+                </template>
+              </div>
+            </template>
+          </el-table-column> -->
+          <el-table-column
+            prop="IsHome"
+            label="手机号"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="IsHome"
+            label="加入时间"
+          >
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="180"
+          >
+            <template slot-scope="scope">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="移除管理员"
+                placement="top"
+              >
+                <img
+                  @click="removeAdmin(scope.row)"
+                  style="width:32px;height:32px;margin:0 10px"
+                  src="../../assets/img/userman/renew.png"
+                  alt=""
+                >
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          style="text-align:right"
+          background
+          @current-change="handleCurrentChange"
+          :page-size="msg.pageSize"
+          layout="prev, pager, next"
+          :total="total"
+        >
+        </el-pagination>
+      </div>
+    </template>
+    <el-dialog
+      title="设置管理员"
+      :visible.sync="isShowModule"
+    >
+      <el-form
+        :model="addMsg"
+        :rules="addMsgRules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item
+          label="昵称搜索"
+          prop="Name"
+        >
+          <el-select
+            v-model="addMsg.Name"
+            placeholder="请选择"
+            filterable
+          >
+            <el-option
+              v-for="item in adminOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="small"
+          @click="isShowModule = false"
+        >取 消</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="submitForm('ruleForm')"
+        >确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      //弹窗
+      isShowModule: false,
+      dataList: [],
+      msg: {
+        platform: 1,
+        PageName: "", //页面名称
+        pageIndex: 1,
+        pageSize: 10,
+      },
+      addMsg: {
+        Name: "",
+      },
+      total: 0,
+      options: [
+        {
+          value: 1,
+          label: "微信小程序",
+        },
+        {
+          value: 2,
+          label: "支付宝小程序",
+        },
+      ],
+      adminOptions: [],
+      addMsgRules: {
+        Name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    showDialog(){
+      this.isShowModule=true;
+      this.addMsg.Name="";
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    handleCurrentChange(val) {
+      this.msg.pageIndex = val;
+      this.getList();
+    },
+    getList() {
+      this.apipost(
+        "/api/",
+        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);
+          }
+        }
+      );
+    },
+    //删除
+    removeAdmin(item) {
+      let that = this;
+      that.Confirm("是否删除?", function () {
+        that.apipost(
+          "",
+          {
+            Id: item.Id,
+            Status: 1,
+          },
+          (res) => {
+            if (res.data.resultCode == 1) {
+              that.getList();
+            } else {
+              that.Info(res.data.message);
+            }
+          }
+        );
+      });
+    },
+  },
+  mounted() {
+    // this.getList();
+  },
+};
+</script>
+<style>
+.CustomPage .templat-list {
+  border: 1px solid #ebeef5;
+}
+
+.CustomPage .templat-item {
+  line-height: 40px;
+  height: 40px;
+  display: flex;
+  font-size: 13px;
+}
+
+.templat-item:nth-child(odd) {
+  background-color: #f7f7f7;
+}
+
+.templat-item:nth-child(even) {
+  background-color: #fff;
+}
+
+.CustomPage .templat-item div {
+  width: 50%;
+  padding-left: 20px;
+}
+
+.CustomPage .Custom_item {
+  border: 1px solid #ebeef5;
+  background-color: #fff;
+  color: #303133;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  margin-bottom: 10px;
+}
+
+.CustomPage .Custom_item > div {
+  padding: 20px;
+}
+
+.CustomPage .content {
+  background: #fff;
+  margin-top: 10px;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.CustomPage .conten_indder {
+  padding: 20px;
+  background-color: #fff;
+  padding-right: 50%;
+  min-width: 1100px;
+}
+</style>