@@ -19,7 +19,8 @@ | |||
"pages/login/index", | |||
"pages/park/park", | |||
"pages/passCar/passCar", | |||
"pages/addPark/addPark" | |||
"pages/addPark/addPark", | |||
"pages/youhuiquanma/index" | |||
], | |||
"tabBar": { | |||
"color": "#9F9F9F", | |||
@@ -19,54 +19,57 @@ Page({ | |||
*/ | |||
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); | |||
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 class="fr">{{order.merchantName}}</text> | |||
</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> | |||
<text>兑换码:</text> | |||
<text>{{order.id}}</text> | |||
@@ -53,13 +53,13 @@ | |||
</view> | |||
<!-- 待付款 显示立即购买的按钮 --> | |||
<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> | |||
<!--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 class="panel"> | |||
<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; | |||
} |