15 changed files with 849 additions and 20 deletions
-
10src/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
-
110src/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