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