Commit e32074fb0af8ddc5f0ebedc73598ee38fe2f5af3

Authored by pengye
1 parent 3160b78f

优惠券扫码购买页

... ... @@ -97,7 +97,8 @@
"pack/subscribeDrawback",
"pack/vipRecharge",
"pack/seeRecharge",
"pack/receiveCoupon"
"pack/receiveCoupon",
"pack/buyFreeCoupon"
]
},
{
... ...
// pack-activity/pack/buyFreeCoupon.js
import util from '../../utils/util';
import App from '../../utils/api';
Page({
/**
* 页面的初始数据
*/
data: {
options: {},
available: '1', //输入金额够优惠券最低消费1 不够0
couponArr: [], //所有券列表
dataStr: Date.now() * 1 / 1000,
},
couponModal: '',
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.couponModal = this.selectComponent("#couponModal");
this.couponModal.showModal()
this.setData({
...options
})
if (options.sid) {
this.getSellerDetail(options.sid)
}
},
// 打开优惠券弹框
showCouponModal() {
this.couponModal.showModal()
},
// 关闭优惠券弹框
closeCouponModal() {
this.couponModal.closeModal()
},
// 获取店铺名称
getSellerDetail(sid) {
App.Customer.GetSellerDetail({
sid
}).then(res => {
let data = res.data;
this.setData({
seller: {
seller_image: data.seller_image,
sellername: data.sellername
}
})
this.getCoupon()
})
},
// 点确认选择
checkCertificate() {
console.log('1111111111');
this.closeCouponModal()
},
// 获取所有优惠券列表
getCoupon() {
App.Activity.ActivityListByOpenid().then(res => {
if (res.ret == 200 && res.data && res.data.length > 0) {
let list = res.data.filter(item => {
return this.data.dataStr < (item.etime * 1) && item.is_open == '1'
})
list.forEach(detail => {
detail.stringifyUse = detail.use ? JSON.stringify(detail.use) : '';
detail.exp_date = detail.exp_date ? util.determine(detail.exp_date) : '';
detail.arule = detail.arule ? util.determine(detail.arule) : '';
if (detail.exp_date && detail.exp_date.week_data) {
let noon = this.hasConsecutiveSelect(detail.exp_date.week_data, '1').rArr.join('、')
let nig = this.hasConsecutiveSelect(detail.exp_date.week_data, '2').rArr.join('、')
if (noon) noon = '午餐:' + noon
if (nig) nig = '晚餐:' + nig
detail.noonText = noon;
detail.nigText = nig;
}
detail.checked = false;
detail.endDateStr = util.unixtoTime(detail.stime, 'YYYY-MM-DD') + '至' + util.unixtoTime(detail.etime, 'YYYY-MM-DD')
})
console.log(list);
let couponArr = list
this.setData({
couponArr
})
}
})
},
checkboxChange(e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value)
},
// 输入金额
bindKeyInput(e) {
this.setData({
inputValue: e.detail.value
})
},
// 处理优惠券不可用日期数据
hasConsecutiveSelect(arr, type) {
let firstTitle = null;
let lastTitle = null;
let rArr = []
let num = 0
for (let i = 0; i < arr.length; i++) {
let str = type == '1' ? arr[i].selectNoon : arr[i].selectNig
if (str) {
rArr.push(arr[i].title)
num++
if (num == 1) {
firstTitle = arr[i].title
}
if (num >= 5) {
lastTitle = arr[i].title
}
if (num >= 5 && i >= (arr.length - 1)) {
let fi = rArr.findIndex((item) => {
return item == firstTitle
})
rArr.splice(fi, num, firstTitle + '至' + lastTitle)
num = 0
}
} else {
if (num < 5) {
num = 0
firstTitle = null;
lastTitle = null;
} else {
let fi = rArr.findIndex((item) => {
return item == firstTitle
})
rArr.splice(fi, num, firstTitle + '至' + lastTitle)
num = 0
}
}
}
return {
rArr,
lastTitle,
firstTitle
};
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
... ...
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"usingComponents": {
"nav": "/components/nav/nav",
"my-modal": "/components/modal/modal"
}
}
\ No newline at end of file
... ...
<!--pack-activity/pack/buyFreeCoupon.wxml-->
<nav backgroundColor="#f6f6fd">向商家付款</nav>
<view class="sellInfo">
<image src="{{seller.seller_image}}" mode="" />
<view class="font32r">{{seller.sellername}}</view>
</view>
<view class="payBox">
<view class="font32r">付款金额</view>
<view class="payView">
<text>¥</text>
<input type="digit" auto-focus bindinput="bindKeyInput" />
</view>
<view bindtap="showCouponModal" class="couponsBox {{available == '1' ? 'colorOrange':'colorNine'}}">
<view class="couponLeft">可用优惠券</view>
<view class="couponRight">
<text>50元代金券(消费满300元可用) </text>
<view class="more" style="margin-top: 6rpx;"></view>
</view>
</view>
<view class="couponsWrap">
<view class="couponLeft">抵扣后</view>
<view class="couponRight">¥0.00</view>
</view>
<view class="payBtn font32r">付款</view>
</view>
<my-modal id="couponModal" fadeStyle="slideUp" height="{{couponArr.length > '3' ? '80%' : '60%'}}">
<view slot="modalName" class="titleModal">
<view class="couponTotal">所有优惠券</view>
<view bindtap="checkCertificate" class="btn font32r">确认选择</view>
</view>
<view slot="modalContent">
<view class="couponBox">
<view wx:for="{{couponArr}}" class="couponItems">
<view class="itemLeft">
<view class="priceText" wx:if="{{item.price}}">
<view class="icons font24r">¥</view><text class="priceText">{{item.price}}</text>
</view>
<view class="icons font20r" wx:if="{{item.desc!='0'}}">消费满{{item.desc}}元可用</view>
</view>
<view class="itemRight">
<view class="anameText">
<text class="font40r">{{item.aname}}</text>
<view class="discountText1 font20r" wx:if="{{item.is_type == '3'}}">{{item.arule.is_accumulation == '1' ? '可' : '不可'}}叠加</view>
</view>
<view wx:if="{{item.endDateStr}}" class="font20r bottomTitle">有效日期:<view class="bottom font20r">{{item.endDateStr}}</view>
</view>
<view wx:if="{{item.noonText || item.noonText}}" class="font20r bottomTitle">不可使用:<view wx:if="{{item.noonText}}" class="bottom font20r">{{item.noonText}}</view>
</view>
<view wx:if="{{item.nigText}}" class="bottom font20r nodate">{{item.nigText}}</view>
<view wx:if="{{item.exp_date.week_show=='无'}}" class="bottom font20r">无使用时间限制</view>
</view>
<checkbox-group bindchange="checkboxChange">
<checkbox value="{{item.checked}}" data-item="{{item}}" checked="{{item.checked}}" />
</checkbox-group>
</view>
</view>
</view>
</my-modal>
\ No newline at end of file
... ...
/* pack-activity/pack/buyFreeCoupon.wxss */
.sellInfo {
padding: 56rpx 0 40rpx 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f6f6fd;
}
.sellInfo image {
width: 200rpx;
height: 200rpx;
margin-bottom: 20rpx;
}
.payBox {
padding: 30rpx 40rpx 0 40rpx;
border-radius: 30rpx 30rpx 0rpx 0rpx;
background: #ffffff;
}
.payView {
font-size: 64rpx;
display: flex;
height: 82rpx;
margin-top: 26rpx;
}
.payView text {
color: #000;
}
.payView input {
color: #515151;
height: 82rpx;
line-height: 82rpx;
}
.couponsBox {
display: flex;
align-items: center;
justify-content: space-between;
color: #999;
margin: 26rpx 0;
}
.couponsBox .more {
width: 20rpx;
height: 32rpx;
margin-left: 10rpx;
}
.colorNine {
color: #999;
}
.colorOrange {
color: #ED7B2F;
}
.colorOrange .more {
background-image: url('https://qn.colorcun.com/chevronRight.png');
width: 48rpx;
height: 48rpx;
margin-left: 0;
}
.couponsBox .couponRight {
display: flex;
align-items: center;
}
.couponsWrap {
color: #515151;
display: flex;
align-items: center;
justify-content: space-between;
}
.payBtn {
background: #05C160;
width: 70%;
border-radius: 10rpx;
margin: 0 auto;
color: #fff;
text-align: center;
padding: 20rpx 10rpx;
margin-top: 40rpx;
}
.titleModal {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #dbdbdb;
}
.btn {
background: #05C160;
border-radius: 10rpx;
color: #fff;
text-align: center;
padding: 10rpx;
height: 48rpx;
line-height: 48rpx;
}
.couponItems {
border: 2rpx solid #05c160;
margin-bottom: 16rpx;
border-radius: 20rpx;
display: flex;
padding: 20rpx 10rpx;
}
.itemLeft {
width: 25%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-right: 2rpx dashed #05C160;
padding-right: 14rpx;
margin-right: 14rpx;
}
.couponModal1 {
height: 50%;
}
.couponModal2 {
height: 80%;
}
.priceText {
color: #F6231B;
font-weight: 500;
font-size: 56rpx;
margin-top: 6rpx;
display: flex;
align-items: baseline;
justify-content: center;
font-family: PingFang SC;
}
.icons {
color: #F6231B;
font-size: 20rpx;
font-family: PingFang SC;
}
.anameText {
display: flex;
align-items: center;
}
.anameText {
margin-bottom: 14rpx;
}
.anameText text {
font-family: PingFang SC;
font-weight: 600;
}
.discountText1 {
color: #C36607;
font-family: PingFang SC;
font-weight: 500;
margin-left: 40rpx;
}
.bottomTitle {
color: #515151;
font-family: PingFang SC;
font-weight: 600;
}
.bottom {
font-weight: normal;
}
.priceText {
font-size: 56rpx;
}
.btns {
margin: 24rpx 20rpx 10rpx 0;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-direction: column;
}
.btns text {
color: #0B0805;
}
.itemRight {
flex: 1;
}
.itemRight view {
display: flex;
align-items: center;
line-height: 36rpx;
}
.nodate {
margin-left: 20%;
}
checkbox {
height: 50rpx;
width: 50rpx;
margin-right: 20rpx;
}
radio::before,
checkbox::before {
height: 50rpx;
top: 32% !important;
right: 0 !important;
width: 50rpx;
content: '' !important;
}
\ No newline at end of file
... ...