5 Commits
cfea3f2f39
...
949e09327c
| Author | SHA1 | Message | Date |
|---|---|---|---|
 刘嘉炜
|
949e09327c |
add shower order style
|
10 months ago |
|
刘嘉炜
|
25271dc0ce |
Merge branch 'dev' of https://git.ouxuan.net/liujw/ox_zhiNengZhuShou into md0726
|
10 months ago |
|
刘嘉炜
|
22c167c5ef |
vtest 1.1.60
|
10 months ago |
|
刘嘉炜
|
d2b0622697 |
finish tid1641
|
11 months ago |
|
刘嘉炜
|
33f45c5ca7 |
add tid1641 style && logic
|
11 months ago |
21 changed files with 891 additions and 111 deletions
-
5src/components/filter/stadium_select.vue
-
0src/components/kvs_line.vue
-
24src/pages.json
-
5src/subpackage/device/js/device_api.js
-
34src/subpackage/device/pages/index/index.vue
-
180src/subpackage/device/pages/lighting_time/list.vue
-
271src/subpackage/device/pages/lighting_time/setting.vue
-
8src/subpackage/device/pages/switch_manage/switch_manage.vue
-
BINsrc/subpackage/device/static/images/delete.png
-
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
@ -0,0 +1,180 @@ |
|||||
|
<template> |
||||
|
<view class="lt-list"> |
||||
|
<view class="ll-title">{{ optionsQuery.hardware_name || '-' }}</view> |
||||
|
<view class="ll-list"> |
||||
|
<view class="ll-item" v-for="(e, i) in timingLs" :key="i"> |
||||
|
<view class="li-line"> |
||||
|
<view class="ll-txt">指令：{{ getInstructTxt(e.operate) }}</view> |
||||
|
<image class="ll-icon" @click="deleteItem(e)" mode="aspectFit" src="/subpackage/device/static/images/delete.png"></image> |
||||
|
</view> |
||||
|
<view class="li-line"> |
||||
|
<view class="ll-txt">时间：{{ e.h_m_s || '-'}}</view> |
||||
|
</view> |
||||
|
<view class="li-line"> |
||||
|
<view class="ll-txt">日期：{{ e.day_of_week || '-' }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ll-fixed-space"></view> |
||||
|
<view class="ll-fixed"> |
||||
|
<view class="lf-btn" @click="addTask">添加定时任务</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import deviceServer from '../../js/device_server'; |
||||
|
import deviceApi from '../../js/device_api'; |
||||
|
import { showModal, showNone, showLoad, hideLoad, routeTo, jsonPar, jsonStr } from "@/utils/util"; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
timingLs: [], |
||||
|
optionsQuery: {}, |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options){ |
||||
|
options.hardware_name = jsonPar(options?.hardware_name); |
||||
|
this.optionsQuery = options; |
||||
|
}, |
||||
|
onShow(){ |
||||
|
let { optionsQuery } = this; |
||||
|
this.getTimingList({ |
||||
|
hardware_id: optionsQuery?.hardware_id || '' |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
addTask(){ |
||||
|
let { hardware_id, hardware_name } = this.optionsQuery; |
||||
|
let _qryStr = `hardware_id=${hardware_id || ''}&hardware_name=${jsonStr(hardware_name || '')}` |
||||
|
routeTo(`/subpackage/device/pages/lighting_time/setting?${_qryStr}`, 'nT') |
||||
|
}, |
||||
|
deleteItem(e){ |
||||
|
showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否删除该项？', |
||||
|
showCancel: true, |
||||
|
confirmText: '是', |
||||
|
cancelText: '否', |
||||
|
success: res =>{ |
||||
|
if(res?.confirm){ |
||||
|
this.cacScheduledTaskDelete(e?.id) |
||||
|
.then(res=>{ |
||||
|
if(res === 'SUCCESS')this.getTimingList({ hardware_id: e?.hardware_id }) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
cacScheduledTaskDelete(id){ |
||||
|
showLoad(); |
||||
|
return deviceServer.post({ |
||||
|
url: deviceApi.cacScheduledTaskDelete, |
||||
|
data: { id }, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
hideLoad(); |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
showModal({ |
||||
|
title: '提示', |
||||
|
content: _data.message || '操作成功！' |
||||
|
}) |
||||
|
return "SUCCESS" |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
.catch(err => { |
||||
|
hideLoad(); |
||||
|
showModal({ |
||||
|
title: '提示', |
||||
|
content: err.message || '操作失败！' |
||||
|
}) |
||||
|
console.warn('setting cacScheduledTaskSave err', err); |
||||
|
}) |
||||
|
}, |
||||
|
getInstructTxt(operate){ |
||||
|
let _obj = { |
||||
|
'open': '开启', |
||||
|
'close': '关闭' |
||||
|
} |
||||
|
return _obj?.[operate] || operate || '未知' |
||||
|
}, |
||||
|
getTimingList({ |
||||
|
hardware_id = '', |
||||
|
}){ |
||||
|
showLoad(); |
||||
|
return deviceServer.get({ |
||||
|
url: deviceApi.cacScheduledTaskGet, |
||||
|
data: { |
||||
|
hardware_id, |
||||
|
}, |
||||
|
failMsg: '获取定时列表失败' |
||||
|
}) |
||||
|
.then(res => { |
||||
|
hideLoad(); |
||||
|
let _ls = res || []; |
||||
|
this.timingLs = _ls; |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
hideLoad(); |
||||
|
console.warn('lighting_time list getTimingList err --->', err); |
||||
|
// return Promise.reject(err); |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.ll-title{ |
||||
|
padding: 46upx 40upx 60upx; |
||||
|
@include flcw(44upx, 60upx, #1a1a1a, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.ll-list{ |
||||
|
.ll-item{ |
||||
|
padding: 24upx 30upx; |
||||
|
background: #fff; |
||||
|
&+.ll-item{ |
||||
|
margin-top: 24upx; |
||||
|
} |
||||
|
.li-line{ |
||||
|
@include ctf(space-between); |
||||
|
align-items: baseline; |
||||
|
&+.li-line{ |
||||
|
margin-top: 16upx; |
||||
|
} |
||||
|
.ll-txt{ |
||||
|
@include flcw(28upx, 40upx, #1a1a1a); |
||||
|
} |
||||
|
.ll-icon { |
||||
|
flex-shrink: 0; |
||||
|
margin-left: 12upx; |
||||
|
width: 44upx; |
||||
|
height: 44upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.ll-fixed-space{ |
||||
|
padding-bottom: 132upx; |
||||
|
@include isPd(132upx); |
||||
|
} |
||||
|
.ll-fixed{ |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
padding: 10upx 24upx; |
||||
|
width: 100%; |
||||
|
@include isPd(10upx); |
||||
|
.lf-btn{ |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
background: $mColor; |
||||
|
@include flcw(32upx, 112upx, #fff, 500); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,271 @@ |
|||||
|
<template> |
||||
|
<view class="lt-setting"> |
||||
|
<view class="ll-title">{{ optionsQuery.hardware_name || '-' }}</view> |
||||
|
|
||||
|
<view class="ls-container"> |
||||
|
<view class="lc-select"> |
||||
|
<view class="lc-name">指令</view> |
||||
|
<view class="ls-options"> |
||||
|
<view class="lp-item" @click="condition.instruct = 'open'"> |
||||
|
<view class="li-txt">开</view> |
||||
|
<image |
||||
|
class="li-icon" |
||||
|
mode="aspectFit" |
||||
|
:class="{active: condition.instruct === 'open'}" |
||||
|
:src="condition.instruct === 'open' ? '/subpackage/device/static/images/selected_987.png' : ''" |
||||
|
></image> |
||||
|
</view> |
||||
|
<view class="lp-item" @click="condition.instruct = 'close'"> |
||||
|
<view class="li-txt">关</view> |
||||
|
<image |
||||
|
class="li-icon" |
||||
|
mode="aspectFit" |
||||
|
:class="{active: condition.instruct === 'close'}" |
||||
|
:src="condition.instruct === 'close' ? '/subpackage/device/static/images/selected_987.png' : ''" |
||||
|
></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="lc-picker"> |
||||
|
<view class="lc-name">时间点</view> |
||||
|
<picker mode="time" @change="condition.time = $event.detail.value"> |
||||
|
<view class="lp-box"> |
||||
|
<input disabled type="text" class="lb-ipt" v-model="condition.time"> |
||||
|
<image class="lb-icon" mode="aspectFit" src="/subpackage/device/static/images/arrow_b2.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
<view class="lc-switch"> |
||||
|
<view class="lc-name">日期</view> |
||||
|
<view class="ls-right"> |
||||
|
<switch class="lr-switch" color="#009874" @change="switchChange"></switch> |
||||
|
<view class="lr-txt">全选</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="lc-week-ls"> |
||||
|
<view |
||||
|
class="lwl-item" |
||||
|
v-for="(e, i) in weeks" |
||||
|
:key="i" |
||||
|
:class="{active: condition.weekLs.includes(e)}" |
||||
|
@click="weekItemClick(e)" |
||||
|
>{{ e }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="ll-fixed-space"></view> |
||||
|
<view class="ll-fixed"> |
||||
|
<view class="lf-btn" @click="confirmBtn">添加定时任务</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import deviceServer from '../../js/device_server'; |
||||
|
import deviceApi from '../../js/device_api'; |
||||
|
import { showModal, showNone, showLoad, hideLoad, routeTo, jsonPar } from "@/utils/util"; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
weeks: [ '日', '一', '二', '三', '四', '五', '六' ].map(e=>`星期${e}`), |
||||
|
condition: { |
||||
|
instruct: 'open', // 指令 open: 开, close: 关 |
||||
|
time: '00:00', // 时间点 |
||||
|
weekLs: [], // 日期 |
||||
|
}, |
||||
|
optionsQuery: {} |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options){ |
||||
|
options.hardware_name = jsonPar(options?.hardware_name); |
||||
|
this.optionsQuery = options || {} |
||||
|
}, |
||||
|
methods: { |
||||
|
switchChange(e){ |
||||
|
if(e.detail.value){ |
||||
|
this.condition.weekLs = [ ...this.weeks]; |
||||
|
}else{ |
||||
|
this.condition.weekLs = []; |
||||
|
} |
||||
|
}, |
||||
|
weekItemClick(e){ |
||||
|
let { weekLs } = this.condition; |
||||
|
if(weekLs.includes(e)){ |
||||
|
weekLs.splice(weekLs.indexOf(e), 1); |
||||
|
}else{ |
||||
|
weekLs.push(e); |
||||
|
} |
||||
|
}, |
||||
|
confirmBtn(){ |
||||
|
let { optionsQuery, condition } = this; |
||||
|
if(!condition?.weekLs?.length)return showNone('请选择日期！'); |
||||
|
if(!condition?.time)return showNone('请选时间点！'); |
||||
|
this.cacScheduledTaskSave({ |
||||
|
hardware_id: optionsQuery?.hardware_id || '', |
||||
|
day_of_week: condition?.weekLs?.join(','), |
||||
|
h_m_s: `${condition?.time}:00`, |
||||
|
operate: condition?.instruct, |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
cacScheduledTaskSave({ |
||||
|
hardware_id = '', |
||||
|
day_of_week = '', |
||||
|
h_m_s = '', |
||||
|
operate = '' |
||||
|
}){ |
||||
|
showLoad(); |
||||
|
return deviceServer.post({ |
||||
|
url: deviceApi.cacScheduledTaskSave, |
||||
|
data: { hardware_id, day_of_week, h_m_s, operate }, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
hideLoad(); |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
showModal({ |
||||
|
title: '提示', |
||||
|
content: _data.message || '操作成功！', |
||||
|
}) |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
.catch(err => { |
||||
|
hideLoad(); |
||||
|
showModal({ |
||||
|
title: '提示', |
||||
|
content: err.message || '操作失败！' |
||||
|
}) |
||||
|
console.warn('setting cacScheduledTaskSave err', err); |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.ll-title{ |
||||
|
padding: 46upx 40upx 60upx; |
||||
|
@include flcw(44upx, 60upx, #1a1a1a, 500); |
||||
|
@include tHide; |
||||
|
} |
||||
|
.ls-container{ |
||||
|
margin: 0 auto; |
||||
|
padding: 50upx 30upx 100upx; |
||||
|
width: 678upx; |
||||
|
border-radius: 10upx; |
||||
|
background: #fff; |
||||
|
.lc-name{ |
||||
|
flex-shrink: 0; |
||||
|
@include flcw(32upx, 44upx, #1a1a1a); |
||||
|
} |
||||
|
.lc-select{ |
||||
|
@include ctf(space-between); |
||||
|
.ls-options{ |
||||
|
width: 480upx; |
||||
|
@include ctf; |
||||
|
.lp-item{ |
||||
|
width: 50%; |
||||
|
@include ctf; |
||||
|
.li-txt{ |
||||
|
@include flcw(32upx, 44upx, #1a1a1a); |
||||
|
} |
||||
|
.li-icon{ |
||||
|
margin-left: 22upx; |
||||
|
flex-shrink: 0; |
||||
|
width: 40upx; |
||||
|
height: 40upx; |
||||
|
border: 2upx solid #D8D8D8; |
||||
|
border-radius: 50%; |
||||
|
&.active{ |
||||
|
border-width: 0upx; |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.lc-picker{ |
||||
|
margin-top: 50upx; |
||||
|
@include ctf(space-between); |
||||
|
.lp-box{ |
||||
|
@include ctf(space-between); |
||||
|
width: 480upx; |
||||
|
height: 96upx; |
||||
|
border: 2upx solid #D8D8D8; |
||||
|
border-radius: 10upx; |
||||
|
padding: 0 20upx; |
||||
|
.lb-ipt{ |
||||
|
flex-grow: 1; |
||||
|
@include flcw(32upx, 44upx, #1a1a1a); |
||||
|
} |
||||
|
.lb-icon{ |
||||
|
flex-shrink: 0; |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
transform: rotateZ(90deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lc-switch{ |
||||
|
margin-top: 50upx; |
||||
|
@include ctf(space-between); |
||||
|
.ls-right{ |
||||
|
width: 480upx; |
||||
|
@include ctf; |
||||
|
.lr-switch{ |
||||
|
transform: scale(.8); |
||||
|
} |
||||
|
.lr-txt{ |
||||
|
margin-left: 20upx; |
||||
|
@include flcw(32upx, 44upx, #1a1a1a); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.lc-week-ls{ |
||||
|
margin-top: 60upx; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.lwl-item{ |
||||
|
margin: 0 20upx; |
||||
|
width: 160upx; |
||||
|
height: 88upx; |
||||
|
border-radius: 6upx; |
||||
|
border: 2upx solid #979797; |
||||
|
text-align: center; |
||||
|
@include flcw(32upx, 84upx, #979797); |
||||
|
&:nth-child(n + 4){ |
||||
|
margin-top: 40upx; |
||||
|
} |
||||
|
&.active{ |
||||
|
color: $mColor; |
||||
|
border-color: $mColor; |
||||
|
background: rgba($color: $mColor, $alpha: .12); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.ll-fixed-space{ |
||||
|
padding-bottom: 132upx; |
||||
|
@include isPd(132upx); |
||||
|
} |
||||
|
.ll-fixed{ |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
padding: 10upx 24upx; |
||||
|
width: 100%; |
||||
|
@include isPd(10upx); |
||||
|
.lf-btn{ |
||||
|
text-align: center; |
||||
|
border-radius: 10upx; |
||||
|
background: $mColor; |
||||
|
@include flcw(32upx, 112upx, #fff, 500); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 36 | Height: 36 | Size: 365 B |
@ -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