分销模块页面接口完成
This commit is contained in:
197
pageMarket/distribution/components/fenxiao-mingxi.vue
Normal file
197
pageMarket/distribution/components/fenxiao-mingxi.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="list u-font-28">
|
||||
<view class="u-m-t-32 item" v-for="item in list" :key="item.id">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="color-666 u-font-24 u-flex">
|
||||
<text class="no-wrap"> 关联订单:</text>
|
||||
<text> {{ item.orderNo }} </text>
|
||||
</view>
|
||||
<view class="status" :class="[item.status]">
|
||||
{{ returnStatus(item.status) }}</view
|
||||
>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-16">
|
||||
<view>
|
||||
<view class="color-333 u-font-28 u-flex u-line-1">
|
||||
<text class="font-bold"> 分销员 </text>
|
||||
<text class="color-666 u-font-24 u-m-l-28">
|
||||
{{ item.nickName }}
|
||||
</text>
|
||||
<text class="color-666 u-font-24 u-m-l-10"> {{ item.phone }} </text>
|
||||
</view>
|
||||
<view class="color-333 u-font-28 u-flex u-m-t-16 u-line-1">
|
||||
<text class="font-bold"> 下级用户 </text>
|
||||
<text class="color-666 u-font-24 u-m-l-28">
|
||||
{{ item.sourceNickName }}
|
||||
</text>
|
||||
<text class="color-666 u-font-24 u-m-l-10"> {{ item.sourcePhone }} </text>
|
||||
</view>
|
||||
<view class="color-333 u-font-28 u-flex u-m-t-16 u-line-1">
|
||||
<text class="font-bold"> 创建时间 </text>
|
||||
<text class="color-666 u-font-24 u-m-l-28">
|
||||
{{ item.sourceNickName }}
|
||||
</text>
|
||||
<text class="color-666 u-font-24 u-m-l-10"> {{ item.createTime }} </text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view
|
||||
class="text-center color-main font-bold"
|
||||
:class="[ item.status == 'refund' ? 'color-red' : '']"
|
||||
>{{ 0 }}</view
|
||||
>
|
||||
<view class="color-66 u-font-24">{{
|
||||
item.level == 1 ? "直接分成" : "间接分成"
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-30">
|
||||
<up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
watch,
|
||||
toRaw,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
inject,
|
||||
} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
isEnd: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const statusMap = {
|
||||
success: "已入账",
|
||||
refund: "已退款",
|
||||
pending: "待入账",
|
||||
};
|
||||
function returnStatus(status) {
|
||||
return status in statusMap ? statusMap[status] : status;
|
||||
}
|
||||
|
||||
const $actions = [
|
||||
{
|
||||
name: "更改分销组",
|
||||
value: "change-group",
|
||||
},
|
||||
{
|
||||
name: "重置分销组",
|
||||
value: "reset-group",
|
||||
},
|
||||
{
|
||||
name: "恢复分销员",
|
||||
value: "back-fenxiao",
|
||||
},
|
||||
{
|
||||
name: "取消分销员",
|
||||
value: "cancel-fenxiao",
|
||||
},
|
||||
];
|
||||
const actions = ref($actions);
|
||||
|
||||
const emits = defineEmits(["refresh"]);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.list {
|
||||
padding: 0 30rpx;
|
||||
|
||||
.item {
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 14rpx;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
border-radius: 12rpx;
|
||||
padding: 8rpx 22rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
&.success {
|
||||
background-color: #edfff0;
|
||||
color: #5bbc6d;
|
||||
}
|
||||
|
||||
&.end {
|
||||
background-color: #f7f7f7;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.my-btn {
|
||||
font-size: 28rpx;
|
||||
line-height: 36rpx;
|
||||
padding: 8rpx 32rpx;
|
||||
border-radius: 12rpx;
|
||||
margin: 0;
|
||||
}
|
||||
.money {
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx 28rpx;
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
height: 56rpx;
|
||||
padding: 8rpx 28rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid $my-main-color;
|
||||
color: $my-main-color;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: fixed;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 30rpx);
|
||||
left: 30rpx;
|
||||
right: 30rpx;
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
padding: 8rpx 18rpx;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 0 0 8rpx 8rpx;
|
||||
border: 1px solid transparent;
|
||||
&.success {
|
||||
color: rgba(123, 209, 54, 1);
|
||||
border-color: rgba(123, 209, 54, 1);
|
||||
background-color: rgba(123, 209, 54, 0.12);
|
||||
}
|
||||
&.refund {
|
||||
border-color: rgba(249, 50, 40, 1);
|
||||
background-color: rgba(209, 64, 54, 0.12);
|
||||
color: rgba(255, 47, 47, 1);
|
||||
}
|
||||
&.pending {
|
||||
border-color: rgba(153, 153, 153, 1);
|
||||
background-color: rgba(153, 153, 153, 0.12);
|
||||
color: rgba(153, 153, 153, 1);
|
||||
}
|
||||
}
|
||||
.color-red {
|
||||
color: #ff2f2f;
|
||||
}
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user