From 195fe7614d22e608550aa7bdbf34c20a29546e41 Mon Sep 17 00:00:00 2001 From: caserKing Date: Thu, 1 Aug 2019 15:01:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=81=9C=E8=BD=A6=E4=BC=98=E6=83=A0=E5=88=B8?= =?UTF-8?q?=E7=9A=84=E5=BC=B9=E6=A1=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/passCar/passCar.js | 155 +++++++++++++++++++++++++- pages/passCar/passCar.wxml | 51 ++++++++- pages/passCar/passCar.wxss | 222 +++++++++++++++++++++++++++++++++++-- 3 files changed, 416 insertions(+), 12 deletions(-) diff --git a/pages/passCar/passCar.js b/pages/passCar/passCar.js index 2f52ccf..7f806c5 100644 --- a/pages/passCar/passCar.js +++ b/pages/passCar/passCar.js @@ -1,5 +1,6 @@ const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {} let app = getApp(); +const format = require("../../utils/util.js"); let config = require("../../config/config.js"); let Http = require("../../utils/HttpBasics"); let Util = require("../../utils/util"); @@ -31,7 +32,127 @@ Page({ stopFees: {}, scroll: true, ifHaveCarModular: "", - canIUse: wx.canIUse("navigator") + canIUse: wx.canIUse("navigator"), + showTicketModal: false, + ticketList: [], + noCoupon:imgurl.noCoupon.url, + loadingUrl: imgurl.loading.url, + allow_load: true, + curPageNum: 1, + curPageSize: 4, + curTotalpageNum: 0, + quantitle: '', + quanid: '', + gouHr: imgurl.gouHr.url, + totalTicketNum: 0, + + }, + getMoreList(e) { + let totalNum = this.data.ticketList.length; + if (this.data.curPageNum < this.data.curTotalpageNum) { + this.setData({ + curPageNum: this.data.curPageNum+1 + }) + this.getTicketList(0 ,this.data.curPageNum); + } + + }, + /** + * 选择使用的优惠券 + */ + choicecoupon: function(e) { + /* wx.navigateBack(); + var pages = getCurrentPages(); + var prevPage = pages[pages.length - 2] //上一个页面 */ + var that = this; + var quantitle = e.currentTarget.dataset.title; + var quanid = e.currentTarget.dataset.id; + this.setData({ + quantitle: quantitle, + quanid: quanid, + showTicketModal: false, + }); + wx.setStorage({ + key: 'chosed', + data: 'chosed', + }) + }, + /* + */ + getTicketList(key, pageNum) { + var that = this; + if (that.data.allow_load) { + wx.showLoading({ + title: "加载中" + }); + Http.get({ + url: config.api.couponOrderCarList, + data: { + pageNum: pageNum, + pageSize: 20, + couponOrderStatus: key + } + }).then(res => { + that.setData({ + curTotalpageNum: res.data.pages, + curPageNum: res.data.pageNum, + totalTicketNum: res.data.total + }) + res.data.list.map(file => { + file.expiredTime = format.formatTime( + file.expiredTime, + "yyyy-MM-dd hh:mm:ss" + ); + }); + setTimeout(function () { + wx.hideLoading(); + }, 1200); + if (pageNum >= res.data.pages) { + that.setData({ + allow_load: false + }); + } + /** + * 先赋值后渲染页面 + * concat 不会改变原数组值 + * push 会改变原数组值,但不会一条一条插入,而是整个数组插入 + */ + that.data.ticketList = that.data.ticketList.concat(res.data.list); + that.setData({ + ticketList: that.data.ticketList + }); + this.hideLoading(); + }) + .catch(err => { + setTimeout(function () { + wx.hideLoading(); + }, 1200); + wx.showToast({ + title: err.errMsg, + icon: 'none', + duration: 2000, + mask: false + }); + }) + } else { + } + }, + //点击跳转到券详情页面 + gotouse: function (e) { + wx.navigateTo({ + url: `/pages/passCar/couponDetail/couponDetail?quancode=${ + e.currentTarget.dataset.quancode + }`, + success: function (res) { + // success + }, + fail: function () { + // fail + }, + complete: function () { + // complete + } + }); }, /** * 车牌轮播滑动 @@ -135,6 +256,13 @@ Page({ addCar: null }); } + this.setData({ + ticketList: [], + curPageNum: 1 + }) + this.getTicketList(0, 1); + + }, onLoad: function (options) { @@ -169,6 +297,7 @@ Page({ // app.getLocation(); that.userLogin() } + }, /** * 用户登录 @@ -300,7 +429,8 @@ Page({ .catch(err => { console.log(err) wx.showToast({ - title: err.message, + // title: err.message, + title: '未查到', icon: 'none', duration: 2000, mask: false @@ -322,6 +452,25 @@ Page({ }) } + }, + closeTicketModal: function () { + this.setData({ + showTicketModal: false + }) + }, + /** + * 停车券 弹框 + */ + openTicketModal: function () { + this.setData({ + showTicketModal: true, + allow_load: true, + + }) + if (!this.data.ticketList.length){ + this.getTicketList(0, 1); + } + }, //获取名下停车券列表 @@ -331,7 +480,7 @@ Page({ url: config.api.couponOrderCarList + "?type=5&couponOrderStatus=0", data: { pageNum: 1, - pageSize: 8, + pageSize: 20, couponOrderStatus: 0 } }).then(res => { diff --git a/pages/passCar/passCar.wxml b/pages/passCar/passCar.wxml index 434558f..b93e413 100644 --- a/pages/passCar/passCar.wxml +++ b/pages/passCar/passCar.wxml @@ -38,10 +38,11 @@ + 优惠券: {{quantitle}} - {{couponList.length}}张可用 + {{totalTicketNum}}张可用 @@ -109,4 +110,52 @@ 智慧停车即将上线 敬请期待 + + + + + + + + 请您敬请期待 + 我们正在筹备一大波优惠活动 + + + + + + 停车券 + + + + + + + + + + + {{item.title}} + + + {{item.subTitle}} + + + 售价:{{item.salePrice/100}}元{{item.price/100}}元 + {{item.price/100}}小时 + + + + + + 有效期至: + {{item.expiredTime}} + + + + + + {{content}} + + \ No newline at end of file diff --git a/pages/passCar/passCar.wxss b/pages/passCar/passCar.wxss index 3b59fdd..0c2df3c 100644 --- a/pages/passCar/passCar.wxss +++ b/pages/passCar/passCar.wxss @@ -69,11 +69,7 @@ page { font-size: 28rpx; } -.yuan { - display: inline-block; - margin-left: 6rpx; - color: #333; -} + .price { width: 690rpx; @@ -632,19 +628,229 @@ button::after { } .txt1 { + font-size: 22rpx; + color: #A6A6A6; + letter-spacing: 0; +} + +.txt2 { + display: block; + font-size: 28rpx; + color: #999; + letter-spacing: 0; + text-align: center; + line-height: 40rpx; + margin-top: 10rpx; +} + +.gray-bg { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1000; + background: rgba(0,0,0,.2); + +} + +.ticket-modal { + position: fixed; + left: 50%; + top: 50%; + width: 80%; + height: 880rpx; + z-index: 10000; + transform: translate(-50%, -50%); + background: #fff; +} + +.nocoupon image { + width: 300rpx; display: block; + margin: 3% auto 0; +} + +.txt001 { + display: block; + line-height: 48rpx; font-size: 34rpx; color: #333; letter-spacing: 0; text-align: center; } -.txt2 { +.txt002 { display: block; + margin-top: 1%; font-size: 28rpx; color: #999; letter-spacing: 0; - text-align: center; line-height: 40rpx; - margin-top: 10rpx; + text-align: center; } + +.nocoupon button { + background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%); + color: #fff; + font-size: 30rpx; + width: 74%; + border-radius: 60rpx; + height: 78rpx; + line-height: 78rpx; + margin-top: 100rpx; +} + +.loading { + text-align: center; + height: 80rpx; + line-height: 80rpx; + font-size: 26rpx; + color: #999; +} + +.loading image { + width: 60rpx; + height: 60rpx; + vertical-align: middle; + margin-right: 10rpx; +} + +.section { + position: relative; + width: 90%; + margin-left: 5%; +} + +.mms { + width: 100%; + height: 180rpx !important; + background: #fff; + /* padding: 30rpx 0 0; */ + margin: 0 auto 40rpx; + /* border-radius: 16rpx; */ + /* border-top: 8rpx solid #02b7ff; */ + box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.10); +} + +.detail_msg { + display: flex; + padding-top: 16rpx; + padding-bottom: 16rpx; + background: linear-gradient(127deg,rgba(252,177,74,1) 0%,rgba(254,70,20,1) 100%); +} + +.logo { + width: 60rpx; + height: 60rpx; + /* border: 1px solid #f8f8f8; */ + border-radius: 50rpx; + display: block; + margin: 15rpx 20rpx 0 20rpx; +} + +.logo image { + width: 60rpx; + height: 60rpx; + border-radius: 50%; +} + +.info view:nth-child(1) { + display: flex; + justify-content: space-between; + padding: 0 4%; + margin-top: 15rpx; +} + +.info { + width: 100%; + border-left: 1rpx #FFF dashed; +} + +.info view:nth-child(1) text { + font-size: 32rpx; + line-height: 32rpx; + height: 32rpx; + color: #FFFFFF; + letter-spacing: 0; + width: 400rpx; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +.info view:nth-child(2) { + padding-left: 4%; + font-size: 22rpx; + color: #FFFFFF; + letter-spacing: 0; + margin-top: 6rpx; + display: inline-block; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 400rpx; +} + +.info view:nth-child(3) { + margin-left: 20rpx; +} + +.active { + color: #fff; + opacity: 0.6; + /* background: #02c0ff; */ +} + + +.expiretime { + display: block; + width: 100%; + text-align: left; + text-indent: 1em; + height: 50rpx; + line-height: 50rpx; + font-size: 22rpx; + color: #A6A6A6; + letter-spacing: 0; +} + +.ticket-title-tip { + position: relative; + width: 100%; + height: 76rpx; + line-height: 76rpx; + text-align: center; + color: #353535; + font-size: 34rpx; +} + +.close-icon { + position: absolute; + right: 10rpx; + transform: translateY(16rpx); +} + +.btns { + position: absolute; + right: 120rpx; + top: 50rpx; + height: 48rpx; + line-height: 48rpx; + text-align: right; + color: #FFF; + font-size: 40rpx; +} + +.yuan { + color: #FFF; + font-size: 26rpx; +} + +.gou { + position: absolute; + top:45rpx; + right: 30rpx; + width: 60rpx; +} \ No newline at end of file