lehuo_ketang_test/pages/easy/publish.vue

<template>
	<view class="container" @touchstart="touchStart" @touchend="touchEnd">
		<form>
			<view class="uni-textarea">
				<textarea class="textarea" placeholder="这一刻的想法..." v-model="input_content" maxlength="-1"/>
			</view>
			<view class="uni-list list-pd">
				<view class="uni-list-cell cell-pd">
					<view class="uni-uploader">
						<view class="uni-uploader-head">
							<view class="uni-uploader-title"></view>
							<view class="uni-uploader-info">{{ imageList.length }}/9</view>
						</view>
						<view class="uni-uploader-body">
							<robby-image-upload v-model="imageList" :limit="9"></robby-image-upload>
						</view>
					</view>
				</view>
			</view>

			<view class="footer"><button type="default" class="feedback-submit" @click="publish">提交</button></view>
		</form>
	</view>
</template>
<script>
import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
import { upload,uploadByBase64 } from '@/common/upload.js';
import Request from '@/util/pocky-request/index';
export default {
	components: { robbyImageUpload },
	data() {
		return {
			imageList: [],
			input_content: '',
			sourceTypeIndex: 2,
			sizeTypeIndex: 2,
			countIndex: 8,
			count: [1, 2, 3, 4, 5, 6, 7, 8, 9],

			//侧滑返回start
			startX: 0, //点击屏幕起始位置
			movedX: 0, //横向移动的距离
			endX: 0 //接触屏幕后移开时的位置
			//end
		};
	},
	onLoad() {
		// #ifdef H5
		this.$wechat.hideMenu();
		// #endif
	},
	methods: {
		publish: async function() {
			if (!this.input_content) {
				uni.showModal({ content: '内容不能为空', showCancel: false });
				return;
			}
			var that = this;
			var uploadImages = [];
			if (this.imageList.length > 0) {
				// #ifdef MP-WEIXIN
				var uploadImages = await upload(1, this.imageList);
				// #endif
				// #ifdef H5
				var uploadImages = await uploadByBase64(1, this.imageList);
				// #endif
			}
			Request()
				.request({
					url: 'api/v1/Note/Create',
					method: 'POST',
					data: {
						noteText: that.input_content,
						imageUrlList: uploadImages
					}
				})
				.then(res => {
					uni.showToast({
						title:'发布成功',
						icon:"success",
						success() {
							setTimeout(()=>{
								uni.redirectTo({
									url:'easy'
								});
							},1500)
						}
					})
					
				});
		},

		close(e) {
			this.imageList.splice(e, 1);
		},
		chooseImage: async function() {
			if (this.imageList.length === 9) {
				let isContinue = await this.isFullImg();
				console.log('是否继续?', isContinue);
				if (!isContinue) {
					return;
				}
			}
			uni.chooseImage({
				sourceType: sourceType[this.sourceTypeIndex],
				sizeType: sizeType[this.sizeTypeIndex],
				count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
				success: res => {
					// #ifdef APP-PLUS
					//提交压缩,因为使用了H5+ Api,所以自定义压缩目前仅支持APP平台
					var compressd = cp_images => {
						this.imageList = this.imageList.concat(cp_images); //压缩后的图片路径
					};
					image.compress(res.tempFilePaths, compressd);
					// #endif

					// #ifndef APP-PLUS
					this.imageList = this.imageList.concat(res.tempFilePaths); //非APP平台不支持自定义压缩,暂时没有处理,可通过uni-app上传组件的sizeType属性压缩
					// #endif
				}
			});
		},
		isFullImg: function() {
			return new Promise(res => {
				uni.showModal({
					content: '已经有9张图片了,是否清空现有图片？',
					success: e => {
						if (e.confirm) {
							this.imageList = [];
							res(true);
						} else {
							res(false);
						}
					},
					fail: () => {
						res(false);
					}
				});
			});
		},
		previewImage: function(e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.imageList
			});
		},
		touchStart: function(e) {
			this.startX = e.mp.changedTouches[0].pageX;
		},

		touchEnd: function(e) {
			this.endX = e.mp.changedTouches[0].pageX;
			if (this.endX - this.startX > 200) {
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
}
.cell-pd {
	padding: 20rpx 30rpx;
}
.uni-textarea {
	width: auto;
	padding: 20rpx 25rpx;
	line-height: 1.6;
	height: 250rpx;
}
.textarea{
	height: 100%;
}
.uni-list::before {
	height: 0;
}
.uni-list:after {
	height: 0;
}
.list-pd {
	margin-top: 0;
}
.close-view {
	text-align: center;
	line-height: 30rpx;
	height: 35rpx;
	width: 35rpx;
	background: #ef5350;
	color: #ffffff;
	position: absolute;
	top: 1rpx;
	right: 1rpx;
	font-size: 35rpx;
	border-radius: 8rpx;
}
.container {
	width: 750rpx;
	height: 100%;
}
.uni-uploader {
	flex: 1;
	flex-direction: column;
}
.uni-uploader-head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.uni-uploader-info {
	color: #b2b2b2;
}
.uni-uploader-body {
	margin-top: 16upx;
}
.uni-uploader__files {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.uni-uploader__file {
	margin: 10upx;
	width: 210upx;
	height: 210upx;
}
.uni-uploader__img {
	display: block;
	width: 210upx;
	height: 210upx;
}
.uni-uploader__input-box {
	position: relative;
	margin: 10upx;
	width: 208upx;
	height: 208upx;
	border: 2upx solid #d9d9d9;
}
.uni-uploader__input-box:before,
.uni-uploader__input-box:after {
	content: ' ';
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #d9d9d9;
}
.uni-uploader__input-box:before {
	width: 4upx;
	height: 79upx;
}
.uni-uploader__input-box:after {
	width: 79upx;
	height: 4upx;
}
.uni-uploader__input-box:active {
	border-color: #999999;
}
.uni-uploader__input-box:active:before,
.uni-uploader__input-box:active:after {
	background-color: #999999;
}
.uni-uploader__input {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.feedback-submit {
	background: $uni-color-main-dark;
	border: none;
	border-radius: 0;
	color: #fff;
}
</style>