glhcp/uniapp/bundle/pages/user_spread/user_spread.vue

691 lines
18 KiB
Vue
Raw Normal View History

2023-08-10 06:59:52 +00:00
<template>
<view>
<loading-view v-if="showLoading"></loading-view>
<u-notice-bar :show="showTips" mode="horizontal" :list="list" :font-size="26" :close-icon="true" :speed="100"
@close="showTips=false"></u-notice-bar>
<view class="user-spread">
<view class="header p-t-40 m-b-50">
<view class="user-info flex m-l-30">
<view class="user-avatar">
<u-image width="110rpx" height="110rpx" border-radius="60" :src="userInfo.user.avatar" />
</view>
<view class="user-message m-l-20 white">
<view class="m-b-10">
<view class="xxl bold m-r-20">{{userInfo.user.nickname}}</view>
</view>
<view class="avatar-tag white xxs text-center m-b-10" v-if="distributionInfo.level_name">{{distributionInfo.level_name}}</view>
<view class="xs flex">
上级分销商{{userInfo.leader.nickname ? userInfo.leader.nickname : '无'}}
<view v-if="!userInfo.leader.nickname"
class="br60 white write-btn flex row-center m-l-30 xxs" @tap="showInvitePop">填写
</view>
</view>
</view>
</view>
</view>
<view class="main">
<!-- 填表格 -->
<view v-if="vipState == 0" class="user-apply-box">
<view class="user-apply-vip flex-col col-center">
<view class="user-apply-header flex-col col-center">
<view class="title xxl normal">申请成为分销会员</view>
</view>
<view class="vip-form">
<view class="form-item">
<u-field v-model="realName" :label-width="150" label="真实姓名:" :border-bottom="false"
placeholder="请输入您的真实姓名">
</u-field>
</view>
<view class="form-item">
<u-field v-model="mobile" :label-width="150" label="手机号码:" :border-bottom="false"
placeholder="请输入您的手机号码">
</u-field>
</view>
<view class="form-item" @tap="showRegion=true">
<u-field v-model="region" disabled right-icon="arrow-right" :label-width="150"
label="现住省份:" :border-bottom="false" placeholder="请选择省、市、区">
</u-field>
</view>
<view class="form-item">
<u-field v-model="reason" :label-width="150" type="textarea" label="申请原因:"
placeholder="(必填)" :field-style="{ height: '250rpx'}" />
</view>
</view>
</view>
<button class="apply-btn bg-primary white md m-t-20 flex row-center br60" @tap="formSubmit">
立即申请
</button>
<view class="m-t-20 xxs lighter flex row-center">提交成功后我们将会在1-2个工作日内给您回复</view>
</view>
<!-- 申请状态 -->
<view v-if="vipState==1" class="user-result-box">
<view class="user-result flex-col col-center">
<view class="user-result-header flex-col col-center">
<view class="title xxl normal">申请成为分销会员</view>
</view>
<view class="user-result-content flex-col col-center">
<image class="apply-result-img"
:src="applyObject.status == 2 ? '/static/images/icon_fail.png' : '/static/images/icon_success.png'" />
<view class="m-t-10 nr" style="line-height: 40rpx">{{applyObject.status_str}}</view>
<view class="apply-fail-reason sm"
:style="applyObject == 2 ? 'visibility: none' : 'visibility: hidden'">
{{applyObject.reason}}
</view>
</view>
<view class="user-result-info">
<view class="info-item flex nr">
<view class="label">真实姓名</view>
<view class="info-text ml20">{{applyObject.real_name}}</view>
</view>
<view class="info-item flex nr">
<view class="label">手机号码</view>
<view class="info-text ml20">{{applyObject.mobile}}</view>
</view>
<view class="info-item flex nr">
<view class="label">现住省份</view>
<view class="info-text ml20">{{applyObject.province}} {{applyObject.city}}
{{applyObject.district}}
</view>
</view>
<view class="info-item flex nr">
<view class="label">申请原因</view>
<view class="info-text ml20">{{applyObject.reason ? applyObject.reason : '-'}}</view>
</view>
</view>
</view>
<view :class="'white m-t-20 br60 apply-btn flex row-center md bg-primary'" @tap="reApply">
</view>
<view class="m-t-20 xxs lighter flex row-center">提交成功后我们将会在1-2个工作日内给您回复</view>
</view>
<!-- 已申请 -->
<view v-if="vipState==2" class="user-vip">
<view class="user-assets-box">
<view class="user-assets-header flex row-between">
<view class="flex nr bold" style="line-height: 80rpx;color: #8F430E;">
可提现佣金
<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
:price="distributionInfo.able_withdrawal" :color="colorConfig.primary" />
</view>
<navigator hover-class="none" class="primary-btn white flex row-center"
url="/bundle/pages/user_withdraw/user_withdraw">立即提现</navigator>
</view>
<view class="user-assets-content flex flex-wrap">
<view class="user-item flex-col col-center">
<tool-tip v-if="false" class="m-t-20" id="today-profit" content="今日预估收益金额"
style="position: absolute;right: -66rpx;"></tool-tip>
<view class="nr user-assets-name flex" style="color: #8F430E">
今日预估收益
<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
</view>
<view class="assets m-l-20">
<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
:price="distributionInfo.today_earnings" :color="colorConfig.primary" />
</view>
</view>
<view class="user-item flex-col col-center">
<view class="nr user-assets-name flex" style="color: #8F430E">
本月预估收益
<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
</view>
<view class="assets m-l-20">
<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
:price="distributionInfo.month_earnings" :color="colorConfig.primary" />
</view>
</view>
<view class="user-item flex-col col-center">
<view class="nr user-assets-name flex" style="color: #8F430E">
累计获得收益
<!-- <u-icon class="ml10" name="question-circle" size="30rpx" color="#D88D5A" /> -->
</view>
<view class="assets">
<price-format weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
:price="distributionInfo.history_earnings" :color="colorConfig.primary" />
</view>
</view>
</view>
</view>
<view class="mt20 fans-msg-box flex bg-white md">
<router-link class="flex-1" to="/bundle/pages/user_fans/user_fans">
<view class="my-fans flex row-center normal">
我的粉丝 <view class="primary m-l-10">{{distributionInfo.fans}}</view>
<u-icon class="m-l-10" name="arrow-right" size="28rpx" color="#666" />
</view>
</router-link>
</view>
<view class="my-invite-box m-t-20 bg-white flex-col col-center">
<view class="my-invite-title sm normal">我的邀请码</view>
<view class="flex bold m-t-20" style="font-size: 42rpx;line-height: 30rpx">
{{userInfo.user.distribution_code}}
<view class="invite-copy-btn m-l-10 xxs" @click="onCopy"></view>
</view>
<!-- <view class="row-center my-promote-banner bg-primary white">我的推广海报</view> -->
</view>
<view class="usual-tools-box bg-white m-t-20">
<view class="usual-tools-header flex lg bold">
常用工具
</view>
<view class="usual-content flex">
<router-link class="usual-item" to="/bundle/pages/user_spread_order/user_spread_order">
<view class="flex-col col-center">
<image src="/bundle/static/icon_fenxiao.png" class="usual-item-img"></image>
<view class="nr normal m-t-20" style="line-height: 40rpx">分销订单</view>
</view>
</router-link>
<router-link class="usual-item" to="/bundle/pages/commission_details/commission_details">
<view class="flex-col col-center">
<image src="/bundle/static/icon_yongjin.png" class="usual-item-img"></image>
<view class="nr normal m-t-20" style="line-height: 40rpx">佣金明细</view>
</view>
</router-link>
<router-link class="usual-item" to="/bundle/pages/monthly_bill/monthly_bill">
<view class="flex-col col-center">
<image src="/bundle/static/icon_zhangdan.png" class="usual-item-img"></image>
<view class="nr normal m-t-20" style="line-height: 40rpx">月度账单</view>
</view>
</router-link>
</view>
</view>
</view>
</view>
<u-popup v-model="showPop" mode="center" closeable border-radius="30">
<view class="inviteform-contain flex-col col-center">
<view class="title xl">填写邀请人</view>
<view class="input-row flex">
<view style="width: 140rpx;">邀请码</view>
<u-input :clearable="false" v-model="inviteCode" placeholder="请输入邀请码" ></u-input>
</view>
<view class="btn bg-primary white flex row-center" @tap="bindSuperiorFun"></view>
</view>
</u-popup>
<u-select v-model="showRegion" mode="mutil-column-auto" @confirm="regionChange" :list="regionLists">
</u-select>
</view>
</view>
</template>
<script>
import {
bindSuperior,
applyDistribute,
applyDetail,
getSuperiorInfo,
getDistribution,
veryfiyDistribute
} from "@/api/user";
import area from '@/utils/area'
import {
copy
} from '@/utils/tools'
export default {
data() {
return {
list: ['成为分销会员,推广下级可获得额外收益,推广越多收益越多'],
showTips: true,
showLoading: true,
// 弹窗展示
showPop: false,
inviteCode: '',
mobile: '',
realName: '',
reason: '',
region: '',
// 省id
provinceId: -1,
// 市id
cityId: -1,
// 区ID
districtId: -1,
// 推销状态 0 ==> 未申请 1 ==> 申请进度 2 ==> 已申请
vipState: 0,
userInfo: {
user: {},
leader: {}
},
// 审核信息对象
applyObject: {},
// 邀请人状态
inviteStatus: false,
showRegion: false,
regionLists: area,
distributionInfo: {}
};
},
onLoad(options) {
// 获取上级及个人信息
this.getSuperiorInfoFun()
// 判断是否是分销会员
this.veryfiyDistributeFun()
},
methods: {
// 分销会员信息
async getDistributionFun() {
const {
data,
code
} = await getDistribution()
if (code == 1) {
this.showLoading = false
this.distributionInfo = data
}
},
veryfiyDistributeFun() {
veryfiyDistribute().then(res => {
if (res.code == 10001) {
// 分销会员
this.vipState = 2
this.getDistributionFun()
} else if (res.code == 20001) {
// 非分销会员
this.vipState = 0;
this.applyDetailFun()
} else if (res.code == 0) {
// 返回上一页
setTimeout(() => {
uni.navigateBack()
}, 500)
}
})
},
// 最新分销会员申请详情
async applyDetailFun() {
const {
data,
code
} = await applyDetail()
if (code == 1) {
this.showLoading = false
switch (data.status) {
case 0:
// 待审核
case 2:
// 审核不通过
this.vipState = 1;
this.applyObject = data
break;
}
}
},
reApply() {
this.vipState = 0
},
regionChange(region) {
this.region = region[0].label + " " + region[1].label + " " + region[2].label
this.provinceId = region[0].value;
this.cityId = region[1].value;
this.districtId = region[2].value
},
async formSubmit() {
let {
provinceId,
cityId,
districtId,
reason,
mobile,
realName,
region
} = this;
if (!realName) {
this.$toast({
title: "请填写真实姓名"
});
return;
}
if (!region.length) {
this.$toast({
title: "请选择省市区"
});
return;
}
let params = {
real_name: realName,
province: provinceId,
city: cityId,
district: districtId,
reason: reason,
mobile
};
const {
data,
code,
msg
} = await applyDistribute(params)
if (code == 1) {
this.$toast({
title: msg
});
this.applyDetailFun();
}
},
// 填写邀请码
bindSuperiorFun() {
bindSuperior({
code: this.inviteCode
}).then(res => {
this.$toast({
title: res.msg
})
if (res.code == 1) {
this.showPop = false
this.getSuperiorInfoFun();
}
});
},
showInvitePop() {
this.showPop = true;
},
// 获取邀请人信息
async getSuperiorInfoFun() {
const {
data,
code
} = await getSuperiorInfo()
if (code == 1) {
this.userInfo = data
}
},
onCopy() {
copy(this.userInfo.user.distribution_code)
},
}
};
</script>
<style lang="scss">
.user-spread {
background-image: url(../../static/spread_top_bg.png);
background-repeat: no-repeat;
background-size: 100% auto;
.header {
.user-info {
.user-avatar {
position: relative;
}
.avatar-tag {
display: inline-block;
background-color: #F79C0C;
border: 1rpx solid #FFFFFF;
border-radius: 100rpx;
line-height: 32rpx;
padding: 0 10rpx;
}
.user-message {
.write-btn {
height: 42rpx;
width: 100rpx;
background-color: #FF838D;
}
}
}
}
.main {
padding: 0 20rpx;
.user-vip {
.user-assets-box {
background-color: #fff;
border-radius: 20rpx;
padding: 10rpx 20rpx 22rpx;
background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);
.user-assets-header {
border-bottom: 1rpx dashed #8F430E;
padding-bottom: 4rpx;
.primary-btn {
height: 54rpx;
border-radius: 120rpx;
width: 144rpx;
background: linear-gradient(180deg, #FF3067 0%, #FF2C3C 100%);
}
}
.user-assets-content {
margin-top: 30rpx;
.user-item {
flex: 1;
position: relative;
.user-assets-name {
text-align: left;
align-self: flex-start;
}
.assets {
margin-top: 14rpx;
text-align: left;
align-self: flex-start;
}
}
}
}
.fans-msg-box {
border-radius: 10rpx;
line-height: 42rpx;
.my-fans {
height: 120rpx;
}
.line {
width: 3rpx;
height: 60rpx;
background-color: #E5E5E5;
}
.invite-fans {
height: 120rpx;
}
}
.my-invite-box {
padding: 26rpx 0 57rpx;
border-radius: 10rpx;
.invite-copy-btn {
line-height: 30rpx;
padding: 10rpx;
background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
color: #8F430E;
border-radius: 4rpx;
}
.my-promote-banner {
margin-top: 30rpx;
height: 148rpx;
width: 542rpx;
border-radius: 10rpx;
}
}
.usual-tools-box {
border-radius: 10rpx;
padding: 0 25rpx;
.usual-tools-header {
height: 100rpx;
line-height: 44rpx;
border-bottom: $-solid-border;
}
.usual-content {
padding: 40rpx 0;
.usual-item {
width: 25%;
.usual-item-img {
width: 56rpx;
height: 56rpx;
flex: none;
}
}
}
}
}
.user-apply-box {
.user-apply-vip {
background-color: white;
padding: 40rpx 0 0rpx;
border-radius: 20rpx;
.title {
line-height: 30rpx;
font-weight: bold;
}
.explain {
margin-top: 20rpx;
image {
width: 24rpx;
height: 24rpx;
flex: none;
}
span {
font-size: 20rpx;
line-height: 30rpx;
}
}
.vip-form {
width: 100%;
margin-top: 60rpx;
.form-item {
border: $-solid-border;
margin: 0 30rpx 30rpx;
}
}
}
.apply-btn {
line-height: 30rpx;
height: 82rpx;
}
}
.user-result-box {
.user-result {
background-color: white;
padding: 36rpx 14rpx 50rpx;
border-radius: 20rpx;
.user-result-header {
.title {
line-height: 30rpx;
font-weight: bold;
}
}
.user-result-content {
padding: 60rpx 0 22rpx;
width: 100%;
border-bottom: $-solid-border;
.apply-result-img {
width: 100rpx;
height: 100rpx;
}
}
.user-result-info {
margin-top: 42rpx;
width: 100%;
.info-item {
margin-left: 60rpx;
margin-bottom: 28rpx;
line-height: 30rpx;
.label {
width: 140rpx;
}
}
}
}
.apply-btn {
line-height: 30rpx;
height: 82rpx;
}
.bg-gray {
background-color: #CCCCCC;
}
}
}
}
.main .user-apply-box .apply-btn {
line-height: 30rpx;
height: 82rpx;
}
.main .user-result-box .user-result-content .apply-fail-reason {
color: $-color-primary;
line-height: 36rpx;
margin-top: 10rpx;
}
/* 弹窗 */
.inviteform-contain {
padding-left: 30rpx;
padding-right: 30rpx;
padding-bottom: 30rpx;
width: 580rpx;
border-radius: 6rpx;
background-color: $-color-white;
}
.inviteform-contain .title {
padding: 26rpx 0rpx;
}
.inviteform-contain .modify-row {
padding: 32rpx 0px;
width: 100%;
border-bottom: 1rpx solid #E5E5E5;
}
.inviteform-contain .btn {
height: 80rpx;
padding: 0 180rpx;
border-radius: 10rpx;
margin-top: 60rpx;
}
</style>