首页 > 小程序教程 > 微信小程序五洲到家卡券详情页面设计制作开发教程

微信小程序五洲到家卡券详情页面设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序五洲到家卡券详情页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/coupon-detail/coupon-detail.wxml-->
<view class="coupon-detail-info-box">
    <view class="detail-info">
        <view class="use-target-price">
            <view class="price">
                <text class="symbol">¥</text>
                <text class="num">{{cpn.showDiscountMoney}}</text>
            </view>
            <view>{{cpn.startDate}}-{{cpn.endDate}}</view>
        </view>
        <view class="use-cate">
            <view>{{cpn.showDiscountTitle}}</view>
            <view class="line"></view>
            <view>{{cpn.showAimTitle}}</view>
        </view>
    </view>
    <view class="ecode-box">
        <view class="ecode-content">
            <block wx:if="cpn.type===2 || cpn.type===3">
                <image class="status-icon" wx:if="{{isUsed}}" src="../../image/used.png"></image>
                <image class="status-icon" wx:else src="../../image/expired.png"></image>
            </block>
            <!--二维码图片,后期改为接口生成-->
            <image class="qrcode-img"  src="../../image/ercode.png"></image>
        </view>
        <view class="code-text">促销码:{{cpn.code}}</view>
        <view class="code-dec">使用时向导购员出示此二维码</view>
    </view>
    <view class="pt20"></view>
    <view class="cpn-des">
        <view class="title">使用说明</view>
        <view class="h3">试用范围:</view>
        <view class="p">{{cpn.showDiscountTitle}}</view>
        <view class="h3">有效期:</view>
        <view class="p">{{cpn.startDate}}-{{cpn.endDate}}</view>
        <view class="h3">详细信息:</view>
        <view class="dec">{{cpn.code_desc}}</view>
        <view class="h3">使用规则:</view>
        <view class="rule">{{cpn.coupon_rule}}</view>
    </view>
</view>
 
二、wxss样式文件代码如下:
/* pages/coupon-detail/coupon-detail.wxss */
.coupon-detail-info-box{
	background-color: #fff;
	margin-bottom: 20rpx;
}
.coupon-detail-info-box .detail-info{
    background: url(../../image/coupon-bg.jpg) no-repeat top left;
    background-size: 750rpx 230rpx;
    height: 230rpx;
    display: flex;
    justify-content:space-between;
    font-size: 28rpx;
}
.use-target-price{
    display: flex;
    flex-direction:column;
    padding: 60rpx 20rpx 0;
}
.use-target-price .price{
    color:#f6559c;
}
.use-target-price .price.price-gray{
    color:#ccc;
}
.use-target-price .price .symbol{
    font-size: 36rpx;
}
.use-target-price .price .num{
    font-weight: bold;
    font-size: 100rpx;
}

.use-cate{
    display: flex;
    flex-direction:column;
    padding-top: 100rpx;
    align-items: center;
    margin-right: 35rpx;
}
.use-cate .line{
    position:relative;
    margin: 10rpx 0;
    width:100%;
    height:3rpx;
    background-color: #666;
    text-align: center;
    line-height: 1px;
}
.use-cate .line::after{
    display: inline-block;
    background-color: #fff;
    padding:0 6rpx;
    font-size: 28rpx;
    content:"·";
}
.use-cate view{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 320rpx;
}

.ecode-box{
    border-top: dashed #e8e8e8 3rpx;
    height: 560rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ecode-box .ecode-content{
    position: relative;
}
.ecode-box .ecode-content .status-icon{
    width: 142rpx;
    height: 142rpx;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.ecode-box .ecode-content .qrcode-img{
    width: 258rpx;
    height: 258rpx;
}

.ecode-box .code-text{
    margin-top: 30rpx;
    font-size: 32rpx;
    color: #222;
}
.ecode-box .code-dec{
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999;
}
.cpn-des{
	background-color: #fff;
	padding-bottom: 20rpx;
}
.cpn-des .title{
    height: 80rpx;
    line-height: 80rpx;
    color: #222;
    font-size: 32rpx;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 20rpx;
    padding-left: 20rpx;
}
.h3,.p,.rule,.dec{
    padding: 0 20rpx;
    margin-bottom: 10rpx;	
}
.h3{
    font-size: 28rpx;
    color: #222;
}
.rule,.dec,.p{
    font-size: 26rpx;
    color: #666;
    line-height: 1.5;
}
三、js页面代码如下:
// pages/coupon-detail/coupon-detail.js
var util = require('../../utils/util.js');
var ports = require('../../utils/ports.js');
var polyfill = require('../../utils/polyfill.js');
var obj = {
        "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、优惠券限线下门店消费时使用,每单只使用一张优惠券,不与其它优惠券叠加使用;n2、优惠券不设找赎,不可兑换现金,仅限有效期内使用,打印无效;n3、优惠券有效期内周末、假日通用;n4、每张优惠券仅限指定门店一次性使用;n5、所有规则由五洲会海购依据国家相关法律法规及规章制度予以解释。", 
        "code_desc": "满10-6元", 
        "qrcodeStr": "364470900000367350000009649"
    }
Page({
  data:{
    cpn: {},
    isUsed: false,
    codeId: 0
  },
  getDate: function(dateStr){
      //iphone下new Date()有bug
      return dateStr.split(' ')[0];
  },
  getCouponDetail: function(){
        util.getToken().then(token => {
            util.wxRequest({
                method: 'post',
                url: ports.couponDetail,
                headers:{'X-Auth-Token': token, 'content-type': 'application/x-www-form-urlencoded'},
                data:{
                    codeId: this.data.codeId
                }
            }).then((result)=> {
                result.data = obj; //测试
                result.data.startDate = this.getDate(result.data.startDate);
                result.data.endDate = this.getDate(result.data.endDate);
                result.data.coupon_rule = result.data.coupon_rule.replace(/n/g,'<br/>');
                result.data.code_desc = result.data.code_desc.replace(/n/g,'<br/>');
                this.setData({
                  isUsed: result.data.type===2 ? true : false,
                  cpn: result.data
                });
            }).catch((e)=>{
                console.log(e)
            });
        });
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      codeId: options.codeId
    });
    this.getCouponDetail();
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

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

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