15 changed files with 392 additions and 100 deletions
-
5src/components/filter/stadium_select.vue
-
0src/components/kvs_line.vue
-
12src/pages.json
-
32src/subpackage/order/components/kv_line.vue
-
5src/subpackage/order/pages/timekeeping/modules/order_list/deposit.vue
-
5src/subpackage/order/pages/timekeeping/modules/order_list/person.vue
-
5src/subpackage/order/pages/timekeeping/modules/order_list/site.vue
-
16src/subpackage/order/pages/timekeeping/order_detail/deposit.vue
-
12src/subpackage/order/pages/timekeeping/order_detail/person.vue
-
12src/subpackage/order/pages/timekeeping/order_detail/site.vue
-
6src/subpackage/shower/pages/card/manage.vue
-
140src/subpackage/shower/pages/order/detail.vue
-
170src/subpackage/shower/pages/order/list.vue
-
BINsrc/subpackage/shower/static/images/locate.png
@ -1,32 +0,0 @@ |
|||
<template> |
|||
<view class="kv-line"> |
|||
<view class="kl-name">{{ label || '' }}</view> |
|||
<view class="kl-val"><slot name="default">value</slot></view> |
|||
<slot name="right"></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
label: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.kv-line{ |
|||
@include ctf; |
|||
.kl-name{ |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 48upx, #9C9C9F); |
|||
} |
|||
.kl-val{ |
|||
@include flcw(28upx, 48upx, #1A1A1A); |
|||
@include tHide; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,140 @@ |
|||
<template> |
|||
<view class="order-detail"> |
|||
<view class="od-header"> |
|||
<view class="oh-stadium"> |
|||
<image class="os-img"></image> |
|||
<view class="os-name">欧轩智能场馆(羽毛球永泰店)</view> |
|||
</view> |
|||
<view class="oh-bot"> |
|||
<kv-line label="手机号码："> |
|||
<template slot="default">13800138000</template> |
|||
<template slot="right"> |
|||
<view class="ob-status">交易完成</view> |
|||
</template> |
|||
</kv-line> |
|||
<kv-line label="用户昵称：">yiming</kv-line> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="od-goods"> |
|||
<view class="og-tit">商品详情</view> |
|||
<view class="og-lines"> |
|||
<kv-line label="名称：">沐浴</kv-line> |
|||
<kv-line label="时长：">10分钟</kv-line> |
|||
<kv-line label="价格：">￥4</kv-line> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="od-price-info"> |
|||
<kvs-line label="金额小计">¥4</kvs-line> |
|||
<kvs-line label="积分抵扣">-¥0.5</kvs-line> |
|||
<kvs-line label="折扣金额">-¥0</kvs-line> |
|||
<kvs-line label="优惠券优惠">-¥0</kvs-line> |
|||
<view class="opi-total"> |
|||
合计支付：<text class="ot-num">￥3.5</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="od-pay-info"> |
|||
<view class="opi-tit">支付详情</view> |
|||
<view class="opi-lines"> |
|||
<kv-line label="订单编号："> |
|||
<template slot="default">sc20 0822 0815 6894</template> |
|||
<template slot="right"> |
|||
<view class="ob-copy">复制</view> |
|||
</template> |
|||
</kv-line> |
|||
<kv-line label="支付方式：">微信支付</kv-line> |
|||
<kv-line label="支付时间：">2020-08-22 10:12:25</kv-line> |
|||
<kv-line label="交易流水号：">202009181255364564612622</kv-line> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import kv_line from "@/components/kv_line.vue"; |
|||
import kvs_line from "@/components/kvs_line.vue"; |
|||
export default { |
|||
components: { |
|||
'kv-line': kv_line, |
|||
'kvs-line': kvs_line, |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-detail{ |
|||
.od-header{ |
|||
padding: 0 24upx; |
|||
background: #fff; |
|||
.oh-stadium{ |
|||
padding: 24upx 0; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
@include ctf; |
|||
.os-img{ |
|||
flex-shrink: 0; |
|||
margin-right: 14upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
background: skyblue; |
|||
} |
|||
.os-name{ |
|||
@include flcw(28upx, 40upx, #1A1A1A, 500); |
|||
@include tHide; |
|||
} |
|||
} |
|||
.oh-bot{ |
|||
padding-top: 24upx; |
|||
padding-bottom: 30upx; |
|||
.ob-status{ |
|||
text-align: right; |
|||
@include flcw(28upx, 40upx, #9A9A9D); |
|||
} |
|||
} |
|||
} |
|||
.od-goods{ |
|||
margin-top: 24upx; |
|||
padding: 20upx 24upx 0; |
|||
background: #fff; |
|||
|
|||
.opi-tit{ |
|||
@include flcw(32upx, 44upx, #1A1A1A); |
|||
} |
|||
.og-lines{ |
|||
margin-top: 28upx; |
|||
padding-bottom: 30upx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
} |
|||
|
|||
} |
|||
.od-price-info{ |
|||
padding: 30upx; |
|||
background: #fff; |
|||
.opi-total{ |
|||
text-align: right; |
|||
@include flcw(28upx, 50upx, #9A9A9D); |
|||
.ot-num{ |
|||
color: #1A1A1A; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
.od-pay-info{ |
|||
margin-top: 24upx; |
|||
padding: 30upx 24upx; |
|||
background: #fff; |
|||
.opi-tit{ |
|||
@include flcw(32upx, 44upx, #1A1A1A); |
|||
} |
|||
.opi-lines{ |
|||
margin-top: 16upx; |
|||
.ob-copy{ |
|||
margin-left: 20upx; |
|||
@include flcw(28upx, 40upx, $mColor); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,170 @@ |
|||
<template> |
|||
<view class="order-list"> |
|||
|
|||
<order-filter |
|||
ref="orderFilter" |
|||
@change:stadium="condition.stadium_id = $event.id" |
|||
@click:time="showPeriodModal" |
|||
@click:filter="showFilterModal" |
|||
:start-time="condition.start_time" |
|||
:end-time="condition.end_time" |
|||
></order-filter> |
|||
|
|||
<view class="ol-ls"> |
|||
<view class="ol-item" v-for="i in 10" :key="i" @click="itemClick"> |
|||
<view class="oi-header"> |
|||
<view class="oh-top"> |
|||
<view class="ot-name">广州欧轩智能羽毛球馆(永泰店)</view> |
|||
<view class="ot-status">交易成功</view> |
|||
</view> |
|||
<view class="oh-device-name"> |
|||
<image class="odn-img" mode="aspectFit" src="/subpackage/shower/static/images/locate.png"></image> |
|||
<view class="odn-txt">1号女沐浴间</view> |
|||
</view> |
|||
</view> |
|||
<view class="oi-lines"> |
|||
<kv-line label="订单编号：">sc20 0822 0815 6894</kv-line> |
|||
<kv-line label="名称：">豆奶</kv-line> |
|||
<kv-line label="时长：">10分钟</kv-line> |
|||
<kv-line label="购买时间：">2020-08-22 10:30:40</kv-line> |
|||
</view> |
|||
<view class="oi-total"> |
|||
合计支付：<text class="ot-price">¥2</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 时间段选择 --> |
|||
<period-modal ref="periodModal"></period-modal> |
|||
<!-- status窗口 --> |
|||
<filter-modal ref="filterModal"></filter-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import orderFilter from "@/components/filter/header.vue"; |
|||
import periodModal from "@/components/filter/period_modal.vue"; |
|||
import filterModal from "@/components/filter/filter_modal.vue"; |
|||
|
|||
import kv_line from "@/components/kv_line.vue"; |
|||
import { routeTo, formatDate } from "@/utils/util"; |
|||
export default { |
|||
components: { |
|||
'order-filter': orderFilter, |
|||
'period-modal': periodModal, |
|||
'filter-modal': filterModal, |
|||
'kv-line': kv_line |
|||
}, |
|||
data(){ |
|||
return { |
|||
condition: { |
|||
stadium_id: '', |
|||
start_time: '', |
|||
end_time: '', |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.$refs.orderFilter.initStadiumSelect({ brand_id: options?.brand_id }); |
|||
this.initDate(); // watch 监听触发 |
|||
}, |
|||
methods: { |
|||
itemClick(){ |
|||
routeTo(`/subpackage/shower/pages/order/detail`, 'nT'); |
|||
}, |
|||
// 默认显示三个月内的水阀卡数据 |
|||
initDate(){ |
|||
let _Date = new Date(); |
|||
let _timeStamp = _Date.getTime(); |
|||
let _start = _timeStamp - 90 * 24 * 60 * 60 * 1000; |
|||
this.condition.start_time = formatDate({ date: _start }); |
|||
this.condition.end_time = formatDate({ date: _timeStamp }); |
|||
}, |
|||
// 时间段选择 |
|||
showPeriodModal(){ |
|||
let { start_time, end_time } = this.condition; |
|||
this.$refs.periodModal.init({ |
|||
start: start_time, |
|||
end: end_time, |
|||
success: res=>{ |
|||
this.condition.start_time = res.start; |
|||
this.condition.end_time = res.end; |
|||
} |
|||
}); |
|||
}, |
|||
// 订单状态筛选 |
|||
showFilterModal(){ |
|||
this.$refs.filterModal.init({ |
|||
title: '订单状态', |
|||
list: [ |
|||
{ label: '全部', value: '' }, |
|||
{ label: '已完成', value: '1' }, |
|||
{ label: '已退款', value: '0' }, |
|||
], |
|||
curValue: this.condition.status, |
|||
success: res=>{ |
|||
this.condition.status = res.value; |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-list{ |
|||
|
|||
} |
|||
.ol-ls{ |
|||
padding: 24upx; |
|||
.ol-item{ |
|||
padding: 30upx 20upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
&+.ol-item{ |
|||
margin-top: 24upx; |
|||
} |
|||
.oi-header{ |
|||
padding-bottom: 20upx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
.oh-top{ |
|||
@include ctf(space-between); |
|||
.ot-name{ |
|||
@include flcw(28upx, 40upx, #1A1A1A, 500); |
|||
@include tHide; |
|||
} |
|||
.ot-status{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 40upx, #9A9A9D); |
|||
} |
|||
} |
|||
.oh-device-name{ |
|||
margin-top: 10upx; |
|||
@include ctf; |
|||
.odn-img{ |
|||
margin-right: 12upx; |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
.odn-txt{ |
|||
@include flcw(28upx, 40upx, #9A9A9D); |
|||
@include tHide; |
|||
} |
|||
} |
|||
} |
|||
.oi-lines{ |
|||
padding-top: 20upx; |
|||
} |
|||
.oi-total{ |
|||
text-align: right; |
|||
@include flcw(28upx, 40upx, #9A9A9D); |
|||
.ot-price{ |
|||
font-weight: 500; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 28 | Height: 28 | Size: 714 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue