gx

queenwuli

2020-12-21 9b9856b6232db180030ed2b220ccd57da30cf6d9

gx

 hive-app/App.vue

@@ -16,5 +16,5 @@
    /*每个页面公共css */
@import url("./common/styles/index");
@import url("./static/iconfont/iconfont.css");
@import url("//at.alicdn.com/t/font_2263696_tm4mdlsht1a.css");
@import url("//at.alicdn.com/t/font_2263696_fuitblu662b.css");
</style>

 hive-app/common/styles/index.css

@@ -68,6 +68,9 @@
.font-12{
    font-size: 12px;
}
.font-13{
    font-size: 13px;
}
.font-14{
    font-size: 14px;
}
@@ -85,6 +88,9 @@
}
.font-20{
    font-size: 20px;
}
.font-24{
    font-size: 24px;
}

/* 颜色 */
@@ -142,7 +148,7 @@
    flex-wrap: wrap;
}
.align-left{
    align-items: flex-start;
    align-items: baseline;
}
.align-center{
    align-items: center;
@@ -186,6 +192,13 @@
    font-size: 16px;
    line-height: 42px;
}
.red-btn{
    background: #DE5A5A;
    border: 0;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 42px;
}
/* 蓝色边框白底按钮 */
.white-btn{
    background: #FFFFFF;
@@ -217,8 +230,8 @@
    color: #518EFF;
}
.small-btn{
    width: 100px;
    line-height: 32px;
    width: 90px;
    line-height: 30px;
    font-size: 14px;
    border-radius: 20px;
    text-align: center;

 hive-app/components/liuyuno-tabs/liuyuno-tabs.vue

@@ -187,8 +187,8 @@
        display: flex;
        font-size: 26rpx;
        position: relative;
        height: 90rpx;
        line-height: 90rpx;
        height: 80rpx;
        line-height: 80rpx;
        z-index: 10;
        .scroll-view-h{
            white-space:nowrap;

 hive-app/pages.json

@@ -29,6 +29,15 @@
            }
        },
        {
            "path": "pages/manager/index",
            "style": {
                "transparentTitle": "always",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/member/editMember",
            "style": {
                "navigationBarTitleText": "新增会员",
@@ -54,8 +63,8 @@
            "path": "pages/member/skinDetection",
            "style": {
                "navigationBarTitleText": "皮肤检测",
                "navigationBarBackgroundColor":"#518EFF",
                "navigationBarTextStyle":"white",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
@@ -211,9 +220,42 @@
            }
        },
        {
            "path": "./pages/workbench/orderDetail",
            "path": "pages/workbench/orderDetail",
            "style": {
                "navigationBarTitleText": "订单详情",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/serviceOrderList",
            "style": {
                "navigationBarTitleText": "服务单列表",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none",
                    "titleNView": {
                        "buttons": [
                            {
                                "text": "\ue600",
                                "fontSrc": "/static/iconfont/iconfont.ttf",
                                "fontSize": "18px",
                                "width":"25px",
                                "float":"right"
                            }
                        ]
                    }
                }
            }
        },
        {
            "path": "pages/workbench/serviceOrderDetail",
            "style": {
                "navigationBarTitleText": "服务单详情",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
@@ -243,9 +285,15 @@
                "text": "会员"
            },
            {
                "pagePath": "pages/mine/index",
                "pagePath": "pages/manager/index",
                "iconPath": "static/images/tabbar3.png",
                "selectedIconPath": "static/images/tabbar3-2.png",
                "text": "管理"
            },
            {
                "pagePath": "pages/mine/index",
                "iconPath": "static/images/tabbar4.png",
                "selectedIconPath": "static/images/tabbar4-2.png",
                "text": "我的"
            }
        ]

 hive-app/pages/manager/index.vue

New file
@@ -0,0 +1,88 @@
<template>
    <!-- 工作台 -->
    <view class="container">
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <view class="content-item">
            <text class="title">排行榜</text>
            <view class="flex align-center mt-10">
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement1.png"></image>
                    <text class="font-12 mt-10 font-dark">门店业绩排行榜</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement2.png"></image>
                    <text class="font-12 mt-10 font-dark">顾问业绩排行榜</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement3.png"></image>
                    <text class="font-12 mt-10 font-dark">美疗师业绩排行榜</text>
                </view>
            </view>
        </view>
        <view class="content-item">
            <text class="title">统计报表</text>
            <view class="flex align-center mt-10">
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement4.png"></image>
                    <text class="font-12 mt-10 font-dark">公司经营报表</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement5.png"></image>
                    <text class="font-12 mt-10 font-dark">门店经营报表</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement6.png"></image>
                    <text class="font-12 mt-10 font-dark">员工经营报表</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
				
            }
        },
        onLoad() {
			
        },
        methods:{
			
        }
    }
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .container{
        padding: 0 10px;
    }
    .content-item{
        background: #FFFFFF;
        padding: 15px 0;
        border-radius: 4px;
        margin: 10px 0;
    }
    .title{
        font-size: 14px;
        padding-left: 15px;
        padding-bottom: 10px;
    }
    .list-item{
        flex: 1;
        text-align: center;
    }
    .content-icon{
        width: 30px;
        height: 30px;
        display: block;
        margin: 0 auto 10px;
    }
</style>

 hive-app/pages/member/detail.vue

@@ -60,19 +60,23 @@
                    </navigator>
                </view>
                <view class="detail-item">
                    <navigator url="../workbench/orderList" hover-class="none" >
                    <image class="detail-icon" mode="aspectFit" src="../../static/images/member-detail5.png"></image>
                    <text class="font-14 mt-5">消费记录</text>
                        <text class="font-14 mt-5">订单记录</text>
                    </navigator>
                </view>
                <view class="detail-item">
                    <navigator url="../workbench/serviceOrderList" hover-class="none" >
                    <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail6.png"></image>
                    <text class="font-14 mt-5">服务记录</text>
                        <text class="font-14 mt-5">服务单记录</text>
                    </navigator>
                </view>
                <view class="detail-item">
                    <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail7.png"></image>                        
                    <text class="font-14 mt-5">跟进记录</text>
                </view>
                <view class="detail-item">
                    <navigator url="./membershipCard" hover-class="none" >
                    <navigator url="" hover-class="none" >
                        <image class="detail-icon"  mode="aspectFit" src="../../static/images/member-detail3.png"></image>                        
                        <text class="font-14 mt-5">会员档案</text>
                    </navigator>
@@ -80,8 +84,12 @@
            </view>
        </view>
        <view class="sticky-footer flex justify-between">
            <button class="white-btn btn">开单</button>
            <button class="blue-btn btn">预约</button>
            <navigator url="../workbench/selectProduct/index" class="btn">
                <button class="white-btn">开单</button>
            </navigator>
            <navigator url="../workbench/selectService/index" class="btn">
                <button class="blue-btn">预约</button>
            </navigator>
        </view>
    </view>
</template>

 hive-app/pages/member/membershipCard.vue

@@ -15,9 +15,9 @@
                <text>有效期：2025-10-20</text>
            </view>
        </view>
        <view class="list-item">
        <view class="list-item" v-for="item in 2">
            <view class="list-header">
                <text class="name">会员卡</text>
                <text class="name">双11拓客卡</text>
                <text>NO 23564</text>
            </view>
            <view class="list-content">
@@ -54,12 +54,23 @@
        padding: 10px 10px;
    }
    .list-item{
        background: #F0AD4E;
        color: #FFFFFF;
        font-size: 14px;
        padding: 12px 15px;
        border-radius: 4px;
        padding: 20px 18px;
        border-radius: 16px;
        margin-bottom: 10px;
    }
    .list-item:nth-child(2n+1){
        background: url(../../static/images/card-bg2.png) no-repeat;
        background-size: cover;
    }
    .list-item:nth-child(2n+2){
        background: url(../../static/images/card-bg3.png) no-repeat;
        background-size: cover;
    }
    .list-item:nth-child(1){
        background: url(../../static/images/card-bg1.png) no-repeat;
        background-size: cover;
    }
    .list-header{
        display: flex;
@@ -71,7 +82,7 @@
        font-weight: bold;
    }
    .list-content{
        padding: 20px 0;
        padding: 24px 0;
        font-size: 30px;
    }
    .list-footer{

 hive-app/pages/member/skinDetection.vue

@@ -57,7 +57,7 @@

<style>
    page{
        background: #F2f2f2;
        background: #F6F6F8;
    }
    .container{
        padding: 15px 10px;

 hive-app/pages/workbench/index.vue

@@ -21,22 +21,24 @@
                <text class="white font-14 popup-content-text">扫一扫</text>
            </view>
        </popover>
        <view class="condition flex justify-between">
        <view class="condition">
            <view class="eyes">
                <text class="iconfont iconyanjing2"></text>
                <!-- <text class="iconfont iconbiyan"></text> -->
            </view>
            <view class="flex justify-around">
            <view class="flex flex-v align-center">
                <text class="font-17 white">0</text>
                <text class="font-15 white mt-10">预约</text>
                    <text class="font-17">¥ 1000</text>
                    <text>今日订单</text>
            </view>
            <view class="flex flex-v align-center">
                <text class="font-17 white">2</text>
                <text class="font-15 white mt-10">进行中</text>
                    <text class="font-17">¥ 100</text>
                    <text>今日消耗</text>
            </view>
            <view class="flex flex-v align-center">
                <text class="font-17 white">5</text>
                <text class="font-15 white mt-10">待付款</text>
                    <text class="font-17">¥ 90</text>
                    <text>手工提成</text>
            </view>
            <view class="flex flex-v align-center">
                <text class="font-17 white">15</text>
                <text class="font-15 white mt-10">欠款</text>
            </view>
        </view>
        <view class="content-item mt-10">
@@ -78,19 +80,19 @@
                    </navigator>
                </view>
                <view class="list-item">
                    <navigator url="./"  hover-class="none">
                    <navigator url="./serviceOrderList"  hover-class="none">
                        <image class="content-icon" src="../../static/images/sever2.png"></image>
                        <text class="font-12 mt-10 font-dark">待服务</text>
                    </navigator>
                </view>
                <view class="list-item">
                    <navigator url="./"  hover-class="none">
                    <navigator url="./serviceOrderList"  hover-class="none">
                        <image class="content-icon" src="../../static/images/sever3.png"></image>
                        <text class="font-12 mt-10 font-dark">服务中</text>
                    </navigator>
                </view>
                <view class="list-item">
                    <navigator url="./"  hover-class="none">
                    <navigator url="./serviceOrderList"  hover-class="none">
                        <image class="content-icon" src="../../static/images/sever4.png"></image>
                        <text class="font-12 mt-10 font-dark">服务完成</text>
                    </navigator>
@@ -136,37 +138,6 @@
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/warehouse2.png"></image>
                    <text class="font-12 mt-10 font-dark">盘点</text>
                </view>
            </view>
        </view>
        <view class="content-item">
            <text class="title">报表</text>
            <view class="flex align-center mt-10">
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement1.png"></image>
                    <text class="font-12 mt-10 font-dark">排行榜</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement2.png"></image>
                    <text class="font-12 mt-10 font-dark">员工业绩</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement3.png"></image>
                    <text class="font-12 mt-10 font-dark">门店业绩</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement4.png"></image>
                    <text class="font-12 mt-10 font-dark">产品报表</text>
                </view>
            </view>
            <view class="flex align-center mt-15">
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement5.png"></image>
                    <text class="font-12 mt-10 font-dark">库存预警</text>
                </view>
                <view class="flex flex-v align-center list-item">
                    <image class="content-icon" src="../../static/images/statement6.png"></image>
                    <text class="font-12 mt-10 font-dark">客户流失预警</text>
                </view>
            </view>
        </view>
@@ -218,9 +189,22 @@
        padding: 12px 5px;
    }
    .condition{
        position: relative;
        background: #518EFF;
        padding: 15px 30px;
        padding: 15px 22px;
        border-radius: 4px;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 30px;
    }
    .condition .eyes{
        /* position: absolute;
        right: 10px;
        top: 10px; */
        text-align: right;
    }
    .condition .eyes .iconfont{
        font-size: 18px;
    }
    .content-item{
        background: #FFFFFF;
@@ -232,7 +216,7 @@
        font-size: 14px;
        color: #666666;
        padding-left: 15px;
        padding-bottom: 5px;
        padding-bottom: 10px;
    }
    .list-item{
        width: 25%;

 hive-app/pages/workbench/orderDetail.vue

@@ -1,9 +1,165 @@
<template>
    <!-- 订单详情 -->
    <view class="list">
        <view class="list-item">
            <view class="list-header">
                <text>订单信息</text>
            </view>
            <view class="list-content">
                <view class="flex justify-between">
                    <text>会员姓名</text>
                    <text class="gray">李某某</text>
                </view>
                <view class="flex justify-between">
                    <text>联系方式</text>
                    <text class="gray">15588881231</text>
                </view>
                <view class="flex justify-between">
                    <text>订单号</text>
                    <text class="gray">N12371237123173</text>
                </view>
                <view class="flex justify-between">
                    <text>下单顾问</text>
                    <text class="gray">广哥</text>
                </view>
                <view class="flex justify-between">
                    <text>下单时间</text>
                    <text class="gray">2020-12-12 19:06:08</text>
                </view>
            </view>
        </view>
        <view class="list-item">
            <view class="list-header">
                <text>订单明细</text>
            </view>
            <view class="list-content">
                <view class="list-content-row" v-for="item in 2">
                    <view class="flex justify-between align-center">
                        <view>
                            <text class="font-15 mr-20">富脂肽原液(单支)</text>
                            <text>x1</text>
                        </view>
                        <view>
                            <text class="gray font-through">￥0.99</text>
                            <text class="ml-10">￥0.99</text>
                        </view>
                    </view>
                    <view class="gray font-13">
                        <text>现金支付：</text>
                        <text>￥0</text>
                    </view>
                    <view class="gray font-13">
                        <text>储蓄卡支付：</text>
                        <text>￥0</text>
                    </view>
                    <view class="gray font-13">
                        <text>
                            <text>业绩：</text>
                            <text>￥0</text>
                        </text>
                        <text class="ml-20">
                            <text>员工：</text>
                            <text>￥0</text>
                        </text>
                    </view>
                </view>
            </view>
        </view>
        <view class="list-item">
            <view class="list-header">
                <text>支付信息</text>
            </view>
            <view class="list-content">
                <view class="flex justify-between">
                    <text>现金支付</text>
                    <text class="gray">￥5000.00</text>
                </view>
                <view class="flex justify-between">
                    <text>储蓄卡支付</text>
                    <text class="gray">￥352.00</text>
                </view>
                <view class="flex justify-between">
                    <text>应付总额</text>
                    <text class="gray">￥485.00</text>
                </view>
                <view class="flex justify-between">
                    <text>实付总额</text>
                    <text class="gray">￥6934.00</text>
                </view>
                <view class="flex justify-between">
                    <text>优惠总额</text>
                    <text class="gray">￥40.00</text>
                </view>
            </view>
        </view>
        <view class="list-item">
            <view class="list-header">
                <text>业绩提成</text>
            </view>
            <view class="list-content">
                <view class="list-content-row" v-for="item in 2">
                    <view class="flex justify-between align-center gray font-13">
                        <view>
                            <text class="mr-20">富脂肽原液(单支)</text>
                            <text>x1</text>
                        </view>
                        <text>￥0.99</text>
                    </view>
                    <view class="flex justify-between">
                        <text>广哥</text>
                        <text>业绩：233</text>
                    </view>
                    <view class="flex justify-between">
                        <text>永哥</text>
                        <text>业绩：233</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
          return {
			  
          }  
        }
    }
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .list-item{
        background: #FFFFFF;
        border-radius: 4px;
        margin: 10px;
    }
    .list-header{
        padding: 12px 15px;
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-content{
        padding: 12px 15px;
        font-size: 14px;
        line-height: 28px;
    }
    .list-content-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 8px 0;
    }
    .list-content-row:nth-child(1){
        padding-top: 0;
    }
    .list-content-row:nth-last-child(1){
        border-bottom: 0;
        padding-bottom: 0;
    }
    .font-through{
        text-decoration: line-through;
    }
</style>

 hive-app/pages/workbench/orderList.vue

@@ -18,7 +18,7 @@
                }"
            />
            <view class="list">
                <view class="list-item" v-for="item in 4">
                <navigator url="./orderDetail" class="list-item" v-for="item in 4">
                    <view class="list-header">
                        <text>订单号: N202012123556</text>
                        <text class="blue">待付款</text>
@@ -42,32 +42,7 @@
                    <view class="list-footer">
                        <text class="blue-btn small-btn">取消订单</text>
                    </view>
                </view>
            </view>
            <view class="order">
                <view class="flex justify-between order-number">
                    <text class="font-14">订单号: N202012123556</text>
                    <text class="font-14 blue">已完成</text>
                </view>
                <view class="flex justify-between order-content">
                    <view class="flex flex-v">
                        <text class="font-12">李某某</text>
                        <text class="font-12 gray mt-10">2020-12-15 18:11:01</text>
                    </view>
                    <view class="flex flex-v">
                        <text class="font-12">应付金额</text>
                        <text class="font-12 mt-10">实付金额</text>
                    </view>
                    <view class="flex flex-v">
                        <text class="font-12">￥ 8000.00</text>
                        <text class="font-12 mt-10">￥ 8000.00</text>
                    </view>
                </view>
                <view class="flex justify-end">
                    <navigator url="./orderDetail">
                        <button class="blue-btn small-btn">查看详情</button>
                    </navigator>
                </view>
            </view>
        </view>
    </view>
@@ -111,7 +86,7 @@
        background: #F6F6F8;
    }
    .header{
        padding: 10px;
        padding: 10px 10px 5px;
        background: #FFFFFF;
    }
    .tab{

 hive-app/pages/workbench/productDetail/combo.vue

@@ -43,11 +43,12 @@
        font-size: 14px;
    }
    .content-title{
        padding: 10px 0;
        padding: 12px 0 0;
        font-size: 15px;
    }
    .content-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 10px 0;
        padding: 12px 0;
    }
    .content-row:nth-last-child(1){
        border: 0;

 hive-app/pages/workbench/productDetail/index.vue

@@ -13,17 +13,19 @@
                    @change="swiperChange"
                    >
                    <swiper-item v-for="(item,index) in bannerList" :key="index">
                        <image class="banner-img" :src="item.img" mode="aspectFill"></image>
                    <image class="banner-img" :src="item.img" mode="widthFix"></image>
                        <view class="dots-container flex align-center justify-center">
                            <text class="font-10 white">{{swiperIndex+1}}/{{bannerList.length}}</text>
                        </view>
                    </swiper-item>
            </swiper>
        </view>
        <view class="return-icon iconfont iconzuojiantou" @click="goBack"></view>
        <navigator open-type="navigateBack">
            <view class="return-icon iconfont iconzuojiantou"></view>
        </navigator>
        <view class="product-price">
            <text class="font-20 red">￥128.00</text>
            <view class="font-14 flex justify-between">
            <text class="font-24 red font-bold">￥128.00</text>
            <view class="font-14 flex justify-between mt-5">
                <text>多肽沁妍水润面膜</text>
                <text class="gray">月销：122</text>
            </view>
@@ -37,15 +39,15 @@
                        color: '#abb1cc',
                        activeColor: '#518EFF',
                        underLineColor: '#518EFF',
                        underLineHeight: 6,
                        fontSize: '30',
                        underLineWidth: 110,
                        underLineHeight: 4,
                        fontSize: '28',
                        underLineWidth: 110
                    }"
                    @tabClick="tabClick($event)"
                />
            </view>
            <view v-if="tabIndex==0">
                <image class="product-img" mode="aspectFit" src="../../../static/images/banner1.jpg"></image>
                <image class="product-img" mode="widthFix" src="../../../static/images/banner1.jpg"></image>
            </view>
            <view v-else class="product-all">
                <view class="product-property">
@@ -116,9 +118,6 @@
            swiperChange(e){
                this.swiperIndex = e.detail.current;
            },
            goBack(){
                uni.navigateBack()
            },
            tabClick(index){
                this.tabIndex=index
            }
@@ -155,7 +154,7 @@
    }
    .product-price{
        background: #FFFFFF;
        padding: 10px;
        padding: 15px 10px;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
@@ -168,12 +167,10 @@
    }
    .product-info-row{
        background: #FFFFFF;
        margin: 0 10px;
        border-bottom: 1px solid #EDEAF4;
    }
    .product-img{
        width: 100%;
        height: 640px;
    }
    .product-all{
        background: #F6F6F8;
@@ -187,7 +184,7 @@
    }
    .product-property-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 10px 0;
        padding: 12px 0;
    }
    .product-property-row:nth-last-child(1){
        border: 0;

 hive-app/pages/workbench/productDetail/project.vue

@@ -31,11 +31,13 @@
        box-shadow:0 -6px 6px rgba(237,234,244,0.5);
    }
    .content-title{
        padding: 10px 0;
        padding: 12px 0 0;
        font-size: 15px;
    }
    .content-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 10px 0;
        padding: 12px 0;
        font-size: 14px;
    }
    .content-row:nth-last-child(1){
        border: 0;

 hive-app/pages/workbench/productDetail/refillCard.vue

@@ -39,11 +39,12 @@
        font-size: 14px;
    }
    .content-title{
        padding: 10px 0;
        padding: 12px 0;
        font-size: 15px;
    }
    .content-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 10px 0;
        padding: 12px 0;
    }
    .content-row:nth-last-child(1){
        border: 0;

 hive-app/pages/workbench/serviceOrderDetail.vue

New file
@@ -0,0 +1,132 @@
<template>
    <view class="list">
        <view class="list-item">
            <view class="list-header">
                <text>服务单信息</text>
            </view>
            <view class="list-content">
                <view class="flex justify-between">
                    <text>会员姓名</text>
                    <text class="gray">李某某</text>
                </view>
                <view class="flex justify-between">
                    <text>联系方式</text>
                    <text class="gray">15588881231</text>
                </view>
                <view class="flex justify-between">
                    <text>服务单号</text>
                    <text class="gray">N12371237123173</text>
                </view>
                <view class="flex justify-between">
                    <text>预约时间</text>
                    <text class="gray">2020-12-12 19:06:08</text>
                </view>
                <view class="flex justify-between">
                    <text>预约床位</text>
                    <text class="gray">VIP-2</text>
                </view>
                <view class="flex justify-between">
                    <text>服务总时间</text>
                    <text class="gray">180分钟</text>
                </view>
                <view class="flex justify-between">
                    <text>配料师</text>
                    <text class="gray">广哥</text>
                </view>
                <view class="flex justify-between">
                    <text>下单总顾问</text>
                    <text class="gray">广哥</text>
                </view>
            </view>
        </view>
        <view class="list-item">
            <view class="list-header">
                <text>服务明细</text>
            </view>
            <view class="list-content">
                <view class="list-content-row" v-for="item in 2">
                    <view class="flex justify-between align-center font-15">
                        <view>
                            <text class="mr-20">富脂肽原液(单支)</text>
                            <text>x1</text>
                        </view>
                        <text class="blue font-16">￥0.99</text>
                    </view>
                    <view class="flex justify-between mt-5">
                        <text class="gray">服务开始时间</text>
                        <text>2020-12-12 19:06:08</text>
                    </view>
                    <view class="flex justify-between">
                        <text class="gray">服务结束时间</text>
                        <text>2020-12-12 19:06:08</text>
                    </view>
                    <view class="flex justify-between">
                        <text class="gray">服务时长</text>
                        <text>90分钟</text>
                    </view>
                    <view class="flex justify-between">
                        <text class="gray">美疗师</text>
                        <text>广哥</text>
                    </view>
                    <view class="flex justify-between">
                        <text class="gray">提成</text>
                        <text>￥0.50</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="list-item">
            <view class="list-header">
                <text>客户评价</text>
            </view>
            <view class="list-content">
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
          return {
			  
          }  
        }
    }
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .list-item{
        background: #FFFFFF;
        border-radius: 4px;
        margin: 10px;
    }
    .list-header{
        padding: 12px 15px;
        font-size: 16px;
        font-weight: bold;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-content{
        padding: 12px 15px;
        font-size: 14px;
        line-height: 28px;
    }
    .list-content-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 8px 0;
    }
    .list-content-row:nth-child(1){
        padding-top: 0;
    }
    .list-content-row:nth-last-child(1){
        border-bottom: 0;
        padding-bottom: 0;
    }
    .font-through{
        text-decoration: line-through;
    }
</style>

 hive-app/pages/workbench/serviceOrderList.vue

New file
@@ -0,0 +1,146 @@
<template>
    <view>
        <view class="header">
            <search-bar class="mb-0" placeholder="输入会员姓名、手机号、订单号查询"></search-bar>
        </view>
        <view>
            <h-tabs
                class="tab"
                :tabData="tabs" 
                :config="{
                    color: '#abb1cc',
                    activeColor: '#518EFF',
                    underLineColor: '#518EFF',
                    underLineHeight: 4,
                    fontSize: '28',
                    underLineWidth: 60
                }"
            />
            <view class="list">
                <navigator url="./serviceOrderDetail" class="list-item" v-for="item in 4">
                    <view class="list-header">
                        <text>订单号: N202012123556</text>
                        <text class="gray">2020-12-15 18:11:01</text>
                    </view>
                    <view class="list-content">
                        <view class="flex flex-v">
                            <view>
                                <image src="../../static/images/order-icon1.png" class="icon"></image>
                                <text>李广</text>
                            </view>
                            <view class="flex mt-10">
                                <image src="../../static/images/order-icon2.png" class="icon" style="padding-top: 3px;"></image>
                                <view>
                                    <text>肽补水·无创水光管理</text>
                                    <text class="block mt-5">肽补水·无创水光管理</text>
                                </view>
                            </view>
                            <view class="mt-10">
                                <image src="../../static/images/order-icon3.png" class="icon"></image>
                                <text>VIP-2（星海店）</text>
                            </view>
							
                        </view>
                        <view class="flex flex-v right">
                            <text class="gray">90分钟</text>
                            <text class="gray mt-10">莉莉</text>
                            <text class="gray mt-5">雯雯</text>
                            <text class="blue mt-10">待付款</text>
                        </view>
                    </view>
                    <view class="list-footer">
                        <text class="white-btn small-btn">取消</text>
                        <text class="blue-btn small-btn ml-10">开始服务</text>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
    import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
    import searchBar from '../../components/searchBar/index.vue';
    export default {
        components: {
            HTabs,
            searchBar
        },
        data() {
          return {
            tabs:[
                {
                    state: 1,
                    name: '全部'
                },
                {
                    state: 2,
                    name: '待预约'
                },
                {
                    state: 3,
                    name: '待配料'
                },
                {
                    state: 4,
                    name: '待服务'
                },
                {
                    state: 5,
                    name: '服务中'
                },
                {
                    state: 6,
                    name: '已完成'
                }
            ],
          }  
        }
    }
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .header{
        padding: 10px 10px 5px;
        background: #FFFFFF;
    }
    .tab{
        background: #FFFFFF;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-item{
        background: #FFFFFF;
        border-radius: 4px;
        margin: 10px;
        color: #3a3f3f;
    }
    .list-header{
        display: flex;
        justify-content: space-between;
        padding: 12px 15px;
        font-size: 15px;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        font-size: 14px;
    }
    .list-content .icon{
        width: 16px;
        height: 16px;
        vertical-align: sub;
        margin-right: 10px;
    }
    .list-footer{
        display: flex;
        justify-content: flex-end;
        padding: 10px 15px;
        border-top: 1px solid #EDEAF4;
    }
</style>

 hive-app/static/images/card-bg1.png

 hive-app/static/images/card-bg2.png

 hive-app/static/images/card-bg3.png

 hive-app/static/images/card-bg4.png

 hive-app/static/images/order-icon1.png

 hive-app/static/images/order-icon2.png

 hive-app/static/images/order-icon3.png

 hive-app/static/images/statement1.png

 hive-app/static/images/statement2.png

 hive-app/static/images/statement3.png

 hive-app/static/images/statement4.png

 hive-app/static/images/statement5.png

 hive-app/static/images/statement6.png

 hive-app/static/images/tabbar3-2.png

 hive-app/static/images/tabbar3.png

 hive-app/static/images/tabbar4-2.png

 hive-app/static/images/tabbar4.png