dingdong-mall/pages/my/my-team-member.vue

86 lines
2.4 KiB
Vue
Raw Normal View History

2022-04-23 23:13:29 +08:00
<template>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">查看团队{{myOperaMembers.totalMembers}}</block>
</cu-custom>
<!-- 团队成员信息 -->
<view class="margin-top-sm margin-lr-sm padding bg-white name-card shadow-warp" v-for="(member, index) in myOperaMembers.members">
<!-- 个人名片 -->
<horizontal-name-card :avatarWidth="'130rpx'" :avatarHeight="'130rpx'" :avatarPubClass="'round'"
:vCard="member"></horizontal-name-card>
<!-- 实名及公告图标 -->
<view class="flex justify-end oper-bar">
<view class="text-center margin-right-sm" @click="showCertificationForm">
<view class="cuIcon-phone"></view>
</view>
</view>
<!-- 人员下辖团队统计 -->
<view class="cu-list grid no-border col-4 solid-top margin-top-sm">
<view class="cu-item">
<view class="margin-bottom-xs">客户数</view>
<view class="text-red">{{member.customerNums}}</view>
</view>
<view class="cu-item">
<view class="margin-bottom-xs">本月绑定</view>
<view class="text-red">{{member.customerBindCurMonth}}</view>
</view>
<view class="cu-item solid-left">
<view class="margin-bottom-xs">团队</view>
<view class="text-red">{{member.teamNums}}</view>
</view>
<view class="cu-item">
<view class="margin-bottom-xs">本月绑定</view>
<view class="text-red">{{member.teamBindCurMonth}}</view>
</view>
<view class="cu-item" v-for="(item, index) in member.orderAnalyse">
<view class="margin-bottom-xs">{{item.title}}</view>
<view class="text-red" v-if="item.unit === 'yuan'">
{{item.num}}
</view>
<view v-else class="text-red">
{{item.num}}{{item.unit}}
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import horizontalNameCard from '@/components/common-card/horizontal-name-card.vue';
export default {
components: {
horizontalNameCard
},
data() {
return {
myOperaMembers: {}
}
},
onLoad() {
this.loadData();
},
methods: {
async loadData() {
this.myOperaMembers = await this.$api.data('myOperaMembers');
}
}
}
</script>
<style scoped>
.name-card {
position: relative;
}
.name-card .oper-bar {
position: absolute;
top: 20rpx;
right: 20rpx;
font-size: 40rpx;
}
</style>