|
|
@@ -1,311 +1,338 @@
|
|
|
<template>
|
|
|
- <view class="permission">
|
|
|
- <Nav :leftShow='false' title="君子校园"></Nav>
|
|
|
- <view class="user-permission">
|
|
|
- <view class="head">
|
|
|
- <view class="head-button" >
|
|
|
- <image src="@/static/img/logo/logo.png" class="head-img" mode=""></image>
|
|
|
- <view class="head-text">君子校园</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="hint-box">
|
|
|
- <view class="hint-title">该程序将获取以下授权：</view>
|
|
|
- <view class="hint-info">获取你的公开信息（昵称，头像等）</view>
|
|
|
- <view class="hint-info">获取你的小程序唯一标示用于账户授权登陆</view>
|
|
|
+ <view class="permission">
|
|
|
+ <Nav :leftShow='false' title="君子校园"></Nav>
|
|
|
+ <view class="user-permission">
|
|
|
+ <view class="head">
|
|
|
+ <view class="head-button">
|
|
|
+ <image src="@/static/img/logo/logo.png" class="head-img" mode=""></image>
|
|
|
+ <view class="head-text">君子校园</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="hint-box">
|
|
|
+ <view class="hint-title">该程序将获取以下授权：</view>
|
|
|
+ <view class="hint-info">获取你的公开信息（昵称，头像等）</view>
|
|
|
+ <view class="hint-info">获取你的小程序唯一标示用于账户授权登陆</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="hint">
|
|
|
+ <view class="hint-left-circle" @click.stop="isFlag = !isFlag">
|
|
|
+ <view v-if="!isFlag" class="hint-circle"></view>
|
|
|
+ <image v-else class="hint-img" src="@/static/img/common/y-select.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="hint-text-1" @click.stop="isFlag = !isFlag">我已阅读并同意</view>
|
|
|
+ <view class="hint-text-2" @click="isPop = true;html = member_agreement">《用户服务》</view>
|
|
|
+ <view class="hint-text-2" @click="isPop = true;html = privacy_protocol">《隐私协议》</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="button">
|
|
|
+ <view class="common permission-login" @click="login">微信授权登录</view>
|
|
|
+ <view class="common permission-cancel" @click="noLogin">暂不登录</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="hint">
|
|
|
- <view class="hint-left-circle" @click.stop="isFlag = !isFlag">
|
|
|
- <view v-if="!isFlag" class="hint-circle"></view>
|
|
|
- <image v-else class="hint-img" src="@/static/img/common/y-select.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="hint-text-1" @click.stop="isFlag = !isFlag">我已阅读并同意</view>
|
|
|
- <view class="hint-text-2" @click="isPop = true;html = member_agreement">《用户服务》</view>
|
|
|
- <view class="hint-text-2" @click="isPop = true;html = privacy_protocol">《隐私协议》</view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view class="button">
|
|
|
- <view class="common permission-login" @click="login">微信授权登录</view>
|
|
|
- <view class="common permission-cancel" @click="noLogin">暂不登录</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view v-if="isPop" class="pop-view">
|
|
|
- <view class="pop-view-box">
|
|
|
- <view class="pop-info" v-html="html"></view>
|
|
|
- <view class="pop-botton">
|
|
|
- <view style="background-color: #3169FA;color: white;" class=" " @click="setCheck(1)">确定</view>
|
|
|
- <view style="color: #3169FA;" class="" @click="setCheck()">取消</view>
|
|
|
+
|
|
|
+
|
|
|
+ <view v-if="isPop" class="pop-view">
|
|
|
+ <view class="pop-view-box">
|
|
|
+ <view class="pop-info" v-html="html"></view>
|
|
|
+ <view class="pop-botton">
|
|
|
+ <view style="background-color: #3169FA;color: white;" class=" " @click="setCheck(1)">确定</view>
|
|
|
+ <view style="color: #3169FA;" class="" @click="setCheck()">取消</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import tools from "@/service/tools";
|
|
|
-import { appletLogin } from "@/api/member";
|
|
|
-import {getAgreement} from "@/api/common.js";
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isFlag: false,
|
|
|
- isAjax: false,
|
|
|
-
|
|
|
- from: {
|
|
|
- code: "",
|
|
|
+ import tools from "@/service/tools";
|
|
|
+ import {
|
|
|
+ appletLogin
|
|
|
+ } from "@/api/member";
|
|
|
+ import {
|
|
|
+ getAgreement
|
|
|
+ } from "@/api/common.js";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isFlag: false,
|
|
|
+ isAjax: false,
|
|
|
+
|
|
|
+ from: {
|
|
|
+ code: "",
|
|
|
+ },
|
|
|
+ isPop: false,
|
|
|
+ html: '',
|
|
|
+ member_agreement: '', //用户协议
|
|
|
+ privacy_protocol: '', //隐私协议
|
|
|
+ };
|
|
|
},
|
|
|
- isPop:false,
|
|
|
- html:'',
|
|
|
- member_agreement:'',//用户协议
|
|
|
- privacy_protocol:'',//隐私协议
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getPrivacyInfo()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getPrivacyInfo(){
|
|
|
- getAgreement().then((res)=>{
|
|
|
- if(res.code === 1){
|
|
|
- this.member_agreement = res.data.member_agreement;
|
|
|
- this.privacy_protocol = res.data.privacy_protocol;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
- setCheck(type){
|
|
|
- if(type === 1){
|
|
|
- this.isFlag = false
|
|
|
- }
|
|
|
- this.isPop = false
|
|
|
- },
|
|
|
-
|
|
|
- login() {
|
|
|
- if(!this.isFlag){
|
|
|
- return tools.error("请先勾选协议");
|
|
|
- }
|
|
|
- if (this.isAjax) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- this.isAjax = true;
|
|
|
-
|
|
|
- uni.login({
|
|
|
- provider: "weixin",
|
|
|
- success: (loginRes) => {
|
|
|
- this.from.code = loginRes.code;
|
|
|
- this.getUserInfo();
|
|
|
- },
|
|
|
- fail: (loginRes) => {
|
|
|
- this.isAjax = false;
|
|
|
- tools.error("获取授权信息失败");
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- noLogin() {
|
|
|
- uni.switchTab({
|
|
|
- url: "/pages/index/index",
|
|
|
- });
|
|
|
- },
|
|
|
- async getUserInfo() {
|
|
|
- const res = await appletLogin(this.from);
|
|
|
- if (res.code == 1) {
|
|
|
- uni.setStorageSync('token',res.data.token)
|
|
|
- uni.setStorageSync('m_id',res.data.m_id)
|
|
|
- tools.success("授权成功");
|
|
|
- setTimeout(() => {
|
|
|
- uni.switchTab({
|
|
|
- url: "/pages/index/index",
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- } else {
|
|
|
- this.isAjax = false;
|
|
|
- tools.error(res.msg);
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getPrivacyInfo()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getPrivacyInfo() {
|
|
|
+ getAgreement().then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.member_agreement = res.data.member_agreement;
|
|
|
+ this.privacy_protocol = res.data.privacy_protocol;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ setCheck(type) {
|
|
|
+ if (type === 1) {
|
|
|
+ this.isFlag = false
|
|
|
+ }
|
|
|
+ this.isPop = false
|
|
|
+ },
|
|
|
+
|
|
|
+ login() {
|
|
|
+ if (!this.isFlag) {
|
|
|
+ return tools.error("请先勾选协议");
|
|
|
+ }
|
|
|
+ if (this.isAjax) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.isAjax = true;
|
|
|
+ uni.login({
|
|
|
+ provider: "weixin",
|
|
|
+ success: (loginRes) => {
|
|
|
+ this.from.code = loginRes.code;
|
|
|
+ this.getUserInfo();
|
|
|
+ },
|
|
|
+ fail: (loginRes) => {
|
|
|
+ this.isAjax = false;
|
|
|
+ tools.error("获取授权信息失败");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ noLogin() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: "/pages/index/index",
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getUserInfo() {
|
|
|
+ const res = await appletLogin(this.from);
|
|
|
+ if (res.code == 1) {
|
|
|
+ uni.setStorageSync('token', res.data.token)
|
|
|
+ uni.setStorageSync('m_id', res.data.m_id)
|
|
|
+ tools.success("授权成功");
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.switchTab({
|
|
|
+ url: "/pages/index/index",
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ this.isAjax = false;
|
|
|
+ tools.error(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.permission {
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- background-color: #fff;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .hint {
|
|
|
- margin-top: 20rpx;
|
|
|
- display: flex;
|
|
|
- height: 34rpx;
|
|
|
- .hint-left-circle{
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 18rpx;
|
|
|
- .hint-circle{
|
|
|
- width: 30rpx;
|
|
|
- height: 30rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #fff;
|
|
|
- border: 2rpx solid #D9D9D9;
|
|
|
- }
|
|
|
- .hint-img{
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- .hint-text-1,.hint-text-2{
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- .hint-text-1{
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .hint-text-2{
|
|
|
- color: #ED301D;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .hint-box {
|
|
|
- margin-top: 140rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .hint-title {
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .hint-info {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #6f6f6f;
|
|
|
- margin-top: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pop-view{
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- position: absolute;
|
|
|
- top:0;
|
|
|
- left: 0;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- .pop-view-box{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- margin: 400rpx auto;
|
|
|
- width: 80vw;
|
|
|
- height: 50vh;
|
|
|
- overflow: scroll;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- .pop-info{
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
- }
|
|
|
- .pop-botton{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 0 130rpx;
|
|
|
- view{
|
|
|
- width: 100rpx;
|
|
|
- height: 50rpx;
|
|
|
- line-height: 50rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- border:2rpx solid #3169FA;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .user-permission {
|
|
|
- position: absolute;
|
|
|
- top: 40%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 100%;
|
|
|
- padding: 0 36rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- .head {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- button::after{
|
|
|
- border-color: #fff !important;
|
|
|
- }
|
|
|
- .head-button{
|
|
|
- background-color: #fff;
|
|
|
- padding: 0;
|
|
|
+ .permission {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .hint {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ height: 34rpx;
|
|
|
+
|
|
|
+ .hint-left-circle {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+
|
|
|
+ .hint-circle {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 2rpx solid #D9D9D9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint-img {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint-text-1,
|
|
|
+ .hint-text-2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint-text-1 {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint-text-2 {
|
|
|
+ color: #ED301D;
|
|
|
+ }
|
|
|
}
|
|
|
- .head-text{
|
|
|
- text-align: center;
|
|
|
- margin-top: 16rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- font-size: 28rpx;
|
|
|
+
|
|
|
+ .hint-box {
|
|
|
+ margin-top: 140rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .hint-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint-info {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #6f6f6f;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .head-img {
|
|
|
- width: 120rpx;
|
|
|
- height: 120rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .user-name-view{
|
|
|
- display: flex;
|
|
|
- margin-top: 100rpx;
|
|
|
- .user-name{
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- font-size: 32rpx;
|
|
|
+
|
|
|
+ .pop-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+
|
|
|
+ .pop-view-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ margin: 400rpx auto;
|
|
|
+ width: 80vw;
|
|
|
+ height: 50vh;
|
|
|
+ overflow: scroll;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx 40rpx;
|
|
|
+
|
|
|
+ .pop-info {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-botton {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 130rpx;
|
|
|
+
|
|
|
+ view {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border: 2rpx solid #3169FA;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .user-input{
|
|
|
- width: 568rpx;
|
|
|
- border-bottom: 1rpx solid #D9D9D9;
|
|
|
- font-size: 32rpx;
|
|
|
- padding-bottom: 16rpx;
|
|
|
+
|
|
|
+
|
|
|
+ .user-permission {
|
|
|
+ position: absolute;
|
|
|
+ top: 40%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 36rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ button::after {
|
|
|
+ border-color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-button {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-text {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-img {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-name-view {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 100rpx;
|
|
|
+
|
|
|
+ .user-name {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-input {
|
|
|
+ width: 568rpx;
|
|
|
+ border-bottom: 1rpx solid #D9D9D9;
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding-bottom: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ margin-top: 60rpx;
|
|
|
+
|
|
|
+ .common {
|
|
|
+ width: 100%;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-login {
|
|
|
+ background: #41ABF5;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: #41ABF5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .permission-cancel {
|
|
|
+ margin-top: 40rpx;
|
|
|
+ background: rgb(247, 247, 247);
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: rgb(238, 238, 238);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .button {
|
|
|
- margin-top: 60rpx;
|
|
|
- .common {
|
|
|
- width: 100%;
|
|
|
- height: 88rpx;
|
|
|
- line-height: 88rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 200rpx;
|
|
|
- }
|
|
|
- .permission-login {
|
|
|
- background: #41ABF5;
|
|
|
- color: #fff;
|
|
|
- &:active {
|
|
|
- background-color: #41ABF5;
|
|
|
- }
|
|
|
- }
|
|
|
- .permission-cancel {
|
|
|
- margin-top: 40rpx;
|
|
|
- background: rgb(247, 247, 247);
|
|
|
- &:active {
|
|
|
- background-color: rgb(238, 238, 238);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
