1

src/pages/client/butler/edit.vue

@@ -0,0 +1,224 @@
+<template>
+  <view class="butler-edit-container">
+    <view class="edit-content">
+      <view class="edit-top">
+        <image class="edit-bg" src="https://activity.wagoo.live/butler.png" />
+        <view class="top-inner">
+          <view class="fs-44 app-font-bold app-fc-mark">  申请成为小哇</view>
+          <view class="fs-28 top-text"> 期待您的加入 </view>
+        </view>
+      </view>
+
+      <view class="edit-inner">
+        <view class="flex-row-start edit-cell">
+          <text class="fs-32 app-fc-main cell-title">姓名</text>
+          <input
+            class="fs-32 app-fc-main cell-input"
+            placeholder-class="fs-32 cell-placeholder"
+            placeholder="请输入姓名"
+            :value="butlerApplyInfo.name"
+            @input="nameChange"
+          />
+        </view>
+
+        <view class="flex-row-start edit-cell">
+          <text class="fs-32 app-fc-main cell-title">手机号</text>
+          <input
+            class="fs-32 app-fc-main cell-input"
+            placeholder-class="fs-32 cell-placeholder"
+            placeholder="请输入手机号"
+            type="number"
+            :value="butlerApplyInfo.phone"
+            @input="phoneChange"
+          />
+        </view>
+
+        <view
+          class="fs-30 flex-center app-fc-white request-btn"
+          @click="submit"
+        >
+          立即申请
+        </view>
+      </view>
+    </view>
+
+    <success-modal
+      v-if="showModal"
+      @ok="confirmModal"
+      :title="
+        butlerApplyInfo.status === 1
+          ? '申请处理中'
+          : butlerApplyInfo.status === 2
+          ? '您已申请成功'
+          : butlerApplyInfo.status === 3
+          ? '您已提交申请'
+          : '提交成功'
+      "
+      :message="
+        butlerApplyInfo.status === 1
+          ? '请耐心等待工作人员联系'
+          : butlerApplyInfo.status === 2
+          ? ''
+          : butlerApplyInfo.status === 3
+          ? '审核失败'
+          : '请耐心等待工作人员联系'
+      "
+    />
+  </view>
+</template>
+
+<script>
+import { applyKeeper, applyKeeperDetail } from "@/api/user";
+import SuccessModal from "@/components/SuccessModal.vue";
+
+export default {
+  components: { SuccessModal },
+  data() {
+    return {
+      showModal: false,
+      butlerApplyInfo: {
+        name: "",
+        phone: "",
+        status: "",
+      },
+    };
+  },
+  comments: {
+    SuccessModal,
+  },
+  mounted() {
+    this.getApplyKeeperDetails();
+  },
+  methods: {
+    // 获取管家信息
+    getApplyKeeperDetails() {
+      applyKeeperDetail().then((res) => {
+        this.butlerApplyInfo = res?.info || {};
+        //  1.已提交 2.已处理
+        if (
+          this.butlerApplyInfo.status === 1 ||
+          this.butlerApplyInfo.status === 2
+        ) {
+          this.showModal = true;
+        }
+      });
+    },
+    nameChange(e) {
+      this.butlerApplyInfo.name = e.detail.value?.trim?.() || "";
+    },
+    phoneChange(e) {
+      this.butlerApplyInfo.phone = e.detail.value?.trim?.() || "";
+    },
+    confirmModal() {
+      this.showModal = false;
+      uni.navigateBack();
+    },
+    submit() {
+      if (!this.butlerApplyInfo.name) {
+        uni.showToast({
+          title: "请填写姓名",
+          icon: "none",
+        });
+        return;
+      }
+      if (!this.butlerApplyInfo.phone) {
+        uni.showToast({
+          title: "请填写手机号",
+          icon: "none",
+        });
+        return;
+      }
+      if (!/^1[0-9]{10}$/.test(this.butlerApplyInfo.phone)) {
+        uni.showToast({
+          title: "手机号有误",
+          icon: "none",
+        });
+        return;
+      }
+      uni.showLoading({
+        title: "处理中",
+        ico: "none",
+        mask: true,
+      });
+      applyKeeper({
+        name: this.butlerApplyInfo.name,
+        phone: this.butlerApplyInfo.phone,
+      }).then((res) => {
+        uni.hideLoading();
+        this.showModal = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.butler-edit-container {
+  height: 100%;
+  background: #fbf8fc;
+  padding: 20rpx;
+  box-sizing: border-box;
+
+  .edit-top {
+    width: 100%;
+    height: 180rpx;
+    position: relative;
+
+    .edit-bg {
+      width: 100%;
+      height: 180rpx;
+    }
+
+    .top-inner {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      padding: 36rpx 0 36rpx 100rpx;
+
+      .top-text {
+        color: #3d3d3d;
+        margin-top: 2rpx;
+      }
+    }
+  }
+
+  .edit-content {
+    background: #fff;
+    border-radius: 30rpx;
+
+    .edit-inner {
+      padding: 40rpx 32rpx;
+      box-sizing: border-box;
+
+      .edit-cell {
+        box-sizing: border-box;
+        padding: 0 44rpx;
+        height: 92rpx;
+        background: #f5f5f5;
+        border-radius: 92rpx;
+        margin-bottom: 40rpx;
+
+        .cell-title {
+          width: 140rpx;
+        }
+        .cell-input {
+          flex: 1;
+        }
+        .cell-placeholder {
+          color: #acacac;
+        }
+      }
+    }
+
+    .request-btn {
+      width: 360rpx;
+      height: 90rpx;
+      background: $app_color_main;
+      border-radius: 90rpx;
+      margin: 60rpx auto 0;
+    }
+  }
+}
+</style>