|
|
<template>
|
|
|
<view class="add_post_box">
|
|
|
<!-- 头部盒子 -->
|
|
|
<view class="addpost_top_box">
|
|
|
<!-- 返回个人中心盒子 -->
|
|
|
<view class="return_box" @click="toCommunityPage">
|
|
|
<image
|
|
|
class="return_image"
|
|
|
src="../../../../static/homepages/community/add_post/pictures/left_arrow.png"
|
|
|
mode="widthFix"
|
|
|
></image>
|
|
|
</view>
|
|
|
<!-- 标题盒子 -->
|
|
|
<view class="title_box">发布我的帖子</view>
|
|
|
<button class="publish_btn">发表</button>
|
|
|
</view>
|
|
|
<!-- 提示盒子 -->
|
|
|
<view class="addpost_tip_box">分享自己的健康秘诀</view>
|
|
|
<!-- 发布盒子 -->
|
|
|
<view class="addpost_box">
|
|
|
<view class="post_box">
|
|
|
<view class="post_top_box">
|
|
|
<view class="post_avatar_box">
|
|
|
<image class="post_avatar" :src=user.avatar mode="widthFix"></image>
|
|
|
</view>
|
|
|
<view class="post_info">
|
|
|
<view class="post_name">{{user.name}}</view>
|
|
|
<view class="post_date">{{user.date}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<textarea class="post_word_box" v-model="user.word" placeholder="请输入你的文案(最多50个字)" cols="16" rows="2" auto-height maxlength="50"></textarea>
|
|
|
<!-- <view class="post_word_box">{{user.word}}</view> -->
|
|
|
<view class="post_images_box">
|
|
|
<view class="myimgDV">
|
|
|
<view class='receiveimage flex justify'>
|
|
|
<block v-for="(item,ind) in user.imgList" :key="ind">
|
|
|
<image class="imgitem doublepic" @tap="chooseTheImg(ind)" :style="{height:imgheight}" :src="item" mode="aspectFill"></image>
|
|
|
</block>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- <community_image_box class="post_images" :imgList='user.imgList' :num='user.imgList.length'></community_image_box> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import community_image_box from "../../../../components/community_image_box/community_image_box.vue";
|
|
|
|
|
|
export default{
|
|
|
data(){
|
|
|
return{
|
|
|
user:{
|
|
|
avatar:'../../../../static/homepages/community/community/pictures/dog_image.png',
|
|
|
name:'cat',
|
|
|
date:'2024年9月31日',
|
|
|
word:'',
|
|
|
imgList:[
|
|
|
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
|
|
|
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
|
|
|
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
|
|
|
'../../../../static/homepages/community/add_post/pictures/add_post_image.png',
|
|
|
],
|
|
|
},
|
|
|
imgheight:'',
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
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)
|
|
|
that.imgheight = (res[0].width).toFixed(2) + 'px';
|
|
|
})
|
|
|
},
|
|
|
chooseTheImg(index){
|
|
|
uni.chooseImage({
|
|
|
count: 1, //图片可选择数量
|
|
|
sizeType: ['original','compressed'], //original 原图，compressed 压缩图，默认二者都有
|
|
|
sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。
|
|
|
crop: { //是否进行裁剪，此配置一般用于头像上传时裁剪成正方形等
|
|
|
width: 100,
|
|
|
height: 100
|
|
|
},
|
|
|
success: res => {
|
|
|
console.log('res', res)
|
|
|
let imgFiles = res.tempFilePaths //图片的本地文件路径列表
|
|
|
// this.uploadTheImg(imgFiles)
|
|
|
console.log('imgFiles', imgFiles)
|
|
|
this.user.imgList[index] = imgFiles[0]
|
|
|
console.log(this.user.imgList[index])
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
toCommunityPage(){
|
|
|
uni.navigateTo({
|
|
|
url:'/pages/homepages/community/community/community'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(function() {
|
|
|
this.getheight();
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "@/static/homepages/community/add_post/scss/add_post.scss"
|
|
|
</style> |
