投诉建议

api/complaint/complaint.js

+import request from "../../utils/request";
+
+// 添加投诉建议信息
+export function addComplaint(data) {
+	return request({
+		url: '/system/ComplaintSuggestion/add',
+		method: 'post',
+		data,
+		headers: {
+		  'Content-Type': 'application/json;charset=UTF-8'
+		}
+	})
+}
\ No newline at end of file

api/system/dict/data.js

+import request from '@/utils/request'
+
+// 根据字典类型查询字典数据信息
+export function getDicts(dictType) {
+  return request({
+    url: '/system/dict/data/type/' + dictType,
+    method: 'get'
+  })
+}
\ No newline at end of file

my/complaint/index.vue

 <template>
 	<view class="complaint">
 		<view class="complaint-form">
-			<u--form labelWidth="160" :model="model1" ref="uForm" class="complaint-form">
-				<u-form-item label="投诉标题" prop="userInfo.name" borderBottom ref="item1" required="true" labelWidth="160"
+			<u--form labelWidth="160" :model="form" ref="uForm" class="complaint-form" :rules="rules">
+				<u-form-item label="投诉标题" prop="title" borderBottom  required="true" labelWidth="160"
 					labelPosition="top">
-					<u--input placeholder="请输入投诉标题" v-model="model1.title" border="none"></u--input>
+					<u--input placeholder="请输入投诉标题" :maxlength="30" v-model="form.title" border="none"></u--input>
 				</u-form-item>
-				<u-form-item label="投诉类型" prop="userInfo.sex" borderBottom required="true" labelWidth="160"
+				<u-form-item label="投诉类型" prop="type" borderBottom required="true" labelWidth="160"
 					labelPosition="top" @click="show = true; hideKeyboard()">
-					<u--input v-model="model1.type" placeholder="请选择投诉类型" border="none" readonly></u--input>
+					<u--input v-model="form.typeLabel" placeholder="请选择投诉类型" border="none" readonly></u--input>
 					<u-icon slot="right" name="arrow-right"></u-icon>
 				</u-form-item>
-				<u-form-item label="投诉内容" prop="userInfo.name" borderBottom ref="item1" required="true" labelWidth="160"
+				<u-form-item label="投诉内容" prop="details" borderBottom required="true" labelWidth="160"
 					labelPosition="top">
-					<u--input placeholder="请输入投诉内容" v-model="model1.message" border="none"></u--input>
+					<u--input placeholder="请输入投诉内容" :maxlength="30" v-model="form.details" border="none"></u--input>
 				</u-form-item>
-				<u-form-item label="联系方式" prop="userInfo.name" borderBottom ref="item1" labelWidth="160"
+				<u-form-item label="联系方式" prop="phone" borderBottom   required="true" labelWidth="160"
 					labelPosition="top">
-					<u--input placeholder="请输入联系方式" v-model="model1.phone" border="none"></u--input>
+					<u--input placeholder="请输入联系方式" :maxlength="11" v-model="form.phone" border="none"></u--input>
 				</u-form-item>
 			</u--form>
 		</view>
 		<view class="bottom-button">
-			<view class="button">提交</view>
+			<view class="button" @click="sumit">提交</view>
 		</view>
 		<u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
 	</view>
 </template>
 
 <script>
+ import { addComplaint } from "../../api/complaint/complaint";
+ import {getDicts} from "../../api/system/dict/data";
 	export default {
 		data() {
 			return {
 				showSex: false,
-				model1: {
+				form: {
 					title: '',
 					type: '',
-					message: '',
+					typeLabel:'',
+					details: '',
 					phone: ''
 				},
 				show: false,
+				// 存字典中对应字段
+				list:[],
 				columns: [
-					['中国', '美国', '日本']
+					[]
 				],
 				rules: {
-					'userInfo.name': {
+					'title': {
 						type: 'string',
 						required: true,
-						message: '请填写姓名',
+						message: '请输入投诉标题',
+						trigger: 'blur'
+					},
+					'type': {
+						type: 'string',
+						required: true,
+						message: '请选择投诉类型',
+						trigger: ['blur', 'change']
+					},
+					'details': {
+						type: 'string',
+						required: true,
+						message: '请输入投诉内容',
 						trigger: ['blur', 'change']
 					},
-					'userInfo.sex': {
+					'phone': {
 						type: 'string',
-						max: 1,
 						required: true,
-						message: '请选择男或女',
+						pattern: /^1[3-9]\d{9}$/,
+						message: '请输入正确联系方式',
 						trigger: ['blur', 'change']
 					},
 				},
@@ -63,6 +80,40 @@
 			};
 		},
 		methods: {
+			sumit(){
+			  console.log('form',this.form)
+			  this.$refs.uForm.validate((valid) => {
+           if(valid) {
+             addComplaint(this.form).then(res => {
+               console.log('res',res)
+               if(res.code === 200) {
+                 uni.showToast({
+                   title: '投诉建议成功',
+                   icon: 'success'
+                 })
+                 this.$tab.navigateTo('/pages/mine/index')
+               }
+             })
+           }
+        });
+			},
+			getAllDict(){
+				getDicts('complaintType').then(res => {
+					console.log('投诉类型',res)
+					// this.columns = res.data
+					this.list = res.data.map(item => {
+						return{
+							label:item.dictLabel,
+							value: item.dictValue
+						}
+					})
+				   this.columns[0] = []
+				   for(var i=0;i<this.list.length;i++){
+					   this.columns[0].push(this.list[i].label)
+				   }
+				   console.log('columns',this.columns)
+				})
+			},
 			hideKeyboard() {
 				uni.hideKeyboard()
 			},
@@ -71,22 +122,28 @@
 			},
 			confirm(res){
 				console.log("res",res)
-				this.model1.type=res.value
+				for(var i=0;i<this.list.length;i++){
+					if(this.list[i].label === res.value[0]){
+						this.form.type = this.list[i].value
+					}
+				}
+
+				this.form.typeLabel=res.value
 				this.show = false
 			},
-			sexSelect(e) {
-				this.model1.userInfo.sex = e.name
-				this.$refs.uForm.validateField('userInfo.sex')
-			},
 		},
 		onReady() {
 			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
-			// this.$refs.uForm.setRules(this.rules)
+			this.$refs.uForm.setRules(this.rules)
 		},
+		onLoad() {
+			this.getAllDict()
+		}
 	};
 </script>
 
 <style scoped lang="scss">
+	
 	.complaint {
 		background: #F5F5F5;
 		min-height: 100vh;
@@ -102,7 +159,7 @@
 			/deep/.u-form-item__body {
 				padding: 42rpx 0 !important;
 			}
-
+        
 			/deep/.u-form-item__body__left {
 				margin-bottom: 40rpx !important;
 			}

uni_modules/uview-ui/libs/config/props/picker.js

@@ -19,7 +19,7 @@ export default {
         cancelText: '取消',
         confirmText: '确定',
         cancelColor: '#909193',
-        confirmColor: '#3c9cff',
+        confirmColor: '#D84848',
         visibleItemCount: 5,
         keyName: 'text',
         closeOnClickOverlay: false,