14 changed files with 421 additions and 2 deletions
-
0src/components/order_list/timing/site.vue
-
6src/pages.json
-
55src/subpackage/order/components/order_list/filter_modal.vue
-
83src/subpackage/order/components/order_list/header.vue
-
123src/subpackage/order/components/order_list/period_modal.vue
-
100src/subpackage/order/components/order_list/stadium_select.vue
-
3src/subpackage/order/js/api.js
-
47src/subpackage/order/pages/order_list/order_list.vue
-
6src/subpackage/order/pages/order_manage/order_manage.vue
-
BINsrc/subpackage/order/static/images/filter.png
-
BINsrc/subpackage/order/static/images/order_manage/order_22.png
-
0src/subpackage/order/static/images/order_manage/order_23.png
-
BINsrc/subpackage/order/static/images/search.png
@ -0,0 +1,55 @@ |
|||
<template> |
|||
<view class="filter-modal"> |
|||
<view class="fm-container"> |
|||
<view class="fc-title">标题</view> |
|||
<view class="fc-list"> |
|||
<view class="fl-item" v-for="i in 5" :key="i">8848</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.filter-modal{ |
|||
position: fixed; |
|||
left: 0; |
|||
top: var(--window-top); |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, .5); |
|||
z-index: 10; |
|||
.fm-container{ |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 500upx; |
|||
padding-left: 42upx; |
|||
background-color: #fff; |
|||
padding-top: 26upx; |
|||
padding-left: 42upx; |
|||
.fc-title{ |
|||
margin-bottom: 58upx; |
|||
padding: 50upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include flcw(24upx, 34upx, #9c9c9f); |
|||
} |
|||
.fc-list{ |
|||
.fl-item{ |
|||
margin-bottom: 50upx; |
|||
@include tHide; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
&.active{ |
|||
color: $mColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
<template> |
|||
<view class="order-list-header"> |
|||
<stadium-select |
|||
ref="stadiumSelect" |
|||
:visibled="isStadium" |
|||
@change:stadium="$emit('change:stadium', $event)" |
|||
></stadium-select> |
|||
<view class="olh-period"> |
|||
<view class="op-txt" @click="$emit('click:time')">2020.08.01-2020.08.27</view> |
|||
<view class="op-icon" @click="$emit('click:time')"></view> |
|||
</view> |
|||
<view class="olh-bot"> |
|||
<view class="ob-desc"> |
|||
<text>成功交易0笔，退款0笔</text> |
|||
</view> |
|||
<view class="ob-btns"> |
|||
<image class="ob-icon" src="../../static/images/search.png"></image> |
|||
<image @click="$emit('click:filter')" class="ob-icon" src="../../static/images/filter.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import stadiumSelect from './stadium_select.vue'; |
|||
export default { |
|||
components: { |
|||
'stadium-select': stadiumSelect |
|||
}, |
|||
data(){ |
|||
return { |
|||
isStadium: false |
|||
} |
|||
}, |
|||
methods: { |
|||
initStadiumSelect(brand_id){ |
|||
this.isStadium = !!brand_id; |
|||
return this.$refs.stadiumSelect.getStadiumList(brand_id); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-list-header{ |
|||
.olh-period{ |
|||
padding: 24upx 24upx 0upx; |
|||
@include ctf(flex-start); |
|||
.op-txt{ |
|||
@include flcw(32upx, 44upx, #1a1a1a, 500); |
|||
@include tHide(1); |
|||
} |
|||
.op-icon{ |
|||
flex-shrink: 0; |
|||
margin-left: 14upx; |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 10upx solid transparent; |
|||
border-right: 10upx solid transparent; |
|||
border-top: 10upx solid #1a1a1a; |
|||
} |
|||
} |
|||
.olh-bot{ |
|||
padding: 16upx 24upx; |
|||
@include ctf(space-between); |
|||
.ob-desc{ |
|||
flex-grow: 1; |
|||
@include flcw(24upx, 34upx, #9c9c9f); |
|||
@include tHide(1); |
|||
} |
|||
.ob-btns{ |
|||
flex-shrink: 0; |
|||
@include ctf(flex-end); |
|||
.ob-icon{ |
|||
flex-shrink: 0; |
|||
margin-left: 40upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,123 @@ |
|||
<template> |
|||
<view class="period-modal" v-show="visibled" @click="hide"> |
|||
<view class="pm-period" @click.stop="()=>false"> |
|||
<view class="pp-tit">日期范围</view> |
|||
<picker class="pp-picker" mode="date" @change="startTimeChange"> |
|||
<view class="pp-time"> |
|||
<text class="pt-txt">开始时间</text> |
|||
<view class="pt-right"> |
|||
<input class="pr-ipt" placeholder="选择时间" disabled :value="star" /> |
|||
<image class="pr-img" mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|||
</view> |
|||
</view> |
|||
</picker> |
|||
<picker class="pp-picker" mode="date" @change="endTimeChange"> |
|||
<view class="pp-time"> |
|||
<text class="pt-txt">截止时间</text> |
|||
<view class="pt-right"> |
|||
<input class="pr-ipt" placeholder="选择时间" disabled :value="end" /> |
|||
<image class="pr-img" mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image> |
|||
</view> |
|||
</view> |
|||
</picker> |
|||
<view class="pl-btn active" @click="confirmPeriod">确定</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { showNone } from '@/utils/util'; |
|||
export default { |
|||
|
|||
data(){ |
|||
return { |
|||
star: '', |
|||
end: '', |
|||
visibled: false |
|||
} |
|||
}, |
|||
methods: { |
|||
show(){ |
|||
this.visibled = true; |
|||
}, |
|||
hide(){ |
|||
this.visibled = false; |
|||
}, |
|||
startTimeChange(e){ |
|||
this.star = e.detail.value; |
|||
}, |
|||
endTimeChange(e){ |
|||
this.end = e.detail.value; |
|||
}, |
|||
confirmPeriod(){ |
|||
let { star, end } = this; |
|||
if(!star || !end)return showNone('请选择日期范围！'); |
|||
this.hide(); |
|||
this.$emit('click:cofirm', { star, end }); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.period-modal{ |
|||
position: fixed; |
|||
left: 0; |
|||
top: var(--window-top); |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, .5); |
|||
z-index: 10; |
|||
.pm-period{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
padding-left: 38upx; |
|||
padding-top: 66upx; |
|||
height: 472upx; |
|||
width: 100%; |
|||
background-color: #fff; |
|||
.pp-tit{ |
|||
@include flcw(24upx, 34upx, #9c9c9f); |
|||
} |
|||
.pp-picker{ |
|||
width: 100%; |
|||
|
|||
} |
|||
.pp-time{ |
|||
padding-right: 40upx; |
|||
height: 124upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
@include ctf(space-between); |
|||
.pt-txt{ |
|||
flex-shrink: 0; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
.pt-right{ |
|||
flex-grow: 1; |
|||
@include ctf(flex-end); |
|||
.pr-ipt{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
text-align: right; |
|||
@include flcw(32upx, 44upx, #1a1a1a); |
|||
} |
|||
.pr-img{ |
|||
flex-shrink: 0; |
|||
margin-left: 36upx; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
} |
|||
} |
|||
.pl-btn{ |
|||
text-align: center; |
|||
@include flcw(32upx, 124upx, rgba(0, 152, 116, .2), 500); |
|||
color: rgba(0, 152, 116, .2); |
|||
&.active{ |
|||
color: $mColor; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,100 @@ |
|||
<template> |
|||
<view class="stadium-select" v-show="visibled"> |
|||
<text class="ss-txt">当前门店</text> |
|||
<picker mode="selector" class="ss-picker" :range="stadiumList" range-key="name" @change="pickerChange"> |
|||
<view class="ss-frame"> |
|||
<input type="text" disabled class="sf-ipt" :value="curStadium.name || ''" placeholder="全部"/> |
|||
<image class="sf-img" mode="aspectFit" src="../../static/images/arrow.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { ORDER_API } from '../../js/api'; |
|||
import server from '../../js/server'; |
|||
export default { |
|||
props: { |
|||
visibled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
stadiumList: [ |
|||
{ id: '', name: '全部' } |
|||
], |
|||
curStadium: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
pickerChange(e){ |
|||
let { value } = e.detail; |
|||
let { stadiumList } = this; |
|||
this.curStadium = stadiumList[value]; |
|||
this.$emit('change:stadium', this.curStadium); |
|||
}, |
|||
// 获取品牌店铺列表 |
|||
getStadiumList(brand_id){ |
|||
return server.get({ |
|||
url: ORDER_API.stadiumList, |
|||
data: { brand_id }, |
|||
isDefaultGet: false |
|||
}) |
|||
.then(res=>{ |
|||
let _data = res?.data || {}; |
|||
if(_data.code === 0){ |
|||
let _list = _data?.data?.list || []; |
|||
return this.stadiumList = [ ...this.stadiumList, ..._list ]; |
|||
}else{ |
|||
console.warn('getStoreList err:', err); |
|||
return this.stadiumList; |
|||
} |
|||
}) |
|||
.catch(err=>{ |
|||
console.warn('getStoreList err:', err); |
|||
return this.stadiumList; |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.stadium-select{ |
|||
padding: 0 24upx; |
|||
height: 144upx; |
|||
background-color: #fff; |
|||
@include ctf(space-between); |
|||
.ss-txt{ |
|||
margin-right: 20upx; |
|||
flex-shrink: 0; |
|||
@include flcw(28upx, 40upx, #9c9c9f); |
|||
} |
|||
.ss-picker{ |
|||
flex-grow: 1; |
|||
.ss-frame{ |
|||
padding: 0 20upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
@include ctf(space-between); |
|||
.sf-ipt{ |
|||
flex-grow: 1; |
|||
@include flcw(28upx, 40upx, #1a1a1a); |
|||
@include tHide(1); |
|||
} |
|||
.sf-img{ |
|||
margin-left: 10upx; |
|||
flex-shrink: 0; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
} |
|||
} |
|||
.ocs-store{ |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<view class="order-list"> |
|||
<order-list-header |
|||
ref="orderListHeader" |
|||
@change:stadium="changeStadium" |
|||
@click:time="showPeriodModal" |
|||
></order-list-header> |
|||
<period-modal |
|||
ref="periodModal" |
|||
@click:cofirm="periodConfirm" |
|||
></period-modal> |
|||
<filter-modal></filter-modal> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import orderListHeader from "../../components/order_list/header.vue"; |
|||
import periodModal from "../../components/order_list/period_modal.vue"; |
|||
import filterModal from "../../components/order_list/filter_modal.vue"; |
|||
export default { |
|||
components: { |
|||
'order-list-header': orderListHeader, |
|||
'period-modal': periodModal, |
|||
'filter-modal': filterModal |
|||
}, |
|||
async onLoad(options){ |
|||
let _list = await this.$refs.orderListHeader.initStadiumSelect(options.brand_id) |
|||
}, |
|||
methods: { |
|||
changeStadium(e){ |
|||
console.log('changeStadium:', e) |
|||
}, |
|||
showPeriodModal(){ |
|||
this.$refs.periodModal.show(); |
|||
}, |
|||
periodConfirm(e){ |
|||
console.log('periodConfirm:', e) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.order-list{ |
|||
|
|||
} |
|||
</style> |
|||
|
After Width: 40 | Height: 40 | Size: 127 B |
|
After Width: 60 | Height: 60 | Size: 920 B |
|
Before Width: 120 | Height: 120 | Size: 1.2 KiB After Width: 120 | Height: 120 | Size: 1.2 KiB |
|
After Width: 40 | Height: 40 | Size: 386 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue