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 @@
"navigationBarTitleText": "家有儿孙",
"navigationBarTextStyle": "black"
},
"requiredBackgroundModes": ["audio"],
"usingComponents": {
"authorize-comp": "../../component/authorize-comp/authorize-comp",
"empty-tips": "../../component/empty-tips/empty-tips",
"shortcut": "../../component/shortcut/shortcut",
"shortcut2": "../../component/shortcut2/shortcut2",
"van-popup": "../../ui/vant-weapp/popup/index",
"van-dialog": "../../ui/vant-weapp/dialog/index",
"van-sticky": "../../ui/vant-weapp/sticky/index",
......
......@@ -104,8 +104,13 @@ button {
// 红包
.red-p {
.comp {
bottom: auto;
// top: 56%;
bottom: 20%;
}
}
.red-p2 {
.comp2 {
right: 12px;
bottom: 20%;
}
}
......
import {
getBindtapData
} from '../../utils/util';
let app = getApp();
Component({
// 样式隔离
// 详见 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
// isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
// apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
// shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
options: {
styleIsolation: 'apply-shared'
},
properties: {
types: {
type: Array,
value: ["home", "return"]
},
pics: {
type: Array,
value: []
},
contact: {
type: Boolean,
value: true
}
},
data: {
// 这里是一些组件内部数据
typeIconMap: {
"home": "iconhome",
"return": "iconreturn"
}
},
methods: {
// 点击按按钮
onTapHandler(evt) {
let curType = getBindtapData(evt);
switch (curType) {
case "home":
app.router.push({
openType: "reLaunch",
path: "index"
})
break;
case "return":
app.router.push({
openType: "back"
})
break;
case "red-package":
app.router.push({
path: "reward"
})
break;
case "red-package2":
app.router.push({
path: "reward"
})
break;
case "more-bless":
let pages = getCurrentPages();
if (pages.length > 1) {
// 如果能返回上一级
app.router.push({
openType: "back"
});
} else {
app.router.push({
openType: "redirect",
path: "index"
});
}
break;
default:
break;
}
},
// 客服消息
handleContact(e) {
console.log("handleContact");
console.log(e.detail.path);
console.log(e.detail.query);
// 打点
app.stat({
classify: "service",
action: "service_click",
primaryCode: "",
});
}
}
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
.comp {
position: fixed;
bottom: 30%;
right: 2%;
z-index: 91;
color: #ffffff;
$btnSize: 126px;
.btn {
width: $btnSize;
height: $btnSize;
margin-bottom: 12px;
border-radius: $btnSize;
display: flex;
justify-content: center;
align-items: center;
}
.iconfont {
font-size: 64px;
}
.pics {
height: $btnSize;
}
.point {
background-color: rgba($color: #000000, $alpha: 0.6);
}
$contactWidth:140px;
.contact {
background-color: transparent;
@extend .fcc;
color: #ffffff;
width: $contactWidth;
height: $contactWidth;
margin-left: -18px;
margin-top: -8px;
.img {
width: $contactWidth;
height: $contactWidth;
border-radius: 8px;
}
}
}
<view class="comp">
<!-- <view wx:for="{{types}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn point">
<span class="iconfont {{typeIconMap[item+''] }}"></span>
</view> -->
<view wx:for="{{pics}}" wx:key="{{index}}" data-data="{{item}}" bindtap="onTapHandler" class="btn">
<image mode="aspectFit" src="{{'../../image/shortcut/'+item+'.png'}}" class="pics" />
</view>
<!-- <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">
<image class="img" mode="widthFix" src="../../image/shortcut/contact.jpg" />
</button> -->
</view>
......@@ -5,6 +5,8 @@ import {
import Dialog from '../../ui/vant-weapp/dialog/dialog';
const back = wx.getBackgroundAudioManager();
let app = getApp();
Page({
data: {
......@@ -35,16 +37,17 @@ Page({
// 加入房间
joinRoomDialogVisible: false,
isJoin: false, // 是否能加入状态
},
onChange(event) {
// event.detail 为当前输入的值
console.log(event.detail);
isPlayingBgm: false,
isMore: false,
// shortcutPics:["red-package2","more-bless"]
},
onShareAppMessage(res) {
let shareType = ""
if (res.from === 'button') {
// 来自页面内转发按钮
// shareType == join 分享给家人,能加入
// shareType == join 分享给家人,能加入 组队模式
shareType = res.target.dataset.data || "";
console.log("shareType:", shareType);
} else {}
......@@ -78,6 +81,7 @@ Page({
})
this.initData();
this.queryBlessDetail().then((result) => {
this.playBgm();
let {
detailData,
ownerMember,
......@@ -123,6 +127,34 @@ Page({
* 授权完毕重拉数据用
*/
initData() {},
playBgm() {
return;
let _this = this;
let {
detailData
} = this.data;
this.setData({
isPlayingBgm: true,
})
back.title = "背景音乐";
back.src = detailData.musicUrl;
back.onEnded(() => {
_this.playBgm();
})
},
pauseBgm() {
wx.pauseBackgroundAudio()
this.setData({
isPlayingBgm: false,
})
},
onShowMoreHandler() {
this.setData({
isMore: true
})
},
showTips(evt) {
let tips = getBindtapData(evt);
......@@ -160,6 +192,13 @@ Page({
}
},
/**
* 分享图片祝福
* 生成海报
*/
onPosterHandler(){
},
// 显示更新用户信息
showUpdateUserInfoDialog() {
this.setData({
......@@ -266,7 +305,7 @@ Page({
url: app.api.blessUpdateUserInfo,
data: {
blessCode: detailData.blessCode,
ownerMemberCode: app.store.getItem("memberCode"),
ownerMemberCode: this.data.options.m ? this.data.options.m : app.store.getItem("memberCode") ? app.store.getItem("memberCode") : "",
memberName: updateUserInfo.memberName || "",
memberHead: picRes[0] || "",
}
......@@ -354,10 +393,27 @@ Page({
try {
blessContent = JSON.parse(result.blessContent) || [];
} catch (error) {}
let memberList = result.memberList;
// hardcode数据
// for (let index = 0; index < 18; index++) {
// memberList.push({
// blessCode: "4144feba2b904ba89585d90e8618a863",
// blessMemberCode: "747e8e314d0e46679be17fb495975439",
// count: 2,
// customMade: 0,
// familyName: "祝福团体称呼",
// memberCode: "9af835ad57234cf2826b770dcc8a9897",
// memberHead: "https://wx.qlogo.cn/mmopen/vi_32/v4XnMftVxCzkFD8ibLicDjxicFhzugVt4vUWsHmup9ZeunwZhQ21H9ugELpgyTicsVyNCXenqIlUHBIkZ2aEP2qPpw/132",
// memberName: "ee",
// mySelf: 1,
// owner: 0,
// sentence: "定义"
// })
// }
this.setData({
detailData: result,
ownerMember: result.ownerMember,
memberList: result.memberList,
memberList: memberList,
blessContent: blessContent,
});
console.log("detailData:", result);
......
......@@ -151,17 +151,20 @@
// 用户组
.group {
width: 650px;
width: 660px;
display: flex;
justify-content: center;
justify-content: flex-start;
flex-wrap: wrap;
margin: 36px auto 0;
height: 450px;
overflow: hidden;
//
&-item {
align-self: flex-start;
width: 33.33%;
text-align: center;
margin: 0 auto 32px;
margin-bottom: 32px;
&-portrait {
margin: 0 auto;
......@@ -189,9 +192,27 @@
@include ellipsis(1);
}
}
&-inv {
width: 145px;
padding: 0;
background-color: transparent;
background: transparent;
.icon-inv {
width: 145px;
}
}
}
}
.all {
height: auto;
// overflow: auto;
overflow: visible;
}
//查看更多
.more {
@extend .fcc;
......@@ -199,6 +220,7 @@
font-weight: 500;
text-align: center;
color: #e16e6e;
padding-top: 32px;
.icon-down {
width: 32px;
......@@ -213,6 +235,30 @@
}
}
// 祝福内容
.blessing {
margin: 72px auto 72px;
$blessContentWidth: 690px;
&-item {
width: $blessContentWidth;
margin: 48px auto;
font-size: 42px;
text-align: center;
color: #333333;
&-text {
width: $blessContentWidth;
font-weight: bold;
}
&-image {
width: $blessContentWidth;
}
}
}
// 尾部
.tail {
......@@ -310,3 +356,50 @@
}
}
}
.music {
width: 66px;
position: fixed;
right: 24px;
top: 24px;
z-index: 201;
}
.ani-rotation-music {
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.ani-rotation {
-webkit-transform: rotate(360deg);
animation: rotation 6s linear infinite;
-moz-animation: rotation 6s linear infinite;
-webkit-animation: rotation 6s linear infinite;
-o-animation: rotation 6s linear infinite;
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
......
......@@ -14,7 +14,7 @@
<!-- 用户头像 -->
<view class="portrait">
<image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
<image class="portrait-border" mode="scaleToFill" src="{{detailData.headFrame}}" />
<image class="portrait-border ani-rotation" mode="scaleToFill" src="{{detailData.headFrame}}" />
</view>
<!-- 用户名称 -->
<view class="name">
......@@ -28,25 +28,42 @@
<view class="tt t2">{{detailData.count}}人</view>
</view>
<!-- 用户组 -->
<view class="group">
<view wx:if="{{detailData.type == 1}}" class="group {{isMore ? 'all' : ''}}">
<view wx:for="{{memberList}}" wx:key="{{index}}" class="group-item">
<view class="group-item-portrait"></view>
<image class="group-item-portrait" mode="scaleToFill" src="{{item.memberHead}}" />
<view class="group-item-name">
<view class="t1">{{item.memberName}}</view>
<image wx:if="{{item.mySelf == 1}}" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
<image wx:if="{{item.mySelf == 1}}" bindtap="showUpdateUserInfoDialog" class="name-edit" mode="widthFix" src="../../image/blessing/icon-edit.png" />
</view>
</view>
<!-- 邀请 房主或组队模式显示 -->
<view class="group-item" wx:if="{{options.t || ownerMember.mySelf == 1}}">
<button data-data="join" open-type="share" class="group-item-inv">
<image class="icon-inv" mode="widthFix" src="../../image/icon/icon-inv.png" />
</button>
</view>
</view>
<!-- 更多 -->
<view class="more">
<view bindtap="onShowMoreHandler" wx:if="{{memberList.length >= 6 && !isMore}}" class="more">
查看更多
<image class="icon-down" mode="widthFix" src="../../image/blessing/icon-down-arrow.png" />
</view>
<!-- 自定义句子 -->
<view class="sentence">{{detailData.sentence}}</view>
<view class="sentence">{{detailData.blessTitle}}</view>
</view>
<!-- 祝福内容 -->
<view class="blessing">
<view wx:for="{{blessContent}}" wx:key="{{index}}" class="blessing-item">
<!-- 图片 -->
<image mode="widthFix" wx:if="{{item.type == 'image'}}" class="blessing-item-image" src="{{item.url}}" />
<!-- 文本 -->
<text wx:if="{{item.type == 'text'}}" class="blessing-item-text" style="color: {{item.color ? item.color : '#333333'}};">
{{item.content}}
</text>
</view>
</view>
<!-- 尾部内容 -->
<view class="tail" wx:if="{{1>10}}">
<!-- 尾部内容 暂时不显示 -->
<view class="tail" wx:if="{{1>0}}">
<!-- 尾部头像 -->
<view class="portrait">
<image class="portrait-inner" mode="scaleToFill" src="{{ownerMember.memberHead}}" />
......@@ -54,12 +71,12 @@
</view>
<view class="name">
<view class="tt t1">{{ownerMember.memberName}}</view>
<view class="tt t2">{{detailData.blessTitle}}</view>
<view class="tt t2">{{detailData.sentence}}</view>
</view>
<!-- 按钮组 -->
<view class="tail-btn-wrap">
<!-- 分享团队图片 -->
<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" />
<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" />
<view wx:if="{{detailData.type == 0}}" bindtap="toReward" class="tail-btn-wrap-item more-template">
<span class="t1">赞赏祝福</span>
>>
......@@ -80,7 +97,7 @@
<block wx:if="{{detailData.type == 0}}">
<!-- 未定制 -->
<view wx:if="{{detailData.customMade == 0}}" class="btn-wrap">
<button class="btn btn1">分享图片祝福</button>
<button bindtap="onPosterHandler" class="btn btn1">分享图片祝福</button>
<button wx:if="{{!isAuth}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="btn btn2">
定制我的祝福
</button>
......@@ -88,7 +105,7 @@
</view>
<!-- 已定制 -->
<view wx:if="{{detailData.customMade == 1}}" class="btn-wrap">
<button class="btn btn1">分享图片祝福</button>
<button bindtap="onPosterHandler" class="btn btn1">分享图片祝福</button>
<button open-type="share" class="btn btn2">送出我的祝福</button>
</view>
</block>
......@@ -127,6 +144,9 @@
</view>
</view>
</view>
<!-- 背景音乐 -->
<image bindtap="onBgmHandler" src="../../image/icon/icon-music.png" class="music {{isPlayingBgm?'ani-rotation-music':''}}" mode="widthFix"></image>
<!-- <audio src="{{detailData.musicUrl}}" id="myAudio"></audio> -->
<!-- 修改用户信息 -->
<van-dialog close-on-click-overlay use-slot title="修改信息" confirm-button-text="确认修改" show="{{ updateUserInfoDialogVisible }}" show-cancel-button bind:confirm="onUpdateUserInfoHander">
<view class="dialog">
......@@ -165,3 +185,4 @@
<view class="t1">邀请你一起加入组队送祝福!</view>
</view>
</van-dialog>
<shortcut2 types="{{[]}}" pics="{{['red-package2','more-bless']}}"></shortcut2>
......