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