parent
fd039f2c04
commit
912c398e24
@ -0,0 +1,499 @@ |
||||
<template> |
||||
<view> |
||||
<view class="tabr" :style="{top:headerTop}"> |
||||
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">待使用</view> |
||||
<!-- <view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已使用</view> --> |
||||
<view :class="{on:typeClass=='noinvalid'}" @tap="switchType('noinvalid')">已过期</view> |
||||
</view> |
||||
|
||||
<view class="place"></view> |
||||
<view class="list"> |
||||
<!-- 优惠券列表 --> |
||||
<view class="sub-list" v-if="typeClass == 'valid'"> |
||||
<view class="tis" v-if="couponValidList.length==0"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="row" v-for="(row,index) in couponValidList" :key="index"> |
||||
<!-- content --> |
||||
<view class="carrier"> |
||||
<view class="left"> |
||||
<view class="title alijusstart"> |
||||
<view class="text1 width70">{{row.discountActivityName}}</view> |
||||
</view> |
||||
<view class="term fcoreb5"> |
||||
剩余次数:{{row.partakeSurplusNum}} |
||||
</view> |
||||
<view class="term fcor999"> |
||||
有效期:{{row.endTime | formatDate('-')}} |
||||
</view> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="ticket" style="background-color: #009DFF;padding-top: 1vw;"> |
||||
<view class="num" v-if="row.discountType == 3"> |
||||
{{row.discountPrice * 10}} |
||||
</view> |
||||
<view class="num" v-else> |
||||
{{row.discountPrice}} |
||||
</view> |
||||
<view class="unit margle" v-if="row.discountType == 3"> |
||||
折 |
||||
</view> |
||||
<view class="unit margle" v-else> |
||||
元 |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<!-- //已使用 --> |
||||
<!-- <view class="sub-list" v-if="typeClass == 'invalid'"> |
||||
<view class="tis" v-if="couponinvalidList.length==0"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="row" v-for="(row,index) in couponinvalidList" :key="index"> |
||||
<view class="carrier"> |
||||
<view class="left"> |
||||
<view class="title alijusstart"> |
||||
<view class="text1 width70">{{row.discountName}}</view> |
||||
</view> |
||||
<view class="term"> |
||||
有效期:{{row.useEndTime | formatDate('-')}} |
||||
</view> |
||||
<image src="../../../static/img/user/use.png" mode="widthFix" |
||||
style="position: absolute;right: 5px;top: 5px;" class="icon50"></image> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> --> |
||||
<!-- 已过期 --> |
||||
<view class="sub-list" v-if="typeClass == 'noinvalid'"> |
||||
<view class="tis" v-if="couponnoinvalidList.length==0"> |
||||
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
||||
</view> |
||||
<view class="row" v-for="(row,index) in couponnoinvalidList" :key="index"> |
||||
<view class="carrier"> |
||||
<view class="left"> |
||||
<view class="title alijusstart"> |
||||
<view class="text1 width70">{{row.discountActivityName}}</view> |
||||
</view> |
||||
<view class="term fcoreb5"> |
||||
剩余次数:{{row.partakeSurplusNum}} |
||||
</view> |
||||
<view class="term fcor999"> |
||||
有效期:{{row.endTime | formatDate('-')}} |
||||
</view> |
||||
<image src="../../../static/img/user/overdue.png" mode="widthFix" |
||||
style="position: absolute;right: 5px;top: 5px;" class="icon50"></image> |
||||
</view> |
||||
<view class="right"> |
||||
<view class="ticket" style="background-color: #999999;"> |
||||
<view class="num" v-if="row.discountType == 3"> |
||||
{{row.discountPrice * 10}} |
||||
</view> |
||||
<view class="num" v-else> |
||||
{{row.discountPrice}} |
||||
</view> |
||||
<view class="unit margle" v-if="row.discountType == 3"> |
||||
折 |
||||
</view> |
||||
<view class="unit margle" v-else> |
||||
元 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
queryHzfDiscountList |
||||
} from '../../../Utils/Api.js'; |
||||
// #ifdef H5 |
||||
var wx = require('jweixin-module'); |
||||
// #endif |
||||
let app = getApp(); |
||||
export default { |
||||
data() { |
||||
return { |
||||
couponValidList: [], |
||||
couponinvalidList: [], |
||||
couponnoinvalidList: [], |
||||
imagewxUrl: app.globalData.imageWxImg, |
||||
imgadres: 'noorder.png', |
||||
headerTop: 0, |
||||
headerswiperTop: '45px', |
||||
//控制滑动效果 |
||||
typeClass: 'valid', |
||||
subState: '', |
||||
theIndex: null, |
||||
oldIndex: null, |
||||
isStop: false, |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
isNoMoreData: false, |
||||
loadingText: '', |
||||
couponcout: 0, |
||||
statusid: '' //状态 |
||||
} |
||||
}, |
||||
onPageScroll(e) { |
||||
|
||||
}, |
||||
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true |
||||
onPullDownRefresh() { |
||||
setTimeout(function() { |
||||
uni.stopPullDownRefresh(); |
||||
}, 1000); |
||||
}, |
||||
created() {}, |
||||
onLoad() { |
||||
// #ifdef H5 |
||||
this.headerTop = '44PX'; |
||||
this.headerswiperTop = '89px'; |
||||
// #endif |
||||
this.queryHzfDiscountList(1); |
||||
}, |
||||
filters: { |
||||
//过滤器 用于格式化时间 |
||||
formatDate: function(value, spe = '/') { |
||||
let data = new Date(value); |
||||
let year = data.getFullYear(); |
||||
let month = data.getMonth() + 1; |
||||
let day = data.getDate(); |
||||
let h = data.getHours(); |
||||
let mm = data.getMinutes(); |
||||
let s = data.getSeconds(); |
||||
month = month >= 10 ? month : "0" + month; |
||||
day = day >= 10 ? day : "0" + day; |
||||
h = h >= 10 ? h : "0" + h; |
||||
mm = mm >= 10 ? mm : "0" + mm; |
||||
s = s >= 10 ? s : "0" + s; |
||||
return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; |
||||
}, |
||||
//过滤器 用于格式化状态 |
||||
msgFormat: function(value, value1) { |
||||
for (var i = 0; i < value.length; i++) { |
||||
if (value1 == value[i].codeValue) { |
||||
let a = value[i].codeName; |
||||
return a; |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
onReachBottom() { |
||||
if (this.typeClass == 'valid') { |
||||
this.queryHzfDiscountList(1); |
||||
} else { |
||||
this.queryHzfDiscountList(2); |
||||
} |
||||
}, |
||||
methods: { |
||||
//查询我的优惠券 |
||||
queryHzfDiscountList(item) { |
||||
this.statusid = item; |
||||
uni.showLoading({ |
||||
title: '加载中...' |
||||
}) |
||||
if (this.isNoMoreData) { |
||||
uni.hideLoading() |
||||
this.loadingText = '到底了'; |
||||
return false; |
||||
} |
||||
let pagenum = this.pageNum; |
||||
let params = { |
||||
pageNum: pagenum, |
||||
status: item, |
||||
pageSize: this.pageSize, |
||||
} |
||||
queryHzfDiscountList(params).then(res => { |
||||
if (res.return_code == '000000') { |
||||
uni.hideLoading(); |
||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
||||
if (res.return_data.total == (this.pageNum * this.pageSize)) { |
||||
this.isNoMoreData = true; |
||||
} |
||||
if (this.typeClass == 'valid') { |
||||
this.couponValidList = this.couponValidList.concat(res.return_data.list); |
||||
this.couponcout = res.return_data.total; |
||||
} else if (this.typeClass == 'invalid') { |
||||
this.couponinvalidList = this.couponinvalidList.concat(res.return_data.list); |
||||
} else { |
||||
this.couponnoinvalidList = this.couponnoinvalidList.concat(res.return_data.list); |
||||
} |
||||
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
||||
} else { |
||||
this.couponValidList = []; |
||||
this.couponinvalidList = []; |
||||
this.couponnoinvalidList = []; |
||||
uni.hideLoading() |
||||
} |
||||
}) |
||||
}, |
||||
|
||||
switchType(type) { |
||||
if (this.typeClass == type) { |
||||
return; |
||||
} |
||||
uni.pageScrollTo({ |
||||
scrollTop: 0, |
||||
duration: 0 |
||||
}) |
||||
this.typeClass = type; |
||||
this.subState = this.typeClass == '' ? '' : 'show' + type; |
||||
if (this.typeClass == 'valid') { |
||||
this.pageNum = 1; |
||||
this.couponValidList = [] |
||||
this.isNoMoreData = false; |
||||
this.queryHzfDiscountList(1); |
||||
} else { |
||||
this.pageNum = 1; |
||||
this.couponnoinvalidList = [] |
||||
this.isNoMoreData = false; |
||||
this.queryHzfDiscountList(2); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss"> |
||||
view { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
|
||||
page { |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
.place { |
||||
width: 100%; |
||||
height: 50px; |
||||
} |
||||
|
||||
.tabr { |
||||
background-color: #fff; |
||||
width: 94%; |
||||
height: 95upx; |
||||
padding: 0 3%; |
||||
border-bottom: solid 1upx #dedede; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 10; |
||||
|
||||
view { |
||||
width: 50%; |
||||
height: 90upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
color: #999; |
||||
} |
||||
|
||||
.on { |
||||
color: #0083f5; |
||||
border-bottom: 2px solid #0083f5; |
||||
} |
||||
|
||||
} |
||||
|
||||
.list { |
||||
width: 100%; |
||||
display: block; |
||||
position: relative; |
||||
} |
||||
|
||||
@keyframes showValid { |
||||
0% { |
||||
transform: translateX(-100%); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0); |
||||
} |
||||
} |
||||
|
||||
@keyframes showInvalid { |
||||
0% { |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(-100%); |
||||
} |
||||
} |
||||
|
||||
@keyframes shownoInvalid { |
||||
0% { |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(-200%); |
||||
} |
||||
} |
||||
|
||||
.sub-list { |
||||
&.invalid { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 100%; |
||||
display: none; |
||||
} |
||||
|
||||
&.showvalid { |
||||
display: flex; |
||||
animation: showValid 0.20s linear both; |
||||
} |
||||
|
||||
&.showinvalid { |
||||
display: flex; |
||||
animation: showInvalid 0.20s linear both; |
||||
} |
||||
|
||||
&.shownoinvalid { |
||||
display: flex; |
||||
animation: shownoInvalid 0.20s linear both; |
||||
} |
||||
|
||||
width: 100%; |
||||
padding: 20upx 0 120upx 0; |
||||
|
||||
.tis { |
||||
width: 100%; |
||||
height: 60upx; |
||||
justify-content: center; |
||||
align-items: center; |
||||
font-size: 32upx; |
||||
} |
||||
|
||||
.row { |
||||
width: 92%; |
||||
height: 27vw; |
||||
margin: 20upx auto 10upx auto; |
||||
border-radius: 8upx; |
||||
// box-shadow: 0upx 0 10upx rgba(0,0,0,0.1); |
||||
align-items: center; |
||||
position: relative; |
||||
overflow: hidden; |
||||
z-index: 4; |
||||
border: 0; |
||||
|
||||
.menu { |
||||
.icon { |
||||
color: #fff; |
||||
font-size: 50upx; |
||||
} |
||||
|
||||
position: absolute; |
||||
width: 28%; |
||||
height: 100%; |
||||
right: 0; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: red; |
||||
color: #fff; |
||||
z-index: 2; |
||||
} |
||||
|
||||
.carrier { |
||||
@keyframes showMenu { |
||||
0% { |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(-28%); |
||||
} |
||||
} |
||||
|
||||
@keyframes closeMenu { |
||||
0% { |
||||
transform: translateX(-28%); |
||||
} |
||||
|
||||
100% { |
||||
transform: translateX(0); |
||||
} |
||||
} |
||||
|
||||
&.open { |
||||
animation: showMenu 0.25s linear both; |
||||
} |
||||
|
||||
&.close { |
||||
animation: closeMenu 0.15s linear both; |
||||
} |
||||
|
||||
position: absolute; |
||||
width: 100%; |
||||
padding: 0 0; |
||||
height: 100%; |
||||
z-index: 3; |
||||
flex-wrap: nowrap; |
||||
|
||||
.left { |
||||
background-color: #fff; |
||||
width: 72%; |
||||
background-image: radial-gradient(6px at top right, #ffffff 50px, #ffffff); |
||||
|
||||
.title { |
||||
width: 90%; |
||||
margin: 0 5%; |
||||
font-size: 36upx; |
||||
} |
||||
|
||||
.term { |
||||
width: 95%; |
||||
background-image: radial-gradient(6px at bottom right, #ffffff 50px, #ffffff); |
||||
margin-left: 5%; |
||||
font-size: 26upx; |
||||
} |
||||
|
||||
position: relative; |
||||
} |
||||
|
||||
.right { |
||||
flex-shrink: 0; |
||||
width: 28%; |
||||
color: #fff; |
||||
background: linear-gradient(to right, #66c4ff, #009DFF); |
||||
background-image: radial-gradient(6px at bottom left, #009DFF 50px, #009DFF); |
||||
|
||||
&.invalid { |
||||
background: linear-gradient(to right, #aaa, #999); |
||||
} |
||||
|
||||
justify-content: center; |
||||
.ticket { |
||||
width: 100%; |
||||
} |
||||
|
||||
.ticket { |
||||
// background-image: radial-gradient(6px at top left, #f5f5f5 50px, #009DFF); |
||||
// padding-top: 1vw; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
.num { |
||||
font-size: 30px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.unit { |
||||
font-size: 28upx; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,50 @@ |
||||
<template> |
||||
<view> |
||||
<image class="width100" mode="widthFix" src="https://gratia-pay.dctpay.com/filesystem/share/1679038223473.png"> |
||||
</image> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
let app = getApp(); |
||||
import { |
||||
generateWeChatMpQrCode |
||||
} from '../../Utils/Api.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
urls: 'https://gratia-pay.dctpay.com/filesystem/share/1679038223473.png' //图片地址 |
||||
} |
||||
}, |
||||
methods: { |
||||
generateWeChatMpQrCode() { |
||||
let that = this; |
||||
uni.getStorage({ |
||||
key: 'staffCode', |
||||
success: (res) => { |
||||
let datas = { |
||||
outTradeNo: res.data, |
||||
// 1000017476, |
||||
type: 2 |
||||
} |
||||
generateWeChatMpQrCode(datas).then(res => { |
||||
if (res.return_code == '000000') { |
||||
that.urls = res.return_data; |
||||
} else { |
||||
uni.showToast({ |
||||
title: res.return_msg, |
||||
duration: 2000, |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue