<template> <view> <view class="tabr" :style="{top:headerTop}"> <!-- ({{couponcout}}) --> <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> <scroll-view scroll-x='true' :style="{top:headerswiperTop}" class="srollview width100" scroll-with-animation> <view class="conent" :class="[ordertypeid == item.codeValue ? 'activeconent' : 'frontconent']" v-for="(item,index) in orderTyplist" :key="index" @tap="selectlist(item)">{{item.codeName}}</view> </scroll-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="alijusstart" style="margin-top: -7px;"> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 1" style="width: 70px;height: 20px;background-color: #FFBDBA;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 满减券 </view> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 2" style="width: 70px;height: 20px;background-color: #3ecbb0;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 抵扣券 </view> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 3" style="width: 70px;height: 20px;background-color: #7986AA;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 折扣券 </view> </view> <view class="title alijusstart"> <text class="height20 fotct fcorfff font11" style="width: 50px;background-color: #347edd;border-radius: 20px;">{{orderTyplist | msgFormat(row.discountUseScope)}}</text> <view class="text1 width70">{{row.discountName}}</view> </view> <view class="term"> 有效期:{{row.useEndTime | 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" v-if="row.discountType == 3"> 折 </view> <view class="unit" v-else> 元 </view> </view> <!-- #ifdef MP --> <view class="use" @click="jumpcoupons(row)"> 去使用 </view> <!-- #endif --> <!-- #ifdef H5 --> <view class="use" @click="jumpcoupons(row)"> 去使用 </view> <!-- #endif --> </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="alijusstart" style="margin-top: -7px;"> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 1" style="width: 70px;height: 20px;background-color: #999999;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 满减券 </view> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 2" style="width: 70px;height: 20px;background-color: #999999;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 抵扣券 </view> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 3" style="width: 70px;height: 20px;background-color: #999999;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 折扣券 </view> </view> <view class="title alijusstart"> <text class="height20 fotct fcorfff font11" style="width: 50px;background-color: #999999;border-radius: 20px;">{{orderTyplist | msgFormat(row.discountUseScope)}}</text> <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 class="right"> <view class="ticket" style="background-color: #999999;padding-top: 7vw;"> <view class="num" v-if="row.discountType == 3"> {{row.discountPrice * 10}} </view> <view class="num" v-else> {{row.discountPrice}} </view> <view class="unit" v-if="row.discountType == 3"> 折 </view> <view class="unit" v-else> 元 </view> </view> </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="alijusstart" style="margin-top: -7px;"> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 1" style="width: 70px;height: 20px;background-color: #999999;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 满减券 </view> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 2" style="width: 70px;height: 20px;background-color: #999999;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 抵扣券 </view> <view class="alijus font12 fotct fcorfff" v-if="row.discountType == 3" style="width: 70px;height: 20px;background-color: #999999;margin-right: 2px;"> <image src="../../../static/img/user/user16.png" mode="widthFix" class="icon12"> </image> 折扣券 </view> </view> <view class="title alijusstart"> <text class="height20 fotct fcorfff font11" style="width: 50px;background-color: #999999;border-radius: 20px;">{{orderTyplist | msgFormat(row.discountUseScope)}}</text> <view class="text1 width70">{{row.discountName}}</view> </view> <view class="term"> 有效期:{{row.useEndTime | 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;padding-top: 7vw;"> <view class="num" v-if="row.discountType == 3"> {{row.discountPrice * 10}} </view> <view class="num" v-else> {{row.discountPrice}} </view> <view class="unit" v-if="row.discountType == 3"> 折 </view> <view class="unit" v-else> 元 </view> </view> </view> </view> </view> </view> </view> <view :style="{display: usercouFeedbackHidden}" class="popup_content"> <view class="popup_title font18 fcor333 fontwig6 paddtop10">温馨提示</view> <view class="popup_title font16 fcor666 paddtop20 height60">请在有效期30天内使用。过期作废!</view> <view class="width100 bor-botm1 mart10"></view> <view class="alijus width90 mart20"> <view class="width40" style="margin-right: 5%;" @click="hideDiv()"> <view class="width100 btnno font16 ">取消</view> </view> <wx-open-launch-weapp style="width: 40%;margin-left: 5%;" id="launch-btn" username="gh_5fb54244cdbb"> <script type="text/wxtag-template"> <style> .download { color: #ffffff; background: #0083f5; width:100%; height:100%; align-items: center; justify-content: center; font-size: 16px; } </style> <button class="download" style="height:40px;line-height: 40PX;width:100%;border:none;">去使用</button> </script> </wx-open-launch-weapp> </view> </view> <view class="popup_overlay" :style="{display: usercouFeedbackHidden}" @click="hideDiv()"></view> </view> </template> <script> import { getUserDiscountList, verifyWx, useDiscount, getDictionaryByCodeType } 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, ordertypeid: 1, //类型id usercouFeedbackHidden: 'none', // 默认隐藏 orderTyplist: '', //订单类型 statusid: '' //状态 } }, onPageScroll(e) { }, //下拉刷新,需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true onPullDownRefresh() { setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); }, created() { // #ifdef H5 uni.showLoading({ title: '加载中' }) let url = window.location.href.split('#')[0]; let datas = { url: url } verifyWx(datas).then(res => { uni.hideLoading(); if (res.return_code == '000000') { wx.config({ debug: false, // 开启调试模式,返回值会在客户端alert出来。 appId: res.return_data.appId, // 必填,公众号的唯一标识 timestamp: res.return_data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.return_data.nonceStr, // 必填,生成签名的随机串 signature: res.return_data.signature, // 必填,签名 jsApiList: ['onMenuShareTimeline'], // 必填,需要使用的JS接口列表 openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表 }); wx.ready(function(res) {}); wx.error(function(err) {}); } }); // #endif }, onLoad() { // #ifdef H5 this.headerTop = '44PX'; this.headerswiperTop = '89px'; // #endif this.getDictionaryByCodeType(); }, 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.getUserDiscountList(1); } else if (this.typeClass == 'invalid') { this.getUserDiscountList(2); } else { this.getUserDiscountList(0); } }, methods: { //查询我的优惠券 getUserDiscountList(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, useScope: this.ordertypeid } getUserDiscountList(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() } }) }, //分类类型 getDictionaryByCodeType() { let datas = { codeType: 'USING_RANGE' } getDictionaryByCodeType(datas).then(res => { if (res.return_code == '000000') { this.orderTyplist = res.return_data; this.ordertypeid = res.return_data[0].codeValue; this.getUserDiscountList(1); } }) }, //筛选类型 selectlist(item) { this.ordertypeid = item.codeValue; this.pageNum = 1; this.couponValidList = []; this.couponinvalidList = []; this.couponnoinvalidList = []; this.isNoMoreData = false; this.getUserDiscountList(this.statusid); }, //跳转详情 jumpcoupons(e) { if (e.discountUseScope == 3) { uni.navigateTo({ url: '../../../subPages/recharge/recharge' }) } else if (e.discountUseScope == 4) { app.globalData.distinguishid = 1; uni.navigateTo({ url: '/qianzhu-KFC/buffet-order/buffet-order' }) } else if (e.discountUseScope == 5) { app.globalData.distinguishid = 2; uni.navigateTo({ url: '/qianzhu-KFC/buffet-order/buffet-order' }) } else if (e.discountUseScope == 6) { uni.navigateTo({ url: '/member-Recharge/choicepage/choicepage' }) } else if (e.discountUseScope == 7) { uni.navigateTo({ url: '/pages/goods/refuel/refuel' }) } else if (e.discountUseScope == 8) { this.useDiscount(e.discountAgentCodeId); } else { uni.navigateTo({ url: '../mineCouponsDestails/mineCouponsDestails?id=' + e.id }) } }, //使用优惠券 useDiscount(item) { let datas = { discountAgentCodeId: item } useDiscount(datas).then(res => { if (res.return_code == '000000') { // #ifdef MP uni.showModal({ title: '温馨提示', content: '请在有效期30天内使用。过期作废!', success: function(res) { if (res.confirm) { uni.navigateToMiniProgram({ appId: 'wx7cd1712834749dcb', extraData: { 'data1': 'release' }, success(res) { // 打开成功 } }) } } }) // #endif // #ifdef H5 this.onhiddle(); // #endif } else { uni.showToast({ title: res.return_msg, duration: 2000, icon: 'none' }) } }) }, //弹出框 onhiddle() { this.usercouFeedbackHidden = 'block'; }, hideDiv() { // 隐藏输入弹出框 this.usercouFeedbackHidden = 'none'; }, switchType(type) { if (this.typeClass == type) { return; } uni.pageScrollTo({ scrollTop: 0, duration: 0 }) this.typeClass = type; this.subState = this.typeClass == '' ? '' : 'show' + type; // setTimeout(() => { // this.oldIndex = null; // this.theIndex = null; // this.subState = this.typeClass == 'valid' ? '' : this.subState; // }, 200) if (this.typeClass == 'valid') { this.pageNum = 1; this.couponValidList = [] this.isNoMoreData = false; this.getUserDiscountList(1); } else if (this.typeClass == 'invalid') { this.pageNum = 1; this.couponinvalidList = [] this.isNoMoreData = false; this.getUserDiscountList(2); } else { this.pageNum = 1; this.couponnoinvalidList = [] this.isNoMoreData = false; this.getUserDiscountList(0); } } } } </script> <style lang="scss"> view { display: flex; flex-wrap: wrap; } .btnsclick { width: 50px; height: 20px; justify-content: center; align-items: center; font-size: 12px; border-radius: 20px; padding: 0 5px; position: fixed; margin-top: 50px; } .srollview { position: fixed; height: 60px; background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: nowrap; white-space: nowrap; .conent { height: 24px; line-height: 24px; margin-top: 15px; padding-left: 10px; font-size: 10px; padding-right: 10px; border-radius: 20px; margin-left: 15px; display: inline-flex; flex-direction: column; text-align: center; position: relative; } } .frontconent { background-color: #eeeeee; color: #333333; } .activeconent { background-color: #e8eff4; color: #009DFF; } page { background-color: #f5f5f5; } .popup_content { position: fixed; top: 40%; left: 50%; width: 520upx; height: 400upx; margin-left: -270upx; margin-top: -270upx; border: 10px solid white; background-color: white; z-index: 1002; overflow: auto; border-radius: 20upx; } .popup_title { display: flex; justify-content: center; text-align: center; width: 480upx; } // 弹窗 .popup_overlay { position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=88); } .btnno { height: 40px; line-height: 40PX; display: flex; justify-content: center; color: #ffffff; background: #999999; } .hidden { display: none !important; } .place { width: 100%; height: 110px; } .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: 33.3%; 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; color: #999; } position: relative; .gap-top, .gap-bottom { position: absolute; width: 20upx; height: 20upx; right: -10upx; border-radius: 100%; background-color: #f5f5f5; } .gap-top { top: -10upx; } .gap-bottom { bottom: -10upx; } .shixiao { position: absolute; right: 20upx; font-size: 150upx; z-index: 6; color: rgba(153, 153, 153, 0.2) } } .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); .use { color: #aaa; } } justify-content: center; .ticket, .criteria { width: 100%; } .ticket { // background-image: radial-gradient(6px at top left, #f5f5f5 50px, #009DFF); // padding-top: 1vw; justify-content: center; align-items: baseline; .num { font-size: 60upx; font-weight: 600; } .unit { font-size: 28upx; } } .criteria { justify-content: center; font-size: 28upx; } .use { width: 70%; height: 60rpx; justify-content: center; align-items: center; font-size: 28rpx; background-color: #fff; color: #009DFF; border-radius: 40rpx; padding: 0 10rpx; } } } } } </style>