zd_wechatApp/pages/login/login.vue

<template>
  <view class="bigback">
    <image src="https://cczdsz.cn/app/images/42ad4e72a9bb4f08ac613933c04c679a.png" mode="" class="background"></image>
    <view class="title">
      <image src="https://cczdsz.cn/app/images/logo.png" mode="" class="logo" style="width: 30px;height: 30px;"></image>
      <view class="font-sixty-four" style="color:dodgerblue;font-weight:bold;font-size: 14px;">
        长春贞达市政巡线调压、抢险维修管理平台
      </view>
      <image src="https://cczdsz.cn/app/images/41743f2fb9b54c8e87e1168bb094505b.png" mode="" class="logo"></image>
    </view>
    <view>
      <view class="align-items margin">
        <image src="https://cczdsz.cn/app/images//zh.png" mode="" class="img"></image>
        <input type="text" placeholder="账号" placeholder-class="font-forty-eight"
               class="input font-forty-eight" v-model="form.number" />
      </view>
      <view class="align-items margin">
        <image src="https://cczdsz.cn/app/images//mm.png" mode="" class="img"></image>
        <input type="password" placeholder="密码" placeholder-class="font-forty-eight"
               class="input font-forty-eight" v-model="form.password" />
      </view>
    </view>
    <view class="remember">
      <u-checkbox-group @change="checkboxGroupChange">
        <u-checkbox
            @change="checkboxChange"
            v-model="item.checked"
            v-for="(item, index) in list" :key="index"
            :name="item.name"
        >{{item.name}}</u-checkbox>
      </u-checkbox-group>
    </view>
    <view @click="login()">
      <button class="background-color1 white font-forty-eight btn">登录</button>
    </view>
  </view>
</template>
<script>
import service from '@/api/index.js'
export default {
  data() {
    return {
      form: {
        number: '',
        password: ''
      },
      list:[
        {
          name: '记住密码',
          checked: true,
          disabled: false
        }
      ],
      flag: true,
    }
  },
  onLoad() {
    const HCnumber = uni.getStorageSync('HCnumber');
    const HCpassword = uni.getStorageSync('HCpassword');//缓存的密码
    if(HCnumber && HCpassword){
      this.form.number = HCnumber;
      this.form.password = HCpassword;
    }
  },
  methods: {
    login() {
      if (this.form.number === '') {
        this.$UTILS.showPrompt('请输入工号！')
      } else if (this.form.password === '') {
        this.$UTILS.showPrompt('请输入密码！')
      } else {
        let _this = this;
        let param = {
          jobNum: _this.form.number,
          password: _this.form.password
        }
        if(_this.flag){
          uni.setStorageSync('HCnumber', _this.form.number);
          uni.setStorageSync('HCpassword', _this.form.password);
        }else{
          uni.removeStorageSync('HCnumber');
          uni.removeStorageSync('HCpassword');
        }
        service.login(param).then(res => {
          console.log('res', res.token)
          uni.setStorage({
            key: 'token',
            data: res.token,
            success: (res) => {
              console.log('登陆成功res',res)
              console.log('登陆成功')
              this.$UTILS.showPrompt('登录成功！')
              setTimeout(()=>{
                console.log('跳')
                uni.switchTab({
                  url:'/pages/index/index'
                })
                // uni.navigateTo({
                // 	url:'/pages/noLogin/roadSection/roadSection?type=2'
                // })
                console.log('跳')
              },2000)

            },
            fail: (e) => {
              console.log(e)
            }
          })
        })
      }
    },
    checkboxChange(e) {
      this.flag = e.value;
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      if(e.length > 0){
        uni.setStorageSync('HCnumber', this.form.number);
        uni.setStorageSync('HCpassword', this.form.password);
      }else{
        uni.removeStorageSync('HCnumber');
        uni.removeStorageSync('HCpassword');
      }
    },
  }
}
</script>
<style lang="scss">
.background {
  z-index: -1;
  width: 100%;
  height: 610rpx;
}
.title {
  display: flex;
  margin: 20rpx 0;
  .logo {
    width: 690rpx;
    height: 62rpx;
    margin: -6px auto;
  }
}
.margin {
  margin:20rpx;
  background: #f1f7ff;
  border: solid 1rpx #84b7ff;
  border-radius: 80rpx;
  padding: 0 50rpx;
  width: 86%;
  margin: 26rpx auto;
  .img {
    width: 70rpx;
    height: 60rpx;
  }

  .input {
    width: 100%;
    height: 75rpx;
    padding: 20rpx 20rpx;
    font-size: 32rpx;
    color: #999999;
  }
}
.remember{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 80rpx;
  letter-spacing: 2rpx;
}
.btn {
  width: 86%;
  margin: 0rpx auto 0;
  background: linear-gradient(45deg, #55bafe, #3072ff);
  border-radius: 72rpx;
  box-shadow: 0rpx 0rpx 20rpx #3f8fff;
}
</style>