new_shop_app/pages/users/invite_code/index.vue

<template>
	<view class="invite">
		<view class="placeholder"></view>

		<view class="qrcode">
			<view class="title">
				shop_{{uid}}
			</view>
			<view class="qrcode-img">
				<image :src="qrcodeUrl"></image>
			</view>
			<view class="save" @longpress="handleSavePic">
				<image
					src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_active_mer/new_active_mer_qrcode_save.webp">
				</image>
				<text>长按保存二维码</text>
			</view>
		</view>

		<view class="con">
			<image class="record"
				src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_active_mer/new_active_mer_qrcode_record.webp">
			</image>

			<view class="table" v-if="list.length > 0">
				<view class="table-title">
					<view class="table-title-cell">用户名称</view>
					<view class="table-title-cell">用户ID</view>
					<view class="table-title-cell">采购金额</view>
					<view class="table-title-cell">销售金额</view>
				</view>
				<block v-for="(item,index) in list" :key="index">
					<view class="table-con">
						<view class="table-con-cell">{{item.real_name}}</view>
						<view class="table-con-cell">{{item.uid}}</view>
						<view class="table-con-cell red">￥{{item.buy_amount}}</view>
						<view class="table-con-cell green">￥{{item.sale_amount}}</view>
					</view>
				</block>
			</view>

			<view v-if="list.length == 0">
				<emptyPage title="暂无邀请好友记录哦～"></emptyPage>
			</view>
		</view>
	</view>
</template>
<script>
	import emptyPage from '@/components/emptyPage.vue';
	import {
		qrcode,
		merchantRecord
	} from "@/api/activity.js";

	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				qrcodeUrl: "",
				list: [],
				page: 1,
				limit: 10,
				loadend: false,
				loading: false,
				loadTitle: '加载更多',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				uid:''
			}
		},
		onLoad() {
			this.getQrcode();
			this.getList();
			this.getUserInfo()
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getList();
		},
		
		methods: {
			// 获取二维码
			getQrcode() {
				qrcode().then(res => {
					this.qrcodeUrl = res.data.url;
				})
			},
			// 获取好友列表
			getList() {
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				merchantRecord({
					page: that.page,
					limit: that.limit
				}).then(res => {
					let list = res.data.list,
						loadend = list.length < that.limit;
					that.list = that.$util.SplitArray(list, that.list);
					that.$set(that, 'list', that.list);
					that.page = that.page + 1;
					that.loading = false;
					that.loadend = loadend;
					that.loadTitle = loadend ? '哼~😕我也是有底线的~' : "加载更多";
				}, function(res) {
					this.loading = false;
					that.loadTitle = '加载更多';
				})
			},
			
			getUserInfo() {
				let userInfo = this.$Cache.get("USER_INFO");
				if(userInfo){
					userInfo = JSON.parse(userInfo);
					this.uid = userInfo.uid;
				}
			},
			
			handleSavePic() {
				// 获取要保存的图片路径或URL
				let imageUrl = this.qrcodeUrl; // 这里使用了网络上的图片作为示例

				// #ifdef H5
				var a = document.createElement("a");
				a.download = imageUrl;
				a.href = imageUrl;
				document.body.appendChild(a);
				a.click();
				a.remove();
				// #endif

				// #ifndef H5
				let that =this;
				uni.downloadFile({
					url: imageUrl,
					success(res) {
						if (res.statusCode === 200) {
							let tempFilePath = res.tempFilePath; // 临时文件路径
							uni.saveImageToPhotosAlbum({
								filePath: tempFilePath,
								success() {
									return that.$util.Tips({
										title: '图片已保存至相册!'
									});
								},
								fail(err) {
									console.error('保存失败', err);
								}
							});
						} else {
							console.error('下载失败', res.statusCode);
						}
					},
					fail(err) {
						console.error('下载失败', err);
					}
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.invite {
		.placeholder {
			height: 544rpx;
		}

		.qrcode {
			position: fixed;
			top: 30rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 690rpx;
			height: 666rpx;
			background-image: url(https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_active_mer/new_active_mer_qrcode_bg.webp);
			background-size: 100%;
			background-repeat: no-repeat;
			padding-top: 54rpx;
			box-sizing: border-box;

			.title {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #7A7A7A;
				margin-bottom: 16rpx;
			}

			.qrcode-img {
				margin-bottom: 96rpx;

				image {
					width: 396rpx;
					height: 396rpx;
				}
			}

			.save {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		.con {
			height: calc(100vh - 544rpx);
			background-color: #FFF3EF;
			padding: 192rpx 30rpx 0;

			image {
				width: 100%;
				height: 45rpx;
				margin-bottom: 40rpx;
			}

			.table {
				.table-title {
					display: flex;
					margin-bottom: 24rpx;

					.table-title-cell {
						width: 25%;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #2E2E2E;
						text-align: center;
					}
				}

				.table-con {
					display: flex;
					width: 100%;
					height: 68rpx;
					line-height: 68rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 12rpx;
					margin-bottom: 12rpx;

					.table-con-cell {
						width: 25%;
						height: 68rpx;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #2E2E2E;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
					}

					.red {
						color: #F13B3B;
					}

					.green {
						color: #20A162;
					}
				}
			}
		}
	}
</style>