zh_order_food_xcx/pages-my/my-team.vue

<template>
	<view class="flex-common-css iPhone-bottom  box-border-box seckill-box">
		<Nav title="我的团队" bgckgroundBox='transparent' leftColor='#fff' titleColor='#fff'></Nav>
		<view class="p-24 box-border-box">
			<view class="zzc-box b-rad-20 bgc-f">
				<view class="flex-direction align-items-center flex-justify-center user-box">
					<image class="user-image mb-20 b-rad-50" :src="userImg" mode=""></image>
					<view class="fs-32 fc-3 fw-400">
						{{userName}}
					</view>
				</view>
				<view class="ewm-box bgc-FAE5E2 align-items-center" @click="openPop">
					<uni-icons type="image" size="18" color="#F0372F" class="mr-8"></uni-icons>
					<view class="fc-F0372F fs-28">
						推广码
					</view>
				</view>
				<view class="total-box align-items-center box-border-box">
					<view class="fs-28 fc-9 mr-40">
						一级人数：<text class="fs-28 fc-3">{{one_num || 0}}人</text>
					</view>
					<view class="fs-28 fc-9">
						二级人数：<text class="fs-28 fc-3">{{two_num || 0}}人</text>
					</view>
				</view>
			</view>
		</view>
		<view class="plr-24 box-border-box">
			<view class="p-24 box-border-box bgc-f sx-box align-items-center flex-justify-space">
				<view class="fs-32 fc-3 fw-600">
					团队列表
				</view>
				<view class="b-rad-200 bgc-F2F2F2 box-border-box align-items-center">
					<view class="title-box b-rad-200 box-border-box text-align-center" @click="titleBut(1)"
						:class="titleId === 1?'bgc-4FB3EF fc-f':'fc-9'">
						一级
					</view>
					<view class="title-box b-rad-200 box-border-box text-align-center" @click="titleBut(2)"
						:class="titleId === 2?'bgc-4FB3EF fc-f':'fc-9'">
						二级
					</view>
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css plr-24 box-border-box" @scrolltolower="scrolltolower">
			<view class="bgc-f plr-32 box-border-box">
				<view v-if="listData.length == 0" class="scroll-view-css">
					<EnBlank :customSrc='true'>
						<template v-slot:blankImg>
							<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
						</template>
					</EnBlank>
				</view>
				<view class="ptb-24 item-box align-items-center" v-for="(item,index) in listData" :key="index">
					<image class="item-img mr-16 b-rad-50" :src="item.head_img" mode=""></image>
					<view class="">
						<view class="fs-30 fc-3 mb-8">
							{{item.nickname}}
						</view>
						<view class="fs-24 fc-9">
							{{item.created_at}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" type="center" border-radius="10px 10px 10px 10px">
			<image class="code-image mb-20" :src="codeImg" mode="aspectFit"></image>
			<view class="plr-24 box-border-box">
				<view class="pop-but fs-30 fc-f b-rad-200 bgc-4FB3EF text-align-center b-r-ccc" @click="saveImg">
					保存推广码
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		memberShare
	} from "@/api/member.js"
	import {
		memberClanList,
		memberClanTotal
	} from "@/api/memberClan.js"
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	export default {
		components: {
			EnBlank
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userImg: '',
				userName: '',
				codeImg: '',
				titleId: 1,
				listData: [],
				page: 1,
				total: 0,
				one_num: 0,
				two_num: 0
			};
		},
		onLoad(data) {
			if (data) {
				this.userImg = data.img
				this.userName = data.name
			}
		},
		mounted() {
			this.memberShare()
			this.memberClanList()
			this.memberClanTotal()
		},
		methods: {
			memberClanTotal() {
				memberClanTotal().then((res) => {
					if (res.code === 1) {
						this.one_num = res.data.one_num
						this.two_num = res.data.two_num
					}
				})
			},
			saveImg() {
				// 调用 uni.downloadFile 下载图片
				uni.downloadFile({
					url: this.codeImg,
					success: (downloadRes) => {
						if (downloadRes.statusCode === 200) {
							// 下载成功，将临时文件保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadRes.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功',
										icon: 'success',
										duration: 2000
									});
								},
								fail: (saveErr) => {
									uni.showToast({
										title: '保存图片到相册失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (downloadErr) => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			openPop() {
				this.$refs.popup.open()
			},
			memberShare() {
				memberShare().then((res) => {
					if (res.code === 1) {
						this.codeImg = res.data.share_img
					}
				})
			},
			memberClanList() {
				memberClanList({
					type: this.titleId,
					page: this.page
				}).then((res) => {
					if (res.code === 1) {
						this.listData.push(...res.data.list)
						this.total = res.data.total
					}
				})
			},
			bindDateChange(e) {
				this.tiem = e.detail.value
				this.page = 1;
				this.listData = [];
				this.memberClanList();
			},
			titleBut(item) {
				if (item.water_key === this.titleId) {
					return
				}
				this.titleId = item.water_key
				this.page = 1;
				this.listData = [];
				this.memberClanList();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			scrolltolower() {
				if (this.listData.length < this.total) {
					++this.page
					this.memberClanList()
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item-img {
		width: 88rpx;
		height: 88rpx;
	}

	.user-box {
		padding: 40rpx 0;
	}

	.total-box {
		padding: 32rpx 24rpx;
		border-top: 1rpx solid #E6E7E9;
	}

	.pop-but {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
	}

	.pop-box {
		width: 70vw;
		max-height: 60vh;
	}

	.user-image {
		width: 112rpx;
		height: 112rpx;
	}

	.item-box {
		border-bottom: 1rpx solid #EEEEEE;
	}

	.item-box:last-child {
		border: none;
	}

	.right {
		width: 32rpx;
		height: 32rpx;
	}

	.sx-box {
		border-radius: 20rpx 20rpx 0 0;
	}

	.seckill-box {
		background: linear-gradient(to bottom, #4FB3EF, #F5F5F5, #F5F5F5);
	}

	.zzc-box {
		width: 100%;
		height: auto;
		position: relative;
	}

	.ewm-box {
		position: absolute;
		right: 0;
		top: 65rpx;
		border-radius: 200rpx 0 0 200rpx;
		padding: 10rpx 20rpx 10rpx 27rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.title-box {
		min-width: 104rpx;
		height: 52rpx;
		line-height: 52rpx;
	}

	.code-image {
		width: 80vw;
		height: 60vh;
		border-radius: 20rpx;
	}
</style>