本文给大家带来的是微信小程序优惠券使用中心页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--couponExpireMember.wxml-->
<view class="top">
<view class="noused">
未使用 <text class="count">2</text>
</view>
<view class="used">
已使用 <text class="count">1</text>
</view>
<view class="expire">
已过期 <text class="count">1</text>
</view>
</view>
<view class="coupon">
<block wx:for="{{coupon}}">
<view class="outwrap">
<view class="left8">
<image mode="scaleToFill" src="../../images/member/expireback.png" class="back"></image>
<view class="word">
<text class="coupon-name">{{item.name}}</text>
<text class="coupon-during">{{item.during}}</text>
</view>
</view>
<view class="right2">
<image src="../../images/member/333.png" mode="aspectFit" class="img"></image>
</view>
</view>
</block>
</view>
|
二、wxss样式文件代码如下:
/* couponExpireMember.wxss */
.top{
background-color:#ffffff;
font-weight: bold;
display:flex;
justify-content:center;
}
.noused{
padding:20px 30px;
width:33.3%;
color: #828282;
border-bottom: 1px solid #828282;
}
.count{
}
.used{
width:33.3%;
padding:20px 30px;
color: #828282;
border-bottom: 1px solid #828282;
}
.expire{
width:33.3%;
padding:20px 30px;
color: #f82f4a;
border-bottom: 1px solid #f82f4a;
}
.coupon{
padding:20px;
}
.outwrap{
background-color:#ffffff;
display:flex;
flex-flow:row wrap;
border-radius: 5px;
margin-bottom:10px;
}
.left8{
width:80%;
position:relative;
overflow:hidden;
}
.right2{
width:20%;
display:table-cell;
vertical-align:middle;
text-align:center;
text-align: center;
}
.img{
width:50px;
height:60px;
}
.word{
position: absolute;
z-index: 2;
color:#ffffff;
display:flex;
flex-flow:column wrap;
text-align:center;
width:100%;
height:100%;
padding:10px 0;
}
.coupon-name{
font-size:18px;
}
.coupon-during{
margin-top:8px;
font-size:12px;
}
.back{
height:100%;
width:100%;
z-index:1;
position: absolute;
}
|
三、js页面代码如下:
// couponExpireMember.js
Page({
/**
* 页面的初始数据
*/
data: {
coupon: [
{ "name": "¥10-订单优惠券", "during": "2017-05-31-2017-06-31" },
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|