15 changed files with 849 additions and 20 deletions
-
8src/components/kv_line.vue
-
12src/pages.json
-
90src/subpackage/shower/components/number_edit.vue
-
95src/subpackage/shower/components/popup/deduction.vue
-
84src/subpackage/shower/components/popup/recharge.vue
-
72src/subpackage/shower/components/popup/template.vue
-
12src/subpackage/shower/js/api.js
-
10src/subpackage/shower/js/server.js
-
43src/subpackage/shower/pages/card/detail.vue
-
108src/subpackage/shower/pages/card/manage.vue
-
95src/subpackage/shower/pages/card/use_record.vue
-
106src/subpackage/shower/pages/device/use_detail.vue
-
130src/subpackage/shower/pages/device/use_record.vue
-
BINsrc/subpackage/shower/static/images/arrow.png
-
BINsrc/subpackage/shower/static/images/close.png
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view class="number-edit"> |
|||
<view class="rpu-number"> |
|||
<view class="rn-name"><text class="red">*</text>{{ label || '' }}</view> |
|||
<view class="rn-operate"> |
|||
<view class="rn-btn" @click="number--"></view> |
|||
<input type="number" class="rn-num" v-model="number"> |
|||
<view class="rn-btn" @click="number++"></view> |
|||
</view> |
|||
<view class="ne-unit">{{ unit || '' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
label: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
unit: { |
|||
type: String, |
|||
default: '分钟' |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
number: 0 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.number-edit{ |
|||
.rpu-number{ |
|||
@include ctf(space-between); |
|||
.rn-name{ |
|||
@include flcw(28upx, 40upx, #333333); |
|||
.red{ |
|||
color: #EA5061; |
|||
} |
|||
} |
|||
.rn-operate{ |
|||
margin-left: auto; |
|||
margin-right: 0; |
|||
padding: 2upx; |
|||
border-radius: 10upx; |
|||
background: #E8ECEF; |
|||
@include ctf; |
|||
.rn-btn{ |
|||
position: relative; |
|||
width: 56upx; |
|||
height: 54upx; |
|||
&::before, &::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
display: block; |
|||
width: 30upx; |
|||
height: 4upx; |
|||
background: #9A9A9D; |
|||
border-radius: 2upx; |
|||
} |
|||
} |
|||
.rn-num{ |
|||
margin: 0 2upx; |
|||
text-align: center; |
|||
height: 54upx; |
|||
width: 104upx; |
|||
background: #fff; |
|||
@include flcw(28upx, 40upx, #333); |
|||
&+.rn-btn{ |
|||
&::after{ |
|||
transform: translate(-50%, -50%) rotate(90deg); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ne-unit{ |
|||
min-width: 60upx; |
|||
margin-left: 28upx; |
|||
@include flcw(28upx, 40upx, #333333); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,95 @@ |
|||
<template> |
|||
<view class="deduction-popup"> |
|||
<popup-template |
|||
title="充值时长" |
|||
:show="show" |
|||
> |
|||
<view class="rp-container"> |
|||
<kv-line label="水阀卡卡号：">20195171564566</kv-line> |
|||
<kv-line label="手机号码：">18316466456</kv-line> |
|||
<kv-line label="可用时长："><text class="rc-orange">100分00秒</text></kv-line> |
|||
<view class="rc-space"></view> |
|||
<number-edit label="扣减时长"></number-edit> |
|||
<view class="rc-time-select"> |
|||
<view class="rts-name">开始时间</view> |
|||
<picker> |
|||
<input disabled type="text" class="rts-ipt" placeholder="开始时间"> |
|||
</picker> |
|||
</view> |
|||
<view class="rc-time-select"> |
|||
<view class="rts-name">结束时间</view> |
|||
<picker> |
|||
<input disabled type="text" class="rts-ipt" placeholder="结束时间"> |
|||
</picker> |
|||
</view> |
|||
<textarea class="rc-remark" placeholder="备注（选填）"></textarea> |
|||
<view class="rc-btn">确认</view> |
|||
</view> |
|||
</popup-template> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import popup_template from "./template.vue"; |
|||
import kv_line from "@/components/kv_line.vue"; |
|||
import number_edit from "../number_edit.vue"; |
|||
export default { |
|||
components: { |
|||
'popup-template': popup_template, |
|||
'kv-line': kv_line, |
|||
'number-edit': number_edit |
|||
}, |
|||
data(){ |
|||
return { |
|||
show: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.rp-container{ |
|||
padding: 0 60upx; |
|||
.rc-space{ |
|||
padding-top: 40upx; |
|||
} |
|||
.rc-orange{ |
|||
color: #FF873D; |
|||
} |
|||
.rc-time-select{ |
|||
margin-top: 40upx; |
|||
@include ctf(space-between); |
|||
.rts-name{ |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
} |
|||
.rts-ipt{ |
|||
display: block; |
|||
box-sizing: border-box; |
|||
padding: 10upx 30upx; |
|||
width: 358upx; |
|||
height: 56upx; |
|||
border-radius: 10upx; |
|||
background: #F2F2F7; |
|||
@include flcw(24upx, 34upx, #333333); |
|||
} |
|||
} |
|||
.rc-remark{ |
|||
width: auto; |
|||
margin-top: 40upx; |
|||
padding: 20upx 24upx; |
|||
height: 144upx; |
|||
background: #F2F2F7; |
|||
@include flcw(24upx, 34upx, #333333); |
|||
} |
|||
.rc-btn{ |
|||
margin: 64upx auto 0upx; |
|||
width: 240upx; |
|||
height: 88upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(28upx, 88upx, #fff); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<view class="recharge-popup"> |
|||
<popup-template |
|||
title="充值时长" |
|||
:show="show" |
|||
> |
|||
<view class="rp-container"> |
|||
<kv-line label="水阀卡卡号：">20195171564566</kv-line> |
|||
<kv-line label="手机号码：">18316466456</kv-line> |
|||
<kv-line label="可用时长："><text class="rc-orange">100分00秒</text></kv-line> |
|||
<view class="rc-space"></view> |
|||
<number-edit label="充值时长"></number-edit> |
|||
<view class="rc-space"></view> |
|||
<number-edit label="支付金额" unit="元"></number-edit> |
|||
<view class="rc-btn">确认</view> |
|||
</view> |
|||
</popup-template> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import popup_template from "./template.vue"; |
|||
import kv_line from "@/components/kv_line.vue"; |
|||
import number_edit from "../number_edit.vue"; |
|||
export default { |
|||
components: { |
|||
'popup-template': popup_template, |
|||
'kv-line': kv_line, |
|||
'number-edit': number_edit |
|||
}, |
|||
data(){ |
|||
return { |
|||
show: true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.rp-container{ |
|||
padding: 0 60upx; |
|||
.rc-space{ |
|||
padding-top: 40upx; |
|||
} |
|||
.rc-orange{ |
|||
color: #FF873D; |
|||
} |
|||
.rc-time-select{ |
|||
margin-top: 40upx; |
|||
@include ctf(space-between); |
|||
.rts-name{ |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
} |
|||
.rts-ipt{ |
|||
display: block; |
|||
box-sizing: border-box; |
|||
padding: 10upx 30upx; |
|||
width: 358upx; |
|||
height: 56upx; |
|||
border-radius: 10upx; |
|||
background: #F2F2F7; |
|||
@include flcw(24upx, 34upx, #333333); |
|||
} |
|||
} |
|||
.rc-remark{ |
|||
width: auto; |
|||
margin-top: 40upx; |
|||
padding: 20upx 24upx; |
|||
height: 144upx; |
|||
background: #F2F2F7; |
|||
@include flcw(24upx, 34upx, #333333); |
|||
} |
|||
.rc-btn{ |
|||
margin: 64upx auto 0upx; |
|||
width: 240upx; |
|||
height: 88upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(28upx, 88upx, #fff); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
<template> |
|||
<view class="popup-template" v-show="show"> |
|||
<view class="pt-mask"> |
|||
<view class="pm-container"> |
|||
<image |
|||
class="pc-close" |
|||
mode="aspectFit" |
|||
src="/subpackage/shower/static/images/close.png" |
|||
@click="$emit('click:close')" |
|||
></image> |
|||
<view class="pc-title">{{ title }}</view> |
|||
<view class="pc-content"> |
|||
<slot></slot> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.pt-mask{ |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
z-index: 99; |
|||
.pm-container{ |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
padding-top: 44upx; |
|||
padding-bottom: 48upx; |
|||
width: 640upx; |
|||
background: #fff; |
|||
border-radius: 10upx; |
|||
.pc-close{ |
|||
position: absolute; |
|||
top: 24upx; |
|||
right: 24upx; |
|||
width: 34upx; |
|||
height: 34upx; |
|||
} |
|||
.pc-title{ |
|||
padding: 0 30upx; |
|||
text-align: center; |
|||
@include flcw(32upx, 44upx, #333, 500); |
|||
@include tHide; |
|||
} |
|||
.pc-content{ |
|||
padding-top: 24upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,12 @@ |
|||
import { ORIGIN } from '../../../js/api'; |
|||
|
|||
export const SHOWER_API = { |
|||
CardList:`${ORIGIN}/admin/stadiumWaterCard/list`, // 后台-水卡-列表
|
|||
CardDetails:`${ORIGIN}/admin/stadiumWaterCard/details`, // 后台-水卡-详情
|
|||
CardRecharge:`${ORIGIN}/admin/stadiumWaterCard/recharge`, // 后台-水卡-充值
|
|||
CardFeeDeduction:`${ORIGIN}/admin/stadiumWaterCard/feeDeduction`, // 后台-水卡-扣费
|
|||
// CardList:`${ORIGIN}/admin/stadiumWaterCardUseRecord/list`, // 后台-水卡使用记录-列表
|
|||
// CardListOfCard:`${ORIGIN}/admin/stadiumWaterCardUseRecord/listOfCard`, // 后台-水卡使用记录-（某张水卡的）列表
|
|||
} |
|||
|
|||
export default SHOWER_API; |
|||
@ -0,0 +1,10 @@ |
|||
import { Server } from '../../../js/server'; |
|||
|
|||
class DeviceServer extends Server { |
|||
constructor(props){ |
|||
super(props) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default new DeviceServer(); |
|||
@ -0,0 +1,106 @@ |
|||
<template> |
|||
<view class="use-detail"> |
|||
<view class="ud-box"> |
|||
<view class="ub-stadium"> |
|||
<image class="us-logo"></image> |
|||
<view class="us-name">欧轩智能羽毛球馆(永泰店)</view> |
|||
</view> |
|||
<view class="ub-lines"> |
|||
<kv-line label="创建时间："> |
|||
<template slot="default">2019-05-17 11:12:58</template> |
|||
<template slot="right"> |
|||
<view class="ul-status">已完成</view> |
|||
</template> |
|||
</kv-line> |
|||
<kv-line label="手机号码：">18656456895</kv-line> |
|||
<kv-line label="用户昵称：">yiming</kv-line> |
|||
<kv-line label="结束计时方式：">小程序(欧轩智能场馆)</kv-line> |
|||
</view> |
|||
</view> |
|||
<view class="ud-box"> |
|||
<kv-line label="计时信息"></kv-line> |
|||
<view class="ub-lines"> |
|||
<kv-line label="设备名称：">1号水阀</kv-line> |
|||
<kv-line label="开始时间：">2020-01-10 15:02:24</kv-line> |
|||
<kv-line label="结束时间：">2020-01-10 17:20:24</kv-line> |
|||
<kv-line label="时长合计：">35分9秒(免费时长:15分00秒)</kv-line> |
|||
<kv-line label="免费时长：">15分00秒</kv-line> |
|||
</view> |
|||
<view class="ui-deduction"> |
|||
<text class="ud-txt">扣减时长：</text>20分钟00秒 |
|||
</view> |
|||
<view class="ui-btn">结束计时</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import kv_line from "@/components/kv_line.vue"; |
|||
export default { |
|||
components: { |
|||
'kv-line': kv_line, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.use-detail{ |
|||
padding: 24upx; |
|||
@include isPd(24upx); |
|||
.ud-box{ |
|||
padding: 30upx; |
|||
background: #fff; |
|||
border-radius: 10upx; |
|||
&+.ud-box{ |
|||
margin-top: 24upx; |
|||
} |
|||
} |
|||
.ub-stadium{ |
|||
@include ctf; |
|||
padding-bottom: 26upx; |
|||
border-bottom: 1px solid #D8D8D8; |
|||
.us-logo{ |
|||
margin-right: 14upx; |
|||
flex-shrink: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
.us-name{ |
|||
margin-left: 20upx; |
|||
font-size: 28upx; |
|||
color: #333333; |
|||
@include tHide; |
|||
@include flcw(28upx, 40upx, #333333, 500); |
|||
} |
|||
} |
|||
.ub-lines{ |
|||
padding-top: 24upx; |
|||
.ul-status{ |
|||
text-align: right; |
|||
@include flcw(28upx, 40upx, #9C9C9F); |
|||
} |
|||
} |
|||
|
|||
.ui-deduction{ |
|||
margin-top: 30upx; |
|||
padding-top: 24upx; |
|||
text-align: right; |
|||
border-top: 1upx solid #D8D8D8; |
|||
@include flcw(28upx, 40upx, $mColor); |
|||
@include tHide; |
|||
.ud-txt{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
|
|||
.ui-btn{ |
|||
margin: 10upx 0upx 0upx auto; |
|||
width: 192upx; |
|||
height: 80upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(32upx, 80upx, #fff); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
<template> |
|||
<view class="use-record"> |
|||
<order-filter |
|||
ref="orderFilter" |
|||
@click:time="showPeriodModal" |
|||
@click:filter="showFilterModal" |
|||
:start-time="condition.start_time" |
|||
:end-time="condition.end_time" |
|||
></order-filter> |
|||
<view class="ur-list"> |
|||
<view class="ul-item" v-for="i in 10" :key="i"> |
|||
<view class="ui-bar"> |
|||
<view class="ub-name">欧轩智能羽毛球馆(永泰店)</view> |
|||
<image class="ub-icon" mode="aspectFit" src="/subpackage/shower/static/images/arrow.png"></image> |
|||
</view> |
|||
<view class="ui-lines"> |
|||
<kv-line label="设备名称：">1号水阀</kv-line> |
|||
<kv-line label="时长合计：">1小时58分46秒</kv-line> |
|||
<kv-line label="手机号码：">18656456895</kv-line> |
|||
<kv-line label="创建时间：">2019-08-17 18:02:58</kv-line> |
|||
</view> |
|||
<view class="ui-deduction"> |
|||
<text class="ud-txt">扣减时长：</text>20分钟00秒 |
|||
</view> |
|||
<view class="ui-btn">结束计时</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"; |
|||
export default { |
|||
components: { |
|||
'order-filter': orderFilter, |
|||
'period-modal': periodModal, |
|||
'filter-modal': filterModal, |
|||
'kv-line': kv_line |
|||
}, |
|||
data(){ |
|||
return { |
|||
condition: { |
|||
start_time: '2024-08-20', |
|||
end_time: '2024-08-20', |
|||
} |
|||
} |
|||
}, |
|||
onLoad(options){ |
|||
this.$refs.orderFilter.initStadiumSelect(options?.brand_id); |
|||
}, |
|||
methods: { |
|||
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.show(); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.use-record{ |
|||
.ur-list{ |
|||
padding: 24upx; |
|||
@include isPd(24upx); |
|||
.ul-item{ |
|||
padding: 0upx 20upx 30upx; |
|||
border-radius: 10upx; |
|||
background: #fff; |
|||
&+.ul-item{ |
|||
margin-top: 24upx; |
|||
} |
|||
.ui-bar{ |
|||
padding: 30upx 0upx; |
|||
border-bottom: 1upx solid #D8D8D8; |
|||
@include ctf(space-between); |
|||
.ub-name{ |
|||
@include flcw(28upx, 40upx, #1A1A1A, 500); |
|||
@include tHide; |
|||
} |
|||
.ub-icon{ |
|||
margin-left: 12upx; |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
} |
|||
.ui-lines{ |
|||
padding-top: 14upx; |
|||
} |
|||
.ui-deduction{ |
|||
margin-top: 30upx; |
|||
padding-top: 24upx; |
|||
text-align: right; |
|||
border-top: 1upx solid #D8D8D8; |
|||
@include flcw(28upx, 40upx, #1A1A1A); |
|||
@include tHide; |
|||
.ud-txt{ |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
.ui-btn{ |
|||
margin: 10upx 0upx 0upx auto; |
|||
width: 192upx; |
|||
height: 80upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
background: $mColor; |
|||
@include flcw(32upx, 80upx, #fff); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 28 | Height: 28 | Size: 258 B |
|
After Width: 34 | Height: 34 | Size: 256 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue