applet/pages/login/otherLogin.vue

<template>
  <view
    class="container-mine"
    :style="{
      backgroundImage: `url(${$handleImageUrl(
        '/login/bg1.png'
      )}) no-repeat 0 -70rpx`,
    }"
  >
    <uv-navbar
      title="注册/登录"
      titleStyle="font-weight: 700;"
      placeholder
      @leftClick="
        () => {
          uni.navigateBack();
        }
      "
      bgColor="transparent"
    ></uv-navbar>
    <view class="welcome">
      <view>您好</view>
      <view>欢迎登录商城！</view>
    </view>
    <view class="formBox">
      <view class="title">手机号登录</view>
      <view class="tig">首次登录将为您注册</view>
      <view class="phoneBox">
        <view class="phoneBox_l">
          <image :src="$handleImageUrl('/login/icon1.png')" mode=""></image>
          手机号
        </view>
        <view class="phoneBox_r">
          <input
            v-model="mobile"
            type="number"
            maxlength="11"
            placeholder="请输入"
            placeholder-class="placeholder-class"
          />
        </view>
      </view>
      <view class="btnBox">
        <uv-button type="primary" hover-class="hoverClass" @click="login"
          >立即登录</uv-button
        >
      </view>
      <view class="agreementCls">
        <uv-checkbox-group size="26rpx" v-model="checked">
          <uv-checkbox
            shape="square"
            size="30rpx"
            active-color="#0090FF"
            :name="1"
          >
            我已阅读同意
          </uv-checkbox>
        </uv-checkbox-group>
        <text @click="goAgreement('user_protocol')">《服务协议》</text>和<text
          @click="goAgreement('privacy_protocol')"
          >《隐私政策》</text
        >
      </view>
      <!-- <view class="loginBox">
        <uv-divider
          half-width="50"
          textColor="##1A1A1A"
          text="更多登录方式"
        ></uv-divider>
        <view class="loginBox_b">
          <view
            @click="wxLogin(0)"
            class="wxCls"
            v-if="isInstallWx || platform != 'ios'"
          >
            <text class="iconfont">&#xe6ea;</text>
          </view>
          <view
            @click="alipayLogin(1)"
            v-if="isInstallZfb || platform != 'ios'"
          >
            <text class="iconfont" style="color: #00aaee">&#xe611;</text>
          </view>
          <view
            class="appleCls"
            v-if="osVersion >= 13 && platform == 'ios'"
            @click="appleLogin()"
          >
            <text class="iconfont">&#xe624;</text>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script setup>
import { miniappThirdLogin } from "@/api/login";
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const mobile = ref(""),
  checked = ref(false),
  osVersion = ref(""),
  platform = ref(""),
  isInstallWx = ref(true), //是否安装微信
  isInstallZfb = ref(true), //是否安装支付宝
  isOneClickLogin = ref(false);
onLoad(() => {
  uni.getSystemInfo({
    success: (res) => {
      osVersion.value = res.osVersion.split(".")[0];
      platform.value = res.platform;
    },
  });
  // #ifdef APP-PLUS
  isInstallWx.value = plus.runtime.isApplicationExist({
    pname: "com.tencent.mm",
    action: "weixin://",
  });
  isInstallZfb.value = plus.runtime.isApplicationExist({
    pname: "com.eg.android.AlipayGphone",
    action: "alipay://",
  });
  plus.push.getClientInfoAsync((info) => {
    let cid = info["clientid"];
    uni.setStorageSync("cid", cid);
  });
  // #endif
});
const login = () => {
  if (!mobile.value) {
    return uni.$uv.toast("请输入手机号");
  } else if (!uni.$uv.test.mobile(mobile.value)) {
    return uni.$uv.toast("请输入正确手机号");
  } else if (!checked.value) {
    return uni.$uv.toast("请阅读并同意相关协议");
  }
  uni.navigateTo({
    url: "/pages/login/code?mobile=" + mobile.value,
  });
};
const goAgreement = (val) => {
  uni.navigateTo({
    url: "/pages/protocol/index?code=" + val,
  });
};
// 微信登录
const wxLogin = (thirdType) => {
  if (!checked.value) {
    return uni.$uv.toast("请阅读并同意相关协议");
  }
  uni.login({
    provider: "weixin",
    onlyAuthorize: true, // 微信登录仅请求授权认证
    success: (event) => {
      const { code } = event;
      // 客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
      let param = {
        code: code,
        thirdType: thirdType,
      };
      loginRe(param);
    },
    fail: (err) => {
      console.log(err);
      uni.$uv.toast("当前环境不支持微信操作!");
    },
  });
};
const loginRe = (param) => {
  console.log("33333", param);
  miniappThirdLogin(param)
    .then((res) => {
      console.log("222222", res);
      if (res.data.isReg) {
        uni.showToast({
          title: "登录成功！",
          icon: "success",
          duration: 1500,
        });
        uni.setStorageSync("apiToken", res.data.token);
      } else {
        uni.navigateTo({
          url:
            "/pages/login/bindPhone?identityCode=" +
            res.data.identityCode +
            "&thirdType=" +
            param.thirdType,
        });
      }
    })
    .catch((e) => {
      console.log("11111111", e);
    });
};
// 支付宝登录
const alipayLogin = (thirdType) => {
  if (!checked.value) {
    return uni.$uv.toast("请阅读并同意相关协议");
  }
  const AlipayAuth = uni.requireNativePlugin("DHQ-AlipayAuth");
  AlipayAuth.login(
    {
      appId: "2021006116626014", //你在支付宝平台申请的App ID
      scheme: "xctUrlSchemes", // 需要传到支付宝SDK的scheme,注意需要在manifest.json-->App其他常用配置-->UrlSchemes中配置Android和iOS的
      scope: "auth_user", //默认为auth_user
      init: "init", //默认传入init
    },
    (res) => {
      console.log("原生授权返回res", res);
      //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
      let code = res.auth_code;
      if (code) {
        let param = {
          code: code,
          thirdType: thirdType,
        };
        this.loginRe(param);
      }
    }
  );
  // uni.login({
  //   "provider": "alipay",
  //   success: (event) => {
  //     const {
  //       code
  //     } = event
  //     let param = {
  //       code: code,
  //       thirdType: thirdType
  //     }
  //     loginRe(param)
  //   },
  //   fail: (err) => {
  //     console.log(err);
  //     // uni.$uv.toast('当前环境不支持支付宝操作!');
  //   }
  // })
};
// 苹果登录
const appleLogin = () => {
  if (!checked.value) {
    return uni.$uv.toast("请阅读并同意相关协议");
  }
  uni.login({
    provider: "apple",
    success: (event) => {
      const { code } = event;
      let param = {
        code: code,
        thirdType: 2,
      };
      loginRe(param);
    },
  });
};
</script>

<style scoped>
page {
  background-color: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.placeholder-class {
  font-size: 28rpx;
  color: #cccccc;
}
.container-mine {
  // background: url("/static/login/bg1.png") no-repeat 0 -70rpx !important;
  background-size: 750rpx 742rpx !important;
  padding: 0 25rpx;
  .welcome {
    font-weight: 700;
    color: #303030;
    font-size: 42rpx;
    margin-top: 90rpx;
  }
  .formBox {
    padding: 50rpx 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
    margin-top: 60rpx;
    .title {
      font-weight: 700;
      color: #303030;
      font-size: 40rpx;
      text-align: center;
    }
    .tig {
      font-size: 22rpx;
      color: #666666;
      text-align: center;
    }
    .phoneBox {
      display: flex;
      justify-content: space-between;
      padding: 60rpx 0 30rpx;
      border-bottom: 1rpx solid rgba(204, 204, 204, 0.4);
      .phoneBox_l {
        font-size: 28rpx;
        color: #1a1a1a;
        display: flex;
        align-items: center;
        image {
          width: 26rpx;
          height: 38rpx;
          margin-right: 10rpx;
        }
      }
      .phoneBox_r {
        flex: 1;
        input {
          font-size: 28rpx;
          color: #1a1a1a;
          text-align: right;
        }
      }
    }
    .btnBox {
      margin-top: 80rpx;
      ::v-deep .uv-button {
        height: 90rpx;
        font-size: 28rpx;
        background: #eb5153;
        border-color: #eb5153;
        border-radius: 92rpx;
      }
    }
    .agreementCls {
      margin: auto;
      width: 615rpx;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 40rpx;
      color: #808080;
      ::v-deep .u-checkbox__label {
        margin-right: 0rpx;
        font-size: 26rpx;
      }
      ::v-deep .uv-checkbox__icon-wrap--square {
        border: 1rpx solid #219eff !important;
      }
      text {
        color: #219eff;
      }
      ::v-deep .uv-checkbox-group {
        flex: none;
      }
    }
  }
  .loginBox {
    position: absolute;
    bottom: 100rpx;
    width: 100%;
    left: 0;
    .uv-divider {
      width: 350rpx;
      margin: auto;
    }
    .loginBox_b {
      display: flex;
      justify-content: center;
      margin: auto;
      margin-top: 60rpx;

      > view {
        text-align: center;
        margin: 0 30rpx;

        text {
          font-size: 72rpx;
        }
        > view {
          font-size: 26rpx;
          color: #333333;
        }
      }
      .wxCls {
        width: 72rpx;
        height: 72rpx;
        background: #4cbf00;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 72rpx;
        text {
          font-size: 52rpx;
        }
      }
      .appleCls {
        width: 72rpx;
        height: 72rpx;
        background: #272636;
        color: #fff;
        border-radius: 50%;
        text-align: center;
        line-height: 72rpx;
        text {
          font-size: 52rpx;
        }
      }
    }
  }
}
</style>