项目初始化
This commit is contained in:
jerry
249
pages/commission/commission-ranking.vue
Normal file
249
pages/commission/commission-ranking.vue
Normal file
File diff suppressed because one or more lines are too long
125
pages/commission/components/account-info.vue
Normal file
125
pages/commission/components/account-info.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<!-- 分销账户：展示基本统计信息 -->
|
||||
<template>
|
||||
<view class="account-card">
|
||||
<view class="account-card-box">
|
||||
<view class="ss-flex ss-row-between card-box-header">
|
||||
<view class="ss-flex">
|
||||
<view class="header-title ss-m-r-16">账户信息</view>
|
||||
<button
|
||||
class="ss-reset-button look-btn ss-flex"
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
>
|
||||
<uni-icons
|
||||
:type="state.showMoney ? 'eye-filled' : 'eye-slash-filled'"
|
||||
color="#A57A55"
|
||||
size="20"
|
||||
/>
|
||||
</button>
|
||||
</view>
|
||||
<view class="ss-flex" @tap="sheep.$router.go('/pages/commission/wallet')">
|
||||
<view class="header-title ss-m-r-4">查看明细</view>
|
||||
<text class="cicon-play-arrow" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 收益 -->
|
||||
<view class="card-content ss-flex">
|
||||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||||
<view class="item-title">当前佣金(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||||
<view class="item-title">昨天的佣金(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? fen2yuan(state.summary.yesterdayPrice || 0) : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-flex-1 ss-flex-col ss-col-center">
|
||||
<view class="item-title">累计已提(元)</view>
|
||||
<view class="item-detail">
|
||||
{{ state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '***' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive, onMounted } from 'vue';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
summary: {},
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
let { code, data } = await BrokerageApi.getBrokerageUserSummary();
|
||||
if (code === 0) {
|
||||
state.summary = data || {}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.account-card {
|
||||
width: 694rpx;
|
||||
margin: 0 auto;
|
||||
padding: 2rpx;
|
||||
background: linear-gradient(180deg, #ffffff 0.88%, #fff9ec 100%);
|
||||
border-radius: 12rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
|
||||
.account-card-box {
|
||||
background: #ffefd6;
|
||||
|
||||
.card-box-header {
|
||||
padding: 0 30rpx;
|
||||
height: 72rpx;
|
||||
box-shadow: 0px 2px 6px #f2debe;
|
||||
|
||||
.header-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #a17545;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.cicon-play-arrow {
|
||||
color: #a17545;
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
height: 190rpx;
|
||||
background: #fdfae9;
|
||||
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #cba67e;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.item-detail {
|
||||
font-size: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
160
pages/commission/components/account-type-select.vue
Normal file
160
pages/commission/components/account-type-select.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<!-- 提现方式的 select 组件 -->
|
||||
<template>
|
||||
<su-popup :show="show" class="ss-checkout-counter-wrap" @close="hideModal">
|
||||
<view class="ss-modal-box bg-white ss-flex-col">
|
||||
<view class="modal-header ss-flex-col ss-col-left">
|
||||
<text class="modal-title ss-m-b-20">选择提现方式</text>
|
||||
</view>
|
||||
<view class="modal-content ss-flex-1 ss-p-b-100">
|
||||
<radio-group @change="onChange">
|
||||
<label
|
||||
class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
|
||||
v-for="(item, index) in typeList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="container-icon ss-flex ss-m-r-20">
|
||||
<image :src="sheep.$url.static(item.icon)" />
|
||||
</view>
|
||||
<view class="ss-flex-1">{{ item.title }}</view>
|
||||
<radio
|
||||
:value="item.value"
|
||||
color="var(--ui-BG-Main)"
|
||||
:checked="item.value === state.currentValue"
|
||||
:disabled="!methods.includes(parseInt(item.value))"
|
||||
/>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="modal-footer ss-flex ss-row-center ss-col-center">
|
||||
<button class="ss-reset-button save-btn" @tap="onConfirm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
methods: { // 开启的提现方式
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(['update:modelValue', 'change', 'close']);
|
||||
const state = reactive({
|
||||
currentValue: '',
|
||||
});
|
||||
|
||||
const typeList = [
|
||||
{
|
||||
icon: 'https://file.sheepjs.com/static/img/shop/pay/wallet.png', // TODO 芋艿：后续给个 icon
|
||||
title: '钱包余额',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/bank.png',
|
||||
title: '银行卡转账',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/wechat.png',
|
||||
title: '微信零钱',
|
||||
value: '3',
|
||||
},
|
||||
{
|
||||
icon: '/static/img/shop/pay/alipay.png',
|
||||
title: '支付宝账户',
|
||||
value: '4',
|
||||
}
|
||||
];
|
||||
|
||||
function onChange(e) {
|
||||
state.currentValue = e.detail.value;
|
||||
}
|
||||
|
||||
const onConfirm = async () => {
|
||||
if (state.currentValue === '') {
|
||||
sheep.$helper.toast('请选择提现方式');
|
||||
return;
|
||||
}
|
||||
// 赋值
|
||||
emits('update:modelValue', {
|
||||
type: state.currentValue
|
||||
});
|
||||
// 关闭弹窗
|
||||
emits('close');
|
||||
};
|
||||
|
||||
const hideModal = () => {
|
||||
emits('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ss-modal-box {
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
max-height: 1000rpx;
|
||||
|
||||
.modal-header {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 40rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 20rpx;
|
||||
font-size: 46rpx;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
overflow-y: auto;
|
||||
|
||||
.container-list {
|
||||
height: 96rpx;
|
||||
border-bottom: 2rpx solid rgba(#dfdfdf, 0.5);
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
|
||||
.container-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
height: 120rpx;
|
||||
|
||||
.save-btn {
|
||||
width: 710rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
101
pages/commission/components/commission-auth.vue
Normal file
101
pages/commission/components/commission-auth.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<!-- 分销权限弹窗：再没有权限时，进行提示 -->
|
||||
<template>
|
||||
<su-popup
|
||||
:show="state.show"
|
||||
type="center"
|
||||
round="10"
|
||||
@close="state.show = false"
|
||||
:isMaskClick="false"
|
||||
maskBackgroundColor="rgba(0, 0, 0, 0.7)"
|
||||
>
|
||||
<view class="notice-box">
|
||||
<view class="img-wrap">
|
||||
<image
|
||||
class="notice-img"
|
||||
:src="sheep.$url.static('/static/img/shop/commission/forbidden.png')"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="notice-title"> 抱歉！您没有分销权限 </view>
|
||||
<view class="notice-detail"> 该功能暂不可用 </view>
|
||||
<button
|
||||
class="ss-reset-button notice-btn ui-Shadow-Main ui-BG-Main-Gradient"
|
||||
@tap="sheep.$router.back()"
|
||||
>
|
||||
知道了
|
||||
</button>
|
||||
<button class="ss-reset-button back-btn" @tap="sheep.$router.back()"> 返回 </button>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
|
||||
const state = reactive({
|
||||
show: false,
|
||||
});
|
||||
|
||||
onShow(async () => {
|
||||
// 读取是否有分销权限
|
||||
const { code, data } = await BrokerageApi.getBrokerageUser();
|
||||
if (code === 0 && !data?.brokerageEnabled) {
|
||||
state.show = true;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notice-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
width: 612rpx;
|
||||
min-height: 658rpx;
|
||||
background: #ffffff;
|
||||
padding: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
.img-wrap {
|
||||
margin-bottom: 50rpx;
|
||||
.notice-img {
|
||||
width: 180rpx;
|
||||
height: 170rpx;
|
||||
}
|
||||
}
|
||||
.notice-title {
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
.notice-detail {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 36rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.notice-btn {
|
||||
width: 492rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.back-btn {
|
||||
width: 492rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main-gradient);
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
112
pages/commission/components/commission-info.vue
Normal file
112
pages/commission/components/commission-info.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<!-- 分销商信息 -->
|
||||
<template>
|
||||
<!-- 用户资料 -->
|
||||
<view class="user-card ss-flex ss-col-bottom">
|
||||
<view class="card-top ss-flex ss-row-between">
|
||||
<view class="ss-flex">
|
||||
<view class="head-img-box">
|
||||
<image class="head-img" :src="sheep.$url.cdn(userInfo.avatar)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="ss-flex-col">
|
||||
<view class="user-name">{{ userInfo.nickname }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { computed, reactive } from 'vue';
|
||||
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const headerBg = sheep.$url.css('/static/img/shop/commission/background.png');
|
||||
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 用户资料卡片
|
||||
.user-card {
|
||||
width: 690rpx;
|
||||
margin: -88rpx 20rpx 0 20rpx;
|
||||
padding-top: 138rpx;
|
||||
background: v-bind(headerBg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.head-img-box {
|
||||
margin-right: 20rpx;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
background: #fce0ad;
|
||||
|
||||
.head-img {
|
||||
width: 92rpx;
|
||||
height: 92rpx;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.card-top {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 34rpx;
|
||||
|
||||
.user-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #692e04;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 84rpx;
|
||||
height: 42rpx;
|
||||
border: 2rpx solid rgba(#ffffff, 0.33);
|
||||
border-radius: 21rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.look-btn {
|
||||
color: #fff;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
.tag-box {
|
||||
background: #ff6000;
|
||||
border-radius: 18rpx;
|
||||
line-height: 36rpx;
|
||||
|
||||
.tag-img {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
margin-left: -2rpx;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 24rpx;
|
||||
padding: 0 10rpx;
|
||||
font-weight: 500;
|
||||
line-height: 36rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
181
pages/commission/components/commission-log.vue
Normal file
181
pages/commission/components/commission-log.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<!-- 分销首页：明细列表 -->
|
||||
<template>
|
||||
<view class="distribution-log-wrap">
|
||||
<view class="header-box">
|
||||
<image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title2.png')" />
|
||||
<view class="ss-flex header-title">
|
||||
<view class="title">实时动态</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
@scrolltolower="loadmore"
|
||||
class="scroll-box log-scroll"
|
||||
scroll-with-animation="true"
|
||||
>
|
||||
<view v-if="state.pagination.list">
|
||||
<view
|
||||
class="log-item-box ss-flex ss-row-between"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="log-item-wrap">
|
||||
<view class="log-item ss-flex ss-ellipsis-1 ss-col-center">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<image
|
||||
class="log-img"
|
||||
:src="sheep.$url.static('/static/img/shop/avatar/notice.png')"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="log-text ss-ellipsis-1">
|
||||
{{ item.title }} {{ fen2yuan(item.price) }} 元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="log-time">{{ dayjs(item.createTime).fromNow() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
color="#333333"
|
||||
@tap="loadmore"
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash-es';
|
||||
import dayjs from 'dayjs';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../../sheep/hooks/useGoods';
|
||||
|
||||
const state = reactive({
|
||||
loadStatus: '',
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
});
|
||||
|
||||
async function getLog() {
|
||||
state.loadStatus = 'loading';
|
||||
const { code, data } = await BrokerageApi.getBrokerageRecordPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
getLog();
|
||||
|
||||
// 加载更多
|
||||
function loadmore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getLog();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-log-wrap {
|
||||
width: 690rpx;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
|
||||
.header-box {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
position: relative;
|
||||
|
||||
.header-bg {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.log-scroll {
|
||||
height: 600rpx;
|
||||
background: #fdfae9;
|
||||
padding: 10rpx 20rpx 0;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
|
||||
.log-item-box {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.log-time {
|
||||
// margin-left: 30rpx;
|
||||
text-align: right;
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 400;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
.loadmore-wrap {
|
||||
// line-height: 80rpx;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
// background: rgba(#ffffff, 0.2);
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx 20rpx 6rpx 12rpx;
|
||||
|
||||
.log-img {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.log-text {
|
||||
max-width: 480rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
137
pages/commission/components/commission-menu.vue
Normal file
137
pages/commission/components/commission-menu.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<!-- 分销：商菜单栏 -->
|
||||
<template>
|
||||
<view class="menu-box ss-flex-col">
|
||||
<view class="header-box">
|
||||
<image class="header-bg" :src="sheep.$url.static('/static/img/shop/commission/title1.png')" />
|
||||
<view class="ss-flex header-title">
|
||||
<view class="title">功能专区</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="menu-list ss-flex ss-flex-wrap">
|
||||
<view v-for="(item, index) in state.menuList" :key="index" class="item-box ss-flex-col ss-col-center"
|
||||
@tap="sheep.$router.go(item.path)">
|
||||
<image class="menu-icon ss-m-b-10" :src="sheep.$url.static(item.img)" mode="aspectFill"></image>
|
||||
<view>{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
menuList: [{
|
||||
img: '/static/img/shop/commission/commission_icon1.png',
|
||||
title: '我的团队',
|
||||
path: '/pages/commission/team',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon2.png',
|
||||
title: '佣金明细',
|
||||
path: '/pages/commission/wallet',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon3.png',
|
||||
title: '分销订单',
|
||||
path: '/pages/commission/order',
|
||||
},
|
||||
/* {
|
||||
img: '/static/img/shop/commission/commission_icon4.png',
|
||||
title: '推广商品',
|
||||
path: '/pages/commission/goods',
|
||||
}, */
|
||||
// {
|
||||
// img: '/static/img/shop/commission/commission_icon5.png',
|
||||
// title: '我的资料',
|
||||
// path: '/pages/commission/apply',
|
||||
// isAgentFrom: true,
|
||||
// },
|
||||
// todo @芋艿：邀请海报需要登录后的个人数据
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon7.png',
|
||||
title: '邀请海报',
|
||||
path: 'action:showShareModal',
|
||||
},
|
||||
/* {
|
||||
img: '/static/img/shop/commission/commission_icon7.png',
|
||||
title: '推广排行',
|
||||
path: '/pages/commission/promoter',
|
||||
},
|
||||
{
|
||||
img: '/static/img/shop/commission/commission_icon7.png',
|
||||
title: '佣金排行',
|
||||
path: '/pages/commission/commission-ranking',
|
||||
} */
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.menu-box {
|
||||
margin: 0 auto;
|
||||
width: 690rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-box {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
position: relative;
|
||||
|
||||
.header-bg {
|
||||
width: 690rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding: 50rpx 0 10rpx 0;
|
||||
background: #fdfae9;
|
||||
border-radius: 0 0 12rpx 12rpx;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: 25%;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
156
pages/commission/goods.vue
Normal file
156
pages/commission/goods.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<!-- 分销商品列表 -->
|
||||
<template>
|
||||
<s-layout title="推广商品" :onShareAppMessage="state.shareInfo">
|
||||
<view class="goods-item ss-m-20" v-for="item in state.pagination.list" :key="item.id">
|
||||
<s-goods-item
|
||||
size="lg"
|
||||
:img="item.picUrl"
|
||||
:title="item.name"
|
||||
:subTitle="item.introduction"
|
||||
:price="item.price"
|
||||
:originPrice="item.marketPrice"
|
||||
priceColor="#333"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||
>
|
||||
<template #rightBottom>
|
||||
<view class="ss-flex ss-row-between">
|
||||
<view class="commission-num" v-if="item.brokerageMinPrice === undefined"
|
||||
>预计佣金：计算中</view
|
||||
>
|
||||
<view
|
||||
class="commission-num"
|
||||
v-else-if="item.brokerageMinPrice === item.brokerageMaxPrice"
|
||||
>
|
||||
预计佣金：{{ fen2yuan(item.brokerageMinPrice) }}
|
||||
</view>
|
||||
<view class="commission-num" v-else>
|
||||
预计佣金：{{ fen2yuan(item.brokerageMinPrice) }} ~
|
||||
{{ fen2yuan(item.brokerageMaxPrice) }}
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button share-btn ui-BG-Main-Gradient"
|
||||
@tap.stop="onShareGoods(item)"
|
||||
>
|
||||
分享赚
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</view>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/goods-empty.png"
|
||||
text="暂无推广商品"
|
||||
/>
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import $share from '@/sheep/platform/share';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash-es';
|
||||
import { showShareModal } from '@/sheep/hooks/useModal';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
|
||||
const state = reactive({
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loadStatus: '',
|
||||
shareInfo: {},
|
||||
});
|
||||
|
||||
// TODO @puhui999：【分享】接入
|
||||
function onShareGoods(goodsInfo) {
|
||||
state.shareInfo = $share.getShareInfo(
|
||||
{
|
||||
title: goodsInfo.title,
|
||||
image: sheep.$url.cdn(goodsInfo.image),
|
||||
desc: goodsInfo.subtitle,
|
||||
params: {
|
||||
page: '2',
|
||||
query: goodsInfo.id,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: goodsInfo.title, // 商品标题
|
||||
image: sheep.$url.cdn(goodsInfo.image), // 商品主图
|
||||
price: goodsInfo.price[0], // 商品价格
|
||||
original_price: goodsInfo.original_price, // 商品原价
|
||||
},
|
||||
);
|
||||
showShareModal();
|
||||
}
|
||||
|
||||
async function getGoodsList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await SpuApi.getSpuPage({
|
||||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
// 补充分佣金额
|
||||
data.list.forEach((item) => {
|
||||
BrokerageApi.getProductBrokeragePrice(item.id).then((res) => {
|
||||
item.brokerageMinPrice = res.data.brokerageMinPrice;
|
||||
item.brokerageMaxPrice = res.data.brokerageMaxPrice;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getGoodsList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getGoodsList();
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods-item {
|
||||
.commission-num {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
51
pages/commission/index.vue
Normal file
51
pages/commission/index.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<!-- 分销中心 -->
|
||||
<template>
|
||||
<s-layout navbar="inner" class="index-wrap" title="分销中心" :bgStyle="bgStyle" :onShareAppMessage="shareInfo">
|
||||
<!-- 分销商信息 -->
|
||||
<commission-info />
|
||||
<!-- 账户信息 -->
|
||||
<account-info />
|
||||
<!-- 菜单栏 -->
|
||||
<commission-menu />
|
||||
<!-- 分销记录 -->
|
||||
<commission-log />
|
||||
|
||||
<!-- 权限弹窗 -->
|
||||
<commission-auth />
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import commissionInfo from './components/commission-info.vue';
|
||||
import accountInfo from './components/account-info.vue';
|
||||
import commissionLog from './components/commission-log.vue';
|
||||
import commissionMenu from './components/commission-menu.vue';
|
||||
import commissionAuth from './components/commission-auth.vue';
|
||||
import sheep from '@/sheep';
|
||||
|
||||
const shareInfo = computed(() => {
|
||||
return sheep.$platform.share.getShareInfo({
|
||||
params: {
|
||||
page: '6',
|
||||
},
|
||||
}, {
|
||||
type: 'user',
|
||||
});
|
||||
});
|
||||
|
||||
const bgStyle = {
|
||||
backgroundColor: '#F7D598',
|
||||
};
|
||||
|
||||
onPageScroll((e) => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.page-main) {
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
</style>
|
||||
328
pages/commission/order.vue
Normal file
328
pages/commission/order.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<!-- 分销 - 订单明细 -->
|
||||
<template>
|
||||
<s-layout title="分销订单" :class="state.scrollTop ? 'order-warp' : ''" navbar="inner">
|
||||
<view
|
||||
class="header-box"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88 + 22) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108 + 22) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- 团队数据总览 -->
|
||||
<view class="team-data-box ss-flex ss-col-center ss-row-between" style="width: 100%">
|
||||
<view class="data-card" style="width: 100%">
|
||||
<view class="total-item" style="width: 100%">
|
||||
<view class="item-title" style="text-align: center">累计推广订单（单）</view>
|
||||
<view class="total-num" style="text-align: center">
|
||||
{{ state.totals }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- tab -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
@change="onTabsChange"
|
||||
>
|
||||
</su-tabs>
|
||||
</su-sticky>
|
||||
|
||||
<!-- 订单 -->
|
||||
<view class="order-box">
|
||||
<view class="order-item" v-for="item in state.pagination.list" :key="item">
|
||||
<view class="order-header">
|
||||
<view class="no-box ss-flex ss-col-center ss-row-between">
|
||||
<text class="order-code">订单编号：{{ item.bizId }}</text>
|
||||
<text class="order-state">
|
||||
{{ item.status === 0 ? '待结算' : item.status === 1 ? '已结算' : '已取消' }}
|
||||
( 佣金 {{ fen2yuan(item.price) }} 元 )
|
||||
</text>
|
||||
</view>
|
||||
<view class="order-from ss-flex ss-col-center ss-row-between">
|
||||
<view class="from-user ss-flex ss-col-center">
|
||||
<text>{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="order-time">
|
||||
{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数据为空 -->
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
|
||||
<!-- 加载更多 -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@tap="loadMore"
|
||||
/>
|
||||
</view>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { reactive } from 'vue';
|
||||
import _ from 'lodash-es';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '../../sheep/hooks/useGoods';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
|
||||
onPageScroll((e) => {
|
||||
state.scrollTop = e.scrollTop <= 100;
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
totals: 0, // 累计推广订单（单）
|
||||
scrollTop: false,
|
||||
|
||||
currentTab: 0,
|
||||
loadStatus: '',
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '待结算',
|
||||
value: '0', // 待结算
|
||||
},
|
||||
{
|
||||
name: '已结算',
|
||||
value: '1', // 已结算
|
||||
},
|
||||
];
|
||||
|
||||
// 切换选项卡
|
||||
function onTabsChange(e) {
|
||||
resetPagination(state.pagination);
|
||||
state.currentTab = e.index;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getOrderList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await BrokerageApi.getBrokerageRecordPage({
|
||||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
bizType: 1, // 获得推广佣金
|
||||
status: state.currentTab > 0 ? state.currentTab : undefined,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
if (state.currentTab === 0) {
|
||||
state.totals = data.total;
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
getOrderList();
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getOrderList();
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
width: 750rpx;
|
||||
background: v-bind(headerBg) no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
|
||||
// 团队信息总览
|
||||
.team-data-box {
|
||||
.data-card {
|
||||
width: 305rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.total-item {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: normal;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.category-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 直推
|
||||
.direct-box {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.direct-item {
|
||||
width: 340rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.item-value {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单
|
||||
.order-box {
|
||||
.order-item {
|
||||
background: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
margin: 20rpx;
|
||||
|
||||
.order-footer {
|
||||
padding: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.order-header {
|
||||
.no-box {
|
||||
padding: 20rpx;
|
||||
|
||||
.order-code {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.order-from {
|
||||
padding: 20rpx;
|
||||
|
||||
.from-user {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
|
||||
.user-avatar {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.commission-box {
|
||||
.name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.commission-num {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: $red;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: '￥';
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status {
|
||||
line-height: 30rpx;
|
||||
padding: 0 10rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-left: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
297
pages/commission/promoter.vue
Normal file
297
pages/commission/promoter.vue
Normal file
File diff suppressed because one or more lines are too long
585
pages/commission/team.vue
Normal file
585
pages/commission/team.vue
Normal file
@@ -0,0 +1,585 @@
|
||||
<!-- 页面 TODO 芋艿：该页面的实现代码需要优化，包括 js 和 css，以及相关的样式设计 -->
|
||||
<template>
|
||||
<s-layout title="我的团队" :class="state.scrollTop ? 'team-wrap' : ''" :bgStyle="bgStyle" navbar="inner">
|
||||
<view class="promoter-list">
|
||||
<view
|
||||
class="promoterHeader bg-color"
|
||||
style="backgroundcolor: #e93323 !important; height: 218rpx; color: #fff"
|
||||
>
|
||||
<view class="headerCon acea-row row-between" style="padding: 28px 29px 0 29px">
|
||||
<view>
|
||||
<view class="name" style="color: #fff">推广人数</view>
|
||||
<view>
|
||||
<text class="num" style="color: #fff">
|
||||
{{
|
||||
state.summary.firstBrokerageUserCount + state.summary.secondBrokerageUserCount ||
|
||||
0
|
||||
}}
|
||||
</text>
|
||||
人
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-tuandui" />
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding: 0 30rpx">
|
||||
<view class="nav acea-row row-around l1">
|
||||
<view :class="state.level == 1 ? 'item on' : 'item'" @click="setType(1)">
|
||||
一级({{ state.summary.firstBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
<view :class="state.level == 2 ? 'item on' : 'item'" @click="setType(2)">
|
||||
二级({{ state.summary.secondBrokerageUserCount || 0 }})
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="search acea-row row-between-wrapper"
|
||||
style="display: flex; height: 100rpx; align-items: center"
|
||||
>
|
||||
<view class="input">
|
||||
<input
|
||||
placeholder="点击搜索会员名称"
|
||||
v-model="state.nickname"
|
||||
confirm-type="search"
|
||||
name="search"
|
||||
@confirm="submitForm"
|
||||
/>
|
||||
</view>
|
||||
<image
|
||||
src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/3de207ef9b45973cea9e050ae17a4e411769bb57cd7e4050381678c23776488b.png"
|
||||
mode=""
|
||||
style="width: 60rpx; height: 64rpx"
|
||||
@click="submitForm"
|
||||
/>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="sortNav acea-row row-middle" style="display: flex; align-items: center">
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('userCount', 'asc')"
|
||||
v-if="sort === 'userCountDESC'"
|
||||
>
|
||||
团队排序
|
||||
<!-- TODO 芋艿：看看怎么从项目里拿出去 -->
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('userCount', 'desc')"
|
||||
v-else-if="sort === 'userCountASC'"
|
||||
>
|
||||
团队排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('userCount', 'desc')" v-else>
|
||||
团队排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'asc')" v-if="sort === 'priceDESC'">
|
||||
金额排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('price', 'desc')"
|
||||
v-else-if="sort === 'priceASC'"
|
||||
>
|
||||
金额排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('price', 'desc')" v-else>
|
||||
金额排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('orderCount', 'asc')"
|
||||
v-if="sort === 'orderCountDESC'"
|
||||
>
|
||||
订单排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view
|
||||
class="sortItem"
|
||||
@click="setSort('orderCount', 'desc')"
|
||||
v-else-if="sort === 'orderCountASC'"
|
||||
>
|
||||
订单排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
<view class="sortItem" @click="setSort('orderCount', 'desc')" v-else>
|
||||
订单排序
|
||||
<image src="https://rbtnet.oss-cn-hangzhou.aliyuncs.com/a6525d55086903956fab235ba4ff92a9d8edd7097489059354667f6e17313c55.png" />
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(item, index) in state.pagination.list" :key="index">
|
||||
<view class="item acea-row row-between-wrapper" style="display: flex">
|
||||
<view
|
||||
class="picTxt acea-row row-between-wrapper"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<view class="pictrue">
|
||||
<image :src="item.avatar" />
|
||||
</view>
|
||||
<view class="text">
|
||||
<view class="name line1">{{ item.nickname }}</view>
|
||||
<view>
|
||||
加入时间:
|
||||
{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="right"
|
||||
style="
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
"
|
||||
>
|
||||
<view>
|
||||
<text class="num font-color">{{ item.brokerageUserCount || 0 }} </text>人
|
||||
</view>
|
||||
<view>
|
||||
<text class="num">{{ item.orderCount || 0 }}</text
|
||||
>单</view
|
||||
>
|
||||
<view>
|
||||
<text class="num">{{ item.brokeragePrice || 0 }}</text
|
||||
>元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="state.pagination.list.length === 0">
|
||||
<s-empty icon="/static/data-empty.png" text="暂无推广人数"></s-empty>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <home></home> -->
|
||||
|
||||
<!-- <view class="header-box" :style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 108) + 'rpx',
|
||||
},
|
||||
]">
|
||||
<view v-if="userInfo.parent_user" class="referrer-box ss-flex ss-col-center">
|
||||
推荐人：
|
||||
<image class="referrer-avatar ss-m-r-10" :src="sheep.$url.cdn(userInfo.parent_user.avatar)"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
{{ userInfo.parent_user.nickname }}
|
||||
</view>
|
||||
<view class="team-data-box ss-flex ss-col-center ss-row-between">
|
||||
<view class="data-card">
|
||||
<view class="total-item">
|
||||
<view class="item-title">团队总人数（人）</view>
|
||||
<view class="total-num">
|
||||
{{ (state.summary.firstBrokerageUserCount+ state.summary.secondBrokerageUserCount)|| 0 }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="category-item ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">一级成员</view>
|
||||
<view class="category-num">{{ state.summary.firstBrokerageUserCount || 0 }}</view>
|
||||
</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">二级成员</view>
|
||||
<view class="category-num">{{ state.summary.secondBrokerageUserCount || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="data-card">
|
||||
<view class="total-item">
|
||||
<view class="item-title">团队分销商人数（人）</view>
|
||||
<view class="total-num">{{ agentInfo?.child_agent_count_all || 0 }}</view>
|
||||
</view>
|
||||
<view class="category-item ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">一级分销商</view>
|
||||
<view class="category-num">{{ agentInfo?.child_agent_count_1 || 0 }}</view>
|
||||
</view>
|
||||
<view class="ss-flex-1">
|
||||
<view class="item-title">二级分销商</view>
|
||||
<view class="category-num">{{ agentInfo?.child_agent_count_2 || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-box">
|
||||
<uni-list :border="false">
|
||||
<uni-list-chat v-for="item in state.pagination.data" :key="item.id" :avatar-circle="true"
|
||||
:title="item.nickname" :avatar="sheep.$url.cdn(item.avatar)"
|
||||
:note="filterUserNum(item.agent?.child_user_count_1)">
|
||||
<view class="chat-custom-right">
|
||||
<view v-if="item.avatar" class="tag-box ss-flex ss-col-center">
|
||||
<image class="tag-img" :src="sheep.$url.cdn(item.avatar)" mode="aspectFill">
|
||||
</image>
|
||||
<text class="tag-title">{{ item.nickname }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="time-text">{{ sheep.$helper.timeFormat(item.brokerageTime, 'yyyy-mm-dd hh:MM:ss') }}</text>
|
||||
</view>
|
||||
</uni-list-chat>
|
||||
</uni-list>
|
||||
</view>
|
||||
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无团队信息">
|
||||
</s-empty> -->
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import _ from 'lodash-es';
|
||||
import { onPageScroll } from '@dcloudio/uni-app';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
// const agentInfo = computed(() => sheep.$store('user').agentInfo);
|
||||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
|
||||
onPageScroll((e) => {
|
||||
state.scrollTop = e.scrollTop <= 100;
|
||||
});
|
||||
|
||||
let sort = ref();
|
||||
const state = reactive({
|
||||
summary: {},
|
||||
pagination: {
|
||||
pageNo: 1,
|
||||
pageSize: 8,
|
||||
list: [],
|
||||
total: 0,
|
||||
},
|
||||
loadStatus: '',
|
||||
// ↓ 新 ui 逻辑
|
||||
level: 1,
|
||||
nickname: ref(''),
|
||||
sortKey: '',
|
||||
isAsc: '',
|
||||
});
|
||||
|
||||
function filterUserNum(num) {
|
||||
if (_.isNil(num)) {
|
||||
return '';
|
||||
}
|
||||
return `下级团队${num}人`;
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
state.pagination.list = [];
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
async function getTeamList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPage({
|
||||
pageNo: state.pagination.pageNo,
|
||||
pageSize: state.pagination.pageSize,
|
||||
level: state.level,
|
||||
'sortingField.order': state.isAsc,
|
||||
'sortingField.field': state.sortKey,
|
||||
nickname: state.nickname,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
function setType(e) {
|
||||
state.pagination.list = [];
|
||||
state.level = e + '';
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
function setSort(sortKey, isAsc) {
|
||||
state.pagination.list = [];
|
||||
sort = sortKey + isAsc.toUpperCase();
|
||||
state.isAsc = isAsc;
|
||||
state.sortKey = sortKey;
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
onLoad(async () => {
|
||||
await getTeamList();
|
||||
// 概要数据
|
||||
let { data } = await BrokerageApi.getBrokerageUserSummary();
|
||||
state.summary = data;
|
||||
});
|
||||
|
||||
// 加载更多
|
||||
function loadMore() {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getTeamList();
|
||||
}
|
||||
|
||||
const bgStyle = {
|
||||
backgroundColor: 'var(--ui-BG-Main)',
|
||||
};
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.l1 {
|
||||
background-color: #fff;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.header-box {
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx 20rpx 20rpx;
|
||||
width: 750rpx;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
background: v-bind(headerBg) no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
|
||||
// 团队信息总览
|
||||
.team-data-box {
|
||||
.data-card {
|
||||
width: 305rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.item-title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
line-height: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.total-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.category-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-box {
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chat-custom-right {
|
||||
.time-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.tag-box {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 21rpx;
|
||||
line-height: 30rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
width: 140rpx;
|
||||
|
||||
.tag-img {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
margin-right: 6rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.tag-title {
|
||||
font-size: 18rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 推荐人
|
||||
.referrer-box {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
padding: 20rpx;
|
||||
|
||||
.referrer-avatar {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.promoter-list .nav {
|
||||
background-color: #fff;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
font-size: 28rpx;
|
||||
color: #282828;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
margin-top: -30rpx;
|
||||
}
|
||||
|
||||
.promoter-list .nav .item.on {
|
||||
border-bottom: 5rpx solid;
|
||||
// $theme-color
|
||||
color: var(--ui-BG-Main);
|
||||
// $theme-color
|
||||
}
|
||||
|
||||
.promoter-list .search {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
height: 100rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius: 14rpx;
|
||||
border-bottom-right-radius: 14rpx;
|
||||
}
|
||||
|
||||
.promoter-list .search .input {
|
||||
width: 592rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.promoter-list .search .input input {
|
||||
height: 100%;
|
||||
font-size: 26rpx;
|
||||
width: 610rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.promoter-list .search .input .placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.promoter-list .search .input .iconfont {
|
||||
position: absolute;
|
||||
right: 28rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.promoter-list .search .iconfont {
|
||||
font-size: 32rpx;
|
||||
color: #515151;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .sortNav {
|
||||
background-color: #fff;
|
||||
height: 76rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
border-top-left-radius: 14rpx;
|
||||
border-top-right-radius: 14rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .sortNav .sortItem {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.promoter-list .list .sortNav .sortItem image {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 6rpx;
|
||||
vertical-align: -3rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .item {
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
height: 152rpx;
|
||||
padding: 0 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .pictrue {
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #fff;
|
||||
box-shadow: 0 0 10rpx #aaa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .text {
|
||||
// width: 304rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .picTxt .text .name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 13rpx;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .right {
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.promoter-list .list .item .right .num {
|
||||
margin-right: 7rpx;
|
||||
}
|
||||
</style>
|
||||
533
pages/commission/wallet.vue
Normal file
533
pages/commission/wallet.vue
Normal file
@@ -0,0 +1,533 @@
|
||||
<!-- 分销 - 佣金明细 -->
|
||||
<template>
|
||||
<s-layout class="wallet-wrap" title="佣金">
|
||||
<!-- 钱包卡片 -->
|
||||
<view class="header-box ss-flex ss-row-center ss-col-center">
|
||||
<view class="card-box ui-BG-Main ui-Shadow-Main">
|
||||
<view class="card-head ss-flex ss-col-center">
|
||||
<view class="card-title ss-m-r-10">当前佣金（元）</view>
|
||||
<view
|
||||
@tap="state.showMoney = !state.showMoney"
|
||||
class="ss-eye-icon"
|
||||
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
|
||||
/>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-t-30">
|
||||
<view class="money-num">{{
|
||||
state.showMoney ? fen2yuan(state.summary.withdrawPrice || 0) : '*****'
|
||||
}}</view>
|
||||
<view class="ss-flex">
|
||||
<view class="ss-m-r-20">
|
||||
<button
|
||||
class="ss-reset-button withdraw-btn"
|
||||
@tap="sheep.$router.go('/pages/commission/withdraw')"
|
||||
>
|
||||
提现
|
||||
</button>
|
||||
</view>
|
||||
<button class="ss-reset-button balance-btn ss-m-l-20" @tap="state.showModal = true">
|
||||
转钻石
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="ss-flex">
|
||||
<view class="loading-money">
|
||||
<view class="loading-money-title">冻结佣金</view>
|
||||
<view class="loading-money-num">
|
||||
{{ state.showMoney ? fen2yuan(state.summary.frozenPrice || 0) : '*****' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="loading-money ss-m-l-100">
|
||||
<view class="loading-money-title">可提现佣金</view>
|
||||
<view class="loading-money-num">
|
||||
{{ state.showMoney ? fen2yuan(state.summary.brokeragePrice || 0) : '*****' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<su-sticky>
|
||||
<!-- 统计 -->
|
||||
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
|
||||
<uni-datetime-picker
|
||||
v-model="state.date"
|
||||
type="daterange"
|
||||
@change="onChangeTime"
|
||||
:end="state.today"
|
||||
>
|
||||
<button class="ss-reset-button date-btn">
|
||||
<text>{{ dateFilterText }}</text>
|
||||
<text class="cicon-drop-down ss-seldate-icon" />
|
||||
</button>
|
||||
</uni-datetime-picker>
|
||||
|
||||
<view class="total-box">
|
||||
<!-- TODO 芋艿：这里暂时不考虑做 -->
|
||||
<!-- <view class="ss-m-b-10">总收入￥{{ state.pagination.income.toFixed(2) }}</view> -->
|
||||
<!-- <view>总支出￥{{ (-state.pagination.expense).toFixed(2) }}</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<su-tabs
|
||||
:list="tabMaps"
|
||||
@change="onChangeTab"
|
||||
:scrollable="false"
|
||||
:current="state.currentTab"
|
||||
/>
|
||||
</su-sticky>
|
||||
<s-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/data-empty.png"
|
||||
text="暂无数据"
|
||||
></s-empty>
|
||||
|
||||
<!-- 转余额弹框 -->
|
||||
<su-popup
|
||||
:show="state.showModal"
|
||||
type="bottom"
|
||||
round="20"
|
||||
@close="state.showModal = false"
|
||||
showClose
|
||||
>
|
||||
<view class="ss-p-x-20 ss-p-y-30">
|
||||
<view class="model-title ss-m-b-30 ss-m-l-20">转余额</view>
|
||||
<view class="model-subtitle ss-m-b-100 ss-m-l-20">将您的佣金转为钻石继续消费</view>
|
||||
<view class="input-box ss-flex ss-col-center border-bottom ss-m-b-70 ss-m-x-20">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.price"
|
||||
type="number"
|
||||
placeholder="请输入金额"
|
||||
/>
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button model-btn ui-BG-Main-Gradient ui-Shadow-Main"
|
||||
@tap="onConfirm"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</view>
|
||||
</su-popup>
|
||||
|
||||
<!-- 钱包记录 -->
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<view
|
||||
class="wallet-list ss-flex border-bottom"
|
||||
v-for="item in state.pagination.list"
|
||||
:key="item.id"
|
||||
>
|
||||
<view class="list-content">
|
||||
<view class="title-box ss-flex ss-row-between ss-m-b-20">
|
||||
<text class="title ss-line-1">{{ item.description }}</text>
|
||||
<view class="money">
|
||||
<text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
|
||||
<text v-else class="minus">{{ fen2yuan(item.price) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-box">
|
||||
<text class="time">{{
|
||||
sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')
|
||||
}}</text>
|
||||
<text class="status" v-if="item.price >= 0 && item.status == 0">待结算</text>
|
||||
<text class="status" v-if="item.price >= 0 && item.status == 1">已结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <u-gap></u-gap> -->
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import dayjs from 'dayjs';
|
||||
import _ from 'lodash-es';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import { resetPagination } from '@/sheep/util';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/wallet_card_bg.png');
|
||||
|
||||
const state = reactive({
|
||||
showMoney: false,
|
||||
summary: {}, // 分销信息
|
||||
|
||||
today: '',
|
||||
date: [],
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
loadStatus: '',
|
||||
|
||||
price: undefined,
|
||||
showModal: false,
|
||||
});
|
||||
|
||||
const tabMaps = [
|
||||
{
|
||||
name: '分佣',
|
||||
value: '1', // BrokerageRecordBizTypeEnum.ORDER
|
||||
},
|
||||
{
|
||||
name: '提现',
|
||||
value: '2', // BrokerageRecordBizTypeEnum.WITHDRAW
|
||||
},
|
||||
];
|
||||
|
||||
const dateFilterText = computed(() => {
|
||||
if (state.date[0] === state.date[1]) {
|
||||
return state.date[0];
|
||||
} else {
|
||||
return state.date.join('~');
|
||||
}
|
||||
});
|
||||
|
||||
async function getLogList() {
|
||||
state.loadStatus = 'loading';
|
||||
let { code, data } = await BrokerageApi.getBrokerageRecordPage({
|
||||
pageSize: state.pagination.pageSize,
|
||||
pageNo: state.pagination.pageNo,
|
||||
bizType: tabMaps[state.currentTab].value,
|
||||
'createTime[0]': state.date[0] + ' 00:00:00',
|
||||
'createTime[1]': state.date[1] + ' 23:59:59',
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
}
|
||||
|
||||
function onChangeTab(e) {
|
||||
resetPagination(state.pagination);
|
||||
state.currentTab = e.index;
|
||||
getLogList();
|
||||
}
|
||||
|
||||
function onChangeTime(e) {
|
||||
state.date[0] = e[0];
|
||||
state.date[1] = e[e.length - 1];
|
||||
resetPagination(state.pagination);
|
||||
getLogList();
|
||||
}
|
||||
|
||||
// 确认操作（转账到余额）
|
||||
async function onConfirm() {
|
||||
if (state.price <= 0) {
|
||||
sheep.$helper.toast('请输入正确的金额');
|
||||
return;
|
||||
}
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认把您的佣金转入到余额钱包中？',
|
||||
success: async function (res) {
|
||||
if (!res.confirm) {
|
||||
return;
|
||||
}
|
||||
const { code } = await BrokerageApi.createBrokerageWithdraw({
|
||||
type: 1, // 钱包
|
||||
price: state.price * 100,
|
||||
});
|
||||
if (code === 0) {
|
||||
state.showModal = false;
|
||||
await getAgentInfo();
|
||||
onChangeTab({
|
||||
index: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function getAgentInfo() {
|
||||
const { code, data } = await BrokerageApi.getBrokerageUserSummary();
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.summary = data;
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
state.today = dayjs().format('YYYY-MM-DD');
|
||||
state.date = [state.today, state.today];
|
||||
if (options.type === 2) {
|
||||
// 切换到“提现” tab 下
|
||||
state.currentTab = 1;
|
||||
}
|
||||
getLogList();
|
||||
getAgentInfo();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return;
|
||||
}
|
||||
state.pagination.pageNo++;
|
||||
getLogList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.status-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.status {
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 钱包
|
||||
.header-box {
|
||||
background-color: $white;
|
||||
padding: 30rpx;
|
||||
|
||||
.card-box {
|
||||
width: 100%;
|
||||
min-height: 300rpx;
|
||||
padding: 40rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: v-bind(headerBg) no-repeat;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
color: $white;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ss-eye-icon {
|
||||
font-size: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.money-num {
|
||||
font-size: 40rpx;
|
||||
line-height: normal;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.reduce-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.withdraw-btn {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
background-color: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.balance-btn {
|
||||
width: 120rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30px;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
border: 1px solid $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-money {
|
||||
margin-top: 56rpx;
|
||||
|
||||
.loading-money-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.loading-money-num {
|
||||
font-size: 30rpx;
|
||||
font-family: OPPOSANS;
|
||||
font-weight: 500;
|
||||
color: #fefefe;
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选
|
||||
|
||||
.filter-box {
|
||||
height: 120rpx;
|
||||
padding: 0 30rpx;
|
||||
background-color: $bg-page;
|
||||
|
||||
.total-box {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.date-btn {
|
||||
background-color: $white;
|
||||
line-height: 54rpx;
|
||||
border-radius: 27rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-6;
|
||||
|
||||
.ss-seldate-icon {
|
||||
font-size: 50rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab
|
||||
.wallet-tab-card {
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.tab-line {
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 2rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 钱包记录
|
||||
.wallet-list {
|
||||
padding: 30rpx;
|
||||
background-color: #ffff;
|
||||
|
||||
.head-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
background: $gray-c;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: $dark-3;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $gray-c;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
.add {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.model-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.model-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #c2c7cf;
|
||||
}
|
||||
|
||||
.model-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
height: 100rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 40rpx;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
467
pages/commission/withdraw.vue
Normal file
467
pages/commission/withdraw.vue
Normal file
@@ -0,0 +1,467 @@
|
||||
<!-- 分佣提现 -->
|
||||
<template>
|
||||
<s-layout title="申请提现" class="withdraw-wrap" navbar="inner">
|
||||
<view class="page-bg"></view>
|
||||
<view
|
||||
class="wallet-num-box ss-flex ss-col-center ss-row-between"
|
||||
:style="[
|
||||
{
|
||||
marginTop: '-' + Number(statusBarHeight + 88 + 22) + 'rpx',
|
||||
paddingTop: Number(statusBarHeight + 88 + 22) + 'rpx',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<view class="">
|
||||
<view class="num-title">可提现金额（元）</view>
|
||||
<view class="wallet-num">{{ fen2yuan(state.brokerageInfo.brokeragePrice) }}</view>
|
||||
</view>
|
||||
<button
|
||||
class="ss-reset-button log-btn"
|
||||
@tap="sheep.$router.go('/pages/commission/wallet', { type: 2 })"
|
||||
>
|
||||
提现记录
|
||||
</button>
|
||||
</view>
|
||||
<!-- 提现输入卡片-->
|
||||
<view class="draw-card" v-if="isPass">
|
||||
<view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30">
|
||||
<view class="name">提现至</view>
|
||||
<view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
|
||||
<view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
|
||||
<view v-if="state.accountInfo.type === '1'" class="empty-text">钱包余额</view>
|
||||
<view v-if="state.accountInfo.type === '2'" class="empty-text">银行卡转账</view>
|
||||
<view v-if="state.accountInfo.type === '3'" class="empty-text">微信零钱</view>
|
||||
<view v-if="state.accountInfo.type === '4'" class="empty-text">支付宝账户</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提现金额 -->
|
||||
<view class="card-title">提现金额</view>
|
||||
<view class="input-box ss-flex ss-col-center border-bottom">
|
||||
<view class="unit">￥</view>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.price"
|
||||
type="number"
|
||||
placeholder="请输入提现金额"
|
||||
/>
|
||||
</view>
|
||||
<!-- 提现账号 -->
|
||||
<view class="card-title" v-show="['2', '3', '4'].includes(state.accountInfo.type)">
|
||||
提现账号
|
||||
</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="['2', '3', '4'].includes(state.accountInfo.type)"
|
||||
>
|
||||
<view class="unit" />
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.accountNo"
|
||||
placeholder="请输入提现账号"
|
||||
/>
|
||||
</view>
|
||||
<!-- 收款码 -->
|
||||
<view class="card-title" v-show="['3', '4'].includes(state.accountInfo.type)">收款码</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center"
|
||||
v-show="['3', '4'].includes(state.accountInfo.type)"
|
||||
>
|
||||
<view class="unit" />
|
||||
<view class="upload-img">
|
||||
<s-uploader
|
||||
v-model:url="state.accountInfo.accountQrCodeUrl"
|
||||
fileMediatype="image"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 持卡人姓名 -->
|
||||
<view class="card-title" v-show="state.accountInfo.type === '2'">持卡人</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="state.accountInfo.type === '2'"
|
||||
>
|
||||
<view class="unit" />
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.name"
|
||||
placeholder="请输入持卡人姓名"
|
||||
/>
|
||||
</view>
|
||||
<!-- 提现银行 -->
|
||||
<view class="card-title" v-show="state.accountInfo.type === '2'">提现银行</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="state.accountInfo.type === '2'"
|
||||
>
|
||||
<view class="unit" />
|
||||
<!--银行改为下拉选择-->
|
||||
<picker
|
||||
@change="bankChange"
|
||||
:value="state.bankListSelectedIndex"
|
||||
:range="state.bankList"
|
||||
range-key="label"
|
||||
style="width: 100%"
|
||||
>
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
:value="state.accountInfo.bankName"
|
||||
placeholder="请选择银行"
|
||||
suffixIcon="right"
|
||||
disabled
|
||||
:styles="{ disableColor: '#fff', borderColor: '#fff', color: '#333!important' }"
|
||||
/>
|
||||
</picker>
|
||||
</view>
|
||||
<!-- 开户地址 -->
|
||||
<view class="card-title" v-show="state.accountInfo.type === '2'">开户地址</view>
|
||||
<view
|
||||
class="input-box ss-flex ss-col-center border-bottom"
|
||||
v-show="state.accountInfo.type === '2'"
|
||||
>
|
||||
<view class="unit" />
|
||||
<uni-easyinput
|
||||
:inputBorder="false"
|
||||
class="ss-flex-1 ss-p-l-10"
|
||||
v-model="state.accountInfo.bankAddress"
|
||||
placeholder="请输入开户地址"
|
||||
/>
|
||||
</view>
|
||||
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
|
||||
确认提现
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 提现说明 -->
|
||||
<view class="draw-notice">
|
||||
<view class="title ss-m-b-30">提现说明</view>
|
||||
<view class="draw-list"> 最低提现金额 {{ fen2yuan(state.minPrice) }} 元 </view>
|
||||
<view class="draw-list">
|
||||
冻结佣金：<text>￥{{ fen2yuan(state.brokerageInfo.frozenPrice) }}</text>
|
||||
（每笔佣金的冻结期为 {{ state.frozenDays }} 天，到期后可提现）
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择提现账户 -->
|
||||
<account-type-select
|
||||
:show="state.accountSelect"
|
||||
@close="onAccountSelect(false)"
|
||||
round="10"
|
||||
v-model="state.accountInfo"
|
||||
:methods="state.withdrawTypes"
|
||||
/>
|
||||
</s-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, reactive, onBeforeMount } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import accountTypeSelect from './components/account-type-select.vue';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import TradeConfigApi from '@/sheep/api/trade/config';
|
||||
import BrokerageApi from '@/sheep/api/trade/brokerage';
|
||||
import DictApi from '@/sheep/api/system/dict';
|
||||
|
||||
const isPass = computed(() => {
|
||||
return sheep.$store('user').tradeConfig.weixinEnabled;
|
||||
});
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||
|
||||
const userStore = sheep.$store('user');
|
||||
const userInfo = computed(() => userStore.userInfo);
|
||||
const state = reactive({
|
||||
accountInfo: {
|
||||
// 提现表单
|
||||
type: undefined,
|
||||
accountNo: undefined,
|
||||
accountQrCodeUrl: undefined,
|
||||
name: undefined,
|
||||
bankName: undefined,
|
||||
bankAddress: undefined,
|
||||
},
|
||||
|
||||
accountSelect: false,
|
||||
|
||||
brokerageInfo: {}, // 分销信息
|
||||
|
||||
frozenDays: 0, // 冻结天数
|
||||
minPrice: 0, // 最低提现金额
|
||||
withdrawTypes: [], // 提现方式
|
||||
bankList: [], // 银行字典数据
|
||||
bankListSelectedIndex: '', // 选中银行 bankList 的 index
|
||||
});
|
||||
|
||||
// 打开提现方式的弹窗
|
||||
const onAccountSelect = (e) => {
|
||||
state.accountSelect = e;
|
||||
};
|
||||
|
||||
// 提交提现
|
||||
const onConfirm = async () => {
|
||||
// 参数校验
|
||||
//debugger;
|
||||
if (
|
||||
!state.accountInfo.price ||
|
||||
state.accountInfo.price > state.brokerageInfo.price ||
|
||||
state.accountInfo.price <= 0
|
||||
) {
|
||||
sheep.$helper.toast('请输入正确的提现金额');
|
||||
return;
|
||||
}
|
||||
if (!state.accountInfo.type) {
|
||||
sheep.$helper.toast('请选择提现方式');
|
||||
return;
|
||||
}
|
||||
// 提交请求
|
||||
let { code } = await BrokerageApi.createBrokerageWithdraw({
|
||||
...state.accountInfo,
|
||||
price: state.accountInfo.price * 100,
|
||||
});
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
// 提示
|
||||
uni.showModal({
|
||||
title: '操作成功',
|
||||
content: '您的提现申请已成功提交',
|
||||
cancelText: '继续提现',
|
||||
confirmText: '查看记录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
sheep.$router.go('/pages/commission/wallet', { type: 2 });
|
||||
return;
|
||||
}
|
||||
getBrokerageUser();
|
||||
state.accountInfo = {};
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 获得分销配置
|
||||
async function getWithdrawRules() {
|
||||
let { code, data } = await TradeConfigApi.getTradeConfig();
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
if (data) {
|
||||
state.minPrice = data.brokerageWithdrawMinPrice || 0;
|
||||
state.frozenDays = data.brokerageFrozenDays || 0;
|
||||
state.withdrawTypes = data.brokerageWithdrawTypes;
|
||||
}
|
||||
}
|
||||
|
||||
// 获得分销信息
|
||||
async function getBrokerageUser() {
|
||||
const { data, code } = await BrokerageApi.getBrokerageUser();
|
||||
if (code === 0) {
|
||||
state.brokerageInfo = data;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取提现银行配置字典
|
||||
async function getDictDataListByType() {
|
||||
let { code, data } = await DictApi.getDictDataListByType('brokerage_bank_name');
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
if (data && data.length > 0) {
|
||||
state.bankList = data;
|
||||
}
|
||||
}
|
||||
|
||||
// 银行选择
|
||||
function bankChange(e) {
|
||||
const value = e.detail.value;
|
||||
state.bankListSelectedIndex = value;
|
||||
state.accountInfo.bankName = state.bankList[value].label;
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
getWithdrawRules();
|
||||
getBrokerageUser();
|
||||
getDictDataListByType(); //获取银行字典数据
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.uni-input-input {
|
||||
font-family: OPPOSANS !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wallet-num-box {
|
||||
padding: 0 40rpx 80rpx;
|
||||
background: var(--ui-BG-Main) v-bind(headerBg) center/750rpx 100% no-repeat;
|
||||
border-radius: 0 0 5% 5%;
|
||||
|
||||
.num-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.wallet-num {
|
||||
font-size: 60rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.log-btn {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border: 1rpx solid $white;
|
||||
border-radius: 30rpx;
|
||||
padding: 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// 提现输入卡片
|
||||
.draw-card {
|
||||
background-color: $white;
|
||||
border-radius: 20rpx;
|
||||
width: 690rpx;
|
||||
min-height: 560rpx;
|
||||
margin: -60rpx 30rpx 30rpx 30rpx;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bank-box {
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.bank-list {
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.cicon-forward {
|
||||
color: $dark-9;
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 624rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 616rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bind-box {
|
||||
.placeholder-text {
|
||||
font-size: 26rpx;
|
||||
color: $dark-9;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 22rpx;
|
||||
color: var(--ui-BG-Main);
|
||||
background-color: var(--ui-BG-Main-light);
|
||||
}
|
||||
}
|
||||
|
||||
.input-box {
|
||||
width: 624rpx;
|
||||
height: 100rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.unit {
|
||||
font-size: 48rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 616rpx;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
border-radius: 40rpx;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 提现说明
|
||||
.draw-notice {
|
||||
width: 684rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #fffaee;
|
||||
border-radius: 20rpx;
|
||||
margin: 20rpx 32rpx 0 32rpx;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.draw-list {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user