new-dianxiaorui-uniapp/pages/find/add.vue

<template>
	<view class="findAdd">
		<view class="findAdd_info">
			<view style="display: flex; align-items: center; border-bottom: 1rpx solid #eee; padding-bottom: 25rpx">
				<view style="margin-right: 25rpx; font-size: 30rpx">标题</view>
				<view style="flex: 1">
					<up-input height="200" border="none" v-model="formData.title" placeholder="请输入标题"></up-input>
				</view>
			</view>
			<up-textarea height="200" border="none" :maxlength="-1" v-model="formData.content" placeholder="请输入您想要发布的图文"></up-textarea>
			<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"></up-upload>
			<view style="font-size: 24rpx; font-weight: bold; margin: 25rpx 0">#添加话题</view>
			<view class="findAdd_info_list">
				<view
					v-for="(item, index) in formData.topic"
					:key="index"
					class="findAdd_info_list_view"
					:style="{
						backgroundColor: item.color
					}"
				>
					{{ item.name }}
				</view>

				<view class="findAdd_info_list_view" style="background-color: rgba(111, 162, 86, 0.1)" @click="addTopic">
					<up-icon name="plus" size="10"></up-icon>
				</view>
			</view>
		</view>

		<button class="confirm-button" @click="submit">发布</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { articleAdd, articleDetails, articleUpdate } from '@/api/api.js';
import { uploadFiles } from '@/utils/fun.js';
import { onLoad } from '@dcloudio/uni-app';
let formData = ref({
	title: '',
	content: '',
	topic: [],
	detailsImageUrl: '',
	category: 'DISCOVERY',
	isPublished: 1
});

const fileList1 = ref([]);

onLoad((options) => {
	if(options.id){
		getDetail(options.id);
	}
});

const getDetail = async (id) => {
	let _res = await articleDetails({ id });
	formData.value = _res;
	if(_res.detailsImageUrl){
		const imagesUrlArr = _res.detailsImageUrl.split(",")
		fileList1.value = imagesUrlArr.map(item => ({url:item}))
	}
};

const submit = () => {
	formData.value.detailsImageUrl = fileList1.value
		.map((item, index) => {
			return item.url;
		})
		.join(',');
	formData.value.coverImageUrl = fileList1.value[0].url;
	const apiFun = {
		add: articleAdd,
		edit: articleUpdate
	}
	apiFun[formData.value.id ? "edit" : "add"](formData.value).then((res) => {
		uni.showModal({
			title: '提示',
			content: '发布成功',
			showCancel: false,
			success: (res) => {
				if (res.confirm) {
					uni.navigateBack();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	});
};

const addTopic = () => {
	uni.showModal({
		title: '添加话题',
		editable: true,
		placeholderText: '请输入话题',
		success: function (res) {
			if (res.confirm) {
				formData.value.topic.push({
					color: getRandomLightColor(),
					name: res.content
				});
				console.log(res);
			} else if (res.cancel) {
			}
		}
	});
};

const lightColors = [
	'rgba(210, 180, 222, 0.1)',
	'rgba(173, 216, 230, 0.1)',
	'rgba(255, 182, 193, 0.1)',
	'rgba(152, 251, 152, 0.1)',
	'rgba(240, 230, 140, 0.1)',
	'rgba(216, 191, 216, 0.1)',
	'rgba(175, 238, 238, 0.1)',
	'rgba(255, 160, 122, 0.1)',
	'rgba(221, 160, 221, 0.1)',
	'rgba(144, 238, 144, 0.1)'
];

// 从数组中随机返回一个颜色的函数
function getRandomLightColor() {
	const randomIndex = Math.floor(Math.random() * lightColors.length);
	return lightColors[randomIndex];
}

// 删除图片
const deletePic = (event) => {
	fileList1.value.splice(event.index, 1);
};

// 新增图片
const afterRead = async (event) => {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file);
	let fileListLen = fileList1.value.length;
	lists.map((item) => {
		fileList1.value.push({
			...item,
			status: 'uploading',
			message: '上传中'
		});
	});
	for (let i = 0; i < lists.length; i++) {
		const result = await uploadFiles(lists[i].url);
		let item = fileList1.value[fileListLen];
		fileList1.value.splice(fileListLen, 1, {
			...item,
			status: 'success',
			message: '',
			url: result
		});
		fileListLen++;
	}
};
</script>

<style lang="scss">
.findAdd {
	padding: 25rpx;
	&_info {
		width: 100%;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 36rpx;

		&_list {
			display: flex;
			flex-wrap: wrap;
			&_view {
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				padding: 8rpx 30rpx;
				font-size: 24rpx;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				min-width: 132rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
.confirm-button {
	width: 488rpx;
	height: 86rpx;
	background: #6fa256;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-size: 26rpx;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 332rpx;
}
</style>