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>