mh/pages/me/shaitu.vue

<template>
	<view class="shaitu">
		<!-- <view class="shaitu_head flex">
			<image src="/static/image/publice/fanhui@2x.png" mode="" @click="retutnTop"></image>
			<text>提交晒图</text>
			<view></view>
		</view> -->
		<view class="shaitu_ul">
			<view class="shaitu_li">
				<view class="shaitu_name">描述</view>
				<view class="shaitu_ipt shaitu_ipts flex">
					<textarea placeholder="请输入描述" v-model="formData.box_zw" placeholder-style="color:#999999" maxlength="-1"></textarea>
				</view>
			</view>
			<view class="shaitu_li">
				<view class="shaitu_name">图片</view>
				<uni-file-picker
					v-model="imageValue"  
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg,jpeg"
					:limit="3"
					@success="success" 
					@fail="fail" 
					@select="selectImg"
				/>
			</view>
		</view>
		<button class="shaitu_btn" hover-class="hover-view" @click="submit">提交晒图</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					token: uni.getStorageSync('token'),
					box_zw: '',
					box_img:'',
				},
				imageValue: [],
				flag:true,//
				shaitu:'',
			};
		},
		methods:{
			retutnTop () {
				uni.navigateBack()
			},
			//选择图片
			selectImg(imgList){
				this.imageValue.push(...imgList.tempFiles)
			},
			async submit () {
				if (!this.flag) return
				if (!this.formData.box_zw) return uni.showToast({title:'请输入描述',icon:'none'})
				if (!this.imageValue || this.imageValue.length < 1) return uni.showToast({title:'请上传图片',icon:'none'})
				//上传图片
				let imgUrlList = []
				for(let i = 0 ; i < this.imageValue.length ; i++){
					const img = this.imageValue[i]
					const res = await this.$api.upload_image({path: img.path})
					imgUrlList.push(res.url)
				}
				this.formData.box_img = imgUrlList.join(",")
				this.flag = false
				uni.showLoading({title:'数据提交中'})
				this.$api.setShai(this.formData).then(res=>{
					uni.hideLoading()
					if (res.code === 1) {
						uni.showToast({title: '提交成功！'})
						setTimeout(()=>{
							this.retutnTop()
						}, 800)
					} else {
						this.flag = true
					}
				})
			}
		},
		onLoad () {
		},
		onShow() {
		}
	}
</script>

<style lang="scss">
	.shaitu_head {
		width: 100%;
		height: 88rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		image {
			width: 44rpx;
			height: 44rpx;
		}
		text {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
.shaitu_ul {
	padding: 20rpx 30rpx 0 30rpx;
	.shaitu_li {
		
		.shaitu_name {
			font-size: 30rpx;
			font-weight: bold;
			padding: 30rpx 0;
		}
		.shaitu_ipt {
			height: 80rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			input {
				font-size: 28rpx;
			}
			image {
				width: 22rpx;
				height: 22rpx;
			}
		}
		.shaitu_ipts {
			padding: 30rpx;
			height: 160rpx;
			textarea {
				font-size: 28rpx;
			}
		}
	}
}
.shaitu_btn {
	width: 690rpx;
	height: 98rpx;
	color: #333333;
	margin: 20rpx auto;
	
	font-size: 30rpx;
	font-weight: bold;
	background: #FFFFFF;
	box-shadow: 0rpx 0rpx 121rpx 0rpx rgba(63, 52, 2, 0.12);
	border-radius: 10rpx;
}
</style>