433 lines
10 KiB
Vue
433 lines
10 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="bannerbox">
|
|
<img src="../assets/banner.jpg" alt="" class="banner">
|
|
<div class="thank" :class="{'on':!scoreObj.describe}">感谢您完成阅读!</div>
|
|
<div class="score" v-if="scoreObj.describe">您已获得:<span>{{ scoreObj.total_score }}</span>{{source?'e豆':'积分'}}</div>
|
|
<div class="tips" v-if="scoreObj.describe">({{scoreObj.describe}})</div>
|
|
</div>
|
|
<comment ref="commentRef"></comment>
|
|
<div class="pagebox">
|
|
<pageunit v-for="(item, index) in pageList" :pageIndex="index" :pageItem="item" :imgList="imgList" @changeImg="changeImg"></pageunit>
|
|
</div>
|
|
<totop></totop>
|
|
<back></back>
|
|
</div>
|
|
<!-- <van-image-preview ref="ImagePreview" v-model:show="showImg" closeable :images="imgList" @change="onChange">
|
|
|
|
</van-image-preview> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref,reactive } from "vue";
|
|
import api from '../api/user.js';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { WXSHARE } from "../utils/wxshare-1.6.0";
|
|
import host from "../utils/host"
|
|
const scoreObj = reactive({});
|
|
const route = useRoute();
|
|
const case_id = ref(route.query.case_id)
|
|
const pageList = ref([]);
|
|
const commentRef = ref(null);
|
|
const project_id = ref(route.query.project_id);
|
|
const is_welfare=ref(0);
|
|
const imgList = ref([]);
|
|
let origin=route.query.source?route.query.source:''
|
|
const source = ref(origin);
|
|
|
|
const getDetail = async () => {
|
|
const { code, data } = await api.getCaseDetail(case_id.value)
|
|
if (code == 200) {
|
|
document.title = data.case_name;
|
|
let link=host+'/web/caseIntro?case_id='+case_id.value;
|
|
WXSHARE(data.case_name,'“佳动例”等你来挑战，精彩福利享不停',link,'');
|
|
// Object.assign(caseObj, data)
|
|
// casePage.value = data.case_item;
|
|
pageList.value = [];
|
|
for (let i = 1; i < data.case_item.length; i++) {
|
|
pageList.value.push(data.case_item[i]);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const getScore=()=>{
|
|
api.getScore({
|
|
case_id:case_id.value
|
|
}).then(res=>{
|
|
if(res.code==200){
|
|
if(res.data){
|
|
Object.assign(scoreObj, res.data)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
})
|
|
}
|
|
|
|
|
|
const changeImg=(data)=>{
|
|
console.log(data);
|
|
imgList.value=imgList.value.concat(data);
|
|
}
|
|
onMounted(async() => {
|
|
commentRef.value.init(case_id.value, project_id.value);
|
|
getScore();
|
|
getDetail()
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.main {
|
|
width: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
.banner {
|
|
width: 100%;
|
|
}
|
|
|
|
.bannerbox {
|
|
position: relative;
|
|
|
|
.thank {
|
|
position: absolute;
|
|
top: 21.69%;
|
|
// right: 18.53%;
|
|
white-space: nowrap;
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
font-weight: 600;
|
|
font-size: 23px;
|
|
color: #0CAF98;
|
|
line-height: 30px;
|
|
}
|
|
.thank.on{
|
|
top: 40.10%;
|
|
}
|
|
.score {
|
|
position: absolute;
|
|
top: 50.10%;
|
|
//right: 26.13%;
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
font-weight: 550;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
align-items: first baseline;
|
|
font-size: 16px;
|
|
color: #1F1F1F;
|
|
span{
|
|
font-size: 21px;
|
|
font-weight: 550;
|
|
color:#FF173D
|
|
}
|
|
|
|
}
|
|
.tips{
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
top: 72.43%;
|
|
// right: 9.7%;
|
|
left:50%;
|
|
transform: translateX(-50%);
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
color: #1F1F1F;
|
|
}
|
|
}
|
|
|
|
.add {
|
|
margin: 25px auto;
|
|
width: 250px;
|
|
height: 40px;
|
|
background: #43C9C3;
|
|
border-radius: 23px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.loadmore {
|
|
margin-top: 15px;
|
|
height: 50px;
|
|
display: flex;
|
|
font-size: 15px;
|
|
color: #FFFFFF;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #0CAF98;
|
|
}
|
|
|
|
.conmmentbox {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.talkbox {
|
|
margin: 12px 30px 0px 0;
|
|
}
|
|
|
|
.toolbox {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.cancel {
|
|
|
|
height: 38px;
|
|
background: #FFFFFF;
|
|
border: 1px solid #EBEBEB;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #737478;
|
|
flex: 1;
|
|
}
|
|
|
|
.ok {
|
|
margin-left: 12px;
|
|
flex: 1;
|
|
border-radius: 4px;
|
|
height: 38px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #43C9C3;
|
|
border: 1px solid #43C9C3;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.expand {
|
|
width: 240px;
|
|
height: 19px;
|
|
margin: 12px auto 12px;
|
|
background: #43C9C3;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 10px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.active {
|
|
border-bottom: 1px solid #E5E5E5;
|
|
}
|
|
|
|
.comemntcell {
|
|
display: flex;
|
|
|
|
.descbox {
|
|
margin-left: 12px;
|
|
flex: 1;
|
|
// border-bottom: 1px solid #E5E5E5;
|
|
|
|
|
|
.depart {
|
|
margin-top: 10px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #333333;
|
|
}
|
|
|
|
.hospital {
|
|
margin-top: 4px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #333333;
|
|
}
|
|
|
|
.date {
|
|
margin-top: 4px;
|
|
font-weight: 400;
|
|
font-size: 12px;
|
|
color: #333333;
|
|
}
|
|
|
|
.comemntcell {
|
|
border-bottom: 1px solid #E5E5E5;
|
|
|
|
.descbox {
|
|
border: none;
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.comment {
|
|
margin-top: 4px;
|
|
display: flex;
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
color: #333333;
|
|
line-height: 17px;
|
|
flex: 1;
|
|
}
|
|
|
|
.reply {
|
|
margin-left: 30px;
|
|
width: 40px;
|
|
height: 20px;
|
|
background: #43C9C3;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
}
|
|
|
|
.tag {
|
|
margin-top: 2px;
|
|
font-size: 12px;
|
|
color: #FFFFFF;
|
|
height: 15px;
|
|
background: #43C9C3;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
padding: 0 4px;
|
|
width: 52px;
|
|
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
span {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
|
|
.namebox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
font-size: 17px;
|
|
color: #333333;
|
|
}
|
|
|
|
.zanbox {
|
|
display: flex;
|
|
font-size: 15px;
|
|
color: #333333;
|
|
align-items: center;
|
|
margin-right: 40px;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
width: 100%;
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 15px;
|
|
background: url('../assets/bg.png') no-repeat 0 0;
|
|
background-size: 100% auto;
|
|
margin: 0px 0px;
|
|
min-height: 300px;
|
|
margin-bottom: 20px;
|
|
|
|
.count {
|
|
:deep() .van-count-down {
|
|
color: #fff;
|
|
}
|
|
|
|
right:0;
|
|
top:-10px;
|
|
z-index:9;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
height: 31px;
|
|
padding:0 8px;
|
|
background: #43C9C3;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.title {
|
|
position: relative;
|
|
background-size: 50px 15px;
|
|
padding: 20px 0 10px;
|
|
font-weight: 600;
|
|
font-size: 23px;
|
|
color: #000000;
|
|
.cai{
|
|
width: 50px;
|
|
height: 25px;
|
|
bottom:4px;
|
|
left:-4px;
|
|
z-index:-1;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
font-weight: 400;
|
|
font-size: 17px;
|
|
color: #666666;
|
|
}
|
|
}
|
|
|
|
.textbox {
|
|
border-radius: 5px;
|
|
border: .5px solid #43C9C3;
|
|
|
|
:deep() .van-cell {
|
|
background: none;
|
|
}
|
|
|
|
:deep() .van-field__word-limit {
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 65px;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.button {
|
|
width: 250px;
|
|
height: 40px;
|
|
margin: 34px auto 0;
|
|
background: #43C9C3;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|