jzhw_uni/pages/topic/topicDetail/topicDetail.vue

<template>
    <view>
        <scroll-view class="container">
            <scroll-view class="content">
                <!-- <template is="wxParse" :data="wxParseData:topicDetail.nodes"/> -->
                <mp-html :content="article_topicDetail"></mp-html>
            </scroll-view>
            <scroll-view class="sv-goods" v-if="topicGoods.length > 0">
                <view class="topic-goods">
                    <view class="h">
                        <text class="t">专题商品</text>
                    </view>
                    <view class="b">
                        <view class="item" v-for="(item, index) in topicGoods" :key="index">
                            <navigator :url="'/pages/goods/goods?id=' + item.id">
                                <image class="img" :src="item.picUrl" background-size="cover"></image>
                                <view class="right">
                                    <view class="text">
                                        <text class="name">{{ item.name }}</text>
                                        <text class="desc">{{ item.brief }}</text>
                                        <text class="price">￥{{ item.retailPrice }}</text>
                                    </view>
                                </view>
                            </navigator>
                        </view>
                    </view>
                </view>
            </scroll-view>
            <scroll-view class="comments">
                <view class="h">
                    <text class="t">精选留言</text>
                    <van-icon @tap.native="postComment" class="i" name="comment-o" />
                </view>
                <view class="has-comments" v-if="commentList.length > 0">
                    <view class="b">
                        <view class="item" v-for="(item, index) in commentList" :key="index">
                            <view class="info">
                                <view class="user">
                                    <image class="avatar" :src="item.userInfo.avatarUrl"></image>
                                    <text class="nickname">{{ item.userInfo.nickName }}</text>
                                </view>
                                <view class="time">{{ item.addTime }}</view>
                            </view>

                            <view class="comment">
                                {{ item.content }}
                            </view>
                        </view>
                    </view>
                    <view class="load" v-if="commentCount > 5">
                        <navigator :url="'/pages/topicComment/topicComment?valueId=' + topic.id + '&type=1'">查看更多</navigator>
                    </view>
                </view>
                <view class="no-comments" v-if="commentList.length <= 0">
                    <text class="txt">等你来留言</text>
                </view>
            </scroll-view>
            <scroll-view class="rec-box">
                <view class="h">
                    <text class="txt">专题推荐</text>
                </view>
                <view class="b">
                    <navigator class="item" :url="'../topicDetail/topicDetail?id=' + item.id" v-for="(item, index) in topicList" :key="index">
                        <image class="img" :src="item.picUrl"></image>

                        <text class="title">{{ item.title }}</text>
                    </navigator>
                </view>
            </scroll-view>
        </scroll-view>
    </view>
</template>

<script>
var app = getApp();
var WxParse = require('../../../lib/wxParse/wxParse.vue');
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            id: 0,

            topic: {
                id: ''
            },

            topicList: [],
            commentCount: 0,
            commentList: [],
            topicGoods: [],
            article_topicDetail: 0
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        that.setData({
            id: options.id
        });
        util.request(api.TopicDetail, {
            id: that.id
        }).then(function (res) {
            if (res.errno === 0) {
                that.setData({
                    topic: res.data.topic,
                    topicGoods: res.data.goods
                });
                that.article_topicDetail = that.escape2Html(res.data.topic.content);
            }
        });
        util.request(api.TopicRelated, {
            id: that.id
        }).then(function (res) {
            if (res.errno === 0) {
                that.setData({
                    topicList: res.data.list
                });
            }
        });
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
        this.getCommentList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getCommentList() {
            let that = this;
            util.request(api.CommentList, {
                valueId: that.id,
                type: 1,
                showType: 0,
                page: 1,
                limit: 5
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        commentList: res.data.list,
                        commentCount: res.data.total
                    });
                }
            });
        },

        postComment() {
            if (!app.globalData.hasLogin) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            } else {
                uni.navigateTo({
                    url: '/pages/topicCommentPost/topicCommentPost?valueId=' + this.id + '&type=1'
                });
            }
        }
    }
};
</script>
<style>
.content {
    width: 100%;
    height: auto;
    font-size: 0;
}

.content image {
    display: inline-block;
    width: 100%;
}

.comments {
    width: 100%;
    height: auto;
    padding-left: 30rpx;
    background: #fff;
    margin-top: 20rpx;
}

.comments .h {
    height: 93rpx;
    line-height: 93rpx;
    width: 720rpx;
    padding-right: 30rpx;
    border-bottom: 1px solid #d9d9d9;
}

.comments .h .t {
    display: block;
    float: left;
    width: 50%;
    font-size: 29rpx;
    color: #333;
}

.comments .h .i {
    display: block;
    float: right;
    width: 33rpx;
    height: 33rpx;
}

.comments .b {
    height: auto;
    width: 720rpx;
}

.comments .item {
    height: auto;
    width: 720rpx;
    overflow: hidden;
    border-bottom: 1px solid #d9d9d9;
}

.comments .info {
    height: 127rpx;
    width: 100%;
    padding: 33rpx 0 27rpx 0;
}

.comments .user {
    float: left;
    width: auto;
    height: 67rpx;
    line-height: 67rpx;
    font-size: 0;
}

.comments .user .avatar {
    display: block;
    float: left;
    width: 67rpx;
    height: 67rpx;
    margin-right: 17rpx;
    border-radius: 50%;
}

.comments .user .nickname {
    display: block;
    width: auto;
    float: left;
    height: 66rpx;
    overflow: hidden;
    font-size: 29rpx;
    line-height: 66rpx;
}

.comments .time {
    display: block;
    float: right;
    width: auto;
    height: 67rpx;
    line-height: 67rpx;
    color: #7f7f7f;
    font-size: 25rpx;
    margin-right: 30rpx;
}

.comments .comment {
    width: 720rpx;
    padding-right: 30rpx;
    line-height: 45.8rpx;
    margin-bottom: 30rpx;
    font-size: 29rpx;
    color: #333;
}

.comments .load {
    width: 720rpx;
    height: 108rpx;
    line-height: 108rpx;
    text-align: center;
    font-size: 38.5rpx;
}

.no-comments {
    height: 297rpx;
}

.no-comments .txt {
    height: 43rpx;
    line-height: 43rpx;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 29rpx;
    color: #7f7f7f;
    padding-top: 150rpx;
}

.sv-goods {
    width: 100%;
    height: auto;
    padding-left: 30rpx;
    background: #fff;
    margin-top: 20rpx;
}

.topic-goods .h {
    height: 93rpx;
    line-height: 93rpx;
    width: 720rpx;
    padding-right: 30rpx;
    border-bottom: 1px solid #d9d9d9;
}

.topic-goods .h .t {
    display: block;
    float: left;
    width: 50%;
    font-size: 29rpx;
    color: #333;
}

.topic-goods .b .item {
    border-top: 1px solid #d9d9d9;
    margin: 0 20rpx;
    height: 244rpx;
    width: 710rpx;
}

.topic-goods .b .img {
    margin-top: 12rpx;
    margin-right: 12rpx;
    float: left;
    width: 220rpx;
    height: 220rpx;
}

.topic-goods .b .right {
    float: left;
    height: 244rpx;
    width: 476rpx;
    display: flex;
    flex-flow: row nowrap;
}

.topic-goods .b .text {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    height: 244rpx;
    width: 476rpx;
}

.topic-goods .b .name {
    float: left;
    width: 330rpx;
    display: block;
    color: #333;
    line-height: 50rpx;
    font-size: 30rpx;
}

.topic-goods .b .desc {
    width: 476rpx;
    display: block;
    color: #999;
    line-height: 50rpx;
    font-size: 25rpx;
}

.topic-goods .b .price {
    width: 476rpx;
    display: flex;
    color: #b4282d;
    line-height: 50rpx;
    font-size: 33rpx;
}

.rec-box {
    width: 690rpx;
    height: auto;
    margin: 0 30rpx;
}

.rec-box .h {
    position: relative;
    width: 690rpx;
    height: 96rpx;
    /*border-bottom: 1px solid #d0d0d0;*/
    margin-bottom: 32rpx;
}

.rec-box .h .txt {
    display: inline-block;
    position: absolute;
    background: #f4f4f4;
    top: 59rpx;
    left: 200rpx;
    width: 290rpx;
    height: 45rpx;
    line-height: 45rpx;
    font-size: 30rpx;
    color: #999;
    text-align: center;
}

.rec-box .b .item {
    width: 690rpx;
    height: 397rpx;
    padding: 24rpx 24rpx 30rpx 24rpx;
    background: #fff;
    margin-bottom: 30rpx;
}

.rec-box .b .item .img {
    height: 278rpx;
    width: 642rpx;
}

.rec-box .b .item .title {
    display: block;
    margin-top: 30rpx;
    height: 30rpx;
    width: 642rpx;
    font-size: 28rpx;
}
</style>