【四】鸡汤来咯开发学习笔记-83

1.渲染index内容点击进入detail
在detail中用onload接收到穿过来的id，然后用此id查询数据库，然后渲染页面

<template>
    <view class="detailLayout">
        <view class="soupDetail">
            <soup-tab-group :type='item.soup_type'></soup-tab-group>
            <soup-text-content :lookState="true" :item="item"></soup-text-content>
        </view>
        <view class="comment">
            <view class="list">
                <view class="row">
                    <comment-item :subReply="true"></comment-item>
                </view>
            </view>
        </view>
        <view class="interactive">
            <interactive-bar :type="1" @comment="handelComment"></interactive-bar>
            <view class="safe-area-bottom"></view>
        </view>
    </view>
    <uni-popup type="bottom" ref="commentPopup">
        <common-reply></common-reply>
    </uni-popup>
</template>

<script setup>
    import {
        ref
    } from 'vue';
    import {onLoad} from "@dcloudio/uni-app";
    const db = uniCloud.database();
    const dbCmd = db.command;
    const $ = dbCmd.aggregate;
    const item = ref();
    const current_id = uniCloud.getCurrentUserInfo().uid;

    let id;
    onLoad((e)=>{
        id=e.id;
        getDetail()
    })
    const getDetail = async () => {
            let {
                result: {
                    errCode,
                    data
                }
            } = await db.collection("soup-chicken").aggregate()
                .match({
                    status: 1,
                    is_delete: dbCmd.neq(true),
                    _id:id
                })            
                .lookup({
                    from: "uni-id-users",
                    let: {
                        uid: '$user_id'
                    },
                    pipeline: $.pipeline().match(dbCmd.expr($.eq(['$_id', '$$uid']))).project({
                        username: 1,
                        avatar: 1
                    }).done(),
                    as: "userInfo"
                })
                .project({
                    collect_count: 1,
                    comment_count: 1,
                    content: 1,
                    from: 1,
                    like_count: 1,
                    soup_type: 1,
                    view_count: 1,
                    userInfo: $.arrayElemAt(['$userInfo', 0])
                })
                .end()
    
            if (errCode != 0) return showToast("信息有误，请重新刷新", "none");
            console.log(data);
            item.value = data[0];
            
        }


</script>

<style lang="scss" scoped>
    .soupDetail {
        padding: 50rpx 30rpx;
        border-bottom: 12rpx solid #f7f7f7;
    }

    .comment {}

    .interactive {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        background: #fff;
        border-top: 1rpx solid #e4e4e4;
    }

    
</style>

2.如果出现头像报错，可以在组件中使用v-if就是说避免数据接收前进行了提前的渲染

<view class="userinfo" v-if="item.userInfo">
                <view class="avatar">
                    <image :src="item.userInfo.avatar||'../../static/images/defAvatar.png'" mode="aspectFill"></image>
                </view>
                <view class="name">{{item.userInfo.username}}</view>
                <view class="from" v-if="item.from">摘自：{{item.from}}</view>
            </view>