boss/pages/main/index/solution_manage.vue

<template>
  <div>
    <el-tabs v-model="activeName">
      <!--      classify manage-->
      <el-tab-pane name="classify_page">
        <span slot="label"><i class="el-icon-document-remove"></i> 顶级分类管理</span>
        <el-button type="primary" @click="addClassify"><i class="el-icon-plus"></i>新增分类</el-button>

        <!--        标签表格数据 start -->
        <el-table :data="classifyData">
          <el-table-column
            prop="name"
            label="分类名称" >
          </el-table-column>
          <el-table-column
            label="是否显示" width="150">
            <template slot-scope="scope">
              <p v-if="scope.row['is_show'] == 1">是</p>
              <p v-else>否</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序" width="50">
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间" >
          </el-table-column>
          <el-table-column
            prop="updated_at"
            label="更新时间" >
          </el-table-column>
          <el-table-column
            label="关联领域" >
            <template slot-scope="scope">
              <el-tag v-for="(item, id) in scope.row['cats']" v-if="id < 8">{{item['name']}}</el-tag>
              <p v-if="scope.row['cats']" >总共有{{scope.row['cats'].length}}个</p>
            </template>
          </el-table-column>

          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editClassify(scope.row)"
              ><i class="el-icon-edit"></i></el-button>
              <el-button
                type="text"
                @click="delClassify(scope.row['id'])"
              ><i class="el-icon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="20"
          :total="Number(totals.classify_total)"
          @current-change="handleCurrentChange"
        />
        <!--        标签表格数据 end -->
        <!--        新增弹出层 start -->
        <el-dialog
          :title="ClassifyTitle"
          :visible.sync="ClassifyDialog"
          width="45%">
          <el-form ref="form" :model="classifyForm" label-width="100px">
            <el-form-item>
              <p slot="label">分类名<span style="color:#ff0000;">*</span></p>
              <el-input v-model="classifyForm.name" v-bind:readonly="isReadOnly" placeholder="请输入分类名"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">是否显示</p>
              <el-switch
                v-model="classifyForm.is_show">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <p slot="label">排序<span style="color:red;">*</span></p>
              <el-input v-model="classifyForm.sorts" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item>
              <template>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <div class="grid-content bg-purple">领域</div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple">别名</div>
                  </el-col>
                  <!--           <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
                </el-row>
                <template v-for="(item,index) in classifyForm.cats">
                  <el-row :gutter="24" style="margin-top: 5px">
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-select v-model="classifyForm.cats[index].hash_id" placeholder="请选择领域">
                          <el-option
                            v-for="item in categoryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-input v-model="classifyForm.cats[index].alias" placeholder="请输入别名"></el-input>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-button
                          @click="deleteChannleRow(index)"
                          type="text"W
                          size="small" v-if="index != 0">
                          移除
                        </el-button>
                        <el-button
                          @click="addChannleRow()"
                          type="text"
                          size="small">
                          添加
                        </el-button>
                      </div>
                    </el-col>
                  </el-row>
                </template>

              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="classifySub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--        新增弹出层 end -->

      </el-tab-pane>
      <!--      serviceType manage-->
      <el-tab-pane name="serviceType_page">
        <span slot="label"><i class="el-icon-document-remove"></i> 服务方式管理</span>
        <el-button type="primary" @click="addServiceType"><i class="el-icon-plus"></i>服务方式分类</el-button>

        <!--        标签表格数据 start -->
        <el-table :data="serviceTypeData">
          <el-table-column
            prop="name"
            label="名称" >
          </el-table-column>
          <el-table-column
            prop="alias"
            label="别名" >
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序" width="50">
          </el-table-column>
          <el-table-column
            label="是否显示" width="150">
            <template slot-scope="scope">
              <p v-if="scope.row['is_show'] == 1">是</p>
              <p v-else>否</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间" >
          </el-table-column>
          <el-table-column
            prop="updated_at"
            label="更新时间" >
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editServiceType(scope.row)"
              ><i class="el-icon-edit"></i></el-button>
              <el-button
                type="text"
                @click="delServiceType(scope.row['hash_id'])"
              ><i class="el-icon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="20"
          :total="Number(totals.serviceType_total)"
          @current-change="handleCurrentChange"
        />
        <!--        标签表格数据 end -->
        <!--        新增弹出层 start -->
        <el-dialog
          :title="serviceTypeTitle"
          :visible.sync="serviceTypeDialog"
          width="30%">
          <el-form ref="form" :model="serviceTypeForm" label-width="100px">
            <el-form-item>
              <p slot="label">服务领域<span style="color:red;">*</span></p>
              <el-select v-model="serviceTypeForm.hash_id" filterable placeholder="请选择">
                <el-option
                  v-for="item in categoryData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <p slot="label">别名</p>
              <el-input v-model="serviceTypeForm.alias" placeholder="请输入别名"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">排序<span style="color:red;">*</span></p>
              <el-input v-model="serviceTypeForm.sort" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="serviceTypeSub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--        新增弹出层 end -->
        <!--        新增弹出层 start -->
        <el-dialog
          :title="serviceTypeTitle"
          :visible.sync="editServiceTypeDialog"
          width="30%">
          <el-form ref="form" :model="serviceTypeForm" label-width="100px">
            <el-form-item>
              <p slot="label">服务名称</p>
              <el-input v-model="serviceTypeForm.name" v-bind:readonly="true" placeholder="请输入分类名"></el-input>
            </el-form-item>
            <el-form-item>
              <p slot="label">别名</p>
              <el-input v-model="serviceTypeForm.alias" placeholder="请输入别名"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">排序</p>
              <el-input v-model="serviceTypeForm.sort" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">是否显示</p>
              <el-switch
                v-model="serviceTypeForm.is_show">
              </el-switch>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="editServiceTypeSub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--        新增弹出层 end -->

      </el-tab-pane>
      <!--      keyword manage-->
      <el-tab-pane name="keyword_page">
        <span slot="label"><i class="el-icon-document-remove"></i> 热词管理</span>
        <el-button type="primary" @click="addKeyWord"><i class="el-icon-plus"></i>新增热词</el-button>
        <!--        标签表格数据 start -->
        <el-table :data="keywordData">
          <el-table-column
            prop="word"
            label="热词" >
          </el-table-column>
          <el-table-column
            prop="alias"
            label="别名" >
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序" width="50">
          </el-table-column>
          <el-table-column
            label="是否显示" width="150">
            <template slot-scope="scope">
              <p v-if="scope.row['is_show'] == 1">是</p>
              <p v-else>否</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="online_at"
            label="上线时间" >
          </el-table-column>
          <el-table-column
            prop="offline_at"
            label="下线时间" >
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间" >
          </el-table-column>
          <el-table-column
            prop="updated_at"
            label="更新时间" >
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editKeyWord(scope.row)"
              ><i class="el-icon-edit"></i></el-button>
              <el-button
                type="text"
                @click="delKeyWord(scope.row['id'])"
              ><i class="el-icon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="20"
          :total="Number(totals.keyword_total)"
          @current-change="handleCurrentChange"
        />
        <!--        标签表格数据 end -->
        <!--        新增弹出层 start -->
        <el-dialog
          :title="keywordTitle"
          :visible.sync="keywordDialog"
          width="30%">
          <el-form ref="form" :model="keyWordForm" label-width="100px">
            <el-form-item>
              <p slot="label">热词<span style="color:red;">*</span></p>
              <el-input v-model="keyWordForm.word" placeholder="请输入热词"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">热词别名</p>
              <el-input v-model="keyWordForm.alias" placeholder="请输入别名"></el-input>
            </el-form-item>
            <el-form-item>
              <p slot="label">是否显示</p>
              <el-switch
                v-model="keyWordForm.is_show">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <p slot="label">上线时间</p>
              <el-date-picker
                v-model="keyWordForm.online_at"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <p slot="label">下线时间</p>
              <el-date-picker
                v-model="keyWordForm.offline_at"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <p slot="label">排序<span style="color:red;">*</span></p>
              <el-input v-model="keyWordForm.sort" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="keyWordSub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--        新增弹出层 end -->

      </el-tab-pane>

      <!--      banner manage-->
      <el-tab-pane name="banner_page">
        <span slot="label"><i class="el-icon-document-remove"></i> 轮播图管理</span>
        <el-button type="primary" @click="addBanner"><i class="el-icon-plus"></i>新增轮播图</el-button>
        <!--        标签表格数据 start -->
        <el-table :data="bannerData">
          <el-table-column
            prop="theme_color"
            label="背景色"
            width="80">
          </el-table-column>
          <el-table-column
            label="图片"
            width="180">
            <template slot-scope="scope">
              <img :src="scope.row['image_url']" alt="banner 图" style="height:50px;">
            </template>
          </el-table-column>
          <el-table-column
            prop="jump_type"
            label="跳转目标类型"
            width="130">
          </el-table-column>
          <el-table-column
            prop="jump_target"
            label="跳转目标标识"
            width="180">
          </el-table-column>
          <el-table-column
            prop="online_at"
            label="上线时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="offline_at"
            label="下线时间"
            width="180">
          </el-table-column>
          <el-table-column
            label="是否显示" width="150">
            <template slot-scope="scope">
              <p v-if="scope.row['is_show'] == 1">是</p>
              <p v-else>否</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序" width="50">
          </el-table-column>
          <el-table-column
            label="所属端"
            width="80">
            <template slot-scope="scope">
              <p v-if="scope.row['type'] == 1">
                web端
              </p>
              <p v-else>
                移动端
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="created_at"
            label="创建时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="updated_at"
            label="更新时间"
            width="180">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="editBanner(scope.row)"
              ><i class="el-icon-edit"></i></el-button>
              <el-button
                type="text"
                @click="delBanner(scope.row['id'])"
              ><i class="el-icon-delete"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="order-footer"
          background
          layout="prev, pager, next"
          :page-size="20"
          :total="Number(totals.banner_total)"
          @current-change="handleCurrentChange"
        />
        <!--        标签表格数据 end -->
        <!--        新增弹出层 start -->
        <el-dialog
          :title="bannerTitle"
          :visible.sync="bannerDialog"
          width="40%">
          <el-form ref="form" :model="bannerForm" label-width="100px">
            <el-form-item>
              <el-upload
                class="avatar-uploader"
                action="/api/admin/developer/uploadImg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="bannerForm.image_url" :src="bannerForm.image_url" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <p slot="label">是否显示</p>
              <el-switch
                v-model="bannerForm.is_show">
              </el-switch>
            </el-form-item>
            <el-form-item>
              <p slot="label">背景色</p>
              <el-input v-model="bannerForm.theme_color" placeholder="请输入背景色"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">跳转类型<span style="color:red;">*</span></p>
              <el-select v-model="bannerForm.jump_type" placeholder="请选择">
                <el-option
                  v-for="item in jumpType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <p slot="label">跳转标识<span style="color:red;">*</span></p>
              <el-input v-model="bannerForm.jump_target" placeholder="请输入跳转标识"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">上线时间</p>
              <el-date-picker
                v-model="bannerForm.online_at"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <p slot="label">下线时间</p>
              <el-date-picker
                v-model="bannerForm.offline_at"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <p slot="label">排序</p>
              <el-input v-model="bannerForm.sort" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item>
              <p slot="label">web/移动端</p>
              <el-select v-model="bannerForm.type" placeholder="请选择">
                <el-option
                  v-for="item in clientType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="bannerSub">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--        新增弹出层 end -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  const genDefBannerForm = () => {
    return {
      sort: 1,
      theme_color: '',
      image_url: '',
      jump_type: '',
      jump_target: '',
      online_at: null,
      offline_at: null,
      type: 1,
      is_show: 0
    }
  }

  const genDefClassifyForm = () => {
    return {
      id: '',
      name: '',
      sorts: 1,
      cats: [{hash_id:'',name:'',alias:''}],
      is_show: ''
    }
  };

  const genDefServiceTypeForm = () => {
    return {
      id: '',
      hash_id: '',
      name: '',
      alias: '',
      sort:1,
      is_show:1
    }
  };

  const genDefKeyWordForm = () => {
    return {
      id: '',
      word: '',
      alias: '',
      online_at: null,
      offline_at: null,
      sort: 1,
      is_show: 1
    }
  };

  export default {
    data() {
      return {
        activeName:'classify_page',
        ClassifyTitle: '',
        ClassifyDialog: false,
        serviceTypeTitle: '',
        serviceTypeDialog: false,
        editServiceTypeDialog: false,
        keywordTitle: '',
        keywordDialog: false,
        bannerTitle: '',
        bannerDialog: false,
        isReadOnly: false,
        jumpType:[
          {
            value:'url',
            label:'url',
          }
        ],
        clientType:[
          {
            value:1,
            label:'web端',
          },
          {
            value:2,
            label:'移动端',
          }
        ],

        classifyData: [],
        keywordData: [],
        bannerData: [],
        serviceTypeData: [],
        categoryData: [],

        classifyForm: genDefClassifyForm(),
        serviceTypeForm: genDefServiceTypeForm(),
        keyWordForm: genDefKeyWordForm(),
        bannerForm: genDefBannerForm(),

        totals: {
          banner_total: 0,
          keyword_total: 0,
          classify_total: 0,
          serviceType_total: 0,
        }
      }
    },
    created: function () {
      this.getTableData()
        .catch(e => {
          this.$message({
            type: "error",
            message: e.message
          })
        });
    },
    methods: {
      // 获取列表数据
      async getTableData() {
        let data = {
          page: 1,
          pageSize: 20
        }

        //获取顶级分类
        let classify_res = await this.$post("/api/admin/kaifain/findClassify", data);
        if(classify_res.status == 1){
          this.classifyData = classify_res.data.list;
          this.totals.classify_total = classify_res.data.total;
        }

        //获取顶级分类
        let serviceType_res = await this.$post("/api/admin/kaifain/findServiceType", data);
        if(serviceType_res.status == 1){
          this.serviceTypeData = serviceType_res.data.list;
          this.totals.serviceType_total = serviceType_res.data.total;
        }

        //获取热词
        let word_res = await this.$post("/api/admin/kaifain/findServiceWord", data);
        if(word_res.status == 1){
          this.keywordData = word_res.data.list;
          this.totals.keyword_total = word_res.data.total;
        }

        //获取bannner
        let banner_res = await this.$post("/api/admin/kaifain/findBanner", data);
        if(banner_res.status == 1){
          this.bannerData = banner_res.data.list;
          this.totals.banner_total = banner_res.data.total;
        }
        //获取领域
        let cat_res = await this.$post("/api/admin/CpsManage/listCategories", {});
        if(cat_res.status == 1){
          if(cat_res.data){
            this.categoryData = cat_res.data;
          }
        }

      },
      deleteChannleRow(index) {
        this.classifyForm.cats.splice(index, 1);
      },
      addChannleRow() {
        this.classifyForm.cats.push({hash_id:'',name:'',alias:''})
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getList();
      },
      //顶级分类管理
      addClassify(){
        this.classifyForm = genDefClassifyForm();
        this.ClassifyTitle='新增顶级分类';
        this.ClassifyDialog = true;
      },
      editClassify(row){
        this.classifyForm = {};
        let cats = new Array();
        if(row.cats){
          for(let i = 0; i < row.cats.length; i++){
            cats.push({hash_id:row.cats[i]['cat_id'],name:row.cats[i]['name'],alias:row.cats[i]['alias']});
          }
        }else{
          cats.push({hash_id:'',name:'',alias:''});
        }
        this.ClassifyTitle = '修改顶级分类';
        this.classifyForm = {
          id: row.id,
          name: row.name,
          sorts: row.sort,
          cats: cats,
          is_show: row.is_show == 1?true:false
        };
        this.ClassifyDialog = true;
      },
      async classifySub() {
        if(this.classifyForm.name.length < 1){
          this.$message({
            type: "error",
            message: "名称不能为空!"
          });
          return false;
        }

        if(this.classifyForm.cats.length < 1){
          this.$message({
            type: "error",
            message: "领域不能为空!"
          });
          return false;
        }

        let cats = new Array();
        let cat_data = this.categoryData;
        let cats_value = this.classifyForm.cats;

        for(let i = 0; i < cat_data.length; i++){
          for(let x= 0; x < cats_value.length; x++){
            if(cat_data[i]['id'] == cats_value[x]['hash_id']){
              cats.push({'id':cat_data[i]['id'], 'name':cat_data[i]['name'], alias: cats_value[x]['alias']});
            }
          }
        }
        let temp_cats = new Array();
        for(let k= 0; k < cats_value.length; k++){
          for(let j= 0; j < cats.length; j++){
            if(cats_value[k]['hash_id'] == cats[j]['id']){
              temp_cats.push(cats[j]);
            }
          }
        }

        if(this.classifyForm.id){

          let data = {
            id: this.classifyForm.id,
            name: this.classifyForm.name,
            sort: this.classifyForm.sorts,
            cats: JSON.stringify(temp_cats),
            is_show: this.classifyForm.is_show?1:0
          }

          let classify_res = await this.$post("/api/admin/kaifain/editClassify", data);
          if(classify_res.status == 1){
            this.getClassify();
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.ClassifyDialog = false;
          }
        }else{

          let data = {
            name: this.classifyForm.name,
            sort: this.classifyForm.sorts,
            cats: JSON.stringify(temp_cats),
            is_show: this.classifyForm.is_show?1:0
          }
          let classify_res = await this.$post("/api/admin/kaifain/addClassify", data);
          if(classify_res.status == 1){
            this.getClassify();
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.ClassifyDialog = false;
          }
        }

      },
      async getClassify(){
        let data = {
          page: 1,
          pageSize: 20
        }
        //获取顶级分类
        let classify_res = await this.$post("/api/admin/kaifain/findClassify", data);
        if(classify_res.status == 1){
          this.classifyData = classify_res.data.list;
          this.totals.classify_total = classify_res.data.total;
        }
      },
      async delClassify(id){
        this.$confirm('此操作将该分类状态改为删除状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.$post("/api/admin/kaifain/delClassify", data).then(res => {
            if(res.status == 1){
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getClassify();
            }
          });
        }).catch(() => {
          //几点取消的提示
        });
      },
      //热词管理
      addKeyWord(){
        this.keyWordForm = genDefKeyWordForm();
        this.keywordTitle ='新增热词';
        this.keywordDialog = true;

      },
      editKeyWord(row){
        let row_str = JSON.stringify(row);
        this.keyWordForm = JSON.parse(row_str);
        this.keyWordForm.is_show = this.keyWordForm.is_show == 1?true:false;
        this.keywordTitle ='更新热词';
        this.keywordDialog = true;
      },
      async keyWordSub() {
        if(!this.keyWordForm.word){
          this.$message({
            type: "error",
            message: '热词不能为空'
          });
          return false;
        }

        if(!this.keyWordForm.sort){
          this.$message({
            type: "error",
            message: '排序不能为空'
          });
          return false;
        }
        if(this.keyWordForm.online_at){
          this.keyWordForm.online_at = this.atFormatTime(this.keyWordForm.online_at);
        }
        if(this.keyWordForm.offline_at){
          this.keyWordForm.offline_at = this.atFormatTime(this.keyWordForm.offline_at);
        }
        let data = {
          word: this.keyWordForm.word,
          alias: this.keyWordForm.alias,
          online_at: this.keyWordForm.online_at,
          offline_at: this.keyWordForm.offline_at,
          sort: this.keyWordForm.sort,
          is_show: this.keyWordForm.is_show?1:0
        };
        if(this.keyWordForm.id){
          data.id = this.keyWordForm.id;
          let keyWord_res = await this.$post("/api/admin/kaifain/editServiceWord", data);
          if(keyWord_res.status == 1){
            this.getKeyWord();
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.keywordDialog = false;
          }
        }else{
          let keyWord_res = await this.$post("/api/admin/kaifain/addServiceWord", data);
          if(keyWord_res.status == 1){
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.getKeyWord();
            this.keywordDialog = false;
          }
        }

      },
      async getKeyWord(){
        let data = {
          page: 1,
          pageSize: 20
        }
        //获取热词
        let word_res = await this.$post("/api/admin/kaifain/findServiceWord", data);
        if(word_res.status == 1){
          this.keywordData = word_res.data.list;
          this.totals.keyword_total = word_res.data.total;
        }
      },
      async delKeyWord(id){
        this.$confirm('此操作将该热词状态改为删除状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.$post("/api/admin/kaifain/delServiceWord", data).then(res => {
            if(res.status == 1){
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getKeyWord();
            }
          });
        }).catch(() => {
          //几点取消的提示
        });
      },
      //banner 管理
      addBanner(){
        this.bannerForm = genDefBannerForm();
        this.bannerTitle ='新增轮播图';
        this.bannerDialog = true;
      },
      editBanner(row){
        let row_str = JSON.stringify(row);
        this.bannerForm = JSON.parse(row_str);
        this.bannerForm.is_show = this.bannerForm.is_show == 1?true:false;
        this.bannerForm.type = Number(this.bannerForm.type);
        this.bannerTitle='更新轮播图';
        this.bannerDialog = true;
      },
      handleAvatarSuccess(res, file) {
        this.bannerForm.image_url = res.data.file_url_abs;
      },
      beforeAvatarUpload(file) {
        return true
      },
      async bannerSub(){
        if(!this.bannerForm.image_url){
          this.$message({
            type: "error",
            message: '图片不能为空'
          });
          // return false;
          this.bannerForm.image_url = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2657797314,3507254549&amp;fm=26&amp;gp=0.jpg';
        }
        if(!this.bannerForm.theme_color){
          this.$message({
            type: "error",
            message: '背景色不能为空'
          });
          return false;
        }
        if(!this.bannerForm.jump_type){
          this.$message({
            type: "error",
            message: '跳转类型不能为空'
          });
          return false;
        }
        if(!this.bannerForm.jump_target){
          this.$message({
            type: "error",
            message: '跳转标识不能为空'
          });
          return false;
        }

        if(this.bannerForm.online_at){
          this.bannerForm.online_at = this.atFormatTime(this.bannerForm.online_at);
        }
        if(this.bannerForm.offline_at){
          this.bannerForm.offline_at = this.atFormatTime(this.bannerForm.offline_at);
        }

        let data = {
          theme_color: this.bannerForm.theme_color,
          image_url: this.bannerForm.image_url,
          jump_type: this.bannerForm.jump_type,
          jump_target: this.bannerForm.jump_target,
          online_at: this.bannerForm.online_at,
          offline_at: this.bannerForm.offline_at,
          sort: this.bannerForm.sort?this.bannerForm.sort:1,
          type: this.bannerForm.type,
          is_show: this.bannerForm.is_show?1:0
        };

        if(this.bannerForm.id){
          data.id = this.bannerForm.id;
          let res = await this.$post("/api/admin/kaifain/editBanner", data);
          if(res.status == 1){
            this.getBanner();
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.bannerDialog = false;
          }
        }else{
          let res = await this.$post("/api/admin/kaifain/addBanner", data);
          if(res.status == 1){
            this.$message({
              type: "success",
              message: "新增成功!"
            });
            this.getBanner();
            this.bannerDialog = false;
          }
        }
      },
      async getBanner(){
        let data = {
          page: 1,
          pageSize: 20
        }
        //获取bannner
        let banner_res = await this.$post("/api/admin/kaifain/findBanner", data);
        if(banner_res.status == 1){
          this.bannerData = banner_res.data.list;
          this.totals.banner_total = banner_res.data.total;
        }
      },
      async delBanner(id){
        this.$confirm('此操作将该轮播图状态改为删除状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.$post("/api/admin/kaifain/delBanner", data).then(res => {
            if(res.status == 1){
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getBanner();
            }
          });
        }).catch(() => {
          //几点取消的提示
        });
      },
      //服务方式管理
      addServiceType(){
        this.serviceTypeForm = genDefServiceTypeForm();
        this.serviceTypeTitle ='新增服务方式';
        this.serviceTypeDialog = true;
      },
      editServiceType(row){
        this.serviceTypeForm = {
          id: row.id,
          name: row.name,
          alias: row.alias,
          sort: row.sort,
          is_show: row.is_show?true:false
        }
        this.serviceTypeTitle ='编辑服务方式';
        this.editServiceTypeDialog = true;
      },
      async serviceTypeSub(){
        if(!this.serviceTypeForm.sort){
          this.$message({
            type: "error",
            message: '排序不能为空'
          });
          return false;
        }
        if(!this.serviceTypeForm.hash_id){
          this.$message({
            type: "error",
            message: '服务领域不能为空'
          });
          return false;
        }

        let cat_data = this.categoryData;
        for(let i = 0; i < cat_data.length; i++){
          if(this.serviceTypeForm.hash_id == cat_data[i]['id']){
            this.serviceTypeForm.name = cat_data[i]['name'];
            break;
          }
        }
        let data = {
          hash_id:this.serviceTypeForm.hash_id,
          name:this.serviceTypeForm.name,
          alias:this.serviceTypeForm.alias,
          sort:this.serviceTypeForm.sort,
          is_show:1
        }
        let res = await this.$post("/api/admin/kaifain/addServiceType", data);
        if(res.status == 1){
          this.getServiceType();
          this.$message({
            type: "success",
            message: "新增成功!"
          });
          this.serviceTypeDialog = false;
        }

      },
      async editServiceTypeSub(){
        if(!this.serviceTypeForm.sort){
          this.$message({
            type: "error",
            message: '排序不能为空'
          });
          return false;
        }
        let data = {
          id:this.serviceTypeForm.id,
          alias:this.serviceTypeForm.alias,
          sort:this.serviceTypeForm.sort,
          is_show:this.serviceTypeForm.is_show?1:0
        }
        let res = await this.$post("/api/admin/kaifain/editServiceType", data);
        if(res.status == 1){
          this.getServiceType();
          this.$message({
            type: "success",
            message: "编辑成功!"
          });
          this.editServiceTypeDialog = false;
        }
      },
      async getServiceType(){
        let data = {
          page: 1,
          pageSize: 20
        }
        //获取顶级分类
        let serviceType_res = await this.$post("/api/admin/kaifain/findServiceType", data);
        if(serviceType_res.status == 1){
          this.serviceTypeData = serviceType_res.data.list;
          this.totals.serviceType_total = serviceType_res.data.total;
        }
      },
      async delServiceType(hash_id){
        this.$confirm('此操作将该服务方式状态改为删除状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            hash_id: hash_id
          }
          this.$post("/api/admin/kaifain/delServiceType", data).then(res => {
            if(res.status == 1){
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getServiceType();
            }
          });
        }).catch(() => {
          //几点取消的提示
        });
      },
      //时间格式化
      atFormatTime(timer){
        const d = new Date(timer)
        let resDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        let resTime = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
        return resDate + ' '+ resTime;
      }
    }
  }
</script>
<style>
  .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;
  }
</style>