<!--pages/coupon-list/coupon-list.wxml-->
<import src="../../template/coupon-item/coupon-item.wxml"/>
<view class="exchange-coupon">
<input placeholder="请输入优惠券码" class="ipt-cpn-code" bindinput="getCodeValue"/>
<button class="btn-exchange" bindtap="doExchange">兑换</button>
</view>
<view class="coupon-list-tab">
<view class="tab-item {{currentView == 1 ? 'active' : '' }}" data-activetab="1" bindtap="switchTab">
未使用
</view>
<view class="tab-item {{currentView == 2 ? 'active' : ''}}" data-activetab="2" bindtap="switchTab">
已使用
</view>
<view class="tab-item {{currentView == 3 ? 'active' : ''}}" data-activetab="3" bindtap="switchTab">
已失效
</view>
</view>
<view>
<view class="coupon-list">
<block wx:if="{{couponData.length > 0}}">
<view class="conpon-item" wx:for="{{couponData}}" wx:for-item="cpn">
<template is="couponItem" data="{{cpn: cpn, type: 1, toDetail: true, index: index}}" />
</view>
</block>
<block wx:else>
<view class="no-data">
<span class="icon icon-coupon-empty"></span>
<view>您暂时还没有优惠券~</view>
</view>
</block>
</view>
</view>
<view class="coupon-loading" wx:if="{{showLoadingFlag}}">
<image src="../../image/loading-super.gif"></image>
<text>努力加载中</text>
</view>
<view class="no-more-coupon" wx:if="{{showLoadedFlag}}">
没有更多订单了~
</view>
|
/* pages/coupon-list/coupon-list.wxss */
.coupon-list-tab{
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
background-color: #fff;
}
.coupon-list-tab .tab-item{
padding: 25rpx 0;
flex: 1;
text-align: center;
box-sizing: border-box;
}
.coupon-list-tab .tab-item.active{
border-bottom: 3px solid #e61773;
color: #e61773;
}
.exchange-coupon{
display: flex;
justify-content: space-between;
align-items: center;
padding: 23rpx 20rpx;
background-color: #fff;
border-top: solid #c7c7c7 3rpx;
font-size: 28rpx;
}
.exchange-coupon .ipt-cpn-code{
display: block;
padding-left: 10rpx;
height: 70rpx;
border: solid #d5d5d5 3rpx;
flex: 1;
border-radius: 7rpx;
}
.exchange-coupon .btn-exchange{
display: block;
margin-left: 20rpx;
width: 130rpx;
height: 70rpx;
line-height: 70rpx;
background-color: #e61773;
border: none;
color: #fff;
text-align: center;
border-radius: 7rpx;
}
.coupon-list .conpon-item{
padding: 10rpx 20rpx;
}
.coupon-list .no-data{
color: #999;
text-align: center;
font-size: 28rpx;
padding-top: 150rpx;
}
.coupon-list .no-data .icon{
font-size: 80rpx;
}
.coupon-list .no-data view{
margin-top: 35rpx;
}
/*数据加载时*/
.coupon-loading{
color: #999;
font-size: 28rpx;
text-align: center;
height: 80rpx;
line-height:80rpx;
}
.coupon-loading text{
margin-left: 20rpx;
}
.coupon-loading image{
width: 40rpx;
height: 40rpx;
vertical-align: sub;
}
/*没有更多数据*/
.no-more-coupon{
color: #999;
text-align: center;
font-size: 28rpx;
margin-top: 20rpx;
}
@import "../../css/font.wxss";
@import "../../template/coupon-item/coupon-item.wxss";
|
// pages/coupon-list/coupon-list.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
var polyfill = require('../../utils/polyfill.js');
//引入优惠券组件
var couponItem = require('../../template/coupon-item/coupon-item.js');
var obj = [
{
"id": "3644764",
"tag": "",
"type": "3",
"code": "T5SFVS92PC",
"showAimTitle": "会员尊享",
"showDiscountTitle": "满38元可用",
"showDiscountMoney": "10.00",
"startDate": "2017.03.14 16:15",
"endDate": "2017.04.13 16:15",
"exp_soon": 0,
"coupon_rule": "1、优惠券限线下门店消费时使用，每单只使用一张优惠券，不与其它优惠券叠加使用；2、优惠券不设找赎，不可兑换现金，仅限有效期内使用，打印无效；3、优惠券有效期内周末、假日通用；4、每张优惠券仅限指定门店一次性使用5、所有规则由五洲会海购依据国家相关法律法规及规章制度予以解释。",
"code_desc": "促销商品（限时促销、秒杀、N元N件、砍价活动及其他促销）不参与优惠券优惠",
"qrcodeStr": ""
},
{
"id": "3644658",
"tag": "",
"type": "3",
"code": "OHLOK99TQY",
"showAimTitle": "门店专享",
"showDiscountTitle": "满20元可用",
"showDiscountMoney": "6.00",
"startDate": "2017.01.13 14:34",
"endDate": "2017.01.23 14:34",
"exp_soon": 0,
"coupon_rule": "1、优惠券限线下门店消费时使用，每单只使用一张优惠券，不与其它优惠券叠加使用；2、优惠券不设找赎，不可兑换现金，仅限有效期内使用，打印无效；3、优惠券有效期内周末、假日通用；4、每张优惠券仅限指定门店一次性使用；5、所有规则由五洲会海购依据国家相关法律法规及规章制度予以解释。",
"code_desc": "促销商品（限时促销、秒杀、N元N件、砍价活动及其他促销）不参与优惠券优惠",
"qrcodeStr": ""
}
];
var obj1 = [
{
"id": "3644709",
"tag": "满满",
"type": "1",
"code": "FIPR6TI4YG",
"showAimTitle": "满10-6元",
"showDiscountTitle": "满10元可用",
"showDiscountMoney": "6.00",
"startDate": "2017.02.16 00:00",
"endDate": "2022.03.17 00:00",
"exp_soon": 0,
"coupon_rule": "1、优惠券限线下门店消费时使用，每单只使用一张优惠券，不与其它优惠券叠加使用；2、优惠券不设找赎，不可兑换现金，仅限有效期内使用，打印无效；3、优惠券有效期内周末、假日通用；4、每张优惠券仅限指定门店一次性使用；5、所有规则由五洲会海购依据国家相关法律法规及规章制度予以解释。",
"code_desc": "满10-6元",
"qrcodeStr": ""
}
];
Page({
data:{
currentView: 1,
codeValue: '',
couponData: [],
showLoadingFlag: false,
showLoadedFlag: false,
currPage: 0
},
onLoad:function(options){
//初始化优惠券组件
this.couponItem = new couponItem(this);
this.getCouponList(1);
},
getCodeValue: function(e){
this.setData({
codeValue: e.detail.value
});
},
switchTab: function(e){
var activetab = e.currentTarget.dataset.activetab;
if(activetab != this.data.currentView){
this.setData({
currentView: activetab,
currPage: 0,
showLoadingFlag: false,
showLoadedFlag: false,
couponData: []
});
this.getCouponList(activetab);
}
},
getCouponList: function(type){
this.setData({
currPage: ++this.data.currPage
});
util.getToken().then(token => {
return util.wxRequest({
url: ports.couponList,
method: 'POST',
data: {
page: this.data.currPage,
online: 3,
type: type
},
header: { 'X-Auth-Token': token, 'content-type': 'application/x-www-form-urlencoded'}
})
}).then(res => {
this.setData({
couponData: this.data.couponData.concat(type==3 ? obj : obj1),
showLoadingFlag: false
});
}).catch((e)=>{
console.log(e)
});
},
doExchange: function(){
if(this.data.codeValue === ''){
wx.showToast({
title: "您还没有输入兑换码",
image: '../../image/wrong.png',
duration: 1000
});
return;
}
if(this.data.couponData.length === 0){
wx.showToast({
title: "您输入的优惠码不存在",
image: '../../image/wrong.png',
duration: 1000
});
return;
}
util.getToken().then(token => {
util.wxRequest({
method: 'POST',
url: ports.couponConversion,
headers:{'X-Auth-Token':token, 'content-type': 'application/x-www-form-urlencoded'},
data: {
pcode: this.data.codeValue
}
}).then((result)=> {
return wx.showToast({
title: result.msg,
duration: 1000
});
}).catch((e)=>{
wx.showToast({
title: e,
image: '../../image/wrong.png',
duration: 1000
});
});
});
},
onReachBottom: function(){
if(this.data.showLoadedFlag){
return;
}
this.setData({
showLoadingFlag: true
});
this.getCouponList(this.data.currentView);
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
|
模板简介：该模板名称为【微信小程序五洲到家优惠券码兑换查询页面设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。
.jpg)
.jpg)
