122 lines
2.5 KiB
Vue
122 lines
2.5 KiB
Vue
<!--
|
||
@name: DistributorDataItem
|
||
@author: kahu4
|
||
@date: 2024-01-17 15:50
|
||
@description：DistributorDataItem
|
||
@update: 2024-01-17 15:50
|
||
-->
|
||
<script setup>
|
||
|
||
import { distributorDataList } from "@/views/distribution/team/index.data";
|
||
import { toRefs } from "vue";
|
||
import moment from "moment";
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
const {data} = toRefs(props)
|
||
</script>
|
||
|
||
<template>
|
||
<view class="user-item">
|
||
<view class="userinfo-row flex flex-jc__start">
|
||
<image :src="data.avatar" />
|
||
<view class="userinfo flex flex-column flex-jc__sb">
|
||
<view class="username">
|
||
{{ data.nickname }}
|
||
<text class="tag">{{ data.isDistributor === 0 ? '客户' : '分销商' }}</text>
|
||
</view>
|
||
<view class="time">加入时间：{{ moment(data.createTime).format('YYYY-MM-DD') }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="distribution-info-row">
|
||
<view
|
||
class="info-item"
|
||
v-for="distributorData in distributorDataList"
|
||
:key="distributorData.label">
|
||
<view class="title">{{ distributorData.label }}</view>
|
||
<view class="count">{{ data[distributorData.field] || '0' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style
|
||
scoped
|
||
lang="scss">
|
||
.user-item {
|
||
margin-bottom: 16rpx;
|
||
@include usePadding(32, 32);
|
||
background: $white-color;
|
||
border-radius: 15rpx;
|
||
|
||
.userinfo-row {
|
||
padding-bottom: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
border-bottom: 1rpx solid $page-bg-color;
|
||
|
||
image {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
margin-right: 24rpx;
|
||
background: #fbfbfb;
|
||
}
|
||
|
||
.userinfo {
|
||
|
||
|
||
.username {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
|
||
.tag {
|
||
@include usePadding(24, 4);
|
||
margin-left: 12rpx;
|
||
color: $primary-color;
|
||
background: #E85A2B12;
|
||
border-radius: 50rpx;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.time {
|
||
color: $tips-color;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.distribution-info-row {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
column-gap: 16rpx;
|
||
|
||
.info-item {
|
||
@include usePadding(16, 16);
|
||
border-radius: 15rpx;
|
||
background: #f6f6f6;
|
||
color: #7A7A7A;
|
||
font-size: 24rpx;
|
||
|
||
.title {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.count {
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
</style>
|