hxj/src/pages/topic/topic.vue

<template>
    <app-layout>
        <view class="topic">
            <view class="detail-head" v-if="start">
                <view class="detail-head-label">{{ detail.title }}</view>
                <view class="detail-head-show-title cross-center main-between">
                    <view>{{ detail.read_number }}人浏览</view>
                </view>
            </view>

            <view class="detail-diy">
                <block v-for="(temp, index) in detail.detail" :key="index">
                    <template v-if="temp.id === 'mch-goods'">
                        <view :style="[
                             {'background-color':`${temp.data.backgroundColor}`,
                            'padding': `${temp.data.c_padding_top}rpx ${temp.data.c_padding_lr}rpx ${temp.data.c_padding_bottom}rpx`,
                            'background-image': temp.data.backgroundPicUrl ? `url(${temp.data.backgroundPicUrl})` : `none`,
                            'background-size':`${temp.data.backgroundWidth + '% ' + temp.data.backgroundHeight + '%'}`,
                            'background-position':`${transLabelBackgroundPosition(temp.data.position)}`,
                            'background-repeat':`${transLabelBackgroundRepeat(temp.data.mode)}`}]"
                        >
                            <app-diy-list :temp="temp" :theme="getTheme"></app-diy-list>
                        </view>
                    </template>
                    <template v-else-if="temp.id === 'rubik'">
                        <view style="position: relative">
                            <app-image-ad
                                v-bind:image-style="temp.data.style"
                                v-bind:list="temp.data.list"
                                v-bind:height="temp.data.height"
                            ></app-image-ad>
                            <block v-for="(hotspot, hotspot_index) in temp.data.hotspot" v-bind:key="hotspot_index">
                                <app-hotspot v-bind:hotspot="rubikHotspot(hotspot)"></app-hotspot>
                            </block>
                        </view>
                    </template>
                    <template v-else-if="temp.id === 'video'">
                        <app-video
                            v-bind:pic-url="temp.data.pic_url"
                            v-bind:url="temp.data.url"
                            v-bind:has-auto="temp.data.hasAuto"
                            v-bind:has-cycle="temp.data.hasCycle"
                            v-bind:bg-padding="temp.data.bg_padding"
                            v-bind:c-border-bottom="temp.data.c_border_bottom"
                            v-bind:c-border-top="temp.data.c_border_top"
                            v-bind:c-padding-top="temp.data.c_padding_top"
                            v-bind:c-padding-lr="temp.data.c_padding_lr"
                            v-bind:c-padding-bottom="temp.data.c_padding_bottom"
                        ></app-video>
                    </template>
                    <template v-else-if="temp.id === 'image-text'">
                        <view style="padding: 1rpx 24rpx" :style="{backgroundColor: temp.data.bg || 'inherit'}">
                            <app-rich :image-prop="imageProp" v-bind:content='temp.data.content'></app-rich>
                        </view>
                    </template>
                </block>
            </view>
            <view style="height: 111rpx"></view>
            <view class="detail-navbar dir-left-nowrap cross-center">
               <!-- <view v-if="detail.is_favorite == 1" class="box-grow-1 dir-left-nowrap cross-center main-center"
                      @click="handleLove('no_love',detail)">
                    <view>
                        <image :style="{'background-color': getTheme.background}" src="./image/weitao-love-a.png"></image>
                        <view class="hide"></view>
                    </view>
                    <view>已收藏</view>
                </view>
                <view v-else class="box-grow-1 dir-left-nowrap cross-center main-center"
                      @click="handleLove('love',detail)">
                    <image src="./image/weitao-love.png"></image>
                    <view>收藏</view>
                </view>
                <view class="box-grow-0 line"></view> -->
                <view class="box-grow-1 dir-left-nowrap cross-center main-center" @click="isShare = true">
                    <image src="./image/weitao-detail-share.png"></image>
                    <view>分享</view>
                </view>
            </view>
            <mch-share v-model="isShare" @share="hShareAppMessage" type="detail" :detail="detail"></mch-share>
        </view>
    </app-layout>
</template>

<script>
import mchShare from "./mch-share";
import appDiyGoodsList from "./components/app-diy-goods-list.vue";
import {mapGetters, mapState} from "vuex";
import appRich from "../../components/basic-component/app-rich/parse";
import appVideo from "../../components/page-component/app-video/app-video";
import appImageAd from "../../components/page-component/app-image-ad/app-image-ad";
import appHotspot from "../../components/basic-component/app-hotspot/app-hotspot";
import appDiyList from "../../components/page-component/index/app-diy-list";


export default {
    name: "topic",
    components: {
        appDiyList,
        mchShare,
        appDiyGoodsList,
        appRich,
        appVideo,
        appImageAd,
        appHotspot,
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
        }),
        ...mapGetters('mallConfig', {
            getTheme: 'getTheme',
        }),
    },
    data() {
        return {
            imageProp: {
                mode: 'aspectFit',
                padding: 0,
                lazyLoad: false,
                domain: '',
                paddinglimit: 48,
            },

            detail: {},
            params: {
                id: '',
            },
            start: false,
            temp: {
                data: {}
            },

            isShare: false
        }
    },
    onLoad(options) {
        this.$commonLoad.onload(options);
        // #ifdef MP-WEIXIN
        wx.showShareMenu({
            menus: ['shareAppMessage', 'shareTimeline']
        })
        // #endif
        Object.assign(this.params, options);
        this.loadData();
    },
    // #ifdef MP
    onShareAppMessage(object) {
        return this.hShareAppMessage();
    },
    // #endif
    methods: {
        handleLove(value,detail) {
            this.$request({
                url: this.$api.topic.favorite,
                method: 'POST',
                data: {
                    id: this.detail.id,
                    is_favorite: value
                },
            }).then(info => {
                if(info.code === 0){
                    this.detail.is_favorite = value === 'love' ? 1 : 0;
                }
                uni.showToast({title: info.msg, icon: 'none'});
            })
        },
        transLabelBackgroundPosition(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'left top';
                case 2:
                    return 'center top';
                case 3:
                    return 'right top';
                case 4:
                    return 'left center';
                case 5:
                    return 'center center';
                case 6:
                    return 'right center';
                case 7:
                    return 'left bottom';
                case 8:
                    return 'center bottom';
                case 9:
                    return 'right bottom';
                default:
                    return 'center';
            }
        },
        transLabelBackgroundRepeat(val) {
            val = Number(val);
            switch (val) {
                case 1:
                    return 'no-repeat';
                case 2:
                    return 'repeat-x';
                case 3:
                    return 'repeat-y';
                case 4:
                    return 'repeat';
                default:
                    return 'no-repeat';
            }
        },
        rubikHotspot(hotspot) {
            if (hotspot && hotspot.link) {
                hotspot.link.url = hotspot.link.value;
                hotspot.link.openType = hotspot.link.open_type;
            }
            return hotspot;
        },

        hShareAppMessage(s = false) {
            let {share_title, share_pic_url, title, pic_url, abstract} = this.detail;
            return this.$shareAppMessage({
                title: share_title || title,
                imageUrl: !share_pic_url ? pic_url.length ? pic_url[0].pic_url : '' : share_pic_url,
                path: '/pages/topic/topic',
                desc: abstract,
                params: this.params
            }, s);
        },
        loadData() {
            this.$showLoading({title: '加载中'});
            this.start = false;
            this.$request({
                url: this.$api.topic.detail,
                data: {
                    id: this.params.id
                },
            }).then(info => {
                this.$hideLoading();
                if (info.code === 0) {
                    this.detail = info.data.detail;
                    this.start = true;
					this.shareTimelineData = {
						title: this.detail.share_title ? this.detail.share_title : this.detail.title,
						imageUrl: !this.detail.share_pic_url ? this.detail.pic_url.length ? this.detail.pic_url[0].pic_url : '' : this.detail.share_pic_url,
						query: this.params
					}
                    // #ifdef H5
                    this.hShareAppMessage();
                    // #endif
                } else {
                    uni.showToast({title: info.msg, icon: 'none'});
                }
            }).catch(info => {
                this.$hideLoading();
            })
        },
    }
}
</script>

<style scoped lang="scss">
.topic {
    background: white;
    min-height: 100vh;
    .detail-head {
        padding: 24#{rpx} 24#{rpx} 0;

        .detail-head-label {
            font-size: 40#{rpx};
            font-weight: bold;
            color: #333333;
            padding-bottom: 20#{rpx};
        }

        .detail-head-show-title {
            font-size: 28#{rpx};
            color: #999999;
            padding-bottom: #{20rpx};
        }

        .detail-head_share {
            margin-left: auto;

            > image {
                height: 40#{rpx};
                width: 40#{rpx};
                display: block;
            }

            > view {
                margin-left: 6#{rpx};
                font-size: 28#{rpx};
                color: #333333;
            }
        }
    }

    .detail-navbar {
        position: fixed;
        bottom: 0;
        z-index: 1001;
        width: 100%;
        height: 111#{rpx};
        background: white;

        > view {
            height: 100%;
            font-size: 28#{rpx};
            color: #333333;
        }

        .line {
            height: 40#{rpx};
            width: 1px;
            background: #cccccc;
        }

        .hide {
            height: 60#{rpx};
            width: 60#{rpx};
            border: 10#{rpx} solid #FFFFFF;
            position: absolute;
            z-index: 10;
            margin-left: -10#{rpx};
            top: 22#{rpx};
        }

        image {
            height: 40#{rpx};
            width: 40#{rpx};
            display: block;
            margin-right: 20#{rpx};
        }
    }
}
</style>