Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
d472548f by simon
Options

默认提交

1 parent 5d388639
Inline Side-by-side
Showing 11 changed files with 72 additions and 188 deletions
...@@ -106,7 +106,7 @@ button { ...@@ -106,7 +106,7 @@ button {
106 .comp { 106 .comp {
107 bottom: auto; 107 bottom: auto;
108 // top: 56%; 108 // top: 56%;
109 bottom: 30%; 109 bottom: 20%;
110 } 110 }
111 } 111 }
112 112
......

2.87 KB | W: | H:

28.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 let app = getApp();
2
3 Page({
4 data: {
5 barHeight: app.globalData.barHeight,
6 navbarData: {
7 showCapsule: 0, //是否显示左上角图标 1表示显示 0表示不显示
8 title: '微信授权' //导航栏 中间的标题
9 },
10 loginData: null,
11 authorized: false,
12 canIUse: wx.canIUse('button.open-type.getUserInfo'),
13 parentMemberCode: "",
14 },
15 onLoad(options) {},
16 onReady() {
17 app.store.clear("sessionId");
18 let _this = this;
19 wx.login({
20 success: function (res) {
21 _this.data.loginData = res;
22 }
23 });
24 },
25 bindGetUserInfo(e) {
26 wx.showLoading();
27 this.getUserInfo(e.detail);
28 },
29 getUserInfo(e) {
30 let _this = this;
31 app.globalData.userInfo = e.userInfo;
32 // console.log("loginData:",_this.data.loginData);
33 app.post({
34 url: app.api.register,
35 sid: false,
36 data: {
37 encryptedData: e.encryptedData,
38 iv: e.iv,
39 code: _this.data.loginData.code,
40 parentMemberCode: _this.data.parentMemberCode,
41 }
42 }).then((res2) => {
43 app.store.setItem('sessionId', res2.sessionId);
44 _this.setData({
45 authorized: true
46 })
47 _this.toIndex();
48 }).catch((err) => {
49 console.log("@authorize || err:", err);
50 })
51 },
52 toIndex() {
53 console.log("@authorize || toIndex ");
54 setTimeout(() => {
55 app.router.push({
56 path: "index",
57 query: {},
58 openType: "redirect"
59 })
60 wx.hideLoading();
61 }, 2000);
62 }
63 })
1 {
2 "usingComponents": {
3 "navbar": "../../component/navbar/index"
4 },
5 "navigationStyle": "custom"
6 }
1 @import '../../assets/scss/mixins';
2
3 .page {
4 position: relative;
5 overflow: hidden;
6
7 .bgc {
8 // background-color: transparent;
9 // background-color: black;
10 background-color: #fafafc;
11 }
12
13
14 .main {
15
16 position: relative;
17
18 .top-space {
19 height: 60px;
20 }
21
22
23 .login {
24 position: relative;
25 width: 650px;
26 margin: 0 auto;
27 text-align: center;
28
29 &-logo {
30 width: 140px;
31 height: 140px;
32 }
33
34 &-name {
35 margin-top: 32px;
36 font-size: 32px;
37 color: #333333;
38 }
39
40 &-line {
41 margin-top: 70px;
42 width: 650px;
43 height: 2px;
44 background-color: #eaeaec;
45 }
46
47 &-title {
48 margin-top: 40px;
49 font-size: 32px;
50 text-align: left;
51 color: #333333;
52 }
53
54
55 &-tips {
56 margin-top: 28px;
57 font-size: 26px;
58 text-align: left;
59 color: #666666;
60 }
61
62 &-btn {
63 margin-top: 102px;
64 width: 650px;
65 height: 90px;
66 line-height: 90px;
67 border-radius: 8px;
68 background-color: #00c200;
69 font-size: 32px;
70 color: #ffffff;
71 }
72
73 }
74
75 }
76
77 }
1 <navbar navbar-data='{{navbarData}}'></navbar>
2 <view style='height: {{barHeight}}px'></view>
3 <view class="page-authorize page">
4 <view class="app__bgc bgc"></view>
5 <view class="app__bg bg"></view>
6 <!-- <view class="app__top-shadow"></view> -->
7 <view class="app__content main">
8 <view class="top-space"></view>
9 <view class="login">
10 <image class="login-logo" src="../../image/logo.png" mode="aspectFit" />
11 <view class="login-name">美赞臣</view>
12 <view class="login-line"></view>
13 <view class="login-title">完整体验小程序功能，需要您的微信授权哦</view>
14 <view class="login-tips">· 获取您的公开信息（昵称、头像等）</view>
15 <button type="default" class="login-btn" wx:if="{{!authorized}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
16 确认授权
17 </button>
18 </view>
19 </view>
20 </view>
...@@ -105,20 +105,19 @@ ...@@ -105,20 +105,19 @@
105 105
106 .tit { 106 .tit {
107 font-size: 40px; 107 font-size: 40px;
108 height: 80px; 108 min-height: 120px;
109 line-height: 80px;
110 color: #ffffff; 109 color: #ffffff;
111 @extend .bb; 110 @extend .bb;
112 padding: 0 24px; 111 padding: 0 24px;
113 position: absolute; 112 position: absolute;
114 width: 100%; 113 width: 100%;
115 bottom: 0; 114 bottom: 0;
116 @include ellipsis(1); 115 @include ellipsis(2);
117 } 116 }
118 117
119 .tit-bg { 118 .tit-bg {
120 opacity: .6; 119 opacity: .6;
121 height: 80px; 120 height: 120px;
122 color: #ffffff; 121 color: #ffffff;
123 position: absolute; 122 position: absolute;
124 width: 100%; 123 width: 100%;
...@@ -129,18 +128,19 @@ ...@@ -129,18 +128,19 @@
129 128
130 .play { 129 .play {
131 @extend .fcc; 130 @extend .fcc;
132 width: 132px; 131 width: 120px;
133 height: 132px; 132 height: 120px;
134 border-radius: 132px; 133 border-radius: 120px;
134 border: solid #ffffff 6px;
135 font-weight: normal; 135 font-weight: normal;
136 position: absolute; 136 position: absolute;
137 left: 0; 137 left: 0;
138 right: 0; 138 right: 0;
139 top: 52px; 139 top: 32px;
140 margin: 0 auto; 140 margin: 0 auto;
141 text-align: center; 141 text-align: center;
142 font-weight: bold; 142 font-weight: bold;
143 background-color: rgba($color: #000000, $alpha: 0.7); 143 background-color: rgba($color: #000000, $alpha: 0.4);
144 144
145 .iconfont { 145 .iconfont {
146 font-size: 48px; 146 font-size: 48px;
......
...@@ -83,20 +83,19 @@ ...@@ -83,20 +83,19 @@
83 83
84 .tit { 84 .tit {
85 font-size: 40px; 85 font-size: 40px;
86 height: 80px; 86 min-height: 120px;
87 line-height: 80px;
88 color: #ffffff; 87 color: #ffffff;
89 @extend .bb; 88 @extend .bb;
90 padding: 0 24px; 89 padding: 0 24px;
91 position: absolute; 90 position: absolute;
92 width: 100%; 91 width: 100%;
93 bottom: 0; 92 bottom: 0;
94 @include ellipsis(1); 93 @include ellipsis(2);
95 } 94 }
96 95
97 .tit-bg { 96 .tit-bg {
98 opacity: .6; 97 opacity: .6;
99 height: 80px; 98 height: 120px;
100 color: #ffffff; 99 color: #ffffff;
101 position: absolute; 100 position: absolute;
102 width: 100%; 101 width: 100%;
...@@ -107,18 +106,19 @@ ...@@ -107,18 +106,19 @@
107 106
108 .play { 107 .play {
109 @extend .fcc; 108 @extend .fcc;
110 width: 132px; 109 width: 120px;
111 height: 132px; 110 height: 120px;
112 border-radius: 132px; 111 border-radius: 120px;
112 border: solid #ffffff 6px;
113 font-weight: normal; 113 font-weight: normal;
114 position: absolute; 114 position: absolute;
115 left: 0; 115 left: 0;
116 right: 0; 116 right: 0;
117 top: 72px; 117 top: 32px;
118 margin: 0 auto; 118 margin: 0 auto;
119 text-align: center; 119 text-align: center;
120 font-weight: bold; 120 font-weight: bold;
121 background-color: rgba($color: #000000, $alpha: 0.7); 121 background-color: rgba($color: #000000, $alpha: 0.4);
122 122
123 .iconfont { 123 .iconfont {
124 font-size: 48px; 124 font-size: 48px;
......
...@@ -58,6 +58,9 @@ Page({ ...@@ -58,6 +58,9 @@ Page({
58 primaryCode: "", 58 primaryCode: "",
59 }); 59 });
60 }, 60 },
61 onShow() {
62 this.checkAuth();
63 },
61 64
62 /** 65 /**
63 * 基础方法 66 * 基础方法
...@@ -170,6 +173,29 @@ Page({ ...@@ -170,6 +173,29 @@ Page({
170 }, 173 },
171 174
172 /** 175 /**
176 * 检查是否授权
177 */
178 checkAuth() {
179 let _this = this;
180 wx.getSetting({
181 success(res) {
182 console.log("scope:", res);
183 if (res.authSetting['scope.userInfo']) {
184 // 已经授权
185 } else {
186 //用户没有授权
187 wx.login({
188 success(res) {
189 app.store.setItem('wxcode', res.code);
190 _this.showAuth();
191 }
192 });
193 }
194 }
195 });
196 },
197
198 /**
173 * 隐藏蒙层 199 * 隐藏蒙层
174 */ 200 */
175 hideMask() { 201 hideMask() {
......
...@@ -8,7 +8,10 @@ ...@@ -8,7 +8,10 @@
8 background-color: #af3541; 8 background-color: #af3541;
9 } 9 }
10 10
11 .bg {} 11 .bg {
12 width: 100%;
13 height: auto;
14 }
12 15
13 .main { 16 .main {
14 .top-space { 17 .top-space {
...@@ -51,7 +54,7 @@ ...@@ -51,7 +54,7 @@
51 54
52 .reward { 55 .reward {
53 width: $contentWidth; 56 width: $contentWidth;
54 margin: 124px auto 0; 57 margin: 24px auto 0;
55 58
56 59
57 &-wrap { 60 &-wrap {
...@@ -65,7 +68,23 @@ ...@@ -65,7 +68,23 @@
65 } 68 }
66 } 69 }
67 } 70 }
68
69 } 71 }
70 } 72 }
73
74 .tips{
75 font-size: 28px;
76 color: #ffe6a3;
77 text-align: center;
78 width: 100%;
79 }
80
81 .tips1{
82 margin-top: 36px;
83 }
84
85 .tips2 {
86
87 position: fixed;
88 bottom: 48px;
89 }
71 } 90 }
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 <image class="portrait-bg" mode="widthFix" src="../../image/logo.jpeg" /> 9 <image class="portrait-bg" mode="widthFix" src="../../image/logo.jpeg" />
10 <!-- <open-data class="avatar" type="userAvatarUrl"></open-data> --> 10 <!-- <open-data class="avatar" type="userAvatarUrl"></open-data> -->
11 </view> 11 </view>
12 <view class="tips tips1">赞赏家有儿孙</view>
12 <view class="reward"> 13 <view class="reward">
13 <view class="reward-wrap"> 14 <view class="reward-wrap">
14 <image bindtap="onRewardHandler" data-data="{{item}}" class="reward-wrap-item" wx:for="{{rewardList}}" wx:key="{{index}}" mode="widthFix" src="{{'../../image/reward/m-'+item.price+'.png'}}" /> 15 <image bindtap="onRewardHandler" data-data="{{item}}" class="reward-wrap-item" wx:for="{{rewardList}}" wx:key="{{index}}" mode="widthFix" src="{{'../../image/reward/m-'+item.price+'.png'}}" />
...@@ -16,4 +17,8 @@ ...@@ -16,4 +17,8 @@
16 </view> 17 </view>
17 </view> 18 </view>
18 </view> 19 </view>
20 <view class="tips tips2">感谢红包鼓励，我们继续生产好内容！</view>
19 </view> 21 </view>
22 <van-popup show="{{ authorizeVisible }}">
23 <authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
24 </van-popup>
......