Skip to content

C
CFFP-HB
Commit fe95b870 by sunerhu
Options

我的团队页面提交

parent e86ec7b9
Showing with 918 additions and 1 deletions
components/myteam/myteam-table.vue 0 → 100644
<template>
<view class="concent-footer">
<view class="content-box">
<view class="content-box-title" v-for="item in datatitleList">
<span class="title">{{item}}</span>
</view>
</view>
<!-- // 一级循环 -->
<view class="content-sam-box">
<view class="" v-for="(pointItem,index) in dataList" :key="index">
<view class="" style="display: flex;">
<view class="content-box-title" v-if="pointItem.title" @click="subordinate(index)">
<span>{{pointItem.title}}</span>
</view>
<view class="content-box-title" v-if="pointItem.rank">
<span>{{pointItem.rank}}</span>
</view>
<view class="content-box-title" v-if="pointItem.name">
<span>{{pointItem.name}}</span>
</view>
<view class="content-box-title" v-if="pointItem.name">
<span>{{pointItem.name}}</span>
</view>
</view>
<!-- 二级循环 -->
<view class="" v-if="table_index == index && this.tableone == true">
<view class="" v-for="(itq, index) in dtList">
<view style="display: flex;">
<view class="content-box-title-a" @click="cktable(itq)">
<span style="color: #FFFFFF;font-weight: 400;">{{itq.name}}</span>
</view>
<view class="content-box-title">
<span>{{itq.name}}</span>
</view>
<view class="content-box-title">
<span>{{itq.name}}</span>
</view>
</view>
<!-- 三级循环 -->
<view class="" v-if="tablesubordinate == itq.id">
<view class="" v-for="(itq, index) in dtList">
<span>{{itq.name}}</span>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
dataList: {
type: Array
},
datatitleList: {
type: Array
},
tabletype: {
type: String
}
},
name: "myteam-table",
data() {
return {
table_index: '', // 第一级
tableone: false,
tablesubordinate:'', // 第二级
dtList: [{
name: '测试二级服务中心',
id: 1,
},
{
name: '第二',
id: 2,
}
]
};
},
mounted() {
console.log(this.dataList, 741741)
},
methods: {
cktable(e) {
this.tablesubordinate = e.id
},
subordinate(index) {
if(this.tabletype == 1) {
return true
}
this.tableone = this.table_index == index ? !this.tableone : true
this.table_index = index
}
}
}
</script>
<style scoped>
.content-box {
background-color: #fff;
display: flex;
font-weight: 600;
align-items: center;
justify-content: space-between;
}
.content-box-title {
padding: 5px 0;
flex: 1;
justify-content: space-between;
align-items: center;
}
.content-sam-box {
/* background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
color: #333333;
border-bottom: 1px solid #F2F2F2;; */
font-size: 13px;
}
.concent-footer {
margin: 0 5px;
}
.content-box-title-a{
padding: 5px 0;
flex: 1;
background: #3F52B7;
border-radius: 5px;
border: 1px solid #fff;
}
</style>
components/myteam/time-picker.vue 0 → 100644
<template>
<view>
<view class="timeSelectContent">
<picker mode="date" :value="queryDate" :end="maxDate" :fields="fields" @change="bindDateChange">
<view class="uni-input">{{queryDate}}</view>
</picker>
<i class="iconfont icon-youjiantou"></i>
</view>
</view>
</template>
<script>
export default {
props:{
fields:{
type: String,
}
},
name: "time-picker",
data() {
return {
queryDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
maxDate: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
};
},
mounted() {
if(this.fields == 'year'){
this.queryDate = new Date().getFullYear()
}else if (this.fields == 'month') {
this.queryDate = new Date().getFullYear() - new Date().getMonth() + 1
}else {
return
}
console.log(this.fields, 7747)
},
methods: {
bindDateChange: function(e) {
this.$emit('change', e.detail.value)
this.queryDate = e.detail.value
},
}
}
</script>
<style scoped>
.timeSelectContent{
display: flex;
align-items: center;
}
.uni-input{
color: #666666;
}
.icon-youjiantou{
color: #666666;
}
</style>
pages.json
......@@ -142,6 +142,15 @@
},
{
"path" : "pages/personalCenter/myTeam",
"style" :
{
"navigationBarTitleText": "我的团队",
"enablePullDownRefresh": false
}
},
{
"path" : "pages/myShare/myShare",
"style" :
{
......@@ -295,6 +304,24 @@
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/personalCenter/teamMembers/teamMembers",
"style" :
{
"navigationBarTitleText": "团队成员",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/personalCenter/teamPerformance/teamPerformance",
"style" :
{
"navigationBarTitleText": "团队业绩",
"enablePullDownRefresh": false
}
}
],
// "tabBar": {
// "color": "#7A7E83", // tab 上的文字默认颜色
......
pages/personalCenter/myTeam.vue 0 → 100644
<template>
<view class="container">
<view v-for="item in minorMenuLists.filter(v=>v.isShow)" :key="item.title" @click="goteam(item)" class="liBox">
<view class="infoBox">
<!-- <image :src="'/static/moduleIcon/'+item.icon+'.png'" alt="" srcset="" mode="widthFix"></image> -->
<view class="infoBoxtext">{{item.title}}</view>
</view>
<view class="iconBox">
<i class="iconfont icon-youjiantou"></i>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
minorMenuLists:[
{title:'成员信息',icon:'shareEcode',link:'',isOpen:true,isShow:true,type: 1},
{title:'团队业绩',icon:'card',link:'',isOpen:true,isShow:true,type: 2},
]
}
},
methods: {
goteam(item) {
console.log(item)
if(item.type===1){
uni.navigateTo({
url:`/pages/personalCenter/teamMembers/teamMembers`,
})
}else{
uni.navigateTo({
url:`/pages/personalCenter/teamPerformance/teamPerformance`,
})
}
},
},
onLoad() {
},
mounted() {
}
}
</script>
<style lang="scss">
.container{
height: 100%;
}
.liBox{
display: flex;
margin: 10px 30px;
padding: 8px 0;
justify-content: space-between;
border-bottom: 1px solid #F2F2F2;
}
.infoBoxtext{
width: 64px;
height: 24px;
font-size: 16px;
font-weight: 400;
border-bottom:3px transparent solid;
border-image:linear-gradient(to right,#FA882F,#FFCCCC) 0.5 10;
}
</style>
\ No newline at end of file
pages/personalCenter/personalCenter.vue
......@@ -111,7 +111,7 @@
},
{id:'04',categoryName:'团队管理',
children:[
{title:'我的团队',icon:'team',link:'',isOpen:true,isShow:true},
{title:'我的团队',icon:'team',link:'/pages/personalCenter/myTeam',isOpen:true,isShow:true},
{title:'邀请加盟',icon:'shareJoin',link:'/pages/inviteJoin/inviteJoin',isOpen:true,isShow:true}
],
}
......
pages/personalCenter/teamMembers/jurisdiction.vue 0 → 100644
<template>
<view class="content">
<view v-for="(item, index) in dataList" :key="index">
<view class="content-header">
<view class="concent-title">
<text class="concent-text">{{item.name}}</text>
</view>
</view>
<view style="text-align: right;margin: 20px;">
合计：{{item.rank}}
</view>
<view class="">
<myteam-table :datatitleList="datatitleList" :dataList="item.dataL" ></myteam-table>
<!-- <view class="table-content">
<span>辖下组织/成员</span>
<span>职级</span>
<span>合计</span>
</view>
<view class="table-content" v-for="(itemq, index) in item.dataL" :key="index">
<span>{{itemq.nameq}}</span>
<span>{{itemq.rms}}</span>
<span>{{itemq.smn}}</span>
</view>
</view> -->
</view>
</view>
</view>
</template>
<script>
import MyteamTable from '@/components/myteam/myteam-table.vue';
export default {
components:{
MyteamTable
},
data() {
return {
datatitleList:['辖下组织/成员','职级','合计'],
dataList:[
{
name: 'shirley一级服务中心',
rank: '50',
dataL:[
{name:'成员',rms:'2级别',smn:'111'},
{name:'成员',rms:'2级别',smn:'111'},
{name:'成员',rms:'2级别',smn:'111'}
]
},
{
name: '雪梨一级服务中心',
rank: '80',
dataL:[
{name:'成员',rms:'2级别',smn:'111'},
{name:'成员',rms:'2级别',smn:'111'},
{name:'成员',rms:'2级别',smn:'111'}
]
}
]
// dataList:[{
// name:'',
// total: '582',
// list:[
// name:'成员',
// rank: '1',
// total: '42',
// ],
// },{
// name:'',
// total: '105',
// list:[
// name:'成员2',
// rank: '2',
// total: '52',
// ],
// }],
}
},
}
</script>
<style lang="scss">
.content{
height: 100%;
width: 100vw;
margin-top: 20px;
}
.content-header{
display: flex;
justify-content: center;
}
.concent-title{
width: 223px;
height: 40px;
background: url('../../../static/Group 1623.png');
background-size: auto 100%;
}
.concent-text{
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
line-height: 40px;
}
.table-content{
margin: 10px 20px;
display: flex;
justify-content: space-between;
}
</style>
pages/personalCenter/teamMembers/members.vue 0 → 100644
<template>
<view class="content">
<view class="content-header">
<view class="concent-title">
<text class="concent-text">北京一级团队</text>
</view>
</view>
<view style="text-align: right;margin: 20px;">
总合计：43
</view>
<view class="table-content">
</view>
<view class="">
<myteam-table :datatitleList="datatitleList" :dataList="dataList"></myteam-table>
</view>
</view>
</template>
<script>
import MyteamTable from '@/components/myteam/myteam-table.vue';
export default {
components:{
MyteamTable
},
data() {
return {
datatitleList:['辖下组织/成员','职级','合计'],
dataList: [{
title: '所属组织1',
rank: 1,
name: 'sun',
},
{
title: '所属组织2',
rank: 1,
name: 'sun',
recommend: '很好'
},
{
title: '所属组织3',
rank: 1,
name: 'sun',
recommend: '很好'
},
]
}
},
}
</script>
<style lang="scss">
.content{
height: 100%;
width: 100vw;
margin-top: 20px;
}
.content-header{
display: flex;
justify-content: center;
}
.concent-title{
width: 223px;
height: 40px;
background: url('../../../static/Group 1623.png');
background-size: auto 100%;
}
.concent-text{
font-size: 18px;
font-weight: 500;
color: #FFFFFF;
line-height: 40px;
}
.table-content{
margin: 10px 20px;
display: flex;
justify-content: space-between;
}
</style>
pages/personalCenter/teamMembers/otherteam.vue 0 → 100644
<template>
<view class="content">
<!-- <view class="content-box">
<view class="content-box-title" v-for="item in datatitleList" :key="index">
<text class="title">{{item}}</text>
</view>
</view>
<view class="content-sam-box" v-for="pointItem in dataList">
<span class="content-box-title">{{pointItem.title}}</span>
<span class="content-box-title">{{pointItem.rank}}</span>
<span class="content-box-title">{{pointItem.name}}</span>
<span class="content-box-title">{{pointItem.recommend}}</span>
</view> -->
<view class="">
<myteam-table :datatitleList="datatitleList" :dataList="dataList" :tabletype="1"></myteam-table>
</view>
</view>
</template>
<script>
import MyteamTable from '@/components/myteam/myteam-table.vue';
export default {
components:{
MyteamTable
},
data() {
return {
datatitleList: ['所属组织', '职级', '姓名', '姓名'],
dataList: [{
title: '所属组织1',
rank: 1,
name: 'sun',
recommend: '很好'
},
{
title: '所属组织2',
rank: 1,
name: 'sun',
recommend: '很好'
},
{
title: '所属组织3',
rank: 1,
name: 'sun',
recommend: '很好'
},
]
}
},
}
</script>
<style lang="scss">
.content{
height: 100%;
width: 100vw;
margin-top: 20px;
}
.content-box {
background-color: #fff;
display: flex;
font-weight: 600;
align-items: center;
justify-content: space-between;
}
.content-box-title {
flex: 1;
}
.content-sam-box{
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
color: #333333;
border-bottom: 1px solid #F2F2F2;;
}
</style>
pages/personalCenter/teamMembers/teamMembers.vue 0 → 100644
<template>
<view class="container">
<!-- tab选项 -->
<view class="tabTitle">
<text :class="{'actived': tabType===1}" @click="switchTab(1)">直属团队</text>
<text :class="{'actived': tabType===2}" @click="switchTab(2)">所辖团队</text>
<text :class="{'actived': tabType===3}" @click="switchTab(3)">其他</text>
</view>
<!-- tab内容 -->
<view class="tabContent">
<view v-if="tabType===1">
<members></members>
</view>
<view v-if="tabType===2">
<jurisdiction></jurisdiction>
</view>
<view class="other" v-if="tabType===3">
<other-team></other-team>
</view>
</view>
</view>
</template>
<script>
import Members from './members.vue';
import OtherTeam from './otherteam.vue';
import Jurisdiction from './jurisdiction.vue';
export default {
components:{
OtherTeam,Members,Jurisdiction
},
data() {
return {
tabType: 1,
userStudyLists: [],
userId: '1'
}
},
methods: {
userStudyList() {
api.userStudyList({
userId: this.userId
}).then(res => {
if (res['success']) {
this.userStudyLists = res['data']['userStudyTimeInfos'];
}
console.log(res)
})
},
switchTab(type) {
console.log(type, 784758)
this.tabType = type;
},
dateFormat(val) {
return dataHandling.dateFormat(val);
}
},
onLoad() {
},
mounted() {
this.switchTab(1)
}
}
</script>
<style lang="scss">
.container {
position: relative;
height: 100%;
text-align: center;
margin-bottom: 20px;
.tabTitle {
color: #666666;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
// justify-content: space-around;
padding: 30rpx 60rpx 0;
text {
&.actived {
color: #333;
border-bottom: 4rpx solid #20269B;
}
}
}
.tabContent{
display: flex;
align-items: center;
justify-content: space-between;
.direct-team {
width: 223px;
height: 40px;
opacity: 1;
border: 1px solid #3F52B7;
margin: 15px auto;
text {
color: #333;
}
}
}
}
</style>
\ No newline at end of file
pages/personalCenter/teamPerformance/teamPerformance.vue 0 → 100644
<template>
<view class="content">
<view class="header">
<view class="timeSelectContent">
<time-picker v-if="fields" @change="change" :fields="fields">
</time-picker>
</view>
<view class="timeSelectContent">
<!-- <picker mode="selector" @change="bindPickerChange" :value="index" :range="multiArray" range-key="name">
<view class="uni-input">{{multiArray[index].name}}</view>
</picker> -->
<view class="uni-list-cell-left">
当前选择
</view>
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="uni-input">{{array[index]}}</view>
</picker>
</view>
<view class="timeSelectContent">
<time-picker @change="change" :fields="year">
</time-picker>
</view>
</view>
<view class="content-btn">
<view class="" v-for="(item,index) in teamList" :key="index">
<view :class="teamtype===index ? 'content-btn_under-Check' : 'content-btn_under'"
@click="ckteam(index)">
<text
:class="teamtype===index ? 'content-btn_under-text-Check' : 'content-btn_under-text'">{{item}}</text>
</view>
</view>
</view>
<view class="classtotal">
<view class="classtotal-box">
<span class="totalsingular">666</span>
<p>总单数</p>
</view>
<view class="classtotal-box">
<span class="totalsingular">￥89.25.00</span>
<p>销售额</p>
</view>
</view>
<view class="team">
<view style="display: flex;">
<view class="team-a">
</view>
<text>团队排名</text>
</view>
<view class="team-c">
<text>按单数排</text>
</view>
</view>
<view class="">
<myteam-table :datatitleList="datatitleList" :dataList="dataList"></myteam-table>
</view>
</view>
</template>
<script>
import TimePicker from '@/components/myteam/time-picker.vue';
import MyteamTable from '@/components/myteam/myteam-table.vue';
import Picker from '@/components/picker/picker.vue';
export default {
components: {
TimePicker,
MyteamTable
},
data() {
return {
fields: 'year',
datatitleList: ['排名', '所属组织', '姓名', '单数', '销售额'],
teamList: ['直属团队', '所辖团队', '其他'],
teamtype: 0,
array:['一季度','二季度','三季度','四季度'],
multiArray: [{
name: '',
id: 1
},
{
name: '二季度',
id: 2
},
{
name: '三季度',
id: 3
},
{
name: '四季度',
id: 4
}
],
dataList: [{
title: '所属组织1',
rank: 1,
name: 'sun',
recommend: '很好'
},
{
title: '所属组织2',
rank: 1,
name: 'sun',
recommend: '很好'
},
{
title: '所属组织3',
rank: 1,
name: 'sun',
recommend: '很好'
},
]
}
},
methods: {
bindPickerChange() {},
ckteam(e) {
this.teamtype = e
console.log(e, )
},
// 这个是时间组件返回的时间值
change(time) {
this.queryDate = time
},
}
}
</script>
<style lang="scss">
.content {
width: 100vw;
height: 100%;
}
.header {
display: flex;
justify-content: space-between;
margin: 0 20px;
}
.content-btn {
display: flex;
justify-content: space-between;
margin: 20px;
}
.content-btn_under-Check {
width: 100px;
height: 40px;
background: #20279B;
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
}
.content-btn_under {
width: 100px;
height: 40px;
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #20279B;
opacity: 1;
}
.content-btn_under-text-Check {
text-align: center;
width: 64px;
height: 24px;
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
line-height: 19px;
}
.content-btn_under-text {
text-align: center;
width: 64px;
height: 24px;
font-size: 16px;
font-weight: 500;
color: #20279B;
line-height: 19px;
}
.classtotal {
height: 80px;
display: flex;
justify-content: space-between;
}
.classtotal-box {
flex: 1;
padding-top: 20px;
text-align: center;
// border: 1px solid #20279B;
}
.totalsingular {
width: 35px;
height: 30px;
font-size: 20px;
font-weight: 500;
line-height: 23px;
}
.team {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 10px;
}
.team-a {
width: 2px;
margin-right: 5px;
background: #FA882F;
border-radius: 2px 2px 2px 2px;
opacity: 1;
}
.team-b {
background: #FBFBFB;
border-radius: 0px 0px 0px 0px;
}
.team-c {
width: 72px;
height: 20px;
font-size: 14px;
text-align: center;
color: #FFFFFF;
background: #20269B;
border-radius: 5px 5px 5px 5px;
opacity: 1;
}
.title {
margin: auto;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment