| @@ -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; | |||||
| } | |||||