MoeNovaClient/MoeNovaClientH5/pages/share.vue

<template>
	<view class="container">
		<!-- 顶部应用名称 -->
		<view class="app-header" style="display: flex; justify-content: space-between; align-items: center;">
			<view style="display: flex; align-items: center;">
				<image class="logo" src="/static/logo.png" mode="aspectFit"
					style="width: 100rpx; height: 100rpx; border-radius: 20rpx; margin-right: 20rpx;"></image>
				<view class="app-info">
					<text class="app-name">萌创星球</text>
					<text class="app-desc">装备角色创作</text>
				</view>
			</view>
			<button class="download-btn-top" style="margin: 0;" @click="downloadApp">立即下载</button>
		</view>

		<!-- 用户卡片 -->
		<view class="user-card">
			<image class="cuteverse-logo" src="../static/images/top_bg.png"></image>

			<view class="user-info">
				<image class="avatar" :src="myinfo.avator" mode="aspectFill"></image>
				<text class="user-slogan">{{ myinfo.content }}</text>

				<view class="user-stats">
					<view class="stat-item">
						<text class="stat-num">{{ myinfo.num_attention }}</text>
						<text class="stat-label">关注</text>
					</view>
					<view class="stat-item">
						<text class="stat-num">{{ myinfo.num_fans }}</text>
						<text class="stat-label">粉丝</text>
					</view>
					<view class="stat-item">
						<text class="stat-num">{{ myinfo.num_like }}</text>
						<text class="stat-label">获赞</text>
					</view>
				</view>

				<button class="visit-btn" @click="visitProfile">去看看ta的个人主页吧！</button>
			</view>
		</view>

		<!-- 作品展示 -->
		<view class="works-section">
			<text class="works-title">ta的作品</text>

			<view class="works-grid">
				<view class="work-item" v-for="(item, index) in works" :key="index" @click="previewWork(item)">
					<image class="work-image" :src="item.images.split('|')[0]" mode="aspectFill"></image>
					<text class="work-name">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="bottomText">
			- 打开萌创星球查看更多作品 -
		</view>
		<!-- 底部下载按钮 -->
		<view class="bottom-actions" v-if="false">
			<button class="download-btn-bottom" @click="downloadApp">立即下载应用</button>
			<button class="open-btn" @click="openApp">打开应用</button>
		</view>
	</view>
</template>

<script>
	import {
		generateSecureUrlParams,
		parseSecureUrlParams
	} from '@/utils/encryption'

	export default {
		data() {
			return {
				myinfo: {
					avator: "../static/images/avator.png",
					nickname: "",
					content: "",
					sex_id: 1,
					my_level: 1,
					num_attention: 0,
					num_fans: 0,
					num_like: 0,
				},
				aihao_tags: [],
				offset: 0,
				hasMore: true,
				isLoading: false,
				works: [],
				id: 0,
				from_id: 0,
			}
		},
		onLoad(e) {
			console.log(e);
			if (e.params) {
				var analyzeParameters = parseSecureUrlParams(e.params)
				console.log("解析URL参数:", analyzeParameters)
				this.id = analyzeParameters.userId || 0
				this.from_id = analyzeParameters.from_id || 0
			}

			// URL参数加密示例
			// console.log('===== URL参数加密示例 =====');
			// const urlParams = {
			//   userId: 1,
			//   action: 'view',
			//   timestamp: new Date().getTime()
			// };
			// const secureParams = generateSecureUrlParams(urlParams);
			// console.log('安全URL参数:', secureParams);
			// console.log('解析URL参数:', parseSecureUrlParams(secureParams));

			// 页面加载时执行
			this.loadInfo()
			this.loadWorksList()
		},
		methods: {
			// 加载用户信息
			loadInfo() {
				uni.request({
					url: this.$apiHost + "/Member/getHomeInfo",
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						from_id: this.from_id,
						user_id: this.id,
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log("用户信息:", JSON.parse(JSON.stringify(res.data)));
						if (res.data.need_login == "yes") {
							uni.removeStorageSync("wapptoken");
							uni.redirectTo({
								url: "/pages/login/login",
							});
							return;
						}
						if (res.data.aihao) {
							this.aihao_tags = res.data.aihao.split(",");
						}
						this.myinfo = res.data;
					},
					fail: (e) => {
						console.log("获取用户信息失败:", e);
					},
				});
			},

			// 加载作品列表
			loadWorksList() {
				uni.request({
					url: this.$apiHost + '/Work/getlist',
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						type: "other",
						offset: 0,
						limit: 6,
						user_id: this.id,
						from_id: this.from_id,
					},
					header: {
						"content-type": "application/json",
						sign: getApp().globalData.headerSign,
					},
					success: (res) => {
						console.log("作品列表:", JSON.parse(JSON.stringify(res.data)));
						if (res.data.success == "yes" && res.data.list) {
							this.works = res.data.list.slice(0, 6);
						}
					},
					fail: (e) => {
						console.log("获取作品列表失败:", e);
					},
				});
			},

			// 显示下载提示弹窗
			showDownloadTip() {
				uni.showModal({
					title: '下载提示',
					content: '请下载萌创星球APP，体验完整功能',
					confirmText: '立即下载',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// #ifdef H5
							if (this.$platform.isIOS()) {
								window.location.href = this.$config.download.ios
							} else {
								window.location.href = this.$config.download.android
							}
							// #endif
						}
					}
				})
			},

			// 访问用户主页
			visitProfile() {
				this.showDownloadTip()
			},

			// 预览作品
			previewWork(work) {
				this.showDownloadTip()
			},

			// 下载应用
			downloadApp() {
				this.showDownloadTip()
			},

			// 尝试打开App
			openApp(path) {
				this.showDownloadTip()
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		padding: 0;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	/* 顶部应用名称 */
	.app-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.app-info {
		display: flex;
		flex-direction: column;
	}

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

	.app-desc {
		font-size: 24rpx;
		color: #666;
		margin-top: 4rpx;
	}

	.download-btn-top {
		background-color: #000;
		color: #fff;
		font-size: 24rpx;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		border: none;
		height: 60rpx;
		line-height: 40rpx;
	}

	/* 用户卡片 */
	.user-card {
		margin: 30rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.user-card-header {
		position: relative;
		padding: 20rpx;
		background-color: #e8ffd6;
		display: flex;
		align-items: center;
	}

	.cuteverse-logo {
		width: 100%;
		height: 134rpx;
		margin-bottom: 0rpx;
	}

	.cuteverse-text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.brand-name {
		font-size: 28rpx;
		color: #333;
		margin-left: auto;
	}

	.indicator {
		display: flex;
		margin-left: 20rpx;
	}

	.indicator-bar {
		width: 12rpx;
		height: 30rpx;
		background-color: #a8e05f;
		margin-left: 6rpx;
	}

	.user-info {
		width: 100%;
		height: 522rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #a8e05f;
		background: linear-gradient(180deg, #DDFFA8 0%, #FFFFFF 100%);
		border-radius: 32rpx;
		border: 4rpx solid #1F1F1F;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}

	.user-slogan {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 30rpx;
	}

	.user-stats {
		display: flex;
		width: 100%;
		justify-content: space-around;
		margin-bottom: 30rpx;
		position: relative;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		flex: 1;
	}

	.stat-item:not(:last-child)::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		width: 2rpx;
		height: 50%;
		background-color: #d8d8d8;
		transform: translate(50%, -50%);
	}

	.stat-num {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.stat-label {
		font-size: 24rpx;
		color: #999;
		margin-top: 4rpx;
	}

	.visit-btn {
		width: 100%;
		background-color: #1F1F1F;
		color: #fff;
		border-radius: 100rpx;
		font-size: 28rpx;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0;
		border: none;
		font-weight: 400;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		color: #ACF934;
	}

	/* 作品展示 */
	.works-section {
		padding: 30rpx;
	}

	.works-title {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.works-grid {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.work-item {
		width: 50%;
		padding: 10rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.work-image {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
		border: 1px dashed #ddd;
	}

	.work-name {
		font-size: 24rpx;
		color: #666;
		margin-top: 10rpx;
		text-align: center;
	}

	/* 底部下载按钮 */
	.bottom-actions {
		padding: 30rpx;
		margin-top: auto;
	}

	.download-btn-bottom {
		width: 100%;
		background-color: #a8e05f;
		color: #333;
		border-radius: 40rpx;
		font-size: 32rpx;
		padding: 24rpx 0;
		margin-bottom: 20rpx;
		font-weight: bold;
		border: none;
	}

	.open-btn {
		width: 100%;
		background-color: #fff;
		color: #333;
		border-radius: 40rpx;
		font-size: 32rpx;
		padding: 24rpx 0;
		border: 1px solid #ddd;
	}

	.bottomText {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		padding-bottom: 50rpx;
	}
</style>