引导到小程序

pages/login/index.vue

@@ -14,7 +14,16 @@
 			<!-- #endif -->
 
 			<!-- #ifdef H5 -->
-			<view class="phone-form">
+			<!-- 二维码模式 -->
+			<view v-if="h5Mode === 'qrcode'" class="qrcode-area">
+				<text class="qrcode-tip">肠愈同行小程序已上线</text>
+				<text class="qrcode-tip">请长按识别二维码进入小程序</text>
+				<image class="qrcode-img" src="https://cdn.csybhelp.com/images/cytx/cytx_qrcode.jpg" mode="aspectFit" show-menu-by-longpress />
+				<text class="switch-phone-btn" @tap="h5Mode = 'phone'">继续使用手机号登录</text>
+			</view>
+			<!-- 手机号模式 -->
+			<view v-else class="phone-form">
+				<text class="switch-qrcode-btn" @tap="h5Mode = 'qrcode'">← 使用小程序</text>
 				<view class="form-item">
 					<input class="form-input" type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" />
 				</view>
@@ -42,7 +51,7 @@
 			</view>
 			<!-- #endif -->
 			<!-- #ifdef H5 -->
-			<view class="tip">登录即表示同意
+			<view v-if="h5Mode === 'phone'" class="tip">登录即表示同意
 				<text class="link" @tap="goPrivacy">《隐私政策》</text>
 			</view>
 			<!-- #endif -->
@@ -60,6 +69,7 @@ const phone = ref('')
 const smsCode = ref('')
 const countdown = ref(0)
 const agreed = ref(false)
+const h5Mode = ref('qrcode')
 let timer = null
 
 onUnmounted(() => {
@@ -311,4 +321,36 @@ const goService = () => {
 		margin-top: 16rpx;
 	}
 }
+
+.qrcode-area {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	.qrcode-tip {
+		font-size: 28rpx;
+		color: #606266;
+		line-height: 1.6;
+	}
+
+	.qrcode-img {
+		width: 400rpx;
+		height: 400rpx;
+		margin: 40rpx 0;
+	}
+}
+
+.switch-phone-btn {
+	font-size: 24rpx;
+	color: #c0c4cc;
+	text-align: center;
+}
+
+.switch-qrcode-btn {
+	display: block;
+	font-size: 28rpx;
+	color: #0F78E9;
+	margin-bottom: 32rpx;
+	font-weight: 500;
+}
 </style>