跟进记录订单列表

li-guang

2021-01-11 74088d626aab3a7110cd732dc746b1b99fbdbdf3

跟进记录订单列表

 hive-app/pages.json

@@ -674,6 +674,17 @@
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/followRecords/orderList",
            "style": {
                "navigationBarTitleText": "订单列表",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        }
    ],
    "globalStyle": {

 hive-app/pages/workbench/followRecords/addRecord.vue

@@ -19,7 +19,7 @@
        </view>
        <view class="content-row flex align-center justify-between">
            <text>相关订单</text>
            <navigator url="../../member/selectCustomer" hover-class="none" class="gray flex align-center">
            <navigator url="./orderList" hover-class="none" class="gray flex align-center">
                <text>水光面膜等三件产品</text>
                <text class="iconfont iconarrow-backimg"></text>
            </navigator>

 hive-app/pages/workbench/followRecords/orderList.vue

New file
@@ -0,0 +1,167 @@
<template>
    <!-- 订单列表 -->
    <view>
        <h-tabs
            class="tab"
            :activeIndex="orderStatus"
            @tabClick="tabChange"
            :tabData="tabs" 
            :config="{
                color: '#abb1cc',
                activeColor: '#518EFF',
                underLineColor: '#518EFF',
                underLineHeight: 4,
                fontSize: '28',
                underLineWidth: 60,
            }"
        />
        <view v-if="this.orderStatus==0">
            <view class="list">
                <view class="list-item" v-for="item in 2">
                    <navigator url="./" hover-class="none">
                        <view class="list-header">
                            <text>订单号: 123456789</text>
                            <text class="blue">待付款</text>
                        </view>
                        <view class="list-content">
                            <view class="flex flex-v flex-1">
                                <text class="font-bold font-15">刘亦菲</text>
                                <text class="gray">2020-12-23 12:34</text>
                            </view>
                            <view class="flex justify-between flex-1">
                                <view>
                                    <view>应付金额</view>
                                    <view>实付金额</view>
                                    <view>欠款总额</view>
                                </view>
                                <view class="right">
                                    <view>￥ 233</view>
                                    <view>￥ 233</view>
                                    <view>￥ 233</view>
                                </view>
                            </view>
                        </view>
                    </navigator>
                    <view class="list-footer">
                        <text class="blue-btn small-btn mr-10">选择</text>
                        <text class="blue-btn small-btn">查看详情</text>
                    </view>
                </view>
            </view>
        </view>
        <view v-if="this.orderStatus==1">
            <view class="list">
                <navigator url="./" class="list-item" v-for="item in 2">
                    <view class="list-header">
                        <text>订单号: 123456789</text>
                        <text class="gray">2020-12-23 12:34</text>
                    </view>
                    <view class="list-content">
                        <view class="flex flex-v">
                            <view>
                                <image src="../../../static/images/order-icon1.png" class="icon"></image>
                                <text>Label</text>
                            </view>
                            <view class="flex align-center mt-10">
                                <image src="../../../static/images/order-icon2.png" class="icon"></image>
                                <view>
                                    <text>肽洁净●小气泡深层管理</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" style="flex: 0 0 70px;">
                            <text class="gray mb-5">90分钟</text>
                            <text class="gray mt-5">邝健琼</text>
                            <text class="mt-10 blue">待配料</text>
                        </view>
                    </view>
                    <view class="list-footer">
                        <text class="blue-btn small-btn mr-10">选择</text>
                        <text class="blue-btn small-btn">查看详情</text>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
    import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
    export default{
        components: {
            HTabs
        },
        data() {
            return {
                tabs:[
                    {
                        state: 0,
                        name: '订单'
                    },
                    {
                        state: 1,
                        name: '服务单'
                    }
                ],
                orderStatus: 0,
            }  
        },
        methods:{
            tabChange(index){
                if(this.orderStatus === index){
                    console.log(index)
                    return;
                }
                this.orderStatus = index;
            },
        }
    }
</script>

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