完成小程序端接单模块的前端部分

pages/personCenter/component/InvitationCodePop/InvitationCodePop.js

@@ -1,24 +1,32 @@
-// pages/personCenter/component/InvitationCodePop/InvitationCodePop.js
 Component({
-
-  /**
-   * 组件的属性列表
-   */
   properties: {
-
+    // 接收传递进来的二维码图片路径
+    show: {           // 控制显示/隐藏
+      type: Boolean,
+      value: false
+    },
+    qrcode: {
+      type: String,
+      value: ""
+    },
   },
 
-  /**
-   * 组件的初始数据
-   */
   data: {
-
+    closeIcon: "./images/cha.png",  // 关闭按钮的图标
   },
 
-  /**
-   * 组件的方法列表
-   */
   methods: {
+    // 关闭弹窗
+    close() {
+      // 触发关闭弹窗事件
+      this.triggerEvent('close');
+    },
 
+    // 预览二维码
+    previewQrcode() {
+      wx.previewImage({
+        urls: [this.data.qrcode],  // 预览图片
+      });
+    }
   }
-})
+});

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/commissionRatePop/commissionRatePop.js

@@ -1,24 +1,28 @@
-// pages/personCenter/component/commissionRatePop/commissionRatePop.js
 Component({
-
   /**
    * 组件的属性列表
    */
   properties: {
-
-  },
-
-  /**
-   * 组件的初始数据
-   */
-  data: {
-
+    show: {           // 控制显示/隐藏
+      type: Boolean,
+      value: false
+    },
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    close() {
+      this.triggerEvent('close');
+    },
+    cancel() {
+      this.triggerEvent('cancel');
+    },
+    confirm() {
+      // 触发confirm事件带数据
+      this.triggerEvent('confirm', {/*数据*/});
+    },
   }
-})
+})
+