yanzong_qianduan/pages/squareDynamic/publish.vue

<template>
	<view class="container">
		<template v-if="!isPublish">
			<image :src="$picUrl+'/static/publish-banner.png'" mode="aspectFill" class="banner"></image>
			<view class="publish-box">
				<view class="upload-images">
					<view v-for="(item, index) in imageList" :key="index" class="image-box">
						<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
						<image src="/static/delete.png" mode="aspectFill" class="delete" @click="deleteImage(index)"></image>
					</view>
					<view class="upload-btn" v-if="imageList.length < 5" @click="addImage">
						<image src="/static/add.png" mode="aspectFill"></image>
						<text class="tip">添加照片</text>
						<text class="tip sub-tip">最多5张</text>
					</view>
				</view>
				<textarea placeholder="请输入您想发布的内容哦~" placeholder-class="textarea-placeholer" id="" cols="30" rows="10" v-model="content" maxlength="3000"></textarea>
				<view class="text-num">已写<text>{{ content.length }}</text>/3000个字</view>
			</view>
			<view class="cate">
				<view class="label">文章类别:</view>
				<view class="content">
					<picker :range="cateList" mode="selector" :style="{ color: !cateList[cateIndex] ? '#999999' : ''}" @change="changePicker">{{ cateList[cateIndex] || '请选择' }}</picker>
					<image src="/static/arrow-right.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="submit" @click="submit">发布</view>
		</template>
		<template v-else>
			<view class="success">
				<image :src="$picUrl+ '/static/success.png'" mode="aspectFill"></image>
				<view class="success-tip">发布成功</view>
				<text>您的作品已经发布成功，</text>
				<text>快去看看吧~</text>
			</view>
			<view class="submit back" @click="back">完成</view>
		</template>
	</view>
</template>

<script>
	
import * as UploadApi from '@/api/upload'
	export default {
		data() {
			return {
				imageList: [],
				uploadImages: [],
				content: '',
				cateList: ['晒单', '日常', '文章'],
				cateIndex: -1,
				isPublish: false,
			};
		},
		methods: {
			addImage() {
				const that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success({
						tempFiles
					}) {
						console.log(that.imageList, tempFiles);
						that.imageList.push(tempFiles[0].path)
						that.upload(tempFiles[0])
					}
				});
			},
			async upload(path) {
				const that = this;
				// 批量上传
				return new Promise((resolve, reject) => {
					if (path) {
						UploadApi.image([path])
							.then(fileIds => {
								console.log(fileIds);
								that.uploadImages.push(fileIds);
								resolve(fileIds)
							})
							.catch(reject)
					} else {
						resolve()
					}
				})
			},
			deleteImage(index) {
				this.imageList.splice(index, 1);
				this.uploadImages.splice(index, 1);
			},
			previewImage(item) {
				uni.previewImage({
					urls:this.imageList,
				});
			},
			changePicker(e) {
				console.log(e);
				this.cateIndex = e.detail.value;
			},
			submit() {
				if (this.uploadImages.length === 0 && !this.content) {
					uni.showToast({
						icon: 'error',
						title: '请填写动态内容',
					});
					return false;
				}
				if (this.cateIndex < 0) {
					uni.showToast({
						icon: 'error',
						title: '请选择文章类别',
					});
					return false;
				}
			},
			back() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 24rpx 50rpx;
		background: #F7F8FA;
		position: relative;
		min-height: calc(100vh - 88rpx);
		.banner {
			width: 702rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
		.publish-box {
			padding: 30rpx 30rpx 60rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
			.upload-images {
				display: flex;
				flex-wrap: wrap;
				>view {
					margin: 0 12rpx 12rpx 0;
					border-radius: 5rpx;
					&:nth-child(3n) {
						margin-right: 0;
					}
				}
				.image-box {
					position: relative;
					image {
						width: 206rpx;
						height: 206rpx;
					}
					.delete {
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				.upload-btn {
					width: 206rpx;
					height: 206rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #F8F8F8;
					>image {
						width: 46rpx;
						height: 37rpx;
					}
					.tip {
						margin: 19rpx 0 13rpx;
						color: #333333;
						font-size: 24rpx;
						line-height: 24rpx;
						&.sub-tip {
							color: #999999;
							font-size: 22rpx;
							line-height: 22rpx;
							margin: 0;
						}
					}
				}
			}
			textarea {
				font-size: 30rpx;
				color: #333;
			}
			.textarea-placeholer {
				color: #CCCCCC;
				font-size: 30rpx;
			}
			.text-num {
				position: absolute;
				right: 31rpx;
				bottom: 29rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				color: #999;
				text {
					color: #F34A40;
				}
			}
		}
		.cate {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			align-items: center;
			padding: 0 30rpx;
			font-size: 30rpx;
			color: #333333;
			image {
				width: 11rpx;
				height: 20rpx;
				margin-left: 25rpx;
			}
			.content {
				display: flex;
				align-items: center;
			}
		}
		.submit {
			margin-top: 222rpx;
			height: 98rpx;
			background: #F34A40;
			border-radius: 49rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 98rpx;
			text-align: center;
		}
		.success {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 140rpx;
			>image {
				width: 189rpx;
				height: 166rpx;
			}
			.success-tip {
				margin: 34rpx 0 28rpx;
				color: #222222;
				font-size: 36rpx;
				line-height: 36rpx;
			}
			uni-text {
				color: #666666;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
		.back {
			position: fixed;
			left: 24rpx;
			width: 702rpx;
			bottom: 43rpx;
		}
	}
</style>