horzi_rai_wxa/pageMy/login/login.vue

<template>
  <view class="container login-container">
    <view class="bind-tab">
      <text :class="['tab', { 'act-tab': bind_type === 1 }]" @click="toggleTab(1)">手机号</text>
      <text :class="['tab', { 'act-tab': bind_type === 2 }]" @click="toggleTab(2)">邮箱</text>
    </view>
    <view class="bind-cont">
      <view class="tel-bind" v-if="bind_type === 1">
        <view class="ipt-item">
          <label class="item-label item-iphone" @click="isAreaCode = true">{{ showCountryCode }} <u-icon :name="isAreaCode ? 'arrow-up' : 'arrow-down'" color="#B2B2B2" size="28"></u-icon></label>
          <input type="number" v-model="phoneIpt" class="ipt" placeholder="请输入手机号" style="width: 300rpx" />
          <button open-type="getPhoneNumber" value="用户授权" @getphonenumber="getPhoneNumber" class="code-btn">微信手机号绑定</button>
        </view>
        <view class="ipt-item">
          <label class="item-label">验证码</label>
          <input type="number" v-model="phone_code" class="ipt" placeholder="请输入4位验证码" maxlength="6" style="width: 300rpx" />
          <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
          <button @click="getCode" class="code-btn">{{ tips }}</button>
        </view>
        <view class="bind-bot">
          <u-checkbox v-model="checked" :disabled="false" active-color="#07C160" size="34"></u-checkbox>
          <view class="tip">我已阅读并同意<text @click="lookArgeement">《用户服务协议》</text> </view>
        </view>
        <button @click="bindPhoneHandle" class="infobutton bind-btn">提交</button>
      </view>
      <view class="email-bind" v-else>
        <view class="ipt-item">
          <label class="item-label">邮箱</label>
          <input type="text" v-model="email" class="ipt" placeholder="请输入邮箱地址" />
        </view>
        <view class="ipt-item">
          <label class="item-label">验证码</label>
          <input type="number" v-model="codeNum" class="ipt" placeholder="请输入4位验证码" maxlength="6" style="width: 300rpx" />
          <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
          <button @click="getCode" class="code-btn">{{ tips }}</button>
        </view>
        <view class="bind-bot">
          <u-checkbox v-model="checked" :disabled="false" active-color="#07C160" size="34"></u-checkbox>
          <view class="tip">我已阅读并同意<text @click="lookArgeement">《用户服务协议》</text> </view>
        </view>
        <button @click="bindHandle" class="infobutton bind-btn">提交</button>
      </view>
    </view>
    <view class="select-box">
      <u-popup v-model="isAreaCode" mode="bottom" @close="cancel">
        <view class="box" style="color: #333333; font-size: 28rpxrpx">请选择您的国际区号</view>
        <view class="box" style="color: #2c83ff" @click="areacode('86')">大陆+86</view>
        <view class="box" style="color: #2c83ff" @click="areacode('852')">香港+852</view>
        <view class="box" style="color: #2c83ff" @click="areacode('886')">台湾+886</view>
        <view class="box" style="color: #2c83ff" @click="areacode('1')">美国+1</view>
        <view class="box" style="color: #2c83ff" @click="areacode('65')">新加坡+65</view>
        <view class="box box-bottom" style="color: #a9afb8" @click="cancel">取消</view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import { User } from "@/config/api.js";
export default {
  data() {
    return {
      bind_type: 1, //绑定方式
      checked: false,
      isArgee: false,
      seconds: 60,
      tips: "获取验证码",
      email: "", //邮箱
      phoneNum: "", //手机号,
      codeNum: "", //验证码
      phoneIpt: "",
      phone_code: "",
      showCountryCode: "+86",
      countryCode: "86", //区号
      isAreaCode: false,
      scene: "", //分享人的分享码
    };
  },
  methods: {
    /* 切换方式 */
    toggleTab(val) {
      this.email = "";
      this.phoneNum = "";
      this.codeNum = "";
      this.bind_type = val;
      this.phoneIpt = "";
      this.phone_code = "";
      this.checked = false;
    },
    /* 授权获取手机号 */
    getPhoneNumber(e) {
      //console.log(e)
      if (e.detail.errMsg == "getPhoneNumber:ok") {
        // 点击了允许
        User.getPhoneNum({
          EncryptedData: e.detail.encryptedData,
          Iv: e.detail.iv,
        }).then((res) => {
          if (res.Ret === 200) {
            this.phoneNum = res.Data.PurePhoneNumber;
            this.countryCode = res.Data.CountryCode;
            this.phoneIpt = res.Data.PhoneNumber;
            this.bindHandle();
          }
        });
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    /* 获取邮箱验证码 */
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        if (this.bind_type === 1) {
          !this.phoneIpt && this.$util.toast("请先输入手机号");
          this.phoneIpt &&
            User.getPhoneCode({
              Mobile: this.phoneIpt,
              AreaNum: this.countryCode,
            }).then((res) => {
              if (res.Ret === 200) {
                this.$refs.uCode.start();
              }
            });
        } else {
          !this.email && this.$util.toast("请先输入邮箱");
          this.email &&
            User.getEmailCode({
              Email: this.email,
            }).then((res) => {
              if (res.Ret === 200) {
                this.$refs.uCode.start();
              }
            });
        }
      }
    },
    /* 绑定 */
    bindHandle() {
      let params;
      if (this.bind_type === 1) {
        params = {
          LoginType: 1,
          Mobile: this.phoneNum,
          CountryCode: this.countryCode,
          ShareUserCode: this.scene,
        };
        User.Bind(params).then((res) => {
          if (res.Ret === 200) {
            let token = res.Data.Authorization;
            this.$db.set("access_token", token);
            uni.navigateBack({
              delta: 1,
              fail: (err) => {
                uni.switchTab({
                  url: "/pages/index/index",
                });
              },
            });
          }
        });
      } else {
        if (this.email && this.codeNum && this.checked) {
          params = {
            Email: this.email,
            LoginType: 2,
            VCode: this.codeNum,
            ShareUserCode: this.scene,
          };
          User.Bind(params).then((res) => {
            if (res.Ret === 200) {
              let token = res.Data.Authorization;
              this.$db.set("access_token", token);
              uni.navigateBack({
                delta: 1,
                fail: (err) => {
                  uni.switchTab({
                    url: "/pages/index/index",
                  });
                },
              });
            }
          });
        } else {
          this.$util.toast(!this.checked ? "请先勾选用户服务协议" : !this.email ? "请输入邮箱地址" : "请输入验证码");
        }
      }
    },
    lookArgeement() {
      uni.navigateTo({
        url: "/pageMy/agreement/agreement",
      });
    },
    /* 绑定手机号 */
    bindPhoneHandle() {
      if (this.phoneIpt && this.phone_code && this.checked) {
        let params = {
          Mobile: this.phoneIpt,
          LoginType: 3,
          VCode: this.phone_code,
          CountryCode: this.countryCode,
          ShareUserCode: this.scene,
        };
        User.Bind(params).then((res) => {
          if (res.Ret === 200) {
            let token = res.Data.Authorization;
            this.$db.set("access_token", token);
            uni.navigateBack({
              delta: 1,
              fail: (err) => {
                uni.switchTab({
                  url: "/pages/index/index",
                });
              },
            });
          }
        });
      } else {
        this.$util.toast(!this.checked ? "请先勾选用户服务协议" : !this.phoneIpt ? "请输入手机号" : "请输入验证码");
      }
    },
    areacode(num) {
      this.showCountryCode = "+" + num;
      this.countryCode = num;
      this.isAreaCode = false;
    },
    cancel() {
      this.isAreaCode = false;
    },
  },
  onLoad(options) {
    /* 校验session */
    uni.checkSession({
      success: (res) => {
        if (res.errMsg != "checkSession:ok") {
          uni.login({
            success: (result) => {
              User.wechatLog({
                Code: result.code,
              }).then((res) => {
                let token = res.Data.Authorization;
                this.$db.set("access_token", token);
              });
            },
          });
        }
      },
      fail: (err) => {
        uni.login({
          success: (result) => {
            User.wechatLog({
              Code: result.code,
            }).then((res) => {
              let token = res.Data.Authorization;
              this.$db.set("access_token", token);
            });
          },
        });
      },
    });
    this.scene = options.scene || "";
  },
  onShow() {
    // #ifdef MP-WEIXIN
    uni.hideHomeButton();
    // #endif
  },
};
</script>

<style lang="scss">
.login-container {
  color: #333;
  .bind-tab {
    padding: 30rpx 34rpx 0;
    display: flex;
    align-items: center;
    font-size: 34rpx;
    .tab {
      margin-right: 60rpx;
      padding-bottom: 8rpx;
      &.act-tab {
        border-bottom: 4rpx solid #07c160;
      }
    }
  }
  .bind-cont {
    .tel-bind {
      padding: 40rpx 0 60rpx;
    }
    .infobutton {
      width: 368rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #07c160;
      color: #fff;
      margin: 40rpx auto 0;
    }
    .email-bind {
      padding: 40rpx 0 60px;
    }
    .ipt-item {
      padding: 33rpx 32rpx;
      border-bottom: 1rpx solid #e5e5e5;
      display: flex;
      align-items: center;
      font-size: 34rpx;
      position: relative;
      .item-label {
        text-align: justify;
        text-align-last: justify;
        display: inline-block;
        width: 106rpx;
        margin-right: 40rpx;
      }
      .ipt {
        width: 500rpx;
        font-size: 32rpx;
        color: #666;
      }
      .code-btn {
        position: absolute;
        right: 34rpx;
        background-color: #fff;
        font-size: 28rpx;
        color: #07c160;
      }
    }
    .bind-btn {
      margin-top: 140rpx;
    }
    .bind-bot {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      padding: 0 34rpx;
      margin-top: 30rpx;
      .check-sty {
        transform: scale(0.7);
      }
      .tip {
        text {
          display: inline;
          color: #07c160;
        }
      }
    }
  }
  .item-iphone {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 118rpx !important;
    margin-right: 26rpx !important;
  }
}
</style>