Web_TracerMethodology/pages/mission-action/components/write-back.vue

<template>
	<view class="write-back-page">
		<scroll-view class="scroll-y" scroll-y="true">
			<view class="item-box">
				<view class="label-view">
					<text>回复内容</text>
				</view>
				<textarea class="textarea" placeholder="请输入" placeholder-style="color: #B8BECC" :maxlength="500"
					:disabled="disabled" auto-height :value="disabled ? values['textarea'] : value"
					@input="changeValue" />
			</view>
			<tm-upload-img :filePaths="filePath" :isMultiple="true" :disabled="disabled"
				@changeFilePaths="changeFilePaths" />
		</scroll-view>
		<view class="fixed-buttom-btn" v-if="!disabled" @click="sure">
			<text class="btn-text">确定</text>
		</view>
		<view class="bottomBtn" @click="goToPrevPage" v-if="disabled">返回改善任务详情</view>
	</view>
</template>

<script>
	// 改善回复
	export default {
		props: {
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 详情回显的数据
			values: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 按钮信息 (包过请求的key)
			btnInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			// 任务详情
			missionDetails: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				value: '',
				filePath: []
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title: '原因'
			});
			if (this.disabled) {
				this.value = this.values['textarea'];
				this.filePath = this.values['filePath'] ? this.values['filePath'].split(',') : [];
			}
		},
		methods: {
			changeValue(e) {
				this.value = e.detail.value;
			},
			goToPrevPage(){
				window.history.back();
			},
			changeFilePaths(filePath) {
				this.filePath = filePath;
			},
			sure() {
				let requestParams = {};
				this.btnInfo.params.map(item => {
					if (item.valueKey) {
						requestParams[item.paramsKey] = (
							item.isOutvalueKey ?
							this.missionDetails :
							this.btnInfo
						)[item.valueKey];
					} else if (item.value) {
						requestParams[item.paramsKey] = item.value;
					} else {
						switch (item.paramsKey) {
							case 'imgPath': // 上传图片
								requestParams[item.paramsKey] = this.filePath.join(',');
								break;
							case 'textarea': // 回复内容
								requestParams[item.paramsKey] = this.value;
								break;
							default:
								requestParams[item.paramsKey] = '';
								break;
						}
					}
				});
				this.$emit('comRequest', requestParams);
			}
		}
	}
</script>

<style lang="less">
	.write-back-page {
		height: 100%;
		padding-top: 15rpx;

		.scroll-y {
			height: calc(100% - 102rpx);

			.item-box {
				display: flex;
				background-color: #FFFFFF;
				border-bottom: 0.62rpx solid #DADEE6;
				padding: 25rpx 0;
				padding-left: 25rpx;

				.label-view {
					width: 175rpx;
					line-height: 37.5rpx;


					>text {
						font-size: 22.5rpx;
						color: #666F80;
					}
				}

				.textarea {
					width: 100%;
					min-height: 587.5rpx;
					background-color: #fff;
					padding: 0 25rpx;
					line-height: 37.5rpx;
					font-size: 22.5rpx;
					color: #525866;
					box-sizing: border-box;
				}
			}
		}
		.bottomBtn {
			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>