dev/dcp-app-gate/pages/service/others/myFeedback.vue

<template>
	<view class="feedback">
		<!-- 标题栏 -->
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" background-color="#3387ff" color="#ffffff"
			@clickLeft="navigateBack" :back-text-style="{color:'#fff'}" :back-text="i18n('Back')">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px;">{{i18n('Feedback')}}</text>
			<button slot="right" @click="submit" size="mini" class="sunmit-btn" type="submit"
				hover-class="button-hover">{{i18n('SubmitAndDownload')}}</button>
		</uni-nav-bar>
		<!-- <u-navbar back-icon-color="#fff" :back-text="i18n('common.Back')" :is-back="true" :background="{background:'#1777FE'}"
		 :back-text-style="{color:'#fff'}" :border-bottom="true" title-color="#fff" :title="title">
		</u-navbar>
		 -->
		<view class="uni-form">
			<u-form :model="form" ref="form" label-position="top">
				<!--建议类型-->
				<u-form-item required :label="i18n('SuggestedType')" prop="suggestion">
					<u-input v-model="form.suggestion" type="select" :border="border" @click="show = true"
						:placeholder="i18n('Typeofsuggestion')" />
					<u-select v-model="show" :confirm-text="i18n('submit')" :cancel-text="i18n('cancel')"
						mode=single-column :list="suggestype" @confirm="confirm"></u-select>
				</u-form-item>
				<!--内容反馈-->
				<u-form-item required :label="i18n('ContentFeedback')" prop="report">
					<u-input v-model="form.report" required type="textarea" :border="border" :maxlength="300"
						:autoHeight="true" :placeholder="i18n('PleaseInputFeedback')" />
				</u-form-item>
				<!--				上传图片-->
				<u-form-item label-position="top" :label="i18n('ToUploadPictures')" prop="photo" label-width="150">

					<myUpload width="160" :header="myHeaders" :action="uploadUrl" :source-type="sourceType"
						upload-text=" " height="160" max-count="5" ref="upImage" :before-upload="beforeUpload">
						<!--          <myUpload width="160" :header="myHeaders" :action="'https://m.geidcp.com/api/file/pub/' + '/img?module=feedback'" upload-text=" " height="160" max-count="5" ref="upImage" :before-upload="beforeUpload">-->
					</myUpload>
				</u-form-item>
				<u-form-item>
					<view>{{i18n('UploadUupMaxPhotos')}}</view>
				</u-form-item>
				<!--联系方式-->
				<u-form-item required :label="i18n('resourceContact')" prop="phone">
					<u-input v-model="form.phone" required type="text" :border="border"
						:placeholder="i18n('resourcePleaseEnterYourContactInformation')" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 		<view>
			<button class="subBtn" type="submit" plain="true" @click="submit">{{$t('common.submit')}}</button>
		</view> -->

	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import myUpload from './myUpload.vue'
	import {
		getToken
	} from '@/utils/auth'
	import {
		saveOrUpdate
	} from '@/api/feedback';
	import UUpload from "./myUpload";
	// import uniIcons from "uni-icons/fensauni-icons.vue";

	export default {
		name: 'Feedback',
		components: {
			UNavbar,
			myUpload
		},
		data() {
			return {
				show: false,
				photo: [],
				title: '',
				// action: 'https://localhost:8081/api/file/upload/img?module=feedback',
				// uploadUrl: 'https://m.geidcp.com/api/file/upload/img?module=feedback',
				suggestype: [],
				suggestionLable: '',
				value: '',
				type: 'select',
				form: {
					suggestion: '',
					report: '',
					picture: [],
					phone: '',
				},
				feedback: {
					suggestion: '',
					report: '',
					picture: [],
					phone: '',
					account_name: '',
					user_id: '',
				},
				border: true,
				filesArr: [],
				myHeaders: {
					Authorization: ('Bearer ' + getToken())
				},
				Authtoken: '',
				Storage_data: '',
				rules: {
					suggestion: [{
						required: true,
						message: this.i18n('Typeofsuggestion'),
						trigger: ['change', 'blur'],
					}, ],
					report: [{
							required: true,
							message: this.i18n('PleaseInputFeedback'),
						},
						{
							min: 15,
							message: this.i18n('PleaseInputFeedback'),
						},
					],
					phone: [{
							required: true,
							message: this.i18n('resourcePleaseEnterYourContactInformation')
						},
						{
							pattern: /^[0-9]*$/g,
							message: this.i18n('Entercorrectinformation')
						},
					]
				},
				sourceType: ['album'],


			}
		},
		onLoad() {
			this.title = this.$i18n.locale == 'zh' ? '用户反馈' : 'User feedback'
			this.backtext = this.$i18n.locale == 'zh' ? '返回' : 'Back';
			this.getDict()
			this.getToken()
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			async getDict() {
				const res = await this.$myRequest({
					data: {
						type: this.$i18n.locale == "zh" ? 'SUGGESTION_DICT' : 'SUGGESTION_DICT_EN',
					},
					url: '/sys/sysDicts'
				})
				this.suggestype = res.data[0]

			},
			//建议类型选择
			confirm(e) {
				console.log(e)
				this.form.suggestion = e[0].label
				this.suggestionLable = e[0].value

			},
			// 图片上传返回事件
			beforeUpload(index, list) {
				let one = list[index];
				console.log('index, list===============', index, list)
				setTimeout(() => {
					let tempPhoto = one.response.data
					this.form.picture.push(tempPhoto);
				}, 1000)

			},
			async getToken() {
				this.Storage_data = JSON.parse(uni.getStorageSync('user'));
				const token = await this.$myRequest({
					url: '/sys/token',
					data: {}
				});
				this.Authtoken = token;
				this.feedback.account_name = this.Storage_data.username;
				this.feedback.user_id = this.Storage_data.id;
			},
			// 表单提交
			submit() {

				this.$refs.form.validate(valid => {
					if (valid) {
						this.saveUpdata()
						// this.clearForm()

					} else {
						console.log('验证失败');
					}
				});

			},
			//提交方法
			async saveUpdata() {
				const that = this;
				this.feedback.suggestion = this.suggestionLable;
				this.feedback.report = this.form.report;
				this.feedback.picture = this.form.picture;
				this.feedback.phone = this.form.phone;

				const res = await this.$myRequest({
					url: '/op/feedbacks',
					method: 'post',
					header: {
						token: that.Authtoken.data,
					},
					data: {
						feedback: JSON.stringify(this.feedback),
					}
				})
				if (res.msg == '保存成功') {
					if (this.$i18n.locale == 'zh') {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: 'Feedback success',
							icon: 'none'
						})
					}
					this.clearForm()
				} else {
					if (this.$i18n.locale == 'zh') {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: 'Feedback faild',
							icon: 'none'
						})
					}
					this.clearForm()

				}

			},
			//清空对象集合
			clearForm() {
				this.form = [];
			},
			navigateBack() {
				uni.navigateBack()
			},

			i18n(data) {
				return this.$t('common.' + data);
			},

		}
	}
</script>

<style scoped>
	.subBtn {
		width: 60%;
		height: 64upx;
		border-radius: 40upx;
		line-height: 64upx;
		/* position: absolute;
		right: 15upx;
		top: 5px; */
		margin-top: 30upx;
		color: #ffffff;
		background-color: #146AE4;
		z-index: 999;
		border: none;
	}

	.uni-form {
		padding: 20upx 25upx;
	}

	/deep/ u-border-bottom {
		border: none;
	}

	.sunmit-btn {
		width: 57px;
		height: 30px;
		color: #FFFFFF;
		background-color: #2d79e5;
		padding: 0 10px;
		border-radius: 18px;
	}

	.button-hover[type=submit] {
		opacity: .75;
		transform: scale(0.95, 0.95);
	}
</style>