|
|
@@ -0,0 +1,614 @@
|
|
|
+<template>
|
|
|
+ <view :style="colorStyle">
|
|
|
+ <view class="acea-row nav">
|
|
|
+ <view
|
|
|
+ class="acea-row row-center-wrapper"
|
|
|
+ :class="{ on: nav === 1 }"
|
|
|
+ @click="navTab(1)"
|
|
|
+ >团队人数
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="acea-row row-center-wrapper"
|
|
|
+ :class="{ on: nav === 2 }"
|
|
|
+ @click="navTab(2)"
|
|
|
+ >直荐人数
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="acea-row row-center-wrapper"
|
|
|
+ :class="{ on: nav === 3 }"
|
|
|
+ @click="navTab(3)"
|
|
|
+ >创客人数
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-body">
|
|
|
+ <view class="number_of_members" v-show="nav === 1">
|
|
|
+ <view class="members_top">
|
|
|
+ <text class="integral">0.0积分</text>
|
|
|
+ <text class="explain">团队收益</text>
|
|
|
+ </view>
|
|
|
+ <view class="members_list">
|
|
|
+ <view
|
|
|
+ class="item acea-row row-between-wrapper"
|
|
|
+ v-for="(item, index) in orderList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="text-info">
|
|
|
+ {{ item.createTime }}
|
|
|
+ </view>
|
|
|
+ <view class="left">
|
|
|
+ <view class="state">
|
|
|
+ <view class="order">{{ index + 1 }}</view>
|
|
|
+ <img :src="item.avatar" alt="" />
|
|
|
+ <view class="s-r">
|
|
|
+ <text>
|
|
|
+ {{ item.name }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="op-area">
|
|
|
+ <u-button type="primary" shape="circle"> 联系他 </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="direct_of_push" v-show="nav === 2">
|
|
|
+ <view class="push_top">
|
|
|
+ <text class="integral">0.0积分</text>
|
|
|
+ <text class="explain">直推收益</text>
|
|
|
+ </view>
|
|
|
+ <view class="pus_list">
|
|
|
+ <view
|
|
|
+ class="item acea-row row-between-wrapper"
|
|
|
+ v-for="(item, index) in integralList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="text-info">
|
|
|
+ {{ item.createTime }}
|
|
|
+ </view>
|
|
|
+ <view class="left">
|
|
|
+ <view class="state">
|
|
|
+ <view class="order">{{ index + 1 }}</view>
|
|
|
+ <img :src="item.avatar" alt="" />
|
|
|
+ <view class="s-r">
|
|
|
+ <text>
|
|
|
+ {{ item.name }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="op-area">
|
|
|
+ <u-button type="primary" shape="circle"> 联系他 </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mark_of_members" v-show="nav === 3">
|
|
|
+ <view class="mark_top">
|
|
|
+ <text class="integral">0.0积分</text>
|
|
|
+ <text class="explain">直推收益</text>
|
|
|
+ </view>
|
|
|
+ <view class="mark_list">
|
|
|
+ <view
|
|
|
+ class="item acea-row row-between-wrapper"
|
|
|
+ v-for="(item, index) in makerList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="text-info">
|
|
|
+ {{ item.createTime }}
|
|
|
+ </view>
|
|
|
+ <view class="left">
|
|
|
+ <view class="state">
|
|
|
+ <view class="order">{{ index + 1 }}</view>
|
|
|
+ <img :src="item.avatar" alt="" />
|
|
|
+ <view class="s-r">
|
|
|
+ <text>
|
|
|
+ {{ item.name }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="op-area">
|
|
|
+ <u-button type="primary" shape="circle"> 联系他 </u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ userRecomPage,
|
|
|
+ makerPage
|
|
|
+} from '@/api/home.js';
|
|
|
+import dayjs from '@/plugin/dayjs/dayjs.min.js';
|
|
|
+import {
|
|
|
+ toLogin
|
|
|
+} from '@/libs/login.js';
|
|
|
+import {
|
|
|
+ mapGetters
|
|
|
+} from "vuex";
|
|
|
+// #ifdef MP
|
|
|
+import authorize from '@/components/Authorize';
|
|
|
+// #endif
|
|
|
+import emptyPage from '@/components/emptyPage.vue';
|
|
|
+import colors from '@/mixins/color'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ // #ifdef MP
|
|
|
+ authorize,
|
|
|
+ // #endif
|
|
|
+ emptyPage
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ dateFormat: function (value) {
|
|
|
+ return dayjs(value * 1000).format('YYYY-MM-DD');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mixins: [colors],
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ nav: 1, // 1：发票记录 2：抬头管理
|
|
|
+ current: 0,
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ integralList: [],
|
|
|
+ userInfo: {},
|
|
|
+ loadend: false,
|
|
|
+ loading: false,
|
|
|
+ loadTitle: this.$t(`加载更多`),
|
|
|
+ isAuto: false, //没有授权的不会自动授权
|
|
|
+ isShowAuth: false, //是否隐藏授权
|
|
|
+ orderList: [],
|
|
|
+ makerList: [],
|
|
|
+ invoiceList: [],
|
|
|
+
|
|
|
+ isTime: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: mapGetters(['isLogin']),
|
|
|
+ watch: {
|
|
|
+ nav: {
|
|
|
+ immediate: true,
|
|
|
+ handler (value) {
|
|
|
+ this.page = 1;
|
|
|
+ switch (value) {
|
|
|
+ case 1:
|
|
|
+ this.orderList = [];
|
|
|
+ this.getOrderList();
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ this.invoiceList = [];
|
|
|
+ this.getIntegralList();
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ this.makerList = [];
|
|
|
+ this.getMakerPage();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isLogin: {
|
|
|
+ handler: function (newV, oldV) {
|
|
|
+ if (newV) {
|
|
|
+ // this.getUserInfo();
|
|
|
+ // this.userRecomPage();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad () {
|
|
|
+ if (this.isLogin) {
|
|
|
+ // this.getUserInfo();
|
|
|
+ // this.getIntegralList();
|
|
|
+ } else {
|
|
|
+ toLogin();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ onReachBottom: function () {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 菜单切换
|
|
|
+ navTab (nav) {
|
|
|
+ if (this.nav !== nav) {
|
|
|
+ this.nav = nav;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 授权回调
|
|
|
+ */
|
|
|
+ onLoadFun: function () {
|
|
|
+ this.getUserInfo();
|
|
|
+ },
|
|
|
+ // 授权关闭
|
|
|
+ authColse: function (e) {
|
|
|
+ this.isShowAuth = e
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取积分明细
|
|
|
+ */
|
|
|
+
|
|
|
+ getOrderList: function () {
|
|
|
+ let that = this;
|
|
|
+ if (that.loading) return;
|
|
|
+ // if (that.loadend) return;
|
|
|
+ that.loading = true;
|
|
|
+ that.loadTitle = '';
|
|
|
+ userRecomPage({
|
|
|
+ type: 1,
|
|
|
+ userId: this.$store.state.app.uid,
|
|
|
+ current: that.page,
|
|
|
+ size: that.limit
|
|
|
+ }).then(function (res) {
|
|
|
+ let list = res.data,
|
|
|
+ loadend = list.length < that.limit;
|
|
|
+ that.$set(that, 'orderList', list);
|
|
|
+ that.page = that.page + 1;
|
|
|
+ that.loading = false;
|
|
|
+ that.loadend = loadend;
|
|
|
+ that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
|
|
|
+ }, function (res) {
|
|
|
+ this.loading = false;
|
|
|
+ that.loadTitle = that.$t(`加载更多`);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getIntegralList: function () {
|
|
|
+ let that = this;
|
|
|
+ if (that.loading) return;
|
|
|
+ // if (that.loadend) return;
|
|
|
+ that.loading = true;
|
|
|
+ that.loadTitle = '';
|
|
|
+ userRecomPage({
|
|
|
+ type: 2,
|
|
|
+ userId: this.$store.state.app.uid,
|
|
|
+ current: that.page,
|
|
|
+ size: that.limit
|
|
|
+ }).then(function (res) {
|
|
|
+ let list = res.data,
|
|
|
+ loadend = list.length < that.limit;
|
|
|
+ // that.integralList = that.$util.SplitArray(list, that.integralList);
|
|
|
+ that.$set(that, 'integralList', list);
|
|
|
+ that.page = that.page + 1;
|
|
|
+ that.loading = false;
|
|
|
+ that.loadend = loadend;
|
|
|
+ that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
|
|
|
+ }, function (res) {
|
|
|
+ this.loading = false;
|
|
|
+ that.loadTitle = that.$t(`加载更多`);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getMakerPage: function () {
|
|
|
+ let that = this;
|
|
|
+ console.log(that.loading,that.loadend);
|
|
|
+ if (that.loading) return;
|
|
|
+ // if (that.loadend) return;
|
|
|
+ that.loading = true;
|
|
|
+ that.loadTitle = '';
|
|
|
+ makerPage({
|
|
|
+ userId: this.$store.state.app.uid,
|
|
|
+ current: that.page,
|
|
|
+ size: that.limit
|
|
|
+ }).then(function (res) {
|
|
|
+ let list = res.data,
|
|
|
+ loadend = list.length < that.limit;
|
|
|
+ // that.makerList = that.$util.SplitArray(list, that.makerList);
|
|
|
+ that.$set(that, 'makerList', list);
|
|
|
+ that.page = that.page + 1;
|
|
|
+ that.loading = false;
|
|
|
+ that.loadend = loadend;
|
|
|
+ that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
|
|
|
+ }, function (res) {
|
|
|
+ this.loading = false;
|
|
|
+ that.loadTitle = that.$t(`加载更多`);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ nav: function (current) {
|
|
|
+ this.current = current;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.nav {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9;
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.nav .acea-row {
|
|
|
+ flex: 1;
|
|
|
+ border-top: 3rpx solid transparent;
|
|
|
+ border-bottom: 3rpx solid transparent;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #282828;
|
|
|
+}
|
|
|
+
|
|
|
+.nav .on {
|
|
|
+ border-bottom-color: var(--view-theme);
|
|
|
+ color: var(--view-theme);
|
|
|
+}
|
|
|
+
|
|
|
+.main-body {
|
|
|
+ margin-top: 90rpx;
|
|
|
+
|
|
|
+ .number_of_members {
|
|
|
+ .members_top {
|
|
|
+ height: 150rpx;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .integral {
|
|
|
+ flex: 1;
|
|
|
+ color: #ff4b4b;
|
|
|
+ font-size: 38rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .explain {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .members_list {
|
|
|
+ .item {
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ background: white;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .text-info {
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ .order {
|
|
|
+ margin: auto 0;
|
|
|
+ text-align: center;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ background: rgb(200, 153, 75);
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-r {
|
|
|
+ font-size: 34rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .op-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ /deep/ .u-button {
|
|
|
+ height: 60rpx;
|
|
|
+ width: 200rpx !important;
|
|
|
+ margin: auto 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .num {
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .direct_of_push {
|
|
|
+ .push_top {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .integral {
|
|
|
+ flex: 1;
|
|
|
+ color: #ff4b4b;
|
|
|
+ font-size: 38rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .explain {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pus_list {
|
|
|
+ .item {
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ background: white;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .text-info {
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ .order {
|
|
|
+ margin: auto 0;
|
|
|
+ text-align: center;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ background: rgb(200, 153, 75);
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-r {
|
|
|
+ font-size: 34rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .op-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ /deep/ .u-button {
|
|
|
+ height: 60rpx;
|
|
|
+ width: 200rpx !important;
|
|
|
+ margin: auto 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .num {
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mark_of_members {
|
|
|
+ .mark_top {
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .integral {
|
|
|
+ flex: 1;
|
|
|
+ color: #ff4b4b;
|
|
|
+ font-size: 38rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .explain {
|
|
|
+ flex: 2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mark_list {
|
|
|
+ .item {
|
|
|
+ line-height: 50rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ background: white;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .text-info {
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .state {
|
|
|
+ height: 100rpx;
|
|
|
+
|
|
|
+ .order {
|
|
|
+ margin: auto 0;
|
|
|
+ text-align: center;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ background: rgb(200, 153, 75);
|
|
|
+ color: white;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ image {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-r {
|
|
|
+ font-size: 34rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .op-area {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ flex-grow: 1;
|
|
|
+
|
|
|
+ /deep/ .u-button {
|
|
|
+ height: 60rpx;
|
|
|
+ width: 200rpx !important;
|
|
|
+ margin: auto 0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .num {
|
|
|
+ height: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
suwadaimyojin