sadjv3_user/pages/my/applyDistributor/myDistributor.vue

593 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="content-top">
<view class="bgimg">
<view class="bgimg-top">
<view class="bgimg-top-tou">
<u-avatar :src="avatar" size="120" style=" border: 2px solid #F2F2F2;"></u-avatar>
</view>
<view class="bgimg-top-view">
<view class="bgimg-top-money">
<span>{{listData.name}}</span>
<!-- <span>平台</span> -->
<span style="color: #fff;">当前身份{{listData.level}}级分销员</span>
<span v-if="isExpired"
style="color: #ffd502;font-weight: bold;">到期时间:{{calcDqsj(listData)}}(已到期)</span>
</view>
</view>
</view>
<view class="mian">
<view class="mian-title" style="position: relative;">
<view class="mian-title-top">
<span class="money">{{listData.withdrawableAmount}}</span>
<span class="list-title">可提现(元)</span>
</view>
<view class="mian-title-top">
<span class="money">{{listData.notCredited}}</span>
<span class="list-title">未入账(元)</span>
</view>
<!-- <image class="bangzhu" src="../../../static/bangzhu.png" mode=""></image> -->
</view>
<view class="mian-list">
<view class="list-view">
<view class="money">{{listData.income}}</view>
<view class="list-title">累计佣金(元)不含手续费</view>
</view>
<view class="list-view">
<view class="money">{{listData.withdrawal}}</view>
<view class="list-title">已提现(元)</view>
</view>
<!-- <view class="list-view">
<view class="money">{{listData.income}}</view>
<view class="list-title">总成交金额(元)</view>
</view> -->
</view>
<view class="detail-btn" @click="goNav('/pages/my/applyBroker/withdrawal')">
我要提现</view>
</view>
</view>
<view class="mian-bottom">
<view class="mian-bottom-list" @click="goNav('/pages/my/applyBroker/mymoneydetail')">
<image class="mian-bottom-img" src="../../../static/my-gong-17.png" mode=""></image>
<span>我的收益</span>
</view>
<view class="mian-bottom-list" @click="goNav('/pages/my/applyBroker/myInvitation')">
<image class="mian-bottom-img" src="../../../static/my-gong-19.png" mode=""></image>
<span>我的邀请</span>
</view>
<view class="mian-bottom-list" @click="goNav('/pages/my/applyBroker/withdrawalRecord')">
<image class="mian-bottom-img" src="../../../static/navigate.png" mode=""></image>
<span>提现记录</span>
</view>
</view>
<view class="mian-foot">
<view class="mian-foot-top">
<view class="mian-foot-top-list">
<span class="list-title">今日成交订单</span>
<span class="money">{{listData.curOrdersCount}}</span>
</view>
<view class="mian-foot-top-list">
<span class="list-title">累计成交订单</span>
<span class="money">{{listData.ordersCount}}</span>
</view>
</view>
<view class="mian-foot-top" style="margin-top: 10px;">
<view class="mian-foot-top-list">
<span class="list-title">今日邀请粉丝</span>
<span class="money">{{listData.curUserCount}}</span>
</view>
<view class="mian-foot-top-list">
<span class="list-title">累计邀请粉丝</span>
<span class="money">{{listData.userCount}}</span>
</view>
</view>
</view>
<view class="foot-img-list" v-show="!isExpired">
<image class="foot-img" @click="showModal" src="../../../static/suggest-banner2.png" mode=""></image>
<image class="foot-img" @click="showModalNmae" src="../../../static/suggest-banner3.png" mode="">
</image>
</view>
<!-- 分销员 -->
<tki-qrcode ref="qrcode" :val="url" :size="200" background="#fff" foreground="#000" pdground="#000"
:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
<view class="cu-dialog" v-if="backgroundImage && erweimapath && haibaoShow" @tap="hideModal">
<view class="bg-img">
<wm-poster @success="posterSuccess" :imgSrc="backgroundImage"
:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :Title="tuiguang"
:LineType="false"></wm-poster>
</view>
</view>
</view>
<!-- 用户 -->
<tki-qrcode ref="qrcode2" :val="url2" :size="200" background="#fff" foreground="#000" pdground="#000"
:onval="true" :loadMake="true" @result="qrR2" :show="false"></tki-qrcode>
<view class="cu-modal" :class="modalName2 == 'Image' ? 'show' : ''" @tap="hideModal2">
<view class="cu-dialog" v-if="backgroundImage2 && erweimapath2 && haibaoShow2" @tap="hideModal2">
<view class="bg-img">
<wm-poster @success="posterSuccess2" :imgSrc="backgroundImage2"
:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath2" :Title="tuiguang"
:LineType="false"></wm-poster>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import wmPoster from '@/components/wm-poster/wm-posterorders.vue';
export default {
components: {
wmPoster,
tkiQrcode
},
data() {
return {
url: '',
avatar: '',
listData: [],
haibaoImg: null,
haibaoShow: false,
modalName: '',
backgroundImage: '',
erweimapath: '',
invitationCode: '',
tuiguang: '',
url2: '',
haibaoImg2: null,
haibaoShow2: false,
modalName2: '',
backgroundImage2: '',
erweimapath2: '',
configInfo: {},
isExpired:false,//是否过期
}
},
async onLoad() {
this.avatar = uni.getStorageSync('avatar')
this.configInfo = await this.getConfigInfo()
this.getData();
this.getBackImageList();
this.getBackImageList2();
this.getUserInfo();
this.$Request.getT('/app/common/type/116').then(res => {
if (res.code === 0) {
if (res.data && res.data.value) {
this.tuiguang = res.data.value;
this.tuiguang1 = res.data.value;
}
}
});
//检测书否开启APP微信分享
this.$Request.getT('/app/common/type/136').then(res => {
if (res.code === 0) {
if (res.data && res.data.value) {
this.isShowWxAPPShare = res.data.value;
}
}
});
// #ifndef H5
this.$Request.getT('/app/common/type/25').then(res => {
if (res.code === 0) {
if (res.data && res.data.value) {
this.url = res.data.value;
}
}
});
//#endif
},
onShareAppMessage(res) {
return {
path: '/pages/index/index?invitation=' + this.invitationCode, //这是为了传参 onload(data){let id=data.id;}
title: this.tuiguang,
imageUrl: this.bgImg
}
},
methods: {
expired(row) {
if (this.configInfo.fxmLimit == 1) return false;
else {
console.log(111, row.createTime)
const createTime = new Date(row.createTime.replace(' ',
'T')); // Assuming ISO format with space separator
const expireDate = new Date(createTime);
expireDate.setDate(createTime.getDate() + this.configInfo.fxmLimitDays);
const now = new Date(); // Get current date and time
return expireDate < now;
}
},
addDaysToDate(createTimeStr, daysToAdd) {
// 将字符串解析为Date对象
let date = new Date(createTimeStr.replace(' ', 'T'));
// 添加天数
date.setDate(date.getDate() + daysToAdd);
// 格式化输出
let year = date.getFullYear();
let month = String(date.getMonth() + 1).padStart(2, '0');
let day = String(date.getDate()).padStart(2, '0');
let hours = String(date.getHours()).padStart(2, '0');
let minutes = String(date.getMinutes()).padStart(2, '0');
let seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
calcDqsj(row) {
if (this.configInfo.fxmLimit == 1) return '永久'
else return this.addDaysToDate(row.createTime, this.configInfo.fxmLimitDays)
},
getUserInfo() {
this.$Request.get("/app/user/selectUserById").then(res => {
if (res.code == 0) {
this.nickName = res.data.userName
this.invitationCode = res.data.invitationCode
this.userImageUrl = res.data.avatar ? res.data.avatar : '../../static/logo.png'
this.$Request.getT('/app/common/type/141').then(res => {
if (res.code === 0) {
if (res.data && res.data.value && res.data.value == '是') {
this.$Request.getT('/app/common/type/25').then(ress => {
if (ress.code === 0) {
if (ress.data && ress.data.value) {
this.url = ress.data.value;
}
}
});
} else {
// flag=1 分销员邀请用户 flag=2分销员邀请分销员 flag=3经纪人邀请技师
// this.url = this.$queue.publicYuMingApp() + '/?invitation=' + this
// .invitationCode+"&flag=2";
// this.url2 = this.$queue.publicYuMingApp() + '/?invitation=' + this
// .invitationCode+"&flag=1";
this.url = this.$queue.publicYuMingApp() +
'/pages/public/login?blFxyCode=' + this.invitationCode;
this.url2 = this.$queue.publicYuMingApp() +
'/pages/public/login?blFxyCode=' + this.invitationCode;
}
}
});
}
});
},
//分享用户
getBackImageList() {
this.haibaoImg = null;
this.$Request.get("/app/commission/fxy/poster").then(res => {
uni.hideLoading();
if (res.code == 0) {
this.backgroundImage2 = res.data.userImage
}
});
},
//分享分销员
getBackImageList2() {
this.haibaoImg = null;
this.$Request.get("/app/commission/fxy/poster").then(res => {
uni.hideLoading();
if (res.code == 0) {
this.backgroundImage = res.data.fxyImage;
}
});
},
hideModal() {
this.modalName = null;
},
hideModal2() {
this.modalName2 = null;
},
//分销员
qrR(path) {
this.erweimapath = path;
},
//用户
qrR2(path) {
this.erweimapath2 = path;
},
posterSuccess(haibaoImg) {
this.haibaoImg = haibaoImg;
this.modalName = 'Image';
},
posterSuccess2(haibaoImg) {
this.haibaoImg2 = haibaoImg;
this.modalName2 = 'Image';
},
showModalNmae() {
if (!this.haibaoImg2) {
this.haibaoShow2 = true;
this.$queue.showLoading('海报生成中...');
} else {
this.modalName2 = 'Image';
}
},
showModal() {
if (!this.haibaoImg) {
this.haibaoShow = true;
this.$queue.showLoading('海报生成中...');
} else {
this.modalName = 'Image';
}
},
goNav(link) {
uni.navigateTo({
url: link + '?navName=' + '分销员'
})
},
getData() {
this.$Request.get("/app/commission/fxy/myFxy").then(res => {
console.log("res.data--->", res.data);
if (res.code == 0) {
this.listData = res.data
this.isExpired = this.expired(res.data)
}
});
},
getConfigInfo() {
return new Promise((resolve, reject) => {
this.$Request.get("/app/commission/fxy/fxyConfig")
.then(({
data
}) => {
return resolve(data)
}).catch(error => {
resolve({});
});
});
}
}
}
</script>
<style scoped>
.mian-foot-top-list span:nth-child(1) {
margin-bottom: 5px;
}
.mian-foot-top-list {
display: flex;
flex-direction: column;
}
.mian-foot-top {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.mian-foot {
width: 93%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.bangzhu {
width: 15px;
height: 15px;
position: absolute;
right: 0;
margin-right: -20px;
top: 0;
margin-top: -10px;
}
.mian-title-top {
display: flex;
flex-direction: column;
align-items: center;
}
.foot-img-list {
width: 92%;
margin: 0 auto;
}
.foot-img image {
width: 100%;
height: 100%;
}
.foot-img {
width: 100%;
height: 180rpx;
margin: 0 auto;
margin-top: 20rpx;
}
.mian-bottom-list span {
color: #333;
font-size: 14px;
font-weight: bold;
margin-top: 5px;
}
.mian-bottom-list {
width: 30%;
display: flex;
flex-direction: column;
align-items: center;
}
.mian-bottom-img {
height: 40px;
width: 40px;
flex: 0 0 40px;
background-color: transparent;
border-radius: 500px;
}
.mian-bottom {
width: 93%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 185px;
}
.mian-top-title {
color: #333;
font-size: 16px;
font-weight: bold;
}
.money {
color: #333;
font-size: 15px;
font-weight: bold;
}
.list-title {
margin-top: 5px;
font-size: 12px;
color: #B8B8B8;
font-weight: 400;
}
.list-view {
width: 30%;
display: flex;
flex-direction: column;
align-items: center;
}
.mian-list {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
.mian-title {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
margin-bottom: 15px;
}
.mian {
width: 100%;
margin: 0 auto;
background-color: #fff;
border-radius: 10px;
padding: 15px 26px;
display: flex;
flex-direction: column;
margin-top: 15px;
}
.detail-btn {
display: inline-block;
width: 92%;
text-align: center;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
height: 40px;
border-radius: 28px;
color: #ffffff;
line-height: 40px;
margin: 0 auto;
margin-top: 4px;
font-size: 34rpx;
}
.content-top {
width: 100%;
height: 100%;
}
.content {
width: 100%;
height: 100vh;
padding-bottom: 10rpx;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f7f7f7), url('../../../static/background-img.png');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
page {
background-color: #F7F7F7;
}
.bgimg-top-money span:nth-child(1) {
font-weight: bold;
font-size: 43rpx;
color: #FFFFFF;
}
.bgimg-top-money span:nth-child(2) {
font-weight: 400;
font-size: 25rpx;
color: #FFFFFF;
margin-top: 4px;
}
.bgimg-top-money {
display: flex;
flex-direction: column;
margin-left: 10px;
}
.bgimg-top-view {
width: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.bgimg-top {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 15rpx;
}
.bgimg {
background: url(../../../static/wallet/reduce.png);
background-size: cover;
width: 100%;
height: 150px;
position: relative;
margin: 0px auto 10px auto;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 15px;
}
.mingxi {
width: 140rpx;
height: 42rpx;
line-height: 42rpx;
text-align: center;
background: #F5F7FB;
border-radius: 21rpx;
font-weight: bold;
font-size: 22rpx;
color: #333333;
}
</style>