首页 > 小程序教程 > 微信小程序五洲到家优惠券码兑换查询页面设计制作开发教程

微信小程序五洲到家优惠券码兑换查询页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序五洲到家优惠券码兑换查询页面页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--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>
 
二、wxss样式文件代码如下:
/* 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";
三、js页面代码如下:
// 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(){
    // 页面关闭
  }
})

模板简介:该模板名称为【微信小程序五洲到家优惠券码兑换查询页面设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 19,484次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-20
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
单页式简历模板 微信图片 微信素材 微信文章 自适应 微信公众平台 html5 表格式简历模板 企业网站 微信模板
您可能会喜欢的其他模板