新增营销系统、分销系统、会员功能、门店、提现功能

views/distribution/team/component/DistributorInfoItem.vue

@@ -0,0 +1,121 @@
+<!--
+    @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>