场馆订单列表、订单详情

This commit is contained in:
dong_bo0602 2020-06-27 14:04:03 +08:00
parent 1d33e61c0b
commit 951ed48400
8 changed files with 385 additions and 0 deletions

View File

@ -0,0 +1,66 @@
// pages/myVenueOrder/myVenueOrder.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

View File

@ -0,0 +1,44 @@
<view class="venue">
<view class="order-box">
<view class="venue-img">
<image src="../../images/center-bg.png"></image>
</view>
<view class="order-info">
<view class="venue-title">
<view class="title">场馆</view>
<view class="project">篮球</view>
</view>
<view class="number-time">订单编号12456789</view>
<view class="number-time">下单时间2020-01-01 10:00:00</view>
<view class="price">¥15元</view>
</view>
</view>
<view class="order-box">
<view class="venue-img">
<image src="../../images/center-bg.png"></image>
</view>
<view class="order-info">
<view class="venue-title">
<view class="title">场馆</view>
<view class="project">篮球</view>
</view>
<view class="number-time">订单编号12456789</view>
<view class="number-time">下单时间2020-01-01 10:00:00</view>
<view class="price">¥15元</view>
</view>
</view>
<view class="order-box">
<view class="venue-img">
<image src="../../images/center-bg.png"></image>
</view>
<view class="order-info">
<view class="venue-title">
<view class="title">场馆</view>
<view class="project">篮球</view>
</view>
<view class="number-time">订单编号12456789</view>
<view class="number-time">下单时间2020-01-01 10:00:00</view>
<view class="price">¥15元</view>
</view>
</view>
</view>

View File

@ -0,0 +1,51 @@
.venue{
padding: 10rpx 30rpx;
}
.order-box{
border-radius: 10rpx;
padding: 10rpx;
box-shadow:0px 0px 17rpx 0px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
}
.venue-img{
width: 35%;
height: 180rpx;
}
.venue-img image{
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.order-info{
width: 62%;
}
.venue-title{
font-size: 32rpx;
display: flex;
justify-content: space-between;
}
.title{
width: 70%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.project{
font-size: 28rpx;
background: rgba(159,21,18,.1);
color: #9F1512;
padding: 0 5rpx;
border-radius: 10rpx;
}
.number-time{
font-size: 26rpx;
color: #949494;
margin-top: 10rpx;
}
.price{
font-size: 30rpx;
color: #9F1512;
margin-top: 10rpx;
}

View File

@ -0,0 +1,66 @@
// pages/orderDetail/orderDetail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

View File

@ -0,0 +1,67 @@
<view class="venue">
<view class="venue-img">
<image src="../../images/center-bg.png"></image>
</view>
<view class="venue-info">
<view class="venue-title">场馆</view>
<view class="time-number">
<text>订单编号:</text>123456789
</view>
<view class="time-number">
<text>下单时间:</text>10:10:10
</view>
<view class="time-number">
<text>价  格:</text>15元
</view>
</view>
</view>
<view class="book">
<view class="book-title">预定详情</view>
<view class="order">
<view class="order-box">
<view class="top">
<view>2020-01-01</view>
<view>12:00-13:00</view>
</view>
<view class="bottom">
<view>场地1</view>
<view>15元</view>
<view class="cancel">取消预定</view>
</view>
</view>
<view class="order-box">
<view class="top">
<view>2020-01-01</view>
<view>12:00-13:00</view>
</view>
<view class="bottom">
<view>场地1</view>
<view>15元</view>
<view class="cancel">取消预定</view>
</view>
</view>
<view class="order-box">
<view class="top">
<view>2020-01-01</view>
<view>12:00-13:00</view>
</view>
<view class="bottom">
<view>场地1</view>
<view>15元</view>
<view class="cancel">取消预定</view>
</view>
</view>
<view class="order-box">
<view class="top">
<view>2020-01-01</view>
<view>12:00-13:00</view>
</view>
<view class="bottom">
<view>场地1</view>
<view>15元</view>
<view class="cancel">取消预定</view>
</view>
</view>
</view>
</view>
<view class="cancel-all">全部取消</view>

View File

@ -0,0 +1,85 @@
.venue{
padding: 15rpx 30rpx;
display: flex;
justify-content: space-between;
border-bottom: 3px solid #DEDEDE;
}
.venue-img{
width: 35%;
height: 180rpx;
}
.venue-img image{
width: 100%;
height: 100%;
}
.venue-info{
width: 63%;
}
.venue-title{
font-size: 32rpx;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.time-number{
font-size: 26rpx;
margin-top: 10rpx;
}
.time-number text{
color: #949494;
}
.book{
margin-top: 20rpx;
padding: 0 30rpx;
margin-bottom: 85rpx;
}
.book-title{
font-size: 32rpx;
padding-left: 25rpx;
border-left: 5px solid #9F1512;
}
.order{
margin-top: 20rpx;
}
.order-box{
display: inline-block;
width: 32%;
margin-right: 1%;
border: 1px solid #9F1512;
border-radius: 10rpx;
text-align: center;
margin-bottom: 10rpx;
}
.order-box:nth-child(3n){
margin-right: 0;
}
.top{
background: #9F1512;
color: #fff;
font-size: 28rpx;
}
.bottom{
font-size: 28rpx;
}
.cancel{
width: 70%;
margin: 0 auto 10rpx;
background: #9F1512;
color: #fff;
padding: 5rpx 0;
border-radius: 10rpx;
}
.cancel-all{
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
background: #9F1512;
color: #fff;
font-size: 32rpx;
}