gupiao_weixin_uniapp/pages/index/phoneLogin.vue

<template>
  <view class="phone_login">
    <view class="center">
      <view class="title">手机号登录/注册</view>
      <view class="ipt_box">
        <u-input
          placeholder="请输入手机号"
          v-model="phone"
          border="bottom"
          type="number"
          fontSize="32rpx"
          clearable
        ></u-input>
        <view style="margin-top: 50rpx">
          <u-input
            placeholder="请输入密码"
            v-model="password"
            border="bottom"
            type="password"
            fontSize="32rpx"
            clearable
          ></u-input>
          <!-- <u-input
            border="bottom"
            clearable
            placeholder="请输入验证码"
            v-model="value"
            fontSize="32rpx"
          >
            <template slot="suffix">
              <u-code
                ref="uCode"
                @change="codeChange"
                seconds="60"
                changeText="Xs"
              ></u-code>
              <u-button
                @tap="getCode"
                :text="tips"
                class="custom-style"
                :plain="true"
                size="mini"
              ></u-button>
            </template>
          </u-input> -->
        </view>
      </view>
      <view class="btn_box" @tap="submit">
        <button class="btn">登录</button>
      </view>
      <view class="login_tips">未注册的账号第一次登陆时自动注册账号</view>
      <view class="protocol">
        <image
          v-if="!isChoose"
          src="../../static/login_xuanze.png"
          mode="scaleToFill"
          style="width: 40rpx; height: 40rpx"
          @tap="isChoose = !isChoose"
        />
        <image
          v-if="isChoose"
          src="../../static/login_xuanze_true.png"
          mode="scaleToFill"
          style="width: 40rpx; height: 40rpx"
          @tap="isChoose = !isChoose"
        />
        <view class="protocolText" @tap.stop="isChoose = !isChoose">
          我已阅读并同意
          <view @tap.stop="toWeb(1)" style="color: #62afed">《用户协议》</view>
          <view @tap.stop="toWeb(2)" style="color: #62afed">《隐私政策》</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tips: '',
        // 验证码
        value: '',
        // 手机号
        phone: '',
        // 是否同意协议
        isChoose: true,
        // 邀请码
        value1: '',
        password: '',
      }
    },
    methods: {
      // 验证码
      codeChange(text) {
        this.tips = text
      },
      // 获取验证码
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          if (this.phone) {
            // 模拟向后端请求验证码
            uni.showLoading({
              title: '正在获取验证码',
            })
            setTimeout(() => {
              uni.hideLoading()
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            }, 2000)
            this.$api.post('/login/sendSms', { phone: this.phone })
          } else {
            uni.$u.toast('请先输入手机号')
          }
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      },
      submit() {
        if (this.isChoose) {
          if (this.phone && this.password) {
			  this.$cache.set('gupiao_phone',this.phone )
            this.$api
              .post('/user/login/smsCodeLogin', {
                phone: this.phone,
                createWay: 1,
              })
              .then(r => {
                if (r) {
                  let re = r
                  this.$cache.set('token', re)
                  uni.switchTab({
                    url: `/pages/home/home`,
                  })
                }
              })
            // console.log(res.code)
            //发起网络请求
          } else {
            uni.$u.toast('请先输入手机号和密码')
          }
        } else {
          uni.$u.toast('请先同意协议')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 0 24rpx;
  }
  .title {
    margin-top: 120rpx;
    font-size: 44rpx;
    font-weight: bold;
  }
  .ipt_box {
    margin-top: 100rpx;
  }
  .custom-style {
    color: #6195fe;
    text-align: center;
  }
  /deep/.u-button--plain.u-button--info {
    color: #6195fe !important;
    border: 0 !important;
    font-size: 26rpx;
  }
  /deep/.u-button--mini {
    font-size: 32rpx !important;
  }
  /deep/.u-input--no-radius {
    padding: 24rpx 18rpx !important;
  }
  .btn_box {
    margin-top: 96rpx;
  }
  .btn {
    height: 88rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 88rpx;
    border: 0;
    background-color: #3478ff;
    color: white;
  }
  .protocol {
    padding: 0 30rpx;
    position: fixed;
    display: flex;
    bottom: 60rpx;
    margin-top: 80rpx;
    align-items: center;

    .protocolText {
      display: flex;
      margin-left: 16rpx;
      font-size: 24rpx;

      text {
        color: #6678d7;
      }
    }
  }
  .login_tips {
    color: #999999;
    font-size: 24rpx;
    margin-top: 24rpx;
    text-align: center;
  }
  /deep/.u-number-box {
    align-items: start !important;
  }
</style>