yicangzongtai_app_240321/pages/research/register/login.vue

<template>
  <view class="verification">
    <navbar :config="config" backColor="#666"></navbar>
    <form @submit="formSubmit">
      <view class="content">
        <view class="password">
          <view class="left">
            密码登录
            <text @click="goToForgetPass">忘记密码</text>
          </view>
          <view class="right" @click="goToverification">
            验证码登录<text class="iconfont  u-font24 u-999">&#xe6c7;</text>
          </view>
        </view>
        <view class="phone">
          <view class="number">
            手机号
          </view>
          <input type="number" value="" name="phone" @input="onPhone" maxlength="11" placeholder="请输入手机号"
            placeholder-class="phone-login" />
        </view>
        <view class="passpwd">
          <view class="number">
            密码登录
          </view>
          <input type="text" value="" name="pw" password="true" maxlength="11" @input="onPassword" placeholder="请输入登录密码"
            placeholder-class="password-login" />
        </view>
        <view class="agreement">
          <view class="whole">
            <view class="top" v-if="flag" @click="onFlag">
              <icon type="success" color="#FF0000" size="17"></icon>
            </view>
            <view class="top" v-else style="width: 30rpx;height: 30rpx;border-radius: 50%;border: #ccc solid 1rpx;"
              @click="onFlag"></view>
          </view>
          <view class="agree">
            我已阅读并同意<text @click="goToAgreement">《会员注册协议》</text>
          </view>
        </view>
        <button class="login-button" form-type="submit">
          登录
        </button>
        <view class="go-to-register" @click="goToregister">
          去注册
        </view>
      </view>
    </form>
  </view>

  </view>
</template>

<script>
  import {
    appLogin,
    getAccountInfo
  } from "../../../api/login.js"
  export default {
    data() {
      return {
        config: {
          back: false, //false是tolbar页面 是则不写
          title: '用户登录',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#1A1A1A',
        },
        flag: false, //用户协议
        phone: "", //手机号
        password: "", //密码
        // isPhone:false,
      }
    },
    methods: {
      //忘记密码
      goToForgetPass() {
        uni.navigateTo({
          url: "../setup/forgetPass"
        })
      },
      //跳转用户注册协议
      goToAgreement() {
        uni.navigateTo({
          url: "./agreement"
        })
      },
      //验证码登录
      goToverification() {
        uni.redirectTo({
          url: "./verification"
        })


      },
      //去注册
      goToregister() {
        uni.redirectTo({
          url: "./register"
        })
      },
      //登录
      async formSubmit(e) {
        if (!this.phone) {
          this.$mUtil.toast("请输入手机号")
          return false
        }
        if (!this.password) {
          this.$mUtil.toast("请输入密码")
          return false
        }
        if (this.flag == false) {
          this.$mUtil.toast("请先同意协议")
          return false
        }
        if (!(this.phone.match(this.$mConfig.telRegex))) {
          this.$mUtil.toast("请输入正确的手机号")
          return false
        }
        let param = {
          mobile: this.phone,
          password: this.password,
          cid: uni.getStorageSync('cid')
        }

        let res = await this.$http.post(appLogin, param)
        if (res && res.code == 200) {
          if (res.data.code != 500) {
            this.$mUtil.toast("登录成功")
            uni.setStorageSync('apiToken', res.data.token);
            uni.setStorageSync("shop", res.data.shop);
            this.$http.get(getAccountInfo).then(res => {
              if (res && res.code == 200) {
                uni.setStorageSync("personal", res.data)
              }
            })
            setTimeout(function() {
              uni.navigateBack({
                delta: 1
              })
            }, 1000)
          } else {
            this.$mUtil.toast(res.data.msg)
          }
        }
      },
      //手机号
      onPhone(e) {
        this.phone = e.detail.value
        // if(this.phone.match(this.$mConfig.telRegex)){
        // 	this.isPhone=true
        // }else{
        // 	this.isPhone=false
        // }
      },
      //密码
      onPassword(e) {
        this.password = e.detail.value
      },

      //用户协议
      onFlag() {
        this.flag = !this.flag
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .hx-navbar__content__main_center_txt {
    span {
      color: #fff;
      font-size: 36rpx;
      font-weight: 400;
      font-family: PingFang SC, PingFang SC-Regular;
    }
  }

  .phone-login {
    color: #CCCCCC;
    font-size: 28rpx;
    font-weight: 500;
  }

  .password-login {
    color: #CCCCCC;
    font-size: 28rpx;
    font-weight: 500;
  }

  .go-to-register {
    padding: 18rpx 0;
    color: #FA6138;
    font-size: 32rpx;
    font-weight: Regular;
    width: 100%;
    text-align: center;
    margin-top: 24rpx;
    border: 1rpx solid #3775F6;
    border-radius: 20rpx;
  }

  .login-button {
    width: 100%;
    text-align: center;
    margin-top: 70rpx;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: Regular;
    background-color: #FA6138;
    border-radius: 20rpx;
  }

  .agreement {
    margin-top: 40rpx;
    display: flex;
  }

  .agree {
    font-size: 28rpx;
    color: #999999;
    font-weight: Regular;
    margin-left: 10rpx;

    text {
      color: #0047B1;
    }
  }

  .top {
    display: flex;
    align-items: center;
  }

  .choice {
    margin: 0 50rpx;
    display: flex;
    align-items: center;

    .whole {
      display: flex;
      align-items: center;
    }
  }



  .passpwd {
    display: flex;
    margin-top: 40rpx;
    padding-bottom: 32rpx;
    border-bottom: 1rpx solid #E6E6E6;

    .number {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
    }

    input {
      flex: 1;
      margin-left: 40rpx;
    }
  }

  .phone {
    display: flex;
    align-items: center;
    margin-top: 40rpx;
    padding-bottom: 32rpx;
    border-bottom: 1rpx solid #e6e6e6;

    .number {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }

    input {
      flex: 1;
      margin-left: 70rpx;
    }
  }

  .password {
    display: flex;

    .left {
      font-size: 38rpx;
      font-weight: Bold;
      color: #333333;
      line-height: 28rpx;
      flex: 1;

      text {
        font-size: 28rpx;
        color: #666666;
        font-weight: 400;
        margin-left: 20rpx;

      }
    }

    .right {
      color: #666666;
      font-size: 28rpx;
      font-weight: Regular;

    }
  }

  .content {
    margin: 80rpx 50rpx;
  }
</style>