143 lines
2.9 KiB
Vue
143 lines
2.9 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 "../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>
|