Browse Source

add collection

organize
刘嘉炜 3 years ago
parent
commit
34246f4285
  1. 6
      src/pages.json
  2. 203
      src/pages/collection/info/info.vue

6
src/pages.json

@ -104,6 +104,12 @@
} }
}, },
{ {
"path": "pages/collection/info/info",
"style": {
"navigationBarTitleText": "收款明细"
}
},
{
"path": "pages/collection/list/list", "path": "pages/collection/list/list",
"style": { "style": {
"navigationBarTitleText": "收款记录" "navigationBarTitleText": "收款记录"

203
src/pages/collection/info/info.vue

@ -0,0 +1,203 @@
<template>
<view class="collection-info">
<view class="ci-header">
<view class="ch-stadium">
<view class="cs-txt">当前门店</view>
<picker>
<view class="cs-picker">
<input />
<image></image>
</view>
</picker>
</view>
<view class="ch-date-scene">
<view class="cds-item">
<view class="ci-txt">日期</view>
<view class="ci-frame ci-date">
<input />
<view></view>
<picker>
<image></image>
</picker>
</view>
</view>
<view class="cds-item">
<view class="ci-txt">场景</view>
<view class="ci-frame ci-scene">
<picker class="cs-picker">
<view class="cp-picker-frame">
<input />
<image></image>
</view>
</picker>
</view>
</view>
</view>
<view class="ch-tab">
<view class="ct-item">
<view>全部</view>
</view>
<view class="ct-item">
<view>退款</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "~style/public.scss";
page{
background-color: #fff;
}
.collection-info{
.ci-header{
padding: 0 24upx;
.ch-stadium{
padding: 26upx 0;
@include centerFlex(space-between);
.cs-txt{
flex-shrink: 0;
flex-grow: 0;
margin-right: 20upx;
font-size: 28upx;
line-height: 40upx;
color: #9c9c9f;
}
picker{
flex-grow: 1;
}
.cs-picker{
padding: 0 20upx;
height: 92upx;
border-radius: 10upx;
background-color: #f2f1f6;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 28upx;
color: #1a1a1a;
}
image{
flex-grow: 0;
flex-shrink: 0;
width: 28upx;
height: 28upx;
background-color: skyblue;
}
}
}
.ch-date-scene{
margin-bottom: 30upx;
@include centerFlex(space-between);
.cds-item{
flex-grow: 0;
flex-shrink: 0;
@include centerFlex(flex-start);
.ci-txt{
margin-right: 16upx;
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
.ci-frame{
height: 64upx;
border-radius: 10upx;
background-color: #f2f1f6;
}
.ci-date{
padding: 0 16upx;
width: 240upx;
@include centerFlex(space-between);
>input{
flex-grow: 1;
height: 100%;
font-size: 24upx;
color: #1a1a1a;
}
>view{
flex-grow: 0;
flex-shrink: 0;
margin: 0 14upx;
height: 32upx;
width: 2upx;
background-color: #B2B2B2;
}
picker{
flex-shrink: 0;
flex-grow: 0;
image{
margin: 0;
padding: 0;
display: block;
height: 40upx;
width: 40upx;
background-color: skyblue;
}
}
}
.ci-scene{
.cs-picker{
}
.cp-picker-frame{
padding: 0 20upx;
width: 264upx;
@include centerFlex(space-between);
input{
flex-grow: 1;
height: 64upx;
font-size: 24upx;
color: #1a1a1a;
}
image{
flex-shrink: 0;
flex-grow: 0;
margin-left: 16upx;
height: 28upx;
width: 28upx;
background-color: skyblue;
}
}
}
}
}
.ch-tab{
@include centerFlex(center);
.ct-item{
flex-grow: 1;
@include centerFlex(center);
>view{
position: relative;
display: inline-block;
text-align: center;
line-height: 110upx;
height: 110upx;
&::after{
content: '';
display: block;
left: 0;
bottom: 0;
width: 100%;
height: 8upx;
border-radius: 4upx;
background-color: $themeColor;
}
}
}
}
}
}
</style>
Loading…
Cancel
Save