Skip to content

dev / marubi-wish-list-mp

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

no message

1 parent a13126d4
Expand all
Inline Side-by-side
Showing 19 changed files with 331 additions and 42 deletions
......@@ -12,6 +12,7 @@
// 原子类
@import "assets/scss/utils";
// 图标
// @import 'styles/iconfont.wxss';
......@@ -131,3 +132,85 @@ button::after {
border: none;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
......
......@@ -11,4 +11,4 @@
@import "var";
@import "animate";
......

89.5 KB | W: | H:

90.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -68,7 +68,8 @@
margin: 0 auto;
width: 480px;
color: #333333;
font-size: 28px;
// font-size: 28px;
font-size: 24px;
line-height: 1.6;
height: 140px;
@include ellipsis(3);
......
......@@ -9,7 +9,7 @@
<view class="content">
<!-- 摇一摇 -->
<!-- bindtap="queryWishbillAssist" -->
<view bindtap="queryWishbillAssist" wx:if="{{status != 1}}" class="shake">
<view bindtap="queryWishbillAssist" wx:if="{{status != 1 && wishInfo.isAssist != 1}}" class="shake">
<image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c2.png" />
<image class="coop-shake animated tada infinite" mode="widthFix " src="../../image/oss/coop/coop-shake.png" />
<view class="space1"></view>
......
......@@ -15,7 +15,7 @@ Page({
tipsGroupMemberVisible: false,
tipsNewMemberVisible: false,
tipsWishVisible: false,
tipsShakeVisible: true,
tipsShakeVisible: false,
tipsCommonVisible: false,
tipsCreateCompleteVisible: false,
tipsInnerText: "",
......@@ -31,6 +31,7 @@ Page({
userInfo: {},
isPageVisible: false,
// canShake:false,
guideIndex: 0,
},
onShareAppMessage() {},
onShow() {
......@@ -59,17 +60,20 @@ Page({
this.initBorder();
})
this.checkNeedQuestion();
this.checkFirst();
});
this.initShake();
},
initBorder() {
// 第一幕
let productList1 = [
"P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003"
]
let targetProductList = productList1;
let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)];
this.doShowTipsBorder(randomIndex);
// let productList1 = [
// "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003"
// ]
// let targetProductList = productList1;
// let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)];
// this.doShowTipsBorder(randomIndex);
this.doShowTipsBorder("P000000000000000000000000000002");
},
// 添加摇一摇
initShake() {
......@@ -83,20 +87,23 @@ Page({
tipsShakeVisible: false,
tipsCreateCompleteVisible: true
})
// wx.showModal({
// title: '提示',
// content: '触发摇一摇',
// success: res => {
// _this.setData({
// tipsShakeVisible: false,
// tipsCreateCompleteVisible: true
// })
// }
// })
}
});
},
/**
* 是否第一次进入当前页面
*/
checkFirst() {
let isFirst = app.store.getItem("create-wish-first");
if (!isFirst) {
this.setData({
guideIndex: 1
})
}
},
/**
* 检验是否需要先答题 是的话弹答题
* 1.已经登陆
......@@ -372,6 +379,11 @@ Page({
* @param {*} evt
*/
onChangeStatusHandler(evt) {
wx.showToast({
title: "场景修缉中，敬请期待",
icon: "none"
});
return;
let curStatus = this.data.curStatus;
curStatus++;
if (curStatus > 3) {
......@@ -382,6 +394,20 @@ Page({
tipsBorderVisible: false
})
},
// 点击蒙层指引
onGuideHandler() {
let guideIndex = this.data.guideIndex;
guideIndex++;
if (guideIndex > 2) {
guideIndex = 0;
app.store.setItem("create-wish-first", "true");
}
this.setData({
guideIndex
})
},
/**
* 根据唯一码/code 索引
*/
......
......@@ -29,6 +29,13 @@
height: 40px;
animation: scalelinear 2s linear infinite;
}
.rect {
position: absolute;
z-index: 41;
// background-color: wheat;
opacity: .5;
}
}
.view1 {
......@@ -50,6 +57,27 @@
left: 558px;
top: 437px;
}
.rect1 {
width: 150px;
height: 360px;
left: 40px;
top: 160px;
}
.rect2 {
width: 150px;
height: 150px;
left: 234px;
top: 350px;
}
.rect3 {
width: 150px;
height: 380px;
left: 534px;
top: 220px;
}
}
.tips-border {
......@@ -232,7 +260,7 @@
font-size: 120px;
}
.icon{}
.icon {}
.tips {
......@@ -278,3 +306,36 @@
transform: scale(1);
}
}
.guide {
position: relative;
.mask {
background-color: rgba($color: #000000, $alpha: .7);
width: 100%;
height: 100%;
z-index: 101;
position: fixed;
bottom: 0;
}
&-item {
position: absolute;
z-index: 9999;
}
&-item-1 {
width: 644px;
height: 246px;
top: 158px;
left: 20px;
}
&-item-2 {
width: 639px;
height: 169px;
top: 496px;
left: 40px;
}
}
......
<view class="page">
<view wx:if="{{guideIndex >= 1 && guideIndex <= 2 }}" bindtap="onGuideHandler" class="guide">
<view class="mask"></view>
<image wx:if="{{guideIndex == 1}}" class="guide-item guide-item-1" mode="widthFix" src="../../image/guide/guide-c-wish-1.png" />
<image wx:if="{{guideIndex == 2}}" class="guide-item guide-item-2" mode="widthFix" src="../../image/guide/guide-c-wish-2.png" />
</view>
<view class="app__bgc bgc {{curStatus==1?'bgc1':''}}"></view>
<view class="app__bg bg"></view>
<!-- 场景 -->
......@@ -9,6 +14,9 @@
<image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002" class="point point1" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
<image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003" class="point point2" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
<image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001" class="point point3" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
<view class="rect rect1" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002"></view>
<view class="rect rect2" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003"></view>
<view class="rect rect3" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001"></view>
</view>
<view wx:if="{{curStatus==2}}" class="view view2">场景待确认2</view>
<view wx:if="{{curStatus==3}}" class="view view3">场景待确认3</view>
......
......@@ -13,21 +13,26 @@ Page({
})
},
onLoad(options) {
app.queryIndex({
auth: false
}).then((result) => {
this.setData({
indexInfo: app.globalData.indexInfo
})
let {
wishBillCode
} = app.globalData.indexInfo;
if (wishBillCode) {
app.router.push({
path: "wish"
let sessionId = app.store.getItem('sessionId');
if (sessionId) {
app.queryIndex({
auth: false
}).then((result) => {
this.setData({
indexInfo: app.globalData.indexInfo
})
}
})
let {
wishBillCode
} = app.globalData.indexInfo;
if (wishBillCode) {
app.router.push({
openType: "redirectTo",
path: "wish"
})
}
})
}
},
initData() {},
// 开始互动游戏 判断是否会员
......
......@@ -21,6 +21,7 @@ Page({
status: 1, // 1正常(有库存) 2无库存
animationThumbData: [], // 进度条动画
animationFlagData: [], // 旗帜画库
guideIndex: 0, // 指引索引
},
onShareAppMessage(res) {
if (res.from === 'button') {
......@@ -55,9 +56,36 @@ Page({
this.playAnimation();
});
this.queryWishbillHelpers();
// this.pageScrollToBottom();
this.checkFirst();
})
},
/**
* 是否第一次进入当前页面
*/
checkFirst() {
let isFirst = app.store.getItem("wish-first");
if (!isFirst) {
this.setData({
guideIndex: 1
})
}
},
/**
* 滚动到页面底部
*/
pageScrollToBottom() {
wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) {
// 使页面滚动到底部
wx.pageScrollTo({
scrollTop: rect.bottom + 5000,
duration: 300
})
}).exec()
},
// 播放动画
playAnimation() {
let wishList = this.data.wishList;
......@@ -185,6 +213,25 @@ Page({
onShareHandler() {
},
// 点击蒙层指引
onGuideHandler() {
let guideIndex = this.data.guideIndex;
guideIndex++;
if (guideIndex > 4) {
guideIndex = 0;
wx.pageScrollTo({
scrollTop: 0,
duration: 300
})
app.store.setItem("wish-first", "true");
}
if (guideIndex == 4) {
this.pageScrollToBottom();
}
this.setData({
guideIndex
})
},
// 获取心愿单详情
queryWishbillDetail() {
return new Promise((resolve, reject) => {
......
......@@ -88,14 +88,19 @@
.mycard {
@include cb(160px, 48px);
margin: 16px auto;
// border-radius: 24px;
// box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.1);
// background-color: #ffffff;
// color: #bb3039;
// @include btc(160px, 48px);
font-size: 24px;
// @include cb(160px, 48px);
// margin: 16px auto;
// font-size: 24px;
// @include btc(160px, 48px);
// color: #bf0221;
// background-image: linear-gradient(to right, #fbddd5, #f9efed 51%, #ffded9 99%), linear-gradient(to bottom, #000000, #000000);
// border-radius: 24px;
}
}
// 奖品
......@@ -225,7 +230,7 @@
background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138);
color: #ffffff;
font-size: 28px;
@include btc(200px, 56px);
@include btc(192px, 54px);
@include border-top-radius(28px);
}
}
......@@ -320,3 +325,49 @@
}
}
}
.guide {
position: relative;
.mask {
background-color: rgba($color: #000000, $alpha: .7);
width: 100%;
height: 100%;
z-index: 101;
position: fixed;
bottom: 0;
}
&-item {
position: absolute;
z-index: 9999;
}
&-item-1 {
width: 459px;
height: 281px;
top: 30px;
right: 2px;
}
&-item-2 {
width: 565px;
height: 281px;
top: 296px;
left: 127px;
}
&-item-3 {
width: 565px;
height: 281px;
top: 899.8px;
left: 159px;
}
&-item-4 {
width: 410px;
height: 199px;
top: 1588px;
left: 292px;
}
}
......
<view class="page">
<view class="page" id="page">
<view wx:if="{{guideIndex >= 1 && guideIndex <= 4 }}" bindtap="onGuideHandler" class="guide">
<view class="mask"></view>
<image wx:if="{{guideIndex == 1}}" class="guide-item guide-item-1" mode="widthFix" src="../../image/guide/guide-wish-1.png" />
<image wx:if="{{guideIndex == 2}}" class="guide-item guide-item-2" mode="widthFix" src="../../image/guide/guide-wish-2.png" />
<image wx:if="{{guideIndex == 3}}" class="guide-item guide-item-3" mode="widthFix" src="../../image/guide/guide-wish-3.png" />
<image wx:if="{{guideIndex == 4}}" class="guide-item guide-item-4" mode="widthFix" src="../../image/guide/guide-wish-4.png" />
</view>
<view class="app__bgc bgc"></view>
<view class="app__bg bg">
<image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" />
......