11 changed files with 767 additions and 0 deletions
-
17src/pages.json
-
87src/subpackage/income/components/details_item/details_item.vue
-
8src/subpackage/income/js/api.js
-
10src/subpackage/income/js/server.js
-
561src/subpackage/income/pages/details_record/details_record.vue
-
84src/subpackage/income/pages/search/search.vue
-
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
@ -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.desc || '-' }}</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,8 @@ |
|||||
|
import { ORIGIN } from '../../../js/api'; |
||||
|
|
||||
|
export const INCOME_API = { |
||||
|
consumeCountDetailList:`${ORIGIN}/admin/stadium/consumeCountDetail/list`, // 收款明细列表
|
||||
|
consumeRecordSceneLs:`${ORIGIN}/consumeRecordScene/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,561 @@ |
|||||
|
<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" @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"> |
||||
|
<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> |
||||
|
<view class="ds-frame"> |
||||
|
<input /> |
||||
|
<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 class="dsl-item" v-for="(e, i) in sceneLs" :key="i">{{ e.name || '-' }}</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<view class="dc-btn-bar" id="dcbotbar"> |
||||
|
<view class="dbb-btns"> |
||||
|
<view>重置</view> |
||||
|
<view>确定</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 |
||||
|
}, |
||||
|
data(){ |
||||
|
return { |
||||
|
modalScrollViewHeight: '', |
||||
|
isFilterModal: false, |
||||
|
incomeTime: '', |
||||
|
|
||||
|
incomeLs: [], |
||||
|
incomeMes: {}, |
||||
|
page: 1, |
||||
|
|
||||
|
type: '全部', // 全部/退款 |
||||
|
incomeTypeLs, |
||||
|
incomeTypeInfo: {}, // online 线上收款 offline 线下收款 joint 联营 |
||||
|
|
||||
|
sceneLs: [], |
||||
|
} |
||||
|
}, |
||||
|
onLoad(){ |
||||
|
let _timeStr = util.formatDate({}); |
||||
|
this.incomeTime = _timeStr; |
||||
|
this.incomeTypeInfo = incomeTypeLs[0]; |
||||
|
this.refreshPage(); |
||||
|
}, |
||||
|
methods: { |
||||
|
filterShow(){ |
||||
|
let { incomeTypeInfo } = this; |
||||
|
this.isFilterModal = true; |
||||
|
this.$nextTick(_=>{ |
||||
|
this.initFilterScrollView(); |
||||
|
this.getSceneLs({ |
||||
|
income_type: incomeTypeInfo.eng || '' |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
getSceneLs({ |
||||
|
brand_id = '', |
||||
|
stadium_id = '', |
||||
|
income_type = '', |
||||
|
}){ |
||||
|
server.get({ |
||||
|
url: INCOME_API.consumeRecordSceneLs, |
||||
|
data: { |
||||
|
brand_id, |
||||
|
stadium_id, |
||||
|
income_type, |
||||
|
}, |
||||
|
failMsg: '加载场景列表失败！' |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
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 { incomeTime, type, incomeTypeInfo } = this; |
||||
|
this.page = 1; |
||||
|
this.incomeLs = []; |
||||
|
this.incomeMes = {}; |
||||
|
this.getRecordLs({ |
||||
|
type: type || '', |
||||
|
time_str: incomeTime || '', |
||||
|
income_type: incomeTypeInfo.eng || '', |
||||
|
}); |
||||
|
}) |
||||
|
}, |
||||
|
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-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-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: 64upx; |
||||
|
text-align: center; |
||||
|
background-color: #F2F2F7; |
||||
|
border-radius: 10upx; |
||||
|
font-size: 24upx; |
||||
|
color: #1A1A1A; |
||||
|
@include textHide(1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.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,84 @@ |
|||||
|
<template> |
||||
|
<view class="income-search"> |
||||
|
<view class="is-search-bar"> |
||||
|
<view class="isb-frame"> |
||||
|
<image class="if-search-icon"></image> |
||||
|
<input /> |
||||
|
<image class="if-close-icon"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="is-main"> |
||||
|
<view class="im-null" v-if="false"> |
||||
|
<image></image> |
||||
|
</view> |
||||
|
<view class="im-ls"> |
||||
|
<details-item v-for="i in 20" :key="i"></details-item> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import details_item from '../../components/details_item/details_item.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
'details-item': details_item |
||||
|
} |
||||
|
} |
||||
|
</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; |
||||
|
} |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
width: 30upx; |
||||
|
height: 30upx; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
.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; |
||||
|
background-color: skyblue; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.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: 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