浏览代码

停车优惠券的弹框

tags/河北版C.8.1.01
caserKing 5 年前
父节点
当前提交
195fe7614d
共有 3 个文件被更改,包括 416 次插入12 次删除
  1. +152
    -3
      pages/passCar/passCar.js
  2. +50
    -1
      pages/passCar/passCar.wxml
  3. +214
    -8
      pages/passCar/passCar.wxss

+ 152
- 3
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 => {


+ 50
- 1
pages/passCar/passCar.wxml 查看文件

@@ -38,10 +38,11 @@
</view>

<view class='coupon clearfix' bindtap='gotoquan' wx:if="{{couponList.length>0}}">
<!-- <view class='coupon clearfix' bindtap='openTicketModal' wx:if="{{couponList.length>0}}"> -->
<text class='fl'><text class='jians'>券</text>优惠券:</text>
<view class="fr">
<text wx:if="{{quantitle}}">{{quantitle}}</text>
<text wx:else>{{couponList.length}}张可用</text>
<text wx:else>{{totalTicketNum}}张可用</text>
<image class='jiant' src='{{jianUrl}}' mode='widthFix'></image>
</view>
</view>
@@ -109,4 +110,52 @@
<image class="img" src="{{qidaiUrl}}" mode="widthFix"></image>
<text class="txt1">智慧停车即将上线</text>
<text class="txt2">敬请期待</text>
</view>
<!-- -->
<view bindtap="closeTicketModal" class="gray-bg" wx:if="{{showTicketModal}}"></view>
<view class="ticket-modal" wx:if="{{showTicketModal}}">
<view style='padding-top:0;'>
<view class="nocoupon" wx:if="{{ticketList.length==0}}" style="margin-top:100rpx;">
<image src="{{noCoupon}}" mode="widthFix" />
<text class="txt001">请您敬请期待</text>
<text class='txt002'>我们正在筹备一大波优惠活动</text>
<navigator class='nav' url="/pages/main/index" open-type="switchTab" hover-class="other-navigator-hover">
<button hover-class='active'>前往首页看看</button>
</navigator>
</view>
<view wx:if="{{ticketList.length>0}}" class="ticket-title-tip">
<text>停车券</text>
<icon bindtap="closeTicketModal" class="close-icon" type="cancel"></icon>
</view>
<scroll-view bindscrolltolower="getMoreList" scroll-y style="height:800rpx;">
<view class='section' wx:for='{{ticketList}}' wx:key='{{index}}' bindtap="choicecoupon" data-title="{{item.title}}" data-id="{{item.id}}">
<view class='mms'>
<!-- <text>{{index}}</text> -->
<image class='gou' wx:if="{{item.id==quanid}}" mode='widthFix' src='{{gouHr}}'></image>
<view class='detail_msg'>
<view class='info'>
<view class='title'>
<text>{{item.title}}</text>
</view>
<view class='subtitle'>
<text>{{item.subTitle}}</text>
</view>
<view class="btns">
<text class='yuan' style='margin-right:10rpx;'>售价:{{item.salePrice/100}}元</text><text class='yuan' style='text-decoration:line-through' wx:if="{{item.unit==0}}">{{item.price/100}}元</text>
<text class='yuan' style='text-decoration:line-through' wx:if="{{item.unit==1}}">{{item.price/100}}小时</text>
</view>
</view>
</view>
<!-- <image class="liness" src='{{linessUrl}}' mode="widthFix"></image> -->
<view class='expiretime'>
<text class="txt1">有效期至:</text>
<text class="txt1">{{item.expiredTime}}</text>
</view>
</view>
</view>
</scroll-view>
<view class="loading" wx:if="{{loading}}">
<image src="{{loadingUrl}}" mode="widthFix"></image>{{content}}
</view>
</view>
</view>

+ 214
- 8
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;
}

正在加载...
取消
保存