ZhiHuiJiaoWu_UniApp/pages/coach/my/info.vue

<!--授课统计-详情-->
<template>
  <view class="main_box">

    <view class="main_section">
      <view class="section">
        <view class="item">
          <image class="pic" src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png"></image>
          <view class="btn">修改头像</view>
        </view>
      </view>

      <view class="section">
        <view class="item">
          <view class="title">
            姓名 <text class="required">*</text>
          </view>
          <view class="input">
            <input placeholder="请输入" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            账号 <text class="required"></text>
          </view>
          <view class="input">
            <input disabled placeholder="请输入" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            部门 <text class="required"></text>
          </view>
          <view class="input">
            <input disabled placeholder="请选择" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            等级 <text class="required"></text>
          </view>
          <view class="input">
            <input disabled placeholder="请输入" />
          </view>
        </view>
      </view>

      <view class="section">
        <view class="item">
          <view class="title">
            性别 <text class="required">*</text>
          </view>
          <view class="input">
            <input placeholder="请输入" />
            <fui-picker :options="options" :show="show" @change="change" @cancel="cancel"></fui-picker>
          </view>
        </view>

        <view class="item">
          <view class="title">
            生日 <text class="required">*</text>
          </view>
          <view class="input">
            <input disabled placeholder="请输入" />
            <fui-date-picker :show="show" type="3" @change="change" @cancel="cancel"></fui-date-picker>
          </view>
        </view>

        <view class="item">
          <view class="title">
            邮箱 <text class="required">*</text>
          </view>
          <view class="input">
            <input disabled placeholder="请选择" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            手机 <text class="required">*</text>
          </view>
          <view class="input">
            <input disabled placeholder="请选择" />
          </view>
        </view>

        <view class="item">
          <view class="title">
            微信 <text class="required"></text>
          </view>
          <view class="input">
            <input disabled placeholder="请输入" />
          </view>
        </view>
      </view>

      <view class="submet_btn">提交</view>
    </view>
  </view>
</template>

<script>
import user from '@/api/user.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
import AQTabber from "@/components/AQ/AQTabber"


export default {
  components: {
    AQTabber,
    AQUplodeImgMulti,
  },
  data() {
    return {
      formData:{
        images_arr:[]
      },

      //课程下拉菜单相关
      show_course:false,//是否显示下拉菜单
      //课程下拉菜单
      course_name:'课程',//选中的下拉菜单名称
      options_course: [
        {
          text: '请选择课程',
          value: '',
          checked: true
        }, {
          text: '羽毛球课程1',
          value: '1'
        }, {
          text: '篮球课程2',
          value: '2'
        }
      ],

      //课室下拉菜单相关
      show_classroom:false,//是否显示下拉菜单
      //课程下拉菜单
      classroom_name:'课室',//选中的下拉菜单名称
      options_classroom: [
        {
          text: '请选择课室',
          value: '',
          checked: true
        }, {
          text: '羽毛球201',
          value: '1'
        }, {
          text: '篮球室101',
          value: '2'
        }
      ],
    }
  },
  onLoad() {
  },
  methods: {
    //######AQ上传文件组件相关######
    // 上传文件回调
    AQUploadSuccess(res){
      console.log('接收AQ上传回调xxx1',res)
      // 使用 split 方法分割字符串
      let _inputValue = []
      if(res.filePathArr.length){
        _inputValue = res.filePathArr
      }
      this.formData[res.inputName]=_inputValue
      // console.log('接收AQ上传回调xxx1',res)
      // console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29d3b4;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #315d55;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 0rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  .section{
    background-color: #434544;
    .item{
      padding: 20rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .pic{
        width: 82rpx;
        height: 82rpx;
        border-radius: 50%;
      }
      .btn{}

      .title{
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #D7D7D7;
        .required{
          margin-left: 10rpx;
          color: red;
        }
      }
      .input{
        input{
          text-align: right;
        }
      }
    }
  }

  .submet_btn{
    margin: 0 auto;
    margin-top: 40rpx;
    border: 2px solid #25a18b;
    color: #25a18b;
    width: 80%;
    height: 80rpx;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }



}


</style>