123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588 |
- <template>
- <view>
- <!--#ifdef APP-PLUS-->
- <view class="lz-status_bar">
- <view class="lz-top_view"></view>
- </view>
- <!--#endif-->
- <view class="kaoshi-head" v-if="mode == 3">
- <view class="kaoshi-head-top">
- <view class="kaoshi-head-left">
- <view class="iconfont icon-zuojiantou" @tap="$navigateBack"></view>
- </view>
- </view>
- <view class="kaoshi-logo">
- <image :src="static_media.img01" class="kaoshi-logo-img"></image>
- </view>
- <view class="kaoshi-login">
- <view class="kaoshi-login-content">
- <view class="kaoshi-login-title">
- <view
- :class="{ 'kaoshi-login-title-active': form_type == 0, 'kaoshi-login-title-other': form_type != 0 }"
- @tap="form_type = 0">登录
- </view>
- <view
- :class="{ 'kaoshi-login-title-active': form_type == 1, 'kaoshi-login-title-other': form_type != 1 }"
- @tap="form_type = 1">注册
- </view>
- </view>
- <view v-if="form_type == 0" class="kaoshi-input-group">
- <view class="kaoshi-input-row border kaoshi-login-flex">
- <text class="iconfont icon-shouji"></text>
- <m-input class="m-input" type="text" clearable v-model="account" placeholder="请输入账号"
- style="flex: 1;"></m-input>
- </view>
- <view class="kaoshi-input-row kaoshi-login-flex ">
- <text class="iconfont icon-suo"></text>
- <m-input type="password" displayable v-model="password" placeholder="请输入密码"
- style="flex: 1;"></m-input>
- </view>
- </view>
- <view v-if="form_type == 1" class="kaoshi-input-group">
- <view class="kaoshi-input-row border kaoshi-login-flex">
- <text class="iconfont icon-shouji"></text>
- <m-input type="text" clearable v-model="account" placeholder="请输入用户名" style="flex: 1;">
- </m-input>
- </view>
- <view class="kaoshi-input-row kaoshi-login-flex">
- <text class="iconfont icon-suo"></text>
- <m-input type="password" displayable v-model="password" placeholder="请输入密码"
- style="flex: 1;"></m-input>
- </view>
- </view>
- <view class="kaoshi-login-forget">
- </view>
- <view style="font-size: 14px;color: #888;margin: 40px auto 17px;text-align: center;">暂不登录,<text
- style="color: #3b7bf9;" @tap="toMain">随便逛逛</text></view>
- <view class="kaoshi-login-button" v-if="form_type == 0">
- <button type="primary" class="kaoshi-primary" @tap="bindLogin">登录</button>
- </view>
- <view class="kaoshi-login-button" v-if="form_type == 1">
- <button type="primary" class="kaoshi-primary" @tap="creaet_user">注册</button>
- </view>
- </view>
- </view>
- </view>
- <view v-else>
- <view class="layout">
- <view class="kaoshi-logo" style="margin-top: 30px;">
- <image :src="static_media.img01" class="kaoshi-logo-img"></image>
- </view>
- <button style="margin-top: 80px;" v-if="canIUseGetUserProfile" @tap="getUserProfile" class="ydy-button">
- 立即登录</button>
- <button v-else open-type="getUserInfo" lang="zh_CN" @getuserinfo="passive_authorize"
- class="ydy-button">立即登录
- </button>
- <view @tap="cancel" style="font-size:15px;color: #8a8a8a;margin-top:9px;">取消登录</view>
- <view class="ydy-b">您需要授权才能正常使用此功能,我们承诺您的信息只应用在本平台,不做其他无关使用。</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from "vuex";
- import mInput from "@/components/m-input.vue";
- export default {
- components: {
- mInput,
- },
- data() {
- return {
- recommend: '',//邀请人Uid
- source: '',//邀请人ABCDE
- mode: 1, //程序编译版本:mode:3为账号密码登录
- Shouquan: false,
- showmodal: false,
- account: "",
- password: "",
- form_type: 0, // 0 登录;1 注册
- rawData: {},
- canIUseGetUserProfile: false, //小程序更改授权方式 2021年5月17日 不再使用get-authorize组件
- };
- },
- computed: {
- ...mapState(["userinfo", "forcedLogin", "subject"]),
- static_media() {
- return {
- img01: this.$myConfig.localMedia + '/static/img/login.png'
- }
- }
- },
- onLoad(opts) {
- this.mode = this.$myConfig.mode
- if (opts && opts.form_type) {
- this.form_type = opts.form_type
- }
- if (this.userinfo && this.userinfo.token) {
- this.toMain()
- }
- //小程序更改授权方式 2021年5月17日 不再使用get-authorize组件
- if (wx.getUserProfile) {
- this.canIUseGetUserProfile = true
- }
- // #ifdef H5
- if(opts.recommend) {
- this.recommend = opts.recommend
- uni.setStorageSync('recommend',opts.recommend)
- }else {
- this.recommend = uni.getStorageSync('recommend') || ''
- }
- if(opts.source) {
- this.source = opts.source
- uni.setStorageSync('source',opts.source)
- }else {
- this.source = uni.getStorageSync('source') || ''
- }
- // #endif
-
- // #ifdef MP
- this.recommend = uni.getStorageSync('spread_code') || ''
- // #endif
- },
- onShow() {},
- methods: {
- async creaet_user() {
- /**
- * 客户端对账号信息进行一些必要的校验。
- * 实际开发中,根据业务需要进行处理,这里仅做示例。
- */
- if (this.account.length < 2) {
- uni.showToast({
- icon: "none",
- title: "账号最短为 2 个字符"
- });
- return;
- }
- if (this.password.length < 6) {
- uni.showToast({
- icon: "none",
- title: "密码最短为 6 个字符"
- });
- return;
- }
- let res = await this.$myHttp.post({
- url: this.$myHttp.urlMap.register,
- data: {
- username: this.account,
- password: this.password,
- source: this.source,
- recommend: this.recommend
- }
- });
- if (res.code === 1) {
- this.$myUtils.$prompt.showToast({
- icon: "none",
- title: "注册成功"
- });
- const data = {
- account: this.account,
- password: this.password
- };
- const valid = await this.$myUserLogin.login(data);
- if (valid) {
- //如果已经选择了科目,直接进入首页,否者进入选择科目页面
- this.toMain();
- }
- }
- },
- async bindLogin() {
- /**
- * 客户端对账号信息进行一些必要的校验。
- * 实际开发中,根据业务需要进行处理,这里仅做示例。
- */
- if (this.account.length < 2) {
- uni.showToast({
- icon: "none",
- title: "账号最短为 2 个字符"
- });
- return;
- }
- if (this.password.length < 6) {
- uni.showToast({
- icon: "none",
- title: "密码最短为 6 个字符"
- });
- return;
- }
- const data = {
- account: this.account,
- password: this.password
- };
- const valid = await this.$myUserLogin.login(data);
-
-
- if (valid) {
- //如果已经选择了科目,直接进入首页,否者进入选择科目页面
- this.toMain();
- }else {
-
- }
- },
- //小程序更改授权方式 2021年5月17日 不再使用get-authorize组件
- getUserProfile(e) {
- let that = this,
- code = '';
- uni.login({
- provider: 'weixin',
- success: function(res) {
- if (res.errMsg == "login:ok") {
- code = res.code
- }
- }
- });
- // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
- // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
- uni.getUserProfile({
- desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
- success: (res) => {
- if (res.errMsg == "getUserProfile:ok") {
- this.bindGetUserInfo({
- code,
- ...res
- });
- }
- }
- })
- },
- cancel() {
- uni.navigateBack({
- delta: 1
- })
- },
- /**
- * 被动授权
- * */
- passive_authorize(params) {
- uni.showLoading();
- if (params.detail) {
- if (params.detail.errMsg == 'getUserInfo:ok') {
- this.getLoginCode();
- }
- }
- },
- /**
- * 获取微信登录code
- * */
- getLoginCode() {
- let that = this;
- console.log('根据获取到的用户信息处理业务代码');
- //接下来写业务代码
- uni.login({
- provider: 'weixin',
- success: function(res) {
- // console.log(res)
- if (res.errMsg == "login:ok") {
- that.getUserInfo(res);
- }
- }
- });
- },
- /**
- * 获取到用户信息
- * */
- getUserInfo(loginCode) {
- let that = this;
- // 获取用户信息
- uni.getUserInfo({
- provider: 'weixin',
- success(res) {
- console.log('获取用户信息成功');
- uni.hideLoading();
- //此处得到userInfo
- if (res.errMsg == 'getUserInfo:ok') {
- //接下来写业务代码
- that.bindGetUserInfo({
- ...loginCode,
- ...res
- });
- }
- },
- fail() {
- console.log('获取用户信息失败');
- }
- });
- },
- /**
- * 添加用户到后台数据库中
- * */
- async bindGetUserInfo(params) {
- let that = this
- let res = await this.$myHttp.post({
- url: this.$myHttp.urlMap.authMini,
- data: {
- code: params.code,
- rawData: params.rawData,
- recommend: that.recommend
- },
- permission: '',
- need_login: false,
- });
- if (res.code == 1) {
- uni.hideLoading();
- // 注册用户成功
- // 保存用户信息
- let userinfo = {
- 'user_id': res.data.user_id,
- 'group_id': res.data.group_id,
- avatarUrl: params.userInfo.avatarUrl,
- city: params.userInfo.city,
- country: params.userInfo.country,
- gender: params.userInfo.gender,
- language: params.userInfo.language,
- nickName: params.userInfo.nickName,
- province: params.userInfo.province,
- expTime: 0,
- token: res.data.token,
- };
- this.$store.commit('setUserInfo', {
- userinfo: {
- ...userinfo,
- token: res.data.token
- }
- });
- uni.showToast({
- icon: 'success',
- title: '登录成功'
- })
- this.$myUtils.$router.switchTab({
- url: "/pages/index/index"
- });
- } else {
- this.canIUse = wx.canIUse('button.open-type.getUserInfo');
- }
- },
- // async toMain() {
- // // 判断是否选择了科目
- // if (this.subject && this.subject.id && this.subject.id !== 0) {
- // // 进入首页
- // await this.$myUserLogin.getSubvip(this.subject.id)
- // this.$myUtils.$router.switchTab({
- // url: "/pages/index/index"
- // });
- // } else {
- // // 进入选择科目
- // this.$myUtils.$router.navigateTo({
- // url: "/pages/auth/choiceSubject/index"
- // });
- // }
- // },
- toMain() {
- // 判断是否选择了科目
- if (this.subject && this.subject.id && this.subject.id !== 0) {
- // 进入首页
- this.$myUtils.$router.switchTab({
- url: "/pages/index/index"
- });
- } else {
- // 进入选择科目
- this.$myUtils.$router.navigateTo({
- url: "/pages/auth/choiceSubject/index"
- });
- }
- },
- }
- };
- </script>
- <style>
- page {
- background: #f9fafe;
- }
- .kaoshi-head {
- border-bottom: none;
- background: #f9fafe
- }
- .kaoshi-logo {
- text-align: center;
- }
- .kaoshi-logo-img {
- width: 156px;
- height: 156px;
- margin-top: 25px;
- }
- .kaoshi-login {
- width: 90%;
- margin: 0 auto;
- background: #f9fafe;
- }
- .kaoshi-login-content {
- margin-top: 22px;
- margin-right: 22px;
- margin-left: 22px;
- }
- .kaoshi-login-title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 16px;
- width: 44%;
- margin: 0 auto 18px;
- line-height: 42px;
- }
- .kaoshi-login-title-active {
- border-bottom: solid 2px #3c7bfc;
- width: 30%;
- text-align: center;
- color: #000;
- font-weight: bold;
- }
- .kaoshi-login-title-other {
- border-bottom: solid 2px transparent;
- text-align: center;
- width: 30%;
- color: #888;
- }
- .kaoshi-login-flex {
- display: flex;
- align-items: center;
- justify-content: space-between
- }
- .kaoshi-login-button {
- margin-top: 15px;
- }
- .kaoshi-login-forget {
- color: #000;
- font-size: 14px;
- margin: 12px 0;
- }
- .kaoshi-input-group {
- margin-top: 4px;
- }
- .kaoshi-input-group::before {
- background-color: #fff;
- }
- .kaoshi-input-row {
- background-color: #fff;
- margin-top: 15px;
- padding: 0 15px;
- border-radius: 5px;
- overflow: hidden;
- box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
- }
- .kaoshi-input-group::after,
- .kaoshi-input-row.border::after {
- background-color: #f6f7f9 !important;
- }
- .kaoshi-primary {
- width: 175px;
- background: #3c7bfc !important;
- color: #fff !important;
- border-radius: 8px;
- font-size: 14px;
- box-shadow: 0 2px 11px rgba(0, 100, 204, 0.27);
- line-height: 35px;
- }
- .kaoshi-yanzheng {
- width: 81px;
- height: 30px;
- font-size: 12px;
- line-height: 30px;
- color: #fff;
- background: #3c7bfc;
- text-align: center;
- border-radius: 16px 16px 16px 0;
- }
- .kaoshi-password {
- text-align: right;
- color: #7d7d7d;
- }
- .border {
- border-bottom: solid 1px #fbfbfb;
- }
- .kaoshi-xieyi {
- font-weight: bold;
- text-decoration: underline;
- color: #3c7bfc;
- }
- .kaoshi-xieyi-flex {
- font-size: 13px;
- display: flex;
- align-items: center;
- color: #cecece;
- margin-top: 5px
- }
- .kaoshi-xieyi-check {
- transform: scale(0.7);
- color: #4c8cf8
- }
- .kaoshi-xieyi-text {
- color: #000;
- display: flex;
- align-items: center;
- }
- .layout {
- display: flex;
- align-items: center;
- flex-direction: column;
- }
- .ydy {
- width: 90%;
- height: 325px;
- margin: 0 auto;
- }
- .ydy-button {
- background: #3c7bfc;
- width: 82%;
- margin: 0 auto;
- text-align: center;
- font-size: 17px;
- padding: 3px;
- color: #fff;
- border-radius: 5px;
- letter-spacing: 2px;
- }
- .ydy-b {
- font-size: 13px;
- width: 83%;
- color: #888888;
- text-align: center;
- margin-top: 17px;
- line-height: 19px;
- }
- .icon-suo,
- .icon-shouji {
- color: #0f74c6;
- margin-right: 5px;
- }
- </style>
|