zyejMAll-mobile/pages/seeding/seeding.vue

<template>
	<s-layout title="社区种草" :bgStyle="{ color: '#fff' }">
		<view class="seeding">
			<view class="list" v-for="(item,index) in getData" :key="index">
				<view class="top">
					<view class="l">
						<image :src="item.picUrl" class="img"></image>
					</view>
					<view class="r">
						<view class="name">{{item.nickname}}</view>
						<view class="time">{{sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
					</view>
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="bottom">
					<view class="ck"><image src="https://zysc.fjptzykj.com:3000/shangcheng/fa998f749128876ceba66145c9c543f5650aaa16a71da8123c436ddb45071dc5.png" class="img"></image>{{item.lookCount}}</view>
					<view class="ck"><image src="https://zysc.fjptzykj.com:3000/shangcheng/6141e7edbc442871fdf4fb321cbb842b41509d0b527338b1b02b6e96ff976dcb.png" class="img"></image>{{item.likeCount}}</view>
					<view class="ck"><image src="https://zysc.fjptzykj.com:3000/shangcheng/88994efd6eec03acb0b09c38f43ad2b5f78744ec2a99f1ab2bbb6a70c20fd386.png" class="img"></image>{{item.commentCount}}</view>
				</view>
			</view>
			
			<view class="btn" v-if="isShow">
				<input class="content_cs" v-model="content"></input>
				
				<input class="pic content_cs" v-model="picUrl"/>
			</view>
			<view class="dd" @click="fabu" v-if="!isShow">
				我想发布动态
			</view>
			<view class="dd" @click="setlist" v-if="isShow">
				确定
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import request from '@/sheep/request';
	import sheep from '@/sheep';
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import {
		ref
	} from 'vue'
	
	const getData = ref([]);
	const content = ref('请输入要发送的内容');
	const picUrl = ref('请输入路径');
	const isShow = ref(false);
	
	// 查询项目列表
	function getlist() {
		request({
			url: `${baseUrl}${apiPath}/promotion/circle/page`,
			method: 'GET',
			params: {
				// id: this.brandId
			},
			custom: {
				showLoading: false,
			},
		}).then((res) => {
			getData.value = res.data.list;
		});
	}
	
	//发布动态按钮
	function fabu(){
		isShow.value = !isShow.value
	}
	
	// 添加数据
	function setlist() {
		console.log(content.value,"content.value")
		if(!content.value){
			sheep.$helper.toast('内容不能为空');
			
		}else if(!picUrl.value){
			sheep.$helper.toast('头像不能为空');
			
		}else{
			request({
				url: `${baseUrl}${apiPath}/promotion/circle/create`,
				method: 'post',
				data: {
					content: content.value,
					picUrl:picUrl.value
				},
				custom: {
					showLoading: false,
				},
			}).then((res) => {
				console.log(res,"是否成功")
				if(res.data){
					isShow.value = false;
					sheep.$helper.toast('提交成功')
					getlist();
				}else{
					sheep.$helper.toast('提交失败')
				}
				
			});
		}
		
	}
	
	getlist();
</script>

<style scoped lang="scss">
	.seeding{
		.list{
			background:white;
			margin:10px;
			margin-bottom:5px;
			padding:10px;
			.top{
				display:flex;
				align-items:center;
				
				.l{
					margin-right: 10px;
					.img{
						width:40px;
						height:40px;
					}
				}
				.r{
					.name{
						font-weight:700;
					}
					.time{
						font-size: 12px;
						color: rgba(163, 163, 163);
					}
				}
			}
			.content{
				margin-top: 10px;
			}
			.bottom{
				display:flex;
				justify-content: flex-end;
				.ck{
					display:flex;
					align-items: center;
					margin-right:20px;
					color: rgba(163, 163, 163);
					.img{
						width:20px;
						height:20px;
						margin-right:8px;
					}
				}
			}
		}
	}

	.btn{
		margin-top:50px;
		background:white;
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
		.content_cs{
			width:100%;
			text-align:center;
			padding: 10px;
			margin:20px 0;
			margin-bottom:10px;
			background-color: rgba(246, 246, 246);
		}
		.pic{
			width:100%;
			text-align:center;
		}
	}
	.dd{
		width:100%;
		text-align:center;
		background:red;
		color:white;
		width:50%;
		margin:0 auto;
		padding:10px;
		margin-bottom:30px;
		border-radius:15px;
	}
</style>