小程序 select 关联 操作 级联

select  关联  操作  级联    下拉菜单  

  
<!--  个人信息开始 -->
<view   class="my_list" style="margin-top: 100rpx;">
    <view class="my_list_item">
      <view class="row">
        <view class="left">
          部门：
        </view>
        <view class="right">
            <picker bindchange="deptChange"  range-key="name" value="dept_select_index" range="{{dept_list}}">
              <view class="picker">
               {{dept_list[dept_select_index].name}}
              </view>
            </picker>
        </view>
      </view>
    </view>
    
    <view class="my_list_item">
      <view class="row">
        <view class="left">
          职位：
        </view>
        <view class="right">
            <picker bindchange="positionChange"  range-key="name" value="index" range="{{position_list}}">
              <view class="picker">
               {{position_list[position_select_index].name}}
              </view>
            </picker>
        </view>
      </view>
    </view>

    
    </view>

import {
  request,wx_login,uploadWXUserInfo,getDiffHour,getTime
} from '../../utils/util.js'

import {
  baseURL
} from '../../utils/config.js'
import {
  dept_list
} from '../../api/dept'
import {
  position_list
} from '../../api/position'
import {
  oauth_check
} from '../../api/oauth'

const app = getApp();

Page({

  data: {
    openid:"",
    baseURL: baseURL,
    state:1,  //显示 按钮  0显示 提交成功
    trueName: '',
    phone: '',
    remark:'',
    sex_array: ["男", "女"],
    sex_select_index:0,

    dept_list:[],
    dept_select_index: 0,

    position_list:[],
    position_select_index: 0,
  },
  sub_check(){
    var that=this;
    var upload_wx_user_datetime =  wx.getStorageSync('upload_wx_user_datetime');
    var show_wind_flag = true;
    if(upload_wx_user_datetime){
      var hour = getDiffHour(upload_wx_user_datetime);
      if(hour>=app.globalData.upload_hour){
        show_wind_flag = true;
      }else{
        show_wind_flag = false;
      }
    }else{
      show_wind_flag = true;
    }
    if(show_wind_flag){
        var time_str = getTime();
        
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            wx.setStorageSync("upload_wx_user_datetime", time_str);
            
            var jsonstr = JSON.stringify(res.userInfo)
            uploadWXUserInfo(jsonstr, app.globalData.openid);
            that.sub();
          }
        })
    }else{
      that.sub();
    }
  },
  sub(){
    var that=this;
    console.log(that.data.trueName);
    console.log(that.data.phone);
    console.log(that.data.sex_select_index);
    var deptId = that.data.dept_list[that.data.dept_select_index].id;
    var positionId = that.data.position_list[that.data.position_select_index].id;
    console.log("deptId:"+deptId);
    console.log("positionId:"+positionId);
    wx.showLoading({
      title: '提交中',
      mask:true
    })
    var sex = 0;
    if(that.data.sex_select_index==0){
      sex = 1;
    }else{
      sex = 2;
    }
    if(this.data.trueName.length<2){
      wx.showToast({
        title: "请填写正确的 姓名",
        icon: 'none',
        duration: 2000
        })
      return;
    }
    if(this.data.phone.length<6){
      wx.showToast({
        title: "请填写正确的 手机号",
        icon: 'none',
        duration: 2000
        })
      return;
    }
    oauth_check(this.data.trueName,this.data.phone,sex,this.data.openid,deptId,positionId).then(res => {
        wx.hideLoading()
        if(res.data.success){
          this.setData({
            state: 0
          })
          wx.showModal({
            title: '提示',
            content: '认证成功',
            success (res) {
              if (res.confirm) {
                  //认证成功跳转首页
                  wx.switchTab({
                    url: "/pages/index/index"
                  })
              } else if (res.cancel) {
                //认证成功跳转首页
                wx.switchTab({
                  url: "/pages/index/index"
                })
              }
          }})
        }else{
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
            })
        }
    });
  },
  load_position(deptId){
    position_list(deptId).then(res => {
      console.log(res.data);
      this.setData({
        position_list: res.data
      })
    });
  },
  deptChange(e){
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      dept_select_index: e.detail.value
    })
    var deptId = this.data.dept_list[this.data.dept_select_index].id;
    this.load_position(deptId);
  },
  positionChange(e){
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      position_select_index: e.detail.value
    })
  },
  remarkInput(e) {
    this.setData({
      remark: e.detail.value
    })
  },
  trueNameInput(e) {
    this.setData({
      trueName: e.detail.value
    })
  },
  phoneInput(e) {
    this.setData({
      phone: e.detail.value
    })
  },
  click_sex(e){
    this.setData({
      sex_select_index: e.currentTarget.dataset.index
    })
  },
  wx_login() {
    var that = this;
    var openid = app.globalData.openid
    if (openid == '') {
      wx_login().then(res => {
        console.log(res);
        openid = res.data.openid;
        this.setData({
          openid: openid
        })
      })
    } else {
      this.setData({
        openid: openid
      })
    }
  },
  onLoad: function (options) {
    dept_list().then(res => {
      this.setData({
        dept_list: res.data
      })
    })
  },
  onReady: function () {
    var that = this;
    setTimeout(function() {
      var id = that.data.dept_list[that.data.dept_select_index].id;
      console.log(id);
      that.load_position(id);
    }, 1000);
  },
  onShow: function () {
    this.wx_login();
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () {
  },
  onShareAppMessage: function () {
  }
})

.row {
  padding: 5px 10px 5px 10px;
  font-size: 15px;
  color: #636262;
  display: flex;
}

.left {
  width: 130rpx;
  line-height: 65rpx;
  text-align: right;
}

.right {
  flex: 1;
  padding-left: 16rpx;
  line-height: 65rpx;
}

.right  input {
  background-color: #e2e2e2;
  height: 65rpx;
}
.right text{
  margin-left: 15rpx;
  border: 1rpx solid #e4880f;
  color: #e4880f;
  padding: 10rpx 17rpx 10rpx 17rpx;
  font-size: 28rpx;
 }

 .text_on{
  background-color:#e4880f;
  border: 1rpx solid #e4880f !important;
  color:#fff !important;
}

.remark{
  width: 100%;
  background-color: #e2e2e2;
  height: 200rpx;
}

picker{
  line-height: 65rpx;
  background-color: #e2e2e2;
  padding-left: 15rpx;
}