xt / xcx-book · Commits

Go to a project

Commit c8f9c92f6a117bdd42b1f21f78bb1bbcb9208536

Authored by pengye
1 parent e4ca99e1
build: skipped

邀请函弹框领取后加动画

Inline Side-by-side
Showing 34 changed files with 1913 additions and 690 deletions
... ... @@ -5,7 +5,7 @@
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-left: 14rpx;
margin-left: 8rpx;
}
.scroll-number-item {
... ...
... ... @@ -64,6 +64,10 @@ Page({
markers: [], //地图标注
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '', //桌位id拼接
urlsValue: [], //包间预览图片列表
... ... @@ -124,6 +128,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1137,6 +1147,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1245,6 +1261,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1407,6 +1435,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour(time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -3,7 +3,16 @@
<nav hasHome class="navhome" backgroundColor="#ffeddc" place="{{true}}"></nav>
<scroll-view scroll-y class="viewBox">
<image wx:if="{{hasValueBroadcast && isVoice=='1'}}" class="musicImg" src="{{isPlay=='1'?'https://qn.colorcun.com/open.svg':'https://qn.colorcun.com/close.svg'}}" bindtap="stopMusic" animation="{{attentionAnim}}" />
<image class="giftImg" bindtap="gotoSellerGift" data-form="1" wx:if="{{(hasValueCertificate && coupon_dataList.length>0) || (!is_user_comments && isComments =='1' && couponData.showCoupon =='1') || (hasValueRecharge && marketing.is_recharge=='1' && recharge_data)}}" src="https://nosqn.colorcun.com/sellerGift.png" mode="" />
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo {{options.bookType ? 'birthdaySty' : 'noBirthday'}} {{options.hasSellerShare == '1' ? 'noBirthday1' : '' }}">
... ... @@ -309,29 +318,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -778,15 +778,21 @@
z-index: 200;
}
.giftImg {
.giftImg{
width: 108rpx;
height: 108rpx;
position: fixed !important;
right: 5%;
top: 33%;
height: 116rpx;
position: fixed !important;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
.cannotImg {
width: 200rpx;
height: 66rpx;
... ... @@ -804,7 +810,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -859,21 +864,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -886,39 +899,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -982,26 +997,57 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 198rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
\ No newline at end of file
... ...
... ... @@ -68,6 +68,10 @@ Page({
titleList: [], //优惠券、充值、评价标题数组
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '', //桌位id拼接
screenHeight: '',
... ... @@ -143,6 +147,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1214,6 +1224,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1324,6 +1340,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1486,6 +1514,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour(time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -3,7 +3,16 @@
<nav hasHome class="navhome" backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav>
<scroll-view scroll-y class="viewBox viewBox{{bookType}}">
<image wx:if="{{hasValueBroadcast && isVoice=='1'}}" class="musicImg" src="{{isPlay=='1'?'https://qn.colorcun.com/open.svg':'https://qn.colorcun.com/close.svg'}}" bindtap="stopMusic" animation="{{attentionAnim}}" />
<image class="giftImg" bindtap="gotoSellerGift" data-form="1" wx:if="{{(hasValueCertificate && coupon_dataList.length>0) || (!is_user_comments && isComments =='1' && couponData.showCoupon =='1') || (hasValueRecharge && marketing.is_recharge=='1' && recharge_data)}}" src="https://nosqn.colorcun.com/sellerGift.png" mode="" />
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfoBox" wx:if="{{detail && detail.ddate}}">
... ... @@ -476,29 +485,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -830,13 +830,18 @@
z-index: 200;
}
.giftImg {
.giftImg{
width: 108rpx;
height: 108rpx;
position: fixed !important;
right: 5%;
top: 33%;
height: 116rpx;
position: fixed !important;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
.cannotImg {
... ... @@ -856,7 +861,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -915,21 +919,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -942,39 +954,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -1038,28 +1052,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 商务宴会 */
... ...
... ... @@ -70,6 +70,10 @@ Page({
modalTitle: '', //弹框标题
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '', //桌位id拼接
screenHeight: '',
... ... @@ -137,6 +141,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 公共弹框
publicShowModal(e) {
... ... @@ -1224,6 +1234,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1334,6 +1350,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1496,6 +1524,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour(time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -3,7 +3,16 @@
<nav hasHome class="navhome" backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav>
<scroll-view scroll-y class="viewBox viewBox{{bookType}}">
<image wx:if="{{hasValueBroadcast && isVoice=='1'}}" class="musicImg" src="{{isPlay=='1'?'https://qn.colorcun.com/open.svg':'https://qn.colorcun.com/close.svg'}}" bindtap="stopMusic" animation="{{attentionAnim}}" />
<image class="giftImg" bindtap="gotoSellerGift" data-form="1" wx:if="{{(hasValueCertificate && coupon_dataList.length>0) || (!is_user_comments && isComments =='1' && couponData.showCoupon =='1') || (hasValueRecharge && marketing.is_recharge=='1' && recharge_data)}}" src="https://nosqn.colorcun.com/sellerGift.png" mode="" />
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo reservationInfo{{make}} {{options.hasSellerShare == '1' ? 'reservationInfo3' : '' }}">
... ... @@ -401,29 +410,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -853,13 +853,18 @@
z-index: 200;
}
.giftImg {
.giftImg{
width: 108rpx;
height: 108rpx;
position: fixed !important;
right: 5%;
top: 33%;
height: 116rpx;
position: fixed !important;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
.cannotImg {
... ... @@ -879,7 +884,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -975,21 +979,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -1002,39 +1014,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -1098,28 +1112,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 商务宴会 */
... ...
... ... @@ -69,6 +69,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -121,6 +125,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1083,6 +1093,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1191,6 +1207,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1354,6 +1382,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -9,11 +9,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="positioningBox">
... ... @@ -351,29 +356,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -735,12 +735,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -750,7 +755,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -817,21 +821,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -844,39 +856,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -940,28 +954,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 深中国红 */
... ...
... ... @@ -69,6 +69,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -121,6 +125,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1038,6 +1048,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1146,6 +1162,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1309,6 +1337,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -9,11 +9,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo">
... ... @@ -356,29 +361,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -767,12 +767,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -782,7 +787,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -849,21 +853,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -876,39 +888,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -972,28 +986,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 深中国红 */
... ...
... ... @@ -69,6 +69,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -121,6 +125,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1038,6 +1048,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1146,6 +1162,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1309,6 +1337,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ... @@ -1364,5 +1425,5 @@ Page({
*/
onReachBottom() {
},
},
})
\ No newline at end of file
... ...
... ... @@ -8,11 +8,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo" wx:if="{{themeColor}}">
... ... @@ -339,29 +344,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -752,12 +752,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -767,12 +772,11 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
font-size: 44rpx;
text-align: center;
text-align: center;
}
.explain{
... ... @@ -834,21 +838,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -861,39 +873,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -957,28 +971,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 深中国红 */
... ...
... ... @@ -68,6 +68,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -120,6 +124,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1037,6 +1047,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1145,6 +1161,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1308,6 +1336,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -8,11 +8,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo">
... ... @@ -338,29 +343,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -751,12 +751,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -766,7 +771,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -833,21 +837,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -860,39 +872,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -956,28 +970,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 深中国红 */
... ...
... ... @@ -70,6 +70,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
screenHeight: '',
attentionAnim: {},
... ... @@ -120,6 +124,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -995,6 +1005,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1103,6 +1119,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1266,6 +1294,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -9,11 +9,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="titleImg">
... ... @@ -326,29 +331,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -906,12 +906,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -921,7 +926,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -988,21 +992,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -1015,39 +1027,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -1111,28 +1125,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
.arrivalBox{
... ...
... ... @@ -69,6 +69,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -121,6 +125,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1038,6 +1048,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1146,6 +1162,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1309,6 +1337,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -9,11 +9,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo">
... ... @@ -351,29 +356,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -755,12 +755,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -770,7 +775,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -837,21 +841,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -864,39 +876,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -960,28 +974,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 深中国红 */
... ...
... ... @@ -69,6 +69,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -121,6 +125,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1037,6 +1047,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1145,6 +1161,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1308,6 +1336,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -9,11 +9,16 @@
bindtap="stopMusic"
animation="{{attentionAnim}}"
/>
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
wx:if="{{(hasValueCertificate && marketing && marketing.is_coupon=='1' && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo">
... ... @@ -350,29 +355,28 @@
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -755,12 +755,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -770,7 +775,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -837,21 +841,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -864,39 +876,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -960,28 +974,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 深中国红 */
... ...
... ... @@ -77,6 +77,10 @@ Page({
isShareItem:'',//转发客人按钮
couponArr: [],//待领取的优惠券列表
couponList:[],//优惠券列表
animationData: {},
animationData2:{},
isShow:'0',
isFrame:'0'
},
tablestr: '',
urlsValue: [],
... ... @@ -129,6 +133,12 @@ Page({
closeCouponModal() {
this.getActivityByIdFun(this.data.couponList,'1')
this.couponModal.closeModal()
this.setData({
isShow: '1',
})
setTimeout(() => {
this.startAnimation();
}, 800);
},
// 页面滚动事件
onPageScroll: function (event) {
... ... @@ -1078,6 +1088,12 @@ Page({
// 免费券判断是否领取，弹框领取
if (freeCoupons.length > 0 && couponShow) {
this.getCoupon(freeCoupons,obj,setcoupon)
} else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
console.log('邀请函--------------------优惠券', list);
this.setData({
... ... @@ -1186,6 +1202,18 @@ Page({
})
this.couponModal.showModal()
}, 3000);
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
}else {
if(setcoupon!='1'){
this.setData({
isFrame:'1',
})
}
}
list.forEach(item=>{
... ... @@ -1348,6 +1376,39 @@ Page({
}
return new Date(data || new Date())
},
// 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
startAnimation() {
const animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY('-60%')
.translateX('34%')
.scale(0)
.step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
this.startSecondAnimation();
}, 800);
},
// 出现商家有礼图标，并且晃动2下
startSecondAnimation() {
const animation = wx.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(-15).step()
.rotate(15).step()
.rotate(0).step();
this.setData({
animationData2: animation.export()
});
},
//根据起始时间（获取时间时间段）
computeHour (time1, time2, interval) {
//time1 开始时间 time2结束时间 interval间隔时长
... ...
... ... @@ -3,11 +3,16 @@
<nav hasHome id='nav' backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav>
<scroll-view scroll-y class="viewBox viewBox{{StyleType}}">
<image wx:if="{{hasValueBroadcast && reserve && reserve.swich_voice && reserve.swich_voice=='1'}}" class="musicImg" src="{{isPlay=='1'?'https://qn.colorcun.com/open.svg':'https://qn.colorcun.com/close.svg'}}" bindtap="stopMusic" animation="{{attentionAnim}}" />
<image class="giftImg"
<image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
bindtap="gotoSellerGift"
data-form="1"
animation="{{animationData2}}"
wx:if="{{(hasValueCertificate && marketing && coupon_dataList.length>0) || (is_comments=='1' && !is_user_comments && marketing.is_comments_coupon=='1' && couponData && couponData.showCoupon =='1') || (hasValueRecharge && marketing && marketing.is_recharge=='1' && recharge_data)}}"
src="https://nosqn.colorcun.com/sellerGift.png" mode=""/>
src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
<view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
<image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
</view>
<view class="targetPoint" style="top: 35%; right: 4%;"></view>
<image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
<image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
<view class="reservationInfo" style="background: url('{{settingUrl}}') no-repeat;background-size:cover;">
... ... @@ -349,29 +354,28 @@
</view>
</my-modal>
<my-modal id="couponModal" fadeStyle="slideUp" height="240px">
<view slot="modalName" class="titleModal">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>
<view class="nameInfo">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal" wx:if="{{totalPrice}}">
赠送给您
<scroll-number value="{{totalPrice}}"></scroll-number>
<text class="counterText1">元</text>代金券
</view>
<view slot="modalName">
<image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
</view>
<view slot="modalContent">
<!-- <view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="couponNum font20r">×{{item.number}}</view>
<view class="font36r couponPrice">¥<text>{{item.price}}</text></view>
<view class="couponLines"></view>
<view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
<view class="font28r couponCondition" wx:else>无门槛</view>
<view class="titleModal">
<view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
<view class="couponTotal font28r" wx:if="{{totalPrice}}">
赠送给您代金券
<view class="counterText">
<view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
</view>
</view>
</view> -->
<view class="couponInfo font24r">您到店扫码支付即可自动使用</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font36r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
<view class="couponWrap">
<view class="couponInfo font48r">
<text class="font48r">到店微信扫码</text>
<text class="font48r">自动识别</text>
</view>
<subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
<view class="couponBtn font28r">我知道了</view>
</subscribe>
<view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
... ... @@ -871,12 +871,17 @@
}
.giftImg{
width: 108rpx;
height: 108rpx;
width: 108rpx;
height: 116rpx;
position: fixed !important;
right: 5%;
top: 33%;
z-index: 200;
right: 4%;
top: 28%;
z-index: 200;
transform-origin: 50% 100%;
}
.giftImg1 {
transform: scale(0);
}
#payModal {
... ... @@ -886,7 +891,6 @@
.titleModal {
width: 100%;
margin-top: 48rpx;
color: #000;
font-family: PingFang SC;
font-weight: 500;
... ... @@ -953,21 +957,29 @@
}
#couponModal .titleModal {
margin-top: 60%;
position: relative;
width: 100%;
width: 544rpx;
background: #F14033;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
margin: 94% auto 0;
}
#couponModal .titleModal2 {
margin-top: 80%;
#couponModal .couponWrap {
position: relative;
width: 544rpx;
margin: 0 auto;
background: #F14033;
border-bottom-left-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
#couponModal .titleModal3 {
margin-top: 60%;
#couponModal .mymodal-title {
padding: 0 80rpx;
}
#couponModal .titleModal4 {
margin-top: 30%;
#couponModal .mymodal-content {
padding: 0 80rpx 40rpx 80rpx;
}
#couponModal .mymodal {
... ... @@ -980,39 +992,41 @@
.nameInfo {
font-family: PingFang SC;
font-weight: 400;
font-size: 52rpx;
line-height: 56rpx;
font-weight: 500;
line-height: 38rpx;
color: #fff;
margin-bottom: 40rpx;
padding-top: 60rpx;
margin-bottom: 28rpx;
text-align: center;
padding: 44rpx 30rpx 0 30rpx;
}
.couponTotal {
color: #dfdfdf;
color: #fff;
font-family: PingFang SC;
font-weight: 400;
font-size: 40rpx;
font-weight: 500;
line-height: 48rpx;
margin-bottom: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin: 20% 0 10% 0;
padding-bottom: 16rpx;
}
.counterText {
color: #ffc806;
font-weight: 600;
font-size: 80rpx;
margin-right: 14rpx;
display: flex;
font-size: 100rpx;
align-items: flex-end;
justify-content: center;
margin: 16rpx 0;
}
.couponInfo {
color: #DFDFDF;
color: #fff;
text-align: center;
margin-bottom: 40rpx;
margin-bottom: 20rpx;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
line-height: 78rpx;
}
.couponBox {
... ... @@ -1076,28 +1090,59 @@
.couponBtn {
width: 80%;
margin: 0 auto;
border-radius: 42rpx;
background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);
font-weight: 400;
color: #fff;
background: #fff;
font-weight: 600;
text-align: center;
border: 4rpx solid #fff;
padding: 12rpx 0;
margin: 16rpx auto 20rpx auto;
color: #F14033;
border-radius: 8rpx;
}
.couponText {
color: #fff;
text-decoration: underline;
text-align: center;
padding-bottom: 44rpx;
font-weight: 600;
letter-spacing:2rpx;
}
.closeImg {
width: 60rpx;
height: 60rpx;
position: absolute;
right: 5%;
top: -10%;
position: fixed;
left: 46%;
bottom: 24%;
}
/* 全屏遮罩层初始样式 */
.fullscreenMask {
position: fixed;
top: 35%;
margin: 0 auto;
height: 580rpx;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 100%;
}
.fullscreenMask image{
width: 544rpx;
height: 600rpx;
}
/* 目标点（右上角的商家有礼位置） */
.targetPoint {
position: fixed;
width: 108rpx;
height: 116rpx;
background: transparent;
z-index: 100;
}
/* 模板9 */
... ...