lcoco/pages/my/edit/about-me.vue

<template>
  <view class="about-box">
    <en-nav title="关于我" :title-color="'#333'" :right-show="true" :right-type="2" >
      <template v-slot:right>
        <text class="nav-right sys-weight-600 sys-color-white"  @click="setNextStep">保存</text>
      </template>
    </en-nav>
    <view class="about-data">
      <view>
        <textarea class="about-text sys-color-black" @blur="bindTextAreaBlur" :maxlength="100" placeholder="来写个性宣言，完成你的社交第一步"  />
      </view>
      <view class="about-operation">
        <view class="operation-item">
          <text class="iconfont"> &#xe63d;</text>
<!--          <text class="iconfont"> &#xe63e;</text>-->
          <text>更新生成动态</text>
        </view>
        <view class="operation-item">
          <text>0/100</text>
        </view>
      </view>
      <view class="describe">
        <view class="describe-title  sys-weight-600 sys-color-gray-9">怎样更好的介绍自己呢?</view>
        <view class="describe-text  sys-weight-400 sys-color-gray-6">不爱主动，但是超期待你和我聊天der~喜欢温柔的朋 友，我可以和你聊音乐，聊电影，也可以和你一-起开黑 打游戏，任何游戏没在怕的!</view>
      </view>


    </view>
  </view>
</template>

<script>
import tools from "@/service/tools";
import EnNav from "@/components/en-utils/en-nav/en-nav";

export default {
  components: {EnNav},
  data() {
    return {
      'weChat':'',
      'isShakeBut':false
    }
  },
  methods: {
    bindTextAreaBlur(e){
      console.log(e)
    },
    setNextStep() {
      if (this.isOK) {
        uni.navigateBack()
      } else {
        tools.error('请输入微信号')
        this.isShakeBut = true
        setTimeout(() => {
          this.isShakeBut = false
        }, 500)
      }
    },
    verifyIsOK() {
      this.isOK = this.weChat !== '';
    },
  }
}
</script>

<style scoped lang="scss">
@import "/static/css/shake.css";
.about-box{
  padding: 32rpx;
  .about-data{
    .about-text{
      height: 222rpx;
      line-height: 44rpx;
    }
    .about-text::placeholder{
      color: #CCCCCC;
    }
    .about-operation{
      border-bottom:  1px solid #F2F2F2;
      padding-bottom: 34rpx;
      display: flex;
      justify-content: space-between;
      .operation-item{
        .iconfont{
          margin-right: 10rpx;
        }
        text{
          color: #ccc;
          font-size: 24rpx;
          line-height: 44rpx;
        }
      }
    }
    .describe{
      margin-top: 28rpx;
      border-radius: 20rpx;
      background: #F9F9F9;
      padding: 32rpx;
      .describe-title{
        font-size: 28rpx;
        line-height: 44rpx;
      }
      .describe-text{
        margin-top: 24rpx;
        font-size: 26rpx;
        line-height: 44rpx;
      }
    }

  }

}
</style>