23 changed files with 1218 additions and 124 deletions
-
32src/components/reservation_order/reservation_order.vue
-
33src/components/site/order_modal/order_modal.vue
-
4src/js/api.js
-
2src/js/server.js
-
17src/pages.json
-
10src/pages/index/index.vue
-
212src/pages/turnover/turnover.vue
-
BINsrc/static/images/icon/toggle.png
-
BINsrc/static/images/icon/triangle_c33.png
-
43src/subpackage/device/components/order/reservation_site_detail/reservation_site_detail.vue
-
87src/subpackage/income/components/details_item/details_item.vue
-
9src/subpackage/income/js/api.js
-
10src/subpackage/income/js/server.js
-
685src/subpackage/income/pages/details_record/details_record.vue
-
183src/subpackage/income/pages/search/search.vue
-
BINsrc/subpackage/income/static/images/account_null.png
-
BINsrc/subpackage/income/static/images/bot_arrow.png
-
BINsrc/subpackage/income/static/images/calendar.png
-
BINsrc/subpackage/income/static/images/close.png
-
BINsrc/subpackage/income/static/images/filter.png
-
BINsrc/subpackage/income/static/images/search.png
-
5src/subpackage/order/components/club_rental/end_billing/end_billing.vue
-
10src/subpackage/order/pages/club_rental/detail/detail.vue
|
After Width: 56 | Height: 56 | Size: 393 B |
|
After Width: 44 | Height: 44 | Size: 339 B |
@ -0,0 +1,87 @@ |
|||
<template> |
|||
<view class="dl-item"> |
|||
<view class="di-name">{{ incomeInfo.source || '-' }}</view> |
|||
<view class="di-top-line"> |
|||
<view class="dtl-view">{{ incomeInfo.scene_name || '-' }}</view> |
|||
<view :class="[ 'dtl-view', incomeInfo.amount > 0 ? 'orange' : '' ]">{{ incomeInfo.amount || '-' }}</view> |
|||
</view> |
|||
|
|||
<view class="di-bot-line"> |
|||
<view class="dbl-view">{{ incomeInfo.operator_text || '-' }}</view> |
|||
<view class="dbl-view" v-if="incomeInfo.amount < 0">{{ incomeInfo.refund_desc || '-' }}</view> |
|||
</view> |
|||
<view class="di-bot-line"> |
|||
<view class="dbl-view">{{ incomeInfo.order_no || '-' }}</view> |
|||
</view> |
|||
<view class="di-bot-line"> |
|||
<view class="dbl-view">{{ incomeInfo.created_at || '-' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
incomeInfo: { |
|||
default: {}, |
|||
type: Object, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.dl-item{ |
|||
padding: 30upx 40upx 30upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.di-name{ |
|||
margin-bottom: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
} |
|||
.di-top-line{ |
|||
margin-bottom: 20upx; |
|||
@include centerFlex(space-between); |
|||
>.dtl-view{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
max-width: 50%; |
|||
} |
|||
&+.dtl-view{ |
|||
font-weight: 500; |
|||
text-align: right; |
|||
&.orange{ |
|||
color: #F6843E; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.di-bot-line{ |
|||
@include centerFlex(space-between); |
|||
>.dbl-view{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9C9C9F; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include textHide(1); |
|||
|
|||
} |
|||
&+.dbl-view{ |
|||
margin-left: 16upx; |
|||
flex-shrink: 0; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,9 @@ |
|||
import { ORIGIN } from '../../../js/api'; |
|||
|
|||
export const INCOME_API = { |
|||
consumeCountDetailList:`${ORIGIN}/admin/stadium/consumeCountDetail/list`, // 收款明细列表
|
|||
consumeRecordSceneLs:`${ORIGIN}/consumeRecordScene/list`, // 收款明细列表
|
|||
stadiumList: `${ORIGIN}/admin/stadium/list`, // 店铺列表
|
|||
} |
|||
|
|||
export default { ORIGIN, INCOME_API }; |
|||
@ -0,0 +1,10 @@ |
|||
import { Server } from '../../../js/server'; |
|||
|
|||
class Servers extends Server { |
|||
constructor(props){ |
|||
super(props) |
|||
} |
|||
} |
|||
|
|||
|
|||
export default new Servers(); |
|||
@ -0,0 +1,685 @@ |
|||
<template> |
|||
<view class="details-record"> |
|||
<view class="dr-header"> |
|||
<view class="dh-filter"> |
|||
<view class="df-date"> |
|||
<view class="df-name">收款日期</view> |
|||
<picker mode="date" @change="dateChange"> |
|||
<view class="dd-frame"> |
|||
<input disabled :value="incomeTime" v-if="!isFilterModal" /> |
|||
<view></view> |
|||
<image mode="aspectFit" src="/subpackage/income/static/images/calendar.png"></image> |
|||
</view> |
|||
</picker> |
|||
|
|||
</view> |
|||
<view class="df-right"> |
|||
<view :class="[ 'df-name', isFilter? 'df-active' : '' ]" @click="filterShow">筛选</view> |
|||
<view class="dr-icons"> |
|||
<image @click="filterShow" mode="aspectFit" src="/subpackage/income/static/images/filter.png"></image> |
|||
<view></view> |
|||
<image @click="toSearch" mode="aspectFit" src="/subpackage/income/static/images/search.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="type-bar"> |
|||
<view |
|||
v-for="(e, i) in incomeTypeLs" :key="i" |
|||
:class="['tb-item', e.eng == incomeTypeInfo.eng ?'ti-active': '']" |
|||
@click="incomeTypeChange(e)" |
|||
>{{ e.name || '-' }}</view> |
|||
</view> |
|||
<view class="tab-bar"> |
|||
<view :class="[ 'tb-item', type == '全部'? 'tb-active' : '' ]" @click="typeChange('全部')"><view>全部</view></view> |
|||
<view :class="[ 'tb-item', type == '退款'? 'tb-active' : '' ]" @click="typeChange('退款')"><view>退款</view></view> |
|||
</view> |
|||
<view class="dh-total"> |
|||
收款{{ incomeMes.income_num || 0 }}笔（<text>￥{{ incomeMes.income_amount || 0 }}</text>） ， |
|||
退款{{ incomeMes.refund_num || 0 }}笔（<text>￥{{ incomeMes.refund_amount || 0 }}</text>） |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="dr-ls" v-if="incomeLs&&incomeLs.length"> |
|||
<details-item |
|||
v-for="(e, i) in incomeLs" |
|||
:key = "i" |
|||
:income-info = "e" |
|||
></details-item> |
|||
</view> |
|||
|
|||
<view class="dr-mask" v-if="isFilterModal" @touchmove.stop.prevent='_=>false' @click="isFilterModal = false"> |
|||
<view class="dm-content" @click.stop="_=>false"> |
|||
<image |
|||
class="dc-close" |
|||
mode="aspectFit" |
|||
src="/subpackage/income/static/images/close.png" |
|||
@click="isFilterModal = false" |
|||
></image> |
|||
<view class="dc-header" id="dcheader"> |
|||
<view class="dc-tit">筛选</view> |
|||
<view class="dc-stadium"> |
|||
<view class="ds-name">门店</view> |
|||
<picker :range="storeList" range-key="name" @change="stadiumChange"> |
|||
<view class="ds-frame"> |
|||
<input :value="modalSelectStore.name || ''" placeholder="全部" disabled /> |
|||
<image mode="aspectFit" src="/subpackage/income/static/images/bot_arrow.png"></image> |
|||
</view> |
|||
</picker> |
|||
</view> |
|||
<view class="dc-scene-name">收款场景（{{ incomeTypeInfo.name || '-' }}）</view> |
|||
</view> |
|||
<scroll-view class="dc-scroll" scroll-y :style="modalScrollViewHeight?('height:'+ modalScrollViewHeight + 'px;'): ''"> |
|||
<view class="dc-scene-ls"> |
|||
<view |
|||
v-for="(e, i) in sceneLs" |
|||
:key="i" |
|||
:class="['dsl-item', (modalSelectScene.scene === e.scene || (modalSelectScene == null&&e.scene==-1))?'dsl-active': '' ]" |
|||
@click="sceneSelect(e)" |
|||
>{{ e.name || '-' }}</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="dc-btn-bar" id="dcbotbar"> |
|||
<view class="dbb-btns"> |
|||
<view @click="modalResetBtn">重置</view> |
|||
<view @click="modalConfirm">确定</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import details_item from '../../components/details_item/details_item.vue'; |
|||
import util from '../../../../utils/util'; |
|||
import { INCOME_API } from '../../js/api'; |
|||
import server from '../../js/server'; |
|||
let incomeTypeLs = [ |
|||
{ |
|||
name: '线上收款', |
|||
eng: 'online', |
|||
}, |
|||
{ |
|||
name: '线下收款', |
|||
eng: 'offline' |
|||
}, |
|||
{ |
|||
name: '联营收款', |
|||
eng: 'joint' |
|||
}, |
|||
]; |
|||
export default { |
|||
components: { |
|||
'details-item': details_item |
|||
}, |
|||
computed: { |
|||
isFilter(){ |
|||
let { confirmSelectStore, confirmSelectScene } = this |
|||
if(confirmSelectStore || confirmSelectScene)return true; |
|||
return false |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
brandInfo: {}, |
|||
modalScrollViewHeight: '', |
|||
incomeTime: '', |
|||
|
|||
incomeLs: [], |
|||
incomeMes: {}, |
|||
page: 1, |
|||
|
|||
type: '全部', // 全部/退款 |
|||
incomeTypeLs, |
|||
incomeTypeInfo: {}, // online 线上收款 offline 线下收款 joint 联营 |
|||
|
|||
isFilterModal: false, |
|||
sceneLs: [], // 弹窗场景列表 |
|||
storeList: [], // 弹窗店铺列表 |
|||
confirmSelectScene: null, // 弹窗选中&确认场景 |
|||
confirmSelectStore: null, // 弹窗选中&确认店铺 |
|||
modalSelectScene: null, // 弹窗临时选中场景 |
|||
modalSelectStore: null, // 弹窗临时选中店铺 |
|||
} |
|||
}, |
|||
onLoad(){ |
|||
let _timeStr = util.formatDate({}); |
|||
this.incomeTime = _timeStr; |
|||
this.incomeTypeInfo = incomeTypeLs[0]; |
|||
util.$_once('turnoverToDetailsRecord', data=>{ |
|||
let { brandInfo, stadiumInfo } = data; |
|||
this.confirmSelectStore = stadiumInfo || null; |
|||
this.brandInfo = brandInfo || {}; |
|||
this.refreshPage(); |
|||
}) |
|||
}, |
|||
onReachBottom(){ |
|||
let { brandInfo, incomeTime, type, incomeTypeInfo, confirmSelectStore, confirmSelectScene, page } = this; |
|||
this.getRecordLs({ |
|||
brand_id: brandInfo.id || '', |
|||
type: type || '', |
|||
time_str: incomeTime || '', |
|||
income_type: incomeTypeInfo.eng || '', |
|||
stadium_id: (confirmSelectStore&&confirmSelectStore.id) || '', |
|||
scene: (confirmSelectScene&&confirmSelectScene.scene + '') || '', |
|||
page: ++page, |
|||
}); |
|||
}, |
|||
methods: { |
|||
|
|||
// 弹窗重置按钮 |
|||
modalResetBtn(){ |
|||
let { brandInfo, incomeTypeInfo } = this; |
|||
this.modalSelectScene = null; |
|||
this.modalSelectStore = null; |
|||
// 不同店铺场景值不一样 |
|||
this.sceneLs = []; |
|||
this.getSceneLs({ |
|||
brand_id: brandInfo.id || '', |
|||
income_type: incomeTypeInfo.eng || '', |
|||
}); |
|||
}, |
|||
// 弹窗确认按钮 |
|||
modalConfirm(){ |
|||
let { modalSelectScene, modalSelectStore } = this; |
|||
this.confirmSelectScene = modalSelectScene; |
|||
this.confirmSelectStore = modalSelectStore; |
|||
this.isFilterModal = false; |
|||
this.refreshPage(); |
|||
|
|||
}, |
|||
sceneSelect(e){ |
|||
this.modalSelectScene = e || null; |
|||
}, |
|||
stadiumChange(e){ |
|||
let { brandInfo, incomeTypeInfo, storeList, modalSelectStore } = this; |
|||
let _idx = e.detail.value; |
|||
let _stadium = storeList[_idx] || {}; |
|||
if(modalSelectStore&&(modalSelectStore.id == _stadium.id))return; |
|||
this.modalSelectStore = _stadium || null; |
|||
this.modalSelectScene = null; |
|||
// 不同店铺场景值不一样 |
|||
this.sceneLs = []; |
|||
this.getSceneLs({ |
|||
brand_id: brandInfo.id || '', |
|||
income_type: incomeTypeInfo.eng || '', |
|||
stadium_id: _stadium.id |
|||
}); |
|||
|
|||
}, |
|||
// 弹窗筛选显示 |
|||
filterShow(){ |
|||
let { brandInfo, incomeTypeInfo, confirmSelectStore, confirmSelectScene } = this; |
|||
this.modalSelectScene = confirmSelectScene || null; |
|||
this.modalSelectStore = confirmSelectStore || null; |
|||
|
|||
this.isFilterModal = true; |
|||
this.$nextTick(async _=>{ |
|||
this.initFilterScrollView(); |
|||
if(true)try{ |
|||
await this.getStoreList(brandInfo.id || '',); |
|||
}catch(err){ |
|||
console.warn('getStore err ->', err) |
|||
}; |
|||
|
|||
this.getSceneLs({ |
|||
brand_id: brandInfo.id || '', |
|||
income_type: incomeTypeInfo.eng || '', |
|||
stadium_id: (confirmSelectStore&&confirmSelectStore.id) || '' |
|||
}); |
|||
}); |
|||
|
|||
}, |
|||
// 获取弹窗品牌店铺列表 |
|||
getStoreList(brand_id){ |
|||
util.showLoad(); |
|||
return server.get({ |
|||
url: INCOME_API.stadiumList, |
|||
data: { brand_id }, |
|||
failMsg: '加载店铺列表失败！', |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
// let _list = [res.list[0]] || []; |
|||
let _list = res.list || []; |
|||
_list.unshift({ name: '全部', id: '' }); |
|||
this.storeList = _list; |
|||
return _list || []; |
|||
}) |
|||
}, |
|||
// 弹窗场景列表请求 |
|||
getSceneLs({ |
|||
brand_id = '', |
|||
stadium_id = '', |
|||
income_type = '', |
|||
}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: INCOME_API.consumeRecordSceneLs, |
|||
data: { |
|||
brand_id, |
|||
stadium_id, // 空字符全部 -1品牌收款 正常的门店id |
|||
income_type, // online线上 offline线下 joint联营 |
|||
}, |
|||
failMsg: '加载场景列表失败！' |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
this.sceneLs = res || []; |
|||
}) |
|||
}, |
|||
|
|||
incomeTypeChange(incomeTypeInfo){ |
|||
this.incomeTypeInfo = incomeTypeInfo || {}; |
|||
this.refreshPage(); |
|||
}, |
|||
typeChange(type){ |
|||
this.type = type; |
|||
this.refreshPage(); |
|||
}, |
|||
dateChange(e){ |
|||
let _time = e.detail.value || '' |
|||
this.incomeTime = _time; |
|||
this.refreshPage(); |
|||
}, |
|||
|
|||
refreshPage(){ |
|||
this.$nextTick(_=>{ |
|||
let { brandInfo, incomeTime, type, incomeTypeInfo, confirmSelectStore, confirmSelectScene } = this; |
|||
this.page = 1; |
|||
this.incomeLs = []; |
|||
this.incomeMes = {}; |
|||
this.getRecordLs({ |
|||
brand_id: brandInfo.id || '', |
|||
type: type || '', |
|||
time_str: incomeTime || '', |
|||
income_type: incomeTypeInfo.eng || '', |
|||
stadium_id: (confirmSelectStore&&confirmSelectStore.id) || '', |
|||
scene: (confirmSelectScene&&confirmSelectScene.scene + '') || '', |
|||
}); |
|||
}) |
|||
}, |
|||
|
|||
getRecordLs({ |
|||
brand_id = '', |
|||
stadium_id = '', // 空字符全部 -1品牌收款 其他门店id |
|||
time_str = '', // 日期y-m-d |
|||
scene = '', // 场景 int |
|||
type = '全部', // 全部/退款 |
|||
income_type = '', // 收款类型 online 线上收款 offline线下收款 joint联营 |
|||
page = 1, |
|||
page_size = 20, |
|||
}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: INCOME_API.consumeCountDetailList, |
|||
data: { |
|||
brand_id, |
|||
stadium_id, |
|||
time_str, |
|||
page, |
|||
page_size, |
|||
scene, |
|||
type, |
|||
income_type, |
|||
}, |
|||
failMsg: '加载失败！', |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
let { list, ...data } = res; |
|||
this.incomeMes = data || {}; |
|||
let _ls = list || []; |
|||
if(page == 1)return this.incomeLs = _ls; |
|||
if(!_ls || !_ls.length)return util.showNone('没有更多！'); |
|||
this.incomeLs = [ ...this.incomeLs, ..._ls ]; |
|||
this.page = page; |
|||
|
|||
}) |
|||
}, |
|||
|
|||
toSearch(){ |
|||
util.routeTo(`/subpackage/income/pages/search/search`, 'nT'); |
|||
}, |
|||
|
|||
async initFilterScrollView(){ |
|||
try{ |
|||
let _header = await util.getNodeMes('#dcheader'); |
|||
let _botBar = await util.getNodeMes('#dcbotbar'); |
|||
let _sysInfo = uni.getSystemInfoSync(); |
|||
this.modalScrollViewHeight = (_sysInfo.windowHeight || 0) - ((_header.height || 0) + (_botBar.height || 0)) |
|||
}catch(err){ |
|||
console.warn('initFilterScrollView err -->', err); |
|||
} |
|||
|
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
.dr-header{ |
|||
margin-bottom: 24upx; |
|||
background-color: #fff; |
|||
.dh-filter{ |
|||
padding: 26upx 24upx; |
|||
@include centerFlex(space-between); |
|||
.df-name{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9C9C9F; |
|||
&.df-active{ |
|||
color: $themeColor |
|||
} |
|||
} |
|||
.df-date{ |
|||
@include centerFlex(flex-start); |
|||
.dd-frame{ |
|||
flex-shrink: 0; |
|||
padding: 0 20upx; |
|||
margin-left: 20upx; |
|||
width: 286upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-weight: 400; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
>view{ |
|||
flex-shrink: 0; |
|||
margin: 0 20upx; |
|||
height: 40upx; |
|||
width: 1px; |
|||
background-color: #B2B2B2; |
|||
} |
|||
>image{ |
|||
flex-shrink: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
} |
|||
} |
|||
.df-right{ |
|||
flex-shrink: 0; |
|||
@include centerFlex(flex-end); |
|||
.dr-icons{ |
|||
margin-left: 12upx; |
|||
flex-shrink: 0; |
|||
flex-wrap: nowrap; |
|||
@include centerFlex(center); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
|
|||
} |
|||
>view{ |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
margin: 0 30upx; |
|||
height: 40upx; |
|||
width: 1px; |
|||
background-color: #B2B2B2; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
.type-bar{ |
|||
padding: 20upx 0; |
|||
@include centerFlex(center); |
|||
.tb-item{ |
|||
margin: 0 16upx; |
|||
padding: 0 28upx; |
|||
line-height: 72upx; |
|||
text-align: center; |
|||
font-size: 36upx; |
|||
font-weight: 500; |
|||
border-radius: 36upx; |
|||
color: #1A1A1A; |
|||
&.ti-active{ |
|||
color: #fff; |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
|
|||
} |
|||
.tab-bar{ |
|||
@include centerFlex(center); |
|||
border-top: 2upx solid #D8D8D8; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.tb-item{ |
|||
margin: 0 92upx; |
|||
padding: 0 28upx; |
|||
&.tb-active{ |
|||
position: relative; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 8upx; |
|||
border-radius: 4upx; |
|||
background-color: $themeColor; |
|||
} |
|||
>view{ |
|||
color: $themeColor; |
|||
} |
|||
} |
|||
>view{ |
|||
line-height: 110upx; |
|||
text-align: center; |
|||
font-size: 32upx; |
|||
color: #9C9C9F; |
|||
} |
|||
} |
|||
} |
|||
.dh-total{ |
|||
padding: 0 48upx; |
|||
line-height: 110upx; |
|||
font-size: 24upx; |
|||
color: #9C9C9F; |
|||
@include textHide(1); |
|||
>text{ |
|||
color: #F6843E; |
|||
} |
|||
} |
|||
} |
|||
.dr-ls{ |
|||
padding-bottom: 120upx; |
|||
padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
padding-left: 40upx; |
|||
background-color: #fff; |
|||
.dl-item{ |
|||
padding: 30upx 40upx 30upx 0; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
.di-name{ |
|||
margin-bottom: 20upx; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
} |
|||
.di-top-line{ |
|||
margin-bottom: 20upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 32upx; |
|||
line-height: 44upx; |
|||
color: #1A1A1A; |
|||
@include textHide(1); |
|||
&:first-child{ |
|||
flex-shrink: 0; |
|||
max-width: 50%; |
|||
} |
|||
&+view{ |
|||
font-weight: 500; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
.di-bot-line{ |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9C9C9F; |
|||
&:first-child{ |
|||
flex-grow: 1; |
|||
@include textHide(1); |
|||
|
|||
} |
|||
&+view{ |
|||
margin-left: 16upx; |
|||
flex-shrink: 0; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
.dr-mask{ |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
background-color: rgba($color: #000000, $alpha: .5); |
|||
.dm-content{ |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 0; |
|||
top: 0; |
|||
|
|||
width: 600upx; |
|||
background-color: #fff; |
|||
.dc-header{ |
|||
padding-top: 36upx; |
|||
padding-bottom: 40upx; |
|||
} |
|||
.dc-close{ |
|||
position: absolute; |
|||
right: 34upx; |
|||
top: 20upx; |
|||
width: 40upx; |
|||
height: 40upx; |
|||
} |
|||
.dc-tit{ |
|||
margin-bottom: 20upx; |
|||
text-align: center; |
|||
line-height: 40upx; |
|||
font-size: 28upx; |
|||
color: #9C9C9F; |
|||
} |
|||
.dc-stadium{ |
|||
margin-bottom: 20upx; |
|||
padding: 26upx 30upx; |
|||
@include centerFlex(space-between); |
|||
.ds-name{ |
|||
flex-shrink: 0; |
|||
font-size: 28upx; |
|||
line-height: 40upx; |
|||
color: #9C9C9F; |
|||
} |
|||
.ds-frame{ |
|||
padding: 0 20upx; |
|||
width: 476upx; |
|||
height: 92upx; |
|||
border-radius: 10upx; |
|||
background-color: #F2F2F7; |
|||
@include centerFlex(space-between); |
|||
>image{ |
|||
flex-shrink: 0; |
|||
margin-left: 12upx; |
|||
width: 28upx; |
|||
height: 28upx; |
|||
} |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
} |
|||
} |
|||
.dc-scene-name{ |
|||
|
|||
padding-left: 34upx; |
|||
line-height: 44upx; |
|||
font-weight: 500; |
|||
font-size: 32upx; |
|||
color: #1A1A1A; |
|||
} |
|||
.dc-scroll{ |
|||
width: 100%; |
|||
height: 600upx; |
|||
.dc-scene-ls{ |
|||
padding: 0 20upx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.dsl-item{ |
|||
margin: 14upx 10upx; |
|||
width: 164upx; |
|||
height: 64upx; |
|||
line-height: 60upx; |
|||
text-align: center; |
|||
border-radius: 10upx; |
|||
border: 2upx solid #F2F2F7; |
|||
font-size: 24upx; |
|||
color: #1A1A1A; |
|||
background-color: #F2F2F7; |
|||
@include textHide(1); |
|||
&.dsl-active{ |
|||
color: $themeColor; |
|||
border-color: $themeColor; |
|||
background-color: rgba($color: $themeColor, $alpha: .16); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.dc-btn-bar{ |
|||
padding: 20upx 30upx; |
|||
padding-bottom: calc( 20upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 20upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
.dbb-btns{ |
|||
height: 80upx; |
|||
border: 2upx solid $themeColor; |
|||
background-color: $themeColor; |
|||
border-radius: 40upx; |
|||
@include centerFlex(space-between); |
|||
>view{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
text-align: center; |
|||
line-height: 76upx; |
|||
width: 50%; |
|||
height: 100%; |
|||
font-size: 28upx; |
|||
color: #fff; |
|||
border-radius: 40upx; |
|||
&:first-child{ |
|||
background-color: #fff; |
|||
color: $themeColor; |
|||
border-top-right-radius: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,183 @@ |
|||
<template> |
|||
<view class="income-search"> |
|||
<view class="is-search-bar"> |
|||
<view class="isb-frame"> |
|||
<view class="if-search-icon" > |
|||
<image |
|||
mode="aspectFit" |
|||
src="/subpackage/income/static/images/search.png" |
|||
></image> |
|||
</view> |
|||
<input |
|||
confirm-type = "search" |
|||
v-model = "searchKey" |
|||
@focus = 'iptFocus' |
|||
@blur = 'iptBlur' |
|||
@confirm = 'searchConfirm' |
|||
hold-keyboard |
|||
placeholder = "请输入订单号/手机号码搜索" |
|||
/> |
|||
<view class="if-close-icon" > |
|||
<image |
|||
mode="aspectFit" |
|||
src="/subpackage/income/static/images/close.png" |
|||
v-if="isFocus&&searchKey!=''" |
|||
@click="searchKey = ''" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="is-main"> |
|||
<view class="im-ls" v-if="incomeLs.length"> |
|||
<details-item v-for="(e, i) in incomeLs" :key = "i" :income-info = "e"></details-item> |
|||
</view> |
|||
|
|||
<view class="im-null" v-else> |
|||
<image mode="aspectFit" src="/subpackage/income/static/images/account_null.png"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import details_item from '../../components/details_item/details_item.vue'; |
|||
import util from '../../../../utils/util'; |
|||
import { INCOME_API } from '../../js/api'; |
|||
import server from '../../js/server'; |
|||
export default { |
|||
components: { |
|||
'details-item': details_item |
|||
}, |
|||
data(){ |
|||
return { |
|||
incomeLs: [], |
|||
isFocus: false, |
|||
searchKey: '', |
|||
page: 1, |
|||
|
|||
} |
|||
}, |
|||
onLoad(){ |
|||
}, |
|||
onReachBottom(){ |
|||
let { searchKey, page } = this; |
|||
this.getRecordLs({ |
|||
page: ++page, |
|||
key: searchKey, |
|||
}) |
|||
}, |
|||
methods: { |
|||
searchConfirm(e){ |
|||
console.warn(e); |
|||
this.page = 1; |
|||
this.incomeLs = []; |
|||
this.getRecordLs({ |
|||
key: e.detail.value || '' |
|||
}) |
|||
}, |
|||
iptFocus(){ |
|||
this.isFocus = true; |
|||
}, |
|||
iptBlur(){ |
|||
this.isFocus = false; |
|||
}, |
|||
getRecordLs({ |
|||
brand_id = '', |
|||
stadium_id = '', // 空字符全部 -1品牌收款 其他门店id |
|||
time_str = '', // 日期y-m-d |
|||
scene = '', // 场景 int |
|||
type = '全部', // 全部/退款 |
|||
income_type = '', // 收款类型 online 线上收款 offline线下收款 joint联营 |
|||
page = 1, |
|||
page_size = 20, |
|||
key= '', |
|||
}){ |
|||
util.showLoad(); |
|||
server.get({ |
|||
url: INCOME_API.consumeCountDetailList, |
|||
data: { |
|||
brand_id, |
|||
stadium_id, |
|||
time_str, |
|||
page, |
|||
page_size, |
|||
scene, |
|||
type, |
|||
income_type, |
|||
key |
|||
}, |
|||
failMsg: '加载失败！', |
|||
}) |
|||
.then(res=>{ |
|||
util.hideLoad(); |
|||
let { list, ...data } = res; |
|||
let _ls = list || []; |
|||
if(page == 1)return this.incomeLs = _ls; |
|||
if(!_ls || !_ls.length)return util.showNone('没有更多！'); |
|||
this.incomeLs = [ ...this.incomeLs, ..._ls ]; |
|||
this.page = page; |
|||
|
|||
}) |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import '~style/public.scss'; |
|||
page{ |
|||
background-color: #fff; |
|||
} |
|||
.is-search-bar{ |
|||
padding: 30upx 24upx; |
|||
.isb-frame{ |
|||
padding: 0 24upx; |
|||
height: 72upx; |
|||
border: 2upx solid $themeColor; |
|||
border-radius: 36upx; |
|||
@include centerFlex(space-between); |
|||
>input{ |
|||
flex-grow: 1; |
|||
height: 68upx; |
|||
font-size: 28upx; |
|||
color: #1a1a1a; |
|||
} |
|||
>view{ |
|||
flex-shrink: 0; |
|||
width: 30upx; |
|||
height: 30upx; |
|||
font-size: 0; |
|||
>image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.if-search-icon{ |
|||
margin-right: 24upx; |
|||
} |
|||
.if-close-icon{ |
|||
margin-left: 24upx; |
|||
} |
|||
} |
|||
} |
|||
.is-main{ |
|||
border-top: 24upx solid #f2f1f6; |
|||
.im-null{ |
|||
padding-top: 106upx; |
|||
>image{ |
|||
margin: 0 auto; |
|||
display: block; |
|||
width: 370upx; |
|||
height: 370upx; |
|||
} |
|||
} |
|||
|
|||
.im-ls{ |
|||
padding-bottom: 120upx; |
|||
padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ |
|||
padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ |
|||
padding-left: 40upx; |
|||
background-color: #fff; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: 370 | Height: 370 | Size: 10 KiB |
|
After Width: 56 | Height: 56 | Size: 401 B |
|
After Width: 80 | Height: 80 | Size: 430 B |
|
After Width: 64 | Height: 72 | Size: 769 B |
|
After Width: 80 | Height: 80 | Size: 483 B |
|
After Width: 80 | Height: 80 | Size: 660 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue