bigDataApp/pages/expertDiagnosis/postmessage.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="发帖"></uni-nav-bar>
			<view class="post">
				<view class="post_title">
					<input type="text" placeholder="请输入标题" v-model="title" class="require" />
				</view>
				<view class="post_contert">
					<textarea class="require" v-model="mainbody" placeholder="请输入正文" />
					<p class="imgvideo_img_title">添加图片</p>
					<view class="imgvideo_img">
						<view @click="gainimg" class="imgbg">
							<image :src="'http://www.hnyfwlw.com:8006/bigdata_app'+'/image/afterSale/eee1e84bb85f6f6ff5c5866a3a42779.png'" mode="" v-if="!uploadingTF"></image>
						</view>
						<view class="uploading" v-if="uploadingTF">
							<u-icon name="close" class="delete" @click="deletes"></u-icon>
							<image :src="path" mode="" class="uploading" @click="examine(path)"></image>
						</view>
						<view class="toload" v-if="toloadTF">
							<image src="../../static/images/cb/6286299.gif" mode="" class="toload"></image>
						</view>
					</view>
				</view>
				<button class="post_btn" @click="post">发布</button>
			</view>
		</view>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500"></kps-image-cutter>
	</view>
</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components:{
			kpsImageCutter
		},
		data() {
			return {
				title:'',  
				mainbody:'',
				uploadingTF:false,
				url:"",
				path:"",
				toloadTF:false
			}
		},
		methods: {
			async getPostmessage(data) { //发帖
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_new_idea',
					data:{
						title:data.title,
						content:data.content,
						img_urls:this.path
					}
				})
				console.log(res)
				if(res){
					uni.showToast({
						title: "发帖成功",
						icon: "none"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: './exchangeShare'
						})
					},1000)
				}
			},
			post(){
				console.log(this.title,this.mainbody)
				if(!this.title){
					uni.showToast({
						title: "请输入标题",
						icon: "none"
					})
					
					return 
				}
				
				if(this.mainbody==''){
					uni.showToast({
						title: "请输入正文",
						icon: "none"
					})
					
					return 
				}
				
				if(this.title!=''&&this.mainbody!=''){
					let obj ={}
					obj.title=this.title
					obj.content=this.mainbody
					this.getPostmessage(obj)
				}
			},
			clickLeft(){
				uni.navigateTo({
					url: './exchangeShare'
				})
			},
			gainimg(){//添加图片
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: (res)=> {
						console.log(res)
						this.url = res.tempFilePaths[0]
					}
				});
			},
			onok(ev){
				console.log(ev)
				this.toloadTF = true
				uni.uploadFile({
				    url: 'http://114.115.147.140:8002/api/api_gateway?method=pest.pests.pests_img', //仅为示例，非真实的接口地址
					filePath: ev.path,
				    name: 'img_file',
				    formData: {
				        'user': 'test'
				    },
				    success: (uploadFileRes) => {
						console.log(ev.path)
						console.log(JSON.parse(uploadFileRes.data).data.src)
						this.path = JSON.parse(uploadFileRes.data).data.src
						this.uploadingTF=true
						this.toloadTF = false
				    }
				});
				this.url = ''
			},
			oncancle(){
				
			},
			examine(url) {
				var imgarr =[]
				imgarr.push(url)
				console.log(imgarr)
				uni.previewImage({
					urls: imgarr
				});
			},
			deletes(){
				this.path = ""
				this.uploadingTF=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.require {
		position: relative;
		padding-left: 10rpx;
		
		&::before {
			content: '*';
			line-height: 1;
			color: #f00;
			position:absolute;
			left: 0rpx;
			top: 10rpx;
		}
	}
</style>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.post {
		width: 100%;
		padding-top: 16rpx;
		.post_title {
			padding: 40rpx 20rpx;
			background-color: white;
			width: 100%;
			box-sizing: border-box;
			input {
				width: 90%;
				margin: 0 auto;
			}
		}

		.post_contert {
			margin-top: 16rpx;
			padding: 40rpx 20rpx;
			background-color: white;
			width: 100%;
			height: 700rpx;
			box-sizing: border-box;
			textarea{
				width: 90%;
				margin: 0 auto;
			}
			.imgvideo_img_title{
				width: 90%;
				margin: 20rpx auto;
				font-size: 32rpx;
				color: grey;
			}
			.imgvideo_img{
				width: 250rpx;
				height: 250rpx;
				border: 2rpx solid #57C878;
				margin-left: 40rpx;
				position: relative;
				top: 0;
				left: 0;
				.imgbg{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.toload{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
				}
				.uploading{
					width: 100%;
					height: 100%;
					.delete{
						width: 36rpx;
						height: 36rpx;
						background-color: #FF0000;
						border-radius: 50%;
						padding: 2px 2px;
						box-sizing: border-box;
						position: absolute;
						top: -18rpx;
						right: -18rpx;
						color: #FFFFFF;
						z-index: 10;
					}
					.uploading{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
					}
				}
			}
		}
		.post_btn{
			width: 90%;
			margin: 40rpx auto;
			background-color: #57C878;
			color: white;
			font-size: 32rpx;
		}
	}
</style>