ec.uniapp-master/pages/discover/publish.vue

<template>
	<view>
		<lf-nav title="发表" :showIcon="true" :backInquiry="backInquiry"></lf-nav>
		<view class="content">
			<!-- 文本输入 -->
			<textarea class="textarea" placeholder="这一刻的想法…" v-model="content"></textarea>
			<!-- 上传图片 -->
			<view class="my-images">
				<view class="my-image-item" @click="uploadImage" v-if="image_list.length < 9">
					<text class="lf-iconfont icon-jia my-image-item-after"></text>
				</view>
				<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="lookImage(index)">
					<image :src="item" mode="aspectFill"></image>
					<view class="remove-image" @click.stop="removeInage(index)">
						<text class="lf-iconfont icon-shanchu"></text>
					</view>
				</view>
			</view>
			<!-- 发表按钮 -->
			<button class="my-btn" hover-class="lf-opacity" @click="send()">发表</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				image_list: [],
				image_count: 6,
				content: '',
				backInquiry: false,
				uploadImg: [],
				p_list: [],
				tempFilesList: []
			}
		},
		watch: {
			content(val){
				if(String(val).length){
					this.backInquiry = true;
				}else{
					this.backInquiry = false;
				}
			}
		},
		onLoad(){
			
		},
		methods: {
			send() {
				if(!this.content) {
					this.$msg('请输入文字内容!');
					return
				}
				if(this.tempFilesList.length == 0) {
					this.$msg('请上传图片!');
					return
				}
				
				let p_list = [];
				
				
				this.tempFilesList.forEach((item,index) => {
					p_list.push(this.uploadDiscover(item.path))
				})
				
				this.p_list = p_list;
				
				Promise.all(this.p_list).then(result => {
					this.$http
					    .post({
					        api: 'api/discover/create',
							data: {
								images: result,
								content: this.content
							},
							header: {
							   Authorization: this.$cookieStorage.get('user_token')
							},
					    })
					    .then(res => {
					        if (res.data.code == 200) {
					            if (res.data.status) {
									this.content = '';
									this.image_list = [];
					        		this.$msg('发布成功',{duration: 2500}).then(() => {
					        			this.$toBack();
					        		})
					            } else {
					                wx.showModal({
					                    content: res.data.message || '发布失败，请稍后尝试！',
					                    showCancel: false
					                });
					            }
					        } else {
					            wx.showModal({
					                content: res.data.message || '发布失败，请稍后尝试！',
					                showCancel: false
					            });
					        }
					        wx.hideLoading();
					    })
					    .catch(() => {
					        wx.hideLoading();
					        wx.showModal({
					            content: '请求失败',
					            showCancel: false
					        });
					    });
				})
			},
			uploadDiscover(img) {
				console.log('=========',img)
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						header: {
							Authorization: this.$cookieStorage.get('user_token')
						},
						url: this.$config.GLOBAL.baseUrl+'api/discover/upload_image',
						filePath: img,
						fileType: 'image',
						name: 'image',
						success: res => {
							var result = JSON.parse(res.data).data.url; 
							resolve(result);
						},
						fail: err => {
							console.log(err)
							reject(err)
						}
					})
				})
			},
			// 上传凭证图片
			uploadImage(){
				let current_count = this.image_count - this.image_list.length;
				if(current_count == 0) return;
				uni.chooseImage({
					count: current_count,
					complete: result => {
						if(result.errMsg == "chooseImage:fail cancel"){
							return; // 取消选择图片
						}
						let tempFiles = result.tempFiles;
						let image_list = [];
						let overstep = false;
						tempFiles.map(item => {
							// 上传的图片需小于10MB
							if(item.size < 1000000){
								image_list.push(item.path);
							}else{
								overstep = true;
							}
						})
						if(overstep){
							uni.showModal({
								title: '温馨提示',
								content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
								showCancel: false
							})
						}
						this.image_list.push(...image_list);
						this.tempFilesList.push(...tempFiles);
					}
				})
			},
			// 预览图片
			lookImage(current){
				if(this.image_list.length <= 0) return;
				this.$u.throttle(() => {
					uni.previewImage({
						urls: this.image_list,
						current: current
					});
				}, 500);
			},
			// 移除图片
			removeInage(current){
				uni.showModal({
					title: '提示',
					content: '即将取消上传这张图片，请确认？',
					success: e => {
						if (!e.confirm) return;
						this.image_list.splice(current, 1);
						this.uploadImg.splice(current, 1);
						this.tempFilesList.splice(current, 1);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.content{
		width: 750rpx;
		height: max-content;
		box-sizing: border-box;
		padding: 30rpx 32rpx;
		.textarea{
			width: 100%;
			height: 160rpx;
		}
	}
	
	.my-images{
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
		margin-bottom: 18rpx;
		.my-image-item{
			width: 220rpx;
			height: 220rpx;
			background: #DDDDDD;
			position: relative;
			margin-right: 12rpx;
			&:nth-child(3n){
				margin-right: 0rpx;
			}
			&:nth-child(n+4){
				margin-top: 12rpx;
			}
			image{
				width: 100%;
				height: 100%;
			}
			.remove-image{
				position: absolute;
				right: 0;
				top: 0;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #e74c3c;
				font-size: 40rpx;
				background-color: rgba(0,0,0,0.4);
			}
		}
		.my-image-item-after{
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 60rpx;
			color: #999999;
		}
	}
	
	.my-btn{
		margin-top: 30rpx;
		background-color: #15716E;
		color: #FFFFFF;
	}
	
	/deep/.textarea-placeholder{
		color: #999999;
		line-height: 1;
		vertical-align: middle;
	}
</style>