purchase-let/pageQuota/feedBack/index.vue

<template>
	<view class="content">
		<!-- <view class="cell-li">
			<view class="cell-tit">
				反馈类型
			</view>
			<view class="" style="display: flex;margin: 20rpx 0;">
				<view class="types">
					注册
				</view>
				<view class="types">
					注册
				</view>
			</view>
			<view class="type-detail" @click="showTypeDetail=true">
				<text>未收到短信</text>
				<up-icon name="arrow-down"></up-icon>
			</view>
			<up-picker confirmColor='#20B128' @confirm='confirm' @cancel='showTypeDetail=false' :show="showTypeDetail"
				:columns="columns"></up-picker>
		</view> -->

		<view class="cell-li">
			<view class="cell-tit" style="margin-bottom: 20rpx;">
				反馈内容
			</view>
			<up-textarea v-model="formData.content" style="background-color: #F5F5F5;" placeholder="请输入内容"
				count></up-textarea>
		</view>

		<view class="cell-li">
			<view class="cell-tit" style="margin-bottom: 20rpx;">
				图片上传
			</view>
			<up-upload :fileList="formData.images" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="10"></up-upload>
		</view>

		<view class="cell-li">
			<view class="cell-tit" style="margin-bottom: 20rpx;">
				联系方式
			</view>
			<up-input placeholder="请填写您的姓名" style="background-color: #F5F5F5;margin-bottom: 20rpx;" border="surround"
				v-model="formData.name"></up-input>
			<up-input placeholder="请输入您的电话或者邮箱" style="background-color: #F5F5F5;" border="surround"
				v-model="formData.contact"></up-input>
		</view>
		<view class="btn">
			<up-button text="提交反馈" @click="submit" shape='circle' color="#20B128"></up-button>
			<view style="display: flex;align-items: center;margin-top: 20rpx;">
				<view style="margin: 0 auto; display: flex;" @click="navgo('/pageQuota/feedBack/list')">
					反馈记录 <up-icon name="arrow-right"></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		config
	} from "@/config/app.js"
	import {
		addFeedBackApi,
		userfeedbackListApi
	} from "@/api/feedBack.js"
	import useUserStore from '@/store/user';
	const userStore = useUserStore();


	const showTypeDetail = ref(false)
	const columns = reactive([
		['中国', '美国', '日本']
	]);
	const confirm = (e) => {
		console.log(e)
		showTypeDetail.value = false
	}
	const cont = ref('')

	const formData = reactive({
		content: "",
		images: [],
		name: "",
		contact: "",
		uid: userStore.userInfo.id
		// uid: 2

	})

	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}


	// 上传
	// const formData.images = ref([]);

	// 删除图片
	const deletePic = (event) => {
		formData.images.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = formData.images.length;
		lists.map((item) => {
			formData.images.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			console.log(result)
			// let item = formData.images[fileListLen];
			formData.images.splice(fileListLen, 1, {
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: config.HTTP_REQUEST_URL + '/api/upload/image', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: userStore.token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.uri);
					}, 1000);
				},
			});
		});
	};

	const submit = async () => {
		formData.images = formData.images.map(item => {
			return item.url
		})

		await addFeedBackApi({
			...formData
		})

		uni.showToast({
			title: '提交成功',
			duration: 1500
		})
		uni.$u.sleep(1500).then(res => {
			uni.navigateTo({
				url: '/pageQuota/feedBack/list'
			})
		})

	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		min-height: 100vh;
		background-color: white;

		.cell-li {
			margin-bottom: 50rpx;
		}

		.cell-tit {
			position: relative;

		}

		.cell-tit::after {
			content: '';
			width: 5rpx;
			height: 20rpx;
			border-radius: 20rpx;
			background-color: #20B128;
			position: absolute;
			left: -10rpx;
			top: 5rpx;

		}

		.types {
			width: 150rpx;
			height: 70rpx;
			background-color: #20B128;
			color: white;
			text-align: center;
			line-height: 70rpx;
			border-radius: 50rpx;
			margin-right: 20rpx;
		}

		.type-detail {
			background-color: #F5F5F5;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;


		}
	}
</style>