<template>
|
<div class='clap_feedback'>
|
<div class="w_row clearfix">
|
<p class="w_col_24"><span class="custom-width">发起人：</span>{{detail.sponsorName}}</p>
|
<p class="w_col_24"><span class="custom-width">联系电话：</span>{{detail.sponsorPhone}}</p>
|
<p class="w_col_24"><span class="custom-width">发起时间：</span>{{detail.createAt}}</p>
|
<!-- <p class="w_col_24">心愿名称：{{detail.wishName}}</p> -->
|
<p class="w_col_24"><span class="custom-width">心愿详情：</span>{{detail.detail}}</p>
|
<section class="w_col_24 image" v-if="detail.photoPathList">
|
<div
|
class="img"
|
v-for="(i,j) in (detail.photoPathList || '').split(',').filter(k=>{return k!==''})"
|
:key="j+'-image'"
|
><img
|
:src="i"
|
alt=""
|
@click="onScaleImage(j)"
|
></div>
|
</section>
|
<p class="w_col_24"><span class="custom-width">完成心愿:</span>
|
<el-radio-group v-model="iswish">
|
<el-radio label="5">是</el-radio>
|
<el-radio label="">否</el-radio>
|
</el-radio-group>
|
</p>
|
</div>
|
|
<section>
|
<p class="label required"><span class="custom-width">反馈:</span></p>
|
<article>
|
<el-input
|
type="textarea"
|
class="kui-height"
|
placeholder="请输入反馈内容，不超过200字"
|
v-model="text"
|
cols="5"
|
rows="3"
|
maxlength="200"
|
show-word-limit
|
></el-input>
|
<span
|
class="col_primary"
|
@click="add"
|
v-if="!show"
|
>上传图片</span>
|
</article>
|
</section>
|
<section
|
class="image"
|
v-if="show"
|
>
|
<div
|
class="img"
|
v-for="(i,j) in images"
|
:key="j+'--image'"
|
>
|
<img
|
:src="i.pic"
|
alt=""
|
@click="onScaleUploadImage(j)"
|
>
|
<span
|
class="del el-icon-close"
|
@click="del(i)"
|
></span>
|
</div>
|
<div class="img" v-if="isShowuploadBtn">
|
<v-u
|
slots
|
@path="onImage"
|
><span
|
class="el-icon-plus"
|
style="font-size:24px"
|
></span></v-u>
|
</div>
|
</section>
|
|
<p class="w_col_24"><span class="custom-width">反馈记录：</span></p>
|
<div v-if="detail.feedbackVOList">
|
<div class="appointment-content" v-for="(list , index) in detail.feedbackVOList" :key="index">
|
<div class="appointment-lie">
|
<p class="title">
|
<span class="title-text">{{list.createTime}} {{list.name}}</span>
|
</p>
|
<div class="list-conetnt">
|
<p>{{list.content}}</p>
|
<p class="img-fk">
|
<span v-for="url in list.imgList">
|
<img @click="onScaleImage1(url,list.imgList)" :src="url" alt="">
|
</span>
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="no-fk" v-else>暂无反馈记录</div>
|
<div v-if ="num !== detailId.length" class="next" @click="nextDetails">点击下一条</div>
|
</div>
|
</template>
|
|
<script>
|
import vU from "com/upload/upload1";
|
export default {
|
props: {
|
item: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
door: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
},
|
components: { vU },
|
data() {
|
return {
|
detail: {},
|
text: "",
|
show: false,
|
images: [],
|
detailId:[], //下一条的ID集合
|
num:0,
|
iswish:'',
|
isShowuploadBtn:true,
|
};
|
},
|
watch: {
|
item: {
|
handler() {
|
this.setItem();
|
},
|
deep: true,
|
},
|
door: {
|
handler(n) {
|
if (n.r) {
|
this.sub(n.t);
|
}
|
if (!n.length) {
|
this.show = false;
|
}
|
if(n.length > 8) {
|
this.isShowuploadBtn = false;
|
}
|
},
|
deep: true,
|
},
|
images: {
|
handler(n) {
|
if (!n.length) {
|
this.show = false;
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
del(i) {
|
this.images = this.images.filter((k) => {
|
return k.pic !== i.pic && k.id !== i.id;
|
});
|
},
|
onImage(v) {
|
this.images.push({ pic: v, id: Date.now() });
|
},
|
add() {
|
this.show = true;
|
},
|
// 查看上传大图
|
onScaleUploadImage(j) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: this.images[j].pic,
|
tool: true,
|
});
|
},
|
// 查看大图
|
onScaleImage(j) {
|
let list = (this.detail.photoPathList || "").split(",");
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
pic: list[j],
|
list,
|
tool: true,
|
});
|
},
|
sub(type) {
|
/** 处理完所以下一条点确定，就隐藏 */
|
if(this.detailId.length < 0) {
|
this.onClose(type);
|
return void 0;
|
}
|
|
if (!this.text) {
|
demo.toast("请输入与反馈原因");
|
return 0;
|
}
|
|
if(this.images.length >9) {
|
demo.toast("上传图片不能超过9张");
|
return 0;
|
}
|
let o = {
|
id: this.detail.id,
|
type: "5",
|
feedbackPhotoPathList: this.images
|
.map((l) => {
|
return l.pic;
|
})
|
.join(","),
|
feedback: this.text,
|
status:this.iswish
|
};
|
|
this.$api.put("communityactivity/putmicrowish", o, () => {
|
demo.toast("反馈成功");
|
this.$store.dispatch("setPageReset", "/act_wish");
|
this.nextDetails();
|
this.text='';
|
this.images = []
|
// this.$nextTick(() => {
|
// this.$store.dispatch("setFixed", {
|
// event: "del",
|
// type: type,
|
// time: Date.now(),
|
// });
|
// this.$store.dispatch("setPageReset", "/act_wish");
|
// });
|
});
|
},
|
setItem() {
|
if (this.item.id) {
|
this.$api.get(
|
"communityactivity/detailmicrowish",
|
{ id: this.item.id },
|
(e) => {
|
this.detail = e;
|
this.detailId = e.idList; //查询下一条的所有Id
|
this.detail.feedbackVOList.map(item=>{
|
item.imgList =item.imgUrl?item.imgUrl.split(','):[]
|
})
|
this.removeByValue(this.detailId, this.item.id);
|
}
|
);
|
} else {
|
demo.toast("错误活动");
|
}
|
},
|
|
// 删除数组指定的元素
|
removeByValue(arr, val) {
|
for(var i = 0; i < arr.length; i++) {
|
if(arr[i] == val) {
|
arr.splice(i, 1);
|
break;
|
}
|
}
|
},
|
|
//下一条
|
nextDetails() {
|
if(this.num < this.detailId.length) {
|
this.num = this.num +1;
|
this.getDetail();
|
} else {
|
this.onClose();
|
}
|
},
|
|
onClose () {
|
let type = "wish-feedback"
|
this.$nextTick(() => {
|
this.$store.dispatch("setFixed", {
|
event: "del",
|
type: type,
|
time: Date.now(),
|
});
|
this.$store.dispatch("setPageReset", "/act_wish");
|
});
|
},
|
|
//获取详情
|
getDetail() {
|
this.text = '',
|
this.iswis=''
|
this.$api.get(
|
"communityactivity/detailmicrowish",
|
{ id: this.detailId[this.num-1 ] },
|
(e) => {
|
this.detail = e;
|
}
|
);
|
},
|
|
},
|
mounted() {
|
this.setItem();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.clap_feedback {
|
.next {
|
font-size: 14px;
|
color: #409EFF;
|
font-weight: 500;
|
text-align: right;
|
cursor: pointer;
|
position: absolute;
|
right: 20px;
|
bottom: 20px;
|
}
|
.no-fk {
|
font-size: 12px;
|
padding-left: 17px;
|
}
|
.appointment-content {
|
padding-top: 20px;
|
padding-left: 15px;
|
font-size: 14px;
|
color: #606266;
|
position: relative;
|
.appointment-lie {
|
padding-bottom: 25px;
|
.title-text::before {
|
position: absolute;
|
content: '';
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
left: -4px;
|
top: 17px;
|
background-color: #409EFF;
|
}
|
}
|
.img-fk {
|
display: flex;
|
flex-wrap: wrap;
|
span {
|
width: 50px;
|
height: 50px;
|
display:inline-block;
|
overflow: hidden;
|
margin-right: 10px;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
}
|
.col_primary {
|
cursor: pointer;
|
font-size:14px;
|
line-height: 30px;
|
}
|
.custom-width {
|
width: 76px;
|
display: inline-block;
|
text-align: right;
|
}
|
.kui-height {
|
width: 300px;
|
}
|
.required {
|
span {
|
width: 66px;
|
padding-right: 10px;
|
}
|
}
|
.required::after {
|
content: ' *';
|
color: #F56C6C;
|
font-size: 150%;
|
position: absolute;
|
left: 34px;
|
top: -3px;
|
}
|
p {
|
font-size: 14px;
|
line-height: 22px;
|
color: #222;
|
margin-bottom: 10px;
|
padding-left: 10px;
|
position: relative;
|
}
|
textarea.m_inp {
|
resize: none;
|
& + span {
|
vertical-align: bottom;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
}
|
section {
|
display: flex;
|
margin-bottom: 5px;
|
article {
|
width: calc(~"100% - 100px");
|
}
|
}
|
.image {
|
flex-wrap: wrap;
|
box-sizing: border-box;
|
padding: 0 15px;
|
.img {
|
display: block;
|
width: 78px;
|
height: 66px;
|
line-height: 66px;
|
text-align: center;
|
margin: 2px 12px 12px 0;
|
background-color: #eee;
|
border-radius: 5px;
|
position: relative;
|
color: #999;
|
overflow: hidden;
|
img {
|
display: block;
|
width: 100%;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
.del {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
color: #fff;
|
background-color: tomato;
|
border-radius: 50%;
|
cursor: pointer;
|
}
|
.add {
|
display: block;
|
height: 100%;
|
cursor: pointer;
|
line-height: 66px;
|
font-size: 25px;
|
color: #999;
|
}
|
}
|
}
|
}
|
</style>
|
