mrr.sj.front/pages/syr/migration.vue

<template>
	<view class="migration-page">
		<!-- 复用顶部导航栏 -->
		<custom-navbar title="迁移说明" :showBack="true" borderBottom="none" backgroundColor="#fff"></custom-navbar>

		<!-- 内容区域 -->
		<view class="content-container">
			<!-- 手艺人端迁移说明 -->
			<view class="section">
				<view class="section-header">
					<image class="section-icon"
						src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/822d00a5-9638-48c5-b1b1-4a868d3124b8.png"
						mode="aspectFit"></image>
					<view class="section-title">手艺人端迁移说明</view>
				</view>
				<view class="section-content">
					系统迁移升级中，短暂不便，敬请谅解，升级后体验更佳！
				</view>
			</view>

			<!-- 跳转区域 -->
			<view class="jump-section" v-if="originalId">
				<view class="jump-button" @click="jumpToWeixinMiniProgram">
					<text class="button-text">点击跳转微信小程序手艺人端</text>
				</view>
			</view>
		</view>

		<!-- <MyTabBar @change="changeIndex" :tabList="tabList" :currentIndex="currentIndex"></MyTabBar> -->
	</view>
</template>


<script>
	import request from "../../utils/request";
	export default {
		data() {
			return {
				originalId:"",
				tabList: [{
						text: "首页",
						selectedIcon: "/static/images/tabbar/home_icon_active.png",
						icon: "/static/images/tabbar/home_icon_dis.png",
					},
					{
						text: "我的",
						selectedIcon: "/static/images/tabbar/my_icon_active.png",
						icon: "/static/images/tabbar/my_icon_dis.png",
					},
				],
				currentIndex: 0
			};
		},
		onLoad() {
			this.getId()
		},
		methods: {
			getId() {
				request.post("/api/openPuc/getOriginalId").then((res) => {
						if (res.code == 200) {
							this.originalId = res.data.id
						}
					});
			},
			// 点击"跳转微信小程序手艺人端"按钮时触发
			jumpToWeixinMiniProgram() {
				// 注意：以下代码只在APP-PLUS环境中有效
				// #ifdef APP-PLUS
				plus.share.getServices((services) => {
					let weixin = null;
					// 遍历所有分享服务，找到微信
					services.forEach((item) => {
						if (item.id === "weixin") {
							weixin = item;
						}
					});

					if (weixin) {
						// 调用微信小程序跳转接口
						weixin.launchMiniProgram({
							id: this.originalId, // 手艺人小程序的原始ID
							path: "/pages/home/home",
							type: 0, // 版本类型：0-正式版；1-测试版；2-体验版（默认0）
							success: () => {
								uni.showToast({
									title: "跳转成功",
									icon: "success",
								});
							},
							fail: (err) => {
								console.error("跳转失败:", err);
								uni.showToast({
									title: "跳转失败，请确保已安装微信",
									icon: "none",
									duration: 3000
								});
							},
						});
					} else {
						uni.showToast({
							title: "未安装微信，请先安装微信客户端",
							icon: "none",
							duration: 3000
						});
					}
				}, (err) => {
					console.error("获取分享服务失败:", err);
					uni.showToast({
						title: "系统错误，请重试",
						icon: "none",
						duration: 3000
					});
				});
				// #endif

				// #ifdef H5
				uni.showToast({
					title: "请在APP中打开此功能",
					icon: "none",
					duration: 3000
				});
				// #endif

				// #ifdef MP-WEIXIN
				// 微信小程序环境下，可以使用wx.navigateToMiniProgram跳转到其他小程序
				uni.navigateToMiniProgram({
					appId: "wxb486b10a60d2c78d", // 手艺人端小程序的appId
					path: "/pages/home/home",
					extraData: {
						from: "mrrplus"
					},
					success: (res) => {
						uni.showToast({
							title: "跳转成功",
							icon: "success",
						});
					},
					fail: (err) => {
						console.error("跳转失败:", err);
						uni.showToast({
							title: "跳转失败，请重试",
							icon: "none",
							duration: 3000
						});
					}
				});
				// #endif
			},

			changeIndex(index) {
				this.currentIndex = index;
			}
		}
	};
</script>

<style lang="less">
	.migration-page {
		min-height: 80vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.content-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 40rpx;
		position: relative;
		z-index: 2;
	}

	.section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		border-radius: 24rpx;
		padding: 48rpx 32rpx;
		margin-bottom: 48rpx;
		width: 100%;
	}

	.section-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
		width: 100%;
	}

	.section-icon {
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		line-height: 50rpx;
		text-align: center;
		width: 100%;
	}

	.section-title::before {
		display: none;
	}

	.section-content {
		font-size: 26rpx;
		color: #666666;
		line-height: 37rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.jump-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
	}

	.jump-button {
		width: 100%;
		height: 100rpx;
		background: #E8101E;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(232, 16, 30, 0.2);
		transition: all 0.3s ease;
	}

	.jump-button:active {
		transform: translateY(4rpx);
		box-shadow: 0 4rpx 10rpx rgba(232, 16, 30, 0.2);
	}

	.button-text {
		font-weight: 400;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 34rpx;
	}
</style>