Web_TracerMethodology/pages/mission-action/components/disagree.vue

<template>
	<view class="disagree-page">
    <scroll-view class="scroll-y" scroll-y="true">
      <view class="textarea-box">
			  <view class="label-view">
				  <text>原因</text>
			  </view>
			  <textarea class="textarea"
			    placeholder="请输入"
			  	placeholder-style="color: #B8BECC"
			  	:maxlength="500"
          :disabled="disabled"
          auto-height
          :value="value"
          @input="changeValue"
			  />
		</view>
    </scroll-view>
		<view class="fixed-buttom-btn"
		  v-if="!disabled"
		  @click="sure">
			<text class="btn-text">确定</text>
		</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: ''
      }
    },
		created() {
			uni.setNavigationBarTitle({
				title: '原因'
      });
      if(this.disabled) {
        this.value = this.values['textarea'];
      }
    },
    methods: {
      changeValue(e) {
        this.value = e.detail.value;
      },
      sure() {
		if(this.value.length<2){
			//限制最小输入内容
			uni.showModal({
			    title: '提示',
				showCancel:false,
			    content: '请输入原因，至少2个字符以上！'
			});
			return;
		}
        const { params } = this.btnInfo;
        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 {
            requestParams[item.paramsKey] = this.value;
          }
        });
        this.$emit('comRequest', requestParams);
      }
    }
	}
</script>

<style lang="less">
	.disagree-page {
		height: 100%;

    .scroll-y {
			height: calc(100% - 87.5rpx);
      padding-top: 15rpx;

      .textarea-box {
		   	display: flex;
		   	width: 100%;
		   	background-color: #fff;
				padding: 25rpx 0;
		   	padding-left: 25rpx;

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

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

		   	.textarea {
          flex: 1;
          min-height: 768.75rpx;
		   		padding: 0 25rpx;
		   		line-height: 37.5rpx;
		   		font-size: 22.5rpx;
		   		color: #525866;
		   		box-sizing: border-box;
		   	}
		   }
		}
	}
</style>