mh/pages/me/shaitu.vue

<template>
	<view class="shaitu">
		<view v-if="canTi == 1">
			<!-- <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>
		<view class="jjqd" v-else>敬请期待</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			canTi: '',
			formData: {
				token: uni.getStorageSync('token'),
				box_zw: '',
				box_img: ''
			},
			imageValue: [],
			flag: true, //
			shaitu: ''
		};
	},
	methods: {
		retutnTop() {
			uni.navigateBack();
		},
		//选择图片
		selectImg(imgList) {
			this.imageValue.push(...imgList.tempFiles);
		},
		isti() {
			this.$api.checkSwitch().then(({ data }) => {
				this.canTi = data;
				if (data == 0) {
					this.tabs = ['提现', '团队', '推广'];
				}
			});
		},
		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() {
		this.isti();
	},
	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;
}
.jjqd {
	margin-top: 50rpx;
	text-align: center;
	color: #000000;
	font-size: 52rpx;
}
</style>