<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>管理后台</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <link href="/sitefiles/assets/images/favicon.png" rel="icon" type="image/png"> <link href="/sitefiles/assets/css/font-awesome-4.7.0.min.css?v=1618992755943" rel="stylesheet" type="text/css"> <link href="/sitefiles/assets/css/ionicons-2.0.0.min.css?v=1618992755943" rel="stylesheet" type="text/css"> <link href="/sitefiles/assets/lib/elementui/themechalk/index.css?v=1618992755943" rel="stylesheet" type="text/css"> <link href="/sitefiles/assets/css/element-ui.css?v=1618992755943" rel="stylesheet" type="text/css"> <style> .el-tabs--right .el-tabs__header.is-right{
      width: 98%;
    }
    .el-card__header {
      padding: 10px 20px;
    }
    .el-card-wrapper {
      padding-bottom: 15px; 
      padding-right: 15px; 
      width: 25%; 
      box-sizing: border-box;
      display: inline-block;
      vertical-align: top;
    }

    .thumb {
      padding: 10px;
    }
    .thumb .cover {
      cursor: pointer; 
      position: relative; 
      height:150px; 
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-color: #f6f8f9;
    }
    .thumb .cover .text {
      position: absolute;
      bottom: 0;
      text-align: center;
      display: block;
      width: 100%;
      color: #fff;
      padding: 6px;
      background-color: rgba(202, 195, 195, 0.28);;
    }
    .list {
      padding: 10px;
      cursor: pointer;
    }
    .thumb:hover, .active, .list:hover {
      background: rgb(225, 243, 216);
    }
    .list .text {
      text-align: left;
      font-size: 14px;
      height: 38px;
      overflow: hidden;
    } </style> </head> <body> <div id="main"> <div v-if="this.pageLoad" style="display: none" :style="{display: ''}"> <div style="height: 10px"></div> <div v-if="!success"> <div role="alert" class="el-alert el-alert--error is-light" style="padding: 30px"> <div class="el-alert__content"> <p class="el-alert__description" style="font-size: 14px;">{{ errorMessage }}</p> </div> </div> </div> <div v-else> <el-row> <el-col :span="12"> <el-form :inline="true" :model="form" size="mini"> <el-form-item label="搜索规则名称"> <el-input v-model="form.keyword" placeholder="请输入规则名称"></el-input> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="btnSearchClick">查询</el-button> </el-form-item> </el-form> </el-col> <el-col class="commands" align="right" :span="12"> <el-button v-on:click="btnAddClick" size="small" plain type="primary"> <i class="el-icon-plus"></i> 添加回复 </el-button> </el-col> </el-row> <div style="height: 10px"></div> <el-divider></el-divider> <el-table :data="rules" stripe style="width: 100%"> <el-table-column type="expand" width="25" align="right"> <template slot-scope="scope"> <el-form label-position="top"> <el-form-item label="关键词"> <strong v-for="keyword in scope.row.keywords" style="margin-right: 15px;"> {{ keyword.text }}<span class="tips">（{{ keyword.exact ? '全匹配' : '半匹配' }}）</span> </strong> </el-form-item> <el-form-item label="回复内容"> <template v-for="message in scope.row.messages"> <div v-if="message.materialType === 'Message' && message.materialId"> <div class="el-card-wrapper" v-if="message.items.length === 1"> <el-card :body-style="{ padding: '0px', textAlign: 'center' }"> <div slot="header" class="clearfix"> <el-tooltip :content="message.items[0].title" placement="top"> <span style="text-overflow: ellipsis; display: block; width: 100%; white-space: nowrap; overflow: hidden;">{{ message.items[0].title }}</span> </el-tooltip> </div> <a href="javascript:;"> <el-image style="width: 100%; min-height: 120px; max-height:220px;" :src="message.items[0].thumbUrl"> <div slot="error" class="image-slot"> <i class="el-icon-picture-outline"></i> </div> </el-image> </a> <div style="padding: 14px;"> <div style="cursor: pointer; font-size: 14px; text-overflow: ellipsis; width: 100%; max-height: 95px; line-height: 20px; overflow: hidden;"> {{ message.items[0].digest }} </div> </div> </el-card> </div> <div class="el-card-wrapper" v-else> <el-card :body-style="{ padding: '0px', textAlign: 'center' }"> <template v-for="(item, index) in message.items" :key="index"> <div v-if="index === 0" class="thumb"> <div class="cover" :style="{backgroundImage: 'url(' + item.thumbUrl + ')'}"> <div class="text">{{item.title}}</div> </div> </div> <div v-else class="list"> <el-row> <el-col span="18"> <div class="text">{{item.title}} {{item.index}}</div> </el-col> <el-col span="6"> <el-image fit="cover" style="width: 55px; height: 55px" :src="item.thumbUrl"> <div slot="error" class="image-slot"> <i class="el-icon-picture-outline" style="margin: 0px; font-size: 36px; color: #999; background: #fff; padding: 5px;"></i> </div> </el-image> </el-col> </el-row> </div> <el-divider></el-divider> </template> </el-card> </div> </div> <div v-else-if="message.materialType === 'Text' && message.text" style="padding: 20px 10px;"> <span style="white-space: pre;">{{ message.text }}</span> </div> <div v-else-if="message.materialType === 'Image' && message.materialId"> <el-card shadow="never" style="width: 25%; margin-right: 5px; display: inline-block"> <el-image style="width: 100%; min-height: 120px; max-height:220px;" :src="message.image.url"> <div slot="error" class="image-slot"> <i class="el-icon-picture-outline"></i> </div> </el-image> <div style="padding: 14px;"> <div> {{ message.image.title }} </div> </div> </el-card> </div> <div v-else-if="message.materialType === 'Audio' && message.materialId"> <el-card shadow="never" style="width: 25%; margin-right: 5px; display: inline-block"> <div slot="header" class="clearfix"> <i class="el-icon-headset"></i> <span>音频</span> </div> <div style="padding: 14px;"> <div> {{ message.audio.title }} </div> </div> </el-card> </div> <div v-else-if="message.materialType === 'Video' && message.materialId"> <el-card shadow="never" style="width: 25%; margin-right: 5px; display: inline-block"> <div slot="header" class="clearfix"> <i class="el-icon-video-play"></i> <span>视频</span> </div> <div style="padding: 14px;"> <div> {{ message.video.title }} </div> </div> </el-card> </div> <el-divider></el-divider> </template> </el-form-item> </el-form> </template> </el-table-column> <el-table-column prop="ruleName" label="规则名称"> </el-table-column> <el-table-column label="关键词"> <template slot-scope="scope"> {{getKeywords(scope.row.keywords)}} </template> </el-table-column> <el-table-column label="回复内容"> <template slot-scope="scope"> {{getMessages(scope.row.messages)}} </template> </el-table-column> <el-table-column width="120" label="更新于"> <template slot-scope="scope"> {{utils.getFriendlyDate(scope.row.lastModifiedDate)}} </template> </el-table-column> <el-table-column label="操作" width="140"> <template slot-scope="scope"> <el-button-group> <el-button size="mini" v-on:click="btnEditClick(scope.row)"> 编辑 </el-button> <el-button size="mini" v-on:click="btnDeleteClick(scope.row)"> 删除 </el-button> </el-button-group> </template> </el-table-column> </el-table> <div style="text-align: center; margin-top: 15px"> <el-pagination v-on:current-change="btnPageClick" :current-page="form.page" :page-size="form.perPage" layout="total, prev, pager, next, jumper" :total="count"> </el-pagination> </div> </div> </div> <div v-else :style="{top: ($(window).height()/2 - 30) + 'px'}" v-loading="true" element-loading-text="页面加载中"></div> </div> </body> </html> <script src="/sitefiles/assets/lib/es6-promise.auto.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/axios-0.17.1.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/core-js-3.6.5.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/lodash-4.17.10.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/jquery-1.9.1.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/layer/layer-3.1.1.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/sweetalert2-7.28.4.all.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/vue-2.5.16.min.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/lib/elementui/index.js?v=1618992755943"></script> <script src="/sitefiles/assets/js/admin.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/js/utils.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/js/cloud.js?v=1618992755943" type="text/javascript"></script> <script src="/sitefiles/assets/js/admin/wx/reply.js?v=1618992755943" type="text/javascript"></script> 