迁移广东基础党建
This commit is contained in:
aixianling
485
src/apps/party/AppPartyStudy/AppPartyStudy.vue
Normal file
485
src/apps/party/AppPartyStudy/AppPartyStudy.vue
Normal file
@@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div v-if="isShow" style="height: 100%">
|
||||
<div class="fixed-top">
|
||||
<!-- 头部搜索样式 -->
|
||||
<div class="search-box">
|
||||
<div class="search-input flex-row" @click="changeSearchBox">
|
||||
<image src="https://cdn.cunwuyun.cn/img/search-red.svg"></image>
|
||||
<span>{{ inputValue }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择时间和类型 -->
|
||||
<div class="slect flex-row">
|
||||
<!-- 类型选择 -->
|
||||
<div class="uni-list type-select">
|
||||
<div class="uni-list-cell">
|
||||
<div class="uni-list-cell-db">
|
||||
<picker
|
||||
@change="bindPickerChange"
|
||||
:range="array"
|
||||
range-key="dictName"
|
||||
>
|
||||
<div class="uni-input" v-if="partyStudyType === ''">
|
||||
学习类别
|
||||
</div>
|
||||
<div class="uni-input" v-else>
|
||||
{{ array[partyStudyType + 1].dictName }}
|
||||
</div>
|
||||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间选择 -->
|
||||
<div class="uni-list type-select">
|
||||
<div class="uni-list-cell">
|
||||
<div class="uni-list-cell-db">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="date"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@change="bindDateChange"
|
||||
fields="month"
|
||||
>
|
||||
<div class="uni-input">{{ day }}</div>
|
||||
<image src="https://cdn.cunwuyun.cn/img/down.svg"></image>
|
||||
</picker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-list">
|
||||
<div
|
||||
class="session-item"
|
||||
v-for="(item, index) in meetList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="item-top" @click="toDetail(item.id)">
|
||||
<div class="item-title mar-b12">{{ item.title }}</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">学习类别：</span>
|
||||
<span class="info-value">{{
|
||||
$dict.getLabel("partyStudyType", item.type)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">发布时间：</span>
|
||||
<span class="info-value">{{ item.publishTime }}</span>
|
||||
</div>
|
||||
<div class="item-info mar-b12">
|
||||
<span class="info-label">发布人员：</span>
|
||||
<span class="info-value">{{ item.publishUserName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-status" :class="'item-status' + item.studyStatus">
|
||||
{{ $dict.getLabel("partyStudyStatus", item.studyStatus) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-if="meetList.length == 0"/>
|
||||
</div>
|
||||
<div v-if="!isShow" class="search-input">
|
||||
<div class="input-box flex-row">
|
||||
<input
|
||||
type="span"
|
||||
class="input"
|
||||
placeholder="请输入学习标题"
|
||||
focus="false"
|
||||
v-model="searchValue"
|
||||
@blur="onBlur"
|
||||
/>
|
||||
<image
|
||||
class="sousuo"
|
||||
src="https://cdn.cunwuyun.cn/img/search-active.svg"
|
||||
></image>
|
||||
<image
|
||||
v-if="searchValue"
|
||||
@tap="clearInput"
|
||||
class="clear"
|
||||
src="https://cdn.cunwuyun.cn/img/empty-Input.svg"
|
||||
></image>
|
||||
<div class="search-word" @click="search">搜索</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
appName: "党员学习",
|
||||
data() {
|
||||
const currentDate = this.getDate({
|
||||
format: true,
|
||||
});
|
||||
return {
|
||||
inputValue: "请输入学习标题",
|
||||
isShow: true,
|
||||
array: [],
|
||||
meetType: "",
|
||||
partyStudyType: "",
|
||||
index: 0,
|
||||
date: currentDate,
|
||||
day: "时间",
|
||||
createDate: "", //创建时间
|
||||
meetList: [],
|
||||
searchValue: "", //搜索框输入值
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pages: 2,
|
||||
userId: "",
|
||||
partyId: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
startDate() {
|
||||
return this.getDate("start");
|
||||
},
|
||||
endDate() {
|
||||
return this.getDate("end");
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.partyId = options.partyId;
|
||||
this.$dict.load("partyStudyStatus", "partyStudyType").then((res) => {
|
||||
this.array = this.$dict.getDict("partyStudyType");
|
||||
this.array.unshift({dictName: "全部类型", dictValue: ""})
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
onShow() {
|
||||
this.$dict.load("partyStudyStatus", "partyStudyType");
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
bindPickerChange(e) {
|
||||
if (e.detail.value - 1 >= 0) {
|
||||
this.partyStudyType = e.detail.value - 1;
|
||||
} else {
|
||||
this.partyStudyType = "";
|
||||
}
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
bindDateChange: function (e) {
|
||||
this.day = e.target.value;
|
||||
this.createDate = e.target.value;
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.pageSize = 10;
|
||||
this.getList();
|
||||
},
|
||||
getDate(type) {
|
||||
const date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
|
||||
if (type === "start") {
|
||||
year = year - 60;
|
||||
} else if (type === "end") {
|
||||
year = year + 2;
|
||||
}
|
||||
month = month > 9 ? month : "0" + month;
|
||||
day = day > 9 ? day : "0" + day;
|
||||
|
||||
return `${year}-${month}-08 00:00:00 `;
|
||||
},
|
||||
changeSearchBox() {
|
||||
this.isShow = false;
|
||||
},
|
||||
onBlur(e) {
|
||||
this.searchValue = e.target.value;
|
||||
if (this.searchValue) {
|
||||
this.inputValue = this.searchValue;
|
||||
} else {
|
||||
this.inputValue = "请输入学习标题";
|
||||
}
|
||||
},
|
||||
search() {
|
||||
this.isShow = true;
|
||||
this.pageNum = 1;
|
||||
this.pageSize = 10;
|
||||
this.pages = 2;
|
||||
this.getList();
|
||||
},
|
||||
clearInput() {
|
||||
this.searchValue = "";
|
||||
this.inputValue = "请输入学习标题";
|
||||
},
|
||||
getList() {
|
||||
if (this.pageNum > this.pages) return;
|
||||
|
||||
this.$http.post(`/app/apppartystudy/listWechat`, {
|
||||
title: this.searchValue,
|
||||
type: this.partyStudyType,
|
||||
searchMonth: this.createDate,
|
||||
current: this.pageNum,
|
||||
size: this.pageSize,
|
||||
}).then((res) => {
|
||||
if (res.code == 0) {
|
||||
const meetList = this.pageNum > 1 ? [...this.meetList, ...res.data.records] : res.data.records;
|
||||
this.pages = Math.ceil(res.data.total / 10);
|
||||
this.meetList = meetList;
|
||||
}
|
||||
});
|
||||
},
|
||||
toDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: "./partyStudyDetail?id=" + id,
|
||||
});
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
@import "../../../common/common.css";
|
||||
|
||||
.page {
|
||||
.search-box {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-color: #e60012;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.search-input {
|
||||
line-height: 64px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #ce0010;
|
||||
border-radius: 32px;
|
||||
color: #f0cbcd;
|
||||
font-size: 26px;
|
||||
|
||||
image {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin: 8px 8px 8px 24px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
span-overflow: ellipsis;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slect {
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background-color: #fff;
|
||||
color: #666;
|
||||
|
||||
.type-select {
|
||||
width: 50%;
|
||||
border-right: 1px solid #f7f7f7;
|
||||
margin: 30px 0;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
|
||||
.uni-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.type-select:nth-child(2) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
.input-box {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-color: #fff;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.sousuo {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 60px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: #f3f3f3;
|
||||
width: 598px;
|
||||
height: 64px;
|
||||
color: #999999;
|
||||
font-size: 26px;
|
||||
margin-left: 8px;
|
||||
border-radius: 32px;
|
||||
padding-left: 70px;
|
||||
padding-right: 60px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clear {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 130px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-word {
|
||||
font-size: 28px;
|
||||
color: #135ab8;
|
||||
line-height: 60px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.session-list {
|
||||
padding-top: 224px;
|
||||
|
||||
.session-item {
|
||||
width: 686px;
|
||||
margin: 0 auto 32px auto;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.item-top {
|
||||
padding: 32px 32px 0 32px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
word-break: break-all;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
line-height: 42px;
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.info-label {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
border-top: 2px solid #eee;
|
||||
text-align: right;
|
||||
padding-right: 64px;
|
||||
box-sizing: border-box;
|
||||
line-height: 96px;
|
||||
|
||||
.item-btn {
|
||||
display: inline-block;
|
||||
width: 152px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
border-radius: 28px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-left: 32px;
|
||||
border: 2px solid #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #343d65;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.item-status {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: -30px;
|
||||
width: 140px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
font-size: 24px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.item-status1 {
|
||||
color: #5a98f2;
|
||||
background-color: #f1f6ff;
|
||||
}
|
||||
|
||||
.item-status0 {
|
||||
color: #ff9b2b;
|
||||
background-color: #fff3e8;
|
||||
}
|
||||
|
||||
.color-1365DD {
|
||||
color: #1365dd;
|
||||
}
|
||||
|
||||
.color-FF4466 {
|
||||
color: #ff4466;
|
||||
}
|
||||
|
||||
.color-333333 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.color-606060 {
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.border-1365DD {
|
||||
border-color: #1365dd !important;
|
||||
color: #1365dd !important;
|
||||
}
|
||||
|
||||
.border-E1E1E1 {
|
||||
border-color: #e1e1e1 !important;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
.border-E1E1E1 {
|
||||
border-color: #e1e1e1 !important;
|
||||
}
|
||||
|
||||
.mar-b12 {
|
||||
margin-bottom: 26px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-affairs {
|
||||
width: 100%;
|
||||
height: calc(100% - 210px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
220
src/apps/party/AppPartyStudy/partyStudyContent.vue
Normal file
220
src/apps/party/AppPartyStudy/partyStudyContent.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<header></header>
|
||||
<div class="form">
|
||||
<div class="main">
|
||||
<div class="textarea">
|
||||
<div class="color-333 fs32">
|
||||
<span class="color-red">*</span>学习心得
|
||||
</div>
|
||||
<textarea
|
||||
type="textarea"
|
||||
placeholder="请输入学习心得（200字以内）"
|
||||
v-model="content"
|
||||
adjust-position="false"
|
||||
maxlength="200"
|
||||
class="fs32"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tips-span">说明 : 提交学习心得，意味着完成本次内容的学习。</p>
|
||||
<div class="report" @click="changeStatus()">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "fillLog",
|
||||
data() {
|
||||
return {
|
||||
id: "",
|
||||
content: "",
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id;
|
||||
this.getDetailInfo();
|
||||
},
|
||||
methods: {
|
||||
getDetailInfo() {
|
||||
this.$http
|
||||
.post(`/app/apppartystudylog/queryStudyLog?id=${this.id}`, null, {})
|
||||
.then((res) => {
|
||||
if (res.data) {
|
||||
if (res.data.content != null) {
|
||||
this.content = res.data.content;
|
||||
} else {
|
||||
this.content = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
changeStatus() {
|
||||
if (!this.content) {
|
||||
this.$toast("请输入学习心得");
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
studyId: this.id,
|
||||
content: this.content,
|
||||
};
|
||||
this.$http
|
||||
.post(`/app/apppartystudylog/addStudyLog`, params)
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$toast("学习心得提交完成");
|
||||
setTimeout(function () {
|
||||
uni.navigateBack({
|
||||
delta: 2,
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../common/common.css";
|
||||
|
||||
.page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tips-span {
|
||||
width: 626px;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: rgba(153, 153, 153, 1);
|
||||
line-height: 40px;
|
||||
margin-top: 20px;
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 688px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
background-color: #e60012;
|
||||
}
|
||||
|
||||
.form {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
margin-top: -100px;
|
||||
|
||||
.main {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.basic-item {
|
||||
font-size: 32px;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
padding: 32px 32px 32px 12px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
input {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wid-110 {
|
||||
width: 214px;
|
||||
}
|
||||
|
||||
.skill-span {
|
||||
max-width: 432px;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
span-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #999999;
|
||||
font-size: 32px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.picker > .AiArea {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wei-span {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.msg-value {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.msg-btn {
|
||||
width: 160px;
|
||||
text-align: right;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 28px;
|
||||
background-color: #fff;
|
||||
line-height: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button-hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
background-color: #fff !important;
|
||||
font-size: 28px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.report {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
background: rgba(230, 0, 18, 1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fs32 {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
350
src/apps/party/AppPartyStudy/partyStudyDetail.vue
Normal file
350
src/apps/party/AppPartyStudy/partyStudyDetail.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="detail-content">
|
||||
<div class="detail-info">
|
||||
<div class="info-title">{{ data.title }}</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">学习类别：</span>
|
||||
<span class="info-value">{{ $dict.getLabel('partyStudyType', data.type) }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">发布人员：</span>
|
||||
<span class="info-value">{{ data.publishUserName }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">发布时间：</span>
|
||||
<span class="info-value">{{ data.publishTime }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">学习时间：</span>
|
||||
<span class="info-value">{{ data.studyBeginDate }}至{{ data.studyEndDate }}</span>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span class="info-label">学习状态：</span>
|
||||
<span class="info-value">{{ $dict.getLabel('partyStudyStatus', data.studyStatus) }}</span>
|
||||
</div>
|
||||
<div class="item-info" v-if="data.studyStatus == 1">
|
||||
<span class="info-label">完成时间：</span>
|
||||
<span class="info-value">{{ data.finishDate || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="page-title">学习内容</div> -->
|
||||
<u-parse :html="data.content" class="content" v-if="data.content"></u-parse>
|
||||
<AiTransSpeech :src="data.speech"/>
|
||||
</div>
|
||||
<div class="btn-box" @click="toContent()">
|
||||
<span class="active">学习心得</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
data: {},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.$dict.load('partyStudyStatus', 'partyStudyType')
|
||||
this.id = options.id
|
||||
this.getDetailInfo()
|
||||
},
|
||||
onShow() {
|
||||
this.getDetailInfo()
|
||||
},
|
||||
methods: {
|
||||
toContent() {
|
||||
uni.navigateTo({url: `./AppPartyStudy?id=${this.id}`})
|
||||
},
|
||||
getDetailInfo() {
|
||||
this.$http.post(`/app/apppartystudy/queryDetailByIdWeChat?id=${this.id}`, null, {}).then(res => {
|
||||
if (res.data) {
|
||||
if (res.data.files && res.data.files.length) {
|
||||
res.data.files.map(item => {
|
||||
var size = item.size / 1024;
|
||||
item.fileSize = size.toFixed(0);
|
||||
return item
|
||||
})
|
||||
}
|
||||
this.data = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scope>
|
||||
@import "../../../common/common.css";
|
||||
|
||||
.page {
|
||||
background-color: #fff;
|
||||
|
||||
.detail-content {
|
||||
padding-bottom: 140px;
|
||||
}
|
||||
.content{
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.detail-info {
|
||||
padding: 16px 32px 8px 32px;
|
||||
border-bottom: 2px solid #D8DDE6;
|
||||
background-color: #E60012;
|
||||
padding-bottom: 80px;
|
||||
position: relative;
|
||||
|
||||
.info-title {
|
||||
line-height: 64px;
|
||||
font-size: 40px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
word-break: break-all;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
line-height: 48px;
|
||||
font-size: 30px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.info-label {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
display: inline-block;
|
||||
width: 510px;
|
||||
word-break: break-all;
|
||||
color: #FFE8E8;
|
||||
}
|
||||
|
||||
.item-status0 {
|
||||
color: #FF9B2B;
|
||||
}
|
||||
|
||||
.item-status1 {
|
||||
color: #2EA222;
|
||||
}
|
||||
|
||||
.item-status2 {
|
||||
color: #343D65;
|
||||
}
|
||||
|
||||
.item-status3 {
|
||||
color: #5A98F2;
|
||||
}
|
||||
|
||||
.item-status4 {
|
||||
color: #f46;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.retract-btn {
|
||||
line-height: 80px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 690px;
|
||||
|
||||
.down-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 4px;
|
||||
vertical-align: middle;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
.icon-active {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
line-height: 96px;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
padding: 16px 32px;
|
||||
background-color: #fff;
|
||||
line-height: 48px;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
background-color: #fff;
|
||||
|
||||
.user-item {
|
||||
height: 112px;
|
||||
padding-top: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-bg {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #4E8EEE;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
margin: 0 16px 0 32px;
|
||||
font-size: 28px;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: inline-block;
|
||||
width: 622px;
|
||||
height: 96px;
|
||||
border-bottom: 2px solid #D8DDE6;
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-name {
|
||||
line-height: 44px;
|
||||
color: #333;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.user-unit {
|
||||
line-height: 34px;
|
||||
color: #999;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-item:nth-last-of-type(1) {
|
||||
.user-info {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mar-b8 {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.color-1365DD {
|
||||
color: #1365DD;
|
||||
}
|
||||
|
||||
.color-999999 {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.pad-l7 {
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
margin-top: 16px;
|
||||
|
||||
.attachment-title {
|
||||
font-size: 32px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
|
||||
image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment-item {
|
||||
border: 1px solid rgba(204, 204, 204, 1);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 34px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-radius: 8px;
|
||||
|
||||
.file-name {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #333333;
|
||||
font-size: 32px;
|
||||
word-break: break-all;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.size {
|
||||
color: #999;
|
||||
font-size: 28px;
|
||||
display: flex;
|
||||
justify-content: cemter;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
width: 100%;
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
font-size: 36px;
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #E60012;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.partyStudyContent {
|
||||
width: 100%;
|
||||
height: calc(100% - 184rpx);
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
color: #666;
|
||||
font-size: 32px;
|
||||
background-color: #fff;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user