ZhiHuiJiaoWu_UniApp/pages/coach/job/add.vue

<!--发布作业-->
<template>
  <view class="main_section">
    <fui-form class="formData" ref="form">
      <view class="radio_input">
        <fui-form-item label="发布类型" asterisk>
          <fui-radio-group name="radio" v-model="formData.type" @change="changeType">
            <view class="fui-list__item">
              <fui-label>
                <view class="fui-align__center">
                  <fui-radio value="1" checked></fui-radio>
                  <text class="fui-text">班级作业</text>
                </view>
              </fui-label>
              <fui-label :margin="['0','0','0','40rpx']">
                <view class="fui-align__center">
                  <fui-radio value="2"></fui-radio>
                  <text class="fui-text">学员作业</text>
                </view>
              </fui-label>
            </view>
          </fui-radio-group>
        </fui-form-item>

      </view>

      <view class="radio_input">
        <fui-form-item label="作业类型" asterisk>
          <fui-radio-group name="radio" v-model="formData.content_type" @change="changeContentType">
            <view class="fui-list__item">
              <fui-label>
                <view class="fui-align__center">
                  <fui-radio value="1" checked></fui-radio>
                  <text class="fui-text">图片作业</text>
                </view>
              </fui-label>
              <fui-label :margin="['0','0','0','40rpx']">
                <view class="fui-align__center">
                  <fui-radio value="2"></fui-radio>
                  <text class="fui-text">视频作业</text>
                </view>
              </fui-label>
            </view>
          </fui-radio-group>
        </fui-form-item>

      </view>

      <view v-if="formData.type == 1">
        <fui-input required label="班级" borderTop placeholder="请选择班级" v-model="formData.classes_id_name"
                   @click="show_class=true"></fui-input>
        <fui-picker layer="1" :linkage="true" :options="options_class_arr" :show="show_class" @change="changeClass"
                    @cancel="show_class=false"></fui-picker>
      </view>

      <view v-if="formData.type != 1">
        <fui-input required label="学员" borderTop placeholder="请选择学员" v-model="formData.students_ids_name"
                   @click="show_student=true"></fui-input>
        <!--下拉多选-->
        <fui-select
            :show="show_student"
            :options="options_student_arr"
            title="请选择学员"
            multiple
            isReverse
            checkboxColor="#FFC529"
            btnBackground="#FFC529"
            btnColor="#1A1D26"
            closeColor="#6D758A"
            @confirm="changeStudent"
            @close="show_student=false">
        </fui-select>

      </view>

      <view>
        <fui-input required label="课程" borderTop placeholder="请选择课程" v-model="formData.course_id_name"
                   @click="show_course=true"></fui-input>
        <fui-picker
            layer="1"
            :linkage="true"
            :options="options_course_arr" :show="show_course" @change="changeCourse"
            @cancel="show_course=false"></fui-picker>
      </view>

      <view>
        <fui-textarea required flexStart label="作业" placeholder="请输入内容" v-model="formData.content_text"></fui-textarea>
      </view>

      <view class="submet_btn" @click="submetForm">提交</view>

    </fui-form>

<!--吸顶消息提示-->
    <fui-message ref="msg" :background="`#ff2b2b`"></fui-message>
<!--    底部导航-->
    <AQTabber/>
  </view>
</template>

<script>
import memberApi from '@/api/member.js';
import AQTabber from "@/components/AQ/AQTabber.vue"
import apiRoute from '@/api/apiRoute.js';
//校验规则
const rules = [
  // {
  //   name: "classes_id_name",
  //   rule: ["required"],
  //   msg: ["请选择班级"]
  // },
  {
    name: "course_id_name",
    rule: ["required"],
    msg: ["请选择课程"]
  },
  {
    name: "content_text",
    rule: ["required"],
    msg: ["请输入作业内容"]
  },
];
export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      show_class:false,
      show_course:false,
      show_student:false,


      //班级可选值列表
      options_class_arr:[
        // { value: 1, text: '班级1' },
      ],
      //课程可选值列表
      options_course_arr:[
        // { value: 1, text: '课程1' },
      ],
      //学员可选值列表
      options_student_arr:[
        // {
        //   text: '标签3',
        //   value: '3',
        //   checked: false,//是否选中
        // }
      ],


      //表单数据
      formData: {
        type: '1',//作业类型(单选)|1班级,2学员
        course_id: '',//课程id(下拉)
        course_id_name: '',//课程id(中文名字)

        content_type: '1',//作业类型(单选)|1图片,2视频
        content_text: '',//文字作业内容

        class_id: '',//班级id(下拉)
        classes_id_name: '',//班级id(中文名字)

        student_id: '',//学员id 逗号拼接
        students_ids_name:'',//学员id数组(中文名字)
      }
    }
  },
  onLoad() {

  },
  onShow() {
    this.init()
  },
  methods: {
    //初始化
    async init() {
      // 获取班级-学员二级联动(用来获取班级列表)
      this.getClassesList()
      // 全部课程名称列表
      this.getCoursesList()
      // 学员列表
      this.getStudentList()
    },

    //获取班级列表
    async getClassesList(){
      let res = await apiRoute.jlGetClassesList({})
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.options_class_arr = []
      res.data.forEach((v,k)=>{
        this.options_class_arr.push({
          text: v.class_name,
          value: v.id,
        })
      })
    },
    //获取课程列表
    async getCoursesList(){
      let res = await apiRoute.jlGetCoursesList({})
      if(res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.options_course_arr = []
      res.data.forEach((v,k)=>{
        this.options_course_arr.push({
          text: v.course_name,
          value: v.id,
        })
      })
    },

    //获取学员列表
    async getStudentList() {
      let res = await apiRoute.jlGetStudentList({})
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.options_student_arr = []
      res.data.forEach((v, k) => {
        this.options_student_arr.push({
          text: v.name,
          value: v.id,
          checked: false,//是否选中
        })
      })
    },


    //监听选择器-班级
    changeClass(e) {
      console.log('选择器-班级', e);
      this.formData.class_id = e.value; // 更新 class_id
      this.formData.classes_id_name = e.text; // 更新 class_name
      this.show_class = false; // 关闭选择器
    },
    //监听选择器-课程
    changeCourse(e) {
      console.log('选择器-课程', e);
      this.formData.course_id = e.value; // 更新 course_id
      this.formData.course_id_name = e.text; // 更新 course_name
      this.show_course = false; // 关闭选择器
    },
    //监听选择器-学员
    changeStudent(e) {
      console.log('选择器-学员', e);
      let id_arr = []
      let name_arr = []
      e.options.forEach((v,k)=>{
        id_arr.push(v.value)
        name_arr.push(v.text)
      })
      //数组转字符
      this.formData.student_id = id_arr.join(',')
      this.formData.students_ids_name = name_arr.join(',')
      this.show_student = false; // 关闭选择器
    },

    //监听选择器-发布类型
    changeType(e) {
      console.log('选择器-作业类型', e);
      this.formData.type = e.detail.value; // 更新 type

      //1=班级作业
      if(e.detail.value == 1){
        //清空学员选择信息
        this.formData.student_id = ''
        this.formData.students_ids_name = ''
      }else{
        // 2=学生作业
        this.formData.class_id = ''
        this.formData.classes_id_name = ''
      }
    },

    //监听选择器-作业类型
    changeContentType(e) {
      console.log('选择器-作业类型', e);
      this.formData.content_type = e.detail.value; // 更新 type
    },

    //表单验证
    async validatorForm(data) {
      let res = await this.$refs.form.validator(data, rules)
      return res
    },

    //吸顶消息意识
    showMsg(msg) {
      let options = {}
      //text值可不传
      options.text = msg
      this.$refs.tips.show(options)
    },

    //发布作业
    async submetForm(){
      let data = {...this.formData}
      console.log('提交',data)
      let vf = await this.validatorForm(data)//表单验证


      if(data.type == 1){
        //班级作业
        if(!data.class_id){
          this.showMsg('请选择班级')
          return
        }
      }else{
        //学生作业
        if(!data.student_id){
          this.showMsg('请选择学员')
          return
        }
      }


      if(!vf.isPassed){
        console.log('验证',vf)
        return
      }

      //发布作业
      let res = await apiRoute.jlPublishJob(data)
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      uni.showToast({
        title: res.msg,
        icon: 'success'
      })
      //延迟1s
      setTimeout(() => {
        //关闭当前页跳转新页面
        uni.redirectTo({
          url: '/pages/coach/home/index'
        })
      }, 1000)
    },
  }
}
</script>

<style lang="less" scoped>

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  .formData{
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    .radio_input{
      .fui-form__item-wrap{
        border-radius: 8rpx !important;
      }
      .fui-list__item{
        display: flex;
        align-items: center;
      }
    }
    .submet_btn{
      margin: 0 auto;
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #29d3b4;
      border-radius: 8rpx;

      width: 648rpx;
      height: 88rpx;
      color: rgba(255,255,255,1);
      font-size: 32rpx;
    }
  }



}


</style>