From 88a0ab37eb40b67b2a963faf49d19aae82b4fc66 Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Fri, 11 Dec 2020 18:16:52 +0800
Subject: [PATCH] 我的页面
---
hive-app/static/images/mine2.png | 0
hive-app/App.vue | 1
hive-app/pages/workbench/index.vue | 106 +++++----
hive-app/static/images/head-img.jpg | 0
hive-app/components/searchBar/index.vue | 29 ++
hive-app/components/.DS_Store | 0
/dev/null | 0
hive-app/static/images/mine1.png | 0
hive-app/common/styles/index.css | 35 +++
hive-app/pages/mine/index.vue | 169 +++++++++++++++
hive-app/components/popover/index.vue | 6
hive-app/components/liuyuno-tabs/liuyuno-tabs.vue | 245 ++++++++++++++++++++++
hive-app/pages/member/index.vue | 21 +
13 files changed, 562 insertions(+), 50 deletions(-)
diff --git a/hive-app/App.vue b/hive-app/App.vue
index 7146a3a..3178bb5 100644
--- a/hive-app/App.vue
+++ b/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>
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index 07e9d42..c26f11f 100644
--- a/hive-app/common/styles/index.css
+++ b/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;
}
\ No newline at end of file
diff --git a/hive-app/components/.DS_Store b/hive-app/components/.DS_Store
new file mode 100644
index 0000000..195588b
--- /dev/null
+++ b/hive-app/components/.DS_Store
Binary files differ
diff --git a/hive-app/components/liuyuno-tabs/liuyuno-tabs.vue b/hive-app/components/liuyuno-tabs/liuyuno-tabs.vue
new file mode 100644
index 0000000..3e1f2ae
--- /dev/null
+++ b/hive-app/components/liuyuno-tabs/liuyuno-tabs.vue
@@ -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>
diff --git a/hive-app/components/popover/index.vue b/hive-app/components/popover/index.vue
index d5641af..674401e 100644
--- a/hive-app/components/popover/index.vue
+++ b/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>
diff --git a/hive-app/components/searchBar/index.vue b/hive-app/components/searchBar/index.vue
new file mode 100644
index 0000000..d39e91e
--- /dev/null
+++ b/hive-app/components/searchBar/index.vue
@@ -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>
diff --git a/hive-app/pages/member/index.vue b/hive-app/pages/member/index.vue
index 4646a47..c25ef37 100644
--- a/hive-app/pages/member/index.vue
+++ b/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>
diff --git a/hive-app/pages/mine/index.vue b/hive-app/pages/mine/index.vue
index 94249a0..6ab569a 100644
--- a/hive-app/pages/mine/index.vue
+++ b/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>
diff --git a/hive-app/pages/workbench/index.vue b/hive-app/pages/workbench/index.vue
index 75dc807..69cc4f7 100644
--- a/hive-app/pages/workbench/index.vue
+++ b/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"></text>
- <text class="icon" @click.stop="isShow=!isShow"></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"></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"></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>
diff --git a/hive-app/static/images/add.png b/hive-app/static/images/add.png
deleted file mode 100644
index eba290d..0000000
--- a/hive-app/static/images/add.png
+++ /dev/null
Binary files differ
diff --git a/hive-app/static/images/head-img.jpg b/hive-app/static/images/head-img.jpg
new file mode 100644
index 0000000..1cb46d5
--- /dev/null
+++ b/hive-app/static/images/head-img.jpg
Binary files differ
diff --git a/hive-app/static/images/mine1.png b/hive-app/static/images/mine1.png
new file mode 100644
index 0000000..edec691
--- /dev/null
+++ b/hive-app/static/images/mine1.png
Binary files differ
diff --git a/hive-app/static/images/mine2.png b/hive-app/static/images/mine2.png
new file mode 100644
index 0000000..895c1e7
--- /dev/null
+++ b/hive-app/static/images/mine2.png
Binary files differ
diff --git a/hive-app/static/images/search.png b/hive-app/static/images/search.png
deleted file mode 100644
index 4c05e17..0000000
--- a/hive-app/static/images/search.png
+++ /dev/null
Binary files differ
--
Gitblit v1.9.1