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>
                    <template #icon>
                        <img src="@/assets/images/icons/link.png" alt="" class="img_20">
                    </template> 点赞{{ info.likes }}1200 </van-button>
            </div>
            <div class="flex1 flex flex-center1 flex-center2">
                <van-button size="small" class="m-right7" round @click="share">
                    <template #icon>
                        <img src="@/assets/images/icons/share.png" alt="" class="img_20">
                    </template> 转发 {{ info.likes }}420 </van-button>
            </div>
        </div>
    </div>
</template>

<script>
import {setConfig} from '@/utils/jweixin'
export default {
    data() {
        return {
            info: {},
        };
    },
    created() {
        if (this.$route.query) {
            this.info = JSON.parse(this.$route.query.item);
        }
    },
    mounted(){
        setConfig(['updateAppMessageShareData','onMenuShareAppMessage', 'updateTimelineShareData'])
    },
    methods: {
        share() {
            if (wx.updateAppMessageShareData) {
                wx.updateAppMessageShareData({
                    title: 'e智社区',
                    desc: this.info.title,
                    link: `http://epmet-cloud.elinkservice.cn/#/communityPublicityDetail?item=${JSON.stringify(this.info)}`,
                    imgUrl: '',
                    success: function () {
                    }
                })
            } else {
                wx.onMenuShareAppMessage({
                    title: 'e智社区',
                    desc: this.info.title,
                    link: `http://epmet-cloud.elinkservice.cn/#/communityPublicityDetail?id=${JSON.stringify(this.info)}`,
                    imgUrl: '',
                    success: function () {
                    }
                })
            }
        }
    },
    components: {},
    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>