APP
/
ox_zhiNengZhuShou
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add style

voice
刘嘉炜 5 years ago
parent
34f3207798
commit
b5f67df865
8 changed files with 753 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/order/reservation/reservation.vue
  2. 28
      src/pages.json
  3. 182
      src/pages/collection/detail/detail.vue
  4. 165
      src/pages/collection/record/record.vue
  5. 10
      src/pages/order_list/order_list.vue
  6. 108
      src/pages/order_send/order_send.vue
  7. 253
      src/pages/turnover/turnover.vue
  8. 12
      src/utils/components.js

3
src/components/order/reservation/reservation.vue
View File

@ -70,10 +70,13 @@ export default {
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
flex-grow: 1;
font-size: 28upx;
color: #1a1a1a;
@include textHide(1);
}
>text{
margin-left: 20upx;
flex-shrink: 0;
font-size: 28upx;
color: #9C9C9F;

28
src/pages.json
View File

@ -1,9 +1,27 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/order_search/order_search",
"path": "pages/turnover/turnover",
"style": {
"navigationBarTitleText": "搜索"
"navigationBarTitleText": "营业额"
}
},
{
"path": "pages/collection/detail/detail",
"style": {
"navigationBarTitleText": "收款明细"
}
},
{
"path": "pages/collection/record/record",
"style": {
"navigationBarTitleText": "收款记录"
}
},
{
"path": "pages/order_send/order_send",
"style": {
"navigationBarTitleText": "发货"
}
},
{
@ -13,6 +31,12 @@
}
},
{
"path": "pages/order_search/order_search",
"style": {
"navigationBarTitleText": "搜索"
}
},
{
"path": "pages/write_off/confirm/confirm",
"style": {
"navigationBarTitleText": "确认订单信息"

182
src/pages/collection/detail/detail.vue
View File

@ -0,0 +1,182 @@
<template>
<view class="collection-detail">
<view class="cd-address">当前所在门店：欧轩智能羽毛球场馆永泰店</view>
<view class="cd-overview">
<picker>
<view class="co-time">
<text>8月5日</text>
<view></view>
</view>
</picker>
<view class="co-total">
<view>共139笔</view>
<view>收入 ¥ 10899.34</view>
<view>退款 ¥ 99.34</view>
</view>
</view>
<view class="cd-tab">
<view class="active">全部</view>
<view>退款</view>
</view>
<view class="cd-list">
<view class="cl-item" v-for="e in 10" :key="e">
<image></image>
<view class="ci-info">
<view>场馆订购</view>
<view>唐浩宗</view>
<view>20:05:41</view>
</view>
<view class="ci-price">
<view class="active">-20.00</view>
<view>退款成功</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "../../../style/public.scss";
page{
background-color: #fff;
}
.collection-detail{
.cd-address{
height: 64upx;
line-height: 64upx;
padding: 0 24upx;
font-size: 24upx;
color: #1a1a1a;
}
.cd-overview{
padding: 24upx 24upx 0;
height: 144upx;
background-color: #f2f2f7;
.co-time{
margin-bottom: 16upx;
@include centerFlex(flex-start);
>text{
font-size: 32upx;
line-height: 44upx;
color: #1a1a1a;
}
>view{
flex-shrink: 0;
margin-left: 10upx;
width: 0;
height: 0;
border-left: 10upx solid transparent;
border-right: 10upx solid transparent;
border-top: 10upx solid #1a1a1a;
}
}
.co-total{
@include centerFlex(center);
>view{
flex-grow: 1;
font-size: 24upx;
color: #1a1a1a;
@include textHide(1);
&:first-child{
flex-shrink: 0;
flex-grow: 0;
width: 25%;
}
}
}
}
.cd-tab{
height: 110upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(center);
>view{
margin: 0 92upx;
height: 108upx;
width: 120upx;
line-height: 108upx;
text-align: center;
font-size: 32upx;
color: #9C9C9F;
}
.active{
position: relative;
color: $themeColor;
&::after{
content: '';
position: absolute;
left: 50%;
bottom: -2upx;
transform: translateX(-50%);
width: 100%;
height: 8upx;
border-radius: 4upx;
background-color: $themeColor;
}
}
}
.cd-list{
padding: 0 30upx 20upx;
.cl-item{
padding: 30upx 0;
border-bottom: 2upx solid #D8D8D8;
display: flex;
>image{
flex-shrink: 0;
margin-right: 30upx;
width: 64upx;
height: 64upx;
border-radius: 10upx;
background-color: #e8e9eb;
}
>view{
flex-grow: 1;
min-width: 30%;
}
.ci-info{
>view{
@include textHide(1);
&:first-child{
margin-bottom: 8upx;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
&+view{
margin-bottom: 6upx;
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
}
}
.ci-price{
>view{
text-align: right;
@include textHide(1);
&:first-child{
margin-bottom: 8upx;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
&+view{
line-height: 34upx;
font-size: 24upx;
font-weight: 500;
color: #9c9c9f;
}
}
.active{
color: #F6843E !important;
}
}
}
}
}
</style>

165
src/pages/collection/record/record.vue
View File

@ -0,0 +1,165 @@
<template>
<view class="collection-record">
<view class="cr-store">
<text>当前所在门店</text>
<picker>
<view class="cs-frame">
<input value="欧轩智能羽毛球场馆永泰店" disabled />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</picker>
</view>
<view class="cr-overview">
<picker>
<view class="co-time">
<text>2020年8月</text>
<view></view>
</view>
</picker>
<view class="co-total">
<view>共139笔</view>
<view>收入 ¥ 10899.34</view>
<view>退款 ¥ 99.34</view>
</view>
</view>
<view class="cr-list">
<view class="cl-item" v-for="e in 10" :key="e">
<view class="ci-time">8月15日</view>
<view class="ci-money">¥1242.00</view>
<view class="ci-info">
<view>收款100笔(<text>¥1089.00</text>)，退款2笔(<text>¥234.00</text>)</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "../../../style/public.scss";
page{
background-color: #fff;
}
.collection-record{
.cr-store{
padding: 0 24upx;
height: 144upx;
@include centerFlex(space-between);
>text{
flex-shrink: 0;
margin-right: 24upx;
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
picker{
flex-grow: 1;
}
.cs-frame{
flex-grow: 1;
padding: 0 16upx;
height: 92upx;
border-radius: 10upx;
border: 2upx solid #D8D8D8;
background-color: #f7f7f7;
@include centerFlex(space-between);
>input{
flex-grow: 1;
font-size: 28upx;
line-height: 40upx;
color: #1a1a1a;
}
>image{
flex-shrink: 0;
margin-left: 20upx;
width: 28upx;
height: 28upx;
}
}
}
.cr-overview{
padding: 24upx;
background-color: #f2f2f7;
.co-time{
margin-bottom: 16upx;
@include centerFlex(flex-start);
>text{
font-size: 32upx;
line-height: 44upx;
color: #1a1a1a;
}
>view{
flex-shrink: 0;
margin-left: 10upx;
width: 0;
height: 0;
border-left: 10upx solid transparent;
border-right: 10upx solid transparent;
border-top: 10upx solid #1a1a1a;
}
}
.co-total{
@include centerFlex(center);
>view{
flex-grow: 1;
font-size: 24upx;
color: #1a1a1a;
@include textHide(1);
&:first-child{
flex-shrink: 0;
flex-grow: 0;
width: 25%;
}
}
}
}
.cr-list{
padding: 0 24upx 24upx;
.cl-item{
padding-top: 30upx;
height: 206upx;
border-bottom: 2upx solid #D8D8D8;
.ci-time{
margin-bottom: -18upx;
line-height: 34upx;
text-align: right;
font-size: 24upx;
color: #9c9c9f;
}
.ci-money{
margin-bottom: 20upx;
line-height: 56upx;
font-size: 40upx;
font-weight: 500;
color: #1a1a1a;
@include textHide(1);
}
.ci-info{
@include centerFlex(space-between);
>view{
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
@include textHide(1);
>text{
color: #f6843e;
}
}
>image{
flex-shrink: 0;
margin-left: 28upx;
width: 28upx;
height: 28upx;
}
}
}
}
}
</style>

10
src/pages/order_list/order_list.vue
View File

@ -81,14 +81,12 @@
</template>
<script>
import reservation_order from '../../components/order/reservation/reservation';
import membership_order from '../../components/order/membership/membership';
import integral_order from '../../components/order/integral/integral';
import { order } from '../../utils/components';
export default {
components: {
'reservation-order': reservation_order,
'membership-order': membership_order,
'integral-order': integral_order,
'reservation-order': order.reservation,
'membership-order': order.membership,
'integral-order': order.integral,
}
}
</script>

108
src/pages/order_send/order_send.vue
View File

@ -0,0 +1,108 @@
<template>
<view class="order-send">
<view class="os-warn">温馨提示：请确认好订单信息再发货哦！</view>
<view class="os-order-num">订单号：20201232434589580546</view>
<view class="os-tip">选择物流发货</view>
<view class="os-ipts">
<picker>
<view class="oi-frame">
<view>物流渠道</view>
<input disabled="" placeholder="中通" />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</picker>
<view class="oi-frame">
<view>物流单号</view>
<input placeholder="请输入单号" />
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
</view>
<view class="os-btn active" hover-class="hover-active">确定</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "../../style/public.scss";
page{
background-color: #fff;
}
.order-send{
.os-warn{
margin-bottom: 62upx;
height: 64upx;
line-height: 64upx;
text-align: center;
font-size: 24upx;
color: #EA5061;
background-color: rgba(234, 80, 97, .16);
}
.os-order-num{
margin-bottom: 90upx;
padding: 0 38upx;
line-height: 44upx;
font-size: 32upx;
font-weight: 500;
color: #1a1a1a;
}
.os-tip{
padding-left: 38upx;
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
.os-ipts{
margin-bottom: 70upx;
padding-left: 38upx;
picker{
width: 100%;
}
.oi-frame{
padding-right: 40upx;
height: 124upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
margin-right: 20upx;
flex-shrink: 0;
line-height: 44upx;
font-size: 32upx;
color: #1a1a1a;
}
>input{
flex-grow: 1;
line-height: 44upx;
text-align: right;
font-size: 32upx;
color: #1a1a1a;
}
>image{
flex-shrink: 0;
width: 28upx;
height: 28upx;
margin-left: 40upx;
}
}
}
.os-btn{
margin: 0 auto;
width: 702upx;
height: 112upx;
text-align: center;
line-height: 112upx;
border-radius: 10upx;
font-size: 32upx;
color: #fff;
background-color: rgba($color: $themeColor, $alpha: .3);
&.active{
background-color: $themeColor;
}
}
}
</style>

253
src/pages/turnover/turnover.vue
View File

@ -0,0 +1,253 @@
<template>
<view class="turnover-container">
<view class="tc-tab">
<view>品牌</view>
<view class="active">门店</view>
</view>
<view class="tc-total-section">
<view class="tts-address">
<view>欧轩智能羽毛球馆永泰店</view>
<image mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
</view>
<view class="tts-money">
<view>2020.08.08-2020.09.21</view>
<view>总营业额</view>
<view><text>¥</text>9990.00</view>
</view>
</view>
<view class="tc-info-section">
<view class="tis-tab">
<view class="active">日报</view>
<view class="active">近7天</view>
<view>月报</view>
<view>年报</view>
</view>
<view class="tis-data">
<view class="td-date">
<text>2020年9月2日(昨天)</text>
<view></view>
<image mode="aspectFit"></image>
</view>
<view class="td-tip">实际收入</view>
<view class="td-price"><text>¥</text>9999.00</view>
<view class="td-detail">
<view>
<view>
<text>收款笔数 </text>0
</view>
<view>
<text>退款笔数 </text>0
</view>
</view>
<view>
<view>
<text>收款金额 </text> ￥0.00
</view>
<view>
<text>退款金额 </text> ￥0.00
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "../../style/public.scss";
page{
background-color: #fff;
}
.turnover-container{
}
.tc-tab{
height: 134upx;
border-bottom: 22upx solid #f2f2f7;
@include centerFlex(center);
>view{
margin: 0 70upx;
width: 176upx;
height: 72upx;
line-height: 72upx;
text-align: center;
border-radius: 36upx;
font-size: 36upx;
font-weight: 500;
color: #1a1a1a;
}
.active{
background-color: $themeColor;
color: #fff;
}
}
.tc-total-section{
border-bottom: 24upx solid #f2f2f7;
.tts-address{
padding-left: 48upx;
padding-right: 44upx;
height: 108upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
flex-grow: 1;
font-size: 28upx;
color: #1a1a1a;
@include textHide(1);
}
>image{
margin-left: 20upx;
flex-shrink: 0;
width: 28upx;
height: 28upx;
}
}
.tts-money{
padding-top: 48upx;
padding-bottom: 70upx;
>view{
text-align: center;
padding: 0 24upx;
@include textHide(1);
&:first-child{
line-height: 34upx;
font-size: 24upx;
color: #9c9c9f;
}
&:nth-child(2){
margin-bottom: 30upx;
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
&:nth-child(3){
line-height: 90upx;
font-size: 76upx;
color: #1a1a1a;
font-weight: bold;
>text{
font-size: 52upx;
}
}
}
}
}
.tc-info-section{
.tis-tab{
padding: 0 34upx;
height: 108upx;
border-bottom: 2upx solid #D8D8D8;
@include centerFlex(space-between);
>view{
flex-grow: 0;
flex-shrink: 0;
width: 120upx;
height: 106upx;
line-height: 106upx;
text-align: center;
font-size: 32upx;
color: #9c9c9f;
}
.active{
position: relative;
color: $themeColor;
&::after{
content: '';
display: block;
position: absolute;
left: 50%;
bottom: -2upx;
transform: translateX(-50%);
width: 100%;
height: 8upx;
border-radius: 4upx;
background-color: $themeColor;
}
}
}
.tis-data{
padding-top: 60upx;
display: flex;
flex-direction: column;
align-items: center;
.td-date{
margin-bottom: 62upx;
height: 72upx;
padding: 0 24upx;
border-radius: 10upx;
background-color: #f2f2f7;
@include centerFlex(center);
>view{
font-size: 28upx;
color: #1a1a1a;
}
>view{
margin: 0 18upx;
width: 2upx;
height: 40upx;
background-color: #D8D8D8;
}
>image{
width: 40upx;
height: 40upx;
background-color: #4f7ec8;
}
}
.td-tip{
margin-bottom: 6upx;
text-align: center;
line-height: 40upx;
font-size: 28upx;
color: #9c9c9f;
}
.td-price{
margin-bottom: 130upx;
padding: 0 24upx;
line-height: 90upx;
font-size: 76upx;
color: #1a1a1a;
>text{
font-size: 52upx;
}
@include textHide(1);
}
.td-detail{
padding: 0 24upx;
width: 100%;
@include centerFlex(center);
>view{
max-width: 50%;
flex-shrink: 0;
&:first-child{
margin-right: 24upx;
}
&+view{
margin-left: 24upx;
}
>view{
margin-bottom: 24upx;
font-weight: 500;
font-size: 32upx;
color: #1a1a1a;
@include textHide(1);
>text{
margin-right: 10upx;
font-weight: 400;
font-size: 28upx;
color: #9C9C9F;
}
}
}
}
}
}
</style>

12
src/utils/components.js
View File

@ -0,0 +1,12 @@
import reservation from '../components/order/reservation/reservation';
import membership from '../components/order/membership/membership';
import integral from '../components/order/integral/integral';
export const order = {
reservation,
membership,
integral
}
export default { order };
Write Preview
Loading…
Cancel
Save