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