领用

li-guang

2020-12-31 805546268abc5687dbefdd40cd927da62b096fad

领用

 hive-app/App.vue

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

 hive-app/pages.json

@@ -542,6 +542,39 @@
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/receive",
            "style": {
                "navigationBarTitleText": "领用",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/receiveRecord",
            "style": {
                "navigationBarTitleText": "产品领用记录",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/confirmReceive",
            "style": {
                "navigationBarTitleText": "确认领取",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        }
    ],
    "globalStyle": {

 hive-app/pages/workbench/confirmReceive.vue

New file
@@ -0,0 +1,95 @@
<template>
    <!-- 确认领取 -->
    <view>
        <navigator class="list-item">
            <view class="list-header">
                <view class="flex align-center">
                    <image class="icon" src="../../static/images/order-icon1.png"></image>
                    <text>六女士</text>
                </view>
                <text class="gray">2020-12-12 19:06:08</text>
            </view>
            <view class="list-content">
                <image class="icon" src="../../static/images/order-icon2.png"></image>
                <view class="flex-1">
                    <view class="flex align-center justify-between">
                        <view>
                            <text>肽妍氨基酸平衡基础洁面乳</text>
                            <text class="ml-5">x6</text>
                        </view>
                        <view>
                            <text class="font-10 gray mr-5">已领 1</text>
                            <text class="iconfont iconjian blue-btn-circle mr-5"></text>
                            <text>1</text>
                            <text class="iconfont iconjia blue-btn-circle ml-5"></text>
                        </view>
                    </view>
                    <view class="flex justify-between mt-10">
                        <view>
                            <text>水光面膜</text>
                            <text class="ml-15">x6</text>
                        </view>
                        <view>
                            <text class="font-10 gray mr-5">已领 2</text>
                            <text class="iconfont iconjian blue-btn-circle mr-5"></text>
                            <text>1</text>
                            <text class="iconfont iconjia blue-btn-circle ml-5"></text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="flex align-center">
                <text class="iconfont iconbeizhu icon gray"></text>
                <text class="font-12">备注</text>
            </view>
            <textarea placeholder="请输入" placeholder-class="placeholder" class="textarea"/>
        </navigator>
    </view>
</template>

<script>
</script>

<style>
    .list-item{
        background: #FFFFFF;
        border-radius: 4px;
        margin: 10px;
        color: #3a3f3f;
        padding: 0 10px;
    }
    .list-header{
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        font-size: 13px;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-content{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 12px 0;
        font-size: 12px;
    }
    .icon{
        width: 16px;
        height: 16px;
        vertical-align: sub;
        margin-right: 10px;
    }
    .list-content .icon{
        margin-top: 4px;
    }
    .textarea{
        width: 100%;
        height: auto;
        word-wrap : break-word;
        border: 1px solid #EDEAF4;
        border-radius: 4px;
        margin-top: 10px;
        padding: 15px;
        height: 110px;
        box-sizing: border-box;
    }
</style>

 hive-app/pages/workbench/index.vue

@@ -68,7 +68,7 @@
                    </navigator>
                </view>
                <view class="list-item">
                    <navigator url="./"  hover-class="none">
                    <navigator url="./receive"  hover-class="none">
                        <image class="icon" src="../../static/images/order4.png"></image>
                        <text>领用</text>
                    </navigator>

 hive-app/pages/workbench/receive.vue

New file
@@ -0,0 +1,134 @@
<template>
    <!-- 领用 -->
    <view>
        <h-tabs
            class="tab"
            :activeIndex="orderStatus"
            :tabData="tabs" 
            :config="{
                color: '#abb1cc',
                activeColor: '#518EFF',
                underLineColor: '#518EFF',
                underLineHeight: 6,
                fontSize: '28',
                underLineWidth: 60,
            }"
        />
        <view>
            <navigator class="list-item">
                <view class="list-header">
                    <view class="flex align-center">
                        <image class="icon" src="../../static/images/order-icon1.png"></image>
                        <text>六女士</text>
                    </view>
                    <text class="gray">2020-12-12 19:06:08</text>
                </view>
                <view class="list-content">
                    <image class="icon" src="../../static/images/order-icon2.png"></image>
                    <view class="flex-1">
                        <view class="flex justify-between">
                            <view>
                                <text>肽妍氨基酸平衡基础洁面乳</text>
                                <text class="ml-15">x6</text>
                            </view>
                            <text>已领 1/3</text>
                        </view>
                        <view class="flex justify-between mt-10">
                            <view>
                                <text>水光面膜</text>
                                <text class="ml-15">x6</text>
                            </view>
                            <text>已领 2/6</text>
                        </view>
                        <view class="flex justify-between mt-10">
                            <text class="gray">共计9件，已领3件</text>
                            <text class="blue">待领取</text>
                        </view>
                    </view>
                </view>
                <view class="list-footer">
                    <navigator class="blue-btn small-btn mr-10" url="./" hover-class="none">
                        <text>查看订单</text>
                    </navigator>
                    <navigator class="blue-btn small-btn mr-10" url="./receiveRecord" hover-class="none">
                        <text>领取记录</text>
                    </navigator>
                    <navigator class="blue-btn small-btn" url="./confirmReceive" hover-class="none">
                        <text>领取</text>
                    </navigator>
                </view>
            </navigator>
        </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: '待领取'
                    },
                    {
                        state: 2,
                        name: '已领取'
                    }
                ],
                list: []
            }  
        }
    }
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .tab{
        background: #FFFFFF;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-item{
        background: #FFFFFF;
        border-radius: 4px;
        margin: 10px;
        color: #3a3f3f;
        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;
        align-items: flex-start;
        padding: 12px 0;
        font-size: 14px;
    }
    .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>

 hive-app/pages/workbench/receiveRecord.vue

New file
@@ -0,0 +1,67 @@
<template>
    <!-- 领用记录 -->
    <view>
        <navigator class="list-item" v-for="item in 3">
            <view class="list-header">
                <text>操作员: 张三</text>
                <text class="gray">2020-12-12 19:06:08</text>
            </view>
            <view class="list-content">
                <view class="flex justify-between">
                    <text>肽妍氨基酸平衡基础洁面乳</text>
                    <text>x6</text>
                </view>
                <view class="flex justify-between mt-10">
                    <text>水光面膜</text>
                    <text class="ml-15">x6</text>
                </view>
                <text class="gray mt-10">备注: 阿萨德哈猴神大叔</text>
            </view>
        </navigator>
    </view>
</template>

<script>
</script>

<style>
    page{
        background: #F6F6F8;
    }
    .tab{
        background: #FFFFFF;
        border-bottom: 1px solid #EDEAF4;
    }
    .list-item{
        background: #FFFFFF;
        border-radius: 4px;
        margin: 10px;
        color: #3a3f3f;
        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;
        flex-direction: column;
        padding: 12px 0;
        font-size: 14px;
    }
    .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>