epmet-apartment-pc/src/views/residence/checkIn/index.vue

<template>
  <div class="check-out-cont">
    <div class="header el-flex el-flex-y-center">
      <div class="tit">入住办理</div>
      <div class="back el-ml-4" @click="goBack()">
        <i class="el-icon-back"></i>返回
      </div>
    </div>
    <div>
      <!-- 入住流程 -->
      <div class="single el-flex el-flex-space-around">
        <div
          class="el-flex el-flex-y-center"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div
            class="tit el-flex el-flex-y-center model"
            :style="{ backgroundColor: item.bgColor }"
          >
            <el-image
              style="height: 28px; margin-right: 13px"
              :src="item.imageSrc"
            ></el-image
            ><span>{{ item.title }}</span>
            <div class="checkout-process-container">
              <el-image
                class="el-flex el-flex-y-center el-flex-center checkout-process"
                style="height: 26px"
                :src="susIcon"
                v-if="stepCompleted[index]"
              ></el-image>
            </div>
          </div>
          <div class="arrow-container">
            <el-image
              class="el-flex el-flex-y-center el-flex-center"
              style="height: 28px"
              :src="stepCompleted[index] ? arrowActive : arrow"
              v-if="index < dataList.length - 1"
            ></el-image>
          </div>
        </div>
      </div>
      <!-- 核验信息 -->
      <div>
        <el-form
          ref="checnInForm"
          :model="checnInForm"
          :rules="rules"
          size="small"
          :inline="true"
          v-if="currentStep === 1"
        >
          <div class="el-my-5">
            <CommonTitle>核验信息</CommonTitle>
          </div>
          <el-row>
            <el-form-item label="身份证" prop="id">
              <el-input
                v-model="checnInForm.id"
                placeholder="请输入用户名称"
                clearable
                style="width: 240px"
              />
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="checnInForm.id"
                placeholder="请输入手机号"
                clearable
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >查询</el-button
              >
            </el-form-item>
          </el-row>

          <el-form-item class="el-ml-6">
            <el-row :gutter="30">
              <el-col :span="6"> 姓名：张三 </el-col>
              <el-col :span="6"> 性别：女 </el-col>
              <el-col :span="6"> 手机号：-01-01 </el-col>
              <el-col :span="6">
                资格核验：<span style="color: #22cb8c">已通过</span>
              </el-col>
              <el-col :span="6">
                所选房间：国信棠樾云邸5号楼1单元805北卧
              </el-col>
              <el-col :span="6"> 本次入住天数： </el-col>
              <el-col :span="6"> 剩余可住天数： </el-col>
              <el-col :span="6"> 本次选房时间：-01-01 </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <!-- 物资发放 -->
        <el-form size="small">
          <div
            v-if="currentStep === 2 || currentStep === 3 || currentStep === 4"
          >
            <div class="el-my-3">
              <CommonTitle>核验信息</CommonTitle>
            </div>
            <el-form-item label-width="30px">
              <el-row :gutter="20">
                <el-col :span="8"> 入住房间：420102199001010000 </el-col>
                <el-col :span="4"> 姓名：张三 </el-col>
                <el-col :span="5"> 性别：女 </el-col>
                <el-col :span="6"> 手机号：-01-01 </el-col>
              </el-row>
            </el-form-item>
          </div>
          <div v-if="currentStep === 2">
            <div class="el-my-3">
              <CommonTitle>物资发放</CommonTitle>
            </div>
            <!-- 是否已发放物资 下拉选择器 -->
            <el-form-item label="是否发放物资" prop="isGrant">
              <el-select v-model="checnInForm.isGrant" placeholder="请选择">
                <el-option label="已发放" value="1"></el-option>
                <el-option label="未发放" value="2"></el-option>
              </el-select>
            </el-form-item>
            <!-- 备注说明 -->
            <el-form-item label="备注说明" prop="remark">
              <el-input
                v-model="checnInForm.remark"
                placeholder="请输入备注说明"
                type="textarea"
                clearable
                style="width: 240px"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <!-- 合同签订 -->
        <el-form size="small" v-if="currentStep === 3">
          <div>
            <div class="el-my-3">
              <CommonTitle>合同签订</CommonTitle>
            </div>
            <el-form-item label="是否签订合同">
              <span style="color: #f0910e">等待签订</span>
              <!-- 查看合同文本 -->
              <el-button type="text" size="mini" style="margin-left: 10px">
                查看合同
              </el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 履约保证金 -->
        <el-form size="small" v-if="currentStep === 4">
          <div>
            <div class="el-my-3">
              <CommonTitle>缴纳履约保证金</CommonTitle>
            </div>
            <el-row>
              <!-- 等待支付按钮 -->
              <el-col :span="6">
                <el-form-item label="履约保证金">
                  <!-- 文本按钮 等待支付 -->
                  <el-button
                    type="text"
                    size="mini"
                    style="margin-left: 10px; color: #f06b6b"
                  >
                    等待支付
                  </el-button>
                </el-form-item>
              </el-col>
              <!-- 已通过线下支付 -->
              <el-col :span="6">
                <el-form-item>
                  <el-checkbox v-model="checnInForm.checked"
                    >已通过线下支付</el-checkbox
                  >
                </el-form-item>
              </el-col>
              <!-- 支付方式 -->
              <el-col :span="6">
                <el-form-item label="支付方式">
                  <el-select v-model="checnInForm.isGrant" placeholder="请选择">
                    <el-option label="支付宝" value="1"></el-option>
                    <el-option label="微信" value="2"></el-option>
                    <el-option label="POS机刷卡" value="3"></el-option>
                    <el-option label="现金支付" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- 支付金额 -->
              <el-col :span="6">
                <el-form-item label="支付金额">
                  <el-input-number
                    v-model="checnInForm.actualPay"
                    @change="handleActualPayChange"
                    :min="0"
                    :max="checnInForm.shouldPay"
                  ></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 备注说明 -->

            <el-form-item label="备注说明" prop="remark">
              <el-input
                v-model="checnInForm.remark"
                placeholder="请输入备注说明"
                type="textarea"
                clearable
                style="width: 240px"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 添加按钮 -->
    <div class="button-group el-flex el-flex-end el-mt-4">
      <el-button @click="currentStep === 1 ? handleCancel() : handlePrevStep()">
        {{ currentStep === 1 ? "取消" : "上一步" }}
      </el-button>
      <el-button
        type="primary"
        @click="
          currentStep === dataList.length - 1
            ? handleReleaseHouse()
            : handleNextStep()
        "
      >
        {{ currentStep === dataList.length - 1 ? "履约保证金" : "下一步" }}
      </el-button>
    </div>
  </div>
</template>

<script>
import CommonTitle from "../../components/CommonTitle.vue";

export default {
  name: "App",
  components: {
    CommonTitle,
  },
  data() {
    return {
      // 这里可以定义数据
      dataList: [
        {
          title: "核验信息",
          imageSrc: require("@/assets/images/address-card.png"),
          bgColor: "#FBEDC8",
        },
        {
          title: "物资发放",
          imageSrc: require("@/assets/images/antFill-gift.png"),
          bgColor: "#C2E2F9",
        },
        {
          title: "合同签订",
          imageSrc: require("@/assets/images/fa-book.png"),
          bgColor: "#FBD5D5",
        },
        {
          title: "履约保证金",
          imageSrc: require("@/assets/images/pay-circle.png"),
          bgColor: "#8BFDD3",
        },
        {
          title: "办理完成",
          imageSrc: require("@/assets/images/check_circle.png"),
          bgColor: "#CFCDFB",
        },
      ],
      arrow: require("@/assets/images/arrow_forward.png"),
      arrowActive: require("@/assets/images/arrow_forward_a.png"),
      checnInForm: {}, //表单参数
      // 表单验证规则
      rules: {
        forceClearReason: [
          { required: true, message: "请选择强制清退原因", trigger: "change" },
        ],
      },
      // 显示搜索条件
      showSearch: true,
      // 退房类型: 1-正常退房 2-强制退房
      checkOutType: [
        { label: "正常退房", value: "1" },
        { label: "强制退房", value: "2" },
      ],
      // 强制清退原因
      forceClearReason: [
        { label: "入住期间有异常", value: "1" },
        { label: "入住期间有异常", value: "2" },
        { label: "入住期间有异常", value: "3" },
        { label: "入住期间有异常", value: "4" },
      ],
      susIcon: require("@/assets/images/check-circle-fas.png"),
      currentStep: 1, // 当前步骤
      stepCompleted: this.dataList
        ? Array(this.dataList.length - 1).fill(false)
        : [], // 存储每个步骤的完成状态
    };
  },
  methods: {
    // 返回首页
    goBack() {
      this.$router.push({ path: "/" });
    },
    handleQuery() {
      console.log("查询操作");
    },
    handleCancel() {
      this.$router.push({ path: "/" });
      console.log("取消操作");
    },
    // 上一步操作
    handlePrevStep() {
      if (this.currentStep > 0) {
        this.currentStep--;
        console.log("上currentStep::", this.currentStep);
        console.log("dataList.::", this.dataList);

        if (this.currentStep <= this.stepCompleted.length) {
          this.stepCompleted[this.currentStep - 1] = false;

          console.log("stepCompleted::", this.stepCompleted);
        }
      }
    },
    // 下一步操作
    handleNextStep() {
      if (this.currentStep < this.dataList.length) {
        this.currentStep++;
        console.log("下一步操作", this.currentStep);

        if (this.currentStep > 1) {
          this.stepCompleted[this.currentStep - 2] = true;

          console.log("stepCompleted下::", this.stepCompleted);
        }
      }
    },
    // 完成办理
    handleReleaseHouse() {
      console.log("完成办理");
    },
  },
  computed: {
    // 这里可以定义计算属性
  },
  mounted() {
    // 挂载后执行的逻辑
  },
};
</script>

<style scoped lang="scss">
/* 这里可以添加样式 */
.check-out-cont {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px 20px;

  .header {
    .tit {
      font-size: 20px;
    }
    .back {
      color: #3d81cf;
      font-size: 14px;
      cursor: pointer;
    }
  }
  .single {
    margin-top: 20px;
    .tit {
      padding: 15px 33px;
      border-radius: 4px;
    }
    .model {
      position: relative;
    }
  }
  .checkout-process-container {
    width: 26px;
    height: 26px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .arrow-container {
    width: 28px;
    height: 28px;
    margin-left: 13px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .checkout-process {
    position: absolute;
    top: -5px;
    right: -3px;
  }
  .button-group {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
}
</style>