新增意见反馈、帮助中心

pages/me/feedback.vue

@@ -0,0 +1,124 @@
+<template>
+	<view class="container">
+		<view class="card">
+			<view class="title-wrap">
+				<view class="title">问题和意见</view>
+				<view class="right" @click="showSheet = true">快速键入</view>
+			</view>
+			<view class="ipt-wrap">
+				<up-textarea v-model="form.content" placeholder="请详细描述你的问题和意见..." count></up-textarea>
+			</view>
+		</view>
+		<view class="card">
+			<view class="title-wrap">
+				<view class="title">QQ/邮箱</view>
+			</view>
+			<view class="ipt-wrap">
+				<up-input v-model="form.contact" placeholder="方便我们联系你 " count></up-input>
+			</view>
+		</view>
+		<view class="btn">
+			<up-button color="#ff7581" :loading="loaing" loading-text="提交中..." @click="confirmHandle">提交</up-button>
+		</view>
+		<up-action-sheet
+			:actions="list"
+			:show="showSheet"
+			cancelText="取消"
+			closeOnClickAction
+			closeOnClickOverlay
+			@close="showSheet = false"
+			@select="selectSheet"
+		></up-action-sheet>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import { sendMessage } from '@/api/me/me.js';
+
+const list = ref([
+	{
+		name: '界面显示错乱'
+	},
+	{
+		name: '启动缓慢，卡出翔了'
+	},
+	{
+		name: 'UI无法直视，丑哭了'
+	},
+	{
+		name: '偶发性崩溃'
+	}
+]);
+const showSheet = ref(false);
+
+const loaing = ref(false);
+const form = reactive({
+	content: '',
+	contact: ''
+});
+
+function selectSheet(e) {
+	if (!form.content.length) {
+		form.content = e.name;
+	} else {
+		form.content += `、${e.name}`;
+	}
+}
+
+// 提交
+async function confirmHandle() {
+	try {
+		if (!form.content) {
+			uni.showToast({
+				title: '请输入内容',
+				icon: 'none'
+			});
+			return;
+		}
+		if (!form.contact) {
+			uni.showToast({
+				title: '请输入联系方式',
+				icon: 'none'
+			});
+			return;
+		}
+		loaing.value = true;
+		await sendMessage({
+			content: JSON.stringify({ score: 5, ...form }),
+			state: 2,
+			title: form.contact
+		});
+		uni.showToast({
+			title: '提交成功',
+			icon: 'none',
+			mask: true
+		});
+		setTimeout(() => {
+			uni.navigateBack();
+		}, 1000);
+	} catch (error) {
+		console.log(error);
+	}
+	loaing.value = false;
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+	padding: 0 20upx;
+	font-size: 28upx;
+}
+.card {
+	margin-bottom: 28upx;
+	.title-wrap {
+		padding: 28upx 0;
+		color: #999;
+		display: flex;
+		justify-content: space-between;
+	}
+}
+.btn {
+	padding: 28upx 0;
+}
+</style>