338 lines
8.7 KiB
Vue
338 lines
8.7 KiB
Vue
<template>
|
|
<view>
|
|
<up-navbar
|
|
bg-color="transparent"
|
|
title="分销中心"
|
|
@leftClick="back"
|
|
:fixed="true"
|
|
></up-navbar>
|
|
<view class="top">
|
|
<image class="top_bg" src="/distribution/static/top_bg.png"></image>
|
|
<view class="top_content">
|
|
<view class="u-flex justify-between">
|
|
<view>
|
|
<view class="u-flex">
|
|
<text class="font-12 color-666 u-m-r-6" @click="toShouyiDetail('')"
|
|
>总收益</text
|
|
>
|
|
<up-icon
|
|
name="question-circle"
|
|
size="12"
|
|
color="#666"
|
|
@click="questionClick('总收益')"
|
|
></up-icon>
|
|
</view>
|
|
<view class="price" @click="toShouyiDetail('')">{{
|
|
state.totalIncome
|
|
}}</view>
|
|
</view>
|
|
<view>
|
|
<view class="u-flex">
|
|
<text class="font-12 color-666 u-m-r-6" @click="toShouyiDetail('待入账')"
|
|
>待入账</text
|
|
>
|
|
<up-icon
|
|
name="question-circle"
|
|
size="12"
|
|
color="#666"
|
|
@click="questionClick('待入账')"
|
|
></up-icon>
|
|
</view>
|
|
<view class="price" @click="toShouyiDetail('待入账')">{{
|
|
state.pendingIncome
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-flex justify-between u-m-t-16">
|
|
<view>
|
|
<view class="u-flex">
|
|
<text class="font-12 color-666 u-m-r-6" @click="toTixian"
|
|
>可提现金额</text
|
|
>
|
|
</view>
|
|
<view class="u-flex" style="align-items: baseline">
|
|
<text class="price">{{ state.cashOutAmount }}</text>
|
|
<view class="u-flex" @click="toTixian">
|
|
<text class="font-12 color-666 u-m-r-6 u-m-l-6">去提现</text>
|
|
<up-icon
|
|
name="arrow-right"
|
|
size="12"
|
|
color="#666"
|
|
@click="toTixian"
|
|
></up-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="u-flex">
|
|
<view class="title">我的分销</view>
|
|
</view>
|
|
<view class="u-m-t-36 small-title"
|
|
>已成为{{ state.activates.totalRow }}家店铺的分销员</view
|
|
>
|
|
<view class="list">
|
|
<view
|
|
v-for="(item, index) in state.activates.records"
|
|
@click="toShopDetail(item, 'activates')"
|
|
:key="index"
|
|
class="shop-item"
|
|
>
|
|
<up-image
|
|
width="104rpx"
|
|
height="104rpx"
|
|
radius="8rpx"
|
|
:src="item.coverImg"
|
|
></up-image>
|
|
<view class="u-flex-1 u-m-l-14">
|
|
<view class="u-flex justify-between">
|
|
<view>
|
|
<view class="shop-name">{{ item.shopName }}</view>
|
|
<view class="address u-line-1 u-m-t-16">{{
|
|
item.shopAddress
|
|
}}</view>
|
|
</view>
|
|
<view>
|
|
<view class="shouyi">收益</view>
|
|
<view class="price">¥{{ item.income || "0.00" }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="state.activates.totalRow > 0"
|
|
class="u-flex justify-center font-12 color-666"
|
|
style="align-items: baseline"
|
|
@click="toShopList('activates')"
|
|
>
|
|
<view>查看全部店铺</view>
|
|
<up-icon name="arrow-right" size="12" color="#666"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="u-flex u-m-t-32">
|
|
<view class="title">更多店铺解锁</view>
|
|
</view>
|
|
<view class="list">
|
|
<view
|
|
v-for="(item, index) in state.unActivates.records"
|
|
:key="index"
|
|
class="shop-item"
|
|
@click="toShopDetail(item, 'unActivates')"
|
|
>
|
|
<up-image
|
|
width="104rpx"
|
|
height="104rpx"
|
|
radius="8rpx"
|
|
:src="item.coverImg"
|
|
></up-image>
|
|
<view class="u-flex-1 u-m-l-14">
|
|
<view class="u-flex justify-between align-center">
|
|
<view>
|
|
<view class="shop-name">{{ item.shopName }}</view>
|
|
<view class="u-flex">
|
|
<view class="tag" v-if="item.labelContent">{{
|
|
item.labelContent
|
|
}}</view>
|
|
</view>
|
|
<view class="address u-line-1">{{ item.shopAddress }}</view>
|
|
</view>
|
|
<view class="u-flex u-flex-col justify-center">
|
|
<view class="fufei" v-if="item.openType == 'pay'"
|
|
>付费开通</view
|
|
>
|
|
<view class="fufei" v-else-if="item.openType == 'manual'"
|
|
>手动开通</view
|
|
>
|
|
<template v-else-if="item.openType == 'auto'">
|
|
<view class="font-12 color-333 font-700">自动开通</view>
|
|
<view class="u-m-t-8 color-666 font-12"
|
|
>还差{{
|
|
item.shopInviteCount - item.userInviteCount
|
|
}}人开通</view
|
|
>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="state.activates.totalRow > 0"
|
|
class="u-flex justify-center font-12 color-666"
|
|
style="align-items: baseline"
|
|
@click="toShopList('unActivates')"
|
|
>
|
|
<view>查看全部店铺</view>
|
|
<up-icon name="arrow-right" size="12" color="#666"></up-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<TipsPopup v-model="showPopup" :tips-type="tipsType"></TipsPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import TipsPopup from "./components/tips-popup.vue";
|
|
import * as distributionApi from "@/common/api/market/distribution.js";
|
|
const showPopup = ref(false);
|
|
const popupText = ref("");
|
|
const tipsType = ref("");
|
|
function questionClick(title) {
|
|
if (title == "总收益") {
|
|
tipsType.value = "总收益";
|
|
}
|
|
if (title == "待入账") {
|
|
tipsType.value = "待入账";
|
|
}
|
|
showPopup.value = true;
|
|
}
|
|
function back() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
}
|
|
|
|
function toShouyiDetail(name) {
|
|
uni.navigateTo({
|
|
url: "/distribution/income-details/index?name="+name,
|
|
});
|
|
}
|
|
|
|
function toShopDetail(item, type) {
|
|
uni.navigateTo({
|
|
url:
|
|
"/distribution/shop-detail/index?shopId=" + item.shopId + "&type=" + type,
|
|
});
|
|
}
|
|
|
|
function toTixian() {
|
|
uni.navigateTo({
|
|
url: "/distribution/withdraw/index",
|
|
});
|
|
}
|
|
function toShopList(type) {
|
|
uni.navigateTo({
|
|
url: "/distribution/shop-list/index?type=" + type,
|
|
});
|
|
}
|
|
const state = reactive({
|
|
totalIncome: 0,
|
|
pendingIncome: 0,
|
|
cashOutAmount: 0,
|
|
totalIncome: 0,
|
|
activates: {
|
|
totalRow: 0,
|
|
records: [],
|
|
},
|
|
unActivates: {
|
|
totalRow: 0,
|
|
records: [],
|
|
},
|
|
});
|
|
async function init() {
|
|
const res = await distributionApi.centerUser();
|
|
if (res) {
|
|
Object.assign(state, res);
|
|
}
|
|
}
|
|
onShow(init);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.list {
|
|
.shop-item {
|
|
padding: 16rpx 0;
|
|
border-top: 2rpx solid #ededed;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
display: flex;
|
|
align-items: center;
|
|
&:first-child {
|
|
border-top: none;
|
|
}
|
|
.fufei {
|
|
color: #e8ad7b;
|
|
}
|
|
.tag {
|
|
font-size: 24rpx;
|
|
color: #ff1c1c;
|
|
background-color: #ffe4e4;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.shop-name {
|
|
}
|
|
.address {
|
|
max-width: 390rpx;
|
|
}
|
|
.shouyi {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
.price {
|
|
font-size: 20rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.price {
|
|
font-weight: 700;
|
|
color: #333;
|
|
font-size: 40rpx;
|
|
margin-top: 16rpx;
|
|
}
|
|
.top {
|
|
position: relative;
|
|
.top_content {
|
|
background-color: #faf7f4;
|
|
position: absolute;
|
|
left: 28rpx;
|
|
right: 28rpx;
|
|
bottom: 0;
|
|
padding: 32rpx 106rpx 32rpx 56rpx;
|
|
border-radius: 24rpx 24rpx 0 0;
|
|
}
|
|
}
|
|
.top_bg {
|
|
width: 100%;
|
|
height: 530rpx;
|
|
}
|
|
.bottom {
|
|
padding: 34rpx 28rpx;
|
|
}
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&::after {
|
|
display: block;
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 4rpx;
|
|
background-color: #9ee708;
|
|
border-radius: 10rpx;
|
|
z-index: -1;
|
|
width: 94.2rpx;
|
|
height: 13.98rpx;
|
|
flex-shrink: 0;
|
|
stroke-width: 4rpx;
|
|
stroke: #9ee708d6;
|
|
}
|
|
}
|
|
.small-title {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
}
|
|
</style> |