ruoyi-miniapp/sub/invite/enterpriseIntroduce.vue

<template>
  <view class="view">
    <view
      class="input-wrapper"
      style="
        background-color: #f9f9f9;
        border: 1px solid #f1f1f4;
        border-radius: 24rpx;
        padding: 16rpx;
        height: 400rpx;
        position: relative;
      "
      @tap="focusInput"
    >
      <uni-easyinput
        ref="easyInput"
        type="textarea"
        v-model="introduce"
        placeholder="请输入..."
        placeholderStyle="font-size:28rpx"
        :maxlength="500"
        :input-border="false"
        :adjust-position="true"
        :autoHeight="true"
        cursorSpacing="32"
        @blur="textAreaFocus = false"
        :focus="textAreaFocus"
        :styles="{
          backgroundColor: 'transparent',
          borderColor: 'none',
          height: '360rpx'
        }"
      ></uni-easyinput>
      <view class="word-count">{{ introduce.length }}/500</view>
    </view>
    <cs-bottom-wrapper>
      <view class="operation">
        <button class="btn green" @tap="submit">保存</button>
      </view>
    </cs-bottom-wrapper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      introduce: '',
      textAreaFocus: false
    }
  },
  onLoad(res) {
    this.introduce = res.introduce
  },
  methods: {
    // 聚焦输入框
    focusInput() {
      if (this.$refs.easyInput) {
        this.textAreaFocus = false // 先重置焦点状态
        this.$nextTick(() => {
          this.textAreaFocus = true // 在下一个时序重新设置焦点
        })
      } else {
        console.warn('输入框组件未注册')
      }
    },
    submit() {
      if (!this.introduce) {
        uni.showToast({
          icon: 'none',
          title: '请填写介绍'
        })
        return
      }
      uni.$emit('enterpriseIntroduce', { introduce: this.introduce })
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.view {
  background-color: #fff;
  padding: 12px;
  height: 100vh;
}
::v-deep .u-textarea {
  min-height: 400rpx;
  height: 400rpx;
  background-color: #f9f9f9 !important;
  border: 1px solid #f9f9f9;
  border-radius: 12px;
  margin: 0;
  .u-textarea__count {
    background-color: #f9f9f9 !important;
  }
}
.input-wrapper {
  min-height: 400rpx;
  height: auto !important;
  transition: height 0.3s ease;
}

.operation {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  .btn {
    flex: 1;
    border-radius: 8px;
    display: flex;
    padding: 12px 0;
    align-items: center;
    justify-content: center;
  }
  .green {
    background-color: $cs-color-main;
    color: #fff;
  }
}
.word-count {
  position: absolute;
  bottom: 0;
  right: 16rpx;
  color: #78829d;
  font-size: 24rpx;
  background-color: #f9f9f9;
  padding: 4rpx 8rpx;
  transform: translateY(100%);
  margin-bottom: 40rpx;
}
</style>