Skip to content

M
marketing
Commit 4c2eeabd by chenxin
Options

fix:追评

parent 85badb2e
Showing with 679 additions and 14 deletions
index.html
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/img/favicon.ico"> <link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/img/favicon.ico">
<title>GIC后台</title> <title>GIC后台</title>
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/iconfont.css"> <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css">
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css"> <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css">
<link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css"> <link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css">
<!-- element 皮肤 --> <!-- element 皮肤 -->
......
src/assets/style/base/reset.scss
...@@ -153,6 +153,9 @@ a:hover { ...@@ -153,6 +153,9 @@ a:hover {
.ml20{ .ml20{
margin-left: 20px!important; margin-left: 20px!important;
} }
.mb5{
margin-bottom: 5px!important;
}
.mb10{ .mb10{
margin-bottom: 10px!important; margin-bottom: 10px!important;
} }
......
src/views/evaluation/newest.vue
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
</el-select> </el-select>
<el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isBad" @change="refresh">不良评价</el-checkbox> <el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isBad" @change="refresh">不良评价</el-checkbox>
<el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isContent" @change="refresh">有评语</el-checkbox> <el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isContent" @change="refresh">有评语</el-checkbox>
<el-checkbox class="vertical-middle" size="small" border v-if="$route.meta.type !== 'bad'" :true-label="1" :false-label="0" v-model="listParams.isContent" @change="refresh">有追评</el-checkbox>
</div> </div>
<el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"> <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中">
<el-table-column :show-overflow-tooltip="false" width="90" align="left" prop="showStatus" fixed="left" label="服务号显示"> <el-table-column :show-overflow-tooltip="false" width="90" align="left" prop="showStatus" fixed="left" label="服务号显示">
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
<el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" @change="changeShow(scope.row)"> </el-switch> <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" @change="changeShow(scope.row)"> </el-switch>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column :show-overflow-tooltip="false" width="160" align="left" prop="createTime" label="评价时间"> <el-table-column :show-overflow-tooltip="false" width="160" align="left" prop="createTime" label="首次评价时间">
<template slot-scope="scope"> <template slot-scope="scope">
<p>{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm') }}</p> <p>{{ formatDateTimeByType(scope.row.createTime, 'yyyy-MM-dd-HH-mm') }}</p>
<p class="fz13 gray">订单号:{{ scope.row.orderNumber }}</p> <p class="fz13 gray">订单号:{{ scope.row.orderNumber }}</p>
...@@ -76,10 +77,10 @@ ...@@ -76,10 +77,10 @@
<el-table-column :show-overflow-tooltip="false" width="80" align="center" prop="replyStatus" label="回复"> <el-table-column :show-overflow-tooltip="false" width="80" align="center" prop="replyStatus" label="回复">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button v-if="scope.row.replyStatus !== 1 && scope.row.content" type="text" @click="replyData(scope.row)">立即回复</el-button> <el-button type="text" @click="replyData(scope.row)">
<el-popover v-if="scope.row.replyStatus === 1" class="item" trigger="hover" :content="scope.row.replyContent" placement="top-start"> <template v-if="scope.row.replyStatus !== 1 && scope.row.content">立即回复</template>
<i slot="reference" class="el-icon-message fz20 danger-color cursor"></i> <i v-if="scope.row.replyStatus === 1" class="el-icon-message fz20 danger-color cursor"></i>
</el-popover> </el-button>
</template> </template>
</el-table-column> </el-table-column>
......
src/views/evaluation/reply.vue
<template> <template>
<el-dialog title="回复" :visible.sync="show" width="30%" :before-close="close"> <el-dialog title="查看详情" :visible.sync="show" width="670px" :before-close="close">
<el-form :model="form" :rules="rules" ref="form" label-width="0" class="demo-ruleForm"> <div style="pading-left: 15px;">
<el-form-item prop="content"> <div class="rpList">
<dm-input type="textarea" v-model="form.content" :rows="4" placeholder="请输入回复内容" :maxlength="200"></dm-input> <div v-for="(item, idx) in replyList" :key="idx">
</el-form-item> <i class="iconfont sign" :class="`${item.sign ? 'icon-huiyuan-copy blue' : 'icon-kefu1 warning-color'}`"></i>
</el-form> <div class="head">
<p class="name">{{ item.name }}</p>
<p>{{ item.time }}</p>
<el-button class="del" type="text">删除</el-button>
</div>
<div class="content">
<div class="text">{{ item.text }}</div>
<div class="imgl" v-if="item.imgList && item.imgList.length">
<img v-for="(img, idx) in item.imgList" :key="idx" style="width: 52px; height: 52px;cursor: pointer;" title="点击查看大图" class="mr10" :src="img" preview-title-enable="true" preview-nav-enable="true" @click="showImage(img)" />
</div>
</div>
</div>
</div>
<el-form :model="form" :rules="rules" ref="form" label-width="0" class="demo-ruleForm">
<p class="mb5 regular-font-color">添加回复：</p>
<el-form-item prop="content">
<dm-input type="textarea" v-model="form.content" :rows="4" placeholder="请输入回复内容" :maxlength="200"></dm-input>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="close">关 闭</el-button> <el-button @click="close">关 闭</el-button>
<el-button type="primary" @click="submit('form')">提 交</el-button> <el-button type="primary" @click="submit('form')">提 交</el-button>
</span> </span>
<vue-gic-img-preview :imgUrl="imgUrl" :imgShowFlag="imgShowFlag" @hideImage="hideImage"></vue-gic-img-preview>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
...@@ -32,14 +51,50 @@ export default { ...@@ -32,14 +51,50 @@ export default {
}, },
rules: { rules: {
content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }, { max: 200, message: '字数不能大于200', trigger: 'blur' }] // eslint-disable-line content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }, { max: 200, message: '字数不能大于200', trigger: 'blur' }] // eslint-disable-line
} },
srcList: [],
replyList: [
{ id: 1, name: '管理员', text: '11', time: '11', sign: 0 },
{ id: 2, name: 'ss', text: '22', time: '11', sign: 1, imgList: ['http://image.biaobaiju.com/uploads/20180801/23/1533136201-VtUkzgfLxA.jpg', 'http://www.17qq.com/img_qqtouxiang/77853183.jpeg', 'http://image.biaobaiju.com/uploads/20181004/16/1538640094-ZSrlkKGWcX.jpg'] },
{ id: 3, name: '管理员', text: '33', time: '11', sign: 0 },
{ id: 4, name: 'ss', text: '44', time: '11', sign: 1 },
{ id: 5, name: 'ss', text: '55', time: '11', sign: 0 },
{ id: 6, name: '管理员', text: '66', time: '11', sign: 1 },
{ id: 7, name: 'ss', text: '77', time: '11', sign: 0 },
{ id: 8, name: '管理员', text: '88', time: '11', sign: 1, imgList: ['http://img.qqzhi.com/uploads/2019-02-27/045131967.jpg'] }
],
imgShowFlag: false,
imgUrl: ''
}; };
}, },
watch: {
show(val) {
if (val) {
let arr = [];
this.replyList.forEach(v => {
if (v.sign && v.imgList && v.imgList.length) {
arr = arr.concat(v.imgList);
}
});
this.srcList = arr;
}
}
},
methods: { methods: {
close() { close() {
this.$refs.form.resetFields(); this.$refs.form.resetFields();
this.$emit('update:show', false); this.$emit('update:show', false);
}, },
showImage(src) {
if (!src || src == '') {
return false;
}
this.imgShowFlag = true;
this.imgUrl = src;
},
hideImage(val) {
this.imgShowFlag = val;
},
submit(formName) { submit(formName) {
this.$refs[formName].validate(valid => { this.$refs[formName].validate(valid => {
if (valid) { if (valid) {
...@@ -60,3 +115,70 @@ export default { ...@@ -60,3 +115,70 @@ export default {
} }
}; };
</script> </script>
<style scoped lang="scss">
.rpList {
height: 400px;
overflow-y: auto;
> div {
position: relative;
padding-left: 40px;
padding-bottom: 20px;
i.sign {
position: absolute;
left: 0;
top: 3px;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 18px;
background: rgba(235, 236, 240, 1);
border-radius: 50%;
}
&:after {
top: 40px;
position: absolute;
width: 1px;
background: #e4e7ed;
left: 15px;
content: '';
height: calc(100% - 42px);
}
}
.head {
overflow: hidden;
position: relative;
.del {
position: absolute;
right: 0px;
top: 0px;
}
p.name {
color: rgba(48, 49, 51, 1);
line-height: 20px;
& + p {
color: rgba(96, 98, 102, 1);
line-height: 18px;
}
}
}
.content {
margin-top: 10px;
padding: 12px 18px;
background: #f5f7fa;
.text {
width: 532px;
color: rgba(48, 49, 51, 1);
line-height: 20px;
}
.imgl {
margin-top: 7px;
}
}
}
.demo-ruleForm {
margin-top: 25px;
padding-left: 40px;
}
</style>
static/fonts/demo.css 0 → 100644
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
static/fonts/demo_index.html 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.eot 100755 → 100644
No preview for this file type
static/fonts/iconfont.js 100755 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.svg 100755 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.ttf 100755 → 100644
No preview for this file type
static/fonts/iconfont.woff 100755 → 100644
No preview for this file type
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment