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 @@ @@ -5,7 +5,7 @@
5 color: #ffc806; 5 color: #ffc806;
6 font-weight: 600; 6 font-weight: 600;
7 font-size: 80rpx; 7 font-size: 80rpx;
8 - margin-left: 14rpx; 8 + margin-left: 8rpx;
9 } 9 }
10 10
11 .scroll-number-item { 11 .scroll-number-item {
@@ -64,6 +64,10 @@ Page({ @@ -64,6 +64,10 @@ Page({
64 markers: [], //地图标注 64 markers: [], //地图标注
65 couponArr: [],//待领取的优惠券列表 65 couponArr: [],//待领取的优惠券列表
66 couponList:[],//优惠券列表 66 couponList:[],//优惠券列表
  67 + animationData: {},
  68 + animationData2:{},
  69 + isShow:'0',
  70 + isFrame:'0'
67 }, 71 },
68 tablestr: '', //桌位id拼接 72 tablestr: '', //桌位id拼接
69 urlsValue: [], //包间预览图片列表 73 urlsValue: [], //包间预览图片列表
@@ -124,6 +128,12 @@ Page({ @@ -124,6 +128,12 @@ Page({
124 closeCouponModal() { 128 closeCouponModal() {
125 this.getActivityByIdFun(this.data.couponList,'1') 129 this.getActivityByIdFun(this.data.couponList,'1')
126 this.couponModal.closeModal() 130 this.couponModal.closeModal()
  131 + this.setData({
  132 + isShow: '1',
  133 + })
  134 + setTimeout(() => {
  135 + this.startAnimation();
  136 + }, 800);
127 }, 137 },
128 // 页面滚动事件 138 // 页面滚动事件
129 onPageScroll: function (event) { 139 onPageScroll: function (event) {
@@ -1137,6 +1147,12 @@ Page({ @@ -1137,6 +1147,12 @@ Page({
1137 // 免费券判断是否领取，弹框领取 1147 // 免费券判断是否领取，弹框领取
1138 if (freeCoupons.length > 0 && couponShow) { 1148 if (freeCoupons.length > 0 && couponShow) {
1139 this.getCoupon(freeCoupons,obj,setcoupon) 1149 this.getCoupon(freeCoupons,obj,setcoupon)
  1150 + } else {
  1151 + if(setcoupon!='1'){
  1152 + this.setData({
  1153 + isFrame:'1',
  1154 + })
  1155 + }
1140 } 1156 }
1141 console.log('邀请函--------------------优惠券', list); 1157 console.log('邀请函--------------------优惠券', list);
1142 this.setData({ 1158 this.setData({
@@ -1245,6 +1261,18 @@ Page({ @@ -1245,6 +1261,18 @@ Page({
1245 }) 1261 })
1246 this.couponModal.showModal() 1262 this.couponModal.showModal()
1247 }, 3000); 1263 }, 3000);
  1264 + }else {
  1265 + if(setcoupon!='1'){
  1266 + this.setData({
  1267 + isFrame:'1',
  1268 + })
  1269 + }
  1270 + }
  1271 + }else {
  1272 + if(setcoupon!='1'){
  1273 + this.setData({
  1274 + isFrame:'1',
  1275 + })
1248 } 1276 }
1249 } 1277 }
1250 list.forEach(item=>{ 1278 list.forEach(item=>{
@@ -1407,6 +1435,39 @@ Page({ @@ -1407,6 +1435,39 @@ Page({
1407 } 1435 }
1408 return new Date(data || new Date()) 1436 return new Date(data || new Date())
1409 }, 1437 },
  1438 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1439 + startAnimation() {
  1440 + const animation = wx.createAnimation({
  1441 + duration: 800,
  1442 + timingFunction: 'ease',
  1443 + });
  1444 + animation.translateY('-60%')
  1445 + .translateX('34%')
  1446 + .scale(0)
  1447 + .step();
  1448 + this.setData({
  1449 + animationData: animation.export(),
  1450 + });
  1451 + setTimeout(() => {
  1452 + this.startSecondAnimation();
  1453 + }, 800);
  1454 + },
  1455 + // 出现商家有礼图标，并且晃动2下
  1456 + startSecondAnimation() {
  1457 + const animation = wx.createAnimation({
  1458 + duration: 200,
  1459 + timingFunction: 'ease'
  1460 + });
  1461 + animation.scale(1).step()
  1462 + .rotate(-15).step()
  1463 + .rotate(15).step()
  1464 + .rotate(-15).step()
  1465 + .rotate(15).step()
  1466 + .rotate(0).step();
  1467 + this.setData({
  1468 + animationData2: animation.export()
  1469 + });
  1470 + },
1410 //根据起始时间（获取时间时间段） 1471 //根据起始时间（获取时间时间段）
1411 computeHour(time1, time2, interval) { 1472 computeHour(time1, time2, interval) {
1412 //time1 开始时间 time2结束时间 interval间隔时长 1473 //time1 开始时间 time2结束时间 interval间隔时长
@@ -3,7 +3,16 @@ @@ -3,7 +3,16 @@
3 <nav hasHome class="navhome" backgroundColor="#ffeddc" place="{{true}}"></nav> 3 <nav hasHome class="navhome" backgroundColor="#ffeddc" place="{{true}}"></nav>
4 <scroll-view scroll-y class="viewBox"> 4 <scroll-view scroll-y class="viewBox">
5 <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}}" /> 5 <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}}" />
6 - <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="" /> 6 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
  7 + bindtap="gotoSellerGift"
  8 + data-form="1"
  9 + animation="{{animationData2}}"
  10 + 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)}}"
  11 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  12 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  13 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  14 + </view>
  15 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
7 <image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 16 <image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
8 <image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 17 <image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
9 <view class="reservationInfo {{options.bookType ? 'birthdaySty' : 'noBirthday'}} {{options.hasSellerShare == '1' ? 'noBirthday1' : '' }}"> 18 <view class="reservationInfo {{options.bookType ? 'birthdaySty' : 'noBirthday'}} {{options.hasSellerShare == '1' ? 'noBirthday1' : '' }}">
@@ -309,29 +318,28 @@ @@ -309,29 +318,28 @@
309 </view> 318 </view>
310 </my-modal> 319 </my-modal>
311 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 320 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
312 - <view slot="modalName" class="titleModal">  
313 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
314 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
315 - <view class="couponTotal" wx:if="{{totalPrice}}">  
316 - 赠送给您  
317 - <scroll-number value="{{totalPrice}}"></scroll-number>  
318 - <text class="counterText1">元</text>代金券  
319 - </view> 321 + <view slot="modalName">
  322 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
320 </view> 323 </view>
321 <view slot="modalContent"> 324 <view slot="modalContent">
322 - <!-- <view class="couponBox">  
323 - <view wx:for="{{couponArr}}" class="couponItems">  
324 - <view class="couponNum font20r">×{{item.number}}</view>  
325 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
326 - <view class="couponLines"></view>  
327 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
328 - <view class="font28r couponCondition" wx:else>无门槛</view> 325 + <view class="titleModal">
  326 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  327 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  328 + 赠送给您代金券
  329 + <view class="counterText">
  330 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  331 + </view>
329 </view> 332 </view>
330 - </view> -->  
331 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
332 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
333 - <view class="couponBtn font36r">我知道了</view>  
334 - </subscribe>  
335 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 333 + </view>
  334 + <view class="couponWrap">
  335 + <view class="couponInfo font48r">
  336 + <text class="font48r">到店微信扫码</text>
  337 + <text class="font48r">自动识别</text>
  338 + </view>
  339 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  340 + <view class="couponBtn font28r">我知道了</view>
  341 + </subscribe>
  342 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  343 + </view>
336 </view> 344 </view>
337 </my-modal> 345 </my-modal>
@@ -778,15 +778,21 @@ @@ -778,15 +778,21 @@
778 z-index: 200; 778 z-index: 200;
779 } 779 }
780 780
781 -.giftImg { 781 +.giftImg{
782 width: 108rpx; 782 width: 108rpx;
783 - height: 108rpx;  
784 - position: fixed !important;  
785 - right: 5%;  
786 - top: 33%; 783 + height: 116rpx;
  784 + position: fixed !important;
  785 + right: 4%;
  786 + top: 28%;
787 z-index: 200; 787 z-index: 200;
  788 + transform-origin: 50% 100%;
  789 +}
  790 +
  791 +.giftImg1 {
  792 + transform: scale(0);
788 } 793 }
789 794
  795 +
790 .cannotImg { 796 .cannotImg {
791 width: 200rpx; 797 width: 200rpx;
792 height: 66rpx; 798 height: 66rpx;
@@ -804,7 +810,6 @@ @@ -804,7 +810,6 @@
804 810
805 .titleModal { 811 .titleModal {
806 width: 100%; 812 width: 100%;
807 - margin-top: 48rpx;  
808 color: #000; 813 color: #000;
809 font-family: PingFang SC; 814 font-family: PingFang SC;
810 font-weight: 500; 815 font-weight: 500;
@@ -859,21 +864,29 @@ @@ -859,21 +864,29 @@
859 } 864 }
860 865
861 #couponModal .titleModal { 866 #couponModal .titleModal {
862 - margin-top: 60%;  
863 position: relative; 867 position: relative;
864 - width: 100%; 868 + width: 544rpx;
  869 + background: #F14033;
  870 + border-top-left-radius: 20rpx;
  871 + border-top-right-radius: 20rpx;
  872 + margin: 94% auto 0;
865 } 873 }
866 874
867 -#couponModal .titleModal2 {  
868 - margin-top: 80%; 875 +#couponModal .couponWrap {
  876 + position: relative;
  877 + width: 544rpx;
  878 + margin: 0 auto;
  879 + background: #F14033;
  880 + border-bottom-left-radius: 20rpx;
  881 + border-bottom-right-radius: 20rpx;
869 } 882 }
870 883
871 -#couponModal .titleModal3 {  
872 - margin-top: 60%; 884 +#couponModal .mymodal-title {
  885 + padding: 0 80rpx;
873 } 886 }
874 887
875 -#couponModal .titleModal4 {  
876 - margin-top: 30%; 888 +#couponModal .mymodal-content {
  889 + padding: 0 80rpx 40rpx 80rpx;
877 } 890 }
878 891
879 #couponModal .mymodal { 892 #couponModal .mymodal {
@@ -886,39 +899,41 @@ @@ -886,39 +899,41 @@
886 899
887 .nameInfo { 900 .nameInfo {
888 font-family: PingFang SC; 901 font-family: PingFang SC;
889 - font-weight: 400;  
890 - font-size: 52rpx;  
891 - line-height: 56rpx; 902 + font-weight: 500;
  903 + line-height: 38rpx;
892 color: #fff; 904 color: #fff;
893 - margin-bottom: 40rpx;  
894 - padding-top: 60rpx; 905 + margin-bottom: 28rpx;
895 text-align: center; 906 text-align: center;
  907 + padding: 44rpx 30rpx 0 30rpx;
896 } 908 }
897 909
898 .couponTotal { 910 .couponTotal {
899 - color: #dfdfdf; 911 + color: #fff;
900 font-family: PingFang SC; 912 font-family: PingFang SC;
901 - font-weight: 400;  
902 - font-size: 40rpx; 913 + font-weight: 500;
903 line-height: 48rpx; 914 line-height: 48rpx;
904 - margin-bottom: 40rpx;  
905 - display: flex;  
906 - align-items: center;  
907 - justify-content: center;  
908 - margin: 20% 0 10% 0; 915 + padding-bottom: 16rpx;
909 } 916 }
910 917
911 .counterText { 918 .counterText {
912 color: #ffc806; 919 color: #ffc806;
913 font-weight: 600; 920 font-weight: 600;
914 - font-size: 80rpx;  
915 - margin-right: 14rpx; 921 + display: flex;
  922 + font-size: 100rpx;
  923 + align-items: flex-end;
  924 + justify-content: center;
  925 + margin: 16rpx 0;
916 } 926 }
917 927
918 .couponInfo { 928 .couponInfo {
919 - color: #DFDFDF; 929 + color: #fff;
920 text-align: center; 930 text-align: center;
921 - margin-bottom: 40rpx; 931 + margin-bottom: 20rpx;
  932 + font-weight: 600;
  933 + display: flex;
  934 + flex-direction: column;
  935 + align-items: center;
  936 + line-height: 78rpx;
922 } 937 }
923 938
924 .couponBox { 939 .couponBox {
@@ -982,26 +997,57 @@ @@ -982,26 +997,57 @@
982 .couponBtn { 997 .couponBtn {
983 width: 80%; 998 width: 80%;
984 margin: 0 auto; 999 margin: 0 auto;
985 - border-radius: 198rpx;  
986 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
987 - font-weight: 400;  
988 - color: #fff; 1000 + background: #fff;
  1001 + font-weight: 600;
989 text-align: center; 1002 text-align: center;
990 - border: 4rpx solid #fff;  
991 padding: 12rpx 0; 1003 padding: 12rpx 0;
992 margin: 16rpx auto 20rpx auto; 1004 margin: 16rpx auto 20rpx auto;
  1005 + color: #F14033;
  1006 + border-radius: 8rpx;
993 } 1007 }
994 1008
995 .couponText { 1009 .couponText {
996 color: #fff; 1010 color: #fff;
997 text-decoration: underline; 1011 text-decoration: underline;
998 text-align: center; 1012 text-align: center;
  1013 + padding-bottom: 44rpx;
  1014 + font-weight: 600;
  1015 + letter-spacing:2rpx;
999 } 1016 }
1000 1017
1001 .closeImg { 1018 .closeImg {
1002 width: 60rpx; 1019 width: 60rpx;
1003 height: 60rpx; 1020 height: 60rpx;
1004 - position: absolute;  
1005 - right: 5%;  
1006 - top: -10%; 1021 + position: fixed;
  1022 + left: 46%;
  1023 + bottom: 24%;
  1024 +}
  1025 +
  1026 +/* 全屏遮罩层初始样式 */
  1027 +.fullscreenMask {
  1028 + position: fixed;
  1029 + top: 35%;
  1030 + margin: 0 auto;
  1031 + height: 580rpx;
  1032 + z-index: 100;
  1033 + color: #fff;
  1034 + display: flex;
  1035 + align-items: center;
  1036 + justify-content: center;
  1037 + border-radius: 50%;
  1038 + width: 100%;
  1039 +}
  1040 +
  1041 +.fullscreenMask image{
  1042 + width: 544rpx;
  1043 + height: 600rpx;
  1044 +}
  1045 +
  1046 +/* 目标点（右上角的商家有礼位置） */
  1047 +.targetPoint {
  1048 + position: fixed;
  1049 + width: 108rpx;
  1050 + height: 116rpx;
  1051 + background: transparent;
  1052 + z-index: 100;
1007 } 1053 }
@@ -68,6 +68,10 @@ Page({ @@ -68,6 +68,10 @@ Page({
68 titleList: [], //优惠券、充值、评价标题数组 68 titleList: [], //优惠券、充值、评价标题数组
69 couponArr: [],//待领取的优惠券列表 69 couponArr: [],//待领取的优惠券列表
70 couponList:[],//优惠券列表 70 couponList:[],//优惠券列表
  71 + animationData: {},
  72 + animationData2:{},
  73 + isShow:'0',
  74 + isFrame:'0'
71 }, 75 },
72 tablestr: '', //桌位id拼接 76 tablestr: '', //桌位id拼接
73 screenHeight: '', 77 screenHeight: '',
@@ -143,6 +147,12 @@ Page({ @@ -143,6 +147,12 @@ Page({
143 closeCouponModal() { 147 closeCouponModal() {
144 this.getActivityByIdFun(this.data.couponList,'1') 148 this.getActivityByIdFun(this.data.couponList,'1')
145 this.couponModal.closeModal() 149 this.couponModal.closeModal()
  150 + this.setData({
  151 + isShow: '1',
  152 + })
  153 + setTimeout(() => {
  154 + this.startAnimation();
  155 + }, 800);
146 }, 156 },
147 // 页面滚动事件 157 // 页面滚动事件
148 onPageScroll: function (event) { 158 onPageScroll: function (event) {
@@ -1214,6 +1224,12 @@ Page({ @@ -1214,6 +1224,12 @@ Page({
1214 // 免费券判断是否领取，弹框领取 1224 // 免费券判断是否领取，弹框领取
1215 if (freeCoupons.length > 0 && couponShow) { 1225 if (freeCoupons.length > 0 && couponShow) {
1216 this.getCoupon(freeCoupons,obj,setcoupon) 1226 this.getCoupon(freeCoupons,obj,setcoupon)
  1227 + } else {
  1228 + if(setcoupon!='1'){
  1229 + this.setData({
  1230 + isFrame:'1',
  1231 + })
  1232 + }
1217 } 1233 }
1218 console.log('邀请函--------------------优惠券', list); 1234 console.log('邀请函--------------------优惠券', list);
1219 this.setData({ 1235 this.setData({
@@ -1324,6 +1340,18 @@ Page({ @@ -1324,6 +1340,18 @@ Page({
1324 }) 1340 })
1325 this.couponModal.showModal() 1341 this.couponModal.showModal()
1326 }, 3000); 1342 }, 3000);
  1343 + }else {
  1344 + if(setcoupon!='1'){
  1345 + this.setData({
  1346 + isFrame:'1',
  1347 + })
  1348 + }
  1349 + }
  1350 + }else {
  1351 + if(setcoupon!='1'){
  1352 + this.setData({
  1353 + isFrame:'1',
  1354 + })
1327 } 1355 }
1328 } 1356 }
1329 list.forEach(item=>{ 1357 list.forEach(item=>{
@@ -1486,6 +1514,39 @@ Page({ @@ -1486,6 +1514,39 @@ Page({
1486 } 1514 }
1487 return new Date(data || new Date()) 1515 return new Date(data || new Date())
1488 }, 1516 },
  1517 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1518 + startAnimation() {
  1519 + const animation = wx.createAnimation({
  1520 + duration: 800,
  1521 + timingFunction: 'ease',
  1522 + });
  1523 + animation.translateY('-60%')
  1524 + .translateX('34%')
  1525 + .scale(0)
  1526 + .step();
  1527 + this.setData({
  1528 + animationData: animation.export(),
  1529 + });
  1530 + setTimeout(() => {
  1531 + this.startSecondAnimation();
  1532 + }, 800);
  1533 + },
  1534 + // 出现商家有礼图标，并且晃动2下
  1535 + startSecondAnimation() {
  1536 + const animation = wx.createAnimation({
  1537 + duration: 200,
  1538 + timingFunction: 'ease'
  1539 + });
  1540 + animation.scale(1).step()
  1541 + .rotate(-15).step()
  1542 + .rotate(15).step()
  1543 + .rotate(-15).step()
  1544 + .rotate(15).step()
  1545 + .rotate(0).step();
  1546 + this.setData({
  1547 + animationData2: animation.export()
  1548 + });
  1549 + },
1489 //根据起始时间（获取时间时间段） 1550 //根据起始时间（获取时间时间段）
1490 computeHour(time1, time2, interval) { 1551 computeHour(time1, time2, interval) {
1491 //time1 开始时间 time2结束时间 interval间隔时长 1552 //time1 开始时间 time2结束时间 interval间隔时长
@@ -3,7 +3,16 @@ @@ -3,7 +3,16 @@
3 <nav hasHome class="navhome" backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav> 3 <nav hasHome class="navhome" backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav>
4 <scroll-view scroll-y class="viewBox viewBox{{bookType}}"> 4 <scroll-view scroll-y class="viewBox viewBox{{bookType}}">
5 <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}}" /> 5 <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}}" />
6 - <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="" /> 6 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
  7 + bindtap="gotoSellerGift"
  8 + data-form="1"
  9 + animation="{{animationData2}}"
  10 + 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)}}"
  11 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  12 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  13 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  14 + </view>
  15 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
7 <image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 16 <image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
8 <image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 17 <image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
9 <view class="reservationInfoBox" wx:if="{{detail && detail.ddate}}"> 18 <view class="reservationInfoBox" wx:if="{{detail && detail.ddate}}">
@@ -476,29 +485,28 @@ @@ -476,29 +485,28 @@
476 </view> 485 </view>
477 </my-modal> 486 </my-modal>
478 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 487 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
479 - <view slot="modalName" class="titleModal">  
480 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
481 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
482 - <view class="couponTotal" wx:if="{{totalPrice}}">  
483 - 赠送给您  
484 - <scroll-number value="{{totalPrice}}"></scroll-number>  
485 - <text class="counterText1">元</text>代金券  
486 - </view> 488 + <view slot="modalName">
  489 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
487 </view> 490 </view>
488 <view slot="modalContent"> 491 <view slot="modalContent">
489 - <!-- <view class="couponBox">  
490 - <view wx:for="{{couponArr}}" class="couponItems">  
491 - <view class="couponNum font20r">×{{item.number}}</view>  
492 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
493 - <view class="couponLines"></view>  
494 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
495 - <view class="font28r couponCondition" wx:else>无门槛</view>  
496 - </view>  
497 - </view> -->  
498 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
499 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
500 - <view class="couponBtn font36r">我知道了</view>  
501 - </subscribe>  
502 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 492 + <view class="titleModal">
  493 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  494 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  495 + 赠送给您代金券
  496 + <view class="counterText">
  497 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  498 + </view>
  499 + </view>
  500 + </view>
  501 + <view class="couponWrap">
  502 + <view class="couponInfo font48r">
  503 + <text class="font48r">到店微信扫码</text>
  504 + <text class="font48r">自动识别</text>
  505 + </view>
  506 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  507 + <view class="couponBtn font28r">我知道了</view>
  508 + </subscribe>
  509 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  510 + </view>
503 </view> 511 </view>
504 </my-modal> 512 </my-modal>
@@ -830,13 +830,18 @@ @@ -830,13 +830,18 @@
830 z-index: 200; 830 z-index: 200;
831 } 831 }
832 832
833 -.giftImg { 833 +.giftImg{
834 width: 108rpx; 834 width: 108rpx;
835 - height: 108rpx;  
836 - position: fixed !important;  
837 - right: 5%;  
838 - top: 33%; 835 + height: 116rpx;
  836 + position: fixed !important;
  837 + right: 4%;
  838 + top: 28%;
839 z-index: 200; 839 z-index: 200;
  840 + transform-origin: 50% 100%;
  841 +}
  842 +
  843 +.giftImg1 {
  844 + transform: scale(0);
840 } 845 }
841 846
842 .cannotImg { 847 .cannotImg {
@@ -856,7 +861,6 @@ @@ -856,7 +861,6 @@
856 861
857 .titleModal { 862 .titleModal {
858 width: 100%; 863 width: 100%;
859 - margin-top: 48rpx;  
860 color: #000; 864 color: #000;
861 font-family: PingFang SC; 865 font-family: PingFang SC;
862 font-weight: 500; 866 font-weight: 500;
@@ -915,21 +919,29 @@ @@ -915,21 +919,29 @@
915 } 919 }
916 920
917 #couponModal .titleModal { 921 #couponModal .titleModal {
918 - margin-top: 60%;  
919 position: relative; 922 position: relative;
920 - width: 100%; 923 + width: 544rpx;
  924 + background: #F14033;
  925 + border-top-left-radius: 20rpx;
  926 + border-top-right-radius: 20rpx;
  927 + margin: 94% auto 0;
921 } 928 }
922 929
923 -#couponModal .titleModal2 {  
924 - margin-top: 80%; 930 +#couponModal .couponWrap {
  931 + position: relative;
  932 + width: 544rpx;
  933 + margin: 0 auto;
  934 + background: #F14033;
  935 + border-bottom-left-radius: 20rpx;
  936 + border-bottom-right-radius: 20rpx;
925 } 937 }
926 938
927 -#couponModal .titleModal3 {  
928 - margin-top: 60%; 939 +#couponModal .mymodal-title {
  940 + padding: 0 80rpx;
929 } 941 }
930 942
931 -#couponModal .titleModal4 {  
932 - margin-top: 30%; 943 +#couponModal .mymodal-content {
  944 + padding: 0 80rpx 40rpx 80rpx;
933 } 945 }
934 946
935 #couponModal .mymodal { 947 #couponModal .mymodal {
@@ -942,39 +954,41 @@ @@ -942,39 +954,41 @@
942 954
943 .nameInfo { 955 .nameInfo {
944 font-family: PingFang SC; 956 font-family: PingFang SC;
945 - font-weight: 400;  
946 - font-size: 52rpx;  
947 - line-height: 56rpx; 957 + font-weight: 500;
  958 + line-height: 38rpx;
948 color: #fff; 959 color: #fff;
949 - margin-bottom: 40rpx;  
950 - padding-top: 60rpx; 960 + margin-bottom: 28rpx;
951 text-align: center; 961 text-align: center;
  962 + padding: 44rpx 30rpx 0 30rpx;
952 } 963 }
953 964
954 .couponTotal { 965 .couponTotal {
955 - color: #dfdfdf; 966 + color: #fff;
956 font-family: PingFang SC; 967 font-family: PingFang SC;
957 - font-weight: 400;  
958 - font-size: 40rpx; 968 + font-weight: 500;
959 line-height: 48rpx; 969 line-height: 48rpx;
960 - margin-bottom: 40rpx;  
961 - display: flex;  
962 - align-items: center;  
963 - justify-content: center;  
964 - margin: 20% 0 10% 0; 970 + padding-bottom: 16rpx;
965 } 971 }
966 972
967 .counterText { 973 .counterText {
968 color: #ffc806; 974 color: #ffc806;
969 font-weight: 600; 975 font-weight: 600;
970 - font-size: 80rpx;  
971 - margin-right: 14rpx; 976 + display: flex;
  977 + font-size: 100rpx;
  978 + align-items: flex-end;
  979 + justify-content: center;
  980 + margin: 16rpx 0;
972 } 981 }
973 982
974 .couponInfo { 983 .couponInfo {
975 - color: #DFDFDF; 984 + color: #fff;
976 text-align: center; 985 text-align: center;
977 - margin-bottom: 40rpx; 986 + margin-bottom: 20rpx;
  987 + font-weight: 600;
  988 + display: flex;
  989 + flex-direction: column;
  990 + align-items: center;
  991 + line-height: 78rpx;
978 } 992 }
979 993
980 .couponBox { 994 .couponBox {
@@ -1038,28 +1052,59 @@ @@ -1038,28 +1052,59 @@
1038 .couponBtn { 1052 .couponBtn {
1039 width: 80%; 1053 width: 80%;
1040 margin: 0 auto; 1054 margin: 0 auto;
1041 - border-radius: 42rpx;  
1042 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
1043 - font-weight: 400;  
1044 - color: #fff; 1055 + background: #fff;
  1056 + font-weight: 600;
1045 text-align: center; 1057 text-align: center;
1046 - border: 4rpx solid #fff;  
1047 padding: 12rpx 0; 1058 padding: 12rpx 0;
1048 margin: 16rpx auto 20rpx auto; 1059 margin: 16rpx auto 20rpx auto;
  1060 + color: #F14033;
  1061 + border-radius: 8rpx;
1049 } 1062 }
1050 1063
1051 .couponText { 1064 .couponText {
1052 color: #fff; 1065 color: #fff;
1053 text-decoration: underline; 1066 text-decoration: underline;
1054 text-align: center; 1067 text-align: center;
  1068 + padding-bottom: 44rpx;
  1069 + font-weight: 600;
  1070 + letter-spacing:2rpx;
1055 } 1071 }
1056 1072
1057 .closeImg { 1073 .closeImg {
1058 width: 60rpx; 1074 width: 60rpx;
1059 height: 60rpx; 1075 height: 60rpx;
1060 - position: absolute;  
1061 - right: 5%;  
1062 - top: -10%; 1076 + position: fixed;
  1077 + left: 46%;
  1078 + bottom: 24%;
  1079 +}
  1080 +
  1081 +/* 全屏遮罩层初始样式 */
  1082 +.fullscreenMask {
  1083 + position: fixed;
  1084 + top: 35%;
  1085 + margin: 0 auto;
  1086 + height: 580rpx;
  1087 + z-index: 100;
  1088 + color: #fff;
  1089 + display: flex;
  1090 + align-items: center;
  1091 + justify-content: center;
  1092 + border-radius: 50%;
  1093 + width: 100%;
  1094 +}
  1095 +
  1096 +.fullscreenMask image{
  1097 + width: 544rpx;
  1098 + height: 600rpx;
  1099 +}
  1100 +
  1101 +/* 目标点（右上角的商家有礼位置） */
  1102 +.targetPoint {
  1103 + position: fixed;
  1104 + width: 108rpx;
  1105 + height: 116rpx;
  1106 + background: transparent;
  1107 + z-index: 100;
1063 } 1108 }
1064 1109
1065 /* 商务宴会 */ 1110 /* 商务宴会 */
@@ -70,6 +70,10 @@ Page({ @@ -70,6 +70,10 @@ Page({
70 modalTitle: '', //弹框标题 70 modalTitle: '', //弹框标题
71 couponArr: [],//待领取的优惠券列表 71 couponArr: [],//待领取的优惠券列表
72 couponList:[],//优惠券列表 72 couponList:[],//优惠券列表
  73 + animationData: {},
  74 + animationData2:{},
  75 + isShow:'0',
  76 + isFrame:'0'
73 }, 77 },
74 tablestr: '', //桌位id拼接 78 tablestr: '', //桌位id拼接
75 screenHeight: '', 79 screenHeight: '',
@@ -137,6 +141,12 @@ Page({ @@ -137,6 +141,12 @@ Page({
137 closeCouponModal() { 141 closeCouponModal() {
138 this.getActivityByIdFun(this.data.couponList,'1') 142 this.getActivityByIdFun(this.data.couponList,'1')
139 this.couponModal.closeModal() 143 this.couponModal.closeModal()
  144 + this.setData({
  145 + isShow: '1',
  146 + })
  147 + setTimeout(() => {
  148 + this.startAnimation();
  149 + }, 800);
140 }, 150 },
141 // 公共弹框 151 // 公共弹框
142 publicShowModal(e) { 152 publicShowModal(e) {
@@ -1224,6 +1234,12 @@ Page({ @@ -1224,6 +1234,12 @@ Page({
1224 // 免费券判断是否领取，弹框领取 1234 // 免费券判断是否领取，弹框领取
1225 if (freeCoupons.length > 0 && couponShow) { 1235 if (freeCoupons.length > 0 && couponShow) {
1226 this.getCoupon(freeCoupons,obj,setcoupon) 1236 this.getCoupon(freeCoupons,obj,setcoupon)
  1237 + } else {
  1238 + if(setcoupon!='1'){
  1239 + this.setData({
  1240 + isFrame:'1',
  1241 + })
  1242 + }
1227 } 1243 }
1228 console.log('邀请函--------------------优惠券', list); 1244 console.log('邀请函--------------------优惠券', list);
1229 this.setData({ 1245 this.setData({
@@ -1334,6 +1350,18 @@ Page({ @@ -1334,6 +1350,18 @@ Page({
1334 }) 1350 })
1335 this.couponModal.showModal() 1351 this.couponModal.showModal()
1336 }, 3000); 1352 }, 3000);
  1353 + }else {
  1354 + if(setcoupon!='1'){
  1355 + this.setData({
  1356 + isFrame:'1',
  1357 + })
  1358 + }
  1359 + }
  1360 + }else {
  1361 + if(setcoupon!='1'){
  1362 + this.setData({
  1363 + isFrame:'1',
  1364 + })
1337 } 1365 }
1338 } 1366 }
1339 list.forEach(item=>{ 1367 list.forEach(item=>{
@@ -1496,6 +1524,39 @@ Page({ @@ -1496,6 +1524,39 @@ Page({
1496 } 1524 }
1497 return new Date(data || new Date()) 1525 return new Date(data || new Date())
1498 }, 1526 },
  1527 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1528 + startAnimation() {
  1529 + const animation = wx.createAnimation({
  1530 + duration: 800,
  1531 + timingFunction: 'ease',
  1532 + });
  1533 + animation.translateY('-60%')
  1534 + .translateX('34%')
  1535 + .scale(0)
  1536 + .step();
  1537 + this.setData({
  1538 + animationData: animation.export(),
  1539 + });
  1540 + setTimeout(() => {
  1541 + this.startSecondAnimation();
  1542 + }, 800);
  1543 + },
  1544 + // 出现商家有礼图标，并且晃动2下
  1545 + startSecondAnimation() {
  1546 + const animation = wx.createAnimation({
  1547 + duration: 200,
  1548 + timingFunction: 'ease'
  1549 + });
  1550 + animation.scale(1).step()
  1551 + .rotate(-15).step()
  1552 + .rotate(15).step()
  1553 + .rotate(-15).step()
  1554 + .rotate(15).step()
  1555 + .rotate(0).step();
  1556 + this.setData({
  1557 + animationData2: animation.export()
  1558 + });
  1559 + },
1499 //根据起始时间（获取时间时间段） 1560 //根据起始时间（获取时间时间段）
1500 computeHour(time1, time2, interval) { 1561 computeHour(time1, time2, interval) {
1501 //time1 开始时间 time2结束时间 interval间隔时长 1562 //time1 开始时间 time2结束时间 interval间隔时长
@@ -3,7 +3,16 @@ @@ -3,7 +3,16 @@
3 <nav hasHome class="navhome" backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav> 3 <nav hasHome class="navhome" backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav>
4 <scroll-view scroll-y class="viewBox viewBox{{bookType}}"> 4 <scroll-view scroll-y class="viewBox viewBox{{bookType}}">
5 <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}}" /> 5 <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}}" />
6 - <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="" /> 6 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
  7 + bindtap="gotoSellerGift"
  8 + data-form="1"
  9 + animation="{{animationData2}}"
  10 + 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)}}"
  11 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  12 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  13 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  14 + </view>
  15 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
7 <image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 16 <image wx:if="{{detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
8 <image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 17 <image wx:if="{{options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
9 <view class="reservationInfo reservationInfo{{make}} {{options.hasSellerShare == '1' ? 'reservationInfo3' : '' }}"> 18 <view class="reservationInfo reservationInfo{{make}} {{options.hasSellerShare == '1' ? 'reservationInfo3' : '' }}">
@@ -401,29 +410,28 @@ @@ -401,29 +410,28 @@
401 </view> 410 </view>
402 </my-modal> 411 </my-modal>
403 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 412 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
404 - <view slot="modalName" class="titleModal">  
405 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
406 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
407 - <view class="couponTotal" wx:if="{{totalPrice}}">  
408 - 赠送给您  
409 - <scroll-number value="{{totalPrice}}"></scroll-number>  
410 - <text class="counterText1">元</text>代金券  
411 - </view> 413 + <view slot="modalName">
  414 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
412 </view> 415 </view>
413 <view slot="modalContent"> 416 <view slot="modalContent">
414 - <!-- <view class="couponBox">  
415 - <view wx:for="{{couponArr}}" class="couponItems">  
416 - <view class="couponNum font20r">×{{item.number}}</view>  
417 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
418 - <view class="couponLines"></view>  
419 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
420 - <view class="font28r couponCondition" wx:else>无门槛</view> 417 + <view class="titleModal">
  418 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  419 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  420 + 赠送给您代金券
  421 + <view class="counterText">
  422 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  423 + </view>
421 </view> 424 </view>
422 - </view> -->  
423 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
424 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
425 - <view class="couponBtn font36r">我知道了</view>  
426 - </subscribe>  
427 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 425 + </view>
  426 + <view class="couponWrap">
  427 + <view class="couponInfo font48r">
  428 + <text class="font48r">到店微信扫码</text>
  429 + <text class="font48r">自动识别</text>
  430 + </view>
  431 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  432 + <view class="couponBtn font28r">我知道了</view>
  433 + </subscribe>
  434 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  435 + </view>
428 </view> 436 </view>
429 </my-modal> 437 </my-modal>
@@ -853,13 +853,18 @@ @@ -853,13 +853,18 @@
853 z-index: 200; 853 z-index: 200;
854 } 854 }
855 855
856 -.giftImg { 856 +.giftImg{
857 width: 108rpx; 857 width: 108rpx;
858 - height: 108rpx;  
859 - position: fixed !important;  
860 - right: 5%;  
861 - top: 33%; 858 + height: 116rpx;
  859 + position: fixed !important;
  860 + right: 4%;
  861 + top: 28%;
862 z-index: 200; 862 z-index: 200;
  863 + transform-origin: 50% 100%;
  864 +}
  865 +
  866 +.giftImg1 {
  867 + transform: scale(0);
863 } 868 }
864 869
865 .cannotImg { 870 .cannotImg {
@@ -879,7 +884,6 @@ @@ -879,7 +884,6 @@
879 884
880 .titleModal { 885 .titleModal {
881 width: 100%; 886 width: 100%;
882 - margin-top: 48rpx;  
883 color: #000; 887 color: #000;
884 font-family: PingFang SC; 888 font-family: PingFang SC;
885 font-weight: 500; 889 font-weight: 500;
@@ -975,21 +979,29 @@ @@ -975,21 +979,29 @@
975 } 979 }
976 980
977 #couponModal .titleModal { 981 #couponModal .titleModal {
978 - margin-top: 60%;  
979 position: relative; 982 position: relative;
980 - width: 100%; 983 + width: 544rpx;
  984 + background: #F14033;
  985 + border-top-left-radius: 20rpx;
  986 + border-top-right-radius: 20rpx;
  987 + margin: 94% auto 0;
981 } 988 }
982 989
983 -#couponModal .titleModal2 {  
984 - margin-top: 80%; 990 +#couponModal .couponWrap {
  991 + position: relative;
  992 + width: 544rpx;
  993 + margin: 0 auto;
  994 + background: #F14033;
  995 + border-bottom-left-radius: 20rpx;
  996 + border-bottom-right-radius: 20rpx;
985 } 997 }
986 998
987 -#couponModal .titleModal3 {  
988 - margin-top: 60%; 999 +#couponModal .mymodal-title {
  1000 + padding: 0 80rpx;
989 } 1001 }
990 1002
991 -#couponModal .titleModal4 {  
992 - margin-top: 30%; 1003 +#couponModal .mymodal-content {
  1004 + padding: 0 80rpx 40rpx 80rpx;
993 } 1005 }
994 1006
995 #couponModal .mymodal { 1007 #couponModal .mymodal {
@@ -1002,39 +1014,41 @@ @@ -1002,39 +1014,41 @@
1002 1014
1003 .nameInfo { 1015 .nameInfo {
1004 font-family: PingFang SC; 1016 font-family: PingFang SC;
1005 - font-weight: 400;  
1006 - font-size: 52rpx;  
1007 - line-height: 56rpx; 1017 + font-weight: 500;
  1018 + line-height: 38rpx;
1008 color: #fff; 1019 color: #fff;
1009 - margin-bottom: 40rpx;  
1010 - padding-top: 60rpx; 1020 + margin-bottom: 28rpx;
1011 text-align: center; 1021 text-align: center;
  1022 + padding: 44rpx 30rpx 0 30rpx;
1012 } 1023 }
1013 1024
1014 .couponTotal { 1025 .couponTotal {
1015 - color: #dfdfdf; 1026 + color: #fff;
1016 font-family: PingFang SC; 1027 font-family: PingFang SC;
1017 - font-weight: 400;  
1018 - font-size: 40rpx; 1028 + font-weight: 500;
1019 line-height: 48rpx; 1029 line-height: 48rpx;
1020 - margin-bottom: 40rpx;  
1021 - display: flex;  
1022 - align-items: center;  
1023 - justify-content: center;  
1024 - margin: 20% 0 10% 0; 1030 + padding-bottom: 16rpx;
1025 } 1031 }
1026 1032
1027 .counterText { 1033 .counterText {
1028 color: #ffc806; 1034 color: #ffc806;
1029 font-weight: 600; 1035 font-weight: 600;
1030 - font-size: 80rpx;  
1031 - margin-right: 14rpx; 1036 + display: flex;
  1037 + font-size: 100rpx;
  1038 + align-items: flex-end;
  1039 + justify-content: center;
  1040 + margin: 16rpx 0;
1032 } 1041 }
1033 1042
1034 .couponInfo { 1043 .couponInfo {
1035 - color: #DFDFDF; 1044 + color: #fff;
1036 text-align: center; 1045 text-align: center;
1037 - margin-bottom: 40rpx; 1046 + margin-bottom: 20rpx;
  1047 + font-weight: 600;
  1048 + display: flex;
  1049 + flex-direction: column;
  1050 + align-items: center;
  1051 + line-height: 78rpx;
1038 } 1052 }
1039 1053
1040 .couponBox { 1054 .couponBox {
@@ -1098,28 +1112,59 @@ @@ -1098,28 +1112,59 @@
1098 .couponBtn { 1112 .couponBtn {
1099 width: 80%; 1113 width: 80%;
1100 margin: 0 auto; 1114 margin: 0 auto;
1101 - border-radius: 42rpx;  
1102 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
1103 - font-weight: 400;  
1104 - color: #fff; 1115 + background: #fff;
  1116 + font-weight: 600;
1105 text-align: center; 1117 text-align: center;
1106 - border: 4rpx solid #fff;  
1107 padding: 12rpx 0; 1118 padding: 12rpx 0;
1108 margin: 16rpx auto 20rpx auto; 1119 margin: 16rpx auto 20rpx auto;
  1120 + color: #F14033;
  1121 + border-radius: 8rpx;
1109 } 1122 }
1110 1123
1111 .couponText { 1124 .couponText {
1112 color: #fff; 1125 color: #fff;
1113 text-decoration: underline; 1126 text-decoration: underline;
1114 text-align: center; 1127 text-align: center;
  1128 + padding-bottom: 44rpx;
  1129 + font-weight: 600;
  1130 + letter-spacing:2rpx;
1115 } 1131 }
1116 1132
1117 .closeImg { 1133 .closeImg {
1118 width: 60rpx; 1134 width: 60rpx;
1119 height: 60rpx; 1135 height: 60rpx;
1120 - position: absolute;  
1121 - right: 5%;  
1122 - top: -10%; 1136 + position: fixed;
  1137 + left: 46%;
  1138 + bottom: 24%;
  1139 +}
  1140 +
  1141 +/* 全屏遮罩层初始样式 */
  1142 +.fullscreenMask {
  1143 + position: fixed;
  1144 + top: 35%;
  1145 + margin: 0 auto;
  1146 + height: 580rpx;
  1147 + z-index: 100;
  1148 + color: #fff;
  1149 + display: flex;
  1150 + align-items: center;
  1151 + justify-content: center;
  1152 + border-radius: 50%;
  1153 + width: 100%;
  1154 +}
  1155 +
  1156 +.fullscreenMask image{
  1157 + width: 544rpx;
  1158 + height: 600rpx;
  1159 +}
  1160 +
  1161 +/* 目标点（右上角的商家有礼位置） */
  1162 +.targetPoint {
  1163 + position: fixed;
  1164 + width: 108rpx;
  1165 + height: 116rpx;
  1166 + background: transparent;
  1167 + z-index: 100;
1123 } 1168 }
1124 1169
1125 /* 商务宴会 */ 1170 /* 商务宴会 */
@@ -69,6 +69,10 @@ Page({ @@ -69,6 +69,10 @@ Page({
69 isShareItem:'',//转发客人按钮 69 isShareItem:'',//转发客人按钮
70 couponArr: [],//待领取的优惠券列表 70 couponArr: [],//待领取的优惠券列表
71 couponList:[],//优惠券列表 71 couponList:[],//优惠券列表
  72 + animationData: {},
  73 + animationData2:{},
  74 + isShow:'0',
  75 + isFrame:'0'
72 }, 76 },
73 tablestr: '', 77 tablestr: '',
74 urlsValue: [], 78 urlsValue: [],
@@ -121,6 +125,12 @@ Page({ @@ -121,6 +125,12 @@ Page({
121 closeCouponModal() { 125 closeCouponModal() {
122 this.getActivityByIdFun(this.data.couponList,'1') 126 this.getActivityByIdFun(this.data.couponList,'1')
123 this.couponModal.closeModal() 127 this.couponModal.closeModal()
  128 + this.setData({
  129 + isShow: '1',
  130 + })
  131 + setTimeout(() => {
  132 + this.startAnimation();
  133 + }, 800);
124 }, 134 },
125 // 页面滚动事件 135 // 页面滚动事件
126 onPageScroll: function (event) { 136 onPageScroll: function (event) {
@@ -1083,6 +1093,12 @@ Page({ @@ -1083,6 +1093,12 @@ Page({
1083 // 免费券判断是否领取，弹框领取 1093 // 免费券判断是否领取，弹框领取
1084 if (freeCoupons.length > 0 && couponShow) { 1094 if (freeCoupons.length > 0 && couponShow) {
1085 this.getCoupon(freeCoupons,obj,setcoupon) 1095 this.getCoupon(freeCoupons,obj,setcoupon)
  1096 + } else {
  1097 + if(setcoupon!='1'){
  1098 + this.setData({
  1099 + isFrame:'1',
  1100 + })
  1101 + }
1086 } 1102 }
1087 console.log('邀请函--------------------优惠券', list); 1103 console.log('邀请函--------------------优惠券', list);
1088 this.setData({ 1104 this.setData({
@@ -1191,6 +1207,18 @@ Page({ @@ -1191,6 +1207,18 @@ Page({
1191 }) 1207 })
1192 this.couponModal.showModal() 1208 this.couponModal.showModal()
1193 }, 3000); 1209 }, 3000);
  1210 + }else {
  1211 + if(setcoupon!='1'){
  1212 + this.setData({
  1213 + isFrame:'1',
  1214 + })
  1215 + }
  1216 + }
  1217 + }else {
  1218 + if(setcoupon!='1'){
  1219 + this.setData({
  1220 + isFrame:'1',
  1221 + })
1194 } 1222 }
1195 } 1223 }
1196 list.forEach(item=>{ 1224 list.forEach(item=>{
@@ -1354,6 +1382,39 @@ Page({ @@ -1354,6 +1382,39 @@ Page({
1354 } 1382 }
1355 return new Date(data || new Date()) 1383 return new Date(data || new Date())
1356 }, 1384 },
  1385 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1386 + startAnimation() {
  1387 + const animation = wx.createAnimation({
  1388 + duration: 800,
  1389 + timingFunction: 'ease',
  1390 + });
  1391 + animation.translateY('-60%')
  1392 + .translateX('34%')
  1393 + .scale(0)
  1394 + .step();
  1395 + this.setData({
  1396 + animationData: animation.export(),
  1397 + });
  1398 + setTimeout(() => {
  1399 + this.startSecondAnimation();
  1400 + }, 800);
  1401 + },
  1402 + // 出现商家有礼图标，并且晃动2下
  1403 + startSecondAnimation() {
  1404 + const animation = wx.createAnimation({
  1405 + duration: 200,
  1406 + timingFunction: 'ease'
  1407 + });
  1408 + animation.scale(1).step()
  1409 + .rotate(-15).step()
  1410 + .rotate(15).step()
  1411 + .rotate(-15).step()
  1412 + .rotate(15).step()
  1413 + .rotate(0).step();
  1414 + this.setData({
  1415 + animationData2: animation.export()
  1416 + });
  1417 + },
1357 //根据起始时间（获取时间时间段） 1418 //根据起始时间（获取时间时间段）
1358 computeHour (time1, time2, interval) { 1419 computeHour (time1, time2, interval) {
1359 //time1 开始时间 time2结束时间 interval间隔时长 1420 //time1 开始时间 time2结束时间 interval间隔时长
@@ -9,11 +9,16 @@ @@ -9,11 +9,16 @@
9 bindtap="stopMusic" 9 bindtap="stopMusic"
10 animation="{{attentionAnim}}" 10 animation="{{attentionAnim}}"
11 /> 11 />
12 - <image class="giftImg" 12 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
13 bindtap="gotoSellerGift" 13 bindtap="gotoSellerGift"
14 data-form="1" 14 data-form="1"
15 - 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)}}"  
16 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 15 + animation="{{animationData2}}"
  16 + 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)}}"
  17 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  18 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  19 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  20 + </view>
  21 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
17 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 22 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
18 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 23 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
19 <view class="positioningBox"> 24 <view class="positioningBox">
@@ -351,29 +356,28 @@ @@ -351,29 +356,28 @@
351 </view> 356 </view>
352 </my-modal> 357 </my-modal>
353 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 358 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
354 - <view slot="modalName" class="titleModal">  
355 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
356 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
357 - <view class="couponTotal" wx:if="{{totalPrice}}">  
358 - 赠送给您  
359 - <scroll-number value="{{totalPrice}}"></scroll-number>  
360 - <text class="counterText1">元</text>代金券  
361 - </view> 359 + <view slot="modalName">
  360 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
362 </view> 361 </view>
363 <view slot="modalContent"> 362 <view slot="modalContent">
364 - <!-- <view class="couponBox">  
365 - <view wx:for="{{couponArr}}" class="couponItems">  
366 - <view class="couponNum font20r">×{{item.number}}</view>  
367 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
368 - <view class="couponLines"></view>  
369 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
370 - <view class="font28r couponCondition" wx:else>无门槛</view> 363 + <view class="titleModal">
  364 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  365 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  366 + 赠送给您代金券
  367 + <view class="counterText">
  368 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  369 + </view>
371 </view> 370 </view>
372 - </view> -->  
373 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
374 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
375 - <view class="couponBtn font36r">我知道了</view>  
376 - </subscribe>  
377 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 371 + </view>
  372 + <view class="couponWrap">
  373 + <view class="couponInfo font48r">
  374 + <text class="font48r">到店微信扫码</text>
  375 + <text class="font48r">自动识别</text>
  376 + </view>
  377 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  378 + <view class="couponBtn font28r">我知道了</view>
  379 + </subscribe>
  380 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  381 + </view>
378 </view> 382 </view>
379 </my-modal> 383 </my-modal>
@@ -735,12 +735,17 @@ @@ -735,12 +735,17 @@
735 } 735 }
736 736
737 .giftImg{ 737 .giftImg{
738 - width: 108rpx;  
739 - height: 108rpx; 738 + width: 108rpx;
  739 + height: 116rpx;
740 position: fixed !important; 740 position: fixed !important;
741 - right: 5%;  
742 - top: 33%;  
743 - z-index: 200; 741 + right: 4%;
  742 + top: 28%;
  743 + z-index: 200;
  744 + transform-origin: 50% 100%;
  745 +}
  746 +
  747 +.giftImg1 {
  748 + transform: scale(0);
744 } 749 }
745 750
746 #payModal { 751 #payModal {
@@ -750,7 +755,6 @@ @@ -750,7 +755,6 @@
750 755
751 .titleModal { 756 .titleModal {
752 width: 100%; 757 width: 100%;
753 - margin-top: 48rpx;  
754 color: #000; 758 color: #000;
755 font-family: PingFang SC; 759 font-family: PingFang SC;
756 font-weight: 500; 760 font-weight: 500;
@@ -817,21 +821,29 @@ @@ -817,21 +821,29 @@
817 } 821 }
818 822
819 #couponModal .titleModal { 823 #couponModal .titleModal {
820 - margin-top: 60%;  
821 position: relative; 824 position: relative;
822 - width: 100%; 825 + width: 544rpx;
  826 + background: #F14033;
  827 + border-top-left-radius: 20rpx;
  828 + border-top-right-radius: 20rpx;
  829 + margin: 94% auto 0;
823 } 830 }
824 831
825 -#couponModal .titleModal2 {  
826 - margin-top: 80%; 832 +#couponModal .couponWrap {
  833 + position: relative;
  834 + width: 544rpx;
  835 + margin: 0 auto;
  836 + background: #F14033;
  837 + border-bottom-left-radius: 20rpx;
  838 + border-bottom-right-radius: 20rpx;
827 } 839 }
828 840
829 -#couponModal .titleModal3 {  
830 - margin-top: 60%; 841 +#couponModal .mymodal-title {
  842 + padding: 0 80rpx;
831 } 843 }
832 844
833 -#couponModal .titleModal4 {  
834 - margin-top: 30%; 845 +#couponModal .mymodal-content {
  846 + padding: 0 80rpx 40rpx 80rpx;
835 } 847 }
836 848
837 #couponModal .mymodal { 849 #couponModal .mymodal {
@@ -844,39 +856,41 @@ @@ -844,39 +856,41 @@
844 856
845 .nameInfo { 857 .nameInfo {
846 font-family: PingFang SC; 858 font-family: PingFang SC;
847 - font-weight: 400;  
848 - font-size: 52rpx;  
849 - line-height: 56rpx; 859 + font-weight: 500;
  860 + line-height: 38rpx;
850 color: #fff; 861 color: #fff;
851 - margin-bottom: 40rpx;  
852 - padding-top: 60rpx; 862 + margin-bottom: 28rpx;
853 text-align: center; 863 text-align: center;
  864 + padding: 44rpx 30rpx 0 30rpx;
854 } 865 }
855 866
856 .couponTotal { 867 .couponTotal {
857 - color: #dfdfdf; 868 + color: #fff;
858 font-family: PingFang SC; 869 font-family: PingFang SC;
859 - font-weight: 400;  
860 - font-size: 40rpx; 870 + font-weight: 500;
861 line-height: 48rpx; 871 line-height: 48rpx;
862 - margin-bottom: 40rpx;  
863 - display: flex;  
864 - align-items: center;  
865 - justify-content: center;  
866 - margin: 20% 0 10% 0; 872 + padding-bottom: 16rpx;
867 } 873 }
868 874
869 .counterText { 875 .counterText {
870 color: #ffc806; 876 color: #ffc806;
871 font-weight: 600; 877 font-weight: 600;
872 - font-size: 80rpx;  
873 - margin-right: 14rpx; 878 + display: flex;
  879 + font-size: 100rpx;
  880 + align-items: flex-end;
  881 + justify-content: center;
  882 + margin: 16rpx 0;
874 } 883 }
875 884
876 .couponInfo { 885 .couponInfo {
877 - color: #DFDFDF; 886 + color: #fff;
878 text-align: center; 887 text-align: center;
879 - margin-bottom: 40rpx; 888 + margin-bottom: 20rpx;
  889 + font-weight: 600;
  890 + display: flex;
  891 + flex-direction: column;
  892 + align-items: center;
  893 + line-height: 78rpx;
880 } 894 }
881 895
882 .couponBox { 896 .couponBox {
@@ -940,28 +954,59 @@ @@ -940,28 +954,59 @@
940 .couponBtn { 954 .couponBtn {
941 width: 80%; 955 width: 80%;
942 margin: 0 auto; 956 margin: 0 auto;
943 - border-radius: 42rpx;  
944 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
945 - font-weight: 400;  
946 - color: #fff; 957 + background: #fff;
  958 + font-weight: 600;
947 text-align: center; 959 text-align: center;
948 - border: 4rpx solid #fff;  
949 padding: 12rpx 0; 960 padding: 12rpx 0;
950 margin: 16rpx auto 20rpx auto; 961 margin: 16rpx auto 20rpx auto;
  962 + color: #F14033;
  963 + border-radius: 8rpx;
951 } 964 }
952 965
953 .couponText { 966 .couponText {
954 color: #fff; 967 color: #fff;
955 text-decoration: underline; 968 text-decoration: underline;
956 text-align: center; 969 text-align: center;
  970 + padding-bottom: 44rpx;
  971 + font-weight: 600;
  972 + letter-spacing:2rpx;
957 } 973 }
958 974
959 .closeImg { 975 .closeImg {
960 width: 60rpx; 976 width: 60rpx;
961 height: 60rpx; 977 height: 60rpx;
962 - position: absolute;  
963 - right: 5%;  
964 - top: -10%; 978 + position: fixed;
  979 + left: 46%;
  980 + bottom: 24%;
  981 +}
  982 +
  983 +/* 全屏遮罩层初始样式 */
  984 +.fullscreenMask {
  985 + position: fixed;
  986 + top: 35%;
  987 + margin: 0 auto;
  988 + height: 580rpx;
  989 + z-index: 100;
  990 + color: #fff;
  991 + display: flex;
  992 + align-items: center;
  993 + justify-content: center;
  994 + border-radius: 50%;
  995 + width: 100%;
  996 +}
  997 +
  998 +.fullscreenMask image{
  999 + width: 544rpx;
  1000 + height: 600rpx;
  1001 +}
  1002 +
  1003 +/* 目标点（右上角的商家有礼位置） */
  1004 +.targetPoint {
  1005 + position: fixed;
  1006 + width: 108rpx;
  1007 + height: 116rpx;
  1008 + background: transparent;
  1009 + z-index: 100;
965 } 1010 }
966 1011
967 /* 深中国红 */ 1012 /* 深中国红 */
@@ -69,6 +69,10 @@ Page({ @@ -69,6 +69,10 @@ Page({
69 isShareItem:'',//转发客人按钮 69 isShareItem:'',//转发客人按钮
70 couponArr: [],//待领取的优惠券列表 70 couponArr: [],//待领取的优惠券列表
71 couponList:[],//优惠券列表 71 couponList:[],//优惠券列表
  72 + animationData: {},
  73 + animationData2:{},
  74 + isShow:'0',
  75 + isFrame:'0'
72 }, 76 },
73 tablestr: '', 77 tablestr: '',
74 urlsValue: [], 78 urlsValue: [],
@@ -121,6 +125,12 @@ Page({ @@ -121,6 +125,12 @@ Page({
121 closeCouponModal() { 125 closeCouponModal() {
122 this.getActivityByIdFun(this.data.couponList,'1') 126 this.getActivityByIdFun(this.data.couponList,'1')
123 this.couponModal.closeModal() 127 this.couponModal.closeModal()
  128 + this.setData({
  129 + isShow: '1',
  130 + })
  131 + setTimeout(() => {
  132 + this.startAnimation();
  133 + }, 800);
124 }, 134 },
125 // 页面滚动事件 135 // 页面滚动事件
126 onPageScroll: function (event) { 136 onPageScroll: function (event) {
@@ -1038,6 +1048,12 @@ Page({ @@ -1038,6 +1048,12 @@ Page({
1038 // 免费券判断是否领取，弹框领取 1048 // 免费券判断是否领取，弹框领取
1039 if (freeCoupons.length > 0 && couponShow) { 1049 if (freeCoupons.length > 0 && couponShow) {
1040 this.getCoupon(freeCoupons,obj,setcoupon) 1050 this.getCoupon(freeCoupons,obj,setcoupon)
  1051 + } else {
  1052 + if(setcoupon!='1'){
  1053 + this.setData({
  1054 + isFrame:'1',
  1055 + })
  1056 + }
1041 } 1057 }
1042 console.log('邀请函--------------------优惠券', list); 1058 console.log('邀请函--------------------优惠券', list);
1043 this.setData({ 1059 this.setData({
@@ -1146,6 +1162,18 @@ Page({ @@ -1146,6 +1162,18 @@ Page({
1146 }) 1162 })
1147 this.couponModal.showModal() 1163 this.couponModal.showModal()
1148 }, 3000); 1164 }, 3000);
  1165 + }else {
  1166 + if(setcoupon!='1'){
  1167 + this.setData({
  1168 + isFrame:'1',
  1169 + })
  1170 + }
  1171 + }
  1172 + }else {
  1173 + if(setcoupon!='1'){
  1174 + this.setData({
  1175 + isFrame:'1',
  1176 + })
1149 } 1177 }
1150 } 1178 }
1151 list.forEach(item=>{ 1179 list.forEach(item=>{
@@ -1309,6 +1337,39 @@ Page({ @@ -1309,6 +1337,39 @@ Page({
1309 } 1337 }
1310 return new Date(data || new Date()) 1338 return new Date(data || new Date())
1311 }, 1339 },
  1340 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1341 + startAnimation() {
  1342 + const animation = wx.createAnimation({
  1343 + duration: 800,
  1344 + timingFunction: 'ease',
  1345 + });
  1346 + animation.translateY('-60%')
  1347 + .translateX('34%')
  1348 + .scale(0)
  1349 + .step();
  1350 + this.setData({
  1351 + animationData: animation.export(),
  1352 + });
  1353 + setTimeout(() => {
  1354 + this.startSecondAnimation();
  1355 + }, 800);
  1356 + },
  1357 + // 出现商家有礼图标，并且晃动2下
  1358 + startSecondAnimation() {
  1359 + const animation = wx.createAnimation({
  1360 + duration: 200,
  1361 + timingFunction: 'ease'
  1362 + });
  1363 + animation.scale(1).step()
  1364 + .rotate(-15).step()
  1365 + .rotate(15).step()
  1366 + .rotate(-15).step()
  1367 + .rotate(15).step()
  1368 + .rotate(0).step();
  1369 + this.setData({
  1370 + animationData2: animation.export()
  1371 + });
  1372 + },
1312 //根据起始时间（获取时间时间段） 1373 //根据起始时间（获取时间时间段）
1313 computeHour (time1, time2, interval) { 1374 computeHour (time1, time2, interval) {
1314 //time1 开始时间 time2结束时间 interval间隔时长 1375 //time1 开始时间 time2结束时间 interval间隔时长
@@ -9,11 +9,16 @@ @@ -9,11 +9,16 @@
9 bindtap="stopMusic" 9 bindtap="stopMusic"
10 animation="{{attentionAnim}}" 10 animation="{{attentionAnim}}"
11 /> 11 />
12 - <image class="giftImg" 12 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
13 bindtap="gotoSellerGift" 13 bindtap="gotoSellerGift"
14 data-form="1" 14 data-form="1"
15 - 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)}}"  
16 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 15 + animation="{{animationData2}}"
  16 + 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)}}"
  17 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  18 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  19 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  20 + </view>
  21 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
17 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 22 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
18 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 23 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
19 <view class="reservationInfo"> 24 <view class="reservationInfo">
@@ -356,29 +361,28 @@ @@ -356,29 +361,28 @@
356 </view> 361 </view>
357 </my-modal> 362 </my-modal>
358 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 363 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
359 - <view slot="modalName" class="titleModal">  
360 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
361 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
362 - <view class="couponTotal" wx:if="{{totalPrice}}">  
363 - 赠送给您  
364 - <scroll-number value="{{totalPrice}}"></scroll-number>  
365 - <text class="counterText1">元</text>代金券  
366 - </view> 364 + <view slot="modalName">
  365 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
367 </view> 366 </view>
368 <view slot="modalContent"> 367 <view slot="modalContent">
369 - <!-- <view class="couponBox">  
370 - <view wx:for="{{couponArr}}" class="couponItems">  
371 - <view class="couponNum font20r">×{{item.number}}</view>  
372 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
373 - <view class="couponLines"></view>  
374 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
375 - <view class="font28r couponCondition" wx:else>无门槛</view> 368 + <view class="titleModal">
  369 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  370 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  371 + 赠送给您代金券
  372 + <view class="counterText">
  373 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  374 + </view>
376 </view> 375 </view>
377 - </view> -->  
378 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
379 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
380 - <view class="couponBtn font36r">我知道了</view>  
381 - </subscribe>  
382 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 376 + </view>
  377 + <view class="couponWrap">
  378 + <view class="couponInfo font48r">
  379 + <text class="font48r">到店微信扫码</text>
  380 + <text class="font48r">自动识别</text>
  381 + </view>
  382 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  383 + <view class="couponBtn font28r">我知道了</view>
  384 + </subscribe>
  385 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  386 + </view>
383 </view> 387 </view>
384 </my-modal> 388 </my-modal>
@@ -767,12 +767,17 @@ @@ -767,12 +767,17 @@
767 } 767 }
768 768
769 .giftImg{ 769 .giftImg{
770 - width: 108rpx;  
771 - height: 108rpx; 770 + width: 108rpx;
  771 + height: 116rpx;
772 position: fixed !important; 772 position: fixed !important;
773 - right: 5%;  
774 - top: 33%;  
775 - z-index: 200; 773 + right: 4%;
  774 + top: 28%;
  775 + z-index: 200;
  776 + transform-origin: 50% 100%;
  777 +}
  778 +
  779 +.giftImg1 {
  780 + transform: scale(0);
776 } 781 }
777 782
778 #payModal { 783 #payModal {
@@ -782,7 +787,6 @@ @@ -782,7 +787,6 @@
782 787
783 .titleModal { 788 .titleModal {
784 width: 100%; 789 width: 100%;
785 - margin-top: 48rpx;  
786 color: #000; 790 color: #000;
787 font-family: PingFang SC; 791 font-family: PingFang SC;
788 font-weight: 500; 792 font-weight: 500;
@@ -849,21 +853,29 @@ @@ -849,21 +853,29 @@
849 } 853 }
850 854
851 #couponModal .titleModal { 855 #couponModal .titleModal {
852 - margin-top: 60%;  
853 position: relative; 856 position: relative;
854 - width: 100%; 857 + width: 544rpx;
  858 + background: #F14033;
  859 + border-top-left-radius: 20rpx;
  860 + border-top-right-radius: 20rpx;
  861 + margin: 94% auto 0;
855 } 862 }
856 863
857 -#couponModal .titleModal2 {  
858 - margin-top: 80%; 864 +#couponModal .couponWrap {
  865 + position: relative;
  866 + width: 544rpx;
  867 + margin: 0 auto;
  868 + background: #F14033;
  869 + border-bottom-left-radius: 20rpx;
  870 + border-bottom-right-radius: 20rpx;
859 } 871 }
860 872
861 -#couponModal .titleModal3 {  
862 - margin-top: 60%; 873 +#couponModal .mymodal-title {
  874 + padding: 0 80rpx;
863 } 875 }
864 876
865 -#couponModal .titleModal4 {  
866 - margin-top: 30%; 877 +#couponModal .mymodal-content {
  878 + padding: 0 80rpx 40rpx 80rpx;
867 } 879 }
868 880
869 #couponModal .mymodal { 881 #couponModal .mymodal {
@@ -876,39 +888,41 @@ @@ -876,39 +888,41 @@
876 888
877 .nameInfo { 889 .nameInfo {
878 font-family: PingFang SC; 890 font-family: PingFang SC;
879 - font-weight: 400;  
880 - font-size: 52rpx;  
881 - line-height: 56rpx; 891 + font-weight: 500;
  892 + line-height: 38rpx;
882 color: #fff; 893 color: #fff;
883 - margin-bottom: 40rpx;  
884 - padding-top: 60rpx; 894 + margin-bottom: 28rpx;
885 text-align: center; 895 text-align: center;
  896 + padding: 44rpx 30rpx 0 30rpx;
886 } 897 }
887 898
888 .couponTotal { 899 .couponTotal {
889 - color: #dfdfdf; 900 + color: #fff;
890 font-family: PingFang SC; 901 font-family: PingFang SC;
891 - font-weight: 400;  
892 - font-size: 40rpx; 902 + font-weight: 500;
893 line-height: 48rpx; 903 line-height: 48rpx;
894 - margin-bottom: 40rpx;  
895 - display: flex;  
896 - align-items: center;  
897 - justify-content: center;  
898 - margin: 20% 0 10% 0; 904 + padding-bottom: 16rpx;
899 } 905 }
900 906
901 .counterText { 907 .counterText {
902 color: #ffc806; 908 color: #ffc806;
903 font-weight: 600; 909 font-weight: 600;
904 - font-size: 80rpx;  
905 - margin-right: 14rpx; 910 + display: flex;
  911 + font-size: 100rpx;
  912 + align-items: flex-end;
  913 + justify-content: center;
  914 + margin: 16rpx 0;
906 } 915 }
907 916
908 .couponInfo { 917 .couponInfo {
909 - color: #DFDFDF; 918 + color: #fff;
910 text-align: center; 919 text-align: center;
911 - margin-bottom: 40rpx; 920 + margin-bottom: 20rpx;
  921 + font-weight: 600;
  922 + display: flex;
  923 + flex-direction: column;
  924 + align-items: center;
  925 + line-height: 78rpx;
912 } 926 }
913 927
914 .couponBox { 928 .couponBox {
@@ -972,28 +986,59 @@ @@ -972,28 +986,59 @@
972 .couponBtn { 986 .couponBtn {
973 width: 80%; 987 width: 80%;
974 margin: 0 auto; 988 margin: 0 auto;
975 - border-radius: 42rpx;  
976 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
977 - font-weight: 400;  
978 - color: #fff; 989 + background: #fff;
  990 + font-weight: 600;
979 text-align: center; 991 text-align: center;
980 - border: 4rpx solid #fff;  
981 padding: 12rpx 0; 992 padding: 12rpx 0;
982 margin: 16rpx auto 20rpx auto; 993 margin: 16rpx auto 20rpx auto;
  994 + color: #F14033;
  995 + border-radius: 8rpx;
983 } 996 }
984 997
985 .couponText { 998 .couponText {
986 color: #fff; 999 color: #fff;
987 text-decoration: underline; 1000 text-decoration: underline;
988 text-align: center; 1001 text-align: center;
  1002 + padding-bottom: 44rpx;
  1003 + font-weight: 600;
  1004 + letter-spacing:2rpx;
989 } 1005 }
990 1006
991 .closeImg { 1007 .closeImg {
992 width: 60rpx; 1008 width: 60rpx;
993 height: 60rpx; 1009 height: 60rpx;
994 - position: absolute;  
995 - right: 5%;  
996 - top: -10%; 1010 + position: fixed;
  1011 + left: 46%;
  1012 + bottom: 24%;
  1013 +}
  1014 +
  1015 +/* 全屏遮罩层初始样式 */
  1016 +.fullscreenMask {
  1017 + position: fixed;
  1018 + top: 35%;
  1019 + margin: 0 auto;
  1020 + height: 580rpx;
  1021 + z-index: 100;
  1022 + color: #fff;
  1023 + display: flex;
  1024 + align-items: center;
  1025 + justify-content: center;
  1026 + border-radius: 50%;
  1027 + width: 100%;
  1028 +}
  1029 +
  1030 +.fullscreenMask image{
  1031 + width: 544rpx;
  1032 + height: 600rpx;
  1033 +}
  1034 +
  1035 +/* 目标点（右上角的商家有礼位置） */
  1036 +.targetPoint {
  1037 + position: fixed;
  1038 + width: 108rpx;
  1039 + height: 116rpx;
  1040 + background: transparent;
  1041 + z-index: 100;
997 } 1042 }
998 1043
999 /* 深中国红 */ 1044 /* 深中国红 */
@@ -69,6 +69,10 @@ Page({ @@ -69,6 +69,10 @@ Page({
69 isShareItem:'',//转发客人按钮 69 isShareItem:'',//转发客人按钮
70 couponArr: [],//待领取的优惠券列表 70 couponArr: [],//待领取的优惠券列表
71 couponList:[],//优惠券列表 71 couponList:[],//优惠券列表
  72 + animationData: {},
  73 + animationData2:{},
  74 + isShow:'0',
  75 + isFrame:'0'
72 }, 76 },
73 tablestr: '', 77 tablestr: '',
74 urlsValue: [], 78 urlsValue: [],
@@ -121,6 +125,12 @@ Page({ @@ -121,6 +125,12 @@ Page({
121 closeCouponModal() { 125 closeCouponModal() {
122 this.getActivityByIdFun(this.data.couponList,'1') 126 this.getActivityByIdFun(this.data.couponList,'1')
123 this.couponModal.closeModal() 127 this.couponModal.closeModal()
  128 + this.setData({
  129 + isShow: '1',
  130 + })
  131 + setTimeout(() => {
  132 + this.startAnimation();
  133 + }, 800);
124 }, 134 },
125 // 页面滚动事件 135 // 页面滚动事件
126 onPageScroll: function (event) { 136 onPageScroll: function (event) {
@@ -1038,6 +1048,12 @@ Page({ @@ -1038,6 +1048,12 @@ Page({
1038 // 免费券判断是否领取，弹框领取 1048 // 免费券判断是否领取，弹框领取
1039 if (freeCoupons.length > 0 && couponShow) { 1049 if (freeCoupons.length > 0 && couponShow) {
1040 this.getCoupon(freeCoupons,obj,setcoupon) 1050 this.getCoupon(freeCoupons,obj,setcoupon)
  1051 + } else {
  1052 + if(setcoupon!='1'){
  1053 + this.setData({
  1054 + isFrame:'1',
  1055 + })
  1056 + }
1041 } 1057 }
1042 console.log('邀请函--------------------优惠券', list); 1058 console.log('邀请函--------------------优惠券', list);
1043 this.setData({ 1059 this.setData({
@@ -1146,6 +1162,18 @@ Page({ @@ -1146,6 +1162,18 @@ Page({
1146 }) 1162 })
1147 this.couponModal.showModal() 1163 this.couponModal.showModal()
1148 }, 3000); 1164 }, 3000);
  1165 + }else {
  1166 + if(setcoupon!='1'){
  1167 + this.setData({
  1168 + isFrame:'1',
  1169 + })
  1170 + }
  1171 + }
  1172 + }else {
  1173 + if(setcoupon!='1'){
  1174 + this.setData({
  1175 + isFrame:'1',
  1176 + })
1149 } 1177 }
1150 } 1178 }
1151 list.forEach(item=>{ 1179 list.forEach(item=>{
@@ -1309,6 +1337,39 @@ Page({ @@ -1309,6 +1337,39 @@ Page({
1309 } 1337 }
1310 return new Date(data || new Date()) 1338 return new Date(data || new Date())
1311 }, 1339 },
  1340 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1341 + startAnimation() {
  1342 + const animation = wx.createAnimation({
  1343 + duration: 800,
  1344 + timingFunction: 'ease',
  1345 + });
  1346 + animation.translateY('-60%')
  1347 + .translateX('34%')
  1348 + .scale(0)
  1349 + .step();
  1350 + this.setData({
  1351 + animationData: animation.export(),
  1352 + });
  1353 + setTimeout(() => {
  1354 + this.startSecondAnimation();
  1355 + }, 800);
  1356 + },
  1357 + // 出现商家有礼图标，并且晃动2下
  1358 + startSecondAnimation() {
  1359 + const animation = wx.createAnimation({
  1360 + duration: 200,
  1361 + timingFunction: 'ease'
  1362 + });
  1363 + animation.scale(1).step()
  1364 + .rotate(-15).step()
  1365 + .rotate(15).step()
  1366 + .rotate(-15).step()
  1367 + .rotate(15).step()
  1368 + .rotate(0).step();
  1369 + this.setData({
  1370 + animationData2: animation.export()
  1371 + });
  1372 + },
1312 //根据起始时间（获取时间时间段） 1373 //根据起始时间（获取时间时间段）
1313 computeHour (time1, time2, interval) { 1374 computeHour (time1, time2, interval) {
1314 //time1 开始时间 time2结束时间 interval间隔时长 1375 //time1 开始时间 time2结束时间 interval间隔时长
@@ -1364,5 +1425,5 @@ Page({ @@ -1364,5 +1425,5 @@ Page({
1364 */ 1425 */
1365 onReachBottom() { 1426 onReachBottom() {
1366 1427
1367 - }, 1428 + },
1368 }) 1429 })
@@ -8,11 +8,16 @@ @@ -8,11 +8,16 @@
8 bindtap="stopMusic" 8 bindtap="stopMusic"
9 animation="{{attentionAnim}}" 9 animation="{{attentionAnim}}"
10 /> 10 />
11 - <image class="giftImg" 11 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
12 bindtap="gotoSellerGift" 12 bindtap="gotoSellerGift"
13 data-form="1" 13 data-form="1"
14 - 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)}}"  
15 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 14 + animation="{{animationData2}}"
  15 + 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)}}"
  16 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  17 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  18 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  19 + </view>
  20 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
16 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 21 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
17 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 22 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
18 <view class="reservationInfo" wx:if="{{themeColor}}"> 23 <view class="reservationInfo" wx:if="{{themeColor}}">
@@ -339,29 +344,28 @@ @@ -339,29 +344,28 @@
339 </view> 344 </view>
340 </my-modal> 345 </my-modal>
341 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 346 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
342 - <view slot="modalName" class="titleModal">  
343 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
344 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
345 - <view class="couponTotal" wx:if="{{totalPrice}}">  
346 - 赠送给您  
347 - <scroll-number value="{{totalPrice}}"></scroll-number>  
348 - <text class="counterText1">元</text>代金券  
349 - </view> 347 + <view slot="modalName">
  348 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
350 </view> 349 </view>
351 <view slot="modalContent"> 350 <view slot="modalContent">
352 - <!-- <view class="couponBox">  
353 - <view wx:for="{{couponArr}}" class="couponItems">  
354 - <view class="couponNum font20r">×{{item.number}}</view>  
355 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
356 - <view class="couponLines"></view>  
357 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
358 - <view class="font28r couponCondition" wx:else>无门槛</view> 351 + <view class="titleModal">
  352 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  353 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  354 + 赠送给您代金券
  355 + <view class="counterText">
  356 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  357 + </view>
359 </view> 358 </view>
360 - </view> -->  
361 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
362 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
363 - <view class="couponBtn font36r">我知道了</view>  
364 - </subscribe>  
365 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 359 + </view>
  360 + <view class="couponWrap">
  361 + <view class="couponInfo font48r">
  362 + <text class="font48r">到店微信扫码</text>
  363 + <text class="font48r">自动识别</text>
  364 + </view>
  365 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  366 + <view class="couponBtn font28r">我知道了</view>
  367 + </subscribe>
  368 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  369 + </view>
366 </view> 370 </view>
367 </my-modal> 371 </my-modal>
@@ -752,12 +752,17 @@ @@ -752,12 +752,17 @@
752 } 752 }
753 753
754 .giftImg{ 754 .giftImg{
755 - width: 108rpx;  
756 - height: 108rpx; 755 + width: 108rpx;
  756 + height: 116rpx;
757 position: fixed !important; 757 position: fixed !important;
758 - right: 5%;  
759 - top: 33%;  
760 - z-index: 200; 758 + right: 4%;
  759 + top: 28%;
  760 + z-index: 200;
  761 + transform-origin: 50% 100%;
  762 +}
  763 +
  764 +.giftImg1 {
  765 + transform: scale(0);
761 } 766 }
762 767
763 #payModal { 768 #payModal {
@@ -767,12 +772,11 @@ @@ -767,12 +772,11 @@
767 772
768 .titleModal { 773 .titleModal {
769 width: 100%; 774 width: 100%;
770 - margin-top: 48rpx;  
771 color: #000; 775 color: #000;
772 font-family: PingFang SC; 776 font-family: PingFang SC;
773 font-weight: 500; 777 font-weight: 500;
774 font-size: 44rpx; 778 font-size: 44rpx;
775 - text-align: center; 779 + text-align: center;
776 } 780 }
777 781
778 .explain{ 782 .explain{
@@ -834,21 +838,29 @@ @@ -834,21 +838,29 @@
834 } 838 }
835 839
836 #couponModal .titleModal { 840 #couponModal .titleModal {
837 - margin-top: 60%;  
838 position: relative; 841 position: relative;
839 - width: 100%; 842 + width: 544rpx;
  843 + background: #F14033;
  844 + border-top-left-radius: 20rpx;
  845 + border-top-right-radius: 20rpx;
  846 + margin: 94% auto 0;
840 } 847 }
841 848
842 -#couponModal .titleModal2 {  
843 - margin-top: 80%; 849 +#couponModal .couponWrap {
  850 + position: relative;
  851 + width: 544rpx;
  852 + margin: 0 auto;
  853 + background: #F14033;
  854 + border-bottom-left-radius: 20rpx;
  855 + border-bottom-right-radius: 20rpx;
844 } 856 }
845 857
846 -#couponModal .titleModal3 {  
847 - margin-top: 60%; 858 +#couponModal .mymodal-title {
  859 + padding: 0 80rpx;
848 } 860 }
849 861
850 -#couponModal .titleModal4 {  
851 - margin-top: 30%; 862 +#couponModal .mymodal-content {
  863 + padding: 0 80rpx 40rpx 80rpx;
852 } 864 }
853 865
854 #couponModal .mymodal { 866 #couponModal .mymodal {
@@ -861,39 +873,41 @@ @@ -861,39 +873,41 @@
861 873
862 .nameInfo { 874 .nameInfo {
863 font-family: PingFang SC; 875 font-family: PingFang SC;
864 - font-weight: 400;  
865 - font-size: 52rpx;  
866 - line-height: 56rpx; 876 + font-weight: 500;
  877 + line-height: 38rpx;
867 color: #fff; 878 color: #fff;
868 - margin-bottom: 40rpx;  
869 - padding-top: 60rpx; 879 + margin-bottom: 28rpx;
870 text-align: center; 880 text-align: center;
  881 + padding: 44rpx 30rpx 0 30rpx;
871 } 882 }
872 883
873 .couponTotal { 884 .couponTotal {
874 - color: #dfdfdf; 885 + color: #fff;
875 font-family: PingFang SC; 886 font-family: PingFang SC;
876 - font-weight: 400;  
877 - font-size: 40rpx; 887 + font-weight: 500;
878 line-height: 48rpx; 888 line-height: 48rpx;
879 - margin-bottom: 40rpx;  
880 - display: flex;  
881 - align-items: center;  
882 - justify-content: center;  
883 - margin: 20% 0 10% 0; 889 + padding-bottom: 16rpx;
884 } 890 }
885 891
886 .counterText { 892 .counterText {
887 color: #ffc806; 893 color: #ffc806;
888 font-weight: 600; 894 font-weight: 600;
889 - font-size: 80rpx;  
890 - margin-right: 14rpx; 895 + display: flex;
  896 + font-size: 100rpx;
  897 + align-items: flex-end;
  898 + justify-content: center;
  899 + margin: 16rpx 0;
891 } 900 }
892 901
893 .couponInfo { 902 .couponInfo {
894 - color: #DFDFDF; 903 + color: #fff;
895 text-align: center; 904 text-align: center;
896 - margin-bottom: 40rpx; 905 + margin-bottom: 20rpx;
  906 + font-weight: 600;
  907 + display: flex;
  908 + flex-direction: column;
  909 + align-items: center;
  910 + line-height: 78rpx;
897 } 911 }
898 912
899 .couponBox { 913 .couponBox {
@@ -957,28 +971,59 @@ @@ -957,28 +971,59 @@
957 .couponBtn { 971 .couponBtn {
958 width: 80%; 972 width: 80%;
959 margin: 0 auto; 973 margin: 0 auto;
960 - border-radius: 42rpx;  
961 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
962 - font-weight: 400;  
963 - color: #fff; 974 + background: #fff;
  975 + font-weight: 600;
964 text-align: center; 976 text-align: center;
965 - border: 4rpx solid #fff;  
966 padding: 12rpx 0; 977 padding: 12rpx 0;
967 margin: 16rpx auto 20rpx auto; 978 margin: 16rpx auto 20rpx auto;
  979 + color: #F14033;
  980 + border-radius: 8rpx;
968 } 981 }
969 982
970 .couponText { 983 .couponText {
971 color: #fff; 984 color: #fff;
972 text-decoration: underline; 985 text-decoration: underline;
973 text-align: center; 986 text-align: center;
  987 + padding-bottom: 44rpx;
  988 + font-weight: 600;
  989 + letter-spacing:2rpx;
974 } 990 }
975 991
976 .closeImg { 992 .closeImg {
977 width: 60rpx; 993 width: 60rpx;
978 height: 60rpx; 994 height: 60rpx;
979 - position: absolute;  
980 - right: 5%;  
981 - top: -10%; 995 + position: fixed;
  996 + left: 46%;
  997 + bottom: 24%;
  998 +}
  999 +
  1000 +/* 全屏遮罩层初始样式 */
  1001 +.fullscreenMask {
  1002 + position: fixed;
  1003 + top: 35%;
  1004 + margin: 0 auto;
  1005 + height: 580rpx;
  1006 + z-index: 100;
  1007 + color: #fff;
  1008 + display: flex;
  1009 + align-items: center;
  1010 + justify-content: center;
  1011 + border-radius: 50%;
  1012 + width: 100%;
  1013 +}
  1014 +
  1015 +.fullscreenMask image{
  1016 + width: 544rpx;
  1017 + height: 600rpx;
  1018 +}
  1019 +
  1020 +/* 目标点（右上角的商家有礼位置） */
  1021 +.targetPoint {
  1022 + position: fixed;
  1023 + width: 108rpx;
  1024 + height: 116rpx;
  1025 + background: transparent;
  1026 + z-index: 100;
982 } 1027 }
983 1028
984 /* 深中国红 */ 1029 /* 深中国红 */
@@ -68,6 +68,10 @@ Page({ @@ -68,6 +68,10 @@ Page({
68 isShareItem:'',//转发客人按钮 68 isShareItem:'',//转发客人按钮
69 couponArr: [],//待领取的优惠券列表 69 couponArr: [],//待领取的优惠券列表
70 couponList:[],//优惠券列表 70 couponList:[],//优惠券列表
  71 + animationData: {},
  72 + animationData2:{},
  73 + isShow:'0',
  74 + isFrame:'0'
71 }, 75 },
72 tablestr: '', 76 tablestr: '',
73 urlsValue: [], 77 urlsValue: [],
@@ -120,6 +124,12 @@ Page({ @@ -120,6 +124,12 @@ Page({
120 closeCouponModal() { 124 closeCouponModal() {
121 this.getActivityByIdFun(this.data.couponList,'1') 125 this.getActivityByIdFun(this.data.couponList,'1')
122 this.couponModal.closeModal() 126 this.couponModal.closeModal()
  127 + this.setData({
  128 + isShow: '1',
  129 + })
  130 + setTimeout(() => {
  131 + this.startAnimation();
  132 + }, 800);
123 }, 133 },
124 // 页面滚动事件 134 // 页面滚动事件
125 onPageScroll: function (event) { 135 onPageScroll: function (event) {
@@ -1037,6 +1047,12 @@ Page({ @@ -1037,6 +1047,12 @@ Page({
1037 // 免费券判断是否领取，弹框领取 1047 // 免费券判断是否领取，弹框领取
1038 if (freeCoupons.length > 0 && couponShow) { 1048 if (freeCoupons.length > 0 && couponShow) {
1039 this.getCoupon(freeCoupons,obj,setcoupon) 1049 this.getCoupon(freeCoupons,obj,setcoupon)
  1050 + } else {
  1051 + if(setcoupon!='1'){
  1052 + this.setData({
  1053 + isFrame:'1',
  1054 + })
  1055 + }
1040 } 1056 }
1041 console.log('邀请函--------------------优惠券', list); 1057 console.log('邀请函--------------------优惠券', list);
1042 this.setData({ 1058 this.setData({
@@ -1145,6 +1161,18 @@ Page({ @@ -1145,6 +1161,18 @@ Page({
1145 }) 1161 })
1146 this.couponModal.showModal() 1162 this.couponModal.showModal()
1147 }, 3000); 1163 }, 3000);
  1164 + }else {
  1165 + if(setcoupon!='1'){
  1166 + this.setData({
  1167 + isFrame:'1',
  1168 + })
  1169 + }
  1170 + }
  1171 + }else {
  1172 + if(setcoupon!='1'){
  1173 + this.setData({
  1174 + isFrame:'1',
  1175 + })
1148 } 1176 }
1149 } 1177 }
1150 list.forEach(item=>{ 1178 list.forEach(item=>{
@@ -1308,6 +1336,39 @@ Page({ @@ -1308,6 +1336,39 @@ Page({
1308 } 1336 }
1309 return new Date(data || new Date()) 1337 return new Date(data || new Date())
1310 }, 1338 },
  1339 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1340 + startAnimation() {
  1341 + const animation = wx.createAnimation({
  1342 + duration: 800,
  1343 + timingFunction: 'ease',
  1344 + });
  1345 + animation.translateY('-60%')
  1346 + .translateX('34%')
  1347 + .scale(0)
  1348 + .step();
  1349 + this.setData({
  1350 + animationData: animation.export(),
  1351 + });
  1352 + setTimeout(() => {
  1353 + this.startSecondAnimation();
  1354 + }, 800);
  1355 + },
  1356 + // 出现商家有礼图标，并且晃动2下
  1357 + startSecondAnimation() {
  1358 + const animation = wx.createAnimation({
  1359 + duration: 200,
  1360 + timingFunction: 'ease'
  1361 + });
  1362 + animation.scale(1).step()
  1363 + .rotate(-15).step()
  1364 + .rotate(15).step()
  1365 + .rotate(-15).step()
  1366 + .rotate(15).step()
  1367 + .rotate(0).step();
  1368 + this.setData({
  1369 + animationData2: animation.export()
  1370 + });
  1371 + },
1311 //根据起始时间（获取时间时间段） 1372 //根据起始时间（获取时间时间段）
1312 computeHour (time1, time2, interval) { 1373 computeHour (time1, time2, interval) {
1313 //time1 开始时间 time2结束时间 interval间隔时长 1374 //time1 开始时间 time2结束时间 interval间隔时长
@@ -8,11 +8,16 @@ @@ -8,11 +8,16 @@
8 bindtap="stopMusic" 8 bindtap="stopMusic"
9 animation="{{attentionAnim}}" 9 animation="{{attentionAnim}}"
10 /> 10 />
11 - <image class="giftImg" 11 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
12 bindtap="gotoSellerGift" 12 bindtap="gotoSellerGift"
13 data-form="1" 13 data-form="1"
14 - 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)}}"  
15 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 14 + animation="{{animationData2}}"
  15 + 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)}}"
  16 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  17 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  18 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  19 + </view>
  20 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
16 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 21 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
17 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 22 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
18 <view class="reservationInfo"> 23 <view class="reservationInfo">
@@ -338,29 +343,28 @@ @@ -338,29 +343,28 @@
338 </view> 343 </view>
339 </my-modal> 344 </my-modal>
340 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 345 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
341 - <view slot="modalName" class="titleModal">  
342 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
343 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
344 - <view class="couponTotal" wx:if="{{totalPrice}}">  
345 - 赠送给您  
346 - <scroll-number value="{{totalPrice}}"></scroll-number>  
347 - <text class="counterText1">元</text>代金券  
348 - </view> 346 + <view slot="modalName">
  347 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
349 </view> 348 </view>
350 <view slot="modalContent"> 349 <view slot="modalContent">
351 - <!-- <view class="couponBox">  
352 - <view wx:for="{{couponArr}}" class="couponItems">  
353 - <view class="couponNum font20r">×{{item.number}}</view>  
354 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
355 - <view class="couponLines"></view>  
356 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
357 - <view class="font28r couponCondition" wx:else>无门槛</view> 350 + <view class="titleModal">
  351 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  352 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  353 + 赠送给您代金券
  354 + <view class="counterText">
  355 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  356 + </view>
358 </view> 357 </view>
359 - </view> -->  
360 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
361 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
362 - <view class="couponBtn font36r">我知道了</view>  
363 - </subscribe>  
364 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 358 + </view>
  359 + <view class="couponWrap">
  360 + <view class="couponInfo font48r">
  361 + <text class="font48r">到店微信扫码</text>
  362 + <text class="font48r">自动识别</text>
  363 + </view>
  364 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  365 + <view class="couponBtn font28r">我知道了</view>
  366 + </subscribe>
  367 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  368 + </view>
365 </view> 369 </view>
366 </my-modal> 370 </my-modal>
@@ -751,12 +751,17 @@ @@ -751,12 +751,17 @@
751 } 751 }
752 752
753 .giftImg{ 753 .giftImg{
754 - width: 108rpx;  
755 - height: 108rpx; 754 + width: 108rpx;
  755 + height: 116rpx;
756 position: fixed !important; 756 position: fixed !important;
757 - right: 5%;  
758 - top: 33%;  
759 - z-index: 200; 757 + right: 4%;
  758 + top: 28%;
  759 + z-index: 200;
  760 + transform-origin: 50% 100%;
  761 +}
  762 +
  763 +.giftImg1 {
  764 + transform: scale(0);
760 } 765 }
761 766
762 #payModal { 767 #payModal {
@@ -766,7 +771,6 @@ @@ -766,7 +771,6 @@
766 771
767 .titleModal { 772 .titleModal {
768 width: 100%; 773 width: 100%;
769 - margin-top: 48rpx;  
770 color: #000; 774 color: #000;
771 font-family: PingFang SC; 775 font-family: PingFang SC;
772 font-weight: 500; 776 font-weight: 500;
@@ -833,21 +837,29 @@ @@ -833,21 +837,29 @@
833 } 837 }
834 838
835 #couponModal .titleModal { 839 #couponModal .titleModal {
836 - margin-top: 60%;  
837 position: relative; 840 position: relative;
838 - width: 100%; 841 + width: 544rpx;
  842 + background: #F14033;
  843 + border-top-left-radius: 20rpx;
  844 + border-top-right-radius: 20rpx;
  845 + margin: 94% auto 0;
839 } 846 }
840 847
841 -#couponModal .titleModal2 {  
842 - margin-top: 80%; 848 +#couponModal .couponWrap {
  849 + position: relative;
  850 + width: 544rpx;
  851 + margin: 0 auto;
  852 + background: #F14033;
  853 + border-bottom-left-radius: 20rpx;
  854 + border-bottom-right-radius: 20rpx;
843 } 855 }
844 856
845 -#couponModal .titleModal3 {  
846 - margin-top: 60%; 857 +#couponModal .mymodal-title {
  858 + padding: 0 80rpx;
847 } 859 }
848 860
849 -#couponModal .titleModal4 {  
850 - margin-top: 30%; 861 +#couponModal .mymodal-content {
  862 + padding: 0 80rpx 40rpx 80rpx;
851 } 863 }
852 864
853 #couponModal .mymodal { 865 #couponModal .mymodal {
@@ -860,39 +872,41 @@ @@ -860,39 +872,41 @@
860 872
861 .nameInfo { 873 .nameInfo {
862 font-family: PingFang SC; 874 font-family: PingFang SC;
863 - font-weight: 400;  
864 - font-size: 52rpx;  
865 - line-height: 56rpx; 875 + font-weight: 500;
  876 + line-height: 38rpx;
866 color: #fff; 877 color: #fff;
867 - margin-bottom: 40rpx;  
868 - padding-top: 60rpx; 878 + margin-bottom: 28rpx;
869 text-align: center; 879 text-align: center;
  880 + padding: 44rpx 30rpx 0 30rpx;
870 } 881 }
871 882
872 .couponTotal { 883 .couponTotal {
873 - color: #dfdfdf; 884 + color: #fff;
874 font-family: PingFang SC; 885 font-family: PingFang SC;
875 - font-weight: 400;  
876 - font-size: 40rpx; 886 + font-weight: 500;
877 line-height: 48rpx; 887 line-height: 48rpx;
878 - margin-bottom: 40rpx;  
879 - display: flex;  
880 - align-items: center;  
881 - justify-content: center;  
882 - margin: 20% 0 10% 0; 888 + padding-bottom: 16rpx;
883 } 889 }
884 890
885 .counterText { 891 .counterText {
886 color: #ffc806; 892 color: #ffc806;
887 font-weight: 600; 893 font-weight: 600;
888 - font-size: 80rpx;  
889 - margin-right: 14rpx; 894 + display: flex;
  895 + font-size: 100rpx;
  896 + align-items: flex-end;
  897 + justify-content: center;
  898 + margin: 16rpx 0;
890 } 899 }
891 900
892 .couponInfo { 901 .couponInfo {
893 - color: #DFDFDF; 902 + color: #fff;
894 text-align: center; 903 text-align: center;
895 - margin-bottom: 40rpx; 904 + margin-bottom: 20rpx;
  905 + font-weight: 600;
  906 + display: flex;
  907 + flex-direction: column;
  908 + align-items: center;
  909 + line-height: 78rpx;
896 } 910 }
897 911
898 .couponBox { 912 .couponBox {
@@ -956,28 +970,59 @@ @@ -956,28 +970,59 @@
956 .couponBtn { 970 .couponBtn {
957 width: 80%; 971 width: 80%;
958 margin: 0 auto; 972 margin: 0 auto;
959 - border-radius: 42rpx;  
960 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
961 - font-weight: 400;  
962 - color: #fff; 973 + background: #fff;
  974 + font-weight: 600;
963 text-align: center; 975 text-align: center;
964 - border: 4rpx solid #fff;  
965 padding: 12rpx 0; 976 padding: 12rpx 0;
966 margin: 16rpx auto 20rpx auto; 977 margin: 16rpx auto 20rpx auto;
  978 + color: #F14033;
  979 + border-radius: 8rpx;
967 } 980 }
968 981
969 .couponText { 982 .couponText {
970 color: #fff; 983 color: #fff;
971 text-decoration: underline; 984 text-decoration: underline;
972 text-align: center; 985 text-align: center;
  986 + padding-bottom: 44rpx;
  987 + font-weight: 600;
  988 + letter-spacing:2rpx;
973 } 989 }
974 990
975 .closeImg { 991 .closeImg {
976 width: 60rpx; 992 width: 60rpx;
977 height: 60rpx; 993 height: 60rpx;
978 - position: absolute;  
979 - right: 5%;  
980 - top: -10%; 994 + position: fixed;
  995 + left: 46%;
  996 + bottom: 24%;
  997 +}
  998 +
  999 +/* 全屏遮罩层初始样式 */
  1000 +.fullscreenMask {
  1001 + position: fixed;
  1002 + top: 35%;
  1003 + margin: 0 auto;
  1004 + height: 580rpx;
  1005 + z-index: 100;
  1006 + color: #fff;
  1007 + display: flex;
  1008 + align-items: center;
  1009 + justify-content: center;
  1010 + border-radius: 50%;
  1011 + width: 100%;
  1012 +}
  1013 +
  1014 +.fullscreenMask image{
  1015 + width: 544rpx;
  1016 + height: 600rpx;
  1017 +}
  1018 +
  1019 +/* 目标点（右上角的商家有礼位置） */
  1020 +.targetPoint {
  1021 + position: fixed;
  1022 + width: 108rpx;
  1023 + height: 116rpx;
  1024 + background: transparent;
  1025 + z-index: 100;
981 } 1026 }
982 1027
983 /* 深中国红 */ 1028 /* 深中国红 */
@@ -70,6 +70,10 @@ Page({ @@ -70,6 +70,10 @@ Page({
70 isShareItem:'',//转发客人按钮 70 isShareItem:'',//转发客人按钮
71 couponArr: [],//待领取的优惠券列表 71 couponArr: [],//待领取的优惠券列表
72 couponList:[],//优惠券列表 72 couponList:[],//优惠券列表
  73 + animationData: {},
  74 + animationData2:{},
  75 + isShow:'0',
  76 + isFrame:'0'
73 }, 77 },
74 screenHeight: '', 78 screenHeight: '',
75 attentionAnim: {}, 79 attentionAnim: {},
@@ -120,6 +124,12 @@ Page({ @@ -120,6 +124,12 @@ Page({
120 closeCouponModal() { 124 closeCouponModal() {
121 this.getActivityByIdFun(this.data.couponList,'1') 125 this.getActivityByIdFun(this.data.couponList,'1')
122 this.couponModal.closeModal() 126 this.couponModal.closeModal()
  127 + this.setData({
  128 + isShow: '1',
  129 + })
  130 + setTimeout(() => {
  131 + this.startAnimation();
  132 + }, 800);
123 }, 133 },
124 // 页面滚动事件 134 // 页面滚动事件
125 onPageScroll: function (event) { 135 onPageScroll: function (event) {
@@ -995,6 +1005,12 @@ Page({ @@ -995,6 +1005,12 @@ Page({
995 // 免费券判断是否领取，弹框领取 1005 // 免费券判断是否领取，弹框领取
996 if (freeCoupons.length > 0 && couponShow) { 1006 if (freeCoupons.length > 0 && couponShow) {
997 this.getCoupon(freeCoupons,obj,setcoupon) 1007 this.getCoupon(freeCoupons,obj,setcoupon)
  1008 + } else {
  1009 + if(setcoupon!='1'){
  1010 + this.setData({
  1011 + isFrame:'1',
  1012 + })
  1013 + }
998 } 1014 }
999 console.log('邀请函--------------------优惠券', list); 1015 console.log('邀请函--------------------优惠券', list);
1000 this.setData({ 1016 this.setData({
@@ -1103,6 +1119,18 @@ Page({ @@ -1103,6 +1119,18 @@ Page({
1103 }) 1119 })
1104 this.couponModal.showModal() 1120 this.couponModal.showModal()
1105 }, 3000); 1121 }, 3000);
  1122 + }else {
  1123 + if(setcoupon!='1'){
  1124 + this.setData({
  1125 + isFrame:'1',
  1126 + })
  1127 + }
  1128 + }
  1129 + }else {
  1130 + if(setcoupon!='1'){
  1131 + this.setData({
  1132 + isFrame:'1',
  1133 + })
1106 } 1134 }
1107 } 1135 }
1108 list.forEach(item=>{ 1136 list.forEach(item=>{
@@ -1266,6 +1294,39 @@ Page({ @@ -1266,6 +1294,39 @@ Page({
1266 } 1294 }
1267 return new Date(data || new Date()) 1295 return new Date(data || new Date())
1268 }, 1296 },
  1297 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1298 + startAnimation() {
  1299 + const animation = wx.createAnimation({
  1300 + duration: 800,
  1301 + timingFunction: 'ease',
  1302 + });
  1303 + animation.translateY('-60%')
  1304 + .translateX('34%')
  1305 + .scale(0)
  1306 + .step();
  1307 + this.setData({
  1308 + animationData: animation.export(),
  1309 + });
  1310 + setTimeout(() => {
  1311 + this.startSecondAnimation();
  1312 + }, 800);
  1313 + },
  1314 + // 出现商家有礼图标，并且晃动2下
  1315 + startSecondAnimation() {
  1316 + const animation = wx.createAnimation({
  1317 + duration: 200,
  1318 + timingFunction: 'ease'
  1319 + });
  1320 + animation.scale(1).step()
  1321 + .rotate(-15).step()
  1322 + .rotate(15).step()
  1323 + .rotate(-15).step()
  1324 + .rotate(15).step()
  1325 + .rotate(0).step();
  1326 + this.setData({
  1327 + animationData2: animation.export()
  1328 + });
  1329 + },
1269 //根据起始时间（获取时间时间段） 1330 //根据起始时间（获取时间时间段）
1270 computeHour (time1, time2, interval) { 1331 computeHour (time1, time2, interval) {
1271 //time1 开始时间 time2结束时间 interval间隔时长 1332 //time1 开始时间 time2结束时间 interval间隔时长
@@ -9,11 +9,16 @@ @@ -9,11 +9,16 @@
9 bindtap="stopMusic" 9 bindtap="stopMusic"
10 animation="{{attentionAnim}}" 10 animation="{{attentionAnim}}"
11 /> 11 />
12 - <image class="giftImg" 12 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
13 bindtap="gotoSellerGift" 13 bindtap="gotoSellerGift"
14 data-form="1" 14 data-form="1"
15 - 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)}}"  
16 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 15 + animation="{{animationData2}}"
  16 + 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)}}"
  17 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  18 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  19 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  20 + </view>
  21 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
17 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 22 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
18 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 23 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
19 <view class="titleImg"> 24 <view class="titleImg">
@@ -326,29 +331,28 @@ @@ -326,29 +331,28 @@
326 </view> 331 </view>
327 </my-modal> 332 </my-modal>
328 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 333 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
329 - <view slot="modalName" class="titleModal">  
330 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
331 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
332 - <view class="couponTotal" wx:if="{{totalPrice}}">  
333 - 赠送给您  
334 - <scroll-number value="{{totalPrice}}"></scroll-number>  
335 - <text class="counterText1">元</text>代金券  
336 - </view> 334 + <view slot="modalName">
  335 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
337 </view> 336 </view>
338 <view slot="modalContent"> 337 <view slot="modalContent">
339 - <!-- <view class="couponBox">  
340 - <view wx:for="{{couponArr}}" class="couponItems">  
341 - <view class="couponNum font20r">×{{item.number}}</view>  
342 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
343 - <view class="couponLines"></view>  
344 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
345 - <view class="font28r couponCondition" wx:else>无门槛</view> 338 + <view class="titleModal">
  339 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  340 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  341 + 赠送给您代金券
  342 + <view class="counterText">
  343 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  344 + </view>
346 </view> 345 </view>
347 - </view> -->  
348 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
349 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
350 - <view class="couponBtn font36r">我知道了</view>  
351 - </subscribe>  
352 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 346 + </view>
  347 + <view class="couponWrap">
  348 + <view class="couponInfo font48r">
  349 + <text class="font48r">到店微信扫码</text>
  350 + <text class="font48r">自动识别</text>
  351 + </view>
  352 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  353 + <view class="couponBtn font28r">我知道了</view>
  354 + </subscribe>
  355 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  356 + </view>
353 </view> 357 </view>
354 </my-modal> 358 </my-modal>
@@ -906,12 +906,17 @@ @@ -906,12 +906,17 @@
906 } 906 }
907 907
908 .giftImg{ 908 .giftImg{
909 - width: 108rpx;  
910 - height: 108rpx; 909 + width: 108rpx;
  910 + height: 116rpx;
911 position: fixed !important; 911 position: fixed !important;
912 - right: 5%;  
913 - top: 33%;  
914 - z-index: 200; 912 + right: 4%;
  913 + top: 28%;
  914 + z-index: 200;
  915 + transform-origin: 50% 100%;
  916 +}
  917 +
  918 +.giftImg1 {
  919 + transform: scale(0);
915 } 920 }
916 921
917 #payModal { 922 #payModal {
@@ -921,7 +926,6 @@ @@ -921,7 +926,6 @@
921 926
922 .titleModal { 927 .titleModal {
923 width: 100%; 928 width: 100%;
924 - margin-top: 48rpx;  
925 color: #000; 929 color: #000;
926 font-family: PingFang SC; 930 font-family: PingFang SC;
927 font-weight: 500; 931 font-weight: 500;
@@ -988,21 +992,29 @@ @@ -988,21 +992,29 @@
988 } 992 }
989 993
990 #couponModal .titleModal { 994 #couponModal .titleModal {
991 - margin-top: 60%;  
992 position: relative; 995 position: relative;
993 - width: 100%; 996 + width: 544rpx;
  997 + background: #F14033;
  998 + border-top-left-radius: 20rpx;
  999 + border-top-right-radius: 20rpx;
  1000 + margin: 94% auto 0;
994 } 1001 }
995 1002
996 -#couponModal .titleModal2 {  
997 - margin-top: 80%; 1003 +#couponModal .couponWrap {
  1004 + position: relative;
  1005 + width: 544rpx;
  1006 + margin: 0 auto;
  1007 + background: #F14033;
  1008 + border-bottom-left-radius: 20rpx;
  1009 + border-bottom-right-radius: 20rpx;
998 } 1010 }
999 1011
1000 -#couponModal .titleModal3 {  
1001 - margin-top: 60%; 1012 +#couponModal .mymodal-title {
  1013 + padding: 0 80rpx;
1002 } 1014 }
1003 1015
1004 -#couponModal .titleModal4 {  
1005 - margin-top: 30%; 1016 +#couponModal .mymodal-content {
  1017 + padding: 0 80rpx 40rpx 80rpx;
1006 } 1018 }
1007 1019
1008 #couponModal .mymodal { 1020 #couponModal .mymodal {
@@ -1015,39 +1027,41 @@ @@ -1015,39 +1027,41 @@
1015 1027
1016 .nameInfo { 1028 .nameInfo {
1017 font-family: PingFang SC; 1029 font-family: PingFang SC;
1018 - font-weight: 400;  
1019 - font-size: 52rpx;  
1020 - line-height: 56rpx; 1030 + font-weight: 500;
  1031 + line-height: 38rpx;
1021 color: #fff; 1032 color: #fff;
1022 - margin-bottom: 40rpx;  
1023 - padding-top: 60rpx; 1033 + margin-bottom: 28rpx;
1024 text-align: center; 1034 text-align: center;
  1035 + padding: 44rpx 30rpx 0 30rpx;
1025 } 1036 }
1026 1037
1027 .couponTotal { 1038 .couponTotal {
1028 - color: #dfdfdf; 1039 + color: #fff;
1029 font-family: PingFang SC; 1040 font-family: PingFang SC;
1030 - font-weight: 400;  
1031 - font-size: 40rpx; 1041 + font-weight: 500;
1032 line-height: 48rpx; 1042 line-height: 48rpx;
1033 - margin-bottom: 40rpx;  
1034 - display: flex;  
1035 - align-items: center;  
1036 - justify-content: center;  
1037 - margin: 20% 0 10% 0; 1043 + padding-bottom: 16rpx;
1038 } 1044 }
1039 1045
1040 .counterText { 1046 .counterText {
1041 color: #ffc806; 1047 color: #ffc806;
1042 font-weight: 600; 1048 font-weight: 600;
1043 - font-size: 80rpx;  
1044 - margin-right: 14rpx; 1049 + display: flex;
  1050 + font-size: 100rpx;
  1051 + align-items: flex-end;
  1052 + justify-content: center;
  1053 + margin: 16rpx 0;
1045 } 1054 }
1046 1055
1047 .couponInfo { 1056 .couponInfo {
1048 - color: #DFDFDF; 1057 + color: #fff;
1049 text-align: center; 1058 text-align: center;
1050 - margin-bottom: 40rpx; 1059 + margin-bottom: 20rpx;
  1060 + font-weight: 600;
  1061 + display: flex;
  1062 + flex-direction: column;
  1063 + align-items: center;
  1064 + line-height: 78rpx;
1051 } 1065 }
1052 1066
1053 .couponBox { 1067 .couponBox {
@@ -1111,28 +1125,59 @@ @@ -1111,28 +1125,59 @@
1111 .couponBtn { 1125 .couponBtn {
1112 width: 80%; 1126 width: 80%;
1113 margin: 0 auto; 1127 margin: 0 auto;
1114 - border-radius: 42rpx;  
1115 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
1116 - font-weight: 400;  
1117 - color: #fff; 1128 + background: #fff;
  1129 + font-weight: 600;
1118 text-align: center; 1130 text-align: center;
1119 - border: 4rpx solid #fff;  
1120 padding: 12rpx 0; 1131 padding: 12rpx 0;
1121 margin: 16rpx auto 20rpx auto; 1132 margin: 16rpx auto 20rpx auto;
  1133 + color: #F14033;
  1134 + border-radius: 8rpx;
1122 } 1135 }
1123 1136
1124 .couponText { 1137 .couponText {
1125 color: #fff; 1138 color: #fff;
1126 text-decoration: underline; 1139 text-decoration: underline;
1127 text-align: center; 1140 text-align: center;
  1141 + padding-bottom: 44rpx;
  1142 + font-weight: 600;
  1143 + letter-spacing:2rpx;
1128 } 1144 }
1129 1145
1130 .closeImg { 1146 .closeImg {
1131 width: 60rpx; 1147 width: 60rpx;
1132 height: 60rpx; 1148 height: 60rpx;
1133 - position: absolute;  
1134 - right: 5%;  
1135 - top: -10%; 1149 + position: fixed;
  1150 + left: 46%;
  1151 + bottom: 24%;
  1152 +}
  1153 +
  1154 +/* 全屏遮罩层初始样式 */
  1155 +.fullscreenMask {
  1156 + position: fixed;
  1157 + top: 35%;
  1158 + margin: 0 auto;
  1159 + height: 580rpx;
  1160 + z-index: 100;
  1161 + color: #fff;
  1162 + display: flex;
  1163 + align-items: center;
  1164 + justify-content: center;
  1165 + border-radius: 50%;
  1166 + width: 100%;
  1167 +}
  1168 +
  1169 +.fullscreenMask image{
  1170 + width: 544rpx;
  1171 + height: 600rpx;
  1172 +}
  1173 +
  1174 +/* 目标点（右上角的商家有礼位置） */
  1175 +.targetPoint {
  1176 + position: fixed;
  1177 + width: 108rpx;
  1178 + height: 116rpx;
  1179 + background: transparent;
  1180 + z-index: 100;
1136 } 1181 }
1137 1182
1138 .arrivalBox{ 1183 .arrivalBox{
@@ -69,6 +69,10 @@ Page({ @@ -69,6 +69,10 @@ Page({
69 isShareItem:'',//转发客人按钮 69 isShareItem:'',//转发客人按钮
70 couponArr: [],//待领取的优惠券列表 70 couponArr: [],//待领取的优惠券列表
71 couponList:[],//优惠券列表 71 couponList:[],//优惠券列表
  72 + animationData: {},
  73 + animationData2:{},
  74 + isShow:'0',
  75 + isFrame:'0'
72 }, 76 },
73 tablestr: '', 77 tablestr: '',
74 urlsValue: [], 78 urlsValue: [],
@@ -121,6 +125,12 @@ Page({ @@ -121,6 +125,12 @@ Page({
121 closeCouponModal() { 125 closeCouponModal() {
122 this.getActivityByIdFun(this.data.couponList,'1') 126 this.getActivityByIdFun(this.data.couponList,'1')
123 this.couponModal.closeModal() 127 this.couponModal.closeModal()
  128 + this.setData({
  129 + isShow: '1',
  130 + })
  131 + setTimeout(() => {
  132 + this.startAnimation();
  133 + }, 800);
124 }, 134 },
125 // 页面滚动事件 135 // 页面滚动事件
126 onPageScroll: function (event) { 136 onPageScroll: function (event) {
@@ -1038,6 +1048,12 @@ Page({ @@ -1038,6 +1048,12 @@ Page({
1038 // 免费券判断是否领取，弹框领取 1048 // 免费券判断是否领取，弹框领取
1039 if (freeCoupons.length > 0 && couponShow) { 1049 if (freeCoupons.length > 0 && couponShow) {
1040 this.getCoupon(freeCoupons,obj,setcoupon) 1050 this.getCoupon(freeCoupons,obj,setcoupon)
  1051 + } else {
  1052 + if(setcoupon!='1'){
  1053 + this.setData({
  1054 + isFrame:'1',
  1055 + })
  1056 + }
1041 } 1057 }
1042 console.log('邀请函--------------------优惠券', list); 1058 console.log('邀请函--------------------优惠券', list);
1043 this.setData({ 1059 this.setData({
@@ -1146,6 +1162,18 @@ Page({ @@ -1146,6 +1162,18 @@ Page({
1146 }) 1162 })
1147 this.couponModal.showModal() 1163 this.couponModal.showModal()
1148 }, 3000); 1164 }, 3000);
  1165 + }else {
  1166 + if(setcoupon!='1'){
  1167 + this.setData({
  1168 + isFrame:'1',
  1169 + })
  1170 + }
  1171 + }
  1172 + }else {
  1173 + if(setcoupon!='1'){
  1174 + this.setData({
  1175 + isFrame:'1',
  1176 + })
1149 } 1177 }
1150 } 1178 }
1151 list.forEach(item=>{ 1179 list.forEach(item=>{
@@ -1309,6 +1337,39 @@ Page({ @@ -1309,6 +1337,39 @@ Page({
1309 } 1337 }
1310 return new Date(data || new Date()) 1338 return new Date(data || new Date())
1311 }, 1339 },
  1340 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1341 + startAnimation() {
  1342 + const animation = wx.createAnimation({
  1343 + duration: 800,
  1344 + timingFunction: 'ease',
  1345 + });
  1346 + animation.translateY('-60%')
  1347 + .translateX('34%')
  1348 + .scale(0)
  1349 + .step();
  1350 + this.setData({
  1351 + animationData: animation.export(),
  1352 + });
  1353 + setTimeout(() => {
  1354 + this.startSecondAnimation();
  1355 + }, 800);
  1356 + },
  1357 + // 出现商家有礼图标，并且晃动2下
  1358 + startSecondAnimation() {
  1359 + const animation = wx.createAnimation({
  1360 + duration: 200,
  1361 + timingFunction: 'ease'
  1362 + });
  1363 + animation.scale(1).step()
  1364 + .rotate(-15).step()
  1365 + .rotate(15).step()
  1366 + .rotate(-15).step()
  1367 + .rotate(15).step()
  1368 + .rotate(0).step();
  1369 + this.setData({
  1370 + animationData2: animation.export()
  1371 + });
  1372 + },
1312 //根据起始时间（获取时间时间段） 1373 //根据起始时间（获取时间时间段）
1313 computeHour (time1, time2, interval) { 1374 computeHour (time1, time2, interval) {
1314 //time1 开始时间 time2结束时间 interval间隔时长 1375 //time1 开始时间 time2结束时间 interval间隔时长
@@ -9,11 +9,16 @@ @@ -9,11 +9,16 @@
9 bindtap="stopMusic" 9 bindtap="stopMusic"
10 animation="{{attentionAnim}}" 10 animation="{{attentionAnim}}"
11 /> 11 />
12 - <image class="giftImg" 12 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
13 bindtap="gotoSellerGift" 13 bindtap="gotoSellerGift"
14 data-form="1" 14 data-form="1"
15 - 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)}}"  
16 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 15 + animation="{{animationData2}}"
  16 + 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)}}"
  17 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  18 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  19 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  20 + </view>
  21 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
17 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 22 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
18 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 23 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
19 <view class="reservationInfo"> 24 <view class="reservationInfo">
@@ -351,29 +356,28 @@ @@ -351,29 +356,28 @@
351 </view> 356 </view>
352 </my-modal> 357 </my-modal>
353 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 358 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
354 - <view slot="modalName" class="titleModal">  
355 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
356 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
357 - <view class="couponTotal" wx:if="{{totalPrice}}">  
358 - 赠送给您  
359 - <scroll-number value="{{totalPrice}}"></scroll-number>  
360 - <text class="counterText1">元</text>代金券  
361 - </view> 359 + <view slot="modalName">
  360 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
362 </view> 361 </view>
363 <view slot="modalContent"> 362 <view slot="modalContent">
364 - <!-- <view class="couponBox">  
365 - <view wx:for="{{couponArr}}" class="couponItems">  
366 - <view class="couponNum font20r">×{{item.number}}</view>  
367 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
368 - <view class="couponLines"></view>  
369 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
370 - <view class="font28r couponCondition" wx:else>无门槛</view> 363 + <view class="titleModal">
  364 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  365 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  366 + 赠送给您代金券
  367 + <view class="counterText">
  368 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  369 + </view>
371 </view> 370 </view>
372 - </view> -->  
373 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
374 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
375 - <view class="couponBtn font36r">我知道了</view>  
376 - </subscribe>  
377 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 371 + </view>
  372 + <view class="couponWrap">
  373 + <view class="couponInfo font48r">
  374 + <text class="font48r">到店微信扫码</text>
  375 + <text class="font48r">自动识别</text>
  376 + </view>
  377 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  378 + <view class="couponBtn font28r">我知道了</view>
  379 + </subscribe>
  380 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  381 + </view>
378 </view> 382 </view>
379 </my-modal> 383 </my-modal>
@@ -755,12 +755,17 @@ @@ -755,12 +755,17 @@
755 } 755 }
756 756
757 .giftImg{ 757 .giftImg{
758 - width: 108rpx;  
759 - height: 108rpx; 758 + width: 108rpx;
  759 + height: 116rpx;
760 position: fixed !important; 760 position: fixed !important;
761 - right: 5%;  
762 - top: 33%;  
763 - z-index: 200; 761 + right: 4%;
  762 + top: 28%;
  763 + z-index: 200;
  764 + transform-origin: 50% 100%;
  765 +}
  766 +
  767 +.giftImg1 {
  768 + transform: scale(0);
764 } 769 }
765 770
766 #payModal { 771 #payModal {
@@ -770,7 +775,6 @@ @@ -770,7 +775,6 @@
770 775
771 .titleModal { 776 .titleModal {
772 width: 100%; 777 width: 100%;
773 - margin-top: 48rpx;  
774 color: #000; 778 color: #000;
775 font-family: PingFang SC; 779 font-family: PingFang SC;
776 font-weight: 500; 780 font-weight: 500;
@@ -837,21 +841,29 @@ @@ -837,21 +841,29 @@
837 } 841 }
838 842
839 #couponModal .titleModal { 843 #couponModal .titleModal {
840 - margin-top: 60%;  
841 position: relative; 844 position: relative;
842 - width: 100%; 845 + width: 544rpx;
  846 + background: #F14033;
  847 + border-top-left-radius: 20rpx;
  848 + border-top-right-radius: 20rpx;
  849 + margin: 94% auto 0;
843 } 850 }
844 851
845 -#couponModal .titleModal2 {  
846 - margin-top: 80%; 852 +#couponModal .couponWrap {
  853 + position: relative;
  854 + width: 544rpx;
  855 + margin: 0 auto;
  856 + background: #F14033;
  857 + border-bottom-left-radius: 20rpx;
  858 + border-bottom-right-radius: 20rpx;
847 } 859 }
848 860
849 -#couponModal .titleModal3 {  
850 - margin-top: 60%; 861 +#couponModal .mymodal-title {
  862 + padding: 0 80rpx;
851 } 863 }
852 864
853 -#couponModal .titleModal4 {  
854 - margin-top: 30%; 865 +#couponModal .mymodal-content {
  866 + padding: 0 80rpx 40rpx 80rpx;
855 } 867 }
856 868
857 #couponModal .mymodal { 869 #couponModal .mymodal {
@@ -864,39 +876,41 @@ @@ -864,39 +876,41 @@
864 876
865 .nameInfo { 877 .nameInfo {
866 font-family: PingFang SC; 878 font-family: PingFang SC;
867 - font-weight: 400;  
868 - font-size: 52rpx;  
869 - line-height: 56rpx; 879 + font-weight: 500;
  880 + line-height: 38rpx;
870 color: #fff; 881 color: #fff;
871 - margin-bottom: 40rpx;  
872 - padding-top: 60rpx; 882 + margin-bottom: 28rpx;
873 text-align: center; 883 text-align: center;
  884 + padding: 44rpx 30rpx 0 30rpx;
874 } 885 }
875 886
876 .couponTotal { 887 .couponTotal {
877 - color: #dfdfdf; 888 + color: #fff;
878 font-family: PingFang SC; 889 font-family: PingFang SC;
879 - font-weight: 400;  
880 - font-size: 40rpx; 890 + font-weight: 500;
881 line-height: 48rpx; 891 line-height: 48rpx;
882 - margin-bottom: 40rpx;  
883 - display: flex;  
884 - align-items: center;  
885 - justify-content: center;  
886 - margin: 20% 0 10% 0; 892 + padding-bottom: 16rpx;
887 } 893 }
888 894
889 .counterText { 895 .counterText {
890 color: #ffc806; 896 color: #ffc806;
891 font-weight: 600; 897 font-weight: 600;
892 - font-size: 80rpx;  
893 - margin-right: 14rpx; 898 + display: flex;
  899 + font-size: 100rpx;
  900 + align-items: flex-end;
  901 + justify-content: center;
  902 + margin: 16rpx 0;
894 } 903 }
895 904
896 .couponInfo { 905 .couponInfo {
897 - color: #DFDFDF; 906 + color: #fff;
898 text-align: center; 907 text-align: center;
899 - margin-bottom: 40rpx; 908 + margin-bottom: 20rpx;
  909 + font-weight: 600;
  910 + display: flex;
  911 + flex-direction: column;
  912 + align-items: center;
  913 + line-height: 78rpx;
900 } 914 }
901 915
902 .couponBox { 916 .couponBox {
@@ -960,28 +974,59 @@ @@ -960,28 +974,59 @@
960 .couponBtn { 974 .couponBtn {
961 width: 80%; 975 width: 80%;
962 margin: 0 auto; 976 margin: 0 auto;
963 - border-radius: 42rpx;  
964 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
965 - font-weight: 400;  
966 - color: #fff; 977 + background: #fff;
  978 + font-weight: 600;
967 text-align: center; 979 text-align: center;
968 - border: 4rpx solid #fff;  
969 padding: 12rpx 0; 980 padding: 12rpx 0;
970 margin: 16rpx auto 20rpx auto; 981 margin: 16rpx auto 20rpx auto;
  982 + color: #F14033;
  983 + border-radius: 8rpx;
971 } 984 }
972 985
973 .couponText { 986 .couponText {
974 color: #fff; 987 color: #fff;
975 text-decoration: underline; 988 text-decoration: underline;
976 text-align: center; 989 text-align: center;
  990 + padding-bottom: 44rpx;
  991 + font-weight: 600;
  992 + letter-spacing:2rpx;
977 } 993 }
978 994
979 .closeImg { 995 .closeImg {
980 width: 60rpx; 996 width: 60rpx;
981 height: 60rpx; 997 height: 60rpx;
982 - position: absolute;  
983 - right: 5%;  
984 - top: -10%; 998 + position: fixed;
  999 + left: 46%;
  1000 + bottom: 24%;
  1001 +}
  1002 +
  1003 +/* 全屏遮罩层初始样式 */
  1004 +.fullscreenMask {
  1005 + position: fixed;
  1006 + top: 35%;
  1007 + margin: 0 auto;
  1008 + height: 580rpx;
  1009 + z-index: 100;
  1010 + color: #fff;
  1011 + display: flex;
  1012 + align-items: center;
  1013 + justify-content: center;
  1014 + border-radius: 50%;
  1015 + width: 100%;
  1016 +}
  1017 +
  1018 +.fullscreenMask image{
  1019 + width: 544rpx;
  1020 + height: 600rpx;
  1021 +}
  1022 +
  1023 +/* 目标点（右上角的商家有礼位置） */
  1024 +.targetPoint {
  1025 + position: fixed;
  1026 + width: 108rpx;
  1027 + height: 116rpx;
  1028 + background: transparent;
  1029 + z-index: 100;
985 } 1030 }
986 1031
987 /* 深中国红 */ 1032 /* 深中国红 */
@@ -69,6 +69,10 @@ Page({ @@ -69,6 +69,10 @@ Page({
69 isShareItem:'',//转发客人按钮 69 isShareItem:'',//转发客人按钮
70 couponArr: [],//待领取的优惠券列表 70 couponArr: [],//待领取的优惠券列表
71 couponList:[],//优惠券列表 71 couponList:[],//优惠券列表
  72 + animationData: {},
  73 + animationData2:{},
  74 + isShow:'0',
  75 + isFrame:'0'
72 }, 76 },
73 tablestr: '', 77 tablestr: '',
74 urlsValue: [], 78 urlsValue: [],
@@ -121,6 +125,12 @@ Page({ @@ -121,6 +125,12 @@ Page({
121 closeCouponModal() { 125 closeCouponModal() {
122 this.getActivityByIdFun(this.data.couponList,'1') 126 this.getActivityByIdFun(this.data.couponList,'1')
123 this.couponModal.closeModal() 127 this.couponModal.closeModal()
  128 + this.setData({
  129 + isShow: '1',
  130 + })
  131 + setTimeout(() => {
  132 + this.startAnimation();
  133 + }, 800);
124 }, 134 },
125 // 页面滚动事件 135 // 页面滚动事件
126 onPageScroll: function (event) { 136 onPageScroll: function (event) {
@@ -1037,6 +1047,12 @@ Page({ @@ -1037,6 +1047,12 @@ Page({
1037 // 免费券判断是否领取，弹框领取 1047 // 免费券判断是否领取，弹框领取
1038 if (freeCoupons.length > 0 && couponShow) { 1048 if (freeCoupons.length > 0 && couponShow) {
1039 this.getCoupon(freeCoupons,obj,setcoupon) 1049 this.getCoupon(freeCoupons,obj,setcoupon)
  1050 + } else {
  1051 + if(setcoupon!='1'){
  1052 + this.setData({
  1053 + isFrame:'1',
  1054 + })
  1055 + }
1040 } 1056 }
1041 console.log('邀请函--------------------优惠券', list); 1057 console.log('邀请函--------------------优惠券', list);
1042 this.setData({ 1058 this.setData({
@@ -1145,6 +1161,18 @@ Page({ @@ -1145,6 +1161,18 @@ Page({
1145 }) 1161 })
1146 this.couponModal.showModal() 1162 this.couponModal.showModal()
1147 }, 3000); 1163 }, 3000);
  1164 + }else {
  1165 + if(setcoupon!='1'){
  1166 + this.setData({
  1167 + isFrame:'1',
  1168 + })
  1169 + }
  1170 + }
  1171 + }else {
  1172 + if(setcoupon!='1'){
  1173 + this.setData({
  1174 + isFrame:'1',
  1175 + })
1148 } 1176 }
1149 } 1177 }
1150 list.forEach(item=>{ 1178 list.forEach(item=>{
@@ -1308,6 +1336,39 @@ Page({ @@ -1308,6 +1336,39 @@ Page({
1308 } 1336 }
1309 return new Date(data || new Date()) 1337 return new Date(data || new Date())
1310 }, 1338 },
  1339 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1340 + startAnimation() {
  1341 + const animation = wx.createAnimation({
  1342 + duration: 800,
  1343 + timingFunction: 'ease',
  1344 + });
  1345 + animation.translateY('-60%')
  1346 + .translateX('34%')
  1347 + .scale(0)
  1348 + .step();
  1349 + this.setData({
  1350 + animationData: animation.export(),
  1351 + });
  1352 + setTimeout(() => {
  1353 + this.startSecondAnimation();
  1354 + }, 800);
  1355 + },
  1356 + // 出现商家有礼图标，并且晃动2下
  1357 + startSecondAnimation() {
  1358 + const animation = wx.createAnimation({
  1359 + duration: 200,
  1360 + timingFunction: 'ease'
  1361 + });
  1362 + animation.scale(1).step()
  1363 + .rotate(-15).step()
  1364 + .rotate(15).step()
  1365 + .rotate(-15).step()
  1366 + .rotate(15).step()
  1367 + .rotate(0).step();
  1368 + this.setData({
  1369 + animationData2: animation.export()
  1370 + });
  1371 + },
1311 //根据起始时间（获取时间时间段） 1372 //根据起始时间（获取时间时间段）
1312 computeHour (time1, time2, interval) { 1373 computeHour (time1, time2, interval) {
1313 //time1 开始时间 time2结束时间 interval间隔时长 1374 //time1 开始时间 time2结束时间 interval间隔时长
@@ -9,11 +9,16 @@ @@ -9,11 +9,16 @@
9 bindtap="stopMusic" 9 bindtap="stopMusic"
10 animation="{{attentionAnim}}" 10 animation="{{attentionAnim}}"
11 /> 11 />
12 - <image class="giftImg" 12 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
13 bindtap="gotoSellerGift" 13 bindtap="gotoSellerGift"
14 data-form="1" 14 data-form="1"
15 - 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)}}"  
16 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 15 + animation="{{animationData2}}"
  16 + 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)}}"
  17 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  18 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  19 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  20 + </view>
  21 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
17 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 22 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
18 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 23 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
19 <view class="reservationInfo"> 24 <view class="reservationInfo">
@@ -350,29 +355,28 @@ @@ -350,29 +355,28 @@
350 </my-modal> 355 </my-modal>
351 356
352 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 357 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
353 - <view slot="modalName" class="titleModal">  
354 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
355 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
356 - <view class="couponTotal" wx:if="{{totalPrice}}">  
357 - 赠送给您  
358 - <scroll-number value="{{totalPrice}}"></scroll-number>  
359 - <text class="counterText1">元</text>代金券  
360 - </view> 358 + <view slot="modalName">
  359 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
361 </view> 360 </view>
362 <view slot="modalContent"> 361 <view slot="modalContent">
363 - <!-- <view class="couponBox">  
364 - <view wx:for="{{couponArr}}" class="couponItems">  
365 - <view class="couponNum font20r">×{{item.number}}</view>  
366 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
367 - <view class="couponLines"></view>  
368 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
369 - <view class="font28r couponCondition" wx:else>无门槛</view> 362 + <view class="titleModal">
  363 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  364 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  365 + 赠送给您代金券
  366 + <view class="counterText">
  367 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  368 + </view>
370 </view> 369 </view>
371 - </view> -->  
372 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
373 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
374 - <view class="couponBtn font36r">我知道了</view>  
375 - </subscribe>  
376 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 370 + </view>
  371 + <view class="couponWrap">
  372 + <view class="couponInfo font48r">
  373 + <text class="font48r">到店微信扫码</text>
  374 + <text class="font48r">自动识别</text>
  375 + </view>
  376 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  377 + <view class="couponBtn font28r">我知道了</view>
  378 + </subscribe>
  379 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  380 + </view>
377 </view> 381 </view>
378 </my-modal> 382 </my-modal>
@@ -755,12 +755,17 @@ @@ -755,12 +755,17 @@
755 } 755 }
756 756
757 .giftImg{ 757 .giftImg{
758 - width: 108rpx;  
759 - height: 108rpx; 758 + width: 108rpx;
  759 + height: 116rpx;
760 position: fixed !important; 760 position: fixed !important;
761 - right: 5%;  
762 - top: 33%;  
763 - z-index: 200; 761 + right: 4%;
  762 + top: 28%;
  763 + z-index: 200;
  764 + transform-origin: 50% 100%;
  765 +}
  766 +
  767 +.giftImg1 {
  768 + transform: scale(0);
764 } 769 }
765 770
766 #payModal { 771 #payModal {
@@ -770,7 +775,6 @@ @@ -770,7 +775,6 @@
770 775
771 .titleModal { 776 .titleModal {
772 width: 100%; 777 width: 100%;
773 - margin-top: 48rpx;  
774 color: #000; 778 color: #000;
775 font-family: PingFang SC; 779 font-family: PingFang SC;
776 font-weight: 500; 780 font-weight: 500;
@@ -837,21 +841,29 @@ @@ -837,21 +841,29 @@
837 } 841 }
838 842
839 #couponModal .titleModal { 843 #couponModal .titleModal {
840 - margin-top: 60%;  
841 position: relative; 844 position: relative;
842 - width: 100%; 845 + width: 544rpx;
  846 + background: #F14033;
  847 + border-top-left-radius: 20rpx;
  848 + border-top-right-radius: 20rpx;
  849 + margin: 94% auto 0;
843 } 850 }
844 851
845 -#couponModal .titleModal2 {  
846 - margin-top: 80%; 852 +#couponModal .couponWrap {
  853 + position: relative;
  854 + width: 544rpx;
  855 + margin: 0 auto;
  856 + background: #F14033;
  857 + border-bottom-left-radius: 20rpx;
  858 + border-bottom-right-radius: 20rpx;
847 } 859 }
848 860
849 -#couponModal .titleModal3 {  
850 - margin-top: 60%; 861 +#couponModal .mymodal-title {
  862 + padding: 0 80rpx;
851 } 863 }
852 864
853 -#couponModal .titleModal4 {  
854 - margin-top: 30%; 865 +#couponModal .mymodal-content {
  866 + padding: 0 80rpx 40rpx 80rpx;
855 } 867 }
856 868
857 #couponModal .mymodal { 869 #couponModal .mymodal {
@@ -864,39 +876,41 @@ @@ -864,39 +876,41 @@
864 876
865 .nameInfo { 877 .nameInfo {
866 font-family: PingFang SC; 878 font-family: PingFang SC;
867 - font-weight: 400;  
868 - font-size: 52rpx;  
869 - line-height: 56rpx; 879 + font-weight: 500;
  880 + line-height: 38rpx;
870 color: #fff; 881 color: #fff;
871 - margin-bottom: 40rpx;  
872 - padding-top: 60rpx; 882 + margin-bottom: 28rpx;
873 text-align: center; 883 text-align: center;
  884 + padding: 44rpx 30rpx 0 30rpx;
874 } 885 }
875 886
876 .couponTotal { 887 .couponTotal {
877 - color: #dfdfdf; 888 + color: #fff;
878 font-family: PingFang SC; 889 font-family: PingFang SC;
879 - font-weight: 400;  
880 - font-size: 40rpx; 890 + font-weight: 500;
881 line-height: 48rpx; 891 line-height: 48rpx;
882 - margin-bottom: 40rpx;  
883 - display: flex;  
884 - align-items: center;  
885 - justify-content: center;  
886 - margin: 20% 0 10% 0; 892 + padding-bottom: 16rpx;
887 } 893 }
888 894
889 .counterText { 895 .counterText {
890 color: #ffc806; 896 color: #ffc806;
891 font-weight: 600; 897 font-weight: 600;
892 - font-size: 80rpx;  
893 - margin-right: 14rpx; 898 + display: flex;
  899 + font-size: 100rpx;
  900 + align-items: flex-end;
  901 + justify-content: center;
  902 + margin: 16rpx 0;
894 } 903 }
895 904
896 .couponInfo { 905 .couponInfo {
897 - color: #DFDFDF; 906 + color: #fff;
898 text-align: center; 907 text-align: center;
899 - margin-bottom: 40rpx; 908 + margin-bottom: 20rpx;
  909 + font-weight: 600;
  910 + display: flex;
  911 + flex-direction: column;
  912 + align-items: center;
  913 + line-height: 78rpx;
900 } 914 }
901 915
902 .couponBox { 916 .couponBox {
@@ -960,28 +974,59 @@ @@ -960,28 +974,59 @@
960 .couponBtn { 974 .couponBtn {
961 width: 80%; 975 width: 80%;
962 margin: 0 auto; 976 margin: 0 auto;
963 - border-radius: 42rpx;  
964 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
965 - font-weight: 400;  
966 - color: #fff; 977 + background: #fff;
  978 + font-weight: 600;
967 text-align: center; 979 text-align: center;
968 - border: 4rpx solid #fff;  
969 padding: 12rpx 0; 980 padding: 12rpx 0;
970 margin: 16rpx auto 20rpx auto; 981 margin: 16rpx auto 20rpx auto;
  982 + color: #F14033;
  983 + border-radius: 8rpx;
971 } 984 }
972 985
973 .couponText { 986 .couponText {
974 color: #fff; 987 color: #fff;
975 text-decoration: underline; 988 text-decoration: underline;
976 text-align: center; 989 text-align: center;
  990 + padding-bottom: 44rpx;
  991 + font-weight: 600;
  992 + letter-spacing:2rpx;
977 } 993 }
978 994
979 .closeImg { 995 .closeImg {
980 width: 60rpx; 996 width: 60rpx;
981 height: 60rpx; 997 height: 60rpx;
982 - position: absolute;  
983 - right: 5%;  
984 - top: -10%; 998 + position: fixed;
  999 + left: 46%;
  1000 + bottom: 24%;
  1001 +}
  1002 +
  1003 +/* 全屏遮罩层初始样式 */
  1004 +.fullscreenMask {
  1005 + position: fixed;
  1006 + top: 35%;
  1007 + margin: 0 auto;
  1008 + height: 580rpx;
  1009 + z-index: 100;
  1010 + color: #fff;
  1011 + display: flex;
  1012 + align-items: center;
  1013 + justify-content: center;
  1014 + border-radius: 50%;
  1015 + width: 100%;
  1016 +}
  1017 +
  1018 +.fullscreenMask image{
  1019 + width: 544rpx;
  1020 + height: 600rpx;
  1021 +}
  1022 +
  1023 +/* 目标点（右上角的商家有礼位置） */
  1024 +.targetPoint {
  1025 + position: fixed;
  1026 + width: 108rpx;
  1027 + height: 116rpx;
  1028 + background: transparent;
  1029 + z-index: 100;
985 } 1030 }
986 1031
987 /* 深中国红 */ 1032 /* 深中国红 */
@@ -77,6 +77,10 @@ Page({ @@ -77,6 +77,10 @@ Page({
77 isShareItem:'',//转发客人按钮 77 isShareItem:'',//转发客人按钮
78 couponArr: [],//待领取的优惠券列表 78 couponArr: [],//待领取的优惠券列表
79 couponList:[],//优惠券列表 79 couponList:[],//优惠券列表
  80 + animationData: {},
  81 + animationData2:{},
  82 + isShow:'0',
  83 + isFrame:'0'
80 }, 84 },
81 tablestr: '', 85 tablestr: '',
82 urlsValue: [], 86 urlsValue: [],
@@ -129,6 +133,12 @@ Page({ @@ -129,6 +133,12 @@ Page({
129 closeCouponModal() { 133 closeCouponModal() {
130 this.getActivityByIdFun(this.data.couponList,'1') 134 this.getActivityByIdFun(this.data.couponList,'1')
131 this.couponModal.closeModal() 135 this.couponModal.closeModal()
  136 + this.setData({
  137 + isShow: '1',
  138 + })
  139 + setTimeout(() => {
  140 + this.startAnimation();
  141 + }, 800);
132 }, 142 },
133 // 页面滚动事件 143 // 页面滚动事件
134 onPageScroll: function (event) { 144 onPageScroll: function (event) {
@@ -1078,6 +1088,12 @@ Page({ @@ -1078,6 +1088,12 @@ Page({
1078 // 免费券判断是否领取，弹框领取 1088 // 免费券判断是否领取，弹框领取
1079 if (freeCoupons.length > 0 && couponShow) { 1089 if (freeCoupons.length > 0 && couponShow) {
1080 this.getCoupon(freeCoupons,obj,setcoupon) 1090 this.getCoupon(freeCoupons,obj,setcoupon)
  1091 + } else {
  1092 + if(setcoupon!='1'){
  1093 + this.setData({
  1094 + isFrame:'1',
  1095 + })
  1096 + }
1081 } 1097 }
1082 console.log('邀请函--------------------优惠券', list); 1098 console.log('邀请函--------------------优惠券', list);
1083 this.setData({ 1099 this.setData({
@@ -1186,6 +1202,18 @@ Page({ @@ -1186,6 +1202,18 @@ Page({
1186 }) 1202 })
1187 this.couponModal.showModal() 1203 this.couponModal.showModal()
1188 }, 3000); 1204 }, 3000);
  1205 + }else {
  1206 + if(setcoupon!='1'){
  1207 + this.setData({
  1208 + isFrame:'1',
  1209 + })
  1210 + }
  1211 + }
  1212 + }else {
  1213 + if(setcoupon!='1'){
  1214 + this.setData({
  1215 + isFrame:'1',
  1216 + })
1189 } 1217 }
1190 } 1218 }
1191 list.forEach(item=>{ 1219 list.forEach(item=>{
@@ -1348,6 +1376,39 @@ Page({ @@ -1348,6 +1376,39 @@ Page({
1348 } 1376 }
1349 return new Date(data || new Date()) 1377 return new Date(data || new Date())
1350 }, 1378 },
  1379 + // 点击关闭领券弹框后，出现图片缩小到商家有礼的位置消失动画
  1380 + startAnimation() {
  1381 + const animation = wx.createAnimation({
  1382 + duration: 800,
  1383 + timingFunction: 'ease',
  1384 + });
  1385 + animation.translateY('-60%')
  1386 + .translateX('34%')
  1387 + .scale(0)
  1388 + .step();
  1389 + this.setData({
  1390 + animationData: animation.export(),
  1391 + });
  1392 + setTimeout(() => {
  1393 + this.startSecondAnimation();
  1394 + }, 800);
  1395 + },
  1396 + // 出现商家有礼图标，并且晃动2下
  1397 + startSecondAnimation() {
  1398 + const animation = wx.createAnimation({
  1399 + duration: 200,
  1400 + timingFunction: 'ease'
  1401 + });
  1402 + animation.scale(1).step()
  1403 + .rotate(-15).step()
  1404 + .rotate(15).step()
  1405 + .rotate(-15).step()
  1406 + .rotate(15).step()
  1407 + .rotate(0).step();
  1408 + this.setData({
  1409 + animationData2: animation.export()
  1410 + });
  1411 + },
1351 //根据起始时间（获取时间时间段） 1412 //根据起始时间（获取时间时间段）
1352 computeHour (time1, time2, interval) { 1413 computeHour (time1, time2, interval) {
1353 //time1 开始时间 time2结束时间 interval间隔时长 1414 //time1 开始时间 time2结束时间 interval间隔时长
@@ -3,11 +3,16 @@ @@ -3,11 +3,16 @@
3 <nav hasHome id='nav' backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav> 3 <nav hasHome id='nav' backgroundColor="{{show_white ? colors : 'transparent'}}" place="{{false}}"></nav>
4 <scroll-view scroll-y class="viewBox viewBox{{StyleType}}"> 4 <scroll-view scroll-y class="viewBox viewBox{{StyleType}}">
5 <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}}" /> 5 <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}}" />
6 - <image class="giftImg" 6 + <image class="giftImg {{(hasValueCertificate && marketing && coupon_dataList.length>0) && isFrame == '0' ? 'giftImg1' : '' }}"
7 bindtap="gotoSellerGift" 7 bindtap="gotoSellerGift"
8 data-form="1" 8 data-form="1"
  9 + animation="{{animationData2}}"
9 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)}}" 10 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)}}"
10 - src="https://nosqn.colorcun.com/sellerGift.png" mode=""/> 11 + src="https://nosqn.colorcun.com/sellerGiftTwo.png" mode=""/>
  12 + <view class="fullscreenMask" animation="{{animationData}}" wx:if="{{isShow=='1'}}">
  13 + <image src="https://qn.colorcun.com/getCouponIcon2.png" mode=""/>
  14 + </view>
  15 + <view class="targetPoint" style="top: 35%; right: 4%;"></view>
11 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" /> 16 <image wx:if="{{detail && detail.status =='4'}}" class="cannotImg" src="https://qn.colorcun.com/cancelImg.png" />
12 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" /> 17 <image wx:if="{{options && options.isOrder == '1' && detail.status !='4'}}" class="cannotImg" src="https://qn.colorcun.com/overImg.png" />
13 <view class="reservationInfo" style="background: url('{{settingUrl}}') no-repeat;background-size:cover;"> 18 <view class="reservationInfo" style="background: url('{{settingUrl}}') no-repeat;background-size:cover;">
@@ -349,29 +354,28 @@ @@ -349,29 +354,28 @@
349 </view> 354 </view>
350 </my-modal> 355 </my-modal>
351 <my-modal id="couponModal" fadeStyle="slideUp" height="240px"> 356 <my-modal id="couponModal" fadeStyle="slideUp" height="240px">
352 - <view slot="modalName" class="titleModal">  
353 - <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline.png" mode=""/>  
354 - <view class="nameInfo">{{seller.name||reserve.seller_name}}</view>  
355 - <view class="couponTotal" wx:if="{{totalPrice}}">  
356 - 赠送给您  
357 - <scroll-number value="{{totalPrice}}"></scroll-number>  
358 - <text class="counterText1">元</text>代金券  
359 - </view> 357 + <view slot="modalName">
  358 + <image bindtap="closeCouponModal" class="closeImg" src="https://qn.colorcun.com/closeOutline2.png" mode=""/>
360 </view> 359 </view>
361 <view slot="modalContent"> 360 <view slot="modalContent">
362 - <!-- <view class="couponBox">  
363 - <view wx:for="{{couponArr}}" class="couponItems">  
364 - <view class="couponNum font20r">×{{item.number}}</view>  
365 - <view class="font36r couponPrice">¥<text>{{item.price}}</text></view>  
366 - <view class="couponLines"></view>  
367 - <view class="font28r couponCondition" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>  
368 - <view class="font28r couponCondition" wx:else>无门槛</view> 361 + <view class="titleModal">
  362 + <view class="nameInfo font28r">{{seller.name||reserve.seller_name}}</view>
  363 + <view class="couponTotal font28r" wx:if="{{totalPrice}}">
  364 + 赠送给您代金券
  365 + <view class="counterText">
  366 + <view class="font36r">￥</view><scroll-number value="{{totalPrice}}"></scroll-number>
  367 + </view>
369 </view> 368 </view>
370 - </view> -->  
371 - <view class="couponInfo font24r">您到店扫码支付即可自动使用</view>  
372 - <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">  
373 - <view class="couponBtn font36r">我知道了</view>  
374 - </subscribe>  
375 - <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view> 369 + </view>
  370 + <view class="couponWrap">
  371 + <view class="couponInfo font48r">
  372 + <text class="font48r">到店微信扫码</text>
  373 + <text class="font48r">自动识别</text>
  374 + </view>
  375 + <subscribe ids="{{[2,3]}}" bindtap="closeCouponModal">
  376 + <view class="couponBtn font28r">我知道了</view>
  377 + </subscribe>
  378 + <view class="couponText font24r" bindtap="gotoSellerGift" data-form="2">查看更多</view>
  379 + </view>
376 </view> 380 </view>
377 </my-modal> 381 </my-modal>
@@ -871,12 +871,17 @@ @@ -871,12 +871,17 @@
871 } 871 }
872 872
873 .giftImg{ 873 .giftImg{
874 - width: 108rpx;  
875 - height: 108rpx; 874 + width: 108rpx;
  875 + height: 116rpx;
876 position: fixed !important; 876 position: fixed !important;
877 - right: 5%;  
878 - top: 33%;  
879 - z-index: 200; 877 + right: 4%;
  878 + top: 28%;
  879 + z-index: 200;
  880 + transform-origin: 50% 100%;
  881 +}
  882 +
  883 +.giftImg1 {
  884 + transform: scale(0);
880 } 885 }
881 886
882 #payModal { 887 #payModal {
@@ -886,7 +891,6 @@ @@ -886,7 +891,6 @@
886 891
887 .titleModal { 892 .titleModal {
888 width: 100%; 893 width: 100%;
889 - margin-top: 48rpx;  
890 color: #000; 894 color: #000;
891 font-family: PingFang SC; 895 font-family: PingFang SC;
892 font-weight: 500; 896 font-weight: 500;
@@ -953,21 +957,29 @@ @@ -953,21 +957,29 @@
953 } 957 }
954 958
955 #couponModal .titleModal { 959 #couponModal .titleModal {
956 - margin-top: 60%;  
957 position: relative; 960 position: relative;
958 - width: 100%; 961 + width: 544rpx;
  962 + background: #F14033;
  963 + border-top-left-radius: 20rpx;
  964 + border-top-right-radius: 20rpx;
  965 + margin: 94% auto 0;
959 } 966 }
960 967
961 -#couponModal .titleModal2 {  
962 - margin-top: 80%; 968 +#couponModal .couponWrap {
  969 + position: relative;
  970 + width: 544rpx;
  971 + margin: 0 auto;
  972 + background: #F14033;
  973 + border-bottom-left-radius: 20rpx;
  974 + border-bottom-right-radius: 20rpx;
963 } 975 }
964 976
965 -#couponModal .titleModal3 {  
966 - margin-top: 60%; 977 +#couponModal .mymodal-title {
  978 + padding: 0 80rpx;
967 } 979 }
968 980
969 -#couponModal .titleModal4 {  
970 - margin-top: 30%; 981 +#couponModal .mymodal-content {
  982 + padding: 0 80rpx 40rpx 80rpx;
971 } 983 }
972 984
973 #couponModal .mymodal { 985 #couponModal .mymodal {
@@ -980,39 +992,41 @@ @@ -980,39 +992,41 @@
980 992
981 .nameInfo { 993 .nameInfo {
982 font-family: PingFang SC; 994 font-family: PingFang SC;
983 - font-weight: 400;  
984 - font-size: 52rpx;  
985 - line-height: 56rpx; 995 + font-weight: 500;
  996 + line-height: 38rpx;
986 color: #fff; 997 color: #fff;
987 - margin-bottom: 40rpx;  
988 - padding-top: 60rpx; 998 + margin-bottom: 28rpx;
989 text-align: center; 999 text-align: center;
  1000 + padding: 44rpx 30rpx 0 30rpx;
990 } 1001 }
991 1002
992 .couponTotal { 1003 .couponTotal {
993 - color: #dfdfdf; 1004 + color: #fff;
994 font-family: PingFang SC; 1005 font-family: PingFang SC;
995 - font-weight: 400;  
996 - font-size: 40rpx; 1006 + font-weight: 500;
997 line-height: 48rpx; 1007 line-height: 48rpx;
998 - margin-bottom: 40rpx;  
999 - display: flex;  
1000 - align-items: center;  
1001 - justify-content: center;  
1002 - margin: 20% 0 10% 0; 1008 + padding-bottom: 16rpx;
1003 } 1009 }
1004 1010
1005 .counterText { 1011 .counterText {
1006 color: #ffc806; 1012 color: #ffc806;
1007 font-weight: 600; 1013 font-weight: 600;
1008 - font-size: 80rpx;  
1009 - margin-right: 14rpx; 1014 + display: flex;
  1015 + font-size: 100rpx;
  1016 + align-items: flex-end;
  1017 + justify-content: center;
  1018 + margin: 16rpx 0;
1010 } 1019 }
1011 1020
1012 .couponInfo { 1021 .couponInfo {
1013 - color: #DFDFDF; 1022 + color: #fff;
1014 text-align: center; 1023 text-align: center;
1015 - margin-bottom: 40rpx; 1024 + margin-bottom: 20rpx;
  1025 + font-weight: 600;
  1026 + display: flex;
  1027 + flex-direction: column;
  1028 + align-items: center;
  1029 + line-height: 78rpx;
1016 } 1030 }
1017 1031
1018 .couponBox { 1032 .couponBox {
@@ -1076,28 +1090,59 @@ @@ -1076,28 +1090,59 @@
1076 .couponBtn { 1090 .couponBtn {
1077 width: 80%; 1091 width: 80%;
1078 margin: 0 auto; 1092 margin: 0 auto;
1079 - border-radius: 42rpx;  
1080 - background: linear-gradient(90.98deg, #f41919 0.25%, #ff7426 120.07%);  
1081 - font-weight: 400;  
1082 - color: #fff; 1093 + background: #fff;
  1094 + font-weight: 600;
1083 text-align: center; 1095 text-align: center;
1084 - border: 4rpx solid #fff;  
1085 padding: 12rpx 0; 1096 padding: 12rpx 0;
1086 margin: 16rpx auto 20rpx auto; 1097 margin: 16rpx auto 20rpx auto;
  1098 + color: #F14033;
  1099 + border-radius: 8rpx;
1087 } 1100 }
1088 1101
1089 .couponText { 1102 .couponText {
1090 color: #fff; 1103 color: #fff;
1091 text-decoration: underline; 1104 text-decoration: underline;
1092 text-align: center; 1105 text-align: center;
  1106 + padding-bottom: 44rpx;
  1107 + font-weight: 600;
  1108 + letter-spacing:2rpx;
1093 } 1109 }
1094 1110
1095 .closeImg { 1111 .closeImg {
1096 width: 60rpx; 1112 width: 60rpx;
1097 height: 60rpx; 1113 height: 60rpx;
1098 - position: absolute;  
1099 - right: 5%;  
1100 - top: -10%; 1114 + position: fixed;
  1115 + left: 46%;
  1116 + bottom: 24%;
  1117 +}
  1118 +
  1119 +/* 全屏遮罩层初始样式 */
  1120 +.fullscreenMask {
  1121 + position: fixed;
  1122 + top: 35%;
  1123 + margin: 0 auto;
  1124 + height: 580rpx;
  1125 + z-index: 100;
  1126 + color: #fff;
  1127 + display: flex;
  1128 + align-items: center;
  1129 + justify-content: center;
  1130 + border-radius: 50%;
  1131 + width: 100%;
  1132 +}
  1133 +
  1134 +.fullscreenMask image{
  1135 + width: 544rpx;
  1136 + height: 600rpx;
  1137 +}
  1138 +
  1139 +/* 目标点（右上角的商家有礼位置） */
  1140 +.targetPoint {
  1141 + position: fixed;
  1142 + width: 108rpx;
  1143 + height: 116rpx;
  1144 + background: transparent;
  1145 + z-index: 100;
1101 } 1146 }
1102 1147
1103 /* 模板9 */ 1148 /* 模板9 */