xt / xcx-book · Commits

Go to a project

Commit 5690a52a7712b73806491db610238968cb5f249c

Authored by vking
1 parent 5b715221
build: skipped

商家红包活动

Inline Side-by-side
Showing 15 changed files with 508 additions and 50 deletions
// components/reserve/discount.js
import App from '../../../utils/api'
Component({
/**
* 组件的属性列表
*/
properties: {
seller:{
type:Object,
value:{}
}
},
/**
* 组件的初始数据
*/
data: {
display:false,
hiddenAni:'',
mycards:[],
money:0,//最大优惠
red_envelopes_price:0,//获得金额
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
App.Customer.SetCardRel({
sid:this.data.seller.id
}).then(res=>{
this.setData({
red_envelopes_price:res.data.red_envelopes_price,
money:res.data.money,
mycards:res.data.list,
})
if(res.data.red_envelopes_price>0){
setTimeout(()=>{
this.setData({
red_envelopes_price:0,
})
},3000)
}
})
},
moved: function () { },
detached: function () { },
},
/**
* 组件的方法列表
*/
methods: {
hide(){
this.setData({
hiddenAni:'discountHide',
})
this.triggerEvent('hide')
setTimeout(()=>{
this.setData({
display:false,
hiddenAni:'',
})
},250)
},
show(){
this.setData({
display:true,
hiddenAni:'',
})
this.triggerEvent('show')
},
useCard(){
this.hide()
this.triggerEvent('event',{type:'gotoReserve'})
},
},
})
... ...
{
"component": true,
"usingComponents": {
"quan":"./quan"
}
}
\ No newline at end of file
... ...
<!--components/reserve/discount.wxml-->
<view class="mask" bindtap="hide" wx:if="{{display}}">
<view class="discount {{hiddenAni}}" catchtap="">
<view class="discount-name Medium" bindtap="hide">
优惠
<view class="close"></view>
</view>
<view class="activity">
<view class="txt">活动</view>
<view class="flex-ll activity-item" wx:if="{{seller.receive_condition_2}}"
style="align-items: flex-start">
<view class="activity-left">消费返</view>
<view class="activity-right">在线买单{{seller.receive_condition_str}}红包</view>
</view>
<view class="flex-ll activity-item" wx:if="{{seller.isopen_md==1}}"
style="align-items: flex-start">
<view class="activity-left">平台红包</view>
<view class="activity-right">可叠加使用平台红包</view>
</view>
</view>
<block wx:if="{{true || mycards.length>0}}">
<view class="mycards-txt">已领取的红包</view>
<scroll-view
scroll-y
class="mycards"
>
<view class="mycards-item" wx:for="{{mycards}}" wx:key="mycards">
<quan quan="{{item}}">
<view class="button-use" bindtap="useCard">立即使用</view>
</quan>
<view class="quan-tips">仅可在“{{seller.sellername}}”预订包间、在线买单时使用</view>
</view>
</scroll-view>
</block>
</view>
</view>
<view class="toast flex-vc" wx:if="{{red_envelopes_price>0}}">
<view>恭喜您获得<text>{{red_envelopes_price}}元红包</text></view>
</view>
<view class="tips reserve-detail" wx:if="{{money>0 && red_envelopes_price==0}}">
<view class="msg">
{{money}}元
<view class="jiao"></view>
</view>
</view>
\ No newline at end of file
... ...
/* components/reserve/discount.wxss */
@import "../../../app.wxss";
.discount{
position: fixed;
bottom: 0;
background-color: #ffffff;
border-radius: 40rpx 40rpx 0rpx 0rpx;
color: #353535;
width: 100%;
padding: 40rpx 40rpx;
animation: discountShow 0.3s;
box-sizing: border-box;
}
.discount.discountHide{
animation: discountHide 0.3s;
}
.discount view{
background-size: 100% 100%;
}
.discount-name{
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
width: 100%;
position: relative;
text-align: center;
}
.discount-name .close{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/close.png");
width: 28rpx;
height: 29rpx;
position: absolute;
right:0;
top:6rpx;
}
.activity{
margin-top: 60rpx;
}
.activity .txt{
width:60rpx;
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:42rpx;
}
.activity-item{
margin-top: 20rpx;
}
.activity-left{
height:28rpx;
border-radius:4rpx;
border:2rpx solid rgba(248,164,135,1);
font-size:20rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(240,88,36,1);
line-height:28rpx;
padding: 0 6rpx;
min-width: 60rpx;
text-align: center;
}
.activity-right{
font-size:26rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(53,53,53,1);
line-height:36rpx;
margin-left: 40rpx;
}
.mycards-txt{
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:42rpx;
margin-top: 50rpx;
}
.mycards{
margin-top: 20rpx;
max-height: 430rpx;
}
.quan-tips{
height:50rpx;
background:rgba(245,245,245,1);
border-radius:0rpx 0rpx 10rpx 10rpx;
font-size:22rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(136,136,136,1);
line-height:50rpx;
padding-left: 36rpx;
width: 100%;
box-sizing: border-box;
}
.mycards-item{
margin-bottom: 20rpx;
}
.button-use{
width:120rpx;
height:44rpx;
background:linear-gradient(180deg,rgba(231,66,88,1) 0%,rgba(243,53,78,1) 100%);
border-radius:6rpx;
font-size:24rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,227,192,1);
line-height:44rpx;
text-align: center;
}
@keyframes discountShow
{
from {bottom: -870rpx;}
to {bottom: 0rpx;}
}
@keyframes discountHide
{
from {height: auto;}
to {height: 0rpx;}
}
.toast{
width:380rpx;
height:80rpx;
background:rgba(53,53,53,0.8);
border-radius:20rpx;
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(255,255,255,1);
line-height:44rpx;
position: fixed;
top:60%;
left:calc(50% - 190rpx);
}
.toast text{
color:#FEDE68;
}
.tips{
position: fixed;
z-index: 9999;
background:rgba(84,83,84,0.8);
font-size:24rpx;
font-weight:500;
color:rgba(255,255,255,1);
}
.tips .msg{
height: 70rpx;
line-height: 70rpx;
padding: 0 24rpx;
position: relative;
}
.jiao{
width: 26rpx;
height: 10rpx;
background-image: url("http://nosqn.colorcun.com/activity/images/jiao2.png");
background-size: 100% 100%;
position: absolute;
bottom: -10rpx;
left:30rpx;
}
.tips.reserve-detail{
bottom:122rpx;
right:30rpx;
}
.tips.reserve-detail .jiao{
right:80rpx;
left:auto;
}
.tips.reserve-detail .msg{
color: #FEDE68;
}
.tips.reserve-detail .msg:before{
content: "预订买单，立即抵扣";
color:rgba(255,255,255,1);
}
\ No newline at end of file
... ...
// components/reserve/seller/quan.js
Component({
/**
* 组件的属性列表
*/
properties: {
quan:Object,
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
... ...
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
... ...
<!--components/reserve/seller/quan.wxml-->
<wxs src="../../../utils/util.wxs" module="util" />
<view class="quan flex-lr">
<view class="money flex-ll" style="align-items: flex-end">
<view class="dot">￥</view>
<view class="number">{{util.toFixed(quan.price,0)}}</view>
</view>
<view class="line"></view>
<view class="type">
<view class="card_title">{{quan.card_title}}</view>
<view class="card-date">
{{util.unixtoTime(quan.start_time,"YYYY.MM.DD")}}-{{util.unixtoTime(quan.end_time,"YYYY.MM.DD")}}
</view>
</view>
<view class="opt">
<slot></slot>
</view>
</view>
... ...
/* components/reserve/seller/quan.wxss */
@import "/app.wxss";
.quan{
width:100%;
height:170rpx;
background:rgba(255,239,223,1);
box-sizing: border-box;
padding: 36rpx;
border-radius:10rpx 10rpx 0rpx 0rpx;
border-right: 14rpx solid #fefefe;
position: relative;
}
.quan:after{
background-size: 100% 100%;
background-image: url("http://nosqn.colorcun.com/sellerbaobao/rp2.png");
position: absolute;
top:0;
right:-14rpx;
width: 16rpx;
height: 170rpx;
content: "";
}
.dot{
width:22rpx;
height:50rpx;
font-size:36rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(204,65,17,1);
line-height:50rpx;
}
.number{
height:78rpx;
font-size:64rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(204,65,17,1);
line-height:78rpx;
margin-left: 10rpx;
}
.line{
border-right-color:#D38238;
border-right-width:2rpx;
border-right-style: dashed;
height: 100rpx;
width:2rpx;
box-sizing: border-box;
}
.card_title{
height:40rpx;
font-size:28rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(187,113,50,1);
line-height:40rpx;
}
.card-date{
height:32rpx;
font-size:22rpx;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(187,113,50,1);
line-height:32rpx;
margin-top: 10rpx;
}
... ...
... ... @@ -9,7 +9,7 @@ Page({
* 页面的初始数据
*/
data: {
seller:{},
seller:null,
IsCollectionSeller:false,
pagesHeight:'auto',
current:0,
... ... @@ -99,6 +99,18 @@ Page({
}
})
}
if(seller.card_info){
let xff=[]
seller.card_info.forEach(card=>{
seller['receive_condition_'+card.receive_condition]=true
if(card.receive_condition==2){
xff.push(`满${card.order_price}元返${card.price}元`)
}
})
if(xff.length>0){
seller.receive_condition_str=xff.join('/')
}
}
this.setData({
seller:seller,
hasOnlineReserve:seller.is_online_reserve==1,
... ...
... ... @@ -10,7 +10,7 @@
"as":"/components/actionSheet/index",
"nav":"/components/nav/nav",
"getpos":"/components/userinfo/getpos",
"discount":"/components/reserve/discount",
"discount":"/components/reserve/seller/discount",
"share":"/components/reserve/share/share",
"people":"/components/reserve/people/people",
"dur":"/components/reserve/dur/dur",
... ...
... ... @@ -78,56 +78,33 @@
</view>
</view>
</view>
<view style="display:{{pagesHeight=='auto'?'block':'none'}}">
<view style="display:{{pagesHeight=='auto'?'block':'none'}}" wx:if="{{seller}}">
<view class="black20line"></view>
<view class="seller" wx:if="{{seller.activity.length>0}}">
<formids bindclick="showDiscount">
<block wx:if="{{seller.card_info.length>0}}">
<view class="activity-view-easy flex-lr" bindtap="showDiscount">
<view class="activity-left flex-ll">
<view class="activity-view-tit">优惠</view>
<view class="activity-view-blk" wx:if="{{seller.receive_condition_1}}">进店赠红包</view>
<view class="activity-view-blk" wx:if="{{seller.receive_condition_2}}">消费赠红包</view>
<view class="activity-view-blk" wx:if="{{seller.isopen_md==1}}">平台红包</view>
</view>
<view class="flex-rr activity-right">
<view class="more"></view>
</view>
</view>
<view class="black20line"></view>
</block>
<block wx:if="{{seller.isopen_md!=1}}">
<view class="seller" >
<view class="activity-view-easy flex-lr" >
<view class="activity-left flex-ll">
<view class="icon"></view>
<block wx:for="{{seller.activity}}"
wx:key="seller.activity.key"
wx:if="{{index<2}}">
<view class="discount" >{{item.title}}</view>
</block>
</view>
<view class="flex-rr activity-right">
<view class="more-text">更多</view>
<view class="more"></view>
</view>
</view>
</formids>
<!--
<formids wx:if="{{seller.activity.length>0}}" bindclick="showDiscount">
<view class="activity-view" >
<view class="activity" >
<view class="flex-lr">
<view class="activity-left">
<view class="activity-first flex-ll" style="align-items: flex-start">
<image src="http://nosqn.colorcun.com/custom/lite-online/image%E5%96%87%E5%8F%AD.png"></image>
<view class="flex-cc discount" wx:for="{{seller.activity}}"
wx:key="seller.activity.key"
wx:if="{{index<2}}">
<view class="discount-left"></view>
<view class="discount-text">{{item.title}}</view>
<view class="discount-right"></view>
</view>
</view>
</view>
<view class="activity-right flex-rr Semibold">
<view></view>
<view class="more"></view>
</view>
</view>
<view class="activity-text">
该优惠仅适用于一键订平台预订客户
</view>
<view class="discount" >本店不可使用平台红包</view>
</view>
</view>
</formids>
-->
</view>
<view class="black20line" wx:if="{{seller.activity.length>0}}"></view>
</view>
<view class="black20line"></view>
</block>
<view class="block" wx:if="{{seller.room_image.length>0}}">
<view class="header flex-ll">
<view class="line"></view>
... ... @@ -206,9 +183,14 @@
</view>
<as id="as" items="{{seller.seller_tel}}" bindclick="reservePhone" hasTip="{{false}}"></as>
<getpos bindpos="onpos" id="getpos" hasAllowLoading="{{false}}"></getpos>
<discount id="discount" seller="{{seller}}" bindhide="discountHide" bindshow="discountShow"></discount>
<share id="share" seller_id="{{seller.id}}" seller="{{seller}}" wx:if="{{seller.id}}"></share>
<!--
<activity-tips str="￥price" cla="reserve-detail" pos="pages/reserve/detail"></activity-tips>
-->
<discount id="discount" seller="{{seller}}" wx:if="{{seller}}"
bindevent="reserveEvent"
bindhide="discountHide"
bindshow="discountShow"></discount>
</view>
<view hidden="{{activeTab!='reserve'}}" wx:if="{{seller.id}}">
<view class="olreserve bg_white">
... ...
... ... @@ -290,10 +290,10 @@
padding: 28rpx 0;
}
.activity-left{
width: calc(100% - 120rpx);
width: calc(100% - 60rpx);
}
.activity-right{
min-width: 120rpx;
min-width: 60rpx;
color: #C0A369;
}
.activity-first{
... ... @@ -472,6 +472,7 @@
padding-right: 20rpx;
padding-left: 20rpx;
margin-right: 0;
font-weight:500;
}
.activity-view-easy .discount:last-child{
border-right-width: 0;
... ... @@ -553,3 +554,42 @@
bottom:0;
background: #fff;
}
.activity-view-tit{
height:42rpx;
font-size:30rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(53,53,53,1);
line-height:42rpx;
margin-right: 42rpx;
}
.activity-view-blk{
height:34rpx;
border-top:2rpx solid rgba(240,88,36,1);
border-bottom:2rpx solid rgba(240,88,36,1);
box-sizing: border-box;
font-size:24rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(240,88,36,1);
line-height:34rpx;
margin-right: 22rpx;
padding: 0 12rpx;
position: relative;
border-radius: 6rpx;
}
.activity-view-blk:before,.activity-view-blk:after{
background-size: 100% 100%;
width: 12rpx;
height: 34rpx;
background-image: url("http://nosqn.colorcun.com/sellerbaobao/left-1.png");
content: "";
position: absolute;
left:0;
top:-2rpx;
}
.activity-view-blk:after{
background-image: url("http://nosqn.colorcun.com/sellerbaobao/right-1.png");
right:0;
left:auto;
}
\ No newline at end of file
... ...
... ... @@ -357,7 +357,7 @@
"id": 39,
"name": "pages/reserve/detail 在线订座 ",
"pathName": "pages/reserve/detail",
"query": "id=1",
"query": "id=80",
"scene": null
},
{
... ...
... ... @@ -474,4 +474,9 @@ export default {
'App.Customer.UpdateOrderInfo':{
silence:false,
},
//进店领取红包
'App.Customer.SetCardRel':{
openid:'openid',
},
}
\ No newline at end of file
... ...
... ... @@ -96,4 +96,7 @@ module.exports = {
}
return '';
},
toFixed:function(num,limit){
return parseFloat(num).toFixed(limit)
},
};
\ No newline at end of file
... ...