400 lines
10 KiB
Vue
400 lines
10 KiB
Vue
<template>
|
||
<view class="min-h-100vh bg-gray">
|
||
<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="box type1">
|
||
<view class="u-flex align-center justify-between">
|
||
<view class="u-flex align-center">
|
||
<up-avatar size="62rpx" />
|
||
<text class="u-m-l-14 font-14 color-333 font-700"
|
||
>这里是店铺名称</text
|
||
>
|
||
</view>
|
||
<view>
|
||
<template v-if="false">
|
||
<view class="font-12 color-666"> 上级：用户昵称15812340001 </view>
|
||
</template>
|
||
<template v-if="true">
|
||
<view class="bind" @click="showBindShangji = true">
|
||
绑定上级
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="top_content u-m-t-32" v-if="false">
|
||
<template v-if="false">
|
||
<view class="color-333 font-16 font-700"> 如何成为分销员 </view>
|
||
<view class="u-m-t-16 color-666 font-14">
|
||
<view> 需要邀请人数：1000人</view>
|
||
<view>是否需要邀请人数下单：是/否</view>
|
||
<view>每人可获得的分销奖励次数：永久/X次</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="false">
|
||
<view class="color-333 font-16 font-700 text-center">
|
||
如何成为分销员
|
||
</view>
|
||
<view class="u-m-t-16 color-666 font-14 text-center">
|
||
<view>只需付费X元，即可成为分销员</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="false">
|
||
<view class="color-333 font-16 font-700 text-center">
|
||
如何成为分销员
|
||
</view>
|
||
<view class="u-m-t-16 color-666 font-14 text-center">
|
||
<view>请联系商家咨询详情</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
<view class="top_content type1 u-m-t-32">
|
||
<template v-if="true">
|
||
<view class="font-14">
|
||
<view>
|
||
<text class="color-666">我的分销等级：</text>
|
||
<text class="color-333 font-700">一级 普通分销员</text>
|
||
</view>
|
||
<view class="u-m-t-28 u-flex align-center">
|
||
<text class="color-666">距离下一级还差：</text>
|
||
<text class="color-333 font-700 u-m-r-18">100人 </text>
|
||
<up-icon name="question-circle" size="24rpx" color="#666" />
|
||
</view>
|
||
<view class="u-flex u-m-t-28">
|
||
<view class="u-flex-1">
|
||
<view class="u-flex align-center">
|
||
<text class="u-m-r-10 font-12 color-666">总收益</text>
|
||
<up-icon name="question-circle" size="24rpx" color="#666" />
|
||
</view>
|
||
<view class="u-m-t-16 price">9925.56</view>
|
||
</view>
|
||
<view class="u-flex-1">
|
||
<view class="u-flex align-center">
|
||
<text class="u-m-r-10 font-12 color-666">待入账</text>
|
||
<up-icon name="question-circle" size="24rpx" color="#666" />
|
||
</view>
|
||
<view class="u-m-t-16 price">9925.56</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="false">
|
||
<view class="bottom">
|
||
<view class="u-flex">
|
||
<view class="title">规则说明</view>
|
||
</view>
|
||
<view>
|
||
<template v-if="true">
|
||
<view class="font-12 color-666 u-m-t-16">
|
||
<view>
|
||
<view> 我的收益什么时候可以到账？</view>
|
||
<view> 分销的结算时长为X天</view>
|
||
</view>
|
||
<view class="u-m-t-40">
|
||
<view>怎么样才能升级分销员等级？</view>
|
||
<view>邀请的有效人数达到X人即可升级</view>
|
||
<view> 消费金额总计达到X元即可升级</view>
|
||
<view> 什么是有效邀请人数？</view>
|
||
<view>被邀请人在店铺消费过，即有一笔订单完成才算有效</view>
|
||
</view>
|
||
<view class="u-m-t-40">
|
||
<view>消费金额如何计算？</view>
|
||
<view
|
||
>消费金额是计算您和您邀请的人在店铺消费的总金额，但退款订单不计入</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="parse-html">
|
||
<up-parse :content="content"></up-parse>
|
||
</view>
|
||
</template>
|
||
<view class="bottom type1" v-if="true">
|
||
<view class="u-flex justify-between align-center">
|
||
<view class="u-flex align-center">
|
||
<view class="color-333 font-16 u-m-r-6">我的下级（30/10）</view>
|
||
<up-icon name="question-circle" size="24rpx" color="#666" />
|
||
</view>
|
||
<view class="font-10 color-999">一级分成1.99%二级分成3.99%</view>
|
||
</view>
|
||
|
||
<view class="u-m-t-48 font-14">
|
||
<view class="u-flex justify-between color-333">
|
||
<view>用户</view>
|
||
<view>获得利益</view>
|
||
<view>邀请时间</view>
|
||
</view>
|
||
<view class="u-m-t-16">
|
||
<view
|
||
v-for="(item, index) in 3"
|
||
:key="index"
|
||
class="u-flex justify-between align-center recoder-item color-666 font-12"
|
||
>
|
||
<view class="">
|
||
<view>用户昵称</view>
|
||
<view>158****0001</view>
|
||
</view>
|
||
<view>0（一级）</view>
|
||
<view>2025/03/18 19:12</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tips u-m-t-32"
|
||
>您的分销员身份已取消，不再获得分成有疑问可联系商家</view
|
||
>
|
||
|
||
<view class="u-flex justify-center bottom-btn">
|
||
<view class="copy" @click="copyCode">
|
||
<view>复制邀请码</view>
|
||
<view>123457891231</view>
|
||
</view>
|
||
<view class="u-flex u-flex-col justify-center">
|
||
<view class="share" @click="showSharePopup=true">分享邀请</view>
|
||
</view>
|
||
</view>
|
||
<bindShangji v-model="showBindShangji"></bindShangji>
|
||
<sharePopup v-model="showSharePopup"></sharePopup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import bindShangji from "./components/bind-shangji.vue";
|
||
import sharePopup from "./components/share-popup.vue";
|
||
const showBindShangji = ref(false);
|
||
const showSharePopup=ref(false);
|
||
import { ref } from "vue";
|
||
const content = ref("123");
|
||
function back() {
|
||
uni.navigateBack({
|
||
delta: 1,
|
||
});
|
||
}
|
||
function copyCode() {
|
||
uni.setClipboardData({
|
||
data: "hello",
|
||
success: function () {
|
||
console.log("success");
|
||
},
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.input-number-box {
|
||
width: 428rpx;
|
||
padding-bottom: 10rpx;
|
||
border-bottom: 1px solid #999;
|
||
font-size: 28rpx;
|
||
align-items: baseline;
|
||
.fuhao {
|
||
font-size: 64rpx;
|
||
color: #333;
|
||
}
|
||
.input-number {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
padding-left: 24rpx;
|
||
padding-right: 10rpx;
|
||
}
|
||
.all-in {
|
||
font-size: 28rpx;
|
||
color: #fe7e00;
|
||
}
|
||
}
|
||
.list {
|
||
.shop-item {
|
||
padding: 32rpx 28rpx;
|
||
border-bottom: 2rpx solid #ededed;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
display: flex;
|
||
align-items: center;
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.fufei {
|
||
color: #e8ad7b;
|
||
}
|
||
.tag {
|
||
font-size: 24rpx;
|
||
color: #ff1c1c;
|
||
background-color: #ffe4e4;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
.name {
|
||
color: #333;
|
||
font-weight: 700;
|
||
}
|
||
.shouxufei {
|
||
}
|
||
.shouyi {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.status {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
text-align: right;
|
||
color: #333333;
|
||
&.fail {
|
||
color: #ff1c1c;
|
||
}
|
||
}
|
||
.lingqu {
|
||
font-size: 28rpx;
|
||
border-radius: 8rpx;
|
||
background: #fe6d11;
|
||
padding: 8rpx 16rpx;
|
||
color: #ffffff;
|
||
}
|
||
.price {
|
||
font-weight: 700;
|
||
font-size: 40rpx;
|
||
color: #333;
|
||
}
|
||
.top {
|
||
position: relative;
|
||
.box {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
padding: 28rpx 28rpx 52rpx 28rpx;
|
||
&.type1 {
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
.top_content {
|
||
border: 1px solid rgba(255, 255, 255, 0.8);
|
||
border-radius: 16rpx;
|
||
flex-shrink: 0;
|
||
fill: #ffffff3b;
|
||
stroke-width: 2rpx;
|
||
padding: 32rpx 28rpx;
|
||
stroke: #fff;
|
||
filter: drop-shadow(2rpx -4rpx 13.4rpx #ff6f0124);
|
||
backdrop-filter: blur(5.1rpx);
|
||
&.type1 {
|
||
filter: none;
|
||
border: none;
|
||
background-color: #fcf5ed;
|
||
border-radius: 36rpx 36rpx 0 0 ;
|
||
padding: 32rpx 36rpx;
|
||
}
|
||
}
|
||
}
|
||
.btn-group {
|
||
position: absolute;
|
||
right: 28rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
.btn {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
border: 2rpx solid #fe6d11;
|
||
&.shiming {
|
||
color: #fe6d11;
|
||
}
|
||
&.tixian {
|
||
color: #fff;
|
||
background-color: #fe6d11;
|
||
}
|
||
}
|
||
}
|
||
.tips {
|
||
padding: 16rpx 18rpx;
|
||
background: #ffe2e2;
|
||
padding: 16rpx 18rpx;
|
||
font-size: 28rpx;
|
||
line-height: 48rpx;
|
||
color: #ff1c1c;
|
||
}
|
||
.bind {
|
||
padding: 8rpx 32rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 24rpx;
|
||
border: 2rpx solid #fe6d11;
|
||
color: #fff;
|
||
background-color: #fe6d11;
|
||
}
|
||
.top_bg {
|
||
width: 100%;
|
||
height: 580rpx;
|
||
}
|
||
.bottom {
|
||
margin: 0 28rpx;
|
||
border-radius: 36rpx;
|
||
background-color: #fff;
|
||
transform: translateY(-20rpx);
|
||
padding: 32rpx 28rpx;
|
||
&.type1 {
|
||
transform: translateY(0);
|
||
margin: 0;
|
||
padding-bottom: 42rpx;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
.small-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
.parse-html {
|
||
margin: 32rpx 28rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.recoder-item {
|
||
padding: 16rpx 0;
|
||
border-bottom: 2rpx solid #ededed;
|
||
}
|
||
.share {
|
||
border-radius: 16rpx;
|
||
background: #e8ad7b;
|
||
padding: 14rpx 76rpx;
|
||
font-size: 32rpx;
|
||
line-height: 48rpx;
|
||
color: #fff;
|
||
}
|
||
.copy {
|
||
padding: 4rpx 30rpx;
|
||
border-radius: 18rpx;
|
||
border: 2rpx solid #e8ad7b;
|
||
background: #fff;
|
||
font-size: 28rpx;
|
||
color: #e8ad7b;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
}
|
||
.bottom-btn {
|
||
position: fixed;
|
||
left: 84rpx;
|
||
right: 84rpx;
|
||
bottom: 100rpx;
|
||
white-space: nowrap;
|
||
gap: 54rpx;
|
||
}
|
||
</style> |