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

<template>
    <div>
     <div class='container m-bot50' :style="this.phone=='Phone'?'':'height: 80vh; overflow: auto;'">
        <div class="card">
            <div class="m-top15 p0">
                <h2 style="margin: 0; font-size: 21px;">{{ info.title }}</h2>
                <div class="flex flex-end">
                    <van-cell :border="false" :value="info.agencyName" class="font-size13 y66666"></van-cell>
                    <van-cell :border="false" :value="info.releaseTime" class="font-size13 y66666"></van-cell>
                </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:8vh;'">
            <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="@/assets/images/icons/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 } from '@/api/home';
import Share from "@/components/Share"
export default {
    data() {
        return {
            info: {},
            showShare:false,
            phone:""
        };
    },
    created() {
        if (this.$route.query) {
            this.info = JSON.parse(this.$route.query.item);
        }
    },
    mounted() {
        setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
        this.share()
    },
    methods: {
        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: 'e智社区',
                        desc: than.info.title,
                        link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/communityPublicityDetail?item=${encodeURIComponent(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 () {}
                    })
                });

            } else {
                wx.onMenuShareAppMessage({
                    title: 'e智社区',
                    desc: than.info.title,
                    link: `https://epmet-preview.elinkservice.cn/epmet-wx-pa/#/communityPublicityDetail?item=${encodeURIComponent(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>
: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>