<template>
|
<div class='wish_detail'>
|
<v-header
|
title="心愿详情"
|
bold
|
:tag="+detail.status===4?'已驳回':''"
|
></v-header>
|
<v-tool-scroll
|
ids="wish-detail-scroll"
|
class="content"
|
>
|
<div class="fm w_row clearfix">
|
<div class="list-conetnt">
|
<p><span>发起人:</span>{{detail.sponsorName}}</p>
|
<p><span>联系电话：</span>{{detail.sponsorPhone}}</p>
|
<p><span>发起时间：</span>{{detail.createAt}}</p>
|
</div>
|
<!-- <p class="w_col_8">序号：{{detail.id}}</p>
|
<p class="w_col_8">集星数：{{detail.starNum}}</p>
|
<p class="w_col_8"></p>
|
<p class="w_col_8">发起人：{{detail.sponsorName}}</p>
|
<p class="w_col_8">发起时间：{{detail.createAt}}</p>
|
<p class="w_col_8"></p>
|
<p class="w_col_8">联系电话：{{detail.sponsorPhone}}</p>
|
<p class="w_col_8">状态：{{is_level(detail.status)}}</p>
|
<p class="w_col_8"></p>
|
<p class="w_col_24">心愿名称：{{detail.wishName}}</p>-->
|
<p class="w_col_24"><span class="custom-span">心愿详情：</span>{{detail.detail}}
|
<section class="w_col_24 image" v-if="detail.photoPathList"><img
|
:src="i"
|
alt=""
|
v-for="(i,j) in (detail.photoPathList || '').split(',').filter(k=>{return k!==''})"
|
:key="j+'-image'"
|
@click="onScaleImage(j,'photoPathList')"
|
></section>
|
</p>
|
<p class="w_col_24" v-if="detail.status !== 1 || detail.status !== 4"><span class="custom-span">集心数：</span>{{detail.starNum}}
|
</p>
|
|
<div class="w_col_24"><span class="custom-span float-l">心愿进度：</span>
|
<div class="appointment-content float-l">
|
<div class="appointment-lie">
|
<div class="top-status title">
|
<span class="title-text f-color" v-if="detail.status == 7">用户集心中...</span>
|
<span class="title-text f-color" v-if="detail.status == 2">等待社区分配...</span>
|
<span class="title-text f-color" v-if="detail.status == 3">等待实现...</span>
|
<span class="title-text f-color" v-if="detail.status == 1">等待社区审核…</span>
|
<span class="title-text f-color" v-if="detail.status == 5&&!detail.evaluateAt">
|
<span> {{surplusDay}}天{{surplusHours}}小时{{surplusMinute}}小时{{surplusSecond}}秒后自动确认</span>
|
<!-- <span v-else>已自动确认</span> -->
|
</span>
|
<!-- <span class="title-text f-color" v-if="detail.evaluateAt && detail.status == 6">用户已确认</span> -->
|
</div>
|
<div class="top-status-startNum" v-if="detail.status == 7">
|
<span>目标：{{detail.aimNum}}</span><span>当前：{{detail.starNum}}</span>
|
<span v-if="detail.aimNum !== 0">进度：{{Math.round(detail.starNum/detail.aimNum)}}%</span>
|
<span v-else>0%</span>
|
</div>
|
|
<div class="details-lie" v-for="(item,index) in detail.operationRecordVOList" :key="index">
|
<div class="title">
|
<span class="title-text" v-if="detail.status == 3">
|
<span v-if="item.type == 5 ">心愿由{{detail.responsibleName}}负责</span>
|
</span>
|
<span class="title-text" v-if="detail.status == 6 ">
|
<span v-if="item.type == 5 ">心愿由{{detail.responsibleName}}负责</span>
|
</span>
|
<span class="title-text" v-if="detail.status == 5 ">
|
<span v-if="item.type == 5 ">心愿由{{detail.responsibleName}}负责</span>
|
</span>
|
<span class="title-text" v-if="item.type !== 5 ">{{item.remark}}</span>
|
</div>
|
<div class="list-conetnt-wish">
|
<div class="content" v-if="detail.status == 4 && item.type === 3" >{{item.content}}</div>
|
<!-- 已完成 反馈 -->
|
<div class="kui-conetnt" v-if="detail.status == 6">
|
<div class="details" v-if="detail.status == 6 && item.type == 6 || item.type == 7">{{item.content}}</div>
|
<div v-if="detail.evaluateAt&& item.type == 6" class="two-lie">
|
<div>
|
<el-rate
|
v-model="detail.score"
|
disabled
|
show-score
|
text-color="#ff9900"
|
>
|
</el-rate>
|
</div>
|
</div>
|
<div class="img-fk">
|
<span v-for="(url,index) in item.imgList" :key="index">
|
<img @click="onScaleImage1(url,text.imgList)" :src="url" alt="">
|
</span>
|
</div>
|
</div>
|
<!-- 进行中 反馈 -->
|
<div class="kui-conetnt" v-if="detail.status == 3">
|
<div class="details" v-if="item.type == 7">{{item.content}}</div>
|
<div class="img-fk">
|
<span v-for="(url,index) in item.imgList" :key="index">
|
<img @click="onScaleImage1(url,text.imgList)" :src="url" alt="">
|
</span>
|
</div>
|
</div>
|
<!--待确认 反馈 -->
|
<div class="kui-conetnt" v-if="detail.status == 5">
|
<div class="details" v-if="item.type == 7">{{item.content}}</div>
|
<div class="img-fk">
|
<span v-for="(url,index) in item.imgList" :key="index">
|
<img @click="onScaleImage1(url,text.imgList)" :src="url" alt="">
|
</span>
|
</div>
|
</div>
|
<div class="time-text">
|
<span v-if="item.type == 1">提交时间：</span>
|
<span v-if="item.type == 2">审核时间：</span>
|
<span v-if="item.type == 3">驳回时间：</span>
|
<span v-if="item.type == 4 || item.type == 6">完成时间：</span>
|
<span v-if="item.type == 5">分配时间：</span>
|
<span v-if="item.type == 7">反馈时间：</span>
|
<span v-if="item.type == 8">确认时间：</span>
|
<span>{{item.createTime}}</span>
|
<span >{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</v-tool-scroll>
|
<div class="foot">
|
<el-button type="primary" @click="$router.go(-1)">返 回</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
value: 0,
|
id: "",
|
detail: {},
|
score: "",
|
endDate: "2019-09-10 08:20:00",
|
day: "",
|
hours: "",
|
timer: null,
|
surplusDay: 0,
|
surplusHours: 0,
|
surplusMinute: 0,
|
surplusSecond: 0,
|
};
|
},
|
destroyed() {
|
if (this.timer) clearInterval(this.timer);
|
},
|
watch: {},
|
computed: {},
|
|
methods: {
|
is_time(v) {
|
return demo.timeout(new Date(v).getTime(), "alls", "-");
|
},
|
// 形式
|
is_form(id) {
|
// 1分配人员 2发起活动
|
return ["", "分配人员", "发起活动"][id] || "";
|
},
|
// 状态
|
is_level(id) {
|
// 1待审核 2待分配 3进行中 4已驳回 5待确认6 已完成
|
let status = [
|
"待审核",
|
"待分配 ",
|
"进行中",
|
"已驳回",
|
"待确认",
|
"已完成",
|
].map((k, v) => {
|
return {
|
value: v + 1,
|
label: k,
|
};
|
});
|
if (id < 0) {
|
return status;
|
}
|
let vs = status.filter((k) => {
|
return k.value === id;
|
});
|
return vs.length ? vs[0].label : id;
|
},
|
onScaleImage(j, v) {
|
let list = (this.detail[v] || "").split(",").filter((k) => {
|
return k !== "";
|
});
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: list[j],
|
list,
|
tool: true,
|
});
|
},
|
onScaleImage1(j, v) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: j,
|
v,
|
tool: true,
|
});
|
},
|
comfirmTimerHandle() {
|
const finishTimeStamp = new Date(this.detail.finishAt).getTime(); // 完成时间的时间戳
|
const threeDataAfterTimeStamp = 1000 * 60 * 60 * 24 * 3 + finishTimeStamp; // 3天后的时间戳
|
this.timer = setInterval(() => {
|
const nowTimeStamp = new Date().getTime(); // 现在的时间戳
|
const countDownTimeStamp = threeDataAfterTimeStamp - nowTimeStamp; // 倒计时的时间戳
|
if (countDownTimeStamp < 0) return clearInterval(this.timer);
|
this.surplusDay = Math.floor(countDownTimeStamp / 1000 / 60 / 60 / 24);
|
this.surplusHours = Math.floor(
|
(countDownTimeStamp / 1000 / 60 / 60) % 24
|
);
|
this.surplusMinute = Math.floor((countDownTimeStamp / 1000 / 60) % 60);
|
this.surplusSecond = Math.floor((countDownTimeStamp / 1000) % 60);
|
if (
|
!this.surplusDay &&
|
!this.surplusHours &&
|
!this.surplusMinute &&
|
!this.surplusSecond
|
) {
|
clearInterval(this.timer);
|
}
|
}, 1000);
|
},
|
init() {
|
if (!this.id) {
|
demo.toast("无效心愿");
|
return 0;
|
}
|
this.$api.get(
|
"communityactivity/detailmicrowish",
|
{ id: this.id },
|
(e) => {
|
this.detail = e;
|
if (e.status === 5 && !e.evaluateAt) {
|
this.comfirmTimerHandle();
|
}
|
this.score = e.score;
|
this.detail.operationRecordVOList.map((item) => {
|
item.imgList = item.imgUrl ? item.imgUrl.split(",") : [];
|
});
|
}
|
);
|
},
|
},
|
mounted() {
|
this.id = this.$route.params.id;
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.wish_detail {
|
.content {
|
height: calc(~"100% - 120px");
|
}
|
.list-conetnt {
|
padding-top: 10px;
|
p {
|
width: 500px;
|
line-height: 25px;
|
padding-bottom: 10px;
|
span {
|
display: inline-block;
|
padding-right: 5px;
|
color: #333;
|
width: 72px;
|
text-align: right;
|
}
|
}
|
}
|
.appointment-content {
|
padding-left: 15px;
|
font-size: 14px;
|
color: #333;
|
position: relative;
|
.details-lie {
|
margin-bottom: 15px;
|
}
|
.appointment-lie {
|
padding-bottom: 25px;
|
.two-lie {
|
padding-top: 20px;
|
}
|
.f-color {
|
color: #f56c6c;
|
}
|
.top-status {
|
line-height: 25px;
|
margin-bottom: 10px;
|
}
|
.top-status-startNum {
|
margin-bottom: 20px;
|
}
|
.title-text {
|
position: relative;
|
}
|
.title-text::before {
|
position: absolute;
|
content: "";
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
left: -14px;
|
top: 4px;
|
background-color: #409eff;
|
}
|
}
|
.list-conetnt-wish {
|
.content {
|
font-size: 14px;
|
color: #333;
|
line-height: 20px;
|
padding-top: 10px;
|
}
|
.time-text {
|
padding-top: 10px;
|
font-size: 14px;
|
color: #606266;
|
span {
|
padding-right: 5px;
|
}
|
}
|
}
|
.kui-conetnt {
|
.details {
|
line-height: 20px;
|
}
|
.img-fk {
|
display: flex;
|
flex-wrap: wrap;
|
span {
|
width: 50px;
|
height: 50px;
|
display: inline-block;
|
overflow: hidden;
|
margin-right: 10px;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
.no-fk {
|
line-height: 25px;
|
color: #888;
|
}
|
}
|
.float-l {
|
float: left;
|
}
|
.custom-span {
|
display: inline-block;
|
padding-right: 5px;
|
color: #333;
|
width: 72px;
|
text-align: right;
|
font-size: 14px;
|
}
|
.foot {
|
margin-top: 5px;
|
}
|
.el-rate {
|
display: inline-block;
|
}
|
.fm {
|
p {
|
font-size: 14px;
|
line-height: 22px;
|
color: #000;
|
padding: 8px 0;
|
min-height: 38px;
|
}
|
section {
|
padding: 8px 0;
|
display: flex;
|
flex-wrap: wrap;
|
img {
|
width: 175px;
|
object-fit: cover;
|
margin: 5px;
|
background-color: #eee;
|
display: block;
|
border-radius: 3px;
|
}
|
}
|
.image {
|
height: 97px;
|
overflow: hidden;
|
}
|
}
|
}
|
</style>
|
