订单块

li-guang

2020-12-17 06cd51f34f3a51e6ff848ae5b695a46dfc424200

订单块

 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_9yynz69zizb.css");
@import url("//at.alicdn.com/t/font_2263696_m22p50f3dmd.css");
</style>

 hive-app/common/styles/index.css

@@ -29,6 +29,9 @@
    margin-left: 20px;
}

.mr-0{
    margin-right: 0;
}
.mr-5{
    margin-right: 5px;
}
@@ -56,6 +59,9 @@
}

/* 字体 */
.font-10{
    font-size: 10px;
}
.font-12{
    font-size: 12px;
}
@@ -129,6 +135,9 @@
.flex-v{
    flex-direction: column;
}
.align-left{
    align-items: flex-start;
}
.align-center{
    align-items: center;
}
@@ -165,7 +174,7 @@
    background: #518EFF;
    border: 0;
    color: #FFFFFF;
    font-size: 16px;
    font-size: 14px;
}

/* 蓝色边框白底按钮 */
@@ -173,5 +182,16 @@
    background: #FFFFFF;
    border: 1px solid #518EFF;
    color: #518EFF;
    font-size: 16px;
    font-size: 14px;
}
/* 蓝色圆形加减按钮 */
.blue-btn-circle{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #518EFF;
    color: #FFFFFF;
}

 hive-app/components/searchBar/index.vue

@@ -1,15 +1,15 @@
<template>
    <view class="search-group">
        <text class="iconfont iconsousuo"></text>
        <input class="uni-input" confirm-type="search" placeholder="请输入会员姓名、手机号、编号查询" placeholder-class="placeholder" />
        <input class="uni-input" confirm-type="search" :placeholder=placeholder placeholder-class="placeholder" />
    </view>
</template>

<script>
    export default {
        props:["placeholder"],
        data() {
            return {
				
            };
        }
    }

 hive-app/pages.json

@@ -112,6 +112,50 @@
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/customerInfo",
            "style": {
                "navigationBarTitleText": "客户信息",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/selectProduct",
            "style": {
                "navigationBarTitleText": "当前客户:李某",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/confirmOrder",
            "style": {
                "navigationBarTitleText": "确认订单",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        },
        {
            "path": "pages/workbench/submitSucceed",
            "style": {
                "navigationBarTitleText": "提交成功",
                "navigationBarBackgroundColor":"#FFFFFF",
                "navigationBarTextStyle":"black",
                "app-plus":{ 
                    "scrollIndicator": "none"
                }
            }
        }
    ],
    "globalStyle": {

 hive-app/pages/member/index.vue

@@ -1,6 +1,6 @@
<template>
    <view class="container">
        <search-bar></search-bar>
        <search-bar :placeholder=placeholder></search-bar>
        <view class="sort-wrap">
            <view @click="filterCustom(1)">
                <text>本月到店次数</text>
@@ -48,6 +48,7 @@
        },
        data() {
            return {
                placeholder:"请输入会员姓名、手机号、编号查询",
                colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
                filterType: 1,
                filterList: [],

 hive-app/pages/mine/knowledge.vue

@@ -1,20 +1,23 @@
<template>
    <!-- 知识库 -->
    <view class="container flex">
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <scroll-view class="list-left" scroll-y>
            <view v-for="(item,index) in list" class="list-left-row">
                <text @click="show(item)">{{item.primaryTitle}}</text>
                <view v-for="(sub,index) in item.subTitle" v-show="item.isShow" class="list-left-row-item" @click="selectItem(index)" :class="index==select?'select-item':''">
            <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="activeIndex==index?'active':''">
                <text class="font-14 gray"  @click="show(item)">{{item.primaryTitle}}</text>
                <!-- <view v-for="(sub,index) in item.subTitle" v-show="item.isShow" class="list-left-row-item" @click="selectItem(index)" :class="index==select?'select-item':''">
                    {{sub}}
                </view>
                </view> -->
            </view>
        </scroll-view>
        <scroll-view class="list-right" scroll-y>
            <view class="flex align-center list-right-row">
                <image class="list-right-img ml-10" mode="aspectFit" src="../../static/images/head-img.jpg"></image>
                <view class="flex flex-v ml-10">
                    <text class="overflow-nowrap">我是文章的标题</text>
                    <text class="overflow-omit">我是文章的内容我是文章的内容我是文章的内容我是文章的内容</text>
                    <text class="overflow-nowrap font-14">我是文章的标题</text>
                    <text class="overflow-omit font-14">我是文章的内容我是文章的内容我是文章的内容我是文章的内容</text>
                </view>
            </view>
        </scroll-view>
@@ -37,7 +40,8 @@
                        isShow:false
                    }
                ],
                select:'0'
                select:'0',
                activeIndex:'0'
            }
        },
        methods:{
@@ -47,23 +51,33 @@
            },
            selectItem(index){
                this.select=index
            },
            active(index){
                this.activeIndex=index
            }
        }
    }
</script>

<style>
    page{
        height: 100%;
    }
    .container{
        padding: 0 10px;
        height: 100%;
        padding: 10px 0 0;
        box-sizing: border-box;
    }
    .list-left{
        /* width: 100px; */
        width: 25%;
        width: 30%;
        height: 100%;
        text-align: center;
        background: #F6F6F8;
        border-radius: 4px;
		
    }
    .list-left-row{
        padding: 0 10px;
        margin-top: 10px;
        padding: 10px 10px;
        font-size: 16px;
        display: flex;
        flex-direction: column;
@@ -73,22 +87,31 @@
        width: 80px;
        margin-top: 8px;
        font-size: 14px;
        color: ;
    }
    .select-item{
        background: red;
        border-radius: 20px;
        color: #FFFFFF;
    }
    .active{
        background: #FFFFFF;
        color: #000000;
    }
    .list-right{
        width: 75%;
        width: 70%;
        text-align: center;
        padding: 0px 10px;
    }
    .list-right-row{
        border-left: 1px solid #ABB1CC;
        border-bottom: 1px solid #ABB1CC;
        border: 1px solid #EDEAF4;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
        border-radius: 4px;
        padding: 10px;
    }
    .list-right-img{
        width: 200px;
        height: 100px;
        width: 150px;
        height: 80px;
    }
    
    /* 超过两行显示省略号 */

 hive-app/pages/workbench/confirmOrder.vue

New file
@@ -0,0 +1,75 @@
<template>
    <!-- 确认订单 -->
    <view class="container">
        <view class="header flex align-center justify-between">
            <view>
                <text class="font-16">李某</text>
                <text class="font-16 ml-15">男</text>
                <text class="font-16 ml-15">18岁</text>
            </view>
            <text class="font-16">15588886885</text>
        </view>
        <view class="content mt-20">
            <view class="content-row flex align-center justify-between">
                <text class="font-14">(项目) 肽妍氨基酸平衡基础洁面乳×1</text>
                <text class="font-14">￥90,000</text>
            </view>
            <view class="content-row flex align-center justify-between">
                <text class="font-14">(套餐) 肽妍氨基酸平衡基础洁面乳×1</text>
                <text class="font-14">￥90,000</text>
            </view>
            <view class="content-row flex align-center justify-between">
                <text class="font-14">(项目) 肽妍氨基酸平衡基础洁面乳×1</text>
                <text class="font-14">￥90,000</text>
            </view>
            <view class="right mt-30">
                <text class="font-16 mr-5">合计:</text>
                <text class="font-16 red">￥270,000</text>
            </view>
        </view>
        <button class="blue-btn btn" @click="linkTo('./submitSucceed')">提交订单</button>
    </view>
</template>

<script>
    export default{
        data(){
            return{}
        },
        methods:{
            linkTo(val){
                uni.navigateTo({
                    url:val
                })
            }
        }
    }
</script>

<style>
    .container{
        padding: 10px;
    }
    .header{
        border: 1px solid #EDEAF4;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
        border-radius: 4px;
        padding: 10px 10px;
    }
    .content{
        border: 1px solid #EDEAF4;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
        border-radius: 4px;
        padding: 10px;
    }
    .content-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 10px 5px;
    }
    .btn{
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
</style>

 hive-app/pages/workbench/customerInfo.vue

New file
@@ -0,0 +1,77 @@
<template>
    <!-- 客户信息 -->
    <view class="container">
        <view class="flex flex-v align-center">
            <image class="header-img" src="../../static/images/head-img.jpg"></image>
            <text class="font-16 mt-10">李某</text>
        </view>
        <view class="mt-20">
            <view class="list-row flex justify-between">
                <text class="font-14">手机号码</text>
                <text class="font-14 gray">15569218888</text>
            </view>
            <view class="list-row flex justify-between">
                <text class="font-14">会员级别</text>
                <text class="font-14 gray">普通会员</text>
            </view>
            <view class="list-row flex justify-between">
                <text class="font-14">卡号</text>
                <text class="font-14 gray">Q232</text>
            </view>
            <view class="list-row flex justify-between">
                <text class="font-14">总余额</text>
                <text class="font-14 gray">￥2,323</text>
            </view>
            <view class="list-row flex justify-between">
                <text class="font-14">赠送余额</text>
                <text class="font-14 gray">￥1,323</text>
            </view>
            <view class="list-row flex justify-between">
                <text class="font-14">剩余积分</text>
                <text class="font-14 gray">123</text>
            </view>
            <view class="list-row flex justify-between">
                <text class="font-14">所属门店</text>
                <text class="font-14 gray">东莞店</text>
            </view>
        </view>
        <button class="blue-btn btn" @click="linkTo('./selectProduct')">下一步</button>
    </view>
</template>

<script>
    export default{
        data(){
            return{}
        },
        methods:{
            linkTo(val){
                uni.navigateTo({
                    url:val
                })
            }
        }
    }
</script>

<style>
    .container{
        padding: 0 10px;
    }
    .header-img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .list-row{
        border-bottom: 1px solid #EDEAF4;
        padding: 5px 0;
        margin-top: 10px;
    }
    .btn{
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
</style>

 hive-app/pages/workbench/index.vue

@@ -42,7 +42,7 @@
        <view class="content-item mt-10">
            <text class="title">订单</text>
            <view class="flex align-center mt-10">
                <view class="flex flex-v align-center list-item">
                <view class="flex flex-v align-center list-item" @click="linkTo('./selectCustomer')">
                    <image class="content-icon" src="../../static/images/order1.png"></image>
                    <text class="font-12 mt-10 font-dark">新建订单</text>
                </view>

 hive-app/pages/workbench/orderList.vue

@@ -4,10 +4,7 @@
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <view class="input-box">
            <view class="input-icon iconfont iconsousuo"></view>
            <input placeholder="输入会员姓名;手机号;编号查询" class="input" placeholder-class="input-text"/>
        </view>
        <search-bar :placeholder=placeholder class="header-input"></search-bar>
        <view>
            <h-tabs
                class="tab"
@@ -16,9 +13,9 @@
                    color: '#abb1cc',
                    activeColor: '#518EFF',
                    underLineColor: '#518EFF',
                    underLineHeight: 4,
                    fontSize: '30px',
                    itemWidth: 80,
                    underLineHeight: 8,
                    fontSize: '30',
                    itemWidth: 100,
                    underLineWidth: 60,
                }"
            />
@@ -38,9 +35,9 @@
                        <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">$ 0.00</text>
                        <text class="font-12 mt-10">$ 8000.00</text>
                        <text class="font-12">￥ 8000.00</text>
                        <text class="font-12 mt-10">￥ 0.00</text>
                        <text class="font-12 mt-10">￥ 8000.00</text>
                    </view>
                </view>
                <view class="flex justify-end">
@@ -53,12 +50,15 @@

<script>
    import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
    import searchBar from '../../components/searchBar/index.vue';
    export default {
        components: {
            HTabs
            HTabs,
            searchBar
        },
        data() {
          return {
            placeholder:"输入会员姓名、手机号、编号查询",
            tabs:[
                {
                    state: 1,
@@ -83,24 +83,8 @@
</script>

<style>
    .input-box{
        margin: 0 15px;
        background: #F8F8F8;
        border-radius: 25px;
        display: flex;
        align-items: center;
        padding: 10px 0;
    }
    .input-icon{
        font-size: 20px;
        margin: 0 16px;
    }
    .input{
        flex: 1;
        font-size: 14px;
    }
    .input-text{
        color: #ABB1CC;
    .header-input{
        margin: 0 10px;
    }
    .tab{
        border-bottom: 1px solid #EDEAF4;

 hive-app/pages/workbench/selectCustomer.vue

@@ -1,12 +1,100 @@
<template>
    <!-- 选择客户 -->
    <view class="container">
        <search-bar :placeholder=placeholder></search-bar>
        <view class="flex justify-between" @click="linkTo('./customerInfo')">
            <view class="flex-1 mr-10">
                <view class="member-list flex align-center" v-for="(item, index) in 15">
                    <text class="first-name" :style="{background: caculateBgcolor(index)}">李</text>
                    <view class="flex-1 flex align-center justify-between member-list-con">
    <view>
		
                            <text>李广</text>
                            <text class="ml-10">152****9645</text>
                        </view>
                        <view>
                            <text class="blue">东莞店</text>
                            <text class="iconfont iconarrow-backimg gray"></text>
                        </view>
                    </view>
                </view>
            </view>
            <indexed-list></indexed-list>
        </view>
    </view>
</template>

<script>
    import searchBar from '../../components/searchBar/index.vue';
    import indexedList from '../../components/indexedList/index.vue';
    export default {
        components:{
            searchBar,
            indexedList
        },
        data() {
            return {
                placeholder:"客户姓名、手机、卡号、拼音",
                colors: ['#CCC6B4', '#C0CCB4', '#B4C2CC', '#BEB4CC', '#B4CCBE', '#B4CCCA', '#CCB4C6', '#CCB4B4'],
                filterType: 1,
            };
        },
        methods:{
            caculateBgcolor(index){
                return this.colors[index%8];
            },
            linkTo(val){
                uni.navigateTo({
                    url:val
                })
            },
        }
    }
</script>

<style>
<style scoped>
    .container{
        padding: 10px 10px 0;
    }
    .sort-wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
    }
    .sort-wrap .iconfont{
        font-size: 14px;
        padding-left: 4px;
    }
    .first-name{
        display: inline-block;
        width: 38px;
        height: 38px;
        line-height: 38px;
        margin-right: 10px;
        border-radius: 50%;
        text-align: center;
        color: #FFFFFF;
    }
    .member-list{
        font-size: 15px;
    }
    .member-list-con{
        padding: 20px 0 20px 5px;
        border-bottom: 1px solid #EDEAF4;
    }
    .quick-entry{
        position: fixed;
        bottom: 80px;
        right: 15px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border-radius: 50%;
        background: #518EFF;
        color: #FFFFFF;
        box-shadow: 4px 4px 5px #ddd;
    }
    .quick-entry .iconfont{
        font-size: 24px;
    }
</style>

 hive-app/pages/workbench/selectProduct.vue

New file
@@ -0,0 +1,140 @@
<template>
    <!-- 当前客户 -->
    <view class="container">
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <search-bar :placeholder="placeholder" class="ml-10 mr-10"></search-bar>
        <view class="list flex">
            <scroll-view class="list-left" scroll-y>
                <view v-for="(item,index) in list" class="list-left-row" @click="active(index)" :class="select==index?'active':''">
                    <text class="font-14">{{item}}</text>
                </view>
            </scroll-view>
            <scroll-view class="list-right" scroll-y>
                <view class="flex flex-v list-right-row">
                    <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
                    <text class="flex justify-start font-14 red mt-10">￥400.00</text>
                    <view class="flex align-center justify-end mt-10">
                        <button class="blue-btn-circle mr-10">-</button>
                        <text>1</text>
                        <button class="blue-btn-circle ml-10 mr-0">+</button>
                    </view>
                </view>
                <view class="flex flex-v list-right-row">
                    <text class="flex justify-start font-14">肽妍氨基酸平衡基础洁面乳</text>
                    <text class="flex justify-start font-14 red mt-10">￥400.00</text>
                    <view class="flex align-center justify-end mt-10">
                        <button class="blue-btn-circle mr-10">-</button>
                        <text>1</text>
                        <button class="blue-btn-circle ml-10 mr-0">+</button>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="shopping flex align-center justify-between">
            <view class="flex align-center">
                <view class="shopping-icon iconfont icongouwuche gray">
                    <view class="shopping-icon-num flex align-center justify-center">
                        <text class="font-10">19</text>
                    </view>
                </view>
                <text class="font-14 blue ml-10">¥110.00</text>
            </view>
            <button class="blue-btn btn mr-0" @click="linkTo('./confirmOrder')">提交订单</button>
        </view>
    </view>
</template>

<script>
    import searchBar from '../../components/searchBar/index.vue';
    export default {
        components:{
            searchBar
        },
        data(){
            return{
                placeholder:'商品名称、编号、拼音',
                list:['院装产品','美容套餐','美容客装','美容试装','头皮院装'],
                select:'0'
            }
        },
        methods:{
            linkTo(val){
                uni.navigateTo({
                    url:val
                })
            },
            active(index){
                this.select=index
            }
        }
    }
</script>

<style>
    page{
        height: 100%;
    }
    .container{
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 10px 0 0;
        box-sizing: border-box;
    }
    .list{
        flex: 1;
    }
    .list-left{
        width: 25%;
        height: 100%;
        text-align: center;
        background: #F6F6F8;
        border-radius: 4px;
    }
    .list-right{
        width: 75%;
        text-align: center;
        padding: 0px 10px;
    }
    .list-left-row{
        padding: 10px;
        color: #8c9fad;
    }
    .active{
        background: #FFFFFF;
        color: #000000;
    }
    .list-right-row{
        border: 1px solid #EDEAF4;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
        border-radius: 4px;
        padding: 10px;
    }
    .list-right-row:not(:first-child){
        margin-top: 10px;
    }
    .shopping{
        padding: 20px 10px;
    }
    .shopping-icon{
        font-size: 25px;
        position: relative;
    }
    .shopping-icon-num{
        width: 20px;
        height: 20px;
        background: #518EFF;
        border-radius: 50%;
        color: #FFFFFF;
        position: absolute;
        right: -10px;
        top: -10px;
    }
    .btn{
        border-radius: 20px;
        line-height: 30px;
        font-size: 14px;
    }
</style>

 hive-app/pages/workbench/submitSucceed.vue

New file
@@ -0,0 +1,21 @@
<template>
    <!-- 提交成功 -->
    <view class="flex flex-v align-center">
        <image class="img" mode="aspectFit" src="../../static/images/succeed.png"></image>
        <text class="font-16">提交成功请到前台付款</text>
        <button class="blue-btn btn mt-20">查看详情</button>
        <button class="white-btn btn mt-20">返回首页</button>
    </view>
</template>

<script>
</script>

<style>
    .img{
        width:200px;
    }
    .btn{
        padding: 0 40px;
    }
</style>

 hive-app/static/images/succeed.png