Web_TracerMethodology/pages/suggestionsFeedback/suggestionsFeedback.vue

<template>
	<view class="suggestions-feedback">
		<scroll-view scroll-y="true" class="scroll-Y" >
		<view class="score">
			<text class="row-name">* 评分</text>
			<view class="star-list">
				<view class="star" v-for="(item,index) in starList" @click="changeStat(index)" :key="index">
					<image v-if="score>index" class="activedStar" src="/static/activedStar.png" mode="scaleToFill">
					</image>
					<image v-if="index>=score" class="unActivedStar" src="/static/unActivedStar.png" mode="scaleToFill">
					</image>
				</view>
			</view>
		</view>
		<view class="fallback-type" @click="selectFallbackType">
			<text class="row-name">* 反馈类型</text>
			<view class="row-value">
				<picker @change="bindPickerChange" :value="index" :range="fallbackTypelist">
					<view class="uni-input">{{selectedFeedbackType}}</view>
				</picker>
			</view>
			<image class="icon-more" src="/static/images/icon-more.png"></image>
		</view>
		<view class="rich-text">
			<view class="richTextAreaTopbar">
				<text class="areaType">* 描述</text>
				<text class="placeholder" v-if="!ifTextAreaFocus">请输入</text>
			</view>
			
			<textarea class="text-area" @focus="ifTextAreaFocus=true" v-model="decDetail" />
			
		</view>
		<uploadImage @changeFilePaths="uploadImgFunc" :isMultiple="true" :filePaths="imgList"></uploadImage>
		<view class="btn-confirm" @click="commitFeedback">
			<text class="btn-text">确定</text>
		</view>
		</scroll-view>
		<tm-modal v-if="showModal">
			<view class="modalContent">
				<view class="inner">
					  <image class="normalTipIcon" src="/static/normalTipIcon.png" ></image>
					  <view class="tipText">
					  	我们已经收到您的意见和反馈，感谢您对康程智医的信任与支持，我们将尽快处理并与 您联系
					  </view>
					  <view class="comfirmBtn" @click="goback">确定</view>
				</view>
			</view>
		</tm-modal>
	</view>
</template>

<script>
	import uploadImage from '../../components/tm-upload-img/tm-upload-img.vue'
	export default {
		data() {
			return {
				starList: new Array(5),
				score: 0,
				position:'',
				phoneNum:'',
				decDetail:'',
				ifTextAreaFocus:false,
				fallbackTypelist: [],
				index: 0,
				selectedFeedbackType:'',
				imgList:[],
				showModal:false
			};
		},
		components:{
			uploadImage:uploadImage
		},
		onLoad(){
			// console.log(window.location.host);
		},
		mounted() {
			this.getAllFeedbackList();
			
		},
		methods: {
			changeStat(index) {
				this.score = index+1; //设置星级等级
			},
			selectFallbackType() {
				// uni.navigateTo({
				// 	url: '/pages/fallbackTypeSelect/fallbackTypeSelect'
				// });
			},
			getAllFeedbackList(){
				this.$store.dispatch({
					type: 'suggestionsFeedback/commActions',
					payload: {
						key: 'getFeedbackTypeList',
						data: {
							
						}
					}
				}).then((data) => {
					this.fallbackTypelist = data;
					this.selectedFeedbackType = data[0];
				});
			},
			
			/**
			 * @param {{
				 files
				 index,
			 }} fileInfo
			 files：文件集合
			 index:当前编辑的下标
			 */
			uploadImgFunc({files}){
				 if(this.imgList.length<3){
					 this.imgList = files;
				 }else{
					 uni.showModal({
					   title: '错误提示',
					   content: '最多上传3张',
					   showCancel: false
					 });
				 }
			},
			bindPickerChange: function(e) {
				this.selectedFeedbackType = this.fallbackTypelist[e.target.value];
			},
			commitFeedback(){
				const data = {
					"score":this.score,                 // 评价分数
					"feedbackType":this.selectedFeedbackType,   //评价类型
					"feedbackDesc":this.decDetail,//描述
					"imgUrl1": this.imgList[0]?this.imgList[0]:'',	  // 图片url1
					"imgUrl2": this.imgList[1]?this.imgList[1]:'',//
					"imgUrl3": this.imgList[2]?this.imgList[2]:'',//
					"position":this.position,			// 职位
					"phoneNum":this.phoneNum
				}
				// console.log({'表单数据':data});
				let tipAlertStr="";
				
				if(this.score==0)tipAlertStr="请完善评分！";
				if(this.selectedFeedbackType=='')tipAlertStr="请选择反馈类型！";
				if(this.decDetail.length==0)tipAlertStr="请填写反馈内容！";
				// if(this.position.length==0)tipAlertStr="请填职位信息！";
				// if(this.phoneNum.length==0)tipAlertStr="请填写手机号码！";
				
				if(tipAlertStr.length>0){
					uni.showModal({
					  title: '错误提示',
					  content: tipAlertStr,
					  showCancel: false
					});
					return;
				}
				
				this.$store.dispatch({
					type: 'suggestionsFeedback/commActions',
					payload: {
						key: 'feedback',
						data: {
							...data
						}
					}
				}).then((data) => {
					// console.log({'表单提交接口返回':data});
					if(data){
						  this.showModal = true;
					}
				});
			},
			goback(){
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>

<style lang="less">
	.suggestions-feedback {
		position: relative;
		padding-top: 15rpx;
		height: 100vh;
		background: #F5F6FA;
		.scroll-Y {
			padding-bottom:81.25rpx;
		}
        .modalContent {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100vw;
			height: 100vh;
			.inner {
				// position: relative;
				display: flex;
				flex-direction: column;
				// justify-content: center;
				align-items: center;
				width: 562.5rpx;
				height: 361.25rpx;
				margin: 0 auto;
				top:50%;
				padding-top: 50rpx;
				background: #FFFFFF;
				border-radius: 15rpx;
				.normalTipIcon {
					width: 80rpx;
					height:80rpx;
					margin-bottom: 28.75rpx;
				}
				.tipText {
					width: 427.5rpx;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
					line-height: 31.25rpx;
					margin-bottom: 39.37rpx;
				}
				.comfirmBtn {
					width: 100%;
					height: 75rpx;
					line-height: 75rpx;
					text-align: center;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
					background: #3377FF;
				}
			}
		}
		.score {
			display: flex;
			flex-direction: row;
			height: 112.5rpx;
			justify-content: flex-start;
			align-items: center;
			padding: 0 25rpx;
			background: #FFFFFF;

			.row-name {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #525866;
				margin-right: 164.37rpx;
			}

			.star-list {
				display: flex;
				flex-direction: row;

				.star {
					position: relative;
					width: 50rpx;
					height: 50rpx;
					margin-right: 25rpx;

					.activedStar,
					.unActivedStar {
						position: absolute;
						left: 0;
						top: 0;
						width: 50rpx;
						height: 50rpx;
					}

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.fallback-type {
			position: relative;
			display: flex;
			flex-direction: row;
			height: 87.5rpx;
			justify-content: flex-start;
			align-items: center;
			padding: 0 25rpx;
			margin-top: 15rpx;
			background: #FFFFFF;

			.row-name {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #525866;
				margin-right: 119.37rpx;
			}

			.row-value {
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #292C33;
			}

			.icon-more {
				position: absolute;
				width: 12.37rpx;
				height: 21.21rpx;
				right: 33.12rpx;
			}
		}
		.rich-text {
			margin-top: 15rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			background: #FFFFFF;
			.richTextAreaTopbar {
			    display: flex;
				flex-direction: row;
				height:87.5rpx;
				padding-top: 32.5rpx;
				.areaType {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #525866;
					margin-right: 164.37rpx;
				}
				.placeholder {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #B8BECC;
				}
			}
			
			.text-area {
				width:100%;
				height:262.5rpx;
				font-size: 22.5rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #525866;
				// border:1px solid red;
			}
			// .selectedImgContainer {
			// 	margin-bottom: 25rpx;
			// 	.selectedImg {
			// 		width: 125rpx;
			// 		height: 125rpx;
			// 		margin-right: 25rpx;
			// 		&:last-child {
			// 			margin-right: 0;
			// 		}
			// 	}
			// }
			// .uploadImgArea {
			// 	position: relative;
			// 	display: flex;
			// 	flex-direction: row;
			// 	justify-content: flex-start;
			// 	align-items: center;
			// 	height:87.5rpx;
			// 	border-top:1px solid #DADEE6;
			// 	.labelName {
			// 		position: absolute;
			// 		left:0;
			// 		font-size: 22.5rpx;
			// 		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			// 		font-weight: 400;
			// 		color: #525866;
			// 	}
			// 	.activeArea {
			// 		position: absolute;
			// 		left:225rpx;
			// 		font-size: 22.5rpx;
			// 		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			// 		font-weight: 400;
			// 		color: #B8BECC;
			// 	}
			// 	.imgIcon {
			// 		position: absolute;
			// 		left:663.75rpx;
			// 		width: 30rpx;
			// 		height: 30rpx;
			// 	}
			// }
		}
		.bottomForm {
			padding-left: 25rpx;
			margin-top: 15rpx;
			background-color: #FFFFFF;
			.jobTitle {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				height:87.5rpx;
				border-bottom: 1px solid #DADEE6;
				.label {
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #525866;
				}
				.inputArea {
					text-align: center;
					font-size: 22.5rpx;
					font-family: SourceHanSansCN-Normal, SourceHanSansCN;
					font-weight: 400;
					color: #292C33;
				}
				&:last-child {
					border:none;
				}
			}
		}
		.btn-confirm {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-size: 22.5rpx;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
			background: #3377FF;
		}
	}
</style>