vist_go_uniApp/packageUser/pages/share/index.vue

<template>
	<view class="page">
		<!-- 顶部背景装饰 -->
		<view class="bg-decoration">
			<view class="bg-circle bg-circle-1"></view>
			<view class="bg-circle bg-circle-2"></view>
			<view class="bg-circle bg-circle-3"></view>
		</view>

		<!-- 顶部标题 -->
		<view class="header">
			<view class="header-icon">
				<image class="icon-gift" src="/static/images/gift.png" mode="aspectFit"></image>
			</view>
			<text class="title">邀请好友</text>
			<text class="subtitle">邀请好友加入，共享收益好礼</text>
			<view class="title-decoration"></view>
		</view>

		<!-- 邀请方式切换 -->
		<view class="tabs-container">
			<view class="tabs">
				<view class="tab" :class="{'active': activeMethod === 'wechat'}" @click="selectMethod('wechat')">
					<uni-icons class="tab-icon" type="weixin" size="20"></uni-icons>
					<text class="tab-text">微信分享</text>
				</view>
				<view class="tab" :class="{'active': activeMethod === 'account'}" @click="selectMethod('account')">
					<uni-icons class="tab-icon" type="person" size="20"></uni-icons>
					<text class="tab-text">用户名邀请</text>
				</view>
				<view class="tab-slider" :class="{'slide-right': activeMethod === 'account'}"></view>
			</view>
		</view>

		<!-- 账号邀请 -->
		<view class="content animate-fade-in" v-if="activeMethod === 'account'">
			<view class="search-card">
				<view class="search-header">
					<view class="search-title">
						<uni-icons type="search" size="18"></uni-icons>
						<text class="search-title-text">搜索好友</text>
					</view>
				</view>
				<view class="search-box">
					<view class="search-input-wrapper">
						<text class="search-prefix-icon">@</text>
						<input class="search-input" v-model="accountInput" placeholder="请输入好友用户名"
							@input="onAccountInput" />
					</view>
					<button class="search-btn" @click="searchUser" :disabled="!accountInput.trim()">
						<text class="btn-text">搜索</text>
					</button>
				</view>
			</view>

			<view class="user-result-card animate-slide-up" v-if="searchedUser">
				<view class="user-result">
					<view class="avatar-wrapper">
						<image class="avatar" :src="searchedUser.avatar || '/static/images/avatar.png'"
							mode="aspectFill"></image>
						<view class="avatar-border"></view>
					</view>
					<view class="info">
						<text class="name">{{ searchedUser.account }}</text>
					</view>
					<button class="invite-btn" @click="sendInviteByAccount">
						<uni-icons class="invite-icon" type="email" size="14" color="#fff"></uni-icons>
						<text class="invite-text">邀请</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 微信分享 -->
		<view class="content animate-fade-in" v-if="activeMethod === 'wechat'">
			<view class="share-card">
				<view class="share-bg">
					<view class="share-bg-circle"></view>
				</view>
				<view class="share-content">
					<view class="share-icon-wrapper">
						<view class="share-icon">🚀</view>
						<view class="share-icon-bg"></view>
					</view>
					<text class="share-title">分享给好友</text>
					<text class="share-desc">通过微信分享邀请链接，让更多朋友加入</text>
					<button class="share-btn" open-type="share">
						<uni-icons class="share-btn-icon" type="redo" size="18" color="#fff"></uni-icons>
						<text class="share-btn-text">立即分享</text>
					</button>
				</view>
			</view>
		</view>

		<!-- 邀请记录 -->
		<view class="records-card">
			<view class="records-header">
				<view class="records-title-wrapper">
					<uni-icons class="records-icon" type="list" size="18"></uni-icons>
					<text class="records-title">邀请记录</text>
				</view>
				<view class="records-count-wrapper">
					<text class="records-count">{{ inviteRecords.length }}</text>
					<text class="records-unit">人</text>
				</view>
			</view>

			<view class="records-list" v-if="inviteRecords.length > 0">
				<view class="record-item animate-slide-in" v-for="(record, index) in inviteRecords" :key="index"
					:style="{ 'animation-delay': (index * 0.1) + 's' }">
					<view class="record-avatar-wrapper">
						<image class="record-avatar" :src="record.avatar || '/static/images/avatar.png'"
							mode="aspectFill"></image>
						<view class="record-avatar-border"></view>
					</view>
					<view class="record-info">
						<text class="record-name">{{ record.account }}</text>
						<view class="record-meta">
							<text class="record-time">{{ formatTime(record.createTime) }}</text>
							<text class="record-type"
								v-if="record.invitationType">{{ getInvitationTypeText(record.invitationType) }}</text>
						</view>
					</view>
					<view class="record-status-wrapper">
						<view class="status-dot" :class="getStatusClass(record.status)"></view>
						<text class="record-status">{{ record.status }}</text>
					</view>
				</view>
			</view>

			<view class="empty1" v-else>
				<view class="flex-items-plus">
					<image src="@/static/images/empty.png" class="empty "></image>
				</view>
				<view class="empty-text">暂无邀请记录</view>
				<view class="empty-desc">快去邀请好友加入吧</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findByAccount,
		sendInvitation,
		getMyInvitations
	} from '@/config/api.js'
	import {
		shareImg
	} from '@/common/config.js'
	export default {
		data() {
			return {
				activeMethod: 'wechat', // 当前选择的邀请方式，默认为微信分享
				accountInput: '', // 账号输入
				searchedUser: null, // 搜索到的用户
				inviteRecords: [], // 邀请记录
				userInfo: {} // 当前用户信息
			}
		},

		onLoad() {
			this.getUserInfo()
			this.getInviteRecords()
		},

		// 微信小程序分享配置
		onShareAppMessage() {
			const userInfo = uni.getStorageSync('user') || {}
			console.log(userInfo, "分享用户信息")
			return {
				title: `${userInfo.account || '好友'}邀请您加入`,
				path: `/pages/index/indexNew?inviter=${userInfo.id ||userInfo.user_id|| ''}`,
				imageUrl: shareImg // 分享图片，需要添加
			}
		},

		methods: {
			// 获取用户信息
			getUserInfo() {
				this.userInfo = uni.getStorageSync('user') || {}
			},

			// 选择邀请方式
			selectMethod(method) {
				this.activeMethod = method
				if (method === 'account') {
					this.searchedUser = null
					this.accountInput = ''
				}
			},

			// 账号输入处理
			onAccountInput(e) {
				this.accountInput = e.detail.value
				if (!this.accountInput.trim()) {
					this.searchedUser = null
				}
			},

			// 搜索用户
			async searchUser() {
				if (!this.accountInput.trim()) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return
				}

				try {
					uni.showLoading({
						title: '搜索中...'
					})

					const res = await findByAccount(this.accountInput.trim())

					if (res.code === 200) {
						this.searchedUser = res.data
					} else {
						this.searchedUser = null
						uni.showToast({
							title: res.msg || '用户不存在',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('搜索用户失败:', error)
					uni.showToast({
						title: error.msg,
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 通过账号发送邀请
			async sendInviteByAccount() {
				if (!this.searchedUser) {
					return
				}

				try {
					uni.showLoading({
						title: '发送邀请中...'
					})

					const res = await sendInvitation(this.searchedUser.id)

					if (res.code === 200) {
						uni.showToast({
							title: '邀请发送成功',
							icon: 'success'
						})

						// 重新获取邀请记录
						this.getInviteRecords()

						// 清空搜索结果
						this.searchedUser = null
						this.accountInput = ''
					} else {
						uni.showToast({
							title: res.msg || '邀请发送失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('发送邀请失败:', error)
					uni.showToast({
						title: error.msg,
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 获取邀请记录
			async getInviteRecords() {
				try {
					const res = await getMyInvitations()

					if (res.code === 200) {
						this.inviteRecords = res.data || []
					}
				} catch (error) {
					console.error('获取邀请记录失败:', error)
				}
			},

			// 格式化时间
			formatTime(time) {
				if (!time) return ''
				const date = new Date(time)
				const now = new Date()
				const diff = now.getTime() - date.getTime()
				const days = Math.floor(diff / (1000 * 60 * 60 * 24))

				if (days === 0) {
					return '今天'
				} else if (days === 1) {
					return '昨天'
				} else if (days < 7) {
					return `${days}天前`
				} else {
					return date.toLocaleDateString()
				}
			},

			// 获取邀请类型文字
			getInvitationTypeText(type) {
				switch (type) {
					case 1:
						return '用户名邀请'
					case 2:
						return '微信分享'
					default:
						return '未知类型'
				}
			},

			// 获取状态样式类
			getStatusClass(status) {
				switch (status) {
					case '已接受':
						return 'status-accepted'
					case '已拒绝':
						return 'status-rejected'
					case '待处理':
					default:
						return 'status-pending'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 页面主体 */
	.page {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f2ff 0%, #f0f4ff 100%);
		position: relative;
		overflow: hidden;
	}

	/* 背景装饰 */
	.bg-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		z-index: 0;
	}

	.bg-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.6);
		animation: float 6s ease-in-out infinite;
	}

	.bg-circle-1 {
		width: 200rpx;
		height: 200rpx;
		top: 10%;
		right: -100rpx;
		animation-delay: 0s;
	}

	.bg-circle-2 {
		width: 150rpx;
		height: 150rpx;
		top: 30%;
		left: -75rpx;
		animation-delay: 2s;
	}

	.bg-circle-3 {
		width: 100rpx;
		height: 100rpx;
		top: 60%;
		right: 20rpx;
		animation-delay: 4s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0px);
		}

		50% {
			transform: translateY(-20rpx);
		}
	}

	/* 头部区域 */
	.header {
		text-align: center;
		padding: 80rpx 24rpx 60rpx;
		position: relative;
		z-index: 1;
	}

	.header-icon {
		margin-bottom: 20rpx;
	}

	.icon-gift {
		width: 80rpx;
		height: 80rpx;
		display: block;
		margin: 0 auto;
		animation: bounce 2s infinite;
	}

	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-10rpx);
		}

		60% {
			transform: translateY(-5rpx);
		}
	}

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #4a5568;
		margin-bottom: 20rpx;
		text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.subtitle {
		font-size: 28rpx;
		color: #718096;
		margin-bottom: 30rpx;
	}

	.title-decoration {
		width: 100rpx;
		height: 4rpx;
		background: linear-gradient(90deg, #a0aec0, transparent);
		margin: 0 auto;
		border-radius: 2rpx;
	}

	/* 标签容器 */
	.tabs-container {
		padding: 0 24rpx;
		margin-bottom: 40rpx;
		position: relative;
		z-index: 1;
	}

	.tabs {
		display: flex;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 50rpx;
		padding: 8rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		position: relative;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		border-radius: 42rpx;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		position: relative;
		z-index: 2;
		cursor: pointer;
	}

	.tab-icon {
		display: block;
		margin-bottom: 6rpx;
	}

	.tab-text {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.tab.active .tab-text {
		color: #fff;
		font-weight: 600;
	}

	.tab.active .tab-icon {
		color: #fff;
	}

	.tab-slider {
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		width: calc(50% - 8rpx);
		height: calc(100% - 16rpx);
		background: linear-gradient(135deg, #90cdf4, #a2b5f0);
		border-radius: 42rpx;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1;
		box-shadow: 0 4rpx 16rpx rgba(144, 205, 244, 0.3);
	}

	.tab-slider.slide-right {
		transform: translateX(100%);
	}

	/* 内容区域 */
	.content {
		padding: 0 24rpx;
		margin-bottom: 40rpx;
		position: relative;
		z-index: 1;
	}

	/* 动画效果 */
	.animate-fade-in {
		animation: fadeIn 0.5s ease-out;
	}

	.animate-slide-up {
		animation: slideUp 0.5s ease-out;
	}

	.animate-slide-in {
		animation: slideIn 0.5s ease-out both;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(40rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateX(-30rpx);
		}

		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* 搜索卡片 */
	.search-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.search-header {
		margin-bottom: 24rpx;
	}

	.search-title {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.search-title-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.search-box {
		display: flex;
		gap: 16rpx;
		align-items: center;
	}

	.search-input-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 16rpx;
		padding: 0 20rpx;
		height: 80rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;
	}

	.search-input-wrapper:focus-within {
		border-color: #90cdf4;
		box-shadow: 0 0 0 4rpx rgba(144, 205, 244, 0.1);
	}

	.search-prefix-icon {
		font-size: 32rpx;
		color: #999;
		margin-right: 12rpx;
		font-weight: 600;
	}

	.search-input {
		flex: 1;
		height: 100%;
		border: none;
		background: transparent;
		font-size: 28rpx;
		color: #333;
	}

	.search-btn {
		height: 80rpx;
		padding: 0 32rpx;
		background: linear-gradient(135deg, #90cdf4, #a2b5f0);
		color: #fff;
		border: none;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 16rpx rgba(144, 205, 244, 0.2);
		transition: all 0.3s ease;
	}

	.search-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(144, 205, 244, 0.2);
	}

	.search-btn[disabled] {
		background: #ccc;
		box-shadow: none;
	}

	/* 用户结果卡片 */
	.user-result-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.user-result {
		display: flex;
		align-items: center;
	}

	.avatar-wrapper {
		position: relative;
		margin-right: 24rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.avatar-border {
		position: absolute;
		top: -4rpx;
		left: -4rpx;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		border: 2rpx solid #90cdf4;
		opacity: 0.4;
	}

	.info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.account {
		font-size: 26rpx;
		color: #999;
	}

	.invite-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		height: 64rpx;
		padding: 0 24rpx;
		background: linear-gradient(135deg, #81c995, #a2d2a4);
		color: #fff;
		border: none;
		border-radius: 32rpx;
		font-size: 26rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 16rpx rgba(129, 201, 149, 0.2);
		transition: all 0.3s ease;
	}

	.invite-btn:active {
		transform: translateY(2rpx);
	}

	.invite-icon {
		margin-right: 4rpx;
	}

	/* 分享卡片 */
	.share-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
	}

	.share-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.share-bg-circle {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		background: linear-gradient(135deg, rgba(144, 205, 244, 0.1), rgba(162, 181, 240, 0.1));
		border-radius: 50%;
		top: -50rpx;
		right: -50rpx;
	}

	.share-content {
		padding: 60rpx 32rpx;
		text-align: center;
		position: relative;
		z-index: 1;
	}

	.share-icon-wrapper {
		position: relative;
		display: inline-block;
		margin-bottom: 32rpx;
	}

	.share-icon {
		font-size: 80rpx;
		position: relative;
		z-index: 2;
	}

	.share-icon-bg {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, rgba(144, 205, 244, 0.15), rgba(162, 181, 240, 0.15));
		border-radius: 50%;
		z-index: 1;
	}

	.share-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
	}

	.share-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 48rpx;
		line-height: 1.5;
	}

	.share-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		width: 320rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #90cdf4, #a2b5f0);
		color: #fff;
		border: none;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		margin: 0 auto;
		box-shadow: 0 6rpx 24rpx rgba(144, 205, 244, 0.25);
		transition: all 0.3s ease;
	}

	.share-btn:active {
		transform: translateY(2rpx);
	}

	.share-btn-icon {
		margin-right: 8rpx;
	}

	/* 邀请记录卡片 */
	.records-card {
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		padding: 32rpx;
		margin: 0 24rpx 40rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(10rpx);
		position: relative;
		z-index: 1;
	}

	.records-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.records-title-wrapper {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.records-icon {
		margin-right: 8rpx;
	}

	.records-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.records-count-wrapper {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.records-count {
		font-size: 32rpx;
		font-weight: 700;
		color: #90cdf4;
	}

	.records-unit {
		font-size: 24rpx;
		color: #999;
	}

	.records-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.record-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		transition: all 0.3s ease;
	}

	.record-item:hover {
		background: #f0f1f5;
		transform: translateX(8rpx);
	}

	.record-avatar-wrapper {
		position: relative;
		margin-right: 20rpx;
	}

	.record-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}

	.record-avatar-border {
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		border: 2rpx solid #90cdf4;
		opacity: 0.3;
	}

	.record-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.record-name {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	.record-meta {
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.record-time {
		font-size: 24rpx;
		color: #999;
	}

	.record-type {
		font-size: 22rpx;
		color: #666;
		background: rgba(144, 205, 244, 0.1);
		padding: 2rpx 8rpx;
		border-radius: 8rpx;
		align-self: flex-start;
	}

	.record-status-wrapper {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.status-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.status-dot.status-pending {
		background: #ffb366;
	}

	.status-dot.status-accepted {
		background: #81c995;
	}

	.status-dot.status-rejected {
		background: #ff6b6b;
	}

	.record-status {
		font-size: 24rpx;
		color: #81c995;
		font-weight: 600;
	}

	/* 空状态 */
	.empty1 {
		text-align: center;
		padding: 80rpx 0;
	}

	.flex-items-plus {
		display: flex;
		justify-content: center;
		margin-bottom: 24rpx;
		opacity: 0.5;
	}

	button::after {
		border: none;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.empty-desc {
		font-size: 24rpx;
		color: #ccc;
	}
</style>