sulibao-mini/pages/mine/addFeed.vue

<template>
	<view class="index tn-safe-area-inset-bottom" style="background-color: #f7f7f7;min-height: 100vh;">

		<tn-nav-bar customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack()">
				<text class='icon tn-icon-left'></text>
			</view>

			<view slot="default" style="display: flex;">
				<view style="flex:1;">
					<text :style="{fontSize:(wxFontSize)+'px'}">问题反馈</text>
				</view>
				
				<view @click="showHis" style="margin-right:10px">
					<text class='tn-icon-time' :style="{fontSize:(wxFontSize-1)+'px'}"></text>
					<text :style="{fontSize:(wxFontSize)+'px'}">历史反馈</text>
				</view>

			</view>
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<view style="display: flex;line-height: 37px;padding: 16px;">
				<view style="margin-right: 8px;" :style="{fontSize:(wxFontSize-2)+'px'}">问题类型</view>
				<view style="flex:1"><uni-data-select :clear="false" v-model="typeValue" :localdata="range" @change="change"></uni-data-select></view>
				

			</view>

			 <view class="tn-margin  tn-padding" style="border-radius: 10rpx;background: #fff;margin-top: 0;">
			 	<textarea maxlength="500" v-model="contentValue" placeholder="请描述您遇到的问题..." :style="{fontSize:(wxFontSize-3)+'px',width:'100%'}"  :placeholder-style="styleString"></textarea>
			 </view>
				 
				  
				 
				 <view class="tn-margin-left tn-padding-top-xs">
				 	<uni-file-picker
				 		v-model="imgList" :limit="6" :auto-upload="false" @select="select" @success="success">
				 	</uni-file-picker>
			    </view>
			<view style="display: flex;line-height: 37px;padding: 16px;">
				<view style="margin-right: 8px;" :style="{fontSize:(wxFontSize-2)+'px'}">联系方式</view>
				<view style="flex:1">
					<uni-easyinput  :style="{fontSize:(wxFontSize-2)+'px'}" v-model="contactMethod" :clearable="false" placeholder="请填写您的手机号，以便我们联系您"></uni-easyinput>
				</view>
			</view>

		</view>
		
		<view class="tn-flex tn-footerfixed">
			 
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<button type="primary" style="background-color:#1d60b1;border-radius: 23px" @click="saveForm()">提交</button>
				 
			</view>
		</view>


	</view>
</template>

<script>
	import request from '../../utils/request'

	export default {
		data() {
			return {
				imgList:[],
				fileDetailList:[],
				showHistory: false,
				content: [],
				contentValue:'',
				contactMethod:uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).userName:'',
				typeValue:1,
				range: [{
						value: 1,
						text: "汇报系统故障"
					},
					{
						value: 2,
						text: "平台机制咨询"
					},
					{
						value: 3,
						text: "投诉"
					},
					{
						value: 5,
						text: "平台用户举报"
					},
					{
						value: 4,
						text: "其他"
					},
				],
				showEmpty: false,
				wxFontSize:17,
				styleString:'font-size:'+14+'px',
			}
		},
		filters: {
			formatDate(value) {
				if (!value) return '';
				const date = new Date(value);
				const today = new Date();
				const yesterday = new Date(today); // 昨天的日期
				yesterday.setDate(yesterday.getDate() - 1); // 将昨天的日期设置为前一天

				if (date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && date.getDate() ==
					today.getDate()) {
					return '今天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
						.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
				}
				if (date.getFullYear() == yesterday.getFullYear() && date.getMonth() == yesterday.getMonth() && date
					.getDate() == yesterday.getDate()) {
					return '昨天 ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
						.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
				}
				return date.toLocaleDateString() + ' ' + (date.getHours() > 9 ? '' : '0') + date.getHours() + ':' + (date
					.getMinutes() > 9 ? '' : '0') + date.getMinutes(); // 根据需要格式化日期
			},


		},
		created() {
			// uni.navigateTo({
			// 	url:'/pages/mine/addFeed'
			// })
		},
		methods: {
			 showHis(){
				uni.navigateTo({
					url:'/pages/mine/feedback'
				}) 
			 },
			 
			goBack() {
				uni.navigateBack();
			},
			select(e) {
				console.log('选择文件：', e)
				let tempFiles = e.tempFiles;
				for (let i in tempFiles) {
					this.upfile(tempFiles[i])
				}
			},
			upfile(file) {
				let that = this;
				uni.uploadFile({
					url: 'https://slb-m.lx-device.com/oss/upload/userFeedback', //仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					success: (uploadFileRes) => {
						let resultMap = JSON.parse(uploadFileRes.data).resultMap;
						that.fileDetailList.push({
							name: file.name,
							fileName: file.name, // 原始文件名
							ftpUrl: resultMap.uploadUrl, // 文件访问url
						})
					}
				});
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},
			saveForm(){
				if (!uni.getStorageSync('userNo')) {
					uni.showToast({
						title: '请登录'
					})
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return false;
				} 
				let that = this;
				let params = {
					
				};
				
				if(!this.contentValue){
					uni.showToast({
						title: '请输入您遇到的问题',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				
				
				if(!this.contactMethod){
					uni.showToast({
						title: '请输入您的联系方式',
						duration: 2000,
						icon:'none'
					});
					return false;
				}
				 
				uni.showToast({
					title: '提交中...',
					icon:'none'
				});
				
				params.slbFeedback = JSON.stringify({
					type:this.typeValue,
					content:this.contentValue,
					contactMethod:this.contactMethod,
					userNo:uni.getStorageSync('userNo'),
				});
				 
				
				params.fileDetailList = JSON.stringify(this.fileDetailList);
				request.post('/slbFeedback/add', params).then(res => {
					if(res.success){
						uni.showToast({
							title:'问题反馈已提交',
							icon:'none',
							success:()=>{
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pages/mine/feedback'
									});
								},2000)
								
							}
						})
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					console.warn(res);
				})
			}
		},
		onLoad() {
			const appBaseInfo = wx.getAppBaseInfo();
			this.wxFontSize = uni.getStorageSync('fontSize')||appBaseInfo.fontSizeSetting||17;
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		// background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		// color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}
</style>