renshou/office/diary/diary.vue

<template>
	<view>
		<view class="con">
			<view class="imgbox ddflex" @tap="uploadImgs">
				<view class="imgs" v-if="posterUrl">
					<image :src="posterUrl" class="img" mode="aspectFill"></image>
					<!-- <image src="../static/images/close.png" class="del" @tap="cleanimages(index)"></image> @tap="previewImg(zhiPicUrls, index)" -->
				</view>
				<view class="upload ddflex" v-else><image src="../static/images/upload.png"></image>请上传封面图</view>
			</view>
			<input v-model="title" placeholder="请输入话题标题" placeholder-class="placeholder" class="ipt" />
			<textarea v-model="desc" placeholder="请输入话题描述" placeholder-class="placeholder" class="textarea"></textarea>
			<!-- <editor id="editor" @input="descInput" class="ql-container" placeholder="请输入圈子描述" @ready="onEditorReady"></editor> -->
		</view>
		<view class="btn" @click="submit()">完成</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
export default {
	data() {
		return {
			title: '',
			picCount: 1,
			desc: '', //描述
			posterUrl: '',
		};
	},
	onLoad() {},
	methods: {
		onEditorReady() {},
		descInput(event) {
			this.desc = event.detail.html;
			// console.log('desc数据>>>>>>', this.desc);
			if (this.desc) {
				this.descLength = event.detail.text.length - 1;
			} else {
				this.descLength = 0;
			}
		},
		uploadImgs() {
			let that = this;
			uni.chooseImage({
				count: that.picCount,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: function({ tempFilePaths }) {
					uni.showLoading({
						title:'上传中'
					})
					var promise = Promise.all(
						tempFilePaths.map(tempFilePath => {
							return new Promise(function(resolve, reject) {
								req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
									that.posterUrl = res.src;
									resolve()
								});
							});
						})
					);
					promise
						.then(function(results) {
							uni.hideLoading()
							console.log(results);
						})
						.catch(function(err) {
							uni.hideLoading()
							console.log(err);
						});
				}
			});
		},
		//预览图片
		previewImg(picUrls, index) {
			//预览合同图片
			var src = picUrls[index];
			let imgs = picUrls;
			uni.previewImage({
				current: src, // 当前显示图片的http链接
				urls: imgs
			});
		},
		
		cleanimages(index) {
			// 删除图片
			let arr = this.zhiPicUrls;
			arr.splice(index, 1);
			this.zhiPicUrls = arr;
		},
		
		submit() {
			var dataPream = {};
			if (!this.title) {
				return req.msg('请输入话题标题');
			}
			dataPream.title = this.title;
			dataPream.subtitle = this.desc;
			dataPream.posterUrl = this.posterUrl;
			//图片
			req.postRequest('/api/v3/dialogue/save', dataPream, data => {
				req.msg('话题保存成功');
				setTimeout(() => {
					uni.redirectTo({
						url: '/topics/detail/detail?topicId=' + data.id
					});
				}, 1500);
			});
		}
	}
};
</script>

<style>
@import './diary.css';
</style>