本文给大家带来的是微信小程序订单优惠券选择验证页面设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<!--pages/chooseCouponTrans/chooseCouponTrans.wxml-->
<view class="top">
<block wx:for="{{coupon}}">
<view class="row">
<view class="left">
<view class="value"><text class="red">¥{{item.value}}</text>-{{item.type}}</view>
<view class="during">
{{item.during}}
</view>
</view>
<view class="right">
<checkbox value="" color="#f9364f" checked=""/>选择
</view>
</view>
</block>
</view>
<view class="verify">
<input placeholder="请输入优惠码" class="input"/>
<view class="wrap">
<button class="btn" style="background-color:#0398e7;color:#ffffff">验证</button>
</view>
</view>
|
二、wxss样式文件代码如下：
/* pages/chooseCouponTrans/chooseCouponTrans.wxss */
.top{
background-color:#ffffff;
margin-top:15px;
padding:10px;
}
.row{
display:flex;
height:50px;
margin-bottom: 10px;
}
.left{
border: 1px solid #d1d1d1;
width:70%;
display:flex;
flex-flow:column wrap;
justify-content:center;
align-items:center;
}
.right{
width:30%;
display:flex;
justify-content:center;
align-items:center;
}
.value{
color:#696969;
}
.red{
color:#ff3452;
font-weight:bold;
font-size:17px;
}
.during{
font-size:12px;
margin-top:5px;
color:#989898;
}
.verify{
padding:10px;
display:flex;
justify-content:space-between;
align-items:center;
margin-top:10px;
}
.input{
border:1px solid #bfbfbf;
width:67%;
height:25px;
padding:5px;
background-color:#ffffff;
color:#969696;
}
.btn{
margin:0;
line-height:25px;
font-size:19px;
padding:5px 10px;
width:58px;
}
.wrap{
width:30%;
display:flex;
justify-content:center;
}
|
三、js页面代码如下：
// pages/chooseCouponTrans/chooseCouponTrans.js
Page({
/**
* 页面的初始数据
*/
data: {
coupon:[
{'value':"10","type":"订单优惠券","during":"2017-06-31-2017-07-31","checked":true},
{ 'value': "20", "type": "订单优惠券", "during": "2017-05-31-2017-06-31" },
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|
.jpg)
.jpg)
