对接问卷调查、投诉建议接口

property-uniapp-project/pageSubPack/service-list/addComplaints.vue

@@ -1,13 +1,11 @@
 <template>
-	<view class="contentStyle" style="">
+	<view class="contentStyle">
 		<view class="status-bar"></view>
 		<uni-nav-bar title="投诉建议" backgroundColor="transparent" :border="false" left-icon="left" @clickLeft="goBack">
 		</uni-nav-bar>
 
-
 		<!-- 表单区域 -->
-		<scroll-view class="page" scroll-y="true">
-
+		<scroll-view class="page" scroll-y>
 			<!-- 表单主体 -->
 			<view class="form-content">
 				<text class="form-tip">请填写反馈信息</text>
@@ -19,9 +17,10 @@
 						<text class="label-text">投诉类型</text>
 					</view>
 					<view class="row-right">
-						<text class="value-text"
-							:class="{placeholderStyle:selectedType}">{{ selectedType || '请选择投诉类型' }}</text>
-						<text class="arrow-icon">></text>
+						<text class="value-text" :class="{placeholderStyle:selectedType}">
+							{{ selectedType || '请选择投诉类型' }}
+						</text>
+						<uni-icons type="arrowright" size="16"></uni-icons>
 					</view>
 				</view>
 
@@ -32,9 +31,11 @@
 						<text class="label-text">投诉物业</text>
 					</view>
 					<view class="row-right">
-						<text class="value-text"
-							:class="{placeholderStyle:selectedProperty}">{{ selectedProperty || '请选择' }}</text>
-						<text class="arrow-icon">></text>
+						<text class="value-text" :class="{placeholderStyle:selectedProperty}">
+							{{ selectedProperty || '请选择' }}
+						</text>
+						<uni-icons type="arrowright" size="16"></uni-icons>
+						<!-- <text class="arrow-icon"> > </text> -->
 					</view>
 				</view>
 
@@ -45,8 +46,7 @@
 						<text class="label-text">问题描述</text>
 					</view>
 					<view class="row-right desc-right">
-						<textarea v-model="description" placeholder="请描述您的问题" class="desc-input" auto-height
-							maxlength="500"></textarea>
+						<textarea v-model="description" placeholder="请描述您的问题" class="desc-input" auto-height maxlength="500"></textarea>
 					</view>
 				</view>
 
@@ -93,15 +93,13 @@
 					</view>
 				</view>
 			</view>
-
 		</scroll-view>
+
 		<!-- 底部下一步按钮 -->
 		<view class="bottom-btn-wrap">
 			<button class="next-btn" @click="submitForm">提交</button>
-
 		</view>
 
-
 		<!-- ================== 自定义Popup弹窗（纯view实现） ================== -->
 		<!-- 蒙层 -->
 		<view class="mask" v-if="showTypePopup || showPropertyPopup" @click="closeAllPopup"></view>
@@ -113,195 +111,188 @@
 				<text class="title">选择投诉类型</text>
 				<text class="close" @click="showTypePopup = false">✕</text>
 			</view>
-
 			<view class="list">
-
-				<view :class="{ active: selectedType === item }" class="item" v-for="(item, index) in typeOptions"
-					:key="index" @click="selectType(item)">
-					{{ item }}
+				<view :class="{ active: selectedType === item }" class="item" v-for="(item, index) in typeOptions" :key="index" @click="selectType(item)">
+					{{ item.name }}
 				</view>
 			</view>
 		</view>
 
-
-
 		<!-- 投诉物业弹窗 -->
 		<view v-if="showPropertyPopup" class="mask" @click="showPropertyPopup=false"></view>
 		<view v-if="showPropertyPopup" class="popup">
 			<view class="popup-header">
-				<text class="title">选择投诉类型</text>
+				<text class="title">选择投诉物业</text>
 				<text class="close" @click="showPropertyPopup = false">✕</text>
 			</view>
-
 			<view class="list">
-				<view :class="{ active: selectedProperty === item }" class="item"
-					v-for="(item, index) in propertyOptions" :key="index" @click="selectProperty(item)">
+				<view :class="{ active: selectedProperty === item }" class="item" v-for="(item, index) in propertyOptions" :key="index" @click="selectProperty(item)">
 					{{ item }}
 				</view>
 			</view>
 		</view>
-
-
-
-
 	</view>
-
-
-
 </template>
 
-<script>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getComplainType, addComplain } from '../api/apiSub.js'
+import { uploadFile } from '../api/api.js'
 
-		},
+// 弹窗控制
+const showTypePopup = ref(false)
+const showPropertyPopup = ref(false)
 
-		computed: {
+// 下拉选项
+const typeOptions = ref([])
+const propertyOptions = ref(['XX物业A', 'XX物业B', 'XX物业C'])
 
+// 表单数据
+const selectedType = ref('')
+const selectedTypeId = ref('')
+const selectedProperty = ref('')
+const description = ref('')
+const name = ref('')
+const phone = ref('')
+const villageId = ref('')
 
+// 多图上传
+const tempFilePaths = ref([])
+const maxCount = ref(9)
 
+// 关闭所有弹窗
+const closeAllPopup = () => {
+	showTypePopup.value = false
+	showPropertyPopup.value = false
+}
 
-		},
-		created() {
-
-		},
-		onShow() {
-
-		},
-
-		mounted() {},
-
-		onReady() {
-			this.$nextTick(() => {
-
-			})
-		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				// 弹窗控制
-				showTypePopup: false,
-				showPropertyPopup: false,
-
-				// 下拉选项
-				typeOptions: ['物业服务', '社区服务', '其他'],
-				propertyOptions: ['XX物业A', 'XX物业B', 'XX物业C'], // 替换为实际数据
-
-				// 表单数据
-				selectedType: '',
-				selectedProperty: '',
-				description: '',
-				name: '',
-				phone: '',
-
-				// 多图上传
-				tempFilePaths: [],
-				maxCount: 9 // 最大上传9张
-
-
-
-			}
-		},
-
-
-		methods: {
-			// 返回上一页
-			navigateBack() {
-				uni.navigateBack();
-			},
-
-			// 关闭所有弹窗
-			closeAllPopup() {
-				this.showTypePopup = false;
-				this.showPropertyPopup = false;
-			},
-
-			// 选择投诉类型
-			selectType(item) {
-				this.selectedType = item;
-				this.showTypePopup = false;
-				// 切换类型时清空物业选择
-				if (item !== '物业服务') {
-					this.selectedProperty = '';
-				}
-			},
-
-			// 选择物业
-			selectProperty(item) {
-				this.selectedProperty = item;
-				this.showPropertyPopup = false;
-			},
-
-			// 多图选择
-			chooseImages() {
-				uni.chooseImage({
-					count: this.maxCount - this.tempFilePaths.length,
-					sizeType: ['compressed'],
-					sourceType: ['album', 'camera'],
-					success: (res) => {
-						this.tempFilePaths = [...this.tempFilePaths, ...res.tempFilePaths];
-					}
-				});
-			},
-
-			// 删除图片
-			deletePhoto(index) {
-				this.tempFilePaths.splice(index, 1);
-			},
-
-			// 表单提交
-			submitForm() {
-				// 基础校验
-				if (!this.selectedType) {
-					return uni.showToast({
-						title: '请选择投诉类型',
-						icon: 'none'
-					});
-				}
-				if (this.selectedType === '物业服务' && !this.selectedProperty) {
-					return uni.showToast({
-						title: '请选择物业',
-						icon: 'none'
-					});
-				}
-				if (!this.description.trim()) {
-					return uni.showToast({
-						title: '请输入问题描述',
-						icon: 'none'
-					});
-				}
-
-				uni.showLoading({
-					title: '提交中...',
-					mask: true
-				});
-				setTimeout(() => {
-					uni.showToast({
-						title: '提交成功',
-						icon: 'success'
-					});
-				}, 1000);
-				setTimeout(() => {
-					// 提交成功后跳转列表页
-					uni.hideLoading();
-					this.goBack();
-				}, 2500);
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/service-list/complaintsSuggestionsIndex',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
-
+onLoad(() => {
+	getSelectType()
+	villageId.value = uni.getStorageSync('currentVillageId') || ''
+})
 
+// 获取投诉类型
+const getSelectType = async () => {
+	try {
+		const res = await getComplainType()
+		if (res.code === 200) {
+			typeOptions.value = res.data || []
+		} else {
+			uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
+		}
+	} catch (err) {
+		uni.showToast({ title: '网络异常', icon: 'none' })
 	}
+}
+
+// 选择投诉类型
+const selectType = (item) => {
+	selectedType.value = item.name
+	selectedTypeId.value = item.id || ''
+	showTypePopup.value = false
+	// 切换类型时清空物业选择
+	if (item.name !== '物业服务') {
+		selectedProperty.value = ''
+	}
+}
+
+// 选择物业
+const selectProperty = (item) => {
+	selectedProperty.value = item
+	showPropertyPopup.value = false
+}
+
+// 多图选择
+const chooseImages = () => {
+	uni.chooseImage({
+		count: maxCount.value - tempFilePaths.value.length,
+		sizeType: ['compressed'],
+		sourceType: ['album', 'camera'],
+		success: (res) => {
+			tempFilePaths.value = [...tempFilePaths.value, ...res.tempFilePaths]
+		}
+	})
+}
+
+// 上传单张图片
+const uploadImageData = async (filePath) => {
+	try {
+			const res = await uploadFile(filePath)
+			return res.url || ''
+		} catch (err) {
+			console.error('单张图片上传失败', err)
+			return '' 
+		}
+}
+
+// 删除图片
+const deletePhoto = (index) => {
+	tempFilePaths.value.splice(index, 1)
+}
+
+// 表单提交
+const submitForm = async () => {
+	// 校验
+	if (!selectedTypeId.value) {
+		return uni.showToast({ title: '请选择投诉类型', icon: 'none' })
+	}
+	if (selectedType.value === '物业服务' && !selectedProperty.value) {
+		return uni.showToast({ title: '请选择物业', icon: 'none' })
+	}
+	if (!description.value.trim()) {
+		return uni.showToast({ title: '请输入问题描述', icon: 'none' })
+	}
+
+	uni.showLoading({ title: '提交中...', mask: true })
+
+	try {
+		// 上传图片
+		let imageUrls = []
+		for (let path of tempFilePaths.value) {
+			let url = await uploadImageData(path)
+			if (url) imageUrls.push(url)
+		}
+
+		// 构造提交参数
+		const params = {
+			typeId: selectedTypeId.value,
+			problemDes: description.value.trim(),
+			complaintName: name.value || '',
+			phone: phone.value || '',
+			villageId: villageId.value || '',
+			problemImageUrl: imageUrls.join(',')
+		}
+
+		// 调用提交接口
+		const res = await addComplain(params)
+
+		uni.hideLoading()
+		if (res.code === 200) {
+			uni.showToast({ title: '提交成功', icon: 'success' })
+			setTimeout(() => {
+				uni.redirectTo({
+					url: '/pageSubPack/service-list/complaintsSuggestionsIndex'
+				})
+			}, 1500)
+		} else {
+			uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
+		}
+	} catch (err) {
+		uni.hideLoading()
+		uni.showToast({
+			title: err.msg || '提交失败，请重试',
+			icon: 'none'
+		})
+	}
+}
+
+// 返回
+const goBack = () => {
+	uni.redirectTo({
+		url: '/pageSubPack/service-list/complaintsSuggestionsIndex'
+	})
+}
 </script>
 <style lang="scss">
 	page {
@@ -314,8 +305,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
-		/* background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%); */
 	}
 
 	.page {
@@ -397,7 +386,6 @@
 	/* 问题描述行 */
 	.desc-row {
 		align-items: flex-start;
-
 		padding-top: 32rpx;
 		padding-bottom: 32rpx;
 	}
@@ -486,7 +474,6 @@
 		line-height: 1;
 	}
 
-
 	/* 底部按钮 */
 	.bottom-btn-wrap {
 		padding: 20rpx 30rpx 40rpx;
@@ -532,7 +519,6 @@
 	.popup-header {
 		padding: 30rpx;
 		text-align: center;
-		/* border-bottom: 1rpx solid #f0f0f0; */
 		position: relative;
 	}