Skip to content

dev / home-with-kids-mp

Go to a project
Toggle navigation
Toggle navigation pinning
302e3d6b by simon
Options

默认提交

1 parent 58869fb9
Inline Side-by-side
Showing 14 changed files with 366 additions and 24 deletions
...@@ -17,10 +17,12 @@ ...@@ -17,10 +17,12 @@
17 "navigationBarTitleText": "家有儿孙", 17 "navigationBarTitleText": "家有儿孙",
18 "navigationBarTextStyle": "black" 18 "navigationBarTextStyle": "black"
19 }, 19 },
20 "requiredBackgroundModes": ["audio"],
20 "usingComponents": { 21 "usingComponents": {
21 "authorize-comp": "../../component/authorize-comp/authorize-comp", 22 "authorize-comp": "../../component/authorize-comp/authorize-comp",
22 "empty-tips": "../../component/empty-tips/empty-tips", 23 "empty-tips": "../../component/empty-tips/empty-tips",
23 "shortcut": "../../component/shortcut/shortcut", 24 "shortcut": "../../component/shortcut/shortcut",
25 "shortcut2": "../../component/shortcut2/shortcut2",
24 "van-popup": "../../ui/vant-weapp/popup/index", 26 "van-popup": "../../ui/vant-weapp/popup/index",
25 "van-dialog": "../../ui/vant-weapp/dialog/index", 27 "van-dialog": "../../ui/vant-weapp/dialog/index",
26 "van-sticky": "../../ui/vant-weapp/sticky/index", 28 "van-sticky": "../../ui/vant-weapp/sticky/index",
......
...@@ -104,8 +104,13 @@ button { ...@@ -104,8 +104,13 @@ button {
104 // 红包 104 // 红包
105 .red-p { 105 .red-p {
106 .comp { 106 .comp {
107 bottom: auto; 107 bottom: 20%;
108 // top: 56%; 108 }
109 }
110
111 .red-p2 {
112 .comp2 {
113 right: 12px;
109 bottom: 20%; 114 bottom: 20%;
110 } 115 }
111 } 116 }
......
1 import {
2 getBindtapData
3 } from '../../utils/util';
4
5 let app = getApp();
6 Component({
7 // 样式隔离
8 // 详见 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
9 // isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
10 // apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
11 // shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
12 options: {
13 styleIsolation: 'apply-shared'
14 },
15 properties: {
16 types: {
17 type: Array,
18 value: ["home", "return"]
19 },
20 pics: {
21 type: Array,
22 value: []
23 },
24 contact: {
25 type: Boolean,
26 value: true
27 }
28 },
29 data: {
30 // 这里是一些组件内部数据
31 typeIconMap: {
32 "home": "iconhome",
33 "return": "iconreturn"
34 }
35 },
36 methods: {
37 // 点击按按钮
38 onTapHandler(evt) {
39 let curType = getBindtapData(evt);
40
41 switch (curType) {
42 case "home":
43 app.router.push({
44 openType: "reLaunch",
45 path: "index"
46 })
47 break;
48
49 case "return":
50 app.router.push({
51 openType: "back"
52 })
53 break;
54
55 case "red-package":
56 app.router.push({
57 path: "reward"
58 })
59 break;
60
61 case "red-package2":
62 app.router.push({
63 path: "reward"
64 })
65 break;
66
67 case "more-bless":
68 let pages = getCurrentPages();
69 if (pages.length > 1) {
70 // 如果能返回上一级
71 app.router.push({
72 openType: "back"
73 });
74 } else {
75 app.router.push({
76 openType: "redirect",
77 path: "index"
78 });
79 }
80 break;
81
82 default:
83 break;
84 }
85 },
86 // 客服消息
87 handleContact(e) {
88 console.log("handleContact");
89 console.log(e.detail.path);
90 console.log(e.detail.query);
91 // 打点
92 app.stat({
93 classify: "service",
94 action: "service_click",
95 primaryCode: "",
96 });
97 }
98 }
99 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp {
5 position: fixed;
6 bottom: 30%;
7 right: 2%;
8 z-index: 91;
9 color: #ffffff;
10
11 $btnSize: 126px;
12
13 .btn {
14 width: $btnSize;
15 height: $btnSize;
16 margin-bottom: 12px;
17 border-radius: $btnSize;
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 }
22
23 .iconfont {
24 font-size: 64px;
25 }
26
27 .pics {
28 height: $btnSize;
29 }
30
31 .point {
32 background-color: rgba($color: #000000, $alpha: 0.6);
33 }
34
35 $contactWidth:140px;
36 .contact {
37 background-color: transparent;
38 @extend .fcc;
39
40 color: #ffffff;
41 width: $contactWidth;
42 height: $contactWidth;
43 margin-left: -18px;
44 margin-top: -8px;
45
46 .img {
47 width: $contactWidth;
48 height: $contactWidth;
49 border-radius: 8px;
50 }
51 }
52 }
1 <view class="comp">
2 <!-- <view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn point">
3 <span class="iconfont {{typeIconMap[item+''] }}"></span>
4 </view> -->
5 <view wx:for="{{pics}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
6 <image mode="aspectFit" src="{{'../../image/shortcut/'+item+'.png'}}" class="pics" />
7 </view>
8 <!-- <button class="contact" wx:if="{{contact}}" open-type="contact" show-message-card="true" send-message-title="家有儿孙" end-message-path="/pages/index/index" send-message-img="https://kdcdn.oss-cn-shenzhen.aliyuncs.com/weapp/jyes/assets/logo.jpg" bindcontact="handleContact">
9 <image class="img" mode="widthFix" src="../../image/shortcut/contact.jpg" />
10 </button> -->
11 </view>
...@@ -5,6 +5,8 @@ import { ...@@ -5,6 +5,8 @@ import {
5 5
6 import Dialog from '../../ui/vant-weapp/dialog/dialog'; 6 import Dialog from '../../ui/vant-weapp/dialog/dialog';
7 7
8 const back = wx.getBackgroundAudioManager();
9
8 let app = getApp(); 10 let app = getApp();
9 Page({ 11 Page({
10 data: { 12 data: {
...@@ -35,16 +37,17 @@ Page({ ...@@ -35,16 +37,17 @@ Page({
35 // 加入房间 37 // 加入房间
36 joinRoomDialogVisible: false, 38 joinRoomDialogVisible: false,
37 isJoin: false, // 是否能加入状态 39 isJoin: false, // 是否能加入状态
38 }, 40
39 onChange(event) { 41 isPlayingBgm: false,
40 // event.detail 为当前输入的值 42 isMore: false,
41 console.log(event.detail); 43
44 // shortcutPics:["red-package2","more-bless"]
42 }, 45 },
43 onShareAppMessage(res) { 46 onShareAppMessage(res) {
44 let shareType = "" 47 let shareType = ""
45 if (res.from === 'button') { 48 if (res.from === 'button') {
46 // 来自页面内转发按钮 49 // 来自页面内转发按钮
47 // shareType == join 分享给家人,能加入 50 // shareType == join 分享给家人,能加入 组队模式
48 shareType = res.target.dataset.data || ""; 51 shareType = res.target.dataset.data || "";
49 console.log("shareType:", shareType); 52 console.log("shareType:", shareType);
50 } else {} 53 } else {}
...@@ -78,6 +81,7 @@ Page({ ...@@ -78,6 +81,7 @@ Page({
78 }) 81 })
79 this.initData(); 82 this.initData();
80 this.queryBlessDetail().then((result) => { 83 this.queryBlessDetail().then((result) => {
84 this.playBgm();
81 let { 85 let {
82 detailData, 86 detailData,
83 ownerMember, 87 ownerMember,
...@@ -123,6 +127,34 @@ Page({ ...@@ -123,6 +127,34 @@ Page({
123 * 授权完毕重拉数据用 127 * 授权完毕重拉数据用
124 */ 128 */
125 initData() {}, 129 initData() {},
130 playBgm() {
131 return;
132 let _this = this;
133 let {
134 detailData
135 } = this.data;
136 this.setData({
137 isPlayingBgm: true,
138 })
139 back.title = "背景音乐";
140 back.src = detailData.musicUrl;
141 back.onEnded(() => {
142 _this.playBgm();
143 })
144 },
145
146 pauseBgm() {
147 wx.pauseBackgroundAudio()
148 this.setData({
149 isPlayingBgm: false,
150 })
151 },
152
153 onShowMoreHandler() {
154 this.setData({
155 isMore: true
156 })
157 },
126 158
127 showTips(evt) { 159 showTips(evt) {
128 let tips = getBindtapData(evt); 160 let tips = getBindtapData(evt);
...@@ -160,6 +192,13 @@ Page({ ...@@ -160,6 +192,13 @@ Page({
160 } 192 }
161 }, 193 },
162 194
195 /**
196 * 分享图片祝福
197 * 生成海报
198 */
199 onPosterHandler(){
200 },
201
163 // 显示更新用户信息 202 // 显示更新用户信息
164 showUpdateUserInfoDialog() { 203 showUpdateUserInfoDialog() {
165 this.setData({ 204 this.setData({
...@@ -266,7 +305,7 @@ Page({ ...@@ -266,7 +305,7 @@ Page({
266 url: app.api.blessUpdateUserInfo, 305 url: app.api.blessUpdateUserInfo,
267 data: { 306 data: {
268 blessCode: detailData.blessCode, 307 blessCode: detailData.blessCode,
269 ownerMemberCode: app.store.getItem("memberCode"), 308 ownerMemberCode: this.data.options.m ? this.data.options.m : app.store.getItem("memberCode") ? app.store.getItem("memberCode") : "",
270 memberName: updateUserInfo.memberName || "", 309 memberName: updateUserInfo.memberName || "",
271 memberHead: picRes[0] || "", 310 memberHead: picRes[0] || "",
272 } 311 }
...@@ -354,10 +393,27 @@ Page({ ...@@ -354,10 +393,27 @@ Page({
354 try { 393 try {
355 blessContent = JSON.parse(result.blessContent) || []; 394 blessContent = JSON.parse(result.blessContent) || [];
356 } catch (error) {} 395 } catch (error) {}
396 let memberList = result.memberList;
397 // hardcode数据
398 // for (let index = 0; index < 18; index++) {
399 // memberList.push({
400 // blessCode: "4144feba2b904ba89585d90e8618a863",
401 // blessMemberCode: "747e8e314d0e46679be17fb495975439",
402 // count: 2,
403 // customMade: 0,
404 // familyName: "祝福团体称呼",
405 // memberCode: "9af835ad57234cf2826b770dcc8a9897",
406 // memberHead: "https://wx.qlogo.cn/mmopen/vi_32/v4XnMftVxCzkFD8ibLicDjxicFhzugVt4vUWsHmup9ZeunwZhQ21H9ugELpgyTicsVyNCXenqIlUHBIkZ2aEP2qPpw/132",
407 // memberName: "ee",
408 // mySelf: 1,
409 // owner: 0,
410 // sentence: "定义"
411 // })
412 // }
357 this.setData({ 413 this.setData({
358 detailData: result, 414 detailData: result,
359 ownerMember: result.ownerMember, 415 ownerMember: result.ownerMember,
360 memberList: result.memberList, 416 memberList: memberList,
361 blessContent: blessContent, 417 blessContent: blessContent,
362 }); 418 });
363 console.log("detailData:", result); 419 console.log("detailData:", result);
......
...@@ -151,17 +151,20 @@ ...@@ -151,17 +151,20 @@
151 151
152 // 用户组 152 // 用户组
153 .group { 153 .group {
154 width: 650px; 154 width: 660px;
155 display: flex; 155 display: flex;
156 justify-content: center; 156 justify-content: flex-start;
157 flex-wrap: wrap; 157 flex-wrap: wrap;
158 margin: 36px auto 0; 158 margin: 36px auto 0;
159 height: 450px;
160 overflow: hidden;
159 161
160 // 162 //
161 &-item { 163 &-item {
164 align-self: flex-start;
162 width: 33.33%; 165 width: 33.33%;
163 text-align: center; 166 text-align: center;
164 margin: 0 auto 32px; 167 margin-bottom: 32px;
165 168
166 &-portrait { 169 &-portrait {
167 margin: 0 auto; 170 margin: 0 auto;
...@@ -189,9 +192,27 @@ ...@@ -189,9 +192,27 @@
189 @include ellipsis(1); 192 @include ellipsis(1);
190 } 193 }
191 } 194 }
195
196 &-inv {
197 width: 145px;
198 padding: 0;
199 background-color: transparent;
200 background: transparent;
201
202
203 .icon-inv {
204 width: 145px;
205 }
206 }
192 } 207 }
193 } 208 }
194 209
210 .all {
211 height: auto;
212 // overflow: auto;
213 overflow: visible;
214 }
215
195 //查看更多 216 //查看更多
196 .more { 217 .more {
197 @extend .fcc; 218 @extend .fcc;
...@@ -199,6 +220,7 @@ ...@@ -199,6 +220,7 @@
199 font-weight: 500; 220 font-weight: 500;
200 text-align: center; 221 text-align: center;
201 color: #e16e6e; 222 color: #e16e6e;
223 padding-top: 32px;
202 224
203 .icon-down { 225 .icon-down {
204 width: 32px; 226 width: 32px;
...@@ -213,6 +235,30 @@ ...@@ -213,6 +235,30 @@
213 } 235 }
214 } 236 }
215 237
238 // 祝福内容
239 .blessing {
240 margin: 72px auto 72px;
241 $blessContentWidth: 690px;
242
243 &-item {
244 width: $blessContentWidth;
245 margin: 48px auto;
246 font-size: 42px;
247 text-align: center;
248 color: #333333;
249
250 &-text {
251 width: $blessContentWidth;
252 font-weight: bold;
253 }
254
255 &-image {
256 width: $blessContentWidth;
257 }
258
259 }
260 }
261
216 // 尾部 262 // 尾部
217 .tail { 263 .tail {
218 264
...@@ -310,3 +356,50 @@ ...@@ -310,3 +356,50 @@
310 } 356 }
311 } 357 }
312 } 358 }
359
360 .music {
361 width: 66px;
362 position: fixed;
363 right: 24px;
364 top: 24px;
365 z-index: 201;
366 }
367
368
369 .ani-rotation-music {
370 -webkit-transform: rotate(360deg);
371 animation: rotation 3s linear infinite;
372 -moz-animation: rotation 3s linear infinite;
373 -webkit-animation: rotation 3s linear infinite;
374 -o-animation: rotation 3s linear infinite;
375 }
376
377
378 .ani-rotation {
379 -webkit-transform: rotate(360deg);
380 animation: rotation 6s linear infinite;
381 -moz-animation: rotation 6s linear infinite;
382 -webkit-animation: rotation 6s linear infinite;
383 -o-animation: rotation 6s linear infinite;
384 }
385
386
387 @keyframes rotation {
388 from {
389 -webkit-transform: rotate(0deg);
390 }
391
392 to {
393 -webkit-transform: rotate(360deg);
394 }
395 }
396
397 @-webkit-keyframes rotation {
398 from {
399 -webkit-transform: rotate(0deg);
400 }
401
402 to {
403 -webkit-transform: rotate(360deg);
404 }
405 }
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
14 <!-- 用户头像 --> 14 <!-- 用户头像 -->
15 <view class="portrait"> 15 <view class="portrait">
16 <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" /> 16 <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
17 <image class="portrait-border" mode="scaleToFill" src="{{detailData.headFrame}}" /> 17 <image class="portrait-border ani-rotation" mode="scaleToFill" src="{{detailData.headFrame}}" />
18 </view> 18 </view>
19 <!-- 用户名称 --> 19 <!-- 用户名称 -->
20 <view class="name"> 20 <view class="name">
...@@ -28,25 +28,42 @@ ...@@ -28,25 +28,42 @@
28 <view class="tt t2">{{detailData.count}}人</view> 28 <view class="tt t2">{{detailData.count}}人</view>
29 </view> 29 </view>
30 <!-- 用户组 --> 30 <!-- 用户组 -->
31 <view class="group"> 31 <view wx:if="{{detailData.type == 1}}" class="group {{isMore ? 'all' : ''}}">
32 <view wx:for="{{memberList}}" wx:key="{{index}}" class="group-item"> 32 <view wx:for="{{memberList}}" wx:key="{{index}}" class="group-item">
33 <view class="group-item-portrait"></view> 33 <image class="group-item-portrait" mode="scaleToFill" src="{{item.memberHead}}" />
34 <view class="group-item-name"> 34 <view class="group-item-name">
35 <view class="t1">{{item.memberName}}</view> 35 <view class="t1">{{item.memberName}}</view>
36 <image wx:if="{{item.mySelf == 1}}" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" /> 36 <image wx:if="{{item.mySelf == 1}}" bindtap="showUpdateUserInfoDialog" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
37 </view> 37 </view>
38 </view> 38 </view>
39 <!-- 邀请 房主或组队模式显示 -->
40 <view class="group-item" wx:if="{{options.t || ownerMember.mySelf == 1}}">
41 <button data-data="join" open-type="share" class="group-item-inv">
42 <image class="icon-inv" mode="widthFix" src="../../image/icon/icon-inv.png" />
43 </button>
44 </view>
39 </view> 45 </view>
40 <!-- 更多 --> 46 <!-- 更多 -->
41 <view class="more"> 47 <view bindtap="onShowMoreHandler" wx:if="{{memberList.length >= 6 && !isMore}}" class="more">
42 查看更多 48 查看更多
43 <image class="icon-down" mode="widthFix" src="../../image/blessing/icon-down-arrow.png" /> 49 <image class="icon-down" mode="widthFix" src="../../image/blessing/icon-down-arrow.png" />
44 </view> 50 </view>
45 <!-- 自定义句子 --> 51 <!-- 自定义句子 -->
46 <view class="sentence">{{detailData.sentence}}</view> 52 <view class="sentence">{{detailData.blessTitle}}</view>
53 </view>
54 <!-- 祝福内容 -->
55 <view class="blessing">
56 <view wx:for="{{blessContent}}" wx:key="{{index}}" class="blessing-item">
57 <!-- 图片 -->
58 <image mode="widthFix" wx:if="{{item.type == 'image'}}" class="blessing-item-image" src="{{item.url}}" />
59 <!-- 文本 -->
60 <text wx:if="{{item.type == 'text'}}" class="blessing-item-text" style="color: {{item.color ? item.color : '#333333'}};">
61 {{item.content}}
62 </text>
63 </view>
47 </view> 64 </view>
48 <!-- 尾部内容 --> 65 <!-- 尾部内容 暂时不显示 -->
49 <view class="tail" wx:if="{{1>10}}"> 66 <view class="tail" wx:if="{{1>0}}">
50 <!-- 尾部头像 --> 67 <!-- 尾部头像 -->
51 <view class="portrait"> 68 <view class="portrait">
52 <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" /> 69 <image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
...@@ -54,12 +71,12 @@ ...@@ -54,12 +71,12 @@
54 </view> 71 </view>
55 <view class="name"> 72 <view class="name">
56 <view class="tt t1">{{ownerMember.memberName}}</view> 73 <view class="tt t1">{{ownerMember.memberName}}</view>
57 <view class="tt t2">{{detailData.blessTitle}}</view> 74 <view class="tt t2">{{detailData.sentence}}</view>
58 </view> 75 </view>
59 <!-- 按钮组 --> 76 <!-- 按钮组 -->
60 <view class="tail-btn-wrap"> 77 <view class="tail-btn-wrap">
61 <!-- 分享团队图片 --> 78 <!-- 分享团队图片 -->
62 <image wx:if="{{detailData.type == 1}}" mode="widthFix" class="tail-btn-wrap-item blessing-share-group-btn" src="../../image/blessing/blessing-share-group-btn.png" /> 79 <image bindtap="onPosterHandler" wx:if="{{detailData.type == 1}}" mode="widthFix" class="tail-btn-wrap-item blessing-share-group-btn" src="../../image/blessing/blessing-share-group-btn.png" />
63 <view wx:if="{{detailData.type == 0}}" bindtap="toReward" class="tail-btn-wrap-item more-template"> 80 <view wx:if="{{detailData.type == 0}}" bindtap="toReward" class="tail-btn-wrap-item more-template">
64 <span class="t1">赞赏祝福</span> 81 <span class="t1">赞赏祝福</span>
65 >> 82 >>
...@@ -80,7 +97,7 @@ ...@@ -80,7 +97,7 @@
80 <block wx:if="{{detailData.type == 0}}"> 97 <block wx:if="{{detailData.type == 0}}">
81 <!-- 未定制 --> 98 <!-- 未定制 -->
82 <view wx:if="{{detailData.customMade == 0}}" class="btn-wrap"> 99 <view wx:if="{{detailData.customMade == 0}}" class="btn-wrap">
83 <button class="btn btn1">分享图片祝福</button> 100 <button bindtap="onPosterHandler" class="btn btn1">分享图片祝福</button>
84 <button wx:if="{{!isAuth}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn btn2"> 101 <button wx:if="{{!isAuth}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn btn2">
85 定制我的祝福 102 定制我的祝福
86 </button> 103 </button>
...@@ -88,7 +105,7 @@ ...@@ -88,7 +105,7 @@
88 </view> 105 </view>
89 <!-- 已定制 --> 106 <!-- 已定制 -->
90 <view wx:if="{{detailData.customMade == 1}}" class="btn-wrap"> 107 <view wx:if="{{detailData.customMade == 1}}" class="btn-wrap">
91 <button class="btn btn1">分享图片祝福</button> 108 <button bindtap="onPosterHandler" class="btn btn1">分享图片祝福</button>
92 <button open-type="share" class="btn btn2">送出我的祝福</button> 109 <button open-type="share" class="btn btn2">送出我的祝福</button>
93 </view> 110 </view>
94 </block> 111 </block>
...@@ -127,6 +144,9 @@ ...@@ -127,6 +144,9 @@
127 </view> 144 </view>
128 </view> 145 </view>
129 </view> 146 </view>
147 <!-- 背景音乐 -->
148 <image bindtap="onBgmHandler" src="../../image/icon/icon-music.png" class="music {{isPlayingBgm?'ani-rotation-music':''}}" mode="widthFix"></image>
149 <!-- <audio src="{{detailData.musicUrl}}" id="myAudio"></audio> -->
130 <!-- 修改用户信息 --> 150 <!-- 修改用户信息 -->
131 <van-dialog close-on-click-overlay use-slot title="修改信息" confirm-button-text="确认修改" show="{{ updateUserInfoDialogVisible }}" show-cancel-button bind:confirm="onUpdateUserInfoHander"> 151 <van-dialog close-on-click-overlay use-slot title="修改信息" confirm-button-text="确认修改" show="{{ updateUserInfoDialogVisible }}" show-cancel-button bind:confirm="onUpdateUserInfoHander">
132 <view class="dialog"> 152 <view class="dialog">
...@@ -165,3 +185,4 @@ ...@@ -165,3 +185,4 @@
165 <view class="t1">邀请你一起加入组队送祝福!</view> 185 <view class="t1">邀请你一起加入组队送祝福!</view>
166 </view> 186 </view>
167 </van-dialog> 187 </van-dialog>
188 <shortcut2 types="{{[]}}" pics="{{['red-package2','more-bless']}}"></shortcut2>
......