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

<template>
    <div class='container m-bot50'>
        <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="height: 50px;">
            <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>
</template>

<script>
import { setConfig } from '@/utils/jweixin'
import {communityPublicityGiveLike } from '@/api/home';
import Share from "@/components/Share"
export default {
    data() {
        return {
            info: {},
            showShare:false,
        };
    },
    created() {
        if (this.$route.query) {
            this.info = JSON.parse(this.$route.query.item);
        }
    },
    mounted() {
        setConfig(['updateAppMessageShareData', 'onMenuShareAppMessage', 'updateTimelineShareData'])
        this.share()
    },
    methods: {
        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: `http://epmet-cloud.elinkservice.cn/#/communityPublicityDetail?item=${encodeURIComponent(than.info)}`,
                        imgUrl: '',
                        success: function () {
                        console.log('分享成功');
                        }
                    })
                });

            } else {
                wx.onMenuShareAppMessage({
                    title: 'e智社区',
                    desc: than.info.title,
                    link: `http://epmet-cloud.elinkservice.cn/#/communityPublicityDetail?item=${encodeURIComponent(than.info)}}`,
                    imgUrl: '',
                    success: function () {
                        console.log('分享成功');
                    }
                })
            }
        }
    },
    components: {Share},
    computed: {},
    watch: {},
}
</script>

<style lang='less' scoped>
:deep(.p0>.van-cell) {
    padding: 0;
}

: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>