WeChat Mini Program Course Selector

Not much to say, go directly to the renderings

code show as below

wxml

<view class="urg_input">
      <picker class="gradePicker" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
      </picker>
    </view>

js

import { primarySchool, juniorSchool, highSchool, bigSchool} from './AllDataConfig.js'
Page({
  data: {
    multiArray: [
      [ 'elementary school' , 'junior high school' , 'high school' , 'university' ],
      [ 'Grade 1' , 'Grade 2' , 'Grade 3' , 'Grade 4' , 'Grade 5' , 'Grade 6' ],
      primarySchool[0]
    ],
    multiIndex: [0, 0, 0],
    teachPlaceholder: '',
  },
  /**
   * Subject selection
   */ 
  bindMultiPickerChange: function ( e ) {
     // Get the selected course after confirming 
    // console.log('picker sends the selection change, carrying the value', e.detail.value) 
    // Returns the selected three parameters 
    this .setData({
       multiIndex : e.detail.value
    })
    let jiBie = this.data.multiArray[0][this.data.multiIndex[0]];
    let grade = this.data.multiArray[1][this.data.multiIndex[1]];
    let course = this.data.multiArray[2][this.data.multiIndex[2]];
    let teachCourse = jiBie + '' + grade + '' + course;
    this.setData({
      teachPlaceholder: teachCourse
    })
  },
  bindMultiPickerColumnChange : function ( e ) {
     // console.log('modified column', e.detail.column, ', value', e.detail.value); 
    var data = {
       multiArray : this .data.multiArray ,
       multiIndex : this .data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    // The number of columns is only judged by two columns, the level of the first column, the grade of the second column 
    switch (e.detail.column) {
       // Select the first column and set the grade corresponding to the second column 
      case  0 :
         switch ( data.multiIndex[ 0 ]) {
           // Primary 
          case  0 :
            data.multiArray[ 1 ] = [ '1st grade' , '2nd grade' , '3rd grade' , '4th grade' , '5th grade' , '6th grade' ];
            data.multiArray[ 2 ] = primarySchool[ 0 ];
             break ;
           // junior high school 
          case  1 :
            data.multiArray[ 1 ] = [ 'the first day' , 'the second day' , 'the third day' ];
            data.multiArray[ 2 ] = juniorSchool[ 0 ];
             break ;
           // high school 
          case  2 :
            data.multiArray[ 1 ] = [ 'High 1' , 'High 2' , 'High 3' ];
            data.multiArray[ 2 ] = highSchool[ 0 ];
             break ;
           // University 
          case  3 :
            data.multiArray[ 1 ] = [ 'freshman' , 'sophomore' , 'junior' , 'senior' ];
            data.multiArray[2] = bigSchool[0];
            break;
        }
        data.multiIndex[ 1 ] = 0 ;
        data.multiIndex[ 2 ] = 0 ;
         break ;
       // Select the second column and set the corresponding account 
      case  1 :
         /**
         * Select the level corresponding to the first column, and then judge the grade of the second column to set the course
         */ 
        switch (data.multiIndex[ 0 ]) {
           // elementary school 
          case  0 :
             switch (data. multiIndex[ 1 ]) {
               // first grade 
              case  0 :
                data.multiArray[ 2 ] = primarySchool[ 1 ];
                 break ;
               // second grade 
              case  1 :
                data.multiArray[ 2 ] = primarySchool[ 2 ];
                 break ;
               // third grade 
              case  2 :
                data.multiArray[ 2 ] = primarySchool[ 3 ];
                 break ;
               // fourth grade 
              case  3 :
                data.multiArray[ 2 ] = primarySchool[ 4 ];
                 break ;
               // fifth grade 
              case  4 :
                data.multiArray[ 2 ] = primarySchool[ 5 ];
                 break ;
               // sixth grade 
              case  5 :
                data.multiArray[2] = primarySchool[6];
                break;
            }
            break ;
           // junior high school 
          case  1 :
             switch (data.multiIndex[ 1 ]) {
               // junior high school 
              case  0 :
                data.multiArray[ 2 ] = juniorSchool[ 1 ];
                 break ;
               // first two 
              case  1 :
                data.multiArray[ 2 ] = juniorSchool[ 2 ];
                 break ;
               // first three 
              case  2 :
                data.multiArray[2] = juniorSchool[3];
                break;
            }
            break ;
           // high school 
          case  2 :
             switch (data.multiIndex[ 1 ]) {
               // high school 
              case  0 :
                data.multiArray[ 2 ] = highSchool[ 1 ];
                 break ;
               // high school 
              case  1 :
                data.multiArray[ 2 ] = highSchool[ 2 ];
                 break ;
               // high school 
              case  2 :
                data.multiArray[2] = highSchool[3];
                break;
            }
            break ;
           // college 
          case  3 :
             switch (data.multiIndex[ 1 ]) {
               // freshman 
              case  0 :
                data.multiArray[ 2 ] = bigSchool[ 1 ];
                 break ;
               // sophomore 
              case  1 :
                data.multiArray[ 2 ] = bigSchool[ 2 ];
                 break ;
               // big three 
              case  2 :
                data.multiArray[ 2 ] = bigSchool[ 3 ];
                 break ;
               // big four 
              case  3 :
                data.multiArray[2] = bigSchool[4];
                break;
            }
            break;
        }
        data.multiIndex[2] = 0;
        break;
    }
    // console.log(data.multiIndex);
    this.setData(data);
  },
})

AllDataConfig.js

// curriculum setting 
// primary school 
export  const primarySchool = [
   // default setting curriculum 
  [ 'Chinese' , 'Math' , 'English' , 'Physical Education' , 'Art' , 'Chemistry' ],
   // First grade 
  [ 'Chinese' ' , 'Math' , 'English' ],
   // 2nd grade 
  [ 'Chinese' , 'Math' , 'English' ],
   // 3rd grade 
  [ 'Chinese' , 'Math' , 'English' ],
   // Fourth grade grade 
  [ 'Chinese' , 'Mathematics' ,'English' ],
   // 5th grade 
  [ 'Chinese' , 'Math' , 'English' ],
   // 6th grade 
  [ 'Chinese' , 'Math' , 'English' ]
]
// Junior high school 
export  const juniorSchool = [
   // Default courses 
  [ 'Chinese' , 'Math' , 'English' , 'Art' , 'Music' , 'Politics' , 'History' , 'Physics' , 'Chemistry' , 'Geography' , 'Biology' ],
   // First grade 
  [ 'Chinese' , 'Math' , 'English' , 'Art' , 'Music' , 'Politics' , 'History' , 'Geography', 'biology' ],
   // second year of junior high 
  [ 'language', 'Mathematics' , 'English' , 'Politics' , 'History' , 'Physics' , 'Chemistry' , 'Geography' , 'Biology' ],
   // The third grade 
  [ 'Chinese' , 'Mathematics' , 'English' , 'Politics' , 'History' , 'Physics' , 'Chemistry' ],
]
// high school 
export  const highSchool = [
   // default courses 
  [ 'Chinese' , 'Math' , 'English' , 'Politics' , 'History' , 'Geography' , 'Physics' , 'Chemistry' , 'Biology' ] ,
   // high school 
  [ 'high school' , 'language' , 'mathematics' , 'English' , 'politics' , 'history' , 'geography' , 'physics' , 'chemistry' , 'biology'],
   // Sophomore 
  [ 'Sophomore' , 'Chinese', 'Mathematics' , 'English' , 'Politics' , 'History' , 'Geography' , 'Physics' , 'Chemistry' , 'Biology' ],
   // Senior 3 
  [ 'Senior 3' , 'Chinese' , 'Mathematics' , 'English' , 'Politics' , 'History' , 'Geography' , 'Physics' , 'Chemistry' , 'Biology' ],
]
export  const bigSchool = [
   // Default setting courses 
  [ 'Math' , 'English' , 'Art' , 'Computer' , 'Politics' ],
   // Freshman 
  [ 'Freshman' , 'Math' , 'English' , 'Art' , 'Computer' , 'Politics' ],
   // Sophomore 
  [ 'Sophomore' , 'Math' , 'English' , 'Art' , 'Computer' , 'Politics' ],
  // Junior 
  [ 'Junior' , 'Math' , 'English', 'Art' , 'Computer' , 'Politics' ],
   // Senior 
  [ 'Senior Year' , 'Math' , 'English' , 'Art' , 'Computer' , 'Politics' ],
]

The end of the flower, hehehe

Leave a Comment

Your email address will not be published. Required fields are marked *