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