@@ -19,7 +19,8 @@ | |||||
"pages/login/index", | "pages/login/index", | ||||
"pages/park/park", | "pages/park/park", | ||||
"pages/passCar/passCar", | "pages/passCar/passCar", | ||||
"pages/addPark/addPark" | |||||
"pages/addPark/addPark", | |||||
"pages/youhuiquanma/index" | |||||
], | ], | ||||
"tabBar": { | "tabBar": { | ||||
"color": "#9F9F9F", | "color": "#9F9F9F", | ||||
@@ -19,54 +19,57 @@ Page({ | |||||
*/ | */ | ||||
powerDrawer: function(e) { | powerDrawer: function(e) { | ||||
var currentStatu = e.currentTarget.dataset.statu; | |||||
console.log(e.currentTarget.dataset.statu); | |||||
// var currentStatu = e.currentTarget.dataset.statu; | |||||
wx.navigateTo({ | |||||
url: `/pages/youhuiquanma/index?quancode=${e.currentTarget.dataset.quancode}&title=${e.currentTarget.dataset.title}&subtitle=${e.currentTarget.dataset.subtitle}&remark=${e.currentTarget.dataset.remark}`, | |||||
}) | |||||
// console.log(e.currentTarget.dataset.statu); | |||||
console.log(e.currentTarget.dataset.quancode); | console.log(e.currentTarget.dataset.quancode); | ||||
this.utils(currentStatu, e.currentTarget.dataset.quancode); | |||||
// this.utils(currentStatu, e.currentTarget.dataset.quancode); | |||||
}, | }, | ||||
utils: function(currentStatu, quancode) { | |||||
/* 动画部分 */ | |||||
// 第1步:创建动画实例 | |||||
var animation = wx.createAnimation({ | |||||
duration: 200, //动画时长 | |||||
timingFunction: "linear", //线性 | |||||
delay: 0 //0则不延迟 | |||||
}); // 第2步:这个动画实例赋给当前的动画实例 | |||||
this.animation = animation; // 第3步:执行第一组动画 | |||||
animation.opacity(0).step(); // 第4步:导出动画对象赋给数据对象储存 | |||||
this.setData({ | |||||
animationData: animation.export() | |||||
}); // 第5步:设置定时器到指定时候后,执行第二组动画 | |||||
setTimeout( | |||||
function() { | |||||
// 执行第二组动画 | |||||
animation.opacity(1).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 | |||||
this.setData({ | |||||
animationData: animation | |||||
}); //关闭 | |||||
if (currentStatu == "close") { | |||||
this.setData({ | |||||
showModalStatus: false | |||||
}); | |||||
} | |||||
}.bind(this), | |||||
20 | |||||
); | |||||
// 显示 | |||||
if (currentStatu == "open") { | |||||
this.setData({ | |||||
showModalStatus: true | |||||
}); | |||||
this.data.flag++; | |||||
// utils: function(currentStatu, quancode) { | |||||
// /* 动画部分 */ | |||||
// // 第1步:创建动画实例 | |||||
// var animation = wx.createAnimation({ | |||||
// duration: 200, //动画时长 | |||||
// timingFunction: "linear", //线性 | |||||
// delay: 0 //0则不延迟 | |||||
// }); // 第2步:这个动画实例赋给当前的动画实例 | |||||
// this.animation = animation; // 第3步:执行第一组动画 | |||||
// animation.opacity(0).step(); // 第4步:导出动画对象赋给数据对象储存 | |||||
// this.setData({ | |||||
// animationData: animation.export() | |||||
// }); // 第5步:设置定时器到指定时候后,执行第二组动画 | |||||
// setTimeout( | |||||
// function() { | |||||
// // 执行第二组动画 | |||||
// animation.opacity(1).step(); // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 | |||||
// this.setData({ | |||||
// animationData: animation | |||||
// }); //关闭 | |||||
// if (currentStatu == "close") { | |||||
// this.setData({ | |||||
// showModalStatus: false | |||||
// }); | |||||
// } | |||||
// }.bind(this), | |||||
// 20 | |||||
// ); | |||||
// // 显示 | |||||
// if (currentStatu == "open") { | |||||
// this.setData({ | |||||
// showModalStatus: true | |||||
// }); | |||||
// this.data.flag++; | |||||
console.log(this.data.flag); | |||||
util.barcode("barcode" + this.data.flag, quancode, 500, 100); | |||||
util.qrcode("qrcode" + this.data.flag, quancode, 350, 350); | |||||
this.setData({ | |||||
flag: this.data.flag | |||||
}); | |||||
} | |||||
}, | |||||
// console.log(this.data.flag); | |||||
// util.barcode("barcode" + this.data.flag, quancode, 500, 100); | |||||
// util.qrcode("qrcode" + this.data.flag, quancode, 350, 350); | |||||
// this.setData({ | |||||
// flag: this.data.flag | |||||
// }); | |||||
// } | |||||
// }, | |||||
/** | /** | ||||
* 生命周期函数--监听页面加载 | * 生命周期函数--监听页面加载 | ||||
*/ | */ | ||||
@@ -29,7 +29,7 @@ | |||||
<text>适用门店</text> | <text>适用门店</text> | ||||
<text class="fr">{{order.merchantName}}</text> | <text class="fr">{{order.merchantName}}</text> | ||||
</view> | </view> | ||||
<view wx:if="{{order.orderStatus==1}}" data-quancode="{{order.id}}" bindtap="powerDrawer" data-statu="open"> | |||||
<view wx:if="{{order.orderStatus==1}}" data-title="{{order.title}}" data-subtitle="{{order.subTitle}}" data-remark="{{order.remark}}" data-quancode="{{order.id}}" bindtap="powerDrawer" data-statu="open"> | |||||
<view> | <view> | ||||
<text>兑换码:</text> | <text>兑换码:</text> | ||||
<text>{{order.id}}</text> | <text>{{order.id}}</text> | ||||
@@ -53,13 +53,13 @@ | |||||
</view> | </view> | ||||
<!-- 待付款 显示立即购买的按钮 --> | <!-- 待付款 显示立即购买的按钮 --> | ||||
<view wx:if="{{order.orderStatus==0}}" class="buy-view app-border-top"> | <view wx:if="{{order.orderStatus==0}}" class="buy-view app-border-top"> | ||||
<button bindtap='orderFunc' data-couponChannelId="{{order.id}}" class='buy'>立即支付</button> | |||||
<button bindtap='orderFunc' data-couponChannelId="{{order.id}}" class='buy'>立即支付</button> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<!--mask--> | <!--mask--> | ||||
<view class="drawer_screen" data-quancode="{{order.id}}" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close"></view> | |||||
<view class="drawer_screen" data-title="{{order.title}}" data-subtitle="{{order.subTile}}}" data-remark="{{order.remark}}" data-quancode="{{order.id}}" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close"></view> | |||||
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> | <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}"> | ||||
<view class="panel"> | <view class="panel"> | ||||
<view class="barcode"> | <view class="barcode"> | ||||
@@ -0,0 +1,77 @@ | |||||
let util = require("../../utils/util"); | |||||
Page({ | |||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | |||||
code:'' | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad: function (options) { | |||||
console.log(options.quancode); | |||||
console.log(options); | |||||
console.log(options.subtitle); | |||||
util.barcode("barcode", options.quancode, 500, 100); | |||||
util.qrcode("qrcode", options.quancode, 350, 350); | |||||
this.setData({ | |||||
code:options.quancode, | |||||
title:options.title, | |||||
subtitle:options.subtitle, | |||||
remark:options.remark | |||||
}) | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload: function () { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh: function () { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom: function () { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage: function () { | |||||
} | |||||
}) |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"navigationBarTitleText": "优惠券" | |||||
} |
@@ -0,0 +1,18 @@ | |||||
<view class="couponbg"> | |||||
<image src="./../../assets/img/yhqbg.png"></image> | |||||
<view class="title">{{title}}</view> | |||||
<view class="subtitle">{{subtitle}}</view> | |||||
<view class="panel"> | |||||
<view class="barcode"> | |||||
<canvas canvas-id="barcode" /> | |||||
</view> | |||||
<view class="qrcode"> | |||||
<canvas canvas-id="qrcode" /> | |||||
</view> | |||||
<view class="barnum buy"><text>兑换码:</text>{{code}}</view> | |||||
</view> | |||||
<view class="gou"> | |||||
<view class="mai">购买须知:</view> | |||||
<view class="remark">{{remark}}</view> | |||||
</view> | |||||
</view> |
@@ -0,0 +1,129 @@ | |||||
page { | |||||
background: #4e99f8; | |||||
} | |||||
.couponbg { | |||||
position: relative; | |||||
height: 100%; | |||||
width: 100%; | |||||
} | |||||
.couponbg image { | |||||
display: block; | |||||
position: absolute; | |||||
width: 95%; | |||||
height: 95%; | |||||
top: 0; | |||||
left: 0; | |||||
bottom: 0; | |||||
right: 0; | |||||
margin: auto; | |||||
z-index: -19999; | |||||
border-radius: 20rpx; | |||||
} | |||||
.title { | |||||
font-size: 33rpx; | |||||
color: #0c1829; | |||||
line-height: 36rpx; | |||||
text-align: center; | |||||
padding-top: 106rpx; | |||||
} | |||||
.subtitle { | |||||
color: #7f8b9e; | |||||
font-size: 26rpx; | |||||
line-height: 30rpx; | |||||
margin-top: 16rpx; | |||||
text-align: center; | |||||
} | |||||
.panel { | |||||
width: 600rpx; | |||||
border-radius: 10rpx; | |||||
background-color: #fff; | |||||
margin: 30rpx auto 0; | |||||
padding: 30rpx 0; | |||||
position: relative; | |||||
z-index: 10000000000; | |||||
} | |||||
.pane2 { | |||||
background: #fff; | |||||
opacity: 0.6; | |||||
} | |||||
.pane2 image { | |||||
width: 500rpx; | |||||
display: block; | |||||
margin: 40rpx auto 0; | |||||
} | |||||
.barcode { | |||||
height: 100rpx; | |||||
width: 500rpx; | |||||
margin: 0 auto; | |||||
} | |||||
.barnum { | |||||
height: 46rpx; | |||||
line-height: 46rpx; | |||||
font-size: 24rpx; | |||||
text-align: center; | |||||
letter-spacing: 2rpx; | |||||
white-space: nowrap; | |||||
color: #7f7f7f; | |||||
} | |||||
.barnum text { | |||||
color: #767676; | |||||
} | |||||
.barcode > canvas { | |||||
width: 500rpx; | |||||
height: 100rpx; | |||||
} | |||||
.qrcode { | |||||
height: 380rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
} | |||||
.qrcode > canvas { | |||||
width: 350rpx; | |||||
height: 350rpx; | |||||
} | |||||
.jine { | |||||
color: #f96563 !important; | |||||
font-size: 36rpx !important; | |||||
} | |||||
.buy-view { | |||||
background: #fff; | |||||
position: fixed; | |||||
padding-top: 10rpx; | |||||
height: 98rpx; | |||||
bottom: 0rpx; | |||||
left: 0; | |||||
right: 0; | |||||
} | |||||
.buy { | |||||
background: #fff; | |||||
height: 88rpx; | |||||
width: 98%; | |||||
margin: 0 auto; | |||||
color: #7e7e7e; | |||||
line-height: 88rpx; | |||||
border-radius: 16rpx; | |||||
border: 1px solid #eee; | |||||
margin-top:40rpx; | |||||
} | |||||
.gou{ | |||||
padding-left: 80rpx; | |||||
color: #878d95; | |||||
padding-top:30rpx; | |||||
font-size: 30rpx; | |||||
} | |||||
.mai{ | |||||
color: #666; | |||||
} | |||||
.remark{ | |||||
padding-top: 37rpx; | |||||
} |