完成小程序前端部分

pages/personCenter/component/commissionPop/commissionPop.js

@@ -1,24 +1,57 @@
-// pages/personCenter/component/commissionPop/commissionPop.js
 Component({
 
   /**
    * 组件的属性列表
    */
   properties: {
-
+    show: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /**
    * 组件的初始数据
    */
   data: {
-
+    commissionRate: "",  // 用户输入的抽佣比例
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
+    // 获取用户输入的比例
+    handleInput(e) {
+      this.setData({
+        commissionRate: e.detail.value,
+      });
+    },
 
-  }
+    // 提交设置
+    submit() {
+      const rate = parseFloat(this.data.commissionRate);
+
+        if (isNaN(rate) || rate <= 0 || rate > 5) {
+          wx.showToast({
+            title: `请输入有效的比例，最大为 5%`,
+            icon: 'none',
+          });
+          return;
+        }
+
+        // 触发父组件的事件，将设置的比例传递出去
+        this.triggerEvent('submit', {
+          commissionRate: rate,
+        });
+
+        // 关闭弹窗
+        this.triggerEvent('close');
+      },
+
+      // 关闭弹窗
+      close() {
+        this.triggerEvent('close');
+      }
+   }
 })

pages/personCenter/component/commissionPop/commissionPop.wxml

@@ -1,16 +1,19 @@
-<view class="flex-col section">
-  <text class="self-center text">一键设置</text>
-  <view class="flex-col self-stretch mt-36">
-    <view class="flex-row justify-between items-baseline self-stretch">
-      <input class="font text_2" placeholder="请设置抽佣比例" />
-      <text class="font text_3">%</text>
-    </view>
-    <view class="self-start group mt-17">
-      <text class="font_2 text_4">注意：最高抽成比例</text>
-      <text class="font_2 text_5">5%</text>
-    </view>
-    <view class="flex-col justify-start items-center self-center text-wrapper mt-17">
-      <text class="font_2 text_6">确认设置</text>
+<view wx:if="{{show}}" class="popup-wrapper">
+  <view class="promo-mask" bindtap="close"></view>
+  <view class="flex-col section popup-content">
+    <text class="self-center text">一键设置</text>
+    <view class="flex-col self-stretch mt-36">
+      <view class="flex-row justify-between items-baseline self-stretch">
+        <input class="font text_2" placeholder="请设置抽佣比例" bindinput="handleInput" />
+        <text class="font text_3">%</text>
+      </view>
+      <view class="self-start group mt-17">
+        <text class="font_2 text_4">注意：最高抽成比例</text>
+        <text class="font_2 text_5">5%</text>
+      </view>
+      <view class="flex-col justify-start items-center self-center text-wrapper mt-17" bindtap="submit">
+        <text class="font_2 text_6">确认设置</text>
+      </view>
     </view>
   </view>
-</view>
+</view>

pages/personCenter/component/commissionPop/commissionPop.wxss

@@ -1,3 +1,4 @@
+@import "../../../../app.wxss";
 .mt-17 {
   margin-top: 31.88rpx;
 }
@@ -50,4 +51,32 @@
 .text_6 {
   color: #ffffff;
   line-height: 20.83rpx;
-}
+}
+/* 弹窗整体容器，覆盖全屏，层级最高，居中弹窗 */
+.popup-wrapper {
+  position: fixed;
+  top: -15%; left: 0; right: 0; bottom: 0;
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent; /* 透明，遮罩层单独控制 */
+}
+
+/* 遮罩层，覆盖全屏半透明黑色 */
+.promo-mask {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.45);
+  z-index: 9999;
+}
+
+/* 弹窗内容的容器，承载你现有的.section */
+.popup-content {
+  position: relative;
+  z-index: 10001; /* 比遮罩层高 */
+  max-width: 90vw;
+  width: 600rpx;  /* 你可以根据需求调整 */
+  max-height: 90vh;
+  overflow-y: auto; /* 超高时滚动 */
+}