完成小程序前端部分

pages/personCenter/component/InvitationCodePop/InvitationCodePop.js

@@ -0,0 +1,24 @@
+// pages/personCenter/component/InvitationCodePop/InvitationCodePop.js
+Component({
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

pages/personCenter/component/InvitationCodePop/InvitationCodePop.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

pages/personCenter/component/InvitationCodePop/InvitationCodePop.wxml

@@ -0,0 +1,32 @@
+<!-- promoPop/promoPop.wxml -->
+<view>
+  <!-- 遮罩层，点击即可关闭弹窗 -->
+  <view class="promo-mask" wx:if="{{show}}" bindtap="close"></view>
+  
+  <!-- 弹窗内容 -->
+  <view class="flex-col page" wx:if="{{show}}">
+    <view class="flex-col self-stretch section">
+      <text class="self-center text">作业码</text>
+      <text class="self-center font text_2 mt-23">引导用户通过扫描此码来完成相应的任务</text>
+      <view class="flex-col self-stretch group mt-23">
+        <image
+          class="self-center image"
+          src="{{qrcode}}"
+          bindtap="previewQrcode"
+        />
+        <view class="mt-20 flex-col items-start self-stretch">
+          <text class="font text_3">点击二维码放大，长按保存</text>
+          <view class="flex-col justify-start items-center text-wrapper mt-19" bindtap="copyLink">
+            <text class="font text_4">复制推广链接</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- 右下角关闭按钮 -->
+    <image
+      class="self-center image_2 mt-21"
+      src="{{closeIcon}}"
+      bindtap="close"
+    />
+  </view>
+</view>

pages/personCenter/component/InvitationCodePop/InvitationCodePop.wxss

@@ -0,0 +1,110 @@
+@import "../../../app.wxss";
+
+.mt-23 {
+  margin-top: 53.57rpx;
+}
+.mt-19 {
+  margin-top: 44.25rpx;
+}
+.mt-21 {
+  margin-top: 48.91rpx;
+}
+
+/* 遮罩层样式，必须加，确保弹窗浮于上层并居中 */
+.promo-mask {
+  position: fixed;
+  left: 0; top: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.45); /* 比 0.5 更柔和 */
+  z-index: 9999;
+}
+
+/* 弹窗整体居中 */
+.page {
+  position: fixed;
+  top: 45%; left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10000;
+  width: 600rpx;       /* 推荐设置定宽，防止弹窗太大 */
+  max-width: 90vw;
+  padding-bottom: 0;   /* 去掉原有多余 padding */
+  background-color: transparent;
+  overflow: visible;
+  border-radius: 32rpx;
+}
+
+/* 弹窗内部内容区域 */
+.section {
+  padding: 60rpx 40rpx 40rpx 40rpx; /* 优化内边距 */
+  background-color: #fff9e5;
+  border-radius: 32rpx;
+  box-shadow: 0 16rpx 64rpx 0 rgba(0,0,0,0.15);
+  position: relative;
+}
+
+.text {
+  color: #ff6f00;
+  font-size: 50rpx;
+  font-family: SourceHanSansCN;
+  line-height: 64rpx;
+  font-weight: bold;
+}
+.font {
+  font-size: 34rpx;
+  font-family: SourceHanSansCN;
+  line-height: 48rpx;
+}
+.text_2 {
+  color: #ff9800;
+  margin-top: 16rpx;
+  font-size: 26rpx;
+  text-align: center;
+}
+.group {
+  padding-left: 0;
+  padding-right: 0;
+  margin: 0 auto;
+  width: 100%;
+}
+.image {
+  width: 300rpx;
+  height: 300rpx;
+  margin: 40rpx auto 0;
+  border-radius: 16rpx;
+  box-shadow: 0 4rpx 24rpx rgba(255, 111, 0, 0.08);
+  background: #fff;
+  display: block;
+}
+.text_3 {
+  color: #000;
+  line-height: 40rpx;
+  margin-top: 16rpx;
+  font-size: 28rpx;
+  text-align: center;
+  width: 100%;
+}
+.text-wrapper {
+  margin: 32rpx auto 0;
+  padding: 22rpx 0;
+  background-color: #ffb300;
+  border-radius: 93.17rpx;
+  width: 280rpx;
+  text-align: center;
+  box-shadow: 0 4rpx 12rpx rgba(255,179,0,0.07);
+  cursor: pointer;
+}
+.text_4 {
+  color: #fff;
+  line-height: 36rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+/* 关闭按钮右下角浮动 */
+.image_2 {
+  width: 67.55rpx;
+  height: 67.55rpx;
+  position: absolute;
+  bottom: -100rpx;
+  z-index: 10100;
+  cursor: pointer;
+}