330 lines
9.2 KiB
Vue
330 lines
9.2 KiB
Vue
<template>
|
||
<view>
|
||
<z-paging ref="paging" :refresher-enabled="showLoading" v-model="dataList" @query="queryList">
|
||
<wd-navbar title="钱包" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
|
||
<view class="p30">
|
||
<image src="/static/qianBeiAs.png" mode="widthFix" style="position: absolute; top: 0; left: 0; width: 100%; z-index: -1"></image>
|
||
<view style="position: relative">
|
||
<image src="/static/qianbaoBei.png" style="width: 690rpx; height: 382rpx; position: absolute; top: 0; left: 0; z-index: -1"></image>
|
||
<view style="padding: 24rpx 30rpx; font-size: 36rpx; font-weight: bold; margin-bottom: 24rpx">我的钱包</view>
|
||
<view style="display: flex; align-items: center; margin-bottom: 14rpx; padding: 0 30rpx">
|
||
<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
|
||
<view style="font-size: 24rpx; color: #666a6d; margin: 0 10rpx">我的余额（元）</view>
|
||
<image @click="toeas" :src="`/static/icons/yan${toeasTrue ? 's' : ''}.png`" style="width: 35rpx; height: 35rpx"></image>
|
||
</view>
|
||
<view
|
||
style="
|
||
font-size: 58rpx;
|
||
font-weight: bold;
|
||
color: #69a24a;
|
||
padding: 0 30rpx;
|
||
margin-bottom: 25rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
"
|
||
>
|
||
{{ toeasTrue ? '****' : userInfo.money }}
|
||
<view
|
||
@click="toZhuan"
|
||
style="
|
||
color: #8ec287;
|
||
padding: 8rpx 30rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 28rpx;
|
||
background-color: rgba(255, 255, 255, 0.8);
|
||
font-weight: 400;
|
||
display: flex;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<image src="/static/icons/huazhuan.png" style="width: 35rpx; height: 35rpx"></image>
|
||
<text style="margin-left: 10rpx">划转</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
style="
|
||
width: 690rpx;
|
||
height: 110rpx;
|
||
background: #e9f2e7;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
margin-bottom: 35rpx;
|
||
"
|
||
>
|
||
<view class="block_wall">
|
||
<view class="block_wall_tit" style="font-size: 24rpx">
|
||
<view>业绩奖励</view>
|
||
<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
|
||
</view>
|
||
<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.performanceReward || 0 }}</view>
|
||
</view>
|
||
<view class="block_wall">
|
||
<view class="block_wall_tit" style="font-size: 24rpx">
|
||
<view>直推奖励</view>
|
||
<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
|
||
</view>
|
||
<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.directReferralReward || 0 }}</view>
|
||
</view>
|
||
<view class="block_wall">
|
||
<view class="block_wall_tit" style="font-size: 24rpx">
|
||
<view>间推奖励</view>
|
||
<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
|
||
</view>
|
||
<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.indirectReferralReward || 0 }}</view>
|
||
</view>
|
||
<view class="block_wall">
|
||
<view class="block_wall_tit" style="font-size: 24rpx">
|
||
<view>特殊奖励</view>
|
||
<!-- <image src="/static/icons/wen.png" style="width: 28rpx; height: 28rpx"></image> -->
|
||
</view>
|
||
<view style="font-size: 32rpx; font-weight: bold">{{ userInfo.specialReward || 0 }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 报单业绩 -->
|
||
<view class="wallet-section" v-if="userInfo.branchCompany">
|
||
<view class="section-title">
|
||
<view>
|
||
<text>市场报单业绩</text>
|
||
<text style="font-size: 24rpx; font-weight: 500">(元）</text>
|
||
<image src="/static/icons/wen.png" @click="tishi" style="width: 28rpx; height: 28rpx"></image>
|
||
</view>
|
||
<view style="font-size: 26rpx">合计：{{ rewardReportInfo.total_monthly_performance }}元</view>
|
||
</view>
|
||
|
||
<view class="wallet-cards">
|
||
<view class="wallet-item" v-for="(item, index) in rewardReportInfo.money_count" :key="index">
|
||
<text class="amount red">{{ item.money || 0 }}</text>
|
||
<text class="label">{{ item.name }}</text>
|
||
<text class="desc">已招募{{ item.count || 0 }}个</text>
|
||
</view>
|
||
<!-- <view class="wallet-item">
|
||
<text class="amount">{{ userInfo.performanceReward || 0 }}</text>
|
||
<text class="label">总代理</text>
|
||
<text class="desc">已招募{{ rewardReportInfo.money_count.generalAgent || 0 }}个</text>
|
||
</view>
|
||
<view class="wallet-item">
|
||
<text class="amount">{{ userInfo.directReferralReward || 0 }}</text>
|
||
<text class="label">加盟店</text>
|
||
<text class="desc">已招募{{ rewardReportInfo.money_count.franchise || 0 }}个</text>
|
||
</view> -->
|
||
<view class="wallet-item">
|
||
<text class="amount">{{ rewardReportInfo.restock_reward || 0 }}</text>
|
||
<text class="label">团队补货</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view>
|
||
<view style="display: flex; align-items: center; justify-content: space-between">
|
||
<image style="width: 74rpx; height: 34rpx" mode="widthFix" src="/static/icons/zhangdan.png"></image>
|
||
|
||
<wd-picker
|
||
@close="showLoading = true"
|
||
@open="showLoading = false"
|
||
:columns="columns"
|
||
v-model="queryPrams.bizType"
|
||
use-default-slot
|
||
@confirm="handleConfirm"
|
||
>
|
||
<view style="display: flex; align-items: center; font-size: 28rpx">
|
||
{{ typeName || '筛选' }}
|
||
<image style="margin-left: 15rpx; width: 35rpx; height: 35rpx" src="/static/icons/xia.png"></image>
|
||
</view>
|
||
</wd-picker>
|
||
</view>
|
||
|
||
<view class="wall_list" v-for="(item, index) in dataList" :key="index">
|
||
<view>
|
||
<view style="margin-bottom: 25rpx; font-size: 28rpx">{{ item.title }}</view>
|
||
<view style="font-size: 24rpx; color: #999">
|
||
{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}
|
||
</view>
|
||
</view>
|
||
<view style="font-size: 32rpx; font-weight: bold; color: #799675">￥{{ item.money }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue';
|
||
import api from '@/api/index';
|
||
import { Store } from '@/store';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
const rewardReportInfo = ref({});
|
||
|
||
const store = Store();
|
||
const paging = ref(null);
|
||
const dataList = ref([]);
|
||
|
||
const columns = ref([]);
|
||
const showLoading = ref(true);
|
||
|
||
const typeName = ref('');
|
||
|
||
const toeasTrue = ref(false);
|
||
|
||
const queryPrams = ref({
|
||
bizType: ''
|
||
});
|
||
|
||
const userInfo = computed(
|
||
() =>
|
||
store.userInfo || {
|
||
inviteCode: '',
|
||
nickname: '',
|
||
mobile: '',
|
||
avatar: '',
|
||
paywallet: {
|
||
balance: 0
|
||
}
|
||
}
|
||
);
|
||
|
||
onShow(async () => {
|
||
if (userInfo.value.branchCompany) {
|
||
api.rewardReport().then((res) => {
|
||
rewardReportInfo.value = res;
|
||
});
|
||
}
|
||
});
|
||
|
||
import { timeFormat } from '@/utils/fun.js';
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
api.moneyRecord({ pageNo, pageSize, ...queryPrams.value })
|
||
.then((res: any) => {
|
||
columns.value = Object.entries(res.bizType).map(([value, label]) => ({
|
||
value,
|
||
label
|
||
}));
|
||
columns.value.unshift({
|
||
label: '全部',
|
||
value: ''
|
||
});
|
||
paging.value.complete(res.list);
|
||
})
|
||
.catch((res) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
|
||
const handleConfirm = (e) => {
|
||
if (!e.value) {
|
||
typeName.value = '';
|
||
} else {
|
||
typeName.value = e.selectedItems.label;
|
||
}
|
||
paging.value.reload();
|
||
};
|
||
|
||
const back = () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
const tishi = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '每月初结算上月业绩，“团队补货”为团队补货回款，例：本月整个团队总补货回款为20W，则月度团队补货收益为20W×12%=24000元',
|
||
showCancel: false
|
||
});
|
||
};
|
||
|
||
const toeas = () => {
|
||
toeasTrue.value = !toeasTrue.value;
|
||
};
|
||
|
||
const toZhuan = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/wallet/zhaun'
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.block_wall {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
&_tit {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.wall_list {
|
||
width: 690rpx;
|
||
height: 118rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 88, 219, 0.06);
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
/* 钱包区域 */
|
||
.wallet-section {
|
||
background-color: white;
|
||
margin: 0rpx 0 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0 20rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
border-bottom: 1px solid #eee;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.wallet-cards {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.wallet-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
|
||
.label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
color: #799675;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 20rpx;
|
||
color: #999;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
|
||
</style>
|