我的页面

li-guang

2020-12-11 88a0ab37eb40b67b2a963faf49d19aae82b4fc66

我的页面

 hive-app/App.vue

@@ -15,4 +15,5 @@
<style>
    /*每个页面公共css */
@import url("./common/styles/index");
@import url("//at.alicdn.com/t/font_2263696_mnf8362pruj.css");
</style>

 hive-app/common/styles/index.css

@@ -62,8 +62,14 @@
.font-14{
    font-size: 14px;
}
.font-15{
    font-size: 15px;
}
.font-16{
    font-size: 16px;
}
.font-17{
    font-size: 17px;
}
.font-18{
    font-size: 18px;
@@ -79,8 +85,29 @@
.white{
    color: #FFFFFF;
}
.font-gray{
.gray{
    color: #999999;
}
.dark-gray{
    color: #666666;
}
.red{
    color:#DE5A5A;
}
.green{
    color:#1FB713;
}
.purple{
    color: #5A73DE;
}
.blueness{
    color: #58C4C0;
}
.orange{
    color: #E89D44;
}
.yellow{
    color: #E6E15F;
}
.font-dark{
    color: #111111;
@@ -110,4 +137,10 @@
}
.block{
    display: block;
}
.center{
    text-align: center;
}
.right{
    text-align: end;
}

 hive-app/components/.DS_Store

Binary files differ

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

New file
@@ -0,0 +1,245 @@
<template>
    <view class="_tab-box" :style="{fontSize: defaultConfig.fontSize + 'rpx', color: defaultConfig.color}">
        <scroll-view id="_scroll" :scroll-x="true" class="scroll-view-h" scroll-with-animation :scroll-left="slider.scrollLeft">
            <view class="_scroll-content">
                <view class="_tab-item-box" :class="[defaultConfig.itemWidth ? '_clamp' : '_flex']">
                    <block v-for="(item, index) in tabList" :key="index" >
                        <view 
                            class="_item"
                            :id="'_tab_'+index"
                            :class="{ '_active': tagIndex === index }"
                            :style="{color: tagIndex == index ? defaultConfig.activeColor : defaultConfig.color, 'width': defaultConfig.itemWidth ? defaultConfig.itemWidth + 'rpx' : ''}"
                            @click="tabClick(index)">{{ item[defaultConfig.key] || item }}</view>
                    </block>
                </view>
                <view class="_underline" :style="{
                        transform: 'translateX(' + slider.left + 'px)',
                        width: slider.width + 'px',
                        height: defaultConfig.underLineHeight + 'rpx',
                        backgroundColor: defaultConfig.underLineColor,
                    }" />
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: 'liuyuno-tabs',
        props: {
            tabData: {
                type: Array,
                default: () => []
            },
            activeIndex: {
                type: Number,
                default: 0
            },
            config: {
                type: Object,
                default:() => {
                    return {}
                }
            },
        },
        data() {
            return {
                tabList: [],
                tagIndex: 0,
                slider: {
                    left: 0,
                    width: 0,
                    scrollLeft: 0
                },
                scorll: {},
                defaultConfig: {
                    // 要显示的key
                    key: 'name',
                    // 字体大小 rpx
                    fontSize: 26,
                    // 字体颜色
                    color: '#313131',
                    // 激活字体颜色
                    activeColor: '#e54d42',
                    // item宽度 0为自动
                    itemWidth: 0,
                    // 下划线左右边距，文字宽度加边距 rpx
                    underLinePadding: 10,
                    // 下划线宽度 rpx  注意：设置了此值 underLinePadding 失效
                    underLineWidth: 0,
                    // 下划线高度 rpx
                    underLineHeight: 4,
                    // 下划线颜色
                    underLineHeight: '#e54d42',
                },
            };
        },
        watch: {
            tabData(value) {
                this.updateData();
                setTimeout(() => {
                    this.updateTabWidth();
                }, 0);
            },
            config(value) {
                this.updateConfig();
            },
        },
        mounted() {
            this.updateConfig();
            this.updateData();
            this.tagIndex = this.activeIndex;

            this.$nextTick(() => {
                this.calcScrollPosition();
            })
        },
        methods: {
            updateData() {
                let data = [];
                if (typeof(this.tabData[0])=='string') {
                    this.tabData.forEach((item, index) => {
                        data.push({
                            name: item,
                        })
                    });
                    this.defaultConfig.key = 'name';
                } else {
                    data = JSON.parse(JSON.stringify(this.tabData));
                }
				
                this.tabList = data;
            },
            updateConfig() {
                this.defaultConfig = Object.assign(this.defaultConfig, this.config);
            },
            calcScrollPosition() {
				
                const query = uni.createSelectorQuery().in(this);
				
                query.select('#_scroll').boundingClientRect((res) => {
                    this.scorll = res;
                    this.updateTabWidth();
                }).exec();
            },
            updateTabWidth(index = 0) {
                let data = this.tabList;
				
                if (data.length == 0) return false;
				
                const query = uni.createSelectorQuery().in(this);
				
                query.select('#_tab_' + index).boundingClientRect((res) => {

                    data[index]._slider = {
                        width: res.width,
                        left: res.left,
                        scrollLeft: res.left - (data[index - 1] ? data[index - 1]._slider.width : 0),
                    };
					
                    if (this.tagIndex == index) {
                        this.tabToIndex(this.tagIndex);
                    }

                    index++;
                    if (data.length > index) {
                        this.updateTabWidth(index);
                    }
                }).exec();
            },
	
            tabToIndex(index) {

                let _slider = this.tabList[index]._slider;
				
                let width = uni.upx2px(this.defaultConfig.underLineWidth);
				
                if (!width) {
                    if (this.defaultConfig.itemWidth) {
                        width = uni.upx2px(this.defaultConfig.itemWidth);
                    } else {
                        width = this.tabList[index][this.defaultConfig.key].length * uni.upx2px(this.defaultConfig.fontSize);
                    }
                    width += uni.upx2px(this.defaultConfig.underLinePadding) * 2;
                }
				
                let scorll_left = this.scorll.left || 0;
				
                this.slider = {
                    left: _slider.left - scorll_left + (_slider.width - width) / 2,
                    width: width,
                    scrollLeft: _slider.scrollLeft - scorll_left,
                }
            },
			
            tabClick(index) {
                this.tagIndex = index;
                this.tabToIndex(index);
                this.$emit('tabClick', index);
            }
        }
    }
</script>

<style lang="scss" scoped>
    ._tab-box {
        width: 100%;
        display: flex;
        font-size: 26rpx;
        position: relative;
        height: 90rpx;
        line-height: 90rpx;
        z-index: 10;
        .scroll-view-h{
            white-space:nowrap;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            ._scroll-content {
                width: 100%;
                height: 100%;
                position:relative;
				
                ._tab-item-box {
                    height: 100%;
                    &._flex {
                        display: flex;
                        ._item {
                            flex: 1;
                        }
                    }
                    &._clamp {
                        ._item {
                            overflow:hidden;
                            text-overflow:ellipsis;
                            white-space:nowrap;
                        }
                    }
					
					
                    ._item { 
                        height: 100%;
                        display: inline-block;
                        text-align: center;
                        padding: 0 30rpx;
                        position: relative;
                        text-align: center;
						
                        color: #333;
                        &._active {
                            color: #e54d42;
                        }
                    }
                }
                ._underline {
                    height: 4rpx;
                    background-color: #e54d42;
                    border-radius: 6rpx;
                    transition: .5s;
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }
</style>

 hive-app/components/popover/index.vue

@@ -1,5 +1,5 @@
<template>
    <view>
    <view class="content">
        <slot></slot>
    </view>
</template>
@@ -16,4 +16,8 @@
</script>

<style>
    .content{
        background: #4c4c4c;
        border-radius: 4px;
    }
</style>

 hive-app/components/searchBar/index.vue

New file
@@ -0,0 +1,29 @@
<template>
    <view class="search-group">
        <text></text>
        <input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" placeholder-class="placeholder" />
    </view>
</template>

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

<style>
    .search-group{
        background: #F8F8F8;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 8px 15px;
        border-radius: 30px;
    }
    .search-group input{
        font-size: 14px;
    }
</style>

 hive-app/pages/member/index.vue

@@ -1,9 +1,28 @@
<template>
    <!-- 会员 -->
    <view class="container">
        <search-bar></search-bar>
    </view>
</template>

<script>
    import searchBar from '../../components/searchBar/index.vue';
    export default {
        components:{
            searchBar
        },
        data() {
            return {
				
            };
        },
        methods:{
			
        }
    }
</script>

<style>
    .container{
        padding: 0 10px;
    }
</style>

 hive-app/pages/mine/index.vue

@@ -1,9 +1,178 @@
<template>
    <!-- 我的 -->
    <view class="container">
        <!-- #ifndef H5 -->
        <view class="status_bar"></view>
        <!-- #endif -->
        <view class="header">
            <view class="icon white iconfont iconshezhi right"></view>
            <view class="flex align-center">
                <image class="header-img ml-15" src="../../static/images/head-img.jpg"></image>
                <view class="flex flex-v ml-20">
                    <view>
                        <text class="font-18 white mr-5">222是个帅哥</text>
                        <text class="white icon iconfont iconxiugai"></text>
                    </view>
                    <view class="flex mt-10">
                        <view class="mr-20">
                            <text class="white mr-5 font-14">职位:</text>
                            <text class="white font-14">靓仔</text>
                        </view>
                        <view>
                            <text class="white mr-5 font-14">工号:</text>
                            <text class="white font-14">9527</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		
        <view class="content">
            <view class="flex align-center performance">
                <image class="title-img mr-10" src="../../static/images/mine1.png"></image>
                <text class="font-18">我的业绩</text>
            </view>
            <view class="tab-box">
                <liuyuno-tabs 
                    class="tab"
                    :tabData="tabs" 
                    :config="{
                        color: '#abb1cc',
                        activeColor: '#518EFF',
                        underLineColor: '#518EFF',
                        underLineHeight: 5,
                        fontSize: 30,
                        itemWidth: 70,
                        underLineWidth: 50,
                    }"
                />
                <view class="performance-content">
                    <view class="flex justify-around">
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 red">600.00</text>
                            <text class="font-14 mt-5">总现金业绩</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 green">600.00</text>
                            <text class="font-14 mt-5">售卡业绩</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 purple">600.00</text>
                            <text class="font-14 mt-5">项目业绩</text>
                        </view>
                    </view>
                    <view class="flex justify-around mt-20">
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 blueness">600.00</text>
                            <text class="font-14 mt-5">产品业绩</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 orange">600.00</text>
                            <text class="font-14 mt-5">余额划扣业绩</text>
                        </view>
                        <view class="flex flex-v align-center performance-item">
                            <text class="font-16 yellow">600.00</text>
                            <text class="font-14 mt-5">服务提成</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="flex align-center justify-between repository mt-20">
                <view class="flex align-center">
                    <image class="title-img mr-10" src="../../static/images/mine2.png"></image>
                    <text>知识库</text>
                </view>
                <text class="icon iconfont iconarrow-backimg gray"></text>
            </view>
        </view>
    </view>
</template>

<script>
    import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
    export default {
        components: {
            liuyunoTabs
        },
        data() {
          return {
            tabs:[
                {
                    state: 1,
                    name: '今日'
                },
                {
                    state: 2,
                    name: '昨日'
                },
                {
                    state: 3,
                    name: '本月'
                },
                {
                    state: 4,
                    name: '上月'
                },
            ],
          }  
        },
        methods: {

        }
    }
</script>

<style>
    .status_bar{
        background: #518EFF;
        color: #FFFFFF;
    }
    .header{
        height: 100px;
        background: #518EFF;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 15px;
    }
    .icon {
        font-size: 18px;
        font-family: texticons;
    }
    .header-img{
        width: 64px;
        height: 64px;
        border-radius: 50%;
    }
    .content{
        padding: 0 10px;
    }
    .performance{
        padding: 0 3px;
        margin: 15px 0px 10px;
    }
    .title-img{
        width: 18px;
        height: 18px;
    }
    .tab-box{
        border: 1px solid #EDEAF4;
        border-radius: 4px;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
        padding: 10px;
    }
    .tab{
        border-bottom: 1px solid #EDEAF4;
    }
    .performance-content{
        padding: 10px 0;
    }
    .performance-item{
        width: 33.3%;
    }
    .repository{
        border: 1px solid #EDEAF4;
        border-radius: 4px;
        padding: 10px 3px;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
    }
</style>

 hive-app/pages/workbench/index.vue

@@ -5,42 +5,43 @@
        <view class="status_bar"></view>
        <!-- #endif -->
        <view class="header flex align-center justify-between">
            <text class="font-18">HIVE</text>
            <text class="font-18 dark-gray">HIVE</text>
            <view>
                <text class="icon mr-15">&#xe6d2;</text>
                <text class="icon" @click.stop="isShow=!isShow">&#xe600;</text>
                <text class="icon gray iconfont iconsousuo mr-15"></text>
                <text class="icon gray iconfont iconjiahao" @click.stop="isShow=!isShow"></text>
            </view>
        </view>
        <popover class="popup-content" v-show="isShow">
            <view>
                <text class="icon mr-5">&#xe600;</text>
                <text>新增会员</text>
            <view class="triangle"></view>
            <view class="popup-item flex align-center">
                <text class="icon white iconfont iconjiahao mr-5"></text>
                <text class="white font-14 popup-content-text">新增会员</text>
            </view>
            <view class="mt-10">
                <text class="icon mr-5">&#xe60f;</text>
                <text>扫一扫</text>
            <view class="popup-item flex align-center">
                <text class="icon white iconfont iconsaomiao mr-5"></text>
                <text class="white font-14 popup-content-text">扫一扫</text>
            </view>
        </popover>
        <view class="condition flex justify-between mt-15">
        <view class="condition flex justify-between">
            <view class="flex flex-v align-center">
                <text class="font-18 white">0</text>
                <text class="font-16 white">预约</text>
                <text class="font-17 white">0</text>
                <text class="font-15 white mt-10">预约</text>
            </view>
            <view class="flex flex-v align-center">
                <text class="font-18 white">2</text>
                <text class="font-16 white">进行中</text>
                <text class="font-17 white">2</text>
                <text class="font-15 white mt-10">进行中</text>
            </view>
            <view class="flex flex-v align-center">
                <text class="font-18 white">5</text>
                <text class="font-16 white">代付款</text>
                <text class="font-17 white">5</text>
                <text class="font-15 white mt-10">代付款</text>
            </view>
            <view class="flex flex-v align-center">
                <text class="font-18 white">15</text>
                <text class="font-16 white">欠款</text>
                <text class="font-17 white">15</text>
                <text class="font-15 white mt-10">欠款</text>
            </view>
        </view>
        <view class="content-item mt-10">
            <text class="font-14 font-gray">订单</text>
            <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/order1.png"></image>
@@ -61,7 +62,7 @@
            </view>
        </view>
        <view class="content-item mt-10">
            <text class="font-14 font-gray">项目/服务</text>
            <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/sever1.png"></image>
@@ -82,7 +83,7 @@
            </view>
        </view>
        <view class="content-item mt-10">
            <text class="font-14 font-gray">代办</text>
            <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/commission1.png"></image>
@@ -99,7 +100,7 @@
            </view>
        </view>
        <view class="content-item mt-10">
            <text class="font-14 font-gray">仓库</text>
            <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/warehouse1.png"></image>
@@ -112,7 +113,7 @@
            </view>
        </view>
        <view class="content-item">
            <text class="font-14 font-gray">报表</text>
            <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>
@@ -131,7 +132,7 @@
                    <text class="font-12 mt-10 font-dark">产品报表</text>
                </view>
            </view>
            <view class="flex align-center mt-10">
            <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>
@@ -170,53 +171,64 @@
</script>

<style>
    @font-face {
        font-family: texticons;
        font-weight: normal;
        font-style: normal;
        src: url('//at.alicdn.com/t/font_2263696_lohq5qfkgkq.ttf') format('truetype');
    }
    .icon {
        width: 20px;
        height: 20px;
        color: #000000;
        font-size: 18px;
        text-align: center;
        font-family: texticons;
    }
    page{
        background: #F8F8F8;
    }
    .container{
        padding: 0 10px;
    }
    .header{
        padding: 10px 5px;
        padding: 12px 5px;
    }
    .condition{
        background-color: #518EFF;
        padding: 16px 30px;
        padding: 15px 30px;
        border-radius: 4px;
    }
    .content-item{
        background: #FFFFFF;
        padding:16px;
        padding: 15px 0;
        border-radius: 4px;
        margin: 10px 0;
        box-shadow:0 6px 6px rgba(237,234,244,0.5);
    }
    .title{
        font-size: 14px;
        color: #666666;
        padding-left: 15px;
        padding-bottom: 5px;
    }
    .content-icon{
        width: 32px;
        height: 32px;
        width: 30px;
        height: 30px;
    }
    .list-item{
        width: 25%;
    }
    .popup-content{
        background: #FFFFFF;
        border: 1px solid #ABB1CC;
        padding: 10px;
        border-radius: 4px;
        position: absolute;
        right: 10px;
        top: 35px;
        right: 9px;
        top: 48px;
        padding-left: 10px;
    }
    .triangle{
        width: 0;
        height: 0;
        border-width: 0 10px 10px;
        border-style: solid;
        border-color: transparent transparent #4c4c4c;
        position: absolute;
        top:-8px;
        right: 5px;
    }
    .popup-content-text{
        width: 100%;
        border-bottom: 1px solid gray;
        padding: 10px 10px 10px 0;
    }
    .popup-content .popup-item:nth-last-of-type(1) .popup-content-text{
        border-bottom: 0;
    }
</style>

 hive-app/static/images/add.png

Binary files differ

 hive-app/static/images/head-img.jpg

 hive-app/static/images/mine1.png

 hive-app/static/images/mine2.png

 hive-app/static/images/search.png

Binary files differ