zh_order_food_xcx/pages-my/feedback.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav title="问题反馈" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<scroll-view :scroll-y="true" class="scroll-view-css">
			<view class="content-box box-border-box">
				<view class="bgc-f p-24 b-rad-20 mb-20 box-sizing-border">
					<view class="fs-32 fw-600 fc-3 mb-20">
						请描述你的建议和想法，我们会不断优化改进
					</view>
					<view class="textarea-box">
						<textarea class="textarea-box" v-model="formData.content" placeholder-style="color:#ccc" maxlength='100' placeholder="还有更多建议和想法？快告诉我们吧~" />
					</view>
					<view class="up-img-box align-items-center flex-wrap-wrap">
						<view class="up-img" v-for="(itme, i) in formData.image" :key="i">
							<image class="img" :src="itme" mode="aspectFill"></image>
							<uni-icons @click="deleteImg(i)" class="delete-icons" color="#000" type="clear"
								size="20"></uni-icons>
						</view>
						<view @click="upImg()" v-if="formData.image.length < 3" class="add-img-box flex-direction flex-justify-center align-items-center bgc-F6F6F6 bgc-F6F6F6">
							<image class="add-img" src="@/static/img/my/sc.png" mode=""></image>
							<view class="fs-24 fc-9">
								上传照片
							</view>
							<view class="fs-24 fc-9">
								(最多3张)
							</view>
						</view>
					</view>
				</view>
				<view class="bgc-f b-rad-20 box-sizing-border phone-box">
					<view class="fs-32 fc-3 mb-20 fw-600">
						联系方式
					</view>
					<input v-model="formData.phone"  class="uni-input" placeholder="请输入手机号（选填）" type="number" />
				</view>
			</view>
		</scroll-view>
		<view class="bot-box bgc-f" @click="save()">
			<view class="bot-but fc-f fs-32 text-align-center b-rad-200 bgc-4FB3EF">
				提交反馈
			</view>
		</view>
	</view>
</template>

<script>
	import {upLoadingFileOss,} from "@/service/upLoadingFile.js"
	import {setFeedback} from '@/api/common.js'
	import tools from '@/service/tools';
	export default {
		components: {},
		data() {
			return {
				formData: {
					phone:'',
					content: '',
					image: [],
				},
				isAJAX:false,
			};
		},
		methods: {
			deleteImg(index) {
				this.formData.image.splice(index, 1)
			},
			
			upImg() {
				uni.chooseImage({
					count: 3,
					sizeType: ["compressed", "camera"],
					sourceType: ["album", "camera"],
					success: (res) => {
						res.tempFiles.forEach((file) => {
							this.uploadingFile(file);
						})
					}
				})
			},
			uploadingFile(file) {
				upLoadingFileOss(file.path).then((res) => {
					if (res) {
						this.formData.image.push(res)
					} else {
						tools.error('图片上传失败')
					}
				})
			},
			save(){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				setFeedback(this.formData).then((res)=>{
					if(res.code === 1){
						this.isAJAX = false;
						tools.success('提交成功');
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/me/index'
							})
						},1500)
						
					}else{
						this.isAJAX = false;
						tools.error(res.msg);
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content-box {
		padding: 26rpx 24rpx 0;
	}

	.textarea-box {
		width: 100%;
		height: 200rpx;
	}

	.up-img {
		width: 152rpx;
		height: 152rpx;
		margin: 0 10rpx 10rpx 0;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 4rpx;
		}

		.delete-icons {
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.add-img-box {
		width: 152rpx;
		height: 152rpx;
		border: 1px dashed #ccc;
		border-radius: 4rpx;
		margin: 0 0 10rpx 0;

		.add-img {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.phone-box {
		padding: 32rpx 24rpx;
	}

	.uni-input {
		// width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		background: #F6F6F6;
		border-radius: 12rpx;
		padding: 0 0 0 26rpx;
		font-size: 28rpx
	}

	.bot-box {
		width: 100%;
		padding: 12rpx 32rpx;
		box-sizing: border-box;

		.bot-but {
			width: 100%;
			height: 92rpx;
			line-height: 92rpx;
		}
	}
</style>