下图是我测试截图
/pages/find/add-moment/add-moment.vue
<template> <view class="px-3"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="true"> <free-main-button name="发表" slot="right" @click="submit"></free-main-button> </free-nav-bar> <!-- 文字 --> <textarea value="" placeholder="这一刻的想法" v-model="content" class="font-md mb-3" /> <!-- 图文 --> <free-upload-image :data="imageList" v-if="type==='image'" @update='uploadImage'></free-upload-image> <!-- 视频 --> <block v-if="type==='video'"> <view v-if="!video" class="flex align-center justify-center bg-light rounded" style="height: 350rpx;" hover-class="bg-hover-light" @click="uploadVideo"> <text class="text-muted" style="font-size:100rpx;">+</text> </view> <video v-if="type === 'video' && video && video.src" :src="video.src" :poster="video.poster" controls></video> <view v-if="type === 'video' && video && video.src" class="my-3 flex align-center justify-center bg-light" hover-class="bg-hover-light" style="height:100rpx;" @click="uploadVideo"> <text class="font-md text-muted">点击切换视频</text> </view> </block> <free-list-item title="所在位置" showRight :showLeftIcon="false"> <text slot="right" class="font-md">位置</text> </free-list-item> <free-list-item title="提醒谁看" showRight :showLeftIcon="false"> <text slot="right" class="font-md">位置</text> </free-list-item> <free-list-item title="谁可以看" showRight :showLeftIcon="false"> <text slot="right" class="font-md">位置</text> </free-list-item> </view> </template> <script> import freeNavBar from '@/components/free-ui/free-nav-bar.vue'; import freeMainButton from '@/components/free-ui/free-main-button.vue'; import freeListItem from "@/components/free-ui/free-list-item.vue"; import freeUploadImage from '@/components/free-ui/free-upload-image.vue'; import $H from '@/common/free-lib/request.js' export default { components:{ freeNavBar, freeMainButton, freeListItem, freeUploadImage }, data() { return { content:'', type:'image', imageList:[], video:false } }, onLoad(e) { this.type=e.type; }, methods: { // 发布 submit(){ $H.post('/moment/create',{ content:this.content, image:this.imageList.join(','), video:this.video ? JSON.stringify(this.video) : '', type:this.type, location:'', remind:'', see:'' }).then(res=>{ uni.showToast({ title:'发布成功', icon:'none' }); uni.navigateBack({ delta:1 }) }) }, // 上传图片 uploadImage(list){ this.imageList = list; }, // 上传视频 uploadVideo(){ uni.chooseVideo({ maxDuration:10, success:(e)=>{ // this.video = e.tempFilePath; $H.upload('/upload',{ filePath:e.tempFilePath },(progress)=>{ console.log('上传进度',progress); }).then(url=>{ this.video = { src:url, poster:url+'?x-oss-process=video/snapshot,t_10,m_fast,w_300,f_png' } }) } }) } } } </script> <style> </style>
/components/free-ui/free-moment-list.vue
<template> <view class="p-3 flex align-start border-bottom border-light-secondary"> <free-avater :src="item.avatar" size="80"></free-avater> <view class="pl-2 flex-1 flex flex-column"> <!-- 昵称 --> <text class="font-md text-hover-primary mb-1">{{item.user_name}}</text> <!-- 内容 --> <text v-if="item.content" class="font-md text-dark mb-1">{{item.content}}</text> <!-- 图片 --> <view v-if="item.image.length" class="py-2 flex flex-wrap"> <block v-for="(image,imageIndex) in item.image" :key="imageIndex"> <!-- 单图 --> <free-image v-if="item.image.length === 1" :src="image" imageClass="rounded bg-secondary" @click="preview(image)"></free-image> <!-- 多图 --> <image v-else :src="image" mode="aspectFill" style="height: 180rpx;width: 180rpx;" class="bg-secondary mr-2 mb-2 rounded" @click="preview(image)"></image> </block> </view> <!-- 视频 --> <view v-if="item.video" class="py-2"> <video :src="item.video.src" :poster="item.video.poster" controls style="height: 300rpx;width: 500rpx;" loop></video> </view> <!-- 时间|操作 --> <view class="flex align-center justify-between"> <text class="font-sm text-light-muted">{{item.created_at|formatTime}}</text> <view class="rounded p-1 bg-light" @click="$emit('action',{item,index})"> <text class="text-hover-primary iconfont font"></text> </view> </view> <!-- 点赞列表|评论列表 --> <view class="bg-light mt-2" v-if="item.likes.length || item.comments.length"> <!-- 点赞 --> <view v-if="item.likes.length" class="border-bottom flex align-start p-2"> <text class="flex-shrink iconfont font text-hover-primary"></text> <view class="flex flex-1 flex-wrap ml-1"> <text v-for="(s,si) in item.likes" :key="si" class="font text-hover-primary ml-1">{{s.name}}</text> </view> </view> <!-- 评论 --> <view v-if="item.comments.length" class="flex align-start p-2"> <text class="flex-shrink iconfont font-md text-hover-primary"></text> <view class="flex flex-column flex-1 ml-2"> <view class="flex" v-for="(c,ci) in item.comments" :key="ci" :index='index'> <text v-if="!c.reply" class="text-hover-primary font">{{c.user.name}}：</text> <view v-else class="flex align-center"> <text class="text-hover-primary font">{{c.user.name}} </text> <text class="text-muted font-sm">回复</text> <text class="text-hover-primary font">{{c.reply.name}}：</text> </view> <text class="font text-dark flex-1" @click="$emit('reply',{ item, index, reply:c.user })">{{c.content}}</text> </view> </view> </view> </view> </view> </view> </template> <script> import freeAvater from '@/components/free-ui/free-avater.vue'; import freeImage from '@/components/free-ui/free-image.vue'; import $T from '@/common/free-lib/time.js'; export default { components: { freeAvater, freeImage }, props: { item: Object, index:Number }, filters: { formatTime(value) { return $T.gettime(value); } }, methods: { // 查看大图 preview(src) { uni.previewImage({ current:src, urls:this.item.image }) } }, } </script> <style> </style>
感谢大家观看，我们下次见
