【二】鸡汤来咯开发学习笔记-30

1.从数据库中拿去鸡汤内容放到list中（我的鸡汤）
先创建方法getshoplist和变量数组soupdata来获取云数据库数据，保存到此变量中

import { ref } from 'vue';
const soupData =ref([]);
const db=uniCloud.database();
const getSoupList=async() =>{
    let{result:{errCode,data}} =await db.collection("soup-chicken").get();
    if(errCode != 0)return;
    soupData.value=data
}
getSoupList();

然后再在页面中绑定变量到组件上 //需要绑定key不然报错，key用云数据库每条数据的id就行，此处item已经就是soupdata中的每一项，然后绑定组件item属性就是这个item变量

<view class="item" v-for="item in soupData" :key="item._id">
            <soup-item :item="item"></soup-item>
        </view>

然后在组件页面soup-item中defineProps获取接收此item的绑定传值

defineProps({

item:{
    type:Object,
    default(){
        return{}
    }
}

})
放到soup-item组件里面的content的页面标签中//此处内容值就是item里面的content

<view class="content">
            {{item.content}}
        </view>

2.从云数据库中拿到时间戳放到每一条鸡汤上面
直接改掉soup-item中时间标签内容

<view class="time">{{item.publish_date}}</view>

安装uni-dateformat官方扩展组件（以前装过）
再用组件转换一下代替上面的内容就是把时间戳转换为时间

<uni-dateformat :date="item.publish_date"></uni-dateformat>

3。从云数据库中拿到鸡汤标识（毒鸡汤还是心灵鸡汤），然后传值到soup-tab-group组件里面
//修改以前的样式，毒鸡汤和心灵鸡汤的样式单独化,用defineProps来接收上面的soup-item的传值

soup-item的传值

<soup-tab-group :type="item.soup_type"></soup-tab-group>

soup-tab-group的源码

<template>

        <view class="soupTapGroup">
            <view class="tab djt" v-if="type===0">
                <view class="icon">
                    <image src="../../static/images/du-icon.png" mode="aspectFill"></image>
                </view>
                <view class="text">毒鸡汤</view>
            </view>
            <view class="tab xljt" v-if="type===1">
                <view class="icon">
                    <image src="../../static/images/xin-icon.png" mode="aspectFill"></image>
                </view>
                <view class="text">心灵鸡汤</view>
            </view>
        </view>
    
</template>

<script setup>
defineProps({
    type:{
        type:Number,
        default:0
    }
})
</script>

<style lang="scss" scoped>
    .soupTapGroup {



        .tab {

            height: 56rpx;
            width: fit-content;
            background: #aaa;
            display: flex;
            align-items: center;
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: normal;
            padding: 0 20rpx;
            border-radius: 56rpx;

            .icon {
                display: flex;
                height: 36rpx;
                width: 36rpx;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                image {
                    width: 100%;
                    height: 100%;
                }

            }

            .text {
                padding-left: 10rpx;
            }

        }

        .tab.xljt {
            background: #FFF3F7;

            .icon {
                background: linear-gradient(to right, #f83162, #ff7795);
            }
        }

        .tab.djt {
            background: #EDFDF0;

            .icon {
                background: linear-gradient(to right, #4f9153, #4bbb8b);
            }
        }
    }
</style>