1

components/tab-bar/myCenter.vue

@@ -39,6 +39,13 @@
 					</view>
 				</view>
 				
+				<view class="legal-btn fade-up" hover-class="tap-soft" hover-stay-time="80"
+					style="animation-delay: 280ms;" @tap="openOfficialAccountPopup">
+					<text class="legal-dot"></text>
+					<text>关注公众号，可实时接收ie/校园圈/二手消息</text>
+					<text class="legal-arrow">›</text>
+				</view>
+				
 				<view class="quick-card fade-up" style="animation-delay: 200ms;">
 					<view class="quick-item" hover-class="tap-soft" hover-stay-time="80"
 						v-for="(item,index) in quickItems" :key="index" @tap="navigatorTo(item.action)">
@@ -144,6 +151,23 @@
 			</view>
 		</scroll-view>
 
+		<view class="official-account-mask" v-if="officialAccountPopupVisible" @tap="closeOfficialAccountPopup">
+			<view class="official-account-card" @tap.stop>
+				<view class="official-account-close" @tap="closeOfficialAccountPopup">×</view>
+				<view class="official-account-title">关注公众号</view>
+				<view class="official-account-desc">关注后，可实时接收 i/e、校园圈、校园二手消息提醒</view>
+				<image
+					show-menu-by-longpress
+					class="official-account-qr"
+					:src="officialAccountQr"
+					mode="aspectFill"
+					@tap="previewOfficialAccountQr"
+				></image>
+				<view class="official-account-tip">长按二维码识别关注</view>
+				<view class="official-account-btn" @tap="closeOfficialAccountPopup">知道了</view>
+			</view>
+		</view>
+
 		<!-- 未注册兼职弹窗 -->
 		<uni-popup ref="jianzhiPopup" background-color="rgba(2, 171, 255, 1)" borderRadius="40px 40px 40px 40px">
 			<view class="jianzhi-content" @tap="navigatorTo('partTimeReg')">
@@ -271,6 +295,8 @@
 				nicknameManualTipShown: false,
 				profileSaving: false,
 				profileUploading: false,
+				officialAccountPopupVisible: false,
+				officialAccountQr: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/ca2d31caab16467eac20b1711fa00a78.jpg',
 				couponCount: Number(uni.getStorageSync('couponCount')) || 8,
 				blindBoxCount: Number(uni.getStorageSync('blindBoxCount')) || 8,
 				orderCounts: {
@@ -463,6 +489,18 @@
 				this.nicknameManualTipShown = false
 				this.$refs.profilePopup.open()
 			},
+			openOfficialAccountPopup() {
+				this.officialAccountPopupVisible = true
+			},
+			closeOfficialAccountPopup() {
+				this.officialAccountPopupVisible = false
+			},
+			previewOfficialAccountQr() {
+				uni.previewImage({
+					current: this.officialAccountQr,
+					urls: [this.officialAccountQr]
+				})
+			},
 			onProfileNicknameInput(e) {
 				const detail = e && e.detail ? e.detail : {}
 				const keyCode = detail.keyCode
@@ -1905,6 +1943,84 @@
 		font-weight: 400;
 	}
 
+	.official-account-mask {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 1300;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 40rpx;
+		background: rgba(12, 31, 25, .46);
+		box-sizing: border-box;
+	}
+
+	.official-account-card {
+		position: relative;
+		width: 590rpx;
+		padding: 46rpx 42rpx 38rpx;
+		border-radius: 36rpx;
+		background: #fff;
+		text-align: center;
+		box-shadow: 0 26rpx 64rpx rgba(19, 70, 54, .22);
+		box-sizing: border-box;
+	}
+
+	.official-account-close {
+		position: absolute;
+		right: 22rpx;
+		top: 18rpx;
+		width: 54rpx;
+		height: 54rpx;
+		line-height: 50rpx;
+		border-radius: 50%;
+		color: #8b9b96;
+		font-size: 44rpx;
+	}
+
+	.official-account-title {
+		color: #17362f;
+		font-size: 34rpx;
+		font-weight: 900;
+	}
+
+	.official-account-desc {
+		margin-top: 12rpx;
+		color: #6f817c;
+		font-size: 24rpx;
+		line-height: 36rpx;
+	}
+
+	.official-account-qr {
+		width: 330rpx;
+		height: 330rpx;
+		margin: 30rpx auto 0;
+		display: block;
+		border-radius: 24rpx;
+		background: #f5f8f6;
+	}
+
+	.official-account-tip {
+		margin-top: 18rpx;
+		color: #1a9a72;
+		font-size: 24rpx;
+		font-weight: 800;
+	}
+
+	.official-account-btn {
+		height: 78rpx;
+		margin-top: 30rpx;
+		border-radius: 42rpx;
+		background: linear-gradient(135deg, #37c990, #19af7e);
+		color: #fff;
+		font-size: 28rpx;
+		font-weight: 900;
+		line-height: 78rpx;
+	}
+
 	.logout-power {
 		position: relative;
 		width: 26rpx;