front-end/jdApp/src/pagesInvite/list.vue

<template>
	<view class="invite-page app-content">
		<view class="info-view">
			<view class="info-main">
				<app-avatar-module :width="100" />
				<view class="content">
					<view class="name"> {{ userInfo.name || "" }}</view>
					<view class="mark"> 普通等级 </view>
				</view>
				<button class="user-wrap-right" @tap="inviteHd()">
					<img :src="`${constant.imgUrl}/retail/interest/invite-store.png`" mode="widthFix" />
				</button>
				<button class="user-wrap-right" @tap="inviteGhs()">
					<img :src="`${constant.imgUrl}/ghs/me/yqghs.png`" mode="widthFix" />
				</button>
			</view>
			<view class="info-list">
				<view class="info-item">
					<view class="item-value">{{ invitedNum || 0 }}</view>
					<view class="item-name">已邀请</view>
				</view>
				<view class="info-item">
					<view class="item-value">{{ payNum || 0 }}</view>
					<view class="item-name">已购买</view>
				</view>
				<view class="info-item">
					<view class="item-value">{{ income || 0.00 }}</view>
					<view class="item-name">累计收益</view>
				</view>
			</view>
		</view>
		<view class="list-title">
			邀请列表
		</view>
		<view class="tabs">
			<Tabs
				:tabs="tabs"
				:currentTab="tabIndex"
				@change="change"
				:itemWidth="'20%'"
				:padding="0"
			></Tabs>
		</view>
		<view class="invite-list">
			<block v-if="!$util.isEmpty(list.data)">
				<InviteItem v-for="(item, index) in list.data" :info="item" :key="index">
				</InviteItem>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无记录" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</view>
	</view>
</template>
<script>
import Tabs from "@/components/plugin/tabs";
import InviteItem from "./inviteItem";
import { appyleListApi,getWeixinId } from "@/api/invite/index";
import { list } from "@/mixins";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import AppAvatarModule from "@/components/module/app-avatar";
import {mapGetters} from 'vuex'
export default {
	name: "pagesInvite",
	components: {
		Tabs,
		InviteItem,
		AppWrapperEmpty,
		AppAvatarModule
	},
	mixins: [list],
	computed: {
		...mapGetters({ userInfo: "getUser",loginInfo: "getLoginInfo"})
	},
	data() {
		return {
			merchantInfo: {},
			pageIndex: 0,
			constant: this.$constant,
			tabIndex: 0,
			tabs: [
				{
					name: "全部",
					key: "0"
				},
				{
					name: "待审核",
					key: "1"
				},
				{
					name: "试用中",
					key: "2"
				},
				{
					name: "已购买",
					key: "4"
				}
			],
			invitedNum: "", //已邀请
			payNum: "", //已付费数量
			income: "" //累计收益
		};
	},
	onLoad() {},
	onPullDownRefresh() {
		this.resetList();
		console.log(2222)
		this._list().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (!this.list.finished) {
			this._list().then(res => {
				uni.stopPullDownRefresh();
			});
		} else {
			uni.stopPullDownRefresh();
		}
	},
	mounted(){
	},
	methods: {
		inviteGhs(){
			this.$msg('开发中')
			return false
			this.pageTo({url: '/pagesInvite/inviteGhsShop'})
		},
		inviteHd(){
			this.$msg('开发中')
			return false
			this.pageTo({url: '/pagesInvite/inviteShop'})

			//查看分享的路径，不要删除 shish 20210517
			// console.log('pagesClient/official/index','ghsShopAdminId='+ this.loginInfo.shopAdminId)

			// getWeixinId().then(res => {
			// 	uni.navigateToMiniProgram({
			// 		appId: res.data.hd.miniAppId,
			// 		path: 'pagesClient/official/index?ghsShopAdminId='+this.loginInfo.shopAdminId,
			// 		//develop 开发板 trial 体验版 release 正式版
			// 		envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
			// 		extraData: {
			// 			//'ghsShopAdminId': this.loginInfo.shopAdminId
			// 		},
			// 		success(res) {
			// 			// 打开成功
			// 		}
			// 	})
			// });

		},
		async init() {
			this._list();
		},
		_list() {
			return appyleListApi({
				status: this.tabs[this.tabIndex].key,
				page: this.list.page,
				pageSize: this.list.pageSize
			}).then(res => {
				const {
					data: { invitedNum, payNum, income }
				} = res;
				this.invitedNum = invitedNum;
				this.payNum = payNum;
				this.income = income;
				this.completes(res);
			});
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
				this.resetList();
				this._list();
			}
		},
		changePageTab(e) {
			if (this.pageIndex == e.index) {
				return false;
			} else {
				this.pageIndex = e.index;
				this.resetList();
				this._list();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.invite-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	.info-view {
		margin-top: 20upx;
		padding: 40upx 30upx;
		background-color: #fff;
		.info-main {
			display: flex;
			align-items: center;
			.logo {
				flex-shrink: 0;
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
			}
			.content {
				flex: 1;
				margin: 0 20upx;
				.name {
					font-size: 32upx;
					font-weight: 400;
					color: #040404;
				}
				.mark {
					margin-top: 10upx;
					font-size: 24upx;
					font-weight: 400;
					color: #999999;
				}
			}
			.user-wrap-right {
			width: 180upx;
			background-color: #fff;
			margin-right: 0;
			padding: 0;
			&::after {
				border: none;
			}
			}
			.btn {
				flex-shrink: 0;
				height: 80upx;
			}
		}
		.info-list {
			margin-top: 50upx;
			display: flex;
			.info-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				.item-name {
					margin-top: 15upx;
					font-size: 24upx;
					font-weight: 400;
					color: #999999;
				}
				.item-value {
					font-size: 30upx;
					font-family: DIN Alternate;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
	.list-title {
		padding: 30upx 30upx 15upx;
		font-size: 24upx;
		font-weight: 400;
		color: #999999;
	}
	.invite-list {
		flex: 1;
		padding-bottom: 50upx;
	}
}
</style>