You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
3.4 KiB
110 lines
3.4 KiB
<template>
|
|
<view class="card-manage">
|
|
<order-filter
|
|
ref="orderFilter"
|
|
@click:time="showPeriodModal"
|
|
@click:filter="showFilterModal"
|
|
:start-time="condition.start_time"
|
|
:end-time="condition.end_time"
|
|
></order-filter>
|
|
<view class="cm-list">
|
|
<view class="cl-item" v-for="(e, i) in 10" :key="i">
|
|
<view class="ci-bar">
|
|
<view class="cb-name">欧轩智能羽毛球馆(永泰店)</view>
|
|
<view class="cb-status">使用中</view>
|
|
</view>
|
|
<view class="ci-lines">
|
|
<kv-line label="卡名称：">智能浴室用水卡</kv-line>
|
|
<kv-line label="水阀卡号：">20195171564566</kv-line>
|
|
<kv-line label="手机号码：">18316553478</kv-line>
|
|
<kv-line label="微信昵称：">yiming</kv-line>
|
|
<kv-line label="可用时长："><text class="cl-txt">100分00秒</text></kv-line>
|
|
</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">
|
|
.cm-list{
|
|
padding: 24upx;
|
|
@include isPd(24upx);
|
|
.cl-item{
|
|
padding: 0upx 20upx 30upx;
|
|
border-radius: 10upx;
|
|
background: #fff;
|
|
.ci-bar{
|
|
padding: 30upx 0upx;
|
|
border-bottom: 1upx solid #D8D8D8;
|
|
@include ctf(space-between);
|
|
.cb-name{
|
|
@include flcw(28upx, 40upx, #1A1A1A, 500);
|
|
@include tHide;
|
|
}
|
|
.cb-status{
|
|
flex-shrink: 0;
|
|
max-width: 30%;
|
|
@include tHide;
|
|
@include flcw(28upx, 40upx, $mColor);
|
|
}
|
|
}
|
|
.ci-lines{
|
|
padding-top: 20upx;
|
|
.cl-txt{
|
|
color: #FF873D;
|
|
}
|
|
}
|
|
&+.cl-item{
|
|
margin-top: 24upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|