yixiang/pageA/add-luntan.vue

<template>
	<view class="content">
		<u-navbar title="" placeholder :autoBack="false"  leftIconSize="0">
			<view class="u-nav-left" slot="left">
				<text @click="leftclick">取消</text>
			</view>
			<view class="u-nav-right" slot="right">
				<text @click="publish('normal')">发布</text>
			</view>
		</u-navbar>
		<view class="form">
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"
				maxSize="5242880" width="192rpx" height="192rpx">
				<image src="static/upload.png" mode="aspectFill" class="upload-icon"></image>
			</u-upload>
			<view class="text">
				<u--textarea v-model="content" placeholder="请输入内容" count maxlength="2000" height="500"></u--textarea>
			</view>
		</view>
		<view class="fixed hflex acenter" v-if="JSON.stringify(topic) == '{}'" @click="selecttopic">
			<image src="static/add.png" mode="aspectFill"></image>
			<text>添加话题</text>
		</view>
		<view class="fixed" v-else>
			<text>{{topic.title}}</text>
		</view>
		<u-popup :show="show_cancel" @close="toclose" mode="center" :round="10">
			<view class="popu vflex acenter jcenter">
				<text>是否保存草稿</text>
				<text>保存的草稿可在「个人中心」查看</text>
				<view class="btn1" @click="publish('draft')">保存草稿</view>
				<view class="btn2" @click="toback">不保存</view>
				<view class="btn2" @click="toclose">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				show_cancel: false,
				fileList1: [],
				content: '',
				topic: {},
				is_edit: 0,
				id: 0,
				data: {}
			}
		},
		onLoad(option) {
			if (option.topic) {
				this.topic = JSON.parse(option.topic)
			}
			if(option.data) {
				this.is_edit = option.edit
				this.data = JSON.parse(decodeURIComponent(option.data))
				this.content = this.data.content
				for(var i=0;i<this.data.images.length;i++) {
					let temp = {
						url : this.data.images[i]
					}
					this.fileList1.push(temp)
				}
				// this.topic ={
				// 	id: this.data.topic_id
				// }
			}
		},
		onShow() {
		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		},
		methods: {
			toback() {
				uni.navigateBack()
			},
			toclose() {
				this.show_cancel = false
			},
			selecttopic() {
				var _this = this
				uni.navigateTo({
					url: '/pageA/huati?type=select',
					events: {
						getitem(res) {
							_this.topic = res
						}
					}
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					if (lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + 'upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							user: 'test'
						},
						success: (res) => {
							var data = JSON.parse(res.data)
							setTimeout(() => {
								resolve(data.data.url)
							}, 1000)
						}
					});
				})
			},
			leftclick() {
				this.show_cancel = true
			},
			publish(type) {
				var _this = this
				let url = 'post'
				let method="post"
				var images = []
				if (this.fileList1.length > 0) {
					for (var i = 0; i < this.fileList1.length; i++) {
						images.push(this.fileList1[i].url)
					}
				}
				if(this.is_edit == 1) {
					this.url = 'post/' +this.data.id
					this.method = 'put'
				}
				$api.req({
					url: url,
					method: method,
					data: {
						content: _this.content,
						topic_id: _this.topic.id,
						status: type,
						images: images,
						id: this.is_edit == 1 ? this.data.id : '0'
					}
				}, function(res) {
					if (res.code == 10000) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							if(type == 'normal') {
								uni.switchTab({
									url: '/pages/index/index'
								})
							} else {
								uni.navigateTo({
									url: '/pageC/drafts'
								})
							}
						}, 800)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;

		.text {
			padding: 32rpx 0 0;

			.u-textarea {
				border: none;
				padding: 0;
			}
		}

		.popu {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 48rpx;
			box-sizing: border-box;

			text:first-child {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				padding: 0;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 18rpx 0;
			}

			.btn1 {
				width: 414rpx;
				height: 72rpx;
				background: #00B0B0;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
				margin: 28rpx;
			}

			.btn2 {
				width: 414rpx;
				height: 72rpx;
				background: #F2F2F2;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #444444;
				line-height: 72rpx;
				text-align: center;
				margin: 28rpx;
			}
		}

		.fixed {
			position: fixed;
			left: 28rpx;
			bottom: 80rpx;
			background: rgba(0, 176, 176, .1);
			border-radius: 40rpx;
			padding: 8rpx 16rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin: 0 16rpx 0 0;
			}

			text {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #00B0B0;
			}
		}

		.form {
			padding: 58rpx 28rpx 28rpx;
			border-bottom: 1px solid #EDEDED;

			.upload-icon {
				width: 64rpx;
				height: 64rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
				padding: 64rpx;
			}
		}

		.u-nav-right {
			text {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #57C3C2;
			}
		}
	}
</style>