|
@@ -15,12 +15,54 @@
|
|
<button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
|
|
<button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
</form>
|
|
|
|
+ <!-- 第三方登录H5不支持,所以隐藏掉 -->
|
|
|
|
+ <!-- #ifndef H5 -->
|
|
|
|
+ <view class="third-wapper">
|
|
|
|
+
|
|
|
|
+ <view class="third-line">
|
|
|
|
+ <view class="single-line">
|
|
|
|
+ <view class="line"></view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="third-words">第三方账号登录</view>
|
|
|
|
+
|
|
|
|
+ <view class="single-line">
|
|
|
|
+ <view class="line"></view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="third-icos-wapper">
|
|
|
|
+ <!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
|
|
|
|
+ <!-- #ifdef APP-PLUS -->
|
|
|
|
+ <!-- <image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
|
|
|
|
+ <image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
|
|
|
|
+ <image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
|
|
|
|
+ --> <!-- #endif -->
|
|
|
|
+ <!-- #ifdef MP-WEIXIN -->
|
|
|
|
+ <button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
|
|
|
|
+ </button>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
- import { mapState } from 'vuex';
|
|
|
|
|
|
+ import {
|
|
|
|
+ mapState
|
|
|
|
+ } from 'vuex';
|
|
export default {
|
|
export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ parm: {
|
|
|
|
+ avatarUrl: "",
|
|
|
|
+ nickName: "",
|
|
|
|
+ openId: ""
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ },
|
|
computed: {
|
|
computed: {
|
|
...mapState(['isLoading']),
|
|
...mapState(['isLoading']),
|
|
loginBtnLabel() {
|
|
loginBtnLabel() {
|
|
@@ -30,19 +72,81 @@
|
|
methods: {
|
|
methods: {
|
|
loginSubmit(event) {
|
|
loginSubmit(event) {
|
|
uni.hideKeyboard();
|
|
uni.hideKeyboard();
|
|
- const { value: loginForm } = event.detail;
|
|
|
|
|
|
+ const {
|
|
|
|
+ value: loginForm
|
|
|
|
+ } = event.detail;
|
|
this.$store.dispatch('login', loginForm)
|
|
this.$store.dispatch('login', loginForm)
|
|
.then(_ => {
|
|
.then(_ => {
|
|
- // uni.redirectTo({
|
|
|
|
- // url: '/pages/Charts/column',
|
|
|
|
- // });
|
|
|
|
//标记刚登录跳转
|
|
//标记刚登录跳转
|
|
uni.setStorageSync('test', '1');
|
|
uni.setStorageSync('test', '1');
|
|
uni.reLaunch({
|
|
uni.reLaunch({
|
|
- url: '/pages/Charts/mainStatistics',
|
|
|
|
|
|
+ url: '/pages/Charts/mainStatistics',
|
|
});
|
|
});
|
|
});
|
|
});
|
|
- }
|
|
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 实现在微信小程序端的微信登录
|
|
|
|
+ async wxLogin(e) {
|
|
|
|
+ var serverUrl = this.serverurl;
|
|
|
|
+ // 通过微信开发能力,获得微信用户的基本信息
|
|
|
|
+ var userInfo = e.detail.userInfo;
|
|
|
|
+ var parm1 = '';
|
|
|
|
+ // 实现微信登录
|
|
|
|
+ await uni.login({
|
|
|
|
+ provider: "weixin",
|
|
|
|
+ success:(loginResult)=> {
|
|
|
|
+ // 获得微信登录的code:授权码
|
|
|
|
+ var code = loginResult.code;
|
|
|
|
+ var appid = "wx3844925af1740a7d";
|
|
|
|
+ var secret = "c1f0363a78d1c580388d6c4f14674733";
|
|
|
|
+ var openid = "";
|
|
|
|
+ uni.request({
|
|
|
|
+ url: serverUrl+"/TWeixin/getOpenid?code="+code,
|
|
|
|
+ mothod: "GET",
|
|
|
|
+ success: (userResult) => {
|
|
|
|
+ openid = userResult.data.data;
|
|
|
|
+ var parm = {
|
|
|
|
+ avatarUrl: "",
|
|
|
|
+ nickName: "",
|
|
|
|
+ openId: ""
|
|
|
|
+ };
|
|
|
|
+ parm['avatarUrl'] = userInfo.avatarUrl;
|
|
|
|
+ parm['nickName'] = userInfo.nickName;
|
|
|
|
+ parm['openId'] = openid;
|
|
|
|
+ uni.setStorageSync("newparm", parm);
|
|
|
|
+ this.loginweixin();
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ loginweixin() {
|
|
|
|
+ var parm = uni.getStorageSync("newparm");
|
|
|
|
+ if (parm.openId != null) {
|
|
|
|
+ this.$store.dispatch('loginWX', parm)
|
|
|
|
+ .then(data => {
|
|
|
|
+ var result = data.message;
|
|
|
|
+ var userInfo = data.data;
|
|
|
|
+ if (result == "off") {
|
|
|
|
+ uni.setStorageSync("weixinInfo", userInfo);
|
|
|
|
+ //没有绑定,跳转到微信绑定页面
|
|
|
|
+ uni.reLaunch({
|
|
|
|
+ url: "loginWeixin",
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+ if (result == "SUCCESS") {
|
|
|
|
+ // uni.setStorageSync("weixinInfo", weixinInfo);
|
|
|
|
+ uni.setStorageSync('test', '1');
|
|
|
|
+ uni.reLaunch({
|
|
|
|
+ url: '/pages/Charts/mainStatistics',
|
|
|
|
+ });
|
|
|
|
+ uni.setStorageSync("globalUser", userInfo);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -58,25 +162,31 @@
|
|
left: 0;
|
|
left: 0;
|
|
right: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
|
+
|
|
.content {
|
|
.content {
|
|
padding: 0 20upx;
|
|
padding: 0 20upx;
|
|
display: flex;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex-flow: column nowrap;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+
|
|
.logo {
|
|
.logo {
|
|
width: 401upx;
|
|
width: 401upx;
|
|
height: 125upx;
|
|
height: 125upx;
|
|
text-align: center;
|
|
text-align: center;
|
|
margin: 50upx;
|
|
margin: 50upx;
|
|
}
|
|
}
|
|
|
|
+
|
|
form {
|
|
form {
|
|
width: calc(100% - 100upx);
|
|
width: calc(100% - 100upx);
|
|
padding: 50upx;
|
|
padding: 50upx;
|
|
|
|
+
|
|
.section {
|
|
.section {
|
|
margin: 50upx 0;
|
|
margin: 50upx 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btn-area {
|
|
.btn-area {
|
|
margin-top: 100upx;
|
|
margin-top: 100upx;
|
|
|
|
+
|
|
button {
|
|
button {
|
|
background-color: $uni-color-primary;
|
|
background-color: $uni-color-primary;
|
|
}
|
|
}
|
|
@@ -84,4 +194,67 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ /* 第三方登录 start */
|
|
|
|
+ .third-wapper {
|
|
|
|
+ width: 100%;
|
|
|
|
+ /* 固定底部 */
|
|
|
|
+ /* bottom: 0;
|
|
|
|
+ position: fixed; */
|
|
|
|
+
|
|
|
|
+ margin-top: 60upx;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .third-line {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: center
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .third-words {
|
|
|
|
+ color: #A9A9A9;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .single-line {
|
|
|
|
+ padding: 15upx 20upx;
|
|
|
|
+ width: 25%;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .third-icos-wapper {
|
|
|
|
+ margin-top: 30upx;
|
|
|
|
+
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ justify-content: center
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .third-ico {
|
|
|
|
+ width: 60upx;
|
|
|
|
+ height: 60upx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .third-btn-ico {
|
|
|
|
+ // background-image:url(http://122.152.205.72:88/group1/M00/00/05/CpoxxFxFO-yAOjTaAAATCIZEzRU503.png);
|
|
|
|
+ background-image: url('~@/static/backgrounds/weixin.png');
|
|
|
|
+ width: 120upx;
|
|
|
|
+ height: 120upx;
|
|
|
|
+ background-color: white;
|
|
|
|
+ background-size: 120upx 120upx;
|
|
|
|
+ // background-repeat:no-repeat;
|
|
|
|
+ border: none;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ button::after {
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /* 第三方登录 end */
|
|
</style>
|
|
</style>
|