caimei-applets-caimei/pages/seller/task/task-details.vue

<template>
    <view class="container clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
            :loadingType="5" />
        <view class="container-content tui-skeleton" v-else>
            <view class="empty-container" v-if="!taskInfo">
                <image class="empty-container-image" :src="StaticUrl + '/icon/icon-coupon-empty@2x.png'"></image>
                <text class="error-text">暂无推广信息~</text>
            </view>
            <template v-else>
                <view class="container-main">
                    <view class="main-product" @click.stop="this.$api.navigateTo(`/pages/goods/product?id=${taskInfo.productId}`)">
                        <view class="main-product-image">
                            <image :src="taskInfo.mainImage" mode=""></image>
                        </view>
                        <view class="main-product-name">
                            {{ taskInfo.productName }}
                        </view>
                    </view>
                    <mp-html :content="html" :tag-style="tagStyle" />
                </view>
            </template>
        </view>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    import wxLogin from '@/common/config/wxLogin.js'
    import authorize from '@/common/config/authorize.js'
    import { COUPON_TEXT_MAP } from '@/utils/coupon.share.js'
    import payMixins from '@/mixins/payMixins.js'
    export default {
        mixins: [payMixins],
        data() {
            return {
                StaticUrl: this.$Static,
                taskInfo: {},
                coupinList: [],
                payAmount: 100, //支付金额
                skeletonShow: true,
                isReceiveLoading: false, //领券操作状态
                html:'',
                param: {
                    serviceProviderId: 0,
                    userId: 0,
                    taskId: 0
                }
            }
        },
        onLoad(option) {
            wxLogin.wxLoginAuthorize()
            this.param.serviceProviderId = option.shareSpid
            this.param.taskId = option.taskId
            // #ifdef MP-WEIXIN
            // 绑定分享参数
            console.log('绑定分享参数', { query: `taskId=${option.taskId}&shareSpid=${option.shareSpid}` })
            wx.onCopyUrl(() => {
                return { query: `taskId=${option.taskId}&shareSpid=${option.shareSpid}` }
            })
            // #endif
            this.getTaskDetail(this.param.taskId)
        },
        filters: {},
        computed: {
            ...mapState(['hasLogin', 'userInfo', ])
        },
        methods: {
            async getTaskDetail() {
                // 初始化推广任务详情
                try {
                    const userInfo = await this.$api.getStorage()
                    this.param.userId = userInfo.userId ? userInfo.userId : 0
                    const res = await this.SellerService.getTaskDetail(this.param)
                    this.taskInfo = res.data
                    uni.setNavigationBarTitle({ title: `${this.taskInfo.title}` })
                    this.html = this.$api.adaptRichTextImg(this.taskInfo.content)
                    setTimeout(() => {
                        this.skeletonShow = false
                    }, 500)
                } catch (e) {
                    console.log('初始化推广任务详情异常~')
                }
            }
        },
        onShareAppMessage(res) {
            //分享优惠券
            if (res.from === 'button') { 
                // 来自页面内转发按钮
            }
            const task = this.taskInfo
            const path = `/pages/seller/task/task-details?taskId=${task.taskId}&shareSpid=${this.param.serviceProviderId}`
            return {
                title: task.title,
                path: path,
                imageUrl: task.topPic ? `${task.topPic}` : ''
            }
        },
        onHide() {
            // 取消绑定分享参数
            wx.offCopyUrl()
        },
        onShow() {

        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f7f7f7;
    }

    .container {
        width: 100%;
        height: auto;
    }

    .empty-container-image {
        width: 260rpx;
        height: 260rpx;
        margin-top: -300rpx;
    }

    .container-main {
        box-sizing: border-box;
        padding: 24rpx;
        .main-product{
            width: 100%;
            height: 220rpx;
            border-radius: 16rpx;
            background: #ffffff;
            background-size: cover;
            overflow: hidden;
            box-sizing: border-box;
            padding: 20rpx;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 20rpx;
            .main-product-image{
                width: 180rpx;
                height: 180rpx;
                border-radius: 16rpx;
                overflow: hidden;
                box-sizing: border-box;
                border: 1px solid #f7f7f7;
                image{
                    width: 178rpx;
                    height: 178rpx;
                    display: block;
                }
            }
            .main-product-name{
                width: 500rpx;
                padding-left: 24rpx;
                box-sizing: border-box;
                font-size: $font-size-28;
                color: #333333;
                line-height: 48rpx;
            }
        }
        text{
            display: inline-block;
            width: 702rpx !important;
            text-align: justify;
            font-size: 28rpx;
            color: #666666;
            line-height: 48rpx;
        }
    }
    /*富文本样式*/
    rich-text {
        width: 702rpx !important;
        padding: 0 20rpx;
        text-align: justify;
        font-size: 28rpx;
        color: #666666;
        line-height: 50rpx;
    }
    rich-text.p {
        width: 702rpx !important;
        padding: 0 20rpx;
        text-align: justify;
        font-size: 28rpx;
        color: #666666;
        line-height: 50rpx;
    }
    
    rich-text._img {
        width: 100%;
        height: auto;
    }
    rich-text image {
        width: 100%;
        height: auto;
    }
</style>