wagoo-douy3/src/pages/client/butler/edit.vue

<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>