# Conflicts: # pages.json # pages/homepages/user/bmi_information/bmi_information.vuemaster^2
Gary
2 weeks ago
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="myimgDV">
|
||||
<view v-if="imgPicList.length>0" class='receiveimage flex justify'>
|
||||
<block v-for="(item,ind) in imgPicList" :key="ind">
|
||||
<image class="imgitem" :style="{width:imgwidth,height:imgheight}" :class="imgboxtype==0?'onepic':imgboxtype==1?'doublepic':imgboxtype==2?'triplepic':''"
|
||||
:src="item" :mode="imgboxtype==0?'widthFix':imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click="previewpic(item,imgPicList)"></image>
|
||||
<!-- {width:(imgboxtype==0?'':imgwidth),height:(imgboxtype==0?'':imgwidth),padding:(imgboxtype==0?'':imgpad)} -->
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"community_image_box",
|
||||
data() {
|
||||
return {
|
||||
imgPicList: [],
|
||||
imgboxtype: 0,
|
||||
imgwidth: 0,
|
||||
imgpad: 0,
|
||||
imgheight: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
imgList: {
|
||||
type: Array
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
pad: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 图片预览
|
||||
previewpic(cind, clist) {
|
||||
console.log(cind, clist);
|
||||
uni.previewImage({
|
||||
urls: clist,
|
||||
current: cind,
|
||||
indicator: 'default'
|
||||
});
|
||||
},
|
||||
getheight() {
|
||||
console.log('imgboxtype:',this.imgboxtype)
|
||||
let that = this;
|
||||
const query = uni.createSelectorQuery().in(that)
|
||||
query.select('.imgitem').boundingClientRect()
|
||||
query.exec((res)=>{
|
||||
console.log(res[0].width)
|
||||
if (that.num == 1) {
|
||||
that.imgheight = '100%';
|
||||
} else if (that.num == 2 || that.num == 4) {
|
||||
that.imgheight = (res[0].width).toFixed(2) + 'px';
|
||||
} else {
|
||||
that.imgheight = (res[0].width).toFixed(2) + 'px';
|
||||
}
|
||||
})
|
||||
|
||||
// const query = uni.createSelectorQuery().in(this).select('.imgitem');
|
||||
// uni.createSelectorQuery().select('.imgitem').boundingClientRect(res => {
|
||||
// console.log('reac', res)
|
||||
// if (this.num == 1) {
|
||||
// this.imgheight = '100%';
|
||||
// } else if (this.num == 2 || this.num == 4) {
|
||||
// this.imgheight = (res.width).toFixed(2) + 'px';
|
||||
// } else {
|
||||
// this.imgheight = (res.width).toFixed(2) + 'px';
|
||||
// }
|
||||
// }).exec()
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// let this = this;
|
||||
this.imgPicList = this.imgList;
|
||||
console.log('num:'+this.num)
|
||||
if (this.num == 1) {
|
||||
this.imgboxtype = 0;
|
||||
this.imgwidth = 100 + '%';
|
||||
} else if (this.num == 2 || this.num == 4) {
|
||||
this.imgboxtype = 1;
|
||||
this.imgwidth = 49 + '%';
|
||||
} else if (this.num == 3 || this.num > 4) {
|
||||
this.imgboxtype = 2;
|
||||
this.imgwidth = 32 + '%';
|
||||
}
|
||||
this.$nextTick(function() {
|
||||
this.getheight();
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.myimgDV {
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.justify {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.receiveimage {
|
||||
margin-top: 28rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
.onepic {
|
||||
width: 100%;
|
||||
// height: 188rpx;
|
||||
// height: auto;
|
||||
margin-bottom: 28rpx;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.doublepic {
|
||||
// width: 340rpx;
|
||||
// height: 340rpx;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.triplepic {
|
||||
// width: 222rpx;
|
||||
// height: 222rpx;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,175 @@
|
||||
<template>
|
||||
<view>
|
||||
<tarbar_community></tarbar_community>
|
||||
<view class="community_box">
|
||||
<!-- 头部信息 -->
|
||||
<view class="top_box">
|
||||
<!-- 头像 -->
|
||||
<view class="dog_image_box">
|
||||
<image class="dog_image" src="../../../../static/homepages/community/community/pictures/dog_image.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="words_box">
|
||||
<!-- 标题 -->
|
||||
<view class="title_box">fit journey社区</view>
|
||||
<view class="tip_word_box">搜索他人的健康秘诀</view>
|
||||
</view>
|
||||
<view class="add_image_box">
|
||||
<image
|
||||
class="add_image"
|
||||
src="../../../../static/homepages/community/community/pictures/add_image.png"
|
||||
mode="widthFix"
|
||||
@click="toAddPostPage"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="line_box"></view>
|
||||
<!-- 帖子 -->
|
||||
<view class="post_body">
|
||||
<scroll-view class="post_scroll_box" scroll-y="true">
|
||||
<view class="post_box" v-for="(item, index) in posts" :key="index">
|
||||
<view class="post_top_box">
|
||||
<view class="post_avatar_box">
|
||||
<image class="post_avatar" :src=item.avatar mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="post_info">
|
||||
<view class="post_name">{{item.name}}</view>
|
||||
<view class="post_date">{{item.date}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="post_word_box">{{item.word}}</view>
|
||||
<view class="post_images_box">
|
||||
<community_image_box class="post_images" :imgList='item.imgList' :num='item.imgList.length'></community_image_box>
|
||||
</view>
|
||||
<view class="post_bottom_box">
|
||||
<view class="comments_box">
|
||||
<image class="chat_icon" src="../../../../static/homepages/community/community/pictures/chat_icon.png" mode="widthFix"></image>
|
||||
<view class="comments_num">{{item.comments_num}}</view>
|
||||
</view>
|
||||
<view class="like_box">
|
||||
<image
|
||||
class="love_icon"
|
||||
:src=getLikeImage(index)
|
||||
mode="widthFix"
|
||||
@click="likeClick(index)"
|
||||
></image>
|
||||
<view class="like_num">{{item.like_num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部导航栏 -->
|
||||
<tarbar_community class="tarbar_box"></tarbar_community>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Community from "@/components/swiper/community.vue";
|
||||
|
||||
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";
|
||||
export default {
|
||||
components: {Community},
|
||||
components: {Community, community_image_box},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
posts:[
|
||||
{
|
||||
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
name:'cat',
|
||||
date:'2024年9月31日',
|
||||
word:'今天去海边锻炼看见的，真是太美了啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊',
|
||||
imgList:[
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
],
|
||||
comments_num:1,
|
||||
like_num:100,
|
||||
islike:false,
|
||||
},
|
||||
{
|
||||
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
name:'puppy',
|
||||
date:'2024年11月13日',
|
||||
word:'今天去海边锻炼看见的，真是太美了',
|
||||
imgList:[
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
],
|
||||
comments_num:12,
|
||||
like_num:17,
|
||||
islike:false,
|
||||
},
|
||||
{
|
||||
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
name:'cat',
|
||||
date:'2024年10月13日',
|
||||
word:'今天去海边锻炼看见的',
|
||||
imgList:[
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
],
|
||||
comments_num:10,
|
||||
like_num:100,
|
||||
islike:false,
|
||||
},
|
||||
{
|
||||
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
name:'cat',
|
||||
date:'2024年1月13日',
|
||||
word:'今天去锻炼',
|
||||
imgList:[
|
||||
'../../../../static/homepages/community/community/pictures/dog_image.png',
|
||||
],
|
||||
comments_num:10,
|
||||
like_num:100,
|
||||
islike:false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
this.getAllPost()
|
||||
},
|
||||
computed:{
|
||||
likeImages() {
|
||||
return this.posts.map((post, index) => ({
|
||||
index,
|
||||
image: post.islike ? '../../../../static/homepages/community/community/pictures/red_love_image.png' : '../../../../static/homepages/community/community/pictures/love_image.png'
|
||||
}));
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getLikeImage(index) {
|
||||
//TODO:获取点赞的图片
|
||||
const item = this.likeImages.find(item => item.index === index);
|
||||
return item ? item.image : '';
|
||||
},
|
||||
getAllPost(){
|
||||
//TODO:获取所有的帖子
|
||||
const app = getApp()
|
||||
uni.request({
|
||||
url:app.globalData.fit_journey_community_address + '/post/getAll',
|
||||
method:"GET",
|
||||
success:(res) => {
|
||||
console.log('getAllPost')
|
||||
console.log(res)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('getAllPost fail')
|
||||
console.log(err.log)
|
||||
},
|
||||
})
|
||||
},
|
||||
likeClick(index){
|
||||
//TODO:点赞
|
||||
this.posts[index].islike = this.posts[index].islike ? false:true
|
||||
},
|
||||
toAddPostPage(){
|
||||
//TODO:转到发布帖子界面
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import "@/static/homepages/community/community/scss/community.scss"
|
||||
</style>
|
||||
|
||||
|
After Width: | Height: | Size: 438 B |
|
After Width: | Height: | Size: 620 B |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,196 @@
|
||||
.community_box{
|
||||
padding: 5vh 5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.top_box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10vh;
|
||||
// border-bottom: 1.48205px solid #000000;
|
||||
.dog_image_box{
|
||||
// height: 8vh;
|
||||
// width: 8vh;
|
||||
height: 110rpx;
|
||||
width: 110rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #D9D9D9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.dog_image{
|
||||
width: 85rpx;
|
||||
}
|
||||
}
|
||||
.words_box{
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.title_box{
|
||||
width: fit-content;
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 3vh;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: #000000;
|
||||
}
|
||||
.tip_word_box{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2vh;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: #CCB8B8;
|
||||
}
|
||||
}
|
||||
.add_image_box{
|
||||
// height: 8vh;
|
||||
// width: 8vh;
|
||||
height: 110rpx;
|
||||
width: 110rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #D9D9D9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.add_image{
|
||||
width: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 分割线
|
||||
.line_box{
|
||||
width: 70%;
|
||||
border-bottom: 1.48205px solid #000000;
|
||||
position: absolute;
|
||||
top: 17vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.post_body{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
top: 20vh;
|
||||
width: 90%;
|
||||
.post_scroll_box{
|
||||
height: 69vh;
|
||||
}
|
||||
.post_box{
|
||||
background-color: #E6EEFA;
|
||||
border-radius: 30px;
|
||||
padding: 2vh 2vh;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 5vh;
|
||||
width: 100%;
|
||||
// height: 55vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// height:900rpx;
|
||||
position: relative;
|
||||
.post_top_box{
|
||||
display: flex;
|
||||
.post_avatar_box{
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 2vh;
|
||||
.post_avatar{
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
.post_info{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 2vh;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.post_word_box{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-size: 2vh;
|
||||
color: #000000;
|
||||
margin-top: 2.5vh;
|
||||
}
|
||||
.post_images_box{
|
||||
width: 100%;
|
||||
height:70%;
|
||||
.post_images{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.post_bottom_box{
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
padding: 0% 6%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
/* Note: backdrop-filter has minimal browser support */
|
||||
border-radius: 0px 0px 30px 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.comments_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// width: 10%;
|
||||
.chat_icon{
|
||||
width: 3.2vh;
|
||||
}
|
||||
.comments_num{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2vh;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
.like_box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-left: 4%;
|
||||
// width: 10%;
|
||||
.love_icon{
|
||||
width: 3.2vh;
|
||||
}
|
||||
.like_num{
|
||||
font-family: 'Poppins';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-size: 2vh;
|
||||
text-align: center;
|
||||
letter-spacing: -0.604677px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 153 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 171 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
After Width: | Height: | Size: 159 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 6.9 KiB |
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 7.8 KiB |
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 208 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 187 KiB After Width: | Height: | Size: 187 KiB |
|
Before Width: | Height: | Size: 7.1 KiB After Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 65 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 496 KiB After Width: | Height: | Size: 496 KiB |
|
After Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 837 B After Width: | Height: | Size: 837 B |
@ -1,8 +1,8 @@
|
||||
{
|
||||
"hash": "0aaf698d",
|
||||
"configHash": "cc60d382",
|
||||
"lockfileHash": "22a0e42d",
|
||||
"browserHash": "89d9bfb2",
|
||||
"hash": "70943268",
|
||||
"configHash": "c265b382",
|
||||
"lockfileHash": "e3b0c442",
|
||||
"browserHash": "d782de90",
|
||||
"optimized": {},
|
||||
"chunks": {}
|
||||
}
|
||||