yunshengtai-uniapp/pages/user/personalData/index.vue

<template>
<!--pages/user/personalData/index.wxml-->
<view class="personal-index">
  <view class="head_box">
  	<cu-custom :isBack="true" :bgColor="rgb(35, 35, 40)"></cu-custom>
  </view>
  <view class="bg-img-box"><image src="https://download.cyjyyjy.com/personalPage-bg.png"></image></view>
  <view class="logo-box acea-row row-column">
    <image src="/static/images/logo.png"></image>
    <view>欢迎入驻湖北省艺术设计协会</view>
  </view>
  <view class="form-box">
    <view class="title">请完善个人信息</view>
    <view class="form">
      <view class="inp-box">
        <view class="label">姓名</view>
        <input type="text" placeholder="请填写您的真实姓名" :value="form.realName" @input="changeName" placeholder-style="color:#6D6D6D">
      </view>
      <view class="inp-box">
        <view class="label">身份证号</view>
        <input type="idcard" placeholder="请填写您的身份证号码" maxlength="18" @input="changeidCard" :value="form.idCard" placeholder-style="color:#6D6D6D">
      </view>
      <view class="inp-box">
        <view class="label">手机号</view>
        <input type="text" placeholder="请填写您的手机号" :value="form.phone" maxlength="11" @input="changePhone" placeholder-style="color:#6D6D6D">
        <button v-if="form.phone == ''" class="getPhone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键获取</button>
      </view>
      <view class="inp-box">
        <view class="label">短信验证码</view>
        <view class="sencode-box acea-row-nowrap row-between row-middle">
          <input type="text" placeholder="请填写短信验证码" :value="form.code" @input="changeCode" maxlength="6" placeholder-style="color:#6D6D6D">
          <view class="sendcode-btn" v-if="!disabled" @tap="sendCode">发送验证码</view>
          <view class="sendcode-btn default" v-else>{{ second }}秒后重新发送</view>
        </view>
      </view>
      <view class="inp-box">
        <view class="label">所在城市</view>
        <region-picker @change="bindRegionChange" :value="form.city">
          <view class="picker">
            {{form.city}}
          </view>
        </region-picker>
      </view>
      <view class="inp-box">
        <view class="label">所在行业</view>
        <input type="text" placeholder="请选择" @tap="toProfession" disabled="disabled" :value="form.profession" placeholder-style="color:#6D6D6D">
      </view>
      <view class="inp-box noBorder">
        <view class="label">所在职位</view>
        <picker @change="bindPickerChange" :value="form.position" :range="positionArr">
          <view class="picker">{{form.position}}</view>
        </picker>
        <!-- <input type="text" placeholder="请填写您的职位" placeholder-style="color:#FFE8D8"/> -->
      </view>
    </view>
    <view class="submit-btn" @tap="toComplete">保存并入驻</view>
  </view>
</view>
</template>

<script>
// pages/user/personalData/index.js
const app = getApp();

export default {
  data() {
    return {
      navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 20,
      form: {
        realName: '',
        idcard: '',
        phone: '',
        code: '',
        city: '请选择所在城市',
        profession: '',
        position: '请选择'
      },
      disabled: false,
      second: 60,
      positionArr: ['企业负责人', '高层管理者', '中层管理者', '基层管理者', '普通员工'],
      timer: null,
      userInfo: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      userInfo: uni.getStorageSync('userInfo')
    });

    if (this.userInfo.phone) {
      this.setData({//['form.phone']: this.data.userInfo.phone
      });
      //try fix
      this.form.phone = this.userInfo.phone;
    }

    if (app.globalData.inviterId) {
      this.bindInviter();
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (uni.getStorageSync('form')) {
      let form = uni.getStorageSync('form');
      //try fix
      this.form.position = form.position;
      //try fix
      this.form.code = form.code;
      //try fix
      this.form.idCard = form.idCard;
      //try fix
      this.form.city = form.city;
      //try fix
      this.form.realName = form.realName;
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {}
  /**
   * 用户点击右上角分享
   */
  // onShareAppMessage: function () {
  // }
  ,
  methods: {
    //绑定上级
    bindInviter() {
      app.http('get', 'user/bindInviter', {
        inviterId: app.globalData.inviterId
      }).then(res => {
        if (res.data.success) {
          console.log('绑定成功');
        } else {
          console.log('绑定失败');
        }
      });
    },

    setFormStorage() {
      uni.setStorageSync('form', this.form);
    },

    changeName(e) {
      this.setData({//['form.realName']: e.detail.value
      });
      //try fix
      this.form.realName = e.detail.value;
      this.setFormStorage();
    },

    changePhone(e) {
      this.setData({//.form.phone: e.detail.value
      });
      //try fix
      this.form.phone = e.detail.value;
    },

    changeidCard(e) {
      this.setData({//.form.idCard: e.detail.value
      });
      //try fix
      this.form.idCard = e.detail.value;
      this.setFormStorage();
    },

    bindRegionChange(e) {
      this.setData({//.form.city: e.detail.value.join(' ')
      });
      //try fix
      this.form.city = e.detail.value.join(' ');
      this.setFormStorage();
    },

    bindPickerChange(e) {
      this.setData({//.form.position: this.data.positionArr[e.detail.value]
      });
      //try fix
      this.form.position = this.positionArr[e.detail.value];
      this.setFormStorage();
    },

    changeCode(e) {
      this.setData({//.form.code: e.detail.value
      });
      //try fix
      this.form.code = e.detail.value;
      this.setFormStorage();
    },

    toProfession() {
      uni.navigateTo({
        url: '../profession/index'
      });
      this.setFormStorage();
    },

    getPhoneNumber(e) {
      if (e.detail.errMsg == 'getPhoneNumber:ok') {
        app.http('post', 'wxapp/binding', {
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv
        }).then(res => {
          if (res.data.success) {
            this.setData({//['form.phone']: res.data.data.phone
            });
            //try fix
            this.form.phone = res.data.data.phone;
            uni.showToast({
              title: res.data.msg
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            });
          }
        });
      }
    },

    backPage() {
      uni.navigateBack({
        delta: 1
      });
    },

    sendCode() {
      var reg = /^1[3456789]\d{9}$/;

      if (this.form.phone === '') {
        uni.showModal({
          title: '手机号码不能为空',
          type: 'none'
        });
        return;
      } else if (!reg.test(this.form.phone)) {
        uni.showModal({
          title: '请输入有效的手机号码',
          type: 'none'
        });
        return;
      } else {
        if (this.disabled == false) {
          clearInterval(this.timer);
          this.setData({
            disabled: true
          });
          let timer = setInterval(() => {
            //设置延迟执行
            this.timeup();
          }, 1000);
          this.setData({
            timer: timer
          });
        }

        app.http('post', 'user/getVerificationCode', {
          phone: this.form.phone
        }).then(res => {
          if (res.data.success) {
            uni.showToast({
              title: '短信已发送！'
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: 'none'
            });
          }
        });
      }
    },

    timeup() {
      this.setData({
        second: this.second - 1
      });

      if (this.second == 0) {
        this.second = 60;
        this.setData({
          disabled: false,
          second: 60
        });
        clearInterval(this.timer);
        return;
      }
    },

    toComplete() {
      let data = {
        realName: this.form.realName,
        idCard: this.form.idCard,
        code: this.form.code,
        phone: this.form.phone,
        city: this.form.city,
        industry: this.form.profession,
        position: this.form.position
      };
      app.http('post', 'user/edit', data).then(res => {
        if (res.data.success) {
          uni.navigateTo({
            url: '../completeData/index'
          });
          app.getInfo();
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        }
      });
    }

  }
};
</script>
<style>
/* pages/user/personalData/index.wxss */
page{
  width: 100%;
  height: 100vh;
}
.head_box{
	color: #fff;
}
.personal-index{
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.bg-img-box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.bg-img-box image{
  width: 100%;
  height: 100%;
}
.logo-box{
  position: absolute;
  top: 220rpx;
  left: 32rpx;
  width: 100%;
  font-size: 40rpx;
  color: #EFDACA;
}
.logo-box image{
  width: 160rpx;
  height: 90rpx;
  margin-bottom: 22rpx;
}

.form-box{
  position: absolute;
  top: 400rpx;
  left: 0;
  font-size: 28rpx;
  color: #363636;
  width: 100%;
  padding: 0 32rpx;
}
.title{
  font-size: 40rpx;
  color: #EFDACA;
}

.form{
  width: 100%;
  min-height: 640rpx;
  background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%);
  border-radius: 8rpx;
  margin: 62rpx 0;
  padding: 16rpx 0;
}
.form .inp-box{
  width: 100%;
  height: 86rpx;
  padding: 0 16rpx;
  border-bottom: 2rpx solid #B89F83;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form .inp-box .label{
  width: 160rpx;
  text-align: left;
}
.inp-box input{
  text-align: right;
}
.sencode-box{
  width: calc(100% - 180rpx);
}
.sencode-box input{
  width: 230rpx;
} 
.sencode-box .sendcode-btn,.getPhone-btn{
  width: 220rpx;
  height: 66rpx;
  text-align: center;
  line-height: 66rpx;
  background: #FFFFFF;
  color: #BE996F;
  box-shadow: 6rpx 6rpx 12rpx #D1BCA5;
  border-radius: 8rpx;
  position: relative;
}
.sendcode-btn::before{
  content: '';
  display: inline-block;
  width: 2rpx;
  height: 40rpx;
  background: #C3AA91;
  position: absolute;
  left: -10rpx;
  top: 10rpx;
}
.picker{
  color: #6D6D6D;
}
.noBorder{
  border: none !important;
}

.submit-btn{
  width: 268rpx;
  height: 82rpx;
  text-align: center;
  line-height: 82rpx;
  color: #946F46;
  font-size: 32rpx;
  background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%);
  box-shadow: 6rpx 6rpx 20rpx rgba(22, 22, 22, 0.43);
  border-radius: 62rpx;
  margin: 0 auto;
}


.getPhone-btn{
  width: 210rpx !important;
  padding: 0 !important;
  font-size: 28rpx;
  font-weight: normal;
  color: #BE996F;
  margin-left: 10rpx !important;
}
</style>