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

views/distribution/order/component/DistributorInfoItem.vue

@@ -0,0 +1,142 @@
+<!--
+    @name: DistributorDataItem
+    @author: kahu4
+    @date: 2024-01-17 15:50
+    @description：DistributorDataItem
+    @update: 2024-01-17 15:50
+-->
+<script setup>
+
+import { distributorDataList } from "../index.data";
+import { computed, toRefs } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+})
+
+const {data} = toRefs(props)
+
+const tagType = computed(() => {
+  return ["待结算", "已结算", "已取消"][data.value.status]
+})
+const tagClass = computed(() => {
+  return ["", "success-tag", "default-tag"][data.value.status]
+})
+</script>
+
+<template>
+  <view class="user-item">
+    <view class="userinfo-row flex flex-jc__start">
+      <view class="userinfo flex flex-column flex-jc__sb">
+        <view class="username flex flex-jc__sb">
+          {{ data.userName }}
+          <text
+              class="tag default-tag"
+              :class="tagClass">
+            {{ tagType }}
+          </text>
+        </view>
+        <view class="time">订单号：{{ data.orderId }}</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 {
+      width: 100%;
+
+      .username {
+        width: 100%;
+        font-size: 28rpx;
+        font-weight: bold;
+        @include useFlex(space-between, center);
+
+        .tag {
+          @include usePadding(24, 4);
+          margin-left: 12rpx;
+          color: $primary-color;
+          background: #E85A2B12;
+          border-radius: 50rpx;
+          font-size: 24rpx;
+          font-weight: normal;
+        }
+
+        .default-tag {
+          color: #999999;
+          background: #F6F6F6;
+        }
+
+        .success-tag {
+          background: #EAF9EC !important;
+          color: #28c445 !important;
+        }
+      }
+
+      .time {
+        color: $tips-color;
+        font-size: 24rpx;
+      }
+    }
+  }
+
+  .distribution-info-row {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 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>