epmet-wx-pa-chengyang/src/views/serviceGuide/detail.vue

<template>
    <div>
        <div class="flex flex-mean" style="background-color: #FFFFFF;">
            <!-- <van-search class=".flex flex-1" v-model="searchValue" left-icon="" shape="round" placeholder="请输入搜索关键词" />
            <van-button round type="info" class="custom-button font-size13 m-top10 m-right12" @click="onSearch()">查询</van-button> -->
            <!-- <van-image src="../../assets/images/servicePhone/" /> -->
             <img :src=" info.coverPic" style="width: 100%;" />
        </div>
     <div class='container m-bot50' :style="this.phone=='Phone'?'':'height: 85vh; overflow: auto;'"style="position: relative;top: -47px;">
        <div class="card">
            <div class=" p0">
                <div class="text1">{{ info.title }}</div>
                <div class="flex flex-x text2">
                    <div class="font-size13 y66666">{{ info.agencyName }}</div>
                    <div class="font-size13 y66666 m-left5">{{ info.releaseTime }}</div>
                 
                </div>
                <van-divider />
                <div v-html="info.content">
                </div>
            </div>
        </div>
        <!-- <div class="bot_btn flex flex-center2" :style="this.phone=='Phone'?'height:50px;bottom:0':'height: 50px;bottom:5vh;'">
            <div class="flex1 flex flex-center1 flex-center2">
                <van-button size="small" class="m-right7" round @click="communityPublicityGiveLike(info.id,'likes')">
                    <template #icon>
                        <img :src="require(`@/assets/images/icons/${info.approveStatus === '0'?'link2':'link'}.png`)" alt="" class="img_20">
                    </template> 点赞{{ info.likes || 0 }} </van-button>
            </div>
            <div class="flex1 flex flex-center1 flex-center2">
                <van-button size="small" class="m-right7" round @click="communityPublicityGiveLike(info.id,'transpond')">
                    <template #icon>
                        <img src="@/assets/images/icons/share.png" alt="" class="img_20">
                    </template> 转发 {{ info.transpond || 0 }} </van-button>
            </div>
        </div> -->
        <Share :show="showShare" @closeShare="showShare = false" />
    </div>
    <Android @send-number="handleNumber"></Android>
</div>
   
</template>

<script>


import { setConfig } from '@/utils/jweixin'
import {communityPublicityGiveLike,icServiceGuide } from '@/api/home';
import Share from "@/components/Share"
export default {
    data() {
        return {
            info: {},
            showShare:false,
            phone:"",
            detailId:null
        };
    },
    created() {
        if (this.$route.query) {
            this.detailId = this.$route.query.id;
            this.communityPublicityDetail();
        }
    },
    mounted() {
        // setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
        // this.share()
    },
    methods: {
        async communityPublicityDetail(){
            let res = await icServiceGuide(this.detailId)
            if(res.code === 0){
                this.info = res.data
            }
        },
        handleNumber(value){
            console.log(value,"wl kgnsl, ");
            this.phone=value
        },
        async communityPublicityGiveLike(id,type){
            let parm = {
                id,
                likes:type === 'likes'?1:0,
                transpond:type === 'transpond'?1:0
            }
            let res = await communityPublicityGiveLike(parm)
            if(res.code === 0){
                this.info = res.data;
                this.showShare = type === 'transpond'
            }
        },
        share() {
           let than = this
            if (wx.updateAppMessageShareData) {
                wx.ready(function () {
                    wx.updateAppMessageShareData({
                        title: than.info.title || '讯息详情',
                        desc: '',
                        link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/communityPublicityDetail?id=${than.detailId}&appId=${than.$store.state.app.appId}`,
                        imgUrl: than.info.coverPic || 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
                        success: function () {}
                    })
                    wx.updateTimelineShareData({
                        title: than.info.title,
                        desc: '',
                        link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/communityPublicityDetail?item=${than.detailId}&appId=${than.$store.state.app.appId}`,
                        imgUrl: than.info.coverPic || 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
                        success: function () {}
                    })
                });
                
            } else {
                wx.updateAppMessageShareData({
                        title: than.info.title || '讯息详情',
                        desc: '',
                        link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/communityPublicityDetail?item=${encodeURIComponent(JSON.stringify(than.info))}&appId=${than.$store.state.app.appId}`,
                        imgUrl: 'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20240710/617f7fb327064d89892823b81b11cd70.png',
                        success: function () {}
                    })
            }
        }
    },
    components: {Share},
    computed: {},
    watch: {},
}
</script>

<style lang='less' scoped>
.text1{
    font-family: PingFang SC;
        font-weight: bold;
        font-size: 25px;
        color: #333333;

}
.text2{
    font-family: PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #999999;


}
:deep(.p0>.van-cell) {
    padding: 0;
}
:deep img{
    max-width: 100%;
}
:deep(.van-cell) {
    padding: 16px 8px;
}

:deep(.van-cell__title) {
    color: #666666;
    display: flex;

    &>span {
        flex: 1;
    }
}

:deep(.van-cell__value) {
    text-align: left;
}

:deep(.van-cell--required) {
    &::before {
        left: -5px;
    }
}
</style>