@@ -15,6 +15,8 @@ | |||||
"pages/shop/index/index", | "pages/shop/index/index", | ||||
"pages/couponorder/index/index", | "pages/couponorder/index/index", | ||||
"pages/couponorder/detail/index", | "pages/couponorder/detail/index", | ||||
"pages/cardorder/index/index", | |||||
"pages/cardorder/detail/index", | |||||
"pages/order/detail/index", | "pages/order/detail/index", | ||||
"pages/order/index/index", | "pages/order/index/index", | ||||
"pages/success/index", | "pages/success/index", | ||||
@@ -168,7 +168,11 @@ var config = { | |||||
* | * | ||||
获取打折商户列表 | 获取打折商户列表 | ||||
*/ | */ | ||||
discountMerchantList:"/mall/discountMerchantList" | |||||
discountMerchantList:"/mall/discountMerchantList", | |||||
/** | |||||
* 卡包分页列表接口 | |||||
*/ | |||||
cardorderList:"/couponOrder/cardList" | |||||
}, | }, | ||||
weapp: { | weapp: { | ||||
@@ -0,0 +1,161 @@ | |||||
const util = require("../../../utils/util"); | |||||
const config = require("../../../config/config.js"); | |||||
const Http = require("../../../utils/HttpBasics"); | |||||
let app = getApp(); | |||||
//券详情页面 | |||||
Page({ | |||||
data: { | |||||
code: "", | |||||
data: { | |||||
salePrice: null, | |||||
price: null, | |||||
usePrice: null | |||||
}, | |||||
createDate: "", | |||||
expiredTime: "", | |||||
updateDate: "", | |||||
//存储计时器 | |||||
setInter: "", | |||||
staticGamedata: {}, | |||||
showIf: false, | |||||
}, | |||||
onUnload:function(){ | |||||
let that = this; | |||||
clearInterval(that.data.setInter); | |||||
}, | |||||
onHide:function(){ | |||||
let that = this; | |||||
clearInterval(that.data.setInter); | |||||
}, | |||||
gotogame: function () { | |||||
let that = this; | |||||
wx.navigateTo({ | |||||
url: '/pages/game/index?url=' + that.data.staticGamedata.url + "&id=" + that.data.staticGamedata.id + "&gameId=" + that.data.staticGamedata.gameId, | |||||
}) | |||||
}, | |||||
// 获取游戏 | |||||
getStaticGame(token) { | |||||
let _this = this; | |||||
Http.get({ | |||||
url: config.api.getGame, | |||||
data: { | |||||
triggleAction: 4 | |||||
} | |||||
}).then(res => { | |||||
if (res.data.id) { | |||||
_this.setData({ | |||||
showIf: true | |||||
}) | |||||
} | |||||
_this.setData({ | |||||
staticGamedata: res.data | |||||
}) | |||||
}) | |||||
.catch(err => { | |||||
wx.showToast({ | |||||
title: err.errMsg, | |||||
icon: 'none', | |||||
duration: 2000, | |||||
mask: false | |||||
}); | |||||
}) | |||||
}, | |||||
// onShow(options) { | |||||
// setTimeout(function () { | |||||
// wx.setScreenBrightness({ | |||||
// value: 0.7, | |||||
// }) | |||||
// }, 200) | |||||
// }, | |||||
onLoad: function (options) { | |||||
let that = this; | |||||
that.setData({ | |||||
code: options.quancode, | |||||
couponorderstatus: options.couponorderstatus | |||||
}); | |||||
//获得优惠券的详情 | |||||
that.data.setInter = setInterval(function () { | |||||
if ( | |||||
options.quancode && | |||||
that.data.couponorderstatus == 0 | |||||
) { | |||||
Http.get({ | |||||
url: config.api.couponOrderDetail, | |||||
data: { | |||||
couponOrderId: options.quancode | |||||
} | |||||
}).then(res => { | |||||
console.log(res); | |||||
that.setData({ | |||||
couponorderstatus: res.data.couponOrderStatus, | |||||
data: res.data | |||||
}); | |||||
if (res.data.couponOrderStatus == 1) { | |||||
/** | |||||
* 动态改变上一级页面的核销状态 | |||||
*/ | |||||
that.getStaticGame() | |||||
var pages = getCurrentPages(); | |||||
var prevPage = pages[pages.length - 2]; //上一个页面 | |||||
//直接调用上一个页面的setData()方法,把数据存到上一个页面中去 | |||||
prevPage.setData({ | |||||
mystatus: res.data.couponOrderStatus | |||||
}); | |||||
} | |||||
that.setData({ | |||||
expiredTime: util.formatTime(that.data.data.expiredTime, "yyyy-MM-dd hh:mm:ss"), | |||||
updateDate: util.formatTime(that.data.data.updateDate, "yyyy-MM-dd hh:mm:ss"), | |||||
createDate: util.formatTime(that.data.data.createDate, "yyyy-MM-dd hh:mm:ss") | |||||
}); | |||||
}) | |||||
.catch(err => { | |||||
wx.showToast({ | |||||
title: err.errMsg, | |||||
icon: 'none', | |||||
duration: 2000, | |||||
mask: false | |||||
}); | |||||
}) | |||||
} | |||||
}, 2000); | |||||
/** | |||||
* 页面需要初始渲染的效果 | |||||
*/ | |||||
Http.get({ | |||||
url: config.api.couponOrderDetail, | |||||
data: { | |||||
couponOrderId: options.quancode | |||||
} | |||||
}).then(res => { | |||||
that.setData({ | |||||
couponorderstatus: res.data.couponOrderStatus, | |||||
data: res.data | |||||
}); | |||||
that.setData({ | |||||
expiredTime: util.formatTime(that.data.data.expiredTime, "yyyy-MM-dd hh:mm:ss"), | |||||
updateDate: util.formatTime(that.data.data.updateDate, "yyyy-MM-dd hh:mm:ss"), | |||||
createDate: util.formatTime(that.data.data.createDate, "yyyy-MM-dd hh:mm:ss") | |||||
}); | |||||
util.barcode("barcode", options.quancode, 510, 100); | |||||
util.qrcode("qrcode", options.quancode, 350, 350); | |||||
}) | |||||
.catch(err => { | |||||
wx.showToast({ | |||||
title: err.errMsg, | |||||
icon: 'none', | |||||
duration: 2000, | |||||
mask: false | |||||
}); | |||||
}) | |||||
}, | |||||
phone: function (e) { | |||||
let that = this; | |||||
if (e.currentTarget.dataset.merchantlinkphone) { | |||||
wx.makePhoneCall({ | |||||
phoneNumber: e.currentTarget.dataset.merchantlinkphone | |||||
}); | |||||
} | |||||
} | |||||
}); |
@@ -0,0 +1,3 @@ | |||||
{ | |||||
"navigationBarTitleText": "使用优惠券" | |||||
} |
@@ -0,0 +1,100 @@ | |||||
<view class="container page"> | |||||
<view class="coupon_detail clearfix"> | |||||
<view class="fl wmfl"> | |||||
<image src="{{data.coverImg}}" mode='aspectFill' /> | |||||
</view> | |||||
<view class="fr"> | |||||
<text class="title">{{data.title}}</text> | |||||
<view class="time">{{data.subTitle}}</view> | |||||
<view class="money"> | |||||
<text>¥{{data.salePrice/100}}</text> | |||||
<del>¥{{data.price/100}}</del> | |||||
<text wx:if="{{data.usePrice!=undefined}}" class="manjian">满{{data.usePrice/100}}元可用</text> | |||||
<text wx:if="{{data.usePrice==undefined}}" class="manjian">仅限本店使用</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="timevalidity"> | |||||
<text>有效期至:</text> | |||||
<text>{{expiredTime}}</text> | |||||
</view> | |||||
<image class='line' mode="widthFix" src="./../../../assets/img/line.png"></image> | |||||
<view class="zhuangtai"> | |||||
<image wx:if="{{data.couponOrderStatus==1}}" src="./../../../assets/img/wm01.jpg" mode='widthFix'></image> | |||||
<image wx:if="{{data.couponOrderStatus==2}}" src="./../../../assets/img/wm02.jpg" mode='widthFix'></image> | |||||
<image wx:if="{{data.couponOrderStatus==3}}" src="./../../../assets/img/wm03.jpg" mode='widthFix'></image> | |||||
<view class="panel" wx:if="{{data.couponOrderStatus==0}}"> | |||||
<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> | |||||
<view class="posi"> | |||||
<view class="tit"> | |||||
适用门店 | |||||
</view> | |||||
<view wx:for="{{data.merchantVoList}}" wx:key="{{index}}"> | |||||
<view class='posi_logo'> | |||||
<view> | |||||
<image src='{{item.merchantImgUrl}}'></image> | |||||
</view> | |||||
<view> | |||||
<text>{{item.merchantName}}</text> | |||||
<text>{{item.addr}}{{item.buildingName}}{{item.floorName}}</text> | |||||
</view> | |||||
<view bindtap='phone' data-merchantLinkPhone='{{item.merchantLinkPhone}}'> | |||||
<image class="tel" src="./../../../assets/img/tel.jpg" mode="widthFix" /> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<image class='line' mode="widthFix" src="./../../../assets/img/line.png"></image> | |||||
<view class='note'> | |||||
<view style='height:60rpx;line-height:60rpx;'> | |||||
<text class="shiji">实付金额:</text> | |||||
<text class='moneys'>{{data.couponPrice/100}}</text> | |||||
<text style='font-size:24rpx;text-align:right;color: #FF4949;'>元</text> | |||||
</view> | |||||
<view wx:if="{{data.couponOrderStatus==0}}"> | |||||
<text>下单时间:</text> | |||||
<text>{{createDate}}</text> | |||||
</view> | |||||
<view wx:if="{{data.couponOrderStatus==1}}"> | |||||
<text>核销时间:</text> | |||||
<text>{{updateDate}}</text> | |||||
</view> | |||||
<view wx:if="{{data.couponOrderStatus==2}}"> | |||||
<text>过期时间:</text> | |||||
<text>{{updateDate}}</text> | |||||
</view> | |||||
<view wx:if="{{data.couponOrderStatus==3}}"> | |||||
<text>退款时间:</text> | |||||
<text>{{updateDate}}</text> | |||||
</view> | |||||
<view> | |||||
<text>订单编号:</text> | |||||
<text>{{data.orderId}}</text> | |||||
</view> | |||||
<!-- <view><text>手机号</text><text>2018.05.25</text></view> --> | |||||
</view> | |||||
<view class='notes' style="border-bottom:0"> | |||||
<view> | |||||
<text>购买须知</text> | |||||
</view> | |||||
<view> | |||||
<text><text class='spot'></text>{{data.remark}}</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class='game' bindtap="gotogame" wx-if="{{showIf}}"> | |||||
<view class='game-entry'> | |||||
<image src="./../../../assets/img/new.png" class='gameimg' mode='widthFix'></image> | |||||
</view> | |||||
</view> |
@@ -0,0 +1,356 @@ | |||||
.container { | |||||
background: #fff; | |||||
width: 92%; | |||||
margin: 8% auto 6%; | |||||
border-radius: 16rpx; | |||||
} | |||||
page { | |||||
background: #02c0ff; | |||||
height: auto !important; | |||||
padding-bottom: 20rpx; | |||||
} | |||||
.panel, .zhuangtai image { | |||||
position: relative; | |||||
width: 600rpx; | |||||
display: block; | |||||
border-radius: 10rpx; | |||||
margin: 38rpx auto 0; | |||||
padding: 0; | |||||
z-index: 10000000000; | |||||
} | |||||
.pane2 { | |||||
background: #fff; | |||||
opacity: 0.6; | |||||
} | |||||
.pane2 image { | |||||
width: 500rpx; | |||||
display: block; | |||||
margin: 40rpx auto 0; | |||||
} | |||||
.buy { | |||||
background: #fff; | |||||
height: 88rpx; | |||||
width: 98%; | |||||
color: #7e7e7e; | |||||
line-height: 88rpx; | |||||
border-radius: 16rpx; | |||||
border: 1px solid #eee; | |||||
} | |||||
.barcode { | |||||
height: 100rpx; | |||||
width: 510rpx; | |||||
margin: 0 auto; | |||||
} | |||||
.barnum { | |||||
background: #fff; | |||||
height: 88rpx; | |||||
width: 100%; | |||||
margin: 0 auto; | |||||
line-height: 88rpx; | |||||
border: 2rpx solid #ccc; | |||||
border-radius: 10px; | |||||
font-size: 36rpx; | |||||
color: #333; | |||||
letter-spacing: 0; | |||||
text-align: center; | |||||
} | |||||
.barnum text { | |||||
display: inline-block; | |||||
vertical-align: top; | |||||
font-size: 24rpx; | |||||
color: #999; | |||||
letter-spacing: 0; | |||||
margin-right: 6rpx; | |||||
} | |||||
.barcode > canvas { | |||||
width: 510rpx; | |||||
height: 100rpx; | |||||
} | |||||
.qrcode { | |||||
position: relative; | |||||
height: 350rpx; | |||||
width: 350rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
justify-content: flex-end; | |||||
align-items: center; | |||||
margin: 0 auto; | |||||
} | |||||
.qrcode > canvas { | |||||
width: 350rpx; | |||||
height: 350rpx; | |||||
} | |||||
.coupon_detail { | |||||
position: relative; | |||||
} | |||||
.coupon_detail .wmfl { | |||||
position: absolute; | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
left: 0; | |||||
right: 0; | |||||
margin: auto; | |||||
top: -50rpx; | |||||
border-radius: 50%; | |||||
overflow: hidden; | |||||
} | |||||
.coupon_detail image { | |||||
display: block; | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.coupon_detail .fr { | |||||
width: 100%; | |||||
text-align: center; | |||||
} | |||||
.coupon_detail .title { | |||||
font-size: 32rpx; | |||||
color: #1f2d3d; | |||||
letter-spacing: 0; | |||||
text-align: center; | |||||
display: block; | |||||
padding-top: 92rpx; | |||||
line-height: 45rpx; | |||||
} | |||||
.line { | |||||
height: 10rpx; | |||||
display: block; | |||||
width: 100%; | |||||
margin-top: 20rpx; | |||||
} | |||||
.time { | |||||
font-size: 26rpx; | |||||
color: #999; | |||||
letter-spacing: 0; | |||||
text-align: center; | |||||
line-height: 37rpx; | |||||
padding: 0 10rpx; | |||||
} | |||||
.time text { | |||||
font-size: 26rpx; | |||||
color: red; | |||||
} | |||||
.money text { | |||||
color: red; | |||||
font-size: 36rpx; | |||||
} | |||||
.money del { | |||||
color: #999; | |||||
font-size: 26rpx; | |||||
text-decoration: line-through; | |||||
margin-left: 20rpx; | |||||
} | |||||
.clearfix:after { | |||||
content: "."; | |||||
display: block; | |||||
height: 0; | |||||
clear: both; | |||||
visibility: hidden; | |||||
} | |||||
.timevalidity { | |||||
text-align: center; | |||||
} | |||||
.timevalidity text:nth-of-type(1) { | |||||
font-size: 22rpx; | |||||
color: #999; | |||||
letter-spacing: 0; | |||||
text-align: left; | |||||
} | |||||
.timevalidity text:nth-of-type(2) { | |||||
font-size: 22rpx; | |||||
color: #999; | |||||
letter-spacing: 0; | |||||
text-align: left; | |||||
} | |||||
.posi { | |||||
width: 100%; | |||||
display: flex; | |||||
flex-direction: column; | |||||
background: #fff; | |||||
position: relative; | |||||
} | |||||
.posi_logo { | |||||
width: 92%; | |||||
padding: 30rpx 4% 0; | |||||
display: flex; | |||||
position: relative; | |||||
} | |||||
.shiji { | |||||
font-size: 24rpx !important; | |||||
color: #919191 !important; | |||||
letter-spacing: 0; | |||||
} | |||||
.posi_logo view:nth-child(1) { | |||||
width: 126rpx; | |||||
height: 126rpx; | |||||
overflow: hidden; | |||||
flex: 2; | |||||
border: 2rpx solid #e7e7e7; | |||||
border-radius: 16rpx; | |||||
} | |||||
.posi_logo view:nth-child(1) image { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.posi_logo view:nth-child(2) { | |||||
position: relative; | |||||
display: flex; | |||||
flex-direction: column; | |||||
flex: 8; | |||||
padding-left: 30rpx; | |||||
} | |||||
.posi_logo view:nth-child(2) text:nth-child(1) { | |||||
font-size: 30rpx; | |||||
width: 320rpx; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
overflow: hidden; | |||||
} | |||||
.posi_logo view:nth-child(2) text:nth-child(2) { | |||||
font-size: 24rpx; | |||||
color: #b8b8b8; | |||||
padding-top: 10rpx; | |||||
width: 386rpx; | |||||
white-space: wrap; | |||||
text-overflow: ellipsis; | |||||
overflow: hidden; | |||||
height: 78rpx; | |||||
} | |||||
.tit { | |||||
padding: 53rpx 0 0; | |||||
text-indent: 30rpx; | |||||
font-size: 24rpx; | |||||
color: #919191; | |||||
letter-spacing: 0; | |||||
} | |||||
.tel { | |||||
position: absolute; | |||||
right: 30rpx; | |||||
top: 0; | |||||
bottom: 0; | |||||
margin: auto; | |||||
width: 50rpx; | |||||
height: 50rpx; | |||||
z-index: 10; | |||||
} | |||||
.notes view:nth-child(1) { | |||||
width: 92%; | |||||
height: 87rpx; | |||||
padding: 0 4%; | |||||
line-height: 87rpx; | |||||
background: #fff; | |||||
} | |||||
.notes view:nth-child(1) text { | |||||
font-size: 24rpx; | |||||
color: #919191; | |||||
letter-spacing: 0; | |||||
} | |||||
.notes view:nth-child(2) { | |||||
width: 92%; | |||||
padding: 0 4%; | |||||
background: #fff; | |||||
display: flex; | |||||
flex-direction: column; | |||||
padding-top: 2%; | |||||
} | |||||
.notes view:nth-child(2) > text { | |||||
font-size: 24rpx; | |||||
color: #333; | |||||
letter-spacing: 0; | |||||
line-height: 42rpx; | |||||
} | |||||
.notes { | |||||
border-bottom-left-radius: 16rpx; | |||||
border-bottom-right-radius: 16rpx; | |||||
padding-bottom: 30rpx; | |||||
} | |||||
.note view { | |||||
height: 48rpx; | |||||
line-height: 48rpx; | |||||
} | |||||
.note view text { | |||||
display: inline-block; | |||||
} | |||||
.note text:nth-of-type(1) { | |||||
width: 22%; | |||||
text-indent: 30rpx; | |||||
text-align: left; | |||||
font-size: 24rpx; | |||||
color: #333; | |||||
letter-spacing: 1.16rpx; | |||||
} | |||||
.note text:nth-of-type(2) { | |||||
width: 67%; | |||||
font-size: 24rpx; | |||||
color: #333; | |||||
letter-spacing: 1.16rpx; | |||||
} | |||||
.manjian { | |||||
margin-left: 26rpx; | |||||
color: #666 !important; | |||||
font-size: 26rpx !important; | |||||
} | |||||
.moneys { | |||||
font-size: 40rpx !important; | |||||
color: #ff4949 !important; | |||||
letter-spacing: 0; | |||||
text-align: right; | |||||
} | |||||
.game-entry{ | |||||
width: 690rpx; | |||||
height: 140rpx; | |||||
margin: 10rpx auto 0; | |||||
} | |||||
.gameimg{ | |||||
display: block; | |||||
width: 100%; | |||||
height: 140rpx; | |||||
} |
@@ -0,0 +1,134 @@ | |||||
const util = require("../../../utils/util.js"); | |||||
const config = require("../../../config/config.js"); | |||||
const Http = require("../../../utils/HttpBasics"); | |||||
let app = getApp(); | |||||
Page({ | |||||
data: { | |||||
tabs: [{ | |||||
key: 0, | |||||
name: "使用中" | |||||
}, | |||||
{ | |||||
key: 1, | |||||
name: "已失效" | |||||
} | |||||
], | |||||
list: [], | |||||
current: "0", | |||||
current_scroll: "0", | |||||
page: 1, | |||||
allow_load: true, | |||||
loading: true, //"上拉加载"的变量,默认false,隐藏 | |||||
content: "", | |||||
mystatus: '', | |||||
showPage:false | |||||
}, | |||||
onLoad() { | |||||
this.getList(0, 1); | |||||
}, | |||||
onShow: function () { | |||||
let that = this; | |||||
wx.setStorage({ | |||||
key: 'couponNum', | |||||
data: "couponNum1", | |||||
}) | |||||
wx.hideTabBarRedDot({ | |||||
index:2 | |||||
}) | |||||
}, | |||||
//点击跳转到券详情页面 | |||||
gotouse: function (e) { | |||||
if (this.data.mystatus == '' || this.data.mystatus == 'undefined') { | |||||
var mystatus = e.currentTarget.dataset.couponorderstatus; | |||||
} else { | |||||
var mystatus = this.data.mystatus; | |||||
} | |||||
wx.navigateTo({ | |||||
url: `/pages/couponorder/detail/index?quancode=${ | |||||
e.currentTarget.dataset.quancode}&couponorderstatus=${mystatus}` | |||||
}); | |||||
}, | |||||
getList(key, pageNum) { | |||||
var that = this; | |||||
if (that.data.allow_load) { | |||||
that.setData({ | |||||
loading: true, | |||||
content: "小主,我在玩命加载中...", | |||||
}); | |||||
Http.get({ | |||||
url: config.api.cardorderList, | |||||
data: { | |||||
pageNum: pageNum, | |||||
pageSize: 6, | |||||
couponType:7 | |||||
} | |||||
}) | |||||
.then(res => { | |||||
if(res.code == 200){ | |||||
that.setData({ | |||||
showPage:true | |||||
}) | |||||
} | |||||
res.data.list.map(file => { | |||||
file.expiredTime = util.fmtDate(file.expiredTime); | |||||
}); | |||||
setTimeout(function () { | |||||
that.setData({ | |||||
loading: false | |||||
}); | |||||
}, 1400); | |||||
if (pageNum >= res.data.pages) { | |||||
that.setData({ | |||||
allow_load: false | |||||
}); | |||||
} | |||||
if (pageNum == 1) { | |||||
that.setData({ | |||||
list: [] | |||||
}) | |||||
} | |||||
var tmpArr = that.data.list; | |||||
tmpArr.push.apply(tmpArr, res.data.list); | |||||
that.setData({ | |||||
list: tmpArr | |||||
}) | |||||
}) | |||||
.catch(err => { | |||||
wx.showModal({ | |||||
title: '提示', | |||||
content: err.errMsg, | |||||
showCancel:false | |||||
}) | |||||
}) | |||||
} else { | |||||
that.setData({ | |||||
loading: true, | |||||
content: "——— 再拉裤子就掉了啦 ———" | |||||
}); | |||||
setTimeout(function () { | |||||
that.setData({ | |||||
loading: false | |||||
}); | |||||
}, 1400); | |||||
} | |||||
}, | |||||
handleChangeScroll({ | |||||
detail | |||||
}) { | |||||
this.setData({ | |||||
list: [], | |||||
allow_load: true, | |||||
current_scroll: detail.key, | |||||
page:1, | |||||
}); | |||||
this.getList(detail.key, 1); | |||||
}, | |||||
onReachBottom: function () { | |||||
var that = this; | |||||
that.data.page++; | |||||
that.setData({ | |||||
page: that.data.page | |||||
}); | |||||
that.getList(that.data.current_scroll, that.data.page); | |||||
} | |||||
}); |
@@ -0,0 +1,7 @@ | |||||
{ | |||||
"usingComponents": { | |||||
"i-tab": "../../../dist/tab/index", | |||||
"i-tabs": "../../../dist/tabs/index" | |||||
}, | |||||
"navigationBarTitleText": "我的卡包" | |||||
} |
@@ -0,0 +1,44 @@ | |||||
<view class="market" wx:if="{{showPage}}"> | |||||
<!-- 券包 我的优惠券 --> | |||||
<i-tabs class='tabs' current="{{ current_scroll }}" scroll bindchange="handleChangeScroll"> | |||||
<i-tab class='i-tab' wx:for="{{tabs}}" wx:key="unique" key="{{item.key}}" title="{{item.name}}"></i-tab> | |||||
</i-tabs> | |||||
<view style='padding-top:120rpx;'> | |||||
<view class="nocoupon" wx:if="{{list.length==0}}"> | |||||
<image src="./../../../assets/img/coupon.png" mode="widthFix" /> | |||||
<text class="txt001">请您敬请期待</text> | |||||
<text class='txt002'>我们正在筹备一大波优惠活动</text> | |||||
<navigator class='nav' url="/pages/index/index" open-type="switchTab" hover-class="other-navigator-hover"> | |||||
<button hover-class='active'>前往首页看看</button> | |||||
</navigator> | |||||
</view> | |||||
<view class='section' wx:for='{{list}}' wx:key='{{index}}' bindtap="gotouse" data-quancode="{{item.id}}" data-couponorderstatus="{{item.couponOrderStatus}}"> | |||||
<view class='mms'> | |||||
<view class='detail_msg'> | |||||
<view class='logo'> | |||||
<image mode="aspectFill" src='{{item.coverImg}}'></image> | |||||
</view> | |||||
<view class='info'> | |||||
<view class='title'> | |||||
<text>{{item.title}}</text> | |||||
</view> | |||||
<view class='subtitle'> | |||||
<text>{{item.subTitle}}</text> | |||||
</view> | |||||
<view hover-class='active' wx:if="{{item.couponOrderStatus==0}}" class="btns">去使用</view> | |||||
<view hover-class='active' wx:elif="{{item.couponOrderStatus==1||item.couponOrderStatus==2||item.couponOrderStatus==3}}" class="btns">查看</view> | |||||
</view> | |||||
</view> | |||||
<image class="liness" src='./../../../assets/img/liness.png' mode="widthFix"></image> | |||||
<view class='expiretime'> | |||||
<text class="txt1">有效期至:</text> | |||||
<text class="txt2">{{item.expiredTime}}</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="loading" wx:if="{{loading}}"> | |||||
<image src="./../../../assets/img/loading.gif" mode="widthFix"></image>{{content}} | |||||
</view> | |||||
</view> | |||||
</view> |
@@ -0,0 +1,205 @@ | |||||
.market { | |||||
width: 100%; | |||||
height: 100%; | |||||
/* background: #f5f5f5; */ | |||||
} | |||||
.tabs { | |||||
width: 100% !important; | |||||
height: 88rpx; | |||||
text-align: center; | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
right: 0; | |||||
z-index: 100000; | |||||
} | |||||
.i-tab { | |||||
width: 25% !important; | |||||
display: inline-block; | |||||
} | |||||
.section { | |||||
position: relative; | |||||
} | |||||
.mms { | |||||
width: 690rpx; | |||||
height: 170rpx !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-bottom: 26rpx; | |||||
} | |||||
.expiretime { | |||||
display: block; | |||||
width: 100%; | |||||
text-align: left; | |||||
text-indent: 1em; | |||||
height: 40rpx; | |||||
line-height: 36rpx; | |||||
font-size: 22rpx; | |||||
color: #333; | |||||
letter-spacing: 0; | |||||
} | |||||
.liness { | |||||
display: block; | |||||
width: 100%; | |||||
} | |||||
.logo { | |||||
width: 60rpx; | |||||
height: 60rpx; | |||||
border: 1px solid #f8f8f8; | |||||
border-radius: 50rpx; | |||||
display: block; | |||||
margin-left: 20rpx; | |||||
} | |||||
.logo image { | |||||
width: 60rpx; | |||||
height: 60rpx; | |||||
border-radius: 50%; | |||||
} | |||||
.info view:nth-child(1) { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 2%; | |||||
} | |||||
.info { | |||||
width: 100%; | |||||
} | |||||
.info view:nth-child(1) text { | |||||
font-size: 32rpx; | |||||
line-height: 32rpx; | |||||
height: 32rpx; | |||||
color: #333; | |||||
letter-spacing: 0; | |||||
width: 400rpx; | |||||
display: inline-block; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
overflow: hidden; | |||||
} | |||||
.info view:nth-child(2) { | |||||
padding-left: 2%; | |||||
font-size: 22rpx; | |||||
color: #333; | |||||
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; | |||||
} | |||||
.btns { | |||||
position: absolute; | |||||
right: 57rpx; | |||||
top: 38rpx; | |||||
width: 120rpx; | |||||
height: 48rpx; | |||||
line-height: 48rpx; | |||||
text-align: center; | |||||
border: 2rpx solid #02c0ff; | |||||
border-radius: 60rpx; | |||||
color: #02c0ff; | |||||
font-size: 28rpx; | |||||
} | |||||
.active { | |||||
color: #fff; | |||||
background: #02c0ff; | |||||
} | |||||
.txt1 { | |||||
font-size: 22rpx; | |||||
color: #333; | |||||
letter-spacing: 0; | |||||
} | |||||
.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; | |||||
} | |||||
.txt002 { | |||||
display: block; | |||||
margin-top: 1%; | |||||
font-size: 28rpx; | |||||
color: #999; | |||||
letter-spacing: 0; | |||||
line-height: 40rpx; | |||||
text-align: center; | |||||
} | |||||
.nocoupon button { | |||||
background: #00c0ff; | |||||
color: #fff; | |||||
font-style: 30rpx; | |||||
width: 100%; | |||||
border-radius: 60rpx; | |||||
} | |||||
.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; | |||||
} | |||||
.active { | |||||
opacity: 0.6; | |||||
} | |||||
.nav { | |||||
position: absolute; | |||||
bottom: 3.3%; | |||||
left: 0; | |||||
right: 0; | |||||
margin: auto; | |||||
width: 670rpx; | |||||
border-radius: 60rpx; | |||||
background: #02c0ff; | |||||
font-size: 32px; | |||||
color: #fff; | |||||
text-align: center; | |||||
line-height: 32px; | |||||
} |
@@ -54,7 +54,17 @@ | |||||
<navigator url="/pages/couponorder/index/index"> | <navigator url="/pages/couponorder/index/index"> | ||||
<view class="user-btn app-border-bottom"> | <view class="user-btn app-border-bottom"> | ||||
<view> | <view> | ||||
<image class='icons' style='width:44rpx;' src="./../../assets/img/quans.png" mode='widthFix'></image>券包</view> | |||||
<image class='icons' style='width:44rpx;' src="./../../assets/img/quans.png" mode='widthFix'></image>我的券包</view> | |||||
<view> | |||||
<text class="couponnum" wx:if="{{couponNum=='couponNum'}}"></text> | |||||
<text class="iconfont icon-right"></text> | |||||
</view> | |||||
</view> | |||||
</navigator> | |||||
<navigator url="/pages/cardorder/index/index"> | |||||
<view class="user-btn app-border-bottom"> | |||||
<view> | |||||
<image class='icons' style='width:44rpx;' src="./../../assets/img/quans.png" mode='widthFix'></image>我的卡包</view> | |||||
<view> | <view> | ||||
<text class="couponnum" wx:if="{{couponNum=='couponNum'}}"></text> | <text class="couponnum" wx:if="{{couponNum=='couponNum'}}"></text> | ||||
<text class="iconfont icon-right"></text> | <text class="iconfont icon-right"></text> | ||||