相亲模块

src/components/blindDate/addplate.vue

+<template>
+  <div v-loading="loading" class="addplate">
+    <div class="head-title">
+      <span @click="CommonJump('plateList')" class="blue point">板块管理</span> / 编辑板块管理
+    </div>
+    <div class="content">
+      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
+        <el-form-item label="商品名称" prop="Name" class="is-required" size="small">
+          <el-input v-model="addMsg.Name" placeholder="请输入商品名称" class="w400"/>
+        </el-form-item>
+        <el-form-item label="图片" prop="Icon" class="is-required">
+          <el-button @click="openChangeDig(1)" size="small">选择文件</el-button>
+          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;border:none;">
+            <img v-if="!addMsg.Icon || addMsg.Icon==''" src="../../assets/img/default.png"
+                 style="width:80px;height:80px" alt="">
+            <img v-else style="width:80px;height:80px" :src="addMsg.Icon" alt="">
+          </div>
+        </el-form-item>
+        <el-form-item label="排序" prop="Sort" class="is-required" size="small">
+          <el-input v-model="addMsg.Sort" placeholder="请输入排序" class="w400"/>
+        </el-form-item>
+        <el-form-item label="是否显示" class="is-required">
+          <el-radio v-model="addMsg.IsShow" :label="1" >是</el-radio>
+          <el-radio v-model="addMsg.IsShow" :label="2" >否</el-radio>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="margin-top:20px">
+      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
+    </div>
+    <!-- 选择文件 -->
+    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
+      <ChooseImg @SelectId="SelectId"></ChooseImg>
+    </el-dialog>
+  </div>
+
+</template>
+<script>
+  import ChooseImg from "@/components/global/ChooseImg.vue";
+  export default {
+    components: {
+      ChooseImg
+    },
+    data() {
+      return {
+        addMsg: {
+          ID: 0,
+          Name:'',
+          Icon:'',
+          Sort:0,
+          IsShow:1,
+        },
+        changeState:false,
+        imgType: 0,
+        rules: {
+          Name: [{
+            required: true,
+            message: '请输入商品名称',
+            trigger: 'blur'
+          }],
+          Sort: [{
+            required: true,
+            message: '请输入排序',
+            trigger: 'blur'
+          }],
+          Icon: [{
+            required: true,
+            message: '请选择图片',
+            trigger: 'blur'
+          }],
+
+        },
+        loading: false,
+      };
+    },
+    created() {
+
+      if(this.$route.query.arr){
+        this.addMsg=JSON.parse(decodeURIComponent(this.$route.query.arr))
+      }
+    },
+    methods: {
+      Save(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            this.apipost("/api/Miai/SetForumInfo", this.addMsg, res => {
+              if (res.data.resultCode == 1) {
+                this.CommonJump('plateList');
+                this.Success(res.data.message);
+              } else {
+                this.Error(res.data.message);
+              }
+            })
+          } else {
+            return false;
+          }
+        });
+      },
+      openChangeDig(num) {
+        this.changeState = true;
+        this.imgType = num;
+      },
+      SelectId(msg) {
+        if (this.imgType == 1) {
+          let url = this.getIconLink(msg.url)
+          this.addMsg.Icon = url
+        }
+        this.changeState = false;
+      },
+      getData(ID) {
+        this.loading = true;
+        this.apipost("/api/Point/GetPointGoodsModel", {
+          ID: ID
+        }, res => {
+          this.loading = false;
+          var tempDate = res.data.data;
+          this.addMsg = tempDate;
+
+        })
+      },
+    },
+    mounted() {
+    }
+  };
+</script>
+<style>
+  .app-add-cat .el-checkbox-group {
+    font-size: 14px !important;
+  }
+
+  .app-add-cat .el-checkbox {
+    margin-right: 0;
+  }
+
+  .app-add-cat .el-dialog__body {
+    padding: 10px 20px !important;
+  }
+
+  .app-add-cat .tag-box .tag-item {
+    margin-right: 5px;
+  }
+
+  .app-add-cat .tag-box {
+    margin: 20px 0;
+  }
+
+  .app-add-cat .app-goods-cat-list .active {
+    background: #FAFAFA;
+  }
+
+  .app-add-cat .app-goods-cat-list .cat-item {
+    cursor: pointer;
+    padding: 5px 10px;
+  }
+
+  .app-add-cat .app-goods-cat-list {
+    border: 1px solid #E8EAEE;
+    border-radius: 5px;
+    margin-top: -5px;
+    padding: 10px 0;
+    overflow: scroll;
+    height: 400px;
+  }
+
+
+
+  .addplate .blue {
+    color: #409EFF;
+
+  }
+
+  .addplate .content {
+    background: #fff;
+    margin-top: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .addplate .gez_list{
+    /*width: 650px;*/
+    margin-bottom: 12px;
+    padding: 20px;
+    border: 1px solid #EBEEF5;
+    background-color: #FFF;
+    color: #303133;
+
+  }
+  .addplate .quyu{
+    background-color: #f4f4f5;
+    color: #909399;
+    padding: 10px;
+    line-height: 30px;
+    height: 30px;
+    font-size: 12px;
+    border-radius: 4px;
+    white-space: nowrap;
+    margin: 5px;
+  }
+  .addplate .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .addplate .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .addplate .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+
+</style>

src/components/blindDate/blindDateIndex.vue

+<style>
+  .blindDateIndex {
+    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;
+  }
+
+  .blindDateIndex .mainLeftMenu {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    color: #fff;
+  }
+
+  .blindDateIndex .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;
+  }
+
+  .blindDateIndex .asideInner {
+    background: rgba(0, 0, 0, 0.15);
+    padding: 6px 6px;
+    width: 100%;
+    border-radius: 3px;
+    font-weight: bold;
+  }
+
+  .blindDateIndex .F_Logo {
+    height: 60px;
+    background: #464d54;
+    color: #f2f2f2;
+    cursor: pointer;
+    font-weight: bold;
+    text-align: center;
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+  }
+
+  .blindDateIndex .mainRightContent {
+    width: 100%;
+    height: 100%;
+    background-color: #f3f3f3;
+  }
+
+  .blindDateIndex .mainRightTop {
+    width: 100%;
+    height: 60px;
+    background: #fff;
+    display: flex;
+    justify-content: space-between;
+    color: #909399;
+  }
+
+  .blindDateIndex .mainRightLeft {
+    width: 110px;
+    height: 60px;
+    line-height: 62px;
+    text-align: center;
+    margin-left: 30px;
+    cursor: pointer;
+    position: relative;
+    top: -2px;
+  }
+
+  .blindDateIndex .marinRightList {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 300px;
+    float: right;
+  }
+
+  .blindDateIndex .marinRightList ul {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  .blindDateIndex .marinRightList ul li {
+    display: block;
+    list-style-type: none;
+    cursor: pointer;
+    color: #909399;
+    outline: none;
+    border: none;
+  }
+
+  .blindDateIndex .main_routerPage {
+    padding: 20px;
+    overflow-y: scroll;
+  }
+  .blindDateIndex .FsettingUU{
+    position: fixed;
+    width: 200px;
+    height: 100%;
+    position: fixed;
+    top: 60px;
+    left: 0;
+    overflow: auto;
+    z-index: 5;
+    background-color: rgb(84, 92, 100);
+  }
+  .blindDateIndex .FsettingUU .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;
+  }
+  .blindDateIndex .FsettingUU .menu_item:last-child{
+    margin-bottom:60px;
+  }
+  .blindDateIndex .FsettingUU .menu_item i {
+    margin-right: 5px;
+    width: 24px;
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+    color:#909399;
+  }
+  .blindDateIndex .menu_item:hover{
+    background-color: rgba(67,74,80,0);
+  }
+  .blindDateIndex .F_Logo:hover{
+    background-color: #30353a;
+    color:#fff;
+  }
+  .blindDateIndex .Fchecked{
+    color:rgb(255, 208, 75)!important;
+  }
+  .blindDateIndex .Fchecked i{
+    color:rgb(255, 208, 75)!important;
+  }
+</style>
+<template>
+  <div class="blindDateIndex">
+    <div class="mainLeftMenu">
+      <div class="leftMenu1">
+        <div class="F_Logo">
+          <div class="asideInner" @click="CommonJump('mallIndex')">{{currentUser.MallName}}
+          </div>
+        </div>
+        <ul class="FsettingUU">
+          <li class="menu_item" :class="{'Fchecked':isChecked=='/plateList'}"  @click="isChecked='/plateList',CommonJump('plateList')">
+            <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,
+        ERPEmpId:0,
+      };
+    },
+    created() {
+      this.currentUser = this.getLocalStorage();
+      this.ERPEmpId =  this.currentUser.ERPEmpId
+      this.isChecked=this.$route.path;
+      if(this.$route.query.FIndex){
+        this.CommonJump('plateList');
+        this.isChecked='/plateList'
+      }
+    },
+    methods: {
+    },
+    mounted() {
+      this.Height = document.documentElement.clientHeight - 60;
+      //监听浏览器窗口变化　
+      window.onresize = () => {
+        this.Height = document.documentElement.clientHeight - 60
+      }
+    }
+  };
+
+</script>

src/components/blindDate/plateList.vue

+<template>
+  <div class="plateList">
+    <div class="el-card__header">
+      <span>版块管理</span>
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <el-button type="primary" class="el-button--small" @click="addRecharge">新增</el-button>
+      </div>
+    </div>
+    <div class="content">
+      <div style="display: flex;flex-direction: row;align-items: center">
+        <div class="block" >
+          <div class="searchInput" style="width:200px">
+            <el-input style="display:inline-block;width:170px;height:30px"
+                      placeholder="请输入板块名称搜索"
+                      v-model="msg.Name"
+                      size="small"
+                      @clear="getList"
+                      @keyup.enter.native="getList"
+                      clearable>
+            </el-input>
+            <span @click="getList" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
+          </div>
+
+          <span>是否显示</span>
+          <el-select class="w100" @change="getList()" style="margin-right: 10px;"
+                     v-model="msg.PrizeType" size="small" placeholder="请选择">
+            <el-option label="不限" :value="0"></el-option>
+            <el-option label="是" :value="1"></el-option>
+            <el-option label="否" :value="2"></el-option>
+
+
+          </el-select>
+
+        </div>
+
+      </div>
+    </div>
+
+
+    <div style="padding: 20px;background: #fff;">
+      <el-table
+        :data="tableData"
+        header-cell-class-name="headClass"
+        style="width: 100%"
+        border
+      >
+        <el-table-column
+          prop="Id"
+          label="ID"
+          width="100">
+        </el-table-column>
+
+        <el-table-column
+          prop="Name"
+          label="信息">
+          <template slot-scope="scope">
+            <div class="app-image" :style="{backgroundImage:'url(' + scope.row.Icon + ')',backgroundSize:'cover'}"></div>
+            <div flex="dir:left cross:center">
+              {{scope.row.Name}}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="Sort"
+          label="排序"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="IsShow"
+          label="是否显示">
+          <template slot-scope="scope">
+
+<!--            <div flex="dir:left cross:center">-->
+<!--              {{scope.row.IsShow==1?'是':'否'}}-->
+<!--            </div>-->
+            <el-switch
+              v-model="scope.row.IsShow"
+              :active-value="1"
+              :inactive-value="2"
+              @change="setshow(scope.row)"
+              >
+            </el-switch>
+
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="CreateDate"
+          label="创建时间"
+        >
+        </el-table-column>
+
+
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="180"
+        >
+          <template slot-scope="scope">
+
+            <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
+              <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="Edit(scope.row)">
+            </el-tooltip>
+            <el-tooltip class="item" effect="dark" content="删除" placement="top" >
+              <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b(scope.row)">
+            </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"
+                     :current-page.sync="msg.pageIndex"
+                     :total="count">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "plateList",
+    data(){
+      return{
+        msg:{
+          pageIndex:1,
+          pageSize:20,
+          Name:'',
+          IsShow:0,
+        },
+        changeState:false,
+        dateList:[],
+        tableData:[],
+        count:0,
+        loading:false,
+        EnableMsg:{
+          Ids:'',
+          TeacherStatus:0,
+        },
+      }
+    },
+    created(){
+      this.getDateList();
+
+    },
+    methods:{
+      getDateList(){
+        let msg = JSON.parse(JSON.stringify(this.msg))
+        this.loading=true;
+        this.apipost("/api/Miai/GetForumPageList", msg, res => {
+          this.loading=false;
+          if(res.data.resultCode==1){
+            this.tableData = res.data.data.pageData;
+            this.count = res.data.data.count;
+          }else {
+            this.Info(res.data.message);
+          }
+
+        })
+      },
+
+
+      addRecharge(){
+        this.$router.push('/addplate');
+
+      },
+      setshow(row){
+        this.apipost(
+          "/api/Miai/SetForumState",
+          {ForumId:row.Id,Type:1},
+          res => {
+            if (res.data.resultCode == 1) {
+              this.Success(res.data.message);
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+        );
+      },
+      Edit(row){
+        let arr=encodeURIComponent(JSON.stringify(row))
+        this.$router.push({
+          name: 'addplate',
+          query: {
+            arr:arr,
+            blank: "y"
+          }
+        });
+      },
+      delete_b(row){
+        let that=this;
+        that.Confirm("是否删除?", function () {
+          that.apipost(
+            "/api/Miai/SetForumState",
+            {ForumId:row.Id,Type:2},
+            res => {
+              if (res.data.resultCode == 1) {
+                that.Success(res.data.message);
+                that.getDateList();
+              } else {
+                that.Error(res.data.message);
+              }
+            },
+          );
+        });
+      },
+
+      //勾选导游
+      handleSelectionChange(val){
+        var selectRow = JSON.parse(JSON.stringify(val));
+        let array= [];
+        selectRow.forEach(x => {
+          let obj = {}
+          obj = x.ID;
+          array.push(obj)
+        });
+        this.EnableMsg.Ids = array
+      },
+
+
+      getList(){
+        this.msg.pageIndex = 1
+        this.getDateList()
+      },
+
+      handleCurrentChange(val) {
+        this.msg.pageIndex = val;
+        this.getDateList();
+      },
+    },
+  }
+</script>
+
+<style >
+  .plateList .el-card__header{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: #fff;
+
+  }
+  .plateList .el-button--small{
+    padding: 9px 15px;
+  }
+  .plateList .content .searchInput{
+    border: 1px solid #DCDFE6;
+    border-radius: 4px;
+    /*margin-left: 10px;*/
+  }
+  .plateList .content .searchInput .el-input__inner{
+    border:none;outline:none;
+    height: 30px;
+    line-height: 30px;
+  }
+  .plateList .content .searchInput{
+    line-height: normal;
+    display: inline-table;
+    border-collapse: separate;
+    border-spacing: 0;
+    width:250px;
+  }
+  .plateList .content{
+    background: #fff;
+    margin-top:10px;
+    padding: 15px;
+    box-sizing: border-box;
+  }
+  .plateList .el-tag{
+    margin-right: 5px;
+  }
+  .plateList .app-image{
+    background-position: center center;
+    width: 50px;
+    height: 50px;
+    border-radius:0%;
+    float: left;
+    margin-right: 8px;
+  }
+</style>

src/router/index.js

@@ -270,6 +270,22 @@ export default new Router({
         }
       ]
     },
+    {
+      path: '/blindDateIndex', //相亲专区
+      name: 'blindDateIndex',
+      component: resolve => require(['@/components/blindDate/blindDateIndex'], resolve),
+      children:[
+        {
+          path: '/plateList',
+          name: 'plateList',
+          component: resolve => require(['@/components/blindDate/plateList'], resolve),
+        },{
+          path: '/addplate',
+          name: 'addplate',
+          component: resolve => require(['@/components/blindDate/addplate'], resolve),
+        },
+      ]
+    },
     {
       path: '/educationIndex', //网课专区
       name: 'educationIndex',