@@ -1,10 +1,10 @@ | |||||
{ | { | ||||
"pages": [ | "pages": [ | ||||
"pages/coupons/index/index", | |||||
"pages/user/index", | |||||
"pages/index/index", | "pages/index/index", | ||||
"pages/login/index", | |||||
"pages/market/index", | "pages/market/index", | ||||
"pages/user/index", | |||||
"pages/coupons/index/index", | |||||
"pages/login/index", | |||||
"pages/coupons/details/index", | "pages/coupons/details/index", | ||||
"pages/order/index/index", | "pages/order/index/index", | ||||
"pages/order/details/index", | "pages/order/details/index", | ||||
@@ -1,65 +1,56 @@ | |||||
Page({ | Page({ | ||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | data: { | ||||
tabs: [{ | |||||
key: 1, | |||||
name: "未使用" | |||||
}, | |||||
{ | |||||
key: 2, | |||||
name: "已使用" | |||||
}, | |||||
{ | |||||
key: 3, | |||||
name: "已过期" | |||||
}, | |||||
{ | |||||
key: 4, | |||||
name: "已退款" | |||||
} | |||||
], | |||||
list: [{ | |||||
key: '1', | |||||
data: [{ | |||||
name: '111' | |||||
}] | |||||
}, | |||||
{ | |||||
key: '2', | |||||
data: [{ | |||||
name: '222' | |||||
}] | |||||
}, | |||||
{ | |||||
key: '3', | |||||
data: [{ | |||||
name: '333' | |||||
}] | |||||
} | |||||
], | |||||
current: '', | |||||
current_scroll: '1' | |||||
}, | |||||
handleChange({ | |||||
detail | |||||
}) { | |||||
this.setData({ | |||||
current: detail.key | |||||
}); | |||||
}, | |||||
handleChangeScroll({ | |||||
detail | |||||
}) { | |||||
this.setData({ | |||||
current_scroll: detail.key | |||||
}); | |||||
}, | }, | ||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad: function (options) { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload: function () { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh: function () { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom: function () { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage: function () { | |||||
} | |||||
}) | }) |
@@ -1,6 +1,8 @@ | |||||
{ | { | ||||
"usingComponents": { | |||||
}, | |||||
"navigationBarTitleText": "我的优惠劵" | |||||
} | |||||
"usingComponents": { | |||||
"i-tab": "../../../dist/tab/index", | |||||
"i-tabs": "../../../dist/tabs/index", | |||||
"c-coupons": "../../../components/coupons/index" | |||||
}, | |||||
"navigationBarTitleText": "我的优惠劵" | |||||
} |
@@ -1 +1,41 @@ | |||||
<text>pages/t/index.wxml</text> | |||||
<view class="market"> | |||||
<i-tabs class='tabs' current="{{ current_scroll }}" scroll bindchange="handleChangeScroll"> | |||||
<i-tab class='i-tab' wx:for="{{tabs}}" wx:key="unique" key="{{item.key}}" title="{{item.name}}"></i-tab> | |||||
</i-tabs> | |||||
<view class='section'> | |||||
<view class='detail_msg'> | |||||
<view class='logo'> | |||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
</view> | |||||
<view class='info'> | |||||
<view> | |||||
<text>黑椒牛排</text> | |||||
</view> | |||||
<view> | |||||
<text>有效期至:</text>2018-07-10 11:30</view> | |||||
<view> | |||||
<text></text> | |||||
<text>立即使用</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class='section'> | |||||
<view class='detail_msg'> | |||||
<view class='logo'> | |||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
</view> | |||||
<view class='info'> | |||||
<view> | |||||
<text>黑椒牛排</text> | |||||
</view> | |||||
<view> | |||||
<text>有效期至:</text>2018-07-10 11:30</view> | |||||
<view> | |||||
<text></text> | |||||
<text>立即使用</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> |
@@ -0,0 +1,83 @@ | |||||
.market { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.tabs { | |||||
width: 100% !important; | |||||
height: 88rpx; | |||||
text-align: center; | |||||
} | |||||
.i-tab { | |||||
width: 25% !important; | |||||
display: inline-block; | |||||
} | |||||
.section { | |||||
margin-top: 2%; | |||||
} | |||||
.detail_msg { | |||||
width: 92%; | |||||
height: 220rpx !important; | |||||
background: #fff; | |||||
display: flex; | |||||
padding: 0 4%; | |||||
margin-top: 2%; | |||||
border-bottom: 1px solid #ededed; | |||||
} | |||||
.logo { | |||||
width: 248rpx; | |||||
height: 184rpx; | |||||
border-radius: 30rpx; | |||||
} | |||||
.logo image { | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
.info view:nth-child(1) { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 4%; | |||||
} | |||||
.info { | |||||
width: 100%; | |||||
} | |||||
.info view:nth-child(1) text { | |||||
font-size: 30rpx; | |||||
} | |||||
.info view:nth-child(2) { | |||||
color: #ff3434; | |||||
font-size: 24rpx; | |||||
padding-left: 4%; | |||||
margin-top: 1%; | |||||
} | |||||
.info view:nth-child(2) text { | |||||
font-size: 22rpx; | |||||
color: #b8b8b8; | |||||
} | |||||
.info view:nth-child(3) { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
} | |||||
.info view:nth-child(3) text:nth-child(2) { | |||||
width: 170rpx; | |||||
height: 50rpx; | |||||
color: #fff; | |||||
line-height: 50rpx; | |||||
text-align: center; | |||||
background: #00c0ff; | |||||
border-radius: 10px; | |||||
font-size: 28rpx; | |||||
margin-top: 40rpx; | |||||
} |
@@ -4,30 +4,54 @@ | |||||
</i-tabs> | </i-tabs> | ||||
<view class='section'> | <view class='section'> | ||||
<view class='detail_msg'> | <view class='detail_msg'> | ||||
<view> | |||||
<view class='logo'> | |||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
</view> | |||||
<view class='info'> | |||||
<view> | <view> | ||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
<text>黑椒牛排</text> | |||||
<text>等待付款</text> | |||||
</view> | </view> | ||||
<view> | <view> | ||||
<view> | |||||
<text>黑椒牛排</text> | |||||
<text>等待付款</text> | |||||
</view> | |||||
<view> | |||||
<text>购买数量:<text>1件</text></text> | |||||
</view> | |||||
<view> | |||||
<text>下单时间:<text>2018-07-10 11:30</text></text> | |||||
</view> | |||||
<text>购买数量:</text>1件</view> | |||||
<view> | |||||
<text>下单时间:</text>2018-07-10 11:30</view> | |||||
</view> | |||||
</view> | |||||
<view class='payment'> | |||||
<view> | |||||
<text>¥1.00</text> | |||||
<text>¥59.00</text> | |||||
</view> | |||||
<view> | |||||
<text>支付</text> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class='section'> | |||||
<view class='detail_msg'> | |||||
<view class='logo'> | |||||
<image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image> | |||||
</view> | |||||
<view class='info'> | |||||
<view> | |||||
<text>黑椒牛排</text> | |||||
<text>等待付款</text> | |||||
</view> | </view> | ||||
<view> | |||||
<text>购买数量:</text>1件</view> | |||||
<view> | |||||
<text>下单时间:</text>2018-07-10 11:30</view> | |||||
</view> | |||||
</view> | |||||
<view class='payment'> | |||||
<view> | |||||
<text>¥1.00</text> | |||||
<text>¥59.00</text> | |||||
</view> | </view> | ||||
<view> | <view> | ||||
<text>¥1.00 <text>¥59.90</text></text> | |||||
<text>支付</text> | <text>支付</text> | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<!-- <view wx:for='{{list}}' wx:key='{{index}}' wx:if='{{current_scroll==item.key}}'> | |||||
<text wx:for='{{item.data}}' wx:key='{{index}}'>{{item.name}}</text> | |||||
</view> --> | |||||
</view> | </view> | ||||
</view> | </view> |
@@ -1,33 +1,114 @@ | |||||
.market{ | |||||
.market { | |||||
width: 100%; | width: 100%; | ||||
height: 100%; | |||||
} | } | ||||
.tabs{ | |||||
width: 100%!important; | |||||
.tabs { | |||||
width: 100% !important; | |||||
height: 88rpx; | height: 88rpx; | ||||
text-align: center; | text-align: center; | ||||
} | } | ||||
.i-tab{ | |||||
width: 30%!important; | |||||
.i-tab { | |||||
width: 30% !important; | |||||
display: inline-block; | display: inline-block; | ||||
} | } | ||||
.detail_msg{ | |||||
width: 100%; | |||||
height: 416rpx!important; | |||||
background: #fff; | |||||
.section { | |||||
margin-top: 2%; | margin-top: 2%; | ||||
} | |||||
.detail_msg { | |||||
width: 92%; | |||||
height: 220rpx !important; | |||||
background: #fff; | |||||
display: flex; | display: flex; | ||||
flex-direction: column; | |||||
margin: 0 4%; | |||||
margin-top: 2%; | |||||
border-bottom: 1px solid #ededed; | |||||
} | } | ||||
.detail_msg>view:nth-child(1) { | |||||
width: 100%; | |||||
height: 244rpx; | |||||
} | |||||
.detail_msg>view:nth-child(1) view:nth-child(1) { | |||||
.logo { | |||||
width: 248rpx; | width: 248rpx; | ||||
height: 184rpx; | height: 184rpx; | ||||
border-radius: 30rpx; | |||||
} | } | ||||
.detail_msg>view:nth-child(1)>view:nth-child(1) image{ | |||||
.logo image { | |||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
margin: 13.2% 0 0 13%; | |||||
} | |||||
} | |||||
.info view:nth-child(1) { | |||||
display: flex; | |||||
justify-content: space-between; | |||||
padding: 0 4%; | |||||
} | |||||
.info { | |||||
width: 100%; | |||||
} | |||||
.info view:nth-child(1) { | |||||
margin-bottom: 72rpx; | |||||
} | |||||
.info view:nth-child(1) text { | |||||
font-size: 30rpx; | |||||
} | |||||
.info view:nth-child(1) text:nth-child(2) { | |||||
color: #ffae00; | |||||
font-size: 24rpx; | |||||
} | |||||
.info view:nth-child(2), .info view:nth-child(3) { | |||||
color: #ff3434; | |||||
font-size: 24rpx; | |||||
padding-left: 4%; | |||||
} | |||||
.info view:nth-child(2) text, .info view:nth-child(3) text { | |||||
font-size: 22rpx; | |||||
color: #b8b8b8; | |||||
} | |||||
.info view:nth-child(3) { | |||||
margin-top: 5rpx; | |||||
} | |||||
.payment { | |||||
width: 92%; | |||||
height: 120rpx; | |||||
line-height: 120rpx; | |||||
padding: 0 4%; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
border-bottom: 20rpx solid #EDEDED; | |||||
} | |||||
.payment view:nth-child(1) text:nth-child(1) { | |||||
font-size: 36rpx; | |||||
color: #ff3434; | |||||
font-weight: bold; | |||||
} | |||||
.payment view:nth-child(1) text:nth-child(2) { | |||||
font-size: 24rpx; | |||||
color: #b4b4b4; | |||||
padding-left: 18rpx; | |||||
text-decoration: line-through; | |||||
} | |||||
.payment view:nth-child(2) { | |||||
width: 114rpx; | |||||
height: 50rpx; | |||||
background: #00c0ff; | |||||
border-radius: 10px; | |||||
line-height: 38rpx; | |||||
text-align: center; | |||||
margin-top: 40rpx; | |||||
} | |||||
.payment view:nth-child(2) text { | |||||
font-size: 28rpx; | |||||
color: #fff; | |||||
} |
@@ -32,7 +32,7 @@ | |||||
</view> | </view> | ||||
<view class="margin"></view> | <view class="margin"></view> | ||||
<view class="user-btns"> | <view class="user-btns"> | ||||
<navigator url="/pages/market/index"> | |||||
<navigator url="/pages/coupons/index/index"> | |||||
<view class="user-btn app-border-bottom"> | <view class="user-btn app-border-bottom"> | ||||
<view>卷包</view> | <view>卷包</view> | ||||
<view> | <view> | ||||