1161 lines
29 KiB
Vue
1161 lines
29 KiB
Vue
<template>
|
||
<div class="detail">
|
||
<div class="content"
|
||
:style="contents">
|
||
<div style="padding: 3px 16px;width: 100%;height:44px;margin-top: var(--app-safe-area-top);background:white;z-index: 999">
|
||
<i style="font-size: 22px;color:#000;line-height:44px"
|
||
class="awsui-iconfont"
|
||
@click="backHome"></i><span class="titlespan">流程制度</span></div>
|
||
<div class="items"
|
||
style="margin-top: 22px;padding-bottom: 5px;">
|
||
<span class="top">{{ title }}</span>
|
||
</div>
|
||
<div class="items rate"
|
||
style="padding:0px 10px;">
|
||
<ul class="list"
|
||
style="background:#f9f9f9;border:0.333px solid #e9e9e9;border-radius: 3px; ">
|
||
<li style="border-bottom:0;">
|
||
<div class="icon"
|
||
style="width:40px; height: 40px;">
|
||
<img v-show="userHeadImg!=''"
|
||
:src="userHeadImg"
|
||
alt=""
|
||
style="width:40px; height: 40px;">
|
||
</div>
|
||
<div class="left">
|
||
<div class="title">
|
||
{{ userName }} | {{ department }}
|
||
</div>
|
||
<div class="description rate_info">
|
||
<i class="awsui-iconfont"></i><span>{{ browseNum }}</span>
|
||
<i style="margin-left: 8px;"
|
||
class="awsui-iconfont"></i><span>{{ evaluate.evaluateNum }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="right"
|
||
v-show="isRate===1">
|
||
<div class="score">
|
||
<span>{{ score }}</span>
|
||
<i v-show="showStar"
|
||
:style="openStar?'color:#1989fa':''"
|
||
@click="operateStar"
|
||
class="awsui-iconfont"></i>
|
||
</div>
|
||
<van-rate readonly
|
||
class="start"
|
||
:size="13"
|
||
void-icon="star"
|
||
void-color="#ddd"
|
||
v-model="start"/>
|
||
</div>
|
||
</li>
|
||
<div class="center"
|
||
:style="openStarStyle">
|
||
<div class=""
|
||
:style="widthStyle">
|
||
<div class="item">
|
||
<div class="start">
|
||
<van-rate readonly
|
||
:size="7"
|
||
v-model="value"
|
||
void-icon="star"
|
||
void-color="#ddd"/>
|
||
</div>
|
||
<van-progress class="progress"
|
||
color="#ffd21e"
|
||
pivot-text=""
|
||
:percentage="percentage.fiveStar"/>
|
||
<div class="percentage">{{ percentage.fiveStarBar }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="start">
|
||
<van-rate readonly
|
||
:size="7"
|
||
:count="4"
|
||
v-model="value"
|
||
void-icon="star"
|
||
void-color="#ddd"/>
|
||
</div>
|
||
<van-progress class="progress"
|
||
color="#ffd21e"
|
||
pivot-text=""
|
||
:percentage="percentage.fourStar"/>
|
||
<div class="percentage">{{ percentage.fourStarBar }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="start">
|
||
<van-rate readonly
|
||
:size="7"
|
||
:count="3"
|
||
v-model="value"
|
||
void-icon="star"
|
||
void-color="#ddd"/>
|
||
</div>
|
||
<van-progress class="progress"
|
||
color="#ffd21e"
|
||
pivot-text=""
|
||
:percentage="percentage.threeStar"/>
|
||
<div class="percentage">{{ percentage.threeStarBar }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="start">
|
||
<van-rate readonly
|
||
:size="7"
|
||
:count="2"
|
||
v-model="value"
|
||
void-icon="star"
|
||
void-color="#ddd"/>
|
||
</div>
|
||
<van-progress class="progress"
|
||
color="#ffd21e"
|
||
pivot-text=""
|
||
:percentage="percentage.twoStar"/>
|
||
<div class="percentage">{{ percentage.twoStarBar }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="start">
|
||
<van-rate readonly
|
||
:size="7"
|
||
:count="1"
|
||
v-model="value"
|
||
void-icon="star"
|
||
void-color="#ddd"/>
|
||
</div>
|
||
<van-progress class="progress"
|
||
color="#ffd21e"
|
||
pivot-text=""
|
||
:percentage="percentage.oneStar"/>
|
||
<div class="percentage">{{ percentage.oneStarBar }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="openStar"
|
||
class="bottom">
|
||
您的评价：
|
||
<van-rate :size="13"
|
||
void-icon="star"
|
||
void-color="#ddd"
|
||
v-model="start"
|
||
@change="browseCardInfo"/>
|
||
</div>
|
||
</ul>
|
||
</div>
|
||
<div v-show="description.length>0"
|
||
class="card_content">
|
||
<span class="description"
|
||
v-html="description">
|
||
</span>
|
||
</div>
|
||
<div class="divide"></div>
|
||
<div class="items file"
|
||
style="padding:0;">
|
||
<div class="title"
|
||
style="padding-top: 2px">
|
||
附件
|
||
<i class="awsui-iconfont"
|
||
style="float:right;cursor: pointer;"
|
||
@click="openpanel"></i>
|
||
</div>
|
||
<ul class="list filelist">
|
||
<li v-for="(item,index) in list"
|
||
:key="index">
|
||
<div class="file_title"
|
||
@click="fileOperatePreview(item)">
|
||
{{ item.fileName }}
|
||
</div>
|
||
<div class="file_info">
|
||
<i class="awsui-iconfont"
|
||
v-html="getIcon(item.fileSuffixIcon)"></i>
|
||
{{ formatSize(item.fileSize) }} | {{ item.createUsername }} | {{ item.createTime }}
|
||
<span v-show="cardSetting.onlineLevel===1"
|
||
class="download"
|
||
@click="fileOperate(item)">
|
||
<i class="awsui-iconfont download"
|
||
style="color: #4A90E2;"></i>
|
||
</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="divide"
|
||
v-show="evaluate.list.length>0"></div>
|
||
<div class="items"
|
||
style="padding:0;">
|
||
<ul class="list evaluate">
|
||
<li v-for="(item,index) in evaluate.list"
|
||
:key="index">
|
||
<div class="icon"
|
||
style="width:40px;">
|
||
<img :src="imgSrc(item.commentUserPhoto)"
|
||
alt=""
|
||
style="width:45px;">
|
||
</div>
|
||
<div class="left">
|
||
<span class="title">
|
||
{{ item.commentUsername }}
|
||
</span>
|
||
<span class="date">
|
||
{{ item.commentTime }}
|
||
</span>
|
||
<div class="description">
|
||
{{ item.commentContent }}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div v-show="noContent">
|
||
<div class="con"
|
||
:style="noContentH">
|
||
<div class="img">
|
||
<img src="../assets/no_content.png"
|
||
alt=""
|
||
style="width: 125px;">
|
||
</div>
|
||
<div class="text">暂无数据</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer"
|
||
v-show="cardSetting.isComment==1">
|
||
<span class="headImg"><img :src="currentUserPhoto"
|
||
alt=""></span>
|
||
<van-field
|
||
class="field border"
|
||
v-model="message"
|
||
center
|
||
placeholder="请输入评论内容..."
|
||
@input="changeEmoji"
|
||
>
|
||
<template #button>
|
||
<van-button size="small"
|
||
type="info"
|
||
@click="insertComment">提交
|
||
</van-button>
|
||
</template>
|
||
</van-field>
|
||
</div>
|
||
<van-action-sheet v-model="show"
|
||
@close="closeSheet">
|
||
<div class="content"
|
||
style="width: 100%;padding: 20px 0px">
|
||
<span v-if="!retroactionflag">
|
||
<div v-show="showFavorite"
|
||
class="options_op"
|
||
@click="favorite">
|
||
<div class="icon">
|
||
<i v-if="hasFavorited"
|
||
class="awsui-iconfont"></i>
|
||
<i v-else
|
||
class="awsui-iconfont"></i>
|
||
</div>
|
||
<div class="label">{{ hasFavorited ? "取消收藏" : "收藏" }}</div>
|
||
</div>
|
||
<div class="options_op"
|
||
:style="showFavorite?'':'width:100%;'"
|
||
@click="retroaction">
|
||
<div class="icon"><i class="awsui-iconfont"></i></div>
|
||
<div class="label">反馈</div>
|
||
</div>
|
||
</span>
|
||
<div class="retroaction-panel"
|
||
v-else>
|
||
<van-field
|
||
class="border"
|
||
v-model="remarks"
|
||
:autosize="{ maxHeight: 100, minHeight: 100 }"
|
||
type="textarea"
|
||
placeholder="反馈内容将发送给管理员"
|
||
/>
|
||
<van-button class="retroaction-submit"
|
||
size="small"
|
||
type="info"
|
||
@click="reportCard">提交
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</van-action-sheet>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import awsuiAxios from "../awsuiAxios";
|
||
|
||
export default {
|
||
name: "know-detail",
|
||
data() {
|
||
return {
|
||
noContentH: "",
|
||
initParams: {},
|
||
kmsSetting: {},
|
||
widthStyle: "",
|
||
openStarStyle: "position:absolute;left:-1000px",
|
||
noContent: false,
|
||
showFavorite: false,
|
||
showStar: false,
|
||
openStar: false,
|
||
contents: "",
|
||
retroactionflag: false,
|
||
cardSetting: {},
|
||
remarks: "",
|
||
value: 0,
|
||
title: "",
|
||
description: "",
|
||
hasFavorited: false,
|
||
list: [],
|
||
currentUserPhoto: "",
|
||
userHeadImg: "",
|
||
department: "",
|
||
userName: "",
|
||
score: "0", //评分
|
||
start: 0, //星星数 必须是number类型
|
||
browseNum: "0", //浏览人数
|
||
evaluate: {
|
||
evaluateNum: "0", //评价人数
|
||
list: []
|
||
},
|
||
percentage: {
|
||
fiveStar: 0,
|
||
fourStar: 0,
|
||
threeStar: 0,
|
||
twoStar: 0,
|
||
oneStar: 0,
|
||
fiveStarBar: "",
|
||
fourStarBar: "",
|
||
threeStarBar: "",
|
||
twoStarBar: "",
|
||
oneStarBar: ""
|
||
},
|
||
message: "",
|
||
show: false,
|
||
isRate: 0//是否显示评分,0:禁止；1：允许
|
||
};
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
imgSrc(path) {
|
||
return path.replace("./df", this.getPath() + "df");
|
||
},
|
||
getNoRPath() {
|
||
return this.getPath().replace("/", "").replace("./", "../");
|
||
},
|
||
getPath() {
|
||
return axiosBaseUrl;
|
||
},
|
||
getIcon(fileSuffixIcon) {
|
||
if (["jpg", "gif", "tif", "tiff", "bmp", "jpeg2000", "psd", "png", "svg", "pcx", "dxf", "wmf", "emf", "eps", "tga"].includes(fileSuffixIcon)) {
|
||
return "";
|
||
} else if (["ppt", "pptx"].includes(fileSuffixIcon)) {
|
||
return "";
|
||
} else if (["doc", "docx"].includes(fileSuffixIcon)) {
|
||
return "";
|
||
} else if (["xls", "xlsx"].includes(fileSuffixIcon)) {
|
||
return "";
|
||
} else if (["pdf"].includes(fileSuffixIcon)) {
|
||
return "";
|
||
} else if (["zip"].includes(fileSuffixIcon)) {
|
||
return "";
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
backHome() {
|
||
window.history.back();
|
||
},
|
||
operateStar() {
|
||
if (this.openStar) {
|
||
this.noContentH = "top:65%";
|
||
this.openStarStyle = "position:absolute;left:-1000px;";
|
||
} else {
|
||
this.noContentH = "top:73%";
|
||
this.openStarStyle = "";
|
||
}
|
||
this.openStar = !this.openStar;
|
||
},
|
||
openpanel() {
|
||
this.retroactionflag = false;
|
||
this.show = true;
|
||
},
|
||
closeSheet() {
|
||
this.remarks = "";
|
||
},
|
||
fileOperatePreview(obj) {
|
||
let fileType = obj.fileNameNoVersion.lastIndexOf(".") > -1 ? obj.fileNameNoVersion.substring(obj.fileNameNoVersion.lastIndexOf(".") + 1, obj.fileNameNoVersion.length) : "";
|
||
let tmpSetting = this.kmsSetting;
|
||
let previewTypes = tmpSetting.browserPreview.split(",");
|
||
let hasType = false;
|
||
previewTypes.forEach((ob, index) => {
|
||
if (ob == fileType) {
|
||
hasType = true;
|
||
}
|
||
});
|
||
let data = {};
|
||
if (hasType) {// 浏览器直接预览，不调用onlinedoc
|
||
data = {
|
||
cmd: "com.actionsoft.apps.kms_knwl_browser_preview",
|
||
fileId: obj.id
|
||
};
|
||
} else {
|
||
if (tmpSetting.isOnlinedocAppActive) {
|
||
//showFullScreenPanel
|
||
data = {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_preview_file",
|
||
isDownload: this.cardSetting.onlineLevel === 1,
|
||
isCopy: true,
|
||
fileId: obj.id
|
||
};
|
||
} else {
|
||
return;
|
||
}
|
||
}
|
||
let that = this;
|
||
localStorage.setItem("knowCarParams", JSON.stringify(this.initParams));
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: data
|
||
}).then(function (r) {
|
||
if (r.result == "error") {
|
||
that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
|
||
} else {
|
||
let url = r.data.url;
|
||
var head = document.location.origin + "/portal";
|
||
if (url.indexOf("./df") > -1) {
|
||
url = url.replace("./df", head + "/r/df");
|
||
} else {
|
||
url = url.replace("./w", head + "/r/w");
|
||
}
|
||
try {
|
||
if (awsWebview.openWebviewPost(url, null) === false) {
|
||
window.location.href = url;
|
||
}
|
||
} catch (e) {
|
||
}
|
||
}
|
||
});
|
||
},
|
||
fileOperate(obj) {
|
||
let $this = this;
|
||
localStorage.setItem("knowCarParams", JSON.stringify(this.initParams));
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_download_file",
|
||
fileId: obj.id
|
||
}
|
||
}).then((req) => {
|
||
let data = req.data;
|
||
if (data !== undefined && Object.keys(data).length > 0) {
|
||
let url = data.downloadURL;
|
||
window.open(url);
|
||
}
|
||
}).catch((err) => {
|
||
$this.$message({
|
||
type: "error",
|
||
message: err.message
|
||
});
|
||
});
|
||
},
|
||
favorite() {
|
||
let that = this;
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_collect_card",
|
||
cardId: this.initParams.id
|
||
}
|
||
}).then(function (r) {
|
||
if (r.result === "ok") { // 收藏成功
|
||
that.hasFavorited = true;
|
||
that.$toast({message: "收藏成功", overlay: true});
|
||
} else if (r.result === "warning") { // 取消收藏成功
|
||
that.hasFavorited = false;
|
||
that.$toast({message: "取消收藏成功", overlay: true});
|
||
}
|
||
that.show = false;
|
||
});
|
||
},
|
||
retroaction() {
|
||
this.retroactionflag = true;
|
||
},
|
||
reportCard() {
|
||
let that = this;
|
||
if (this.remarks === "") {
|
||
return that.$toast({message: "反馈内容不允许为空", overlay: false});
|
||
}
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_report_card",
|
||
cardId: this.initParams.id,
|
||
dimensionId: this.initParams.dimensionId,
|
||
reportContent: encodeURIComponent(this.remarks)
|
||
}
|
||
}).then(function (r) {
|
||
if (r.result === "ok") { // 收藏成功
|
||
that.$toast({message: "谢谢您的反馈", overlay: true});
|
||
that.show = false;
|
||
that.retroactionflag = false;
|
||
}
|
||
});
|
||
},
|
||
formatSize(size) {
|
||
if (size == "0") {
|
||
return "-";
|
||
}
|
||
size = parseFloat(size);
|
||
let units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB", "BB"];
|
||
let step = 1024;
|
||
let unitIndex = 0;
|
||
while (true) {
|
||
if (size > 1024) {
|
||
size = parseFloat(size / step).toFixed(2);
|
||
unitIndex++;
|
||
} else {
|
||
break;
|
||
}
|
||
}
|
||
return size + units[unitIndex];
|
||
},
|
||
browseCardInfo() {
|
||
let that = this;
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_rate_card",
|
||
cardId: this.initParams.id,
|
||
rateId: this.cardSetting.rateId,
|
||
rateLevel: this.start
|
||
}
|
||
}).then(function (r) {
|
||
if (r.result === "error") {
|
||
} else {
|
||
that.$toast({message: "评分成功", overlay: true});
|
||
that.refreshInfo();
|
||
}
|
||
});
|
||
},
|
||
insertComment(val) {
|
||
if (this.message.trim() === "") {
|
||
this.$toast({message: "评论内容不允许为空", overlay: true});
|
||
return false;
|
||
}
|
||
if (this.message.trim().length > 1000) {
|
||
this.$toast({message: "评论内容长度不能超过1000个字符", overlay: true});
|
||
return false;
|
||
}
|
||
let that = this;
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_comment_insert",
|
||
cardId: this.initParams.id,
|
||
commentContent: this.message.trim()
|
||
}
|
||
}).then(function (r) {
|
||
that.evaluate.evaluateNum++;
|
||
that.evaluate.list.push(r.data.comment);
|
||
that.noContent = false;
|
||
that.message = "";
|
||
});
|
||
},
|
||
commonOp(data) {
|
||
this.showFavorite = data.showFavorite;
|
||
this.list = data.files;
|
||
this.cardSetting = data;
|
||
if (data.isComment == 0) {
|
||
this.contents = "height:" + window.innerHeight + "px";
|
||
}
|
||
this.department = data.createUserDept;
|
||
this.userName = data.createUsername;
|
||
this.browseNum = data.card.readCount;
|
||
let starState = data.isRate != 1;
|
||
if (starState) {
|
||
this.showStar = false;
|
||
this.openStar = false;
|
||
} else {
|
||
this.showStar = true;
|
||
}
|
||
this.userHeadImg = this.imgSrc(data.createUserPhoto);
|
||
this.currentUserPhoto = this.imgSrc(data.currentUserPhoto);
|
||
this.evaluate.list = data.comments;
|
||
this.evaluate.evaluateNum = data.comments.length;
|
||
this.noContent = data.comments.length == 0 && this.list.length == 0;
|
||
this.lists = data.data;
|
||
this.description = data.cardContext;
|
||
this.title = data.cardName;
|
||
this.isRate = data.isRate;
|
||
if (data.isCollected) {
|
||
this.hasFavorited = true;
|
||
}
|
||
let rates = data.rates;
|
||
let rateUserCounts = rates["1"] + rates["2"] + rates["3"] + rates["4"] + rates["5"];
|
||
this.start = data.rateLevel;
|
||
if (rateUserCounts > 0) {
|
||
var totalScore = rates["1"] * 1 + rates["2"] * 2 + rates["3"] * 3 + rates["4"] * 4 + rates["5"] * 5;
|
||
var avgScore = (totalScore / (rates["1"] + rates["2"] + rates["3"] + rates["4"] + rates["5"])).toFixed(1);
|
||
this.score = avgScore;
|
||
this.percentage.fiveStar = ((rates["5"] / rateUserCounts) * 100);
|
||
this.percentage.fourStar = ((rates["4"] / rateUserCounts) * 100);
|
||
this.percentage.threeStar = ((rates["3"] / rateUserCounts) * 100);
|
||
this.percentage.twoStar = ((rates["2"] / rateUserCounts) * 100);
|
||
this.percentage.oneStar = ((rates["1"] / rateUserCounts) * 100);
|
||
let fives = ((rates["5"] / rateUserCounts) * 100);
|
||
let four = ((rates["4"] / rateUserCounts) * 100);
|
||
let three = ((rates["3"] / rateUserCounts) * 100);
|
||
let two = ((rates["2"] / rateUserCounts) * 100);
|
||
let one = ((rates["1"] / rateUserCounts) * 100);
|
||
this.percentage.fiveStarBar = fives == 0 ? "" : fives + "%";
|
||
this.percentage.fourStarBar = four == 0 ? "" : four + "%";
|
||
this.percentage.threeStarBar = three == 0 ? "" : three + "%";
|
||
this.percentage.twoStarBar = two == 0 ? "" : two + "%";
|
||
this.percentage.oneStarBar = one == 0 ? "" : one + "%";
|
||
}
|
||
},
|
||
refreshInfo() {
|
||
let params = this.initParams,
|
||
that = this;
|
||
if (!params.id) {
|
||
return false;
|
||
}
|
||
// 获取知识列表数据
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_browse_card_info_json",
|
||
cardId: params.id,
|
||
isBorrow: false,
|
||
boId: params.boId ? params.boId : "",
|
||
isEdit: true,
|
||
dimensionId: params.dimensionId
|
||
}
|
||
}).then(function (r) {
|
||
that.loading = false;
|
||
if (r.result == "error") {
|
||
that.$toast({message: r.data ? r.data.desc : r.msg, overlay: true});
|
||
} else {
|
||
let data = r.data;
|
||
that.commonOp(data);
|
||
}
|
||
});
|
||
},
|
||
getSettingFile() {
|
||
// 获取知识列表数据
|
||
let that = this;
|
||
awsuiAxios.post({
|
||
url: "jd",
|
||
data: {
|
||
cmd: "com.actionsoft.apps.kms_knwl_center_mobile_check_fullsearch"
|
||
}
|
||
}).then(function (r) {
|
||
that.kmsSetting = r.data.setting;
|
||
});
|
||
},
|
||
//屏蔽emoji表情输入
|
||
changeEmoji() {
|
||
let patt = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
|
||
this.message = this.message.replace(patt, function (char) {
|
||
if (char.length === 2) {
|
||
return "";
|
||
} else {
|
||
return char;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
mounted() {
|
||
if (window.ReactNativeWebView) {
|
||
window.ReactNativeWebView.postMessage(JSON.stringify({
|
||
type: 'headerShown',
|
||
visible: false, // true 显示 false 隐藏
|
||
}));
|
||
}
|
||
let h = window.innerHeight - 51;
|
||
this.contents = "height:" + h + "px";
|
||
this.widthStyle = "width:" + (window.innerWidth - 43) + "px";
|
||
if (!this.$route.params || !this.$route.params.id) {
|
||
let storgateParams = localStorage.getItem("knowCarParams");
|
||
if (storgateParams != undefined && storgateParams != "") {
|
||
this.initParams = eval("(" + storgateParams + ")");
|
||
localStorage.setItem("knowCarParams", undefined);
|
||
}
|
||
} else {
|
||
this.initParams = this.$route.params;
|
||
}
|
||
this.refreshInfo();
|
||
},
|
||
beforeDestroy() {
|
||
if (window.ReactNativeWebView) {
|
||
window.ReactNativeWebView.postMessage(JSON.stringify({
|
||
type: 'headerShown',
|
||
visible: true, // true 显示 false 隐藏
|
||
}));
|
||
}
|
||
},
|
||
created() {
|
||
this.getSettingFile();
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.detail {
|
||
height: 100%;
|
||
}
|
||
|
||
.detail .content {
|
||
border-top: 0.33px solid #e9e9e9;
|
||
color: #666;
|
||
height: calc(100% - 51px);
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.items {
|
||
padding: 12px;
|
||
position: relative;
|
||
}
|
||
|
||
.items span {
|
||
display: inline-block;
|
||
}
|
||
|
||
.icon i {
|
||
color: rgb(74, 144, 226);
|
||
}
|
||
|
||
.top {
|
||
font-size: 16px;
|
||
color: #666;
|
||
font-weight: bold;
|
||
line-height: 22px;
|
||
padding-bottom: 10px;
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.description {
|
||
max-height: 100px;
|
||
line-height: 16px;
|
||
color: #999;
|
||
width: 100%;
|
||
}
|
||
|
||
.title {
|
||
padding-bottom: 6px;
|
||
line-height: 16px;
|
||
padding: 12px;
|
||
position: relative;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: black;
|
||
}
|
||
|
||
.title i {
|
||
color: #666;
|
||
}
|
||
|
||
.list {
|
||
padding: 0 12px;
|
||
/*float: left;*/
|
||
width: calc(100% - 24px);
|
||
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.list span, .list label {
|
||
display: inline-block;
|
||
}
|
||
|
||
.list li {
|
||
float: left;
|
||
padding: 8px 0;
|
||
width: 100%;
|
||
position: relative;
|
||
/*display: flex;*/
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
.rate li, .file li {
|
||
background: rgb(249, 249, 249);
|
||
}
|
||
|
||
.list li .icon {
|
||
float: left;
|
||
padding-right: 10px;
|
||
}
|
||
|
||
|
||
.list li .left {
|
||
width: calc(100% - 125px);
|
||
float: left;
|
||
}
|
||
|
||
.list li .left .title, .list li .right .name {
|
||
font-size: 13px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
color: #333;
|
||
line-height: 18px;
|
||
padding: 0 0 2px;
|
||
border: 0;
|
||
width: 100%;
|
||
display: inline-block;
|
||
}
|
||
|
||
.list li .right .name {
|
||
font-size: 12px;
|
||
padding: 0;
|
||
}
|
||
|
||
.list li .left .description, .list li .right .time {
|
||
color: #999999;
|
||
line-height: 15px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.list li .left .description .line {
|
||
display: inline-block;
|
||
margin: 0 6px;
|
||
color: #E8E8E8;
|
||
}
|
||
|
||
.list li .right {
|
||
width: 73px;
|
||
text-align: right;
|
||
float: right;
|
||
}
|
||
|
||
.list .li-more {
|
||
padding: 0;
|
||
border: none;
|
||
height: 67px;
|
||
line-height: 67px;
|
||
width: 100%;
|
||
display: none;
|
||
}
|
||
|
||
.list .li-more .more {
|
||
color: #999;
|
||
line-height: 20px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
text-align: center;
|
||
width: 100%;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.list .center {
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
.list .center .left {
|
||
width: 66px;
|
||
text-align: center;
|
||
margin-right: 2px;
|
||
float: left;
|
||
}
|
||
|
||
.right .score {
|
||
color: #333;
|
||
text-align: center;
|
||
}
|
||
|
||
.right .score span {
|
||
font-weight: bold;
|
||
color: #000;
|
||
}
|
||
|
||
.right .score i {
|
||
font-size: 12px;
|
||
position: absolute;
|
||
right: 3px;
|
||
top: 11px;
|
||
}
|
||
|
||
.list .center .item {
|
||
/*float: left;*/
|
||
line-height: 10px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.list .center .item .start {
|
||
width: 44px;
|
||
margin-right: 10px;
|
||
float: left;
|
||
text-align: right;
|
||
}
|
||
|
||
.list .center .item .progress {
|
||
width: calc(100% - 80px);
|
||
float: left;
|
||
margin-right: 5px;
|
||
top: 2px;
|
||
}
|
||
|
||
.list .center .item .percentage {
|
||
width: 27px;
|
||
font-size: 10px;
|
||
float: left;
|
||
color: #999;
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
|
||
.list .bottom {
|
||
float: left;
|
||
line-height: 13px;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
font-size: 13px;
|
||
border-top: 0.333px solid #e9e9e9;
|
||
margin-top: 11px;
|
||
}
|
||
|
||
.evaluate li {
|
||
display: flex;
|
||
}
|
||
|
||
.evaluate li .left {
|
||
width: 100%;
|
||
}
|
||
|
||
.evaluate li .left .title {
|
||
width: auto;
|
||
padding: 0;
|
||
}
|
||
|
||
.evaluate li .date {
|
||
color: #999;
|
||
float: right;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.evaluate li .description {
|
||
float: left;
|
||
}
|
||
|
||
.items .description {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
border-top: 0.33px solid #e9e9e9;
|
||
padding-left: 12px;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #fff;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer .headImg {
|
||
width: 30px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.headImg img {
|
||
width: 30px;
|
||
}
|
||
|
||
.footer .field {
|
||
width: calc(100% - 30px);
|
||
}
|
||
|
||
.footer .van-button {
|
||
height: 28px;
|
||
line-height: 28px;
|
||
border-radius: 2px;
|
||
padding: 0 8px !important;
|
||
}
|
||
|
||
.dropdown-menu {
|
||
position: absolute;
|
||
right: 12px;
|
||
z-index: 10;
|
||
top: 41px;
|
||
background: #fff;
|
||
padding: 2px 12px;
|
||
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
|
||
border-radius: 0 0 2px 2px;
|
||
}
|
||
|
||
.dropdown-menu li {
|
||
color: #999;
|
||
padding: 8px 0;
|
||
line-height: 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dropdown-menu li .awsui-iconfont {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.rate_info i {
|
||
font-size: 12px;
|
||
margin-right: 3px;
|
||
}
|
||
|
||
.divide {
|
||
height: 10px;
|
||
width: 100%;
|
||
background: #f3f3f3;
|
||
margin: 10px 0px;
|
||
border-bottom: 0.333px solid #e9e9e9;
|
||
border-top: 0.333px solid #e9e9e9;
|
||
}
|
||
|
||
.card_content {
|
||
padding: 8px 6px 0px 12px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card_content .description {
|
||
line-height: 19px;
|
||
}
|
||
|
||
p {
|
||
margin: 0px !important;
|
||
margin-block-start: auto !important;
|
||
margin-block-end: auto !important;
|
||
}
|
||
|
||
.filelist li {
|
||
border: 0.333px solid #e9e9e9;
|
||
padding: 7px 5px;
|
||
width: calc(100% - 14px);
|
||
border-radius: 3px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.file_title {
|
||
font-size: 14px;
|
||
color: #378DEC;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.file_info {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.file_info i {
|
||
font-size: 12px;
|
||
color: #FFB800;
|
||
}
|
||
|
||
.file_info .download {
|
||
float: right;
|
||
}
|
||
|
||
.con {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 50%;
|
||
top: 65%;
|
||
transform: translate(-50%, -50%);
|
||
text-align: center;
|
||
}
|
||
|
||
.con .img {
|
||
width: 110px;
|
||
height: 110px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.con .text {
|
||
color: #999;
|
||
line-height: 33px;
|
||
font-size: 12px;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<style>
|
||
.my-swipe .van-swipe-item {
|
||
height: 134px;
|
||
}
|
||
|
||
.start .van-rate__item:not(:last-child) {
|
||
padding-right: 2px;
|
||
}
|
||
|
||
.list .center .right .item .start .van-rate__item:not(:last-child) {
|
||
padding-right: 4px;
|
||
}
|
||
|
||
.footer .field .van-field__control {
|
||
padding: 0 7px;
|
||
font-size: 12px;
|
||
position: relative;
|
||
padding-left: 22px;
|
||
}
|
||
|
||
.footer .field::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 22px;
|
||
transform: translateY(-50%);
|
||
font-family: "awsui-iconfont";
|
||
content: "\e636";
|
||
background: none;
|
||
font-size: 14px;
|
||
z-index: 10;
|
||
height: 24px;
|
||
color: #999;
|
||
}
|
||
|
||
.options_op {
|
||
width: 50%;
|
||
display: inline-block;
|
||
text-align: center;
|
||
}
|
||
|
||
.options_op .icon {
|
||
font-size: 16px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.options_op .label {
|
||
font-size: 12px;
|
||
|
||
}
|
||
|
||
.retroaction-submit {
|
||
width: calc(100% - 20px);
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.retroaction-panel textarea {
|
||
border: 1px solid #e9e9e9;
|
||
padding: 3px;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.titlespan{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: -34px;
|
||
margin-right: 36px;
|
||
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 17px;
|
||
color: #1A1A1A;
|
||
line-height: 20px;
|
||
font-style: normal;
|
||
|
||
}
|
||
</style>
|