|
|
@ -2,52 +2,34 @@ |
|
|
<div class='container'> |
|
|
<div class='container'> |
|
|
<div class="card flex flex-y "> |
|
|
<div class="card flex flex-y "> |
|
|
<div class="m-bottom5">{{ ProblemDescription.eventContent }}</div> |
|
|
<div class="m-bottom5">{{ ProblemDescription.eventContent }}</div> |
|
|
<div class="font-size13 gray">{{ProblemDescription.happenTime}}</div> |
|
|
<div class="font-size13 gray">{{ ProblemDescription.happenTime }}</div> |
|
|
<div class="image-grid" v-for="item in ProblemDescription.imageList" :key="values"> |
|
|
<div class="image-grid" v-for="item in ProblemDescription.imageList" > |
|
|
<div class="grid-item "> |
|
|
<div class="grid-item "> |
|
|
<img :src="item" style="width: 105px; height: 75px;"> |
|
|
<img :src="item" style="width: 105px; height: 75px;"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-y flex-center1 flex-center2 gray back_color m-top15"> |
|
|
<div class="flex flex-y flex-center1 flex-center2 gray back_color m-top15"> |
|
|
<div class="flex flex-x m-top16 flex-center1 flex-center2"> |
|
|
<div class="flex m-top16 flex-center1 flex-center2 vote white"> |
|
|
<div class="rectangle-container flex flex-x" > |
|
|
<div :style="{ width:support1Width}"> |
|
|
<div class="flex flex-x" > <div class=" header_img_left"> </div> |
|
|
<span class="van-ellipsis" style="width: 100px;">支持 {{ ProblemDescription.supportNum }}</span> |
|
|
<div class="image-with-text "> |
|
|
<img src="@/assets/images/discusion/VS.png" alt=""> |
|
|
<img class="support_img1" :style="{ width: support1Width }" |
|
|
</div> |
|
|
src="@/assets/images/discusion/c-l.png" /> |
|
|
<div :style="{ width:oppose1Width}"class="text-right van-ellipsis"> |
|
|
<div class="text-overlay">支持 {{ vote.supportNum }}</div> |
|
|
反对 {{ ProblemDescription.opposeNum }} |
|
|
</div> |
|
|
|
|
|
<div class="header_img_right"> |
|
|
|
|
|
</div></div> |
|
|
|
|
|
<div class="image-with-text z "> |
|
|
|
|
|
<img src="@/assets/images/discusion/VS.png" class="img_33 m-left012 " alt="Your Image" /> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="flex flex-x"> <div class="footer_img_left z_img m-left012"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="image-with-text "> |
|
|
|
|
|
<img class="support_img2" :style="{ width: oppose1Width }" |
|
|
|
|
|
src="@/assets/images/discusion/z-y.png" /> |
|
|
|
|
|
<div class="text-overlay1"> {{ vote.opposeNum }} 反对</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="z_img"> |
|
|
|
|
|
|
|
|
|
|
|
</div></div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="gray font-size13 p-12">{{ vote.total }}人参与</div> |
|
|
<div class="gray font-size13 p-12">{{dataValue}}人参与</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bot_btn flex flex-x flex-mean m-bot50 back_color back_color"> |
|
|
<div class="bot_btn flex flex-x flex-mean m-bot50 back_color back_color"> |
|
|
<van-button :disabled="disableAllButtons" round :class="supportNum ? 'support' : ''" :icon="require('@/assets/images/icons/support.png')" |
|
|
<van-button :disabled="disableAllButtons" round :class="supportNum ? 'support' : ''" |
|
|
type="info" @click="handelClicsupport"> |
|
|
:icon="require('@/assets/images/icons/support.png')" type="info" @click="handelClicsupport"> |
|
|
支持 |
|
|
支持 |
|
|
</van-button> |
|
|
</van-button> |
|
|
|
|
|
|
|
|
<van-button :disabled="disableAllButtons" round class="support" :icon="require('@/assets/images/icons/oppose.png')" |
|
|
<van-button :disabled="disableAllButtons" round class="support" |
|
|
type="info" @click="handelClicopposeNum"> |
|
|
:icon="require('@/assets/images/icons/oppose.png')" type="info" @click="handelClicopposeNum"> |
|
|
反对 |
|
|
反对 |
|
|
</van-button> |
|
|
</van-button> |
|
|
</div> |
|
|
</div> |
|
|
@ -55,15 +37,14 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import { andelClicDetail, icEventOldDiscuss, advertisingTag, communityPublicity,handelClicsupport } from '@/api/home'; |
|
|
import { andelClicDetail, icEventOldDiscuss, advertisingTag, communityPublicity, handelClicsupport } from '@/api/home'; |
|
|
import { values } from 'regenerator-runtime'; |
|
|
|
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
substance: '最近重庆南路60号院改造，很多居民反应希望 政府给楼外加保护层，冬天温度太低。', |
|
|
substance: '最近重庆南路60号院改造，很多居民反应希望 政府给楼外加保护层，冬天温度太低。', |
|
|
datetime: '2002-01-05 12:00:00', |
|
|
datetime: '2002-01-05 12:00:00', |
|
|
signUp: [ |
|
|
signUp: [ |
|
|
{ }, |
|
|
{}, |
|
|
|
|
|
|
|
|
], |
|
|
], |
|
|
|
|
|
|
|
|
@ -73,98 +54,85 @@ export default { |
|
|
dataValue: 100, |
|
|
dataValue: 100, |
|
|
support: false, |
|
|
support: false, |
|
|
oppose: false, |
|
|
oppose: false, |
|
|
supportNum: 40, |
|
|
supportNum: null, |
|
|
opposeNum: 60, |
|
|
opposeNum: null, |
|
|
disableAllButtons: false, |
|
|
disableAllButtons: false, |
|
|
eventId:"", |
|
|
eventId: "", |
|
|
ProblemDescription:{}, |
|
|
ProblemDescription: {}, |
|
|
vote:{} |
|
|
vote: {} |
|
|
|
|
|
|
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
created(){ |
|
|
created() { |
|
|
this.eventId=this.$route.query.eventId |
|
|
this.eventId = this.$route.query.eventId |
|
|
console.log(this.id,"this.id"); |
|
|
console.log(this.id, "this.id"); |
|
|
this.id=this.$route.query.eventId |
|
|
this.id = this.$route.query.eventId |
|
|
this.agencyId = this.$store.state.app.agencyId; |
|
|
this.agencyId = this.$store.state.app.agencyId; |
|
|
this.userId = this.$store.state.app.appId; |
|
|
this.userId = this.$store.state.app.appId; |
|
|
this.icEventOldDiscussDetil1() |
|
|
this.icEventOldDiscussDetil1() |
|
|
this.icEventOldDiscuss() |
|
|
|
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
support1() { |
|
|
support1() { |
|
|
return this.supportNum / this.dataValue; |
|
|
return (this.ProblemDescription.supportNum / this.dataValue) |
|
|
}, |
|
|
}, |
|
|
oppose1() { |
|
|
oppose1() { |
|
|
return this.opposeNum / this.dataValue; |
|
|
return (this.ProblemDescription.opposeNum / this.dataValue) |
|
|
}, |
|
|
}, |
|
|
support1Width() { |
|
|
support1Width() { |
|
|
return this.support1 * 225 + 'px'; |
|
|
return (!this.support1?50:this.support1.toFixed(2) * 100) + '%'; |
|
|
}, |
|
|
}, |
|
|
oppose1Width() { |
|
|
oppose1Width() { |
|
|
return this.oppose1 * 225 + 'px'; |
|
|
return (!this.oppose1?50:this.oppose1.toFixed(2) * 100) + '%'; |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
async icEventOldDiscuss(){ |
|
|
async handelClicsupport() { |
|
|
let parm = { |
|
|
|
|
|
pageSize: 10, |
|
|
|
|
|
pageNo: 1, |
|
|
|
|
|
icEventId:this.eventId |
|
|
|
|
|
} |
|
|
|
|
|
let res = await icEventOldDiscuss(parm) |
|
|
|
|
|
console.log(res); |
|
|
|
|
|
this.vote=res.list[0] |
|
|
|
|
|
|
|
|
|
|
|
console.log( this.vote,"res1"); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
async handelClicsupport(){ |
|
|
|
|
|
let parm = { |
|
|
let parm = { |
|
|
eventId:this.eventId, |
|
|
eventId: this.eventId, |
|
|
agencyId: this.agencyId, |
|
|
agencyId: this.agencyId, |
|
|
userId: this.userId, |
|
|
userId: this.userId, |
|
|
opinionFlag:0 |
|
|
opinionFlag: 0 |
|
|
} |
|
|
} |
|
|
console.log(parm); |
|
|
console.log(parm); |
|
|
let res = await handelClicsupport(parm) |
|
|
let res = await handelClicsupport(parm) |
|
|
this.icEventOldDiscuss() |
|
|
this.icEventOldDiscuss() |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
async handelClicopposeNum(data){ |
|
|
async handelClicopposeNum(data) { |
|
|
let parm = { |
|
|
let parm = { |
|
|
eventId:this.eventId, |
|
|
eventId: this.eventId, |
|
|
agencyId: this.agencyId, |
|
|
agencyId: this.agencyId, |
|
|
userId: this.userId, |
|
|
userId: this.userId, |
|
|
opinionFlag:1 |
|
|
opinionFlag: 1 |
|
|
} |
|
|
} |
|
|
console.log(parm); |
|
|
console.log(parm); |
|
|
let res = await handelClicsupport(parm) |
|
|
let res = await handelClicsupport(parm) |
|
|
this.icEventOldDiscuss() |
|
|
this.icEventOldDiscuss() |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
async icEventOldDiscussDetil1(){ |
|
|
async icEventOldDiscussDetil1() { |
|
|
console.log(this.id,"this.id"); |
|
|
console.log(this.id, "this.id"); |
|
|
let parm={ |
|
|
let parm = { |
|
|
icEventId:this.eventId |
|
|
icEventId: this.eventId |
|
|
} |
|
|
} |
|
|
await andelClicDetail(parm).then(res => { |
|
|
await andelClicDetail(parm).then(res => { |
|
|
console.log(res,"res"); |
|
|
console.log(res, "res"); |
|
|
this.ProblemDescription = res |
|
|
this.ProblemDescription = res; |
|
|
|
|
|
this.dataValue = res.opposeNum + res.supportNum |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
handsupport() { |
|
|
handsupport() { |
|
|
this.support = true; |
|
|
this.support = true; |
|
|
}, |
|
|
}, |
|
|
Onsupport(){ |
|
|
Onsupport() { |
|
|
this.supportNum++; |
|
|
this.supportNum++; |
|
|
this.dataValue++; |
|
|
this.dataValue++; |
|
|
this.disableAllButtons = true; // 点击后禁用所有按钮 |
|
|
this.disableAllButtons = true; // 点击后禁用所有按钮 |
|
|
console.log(this.supportNum) |
|
|
console.log(this.supportNum) |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
Onoppose(){ |
|
|
Onoppose() { |
|
|
console.log("1111") |
|
|
console.log("1111") |
|
|
this.opposeNum++; |
|
|
this.opposeNum++; |
|
|
this.dataValue++; |
|
|
this.dataValue++; |
|
|
@ -180,8 +148,8 @@ export default { |
|
|
|
|
|
|
|
|
<style lang='less' scoped> |
|
|
<style lang='less' scoped> |
|
|
.image-container { |
|
|
.image-container { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.image-grid { |
|
|
.image-grid { |
|
|
@ -200,8 +168,8 @@ export default { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.image-with-text { |
|
|
.image-with-text { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.grid-item { |
|
|
.grid-item { |
|
|
@ -242,31 +210,76 @@ export default { |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
/* 使背景图片覆盖整个元素 */ |
|
|
/* 使背景图片覆盖整个元素 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text-overlay { |
|
|
.text-overlay { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 10px; /* 文字距离图片底部的距离 */ |
|
|
bottom: 10px; |
|
|
color: white; /* 文字颜色，可以根据需要调整 */ |
|
|
/* 文字距离图片底部的距离 */ |
|
|
padding: 5px; |
|
|
color: white; |
|
|
border-radius: 3px; /* 可选，圆角 */ |
|
|
/* 文字颜色，可以根据需要调整 */ |
|
|
font-size: 13px; |
|
|
padding: 5px; |
|
|
text-align: center; |
|
|
border-radius: 3px; |
|
|
|
|
|
/* 可选，圆角 */ |
|
|
|
|
|
font-size: 13px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text-overlay1 { |
|
|
.text-overlay1 { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: 10px; /* 文字距离图片底部的距离 */ |
|
|
bottom: 10px; |
|
|
color: white; /* 文字颜色，可以根据需要调整 */ |
|
|
/* 文字距离图片底部的距离 */ |
|
|
padding: 5px; |
|
|
color: white; |
|
|
border-radius: 3px; /* 可选，圆角 */ |
|
|
/* 文字颜色，可以根据需要调整 */ |
|
|
font-size: 13px; |
|
|
padding: 5px; |
|
|
text-align: center; |
|
|
border-radius: 3px; |
|
|
right: 0px; |
|
|
/* 可选，圆角 */ |
|
|
|
|
|
font-size: 13px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
right: 0px; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
.footer_img_left{ |
|
|
|
|
|
|
|
|
.footer_img_left { |
|
|
background: url('@/assets/images/discusion/h-y.png'); |
|
|
background: url('@/assets/images/discusion/h-y.png'); |
|
|
width: 10px; |
|
|
width: 10px; |
|
|
height: 35px; |
|
|
height: 35px; |
|
|
background-size: cover; |
|
|
background-size: cover; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vote { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
&>:nth-child(1), |
|
|
|
|
|
>:nth-child(2) { |
|
|
|
|
|
height: 35px; |
|
|
|
|
|
line-height: 35px; |
|
|
|
|
|
padding: 0 11px; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
font-size: 13px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&>:nth-child(1) { |
|
|
|
|
|
background: url('@/assets/images/discusion/left-bg.png') no-repeat; |
|
|
|
|
|
background-size: 97% 100%; |
|
|
|
|
|
padding: 0 10px; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 4; |
|
|
|
|
|
&>img{ |
|
|
|
|
|
width: 25px; |
|
|
|
|
|
height: 25px; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
right: -10px; |
|
|
|
|
|
top: 5px; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&>:nth-child(2) { |
|
|
|
|
|
background: url('@/assets/images/discusion/right-bg.png') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
z-index: 5; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
