manhole-cover/src/views/business-end/index.vue

<template>
  <div class="mianBox">
    <template v-if="isLogin">
      <div class="mianBoxF">
        <div class="titleType">
          <div>我的预约客户（{{tableData.length}}人）</div>
          <div>商务端</div>
        </div>
        <van-divider />
        <van-form validate-trigger="onSubmit" class="formS" :submit-on-enter="false" ref="formS" :show-error="false">
          <van-field v-model="searchForm.phone" size="tel" name="手机" type="tel" placeholder="客户姓名/联系电话"/>
          <van-button plain block type="info" native-type="submit" @click="getData()">查询</van-button>
        </van-form>
        <div class="tableBox">
          <el-table border fit :data="tableData" height="100%" style="width: 100%">
            <el-table-column prop="name" label="客户姓名"> </el-table-column>
            <el-table-column prop="phone" label="联系电话"> </el-table-column>
            <el-table-column prop="companyName" label="单位名称"> </el-table-column>
            <el-table-column prop="post" label="职位"> </el-table-column>
            <el-table-column prop="sf" label="省份"> </el-table-column>
            <el-table-column prop="dateOfVisit" label="到访日期"> </el-table-column>
            <el-table-column prop="accompany" label="随行人数">
              <template slot-scope="scope">
                {{ scope.row.accompany === 1 ? '1-3人' : scope.row.accompany === 2 ? '3-7人' : '7人以上' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    <template v-else>
      <img src="../../assets/image/title.png" alt="" class="title" />
      <div class="ckyyxx">第20届上海国际社会</div> 
      <div class="kjdl">公共安全展览会</div>
      <div class="formBox">
        <van-form
          @submit="onSubmit"
          validate-trigger="onSubmit"
          :submit-on-enter="false"
          ref="formT"
          :show-error="false"
        >
          <van-field
            v-model="form.phone"
            name="手机"
            type="tel"
            placeholder="请输入你的手机号"
            :rules="[
              {
                required: true,
                pattern: /^1[345678]\d{9}$/,
                message: '请输入正确的手机号',
              },
            ]"
          />
          <van-field
            v-model="form.password"
            name="密码"
            type="password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          >
          </van-field>
          <div style="margin: 16px">
            <van-button plain round block type="info" native-type="submit"
              >立即登录</van-button
            >
          </div>
        </van-form>
      </div>
    </template>
  </div>
</template>

<script>
// import { Notify } from "vant";
export default {
  data() {
    return {
      isLogin: false,
      form: {
        phone: "",
        password: "",
      },
      searchForm: {
        phone: "",
      },
      tableData:[],
      tableDataList:[],
    };
  },
  mounted() {
  },
  destroyed() {
    this.isLogin = false;
  },
  methods: {
    async getData() {
      this.tableData = this.tableDataList.filter(val=>val.phone.indexOf(this.searchForm.phone)!==-1 || val.name.indexOf(this.searchForm.phone)!==-1)
    },
    async onSubmit() {
      let res = await this.$axios.post(
        "/AF/userLogin" +
          "?" +
          this.$qs.stringify({
            ...this.form,
          })
      );
      if (res.data.success) {
        this.tableDataList = res.data.data
        this.tableData = res.data.data
        this.isLogin = true;
        for (const key in this.form) {
          this.form[key] = "";
        }
        this.$refs.formT.resetValidation();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mianBox {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/bg2.png");
  background-size: 100% 100%;
  font-family: PingFangSC-Medium, PingFang SC;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  .mianBoxF {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .titleType {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 30px;
    height: 60px;
    box-sizing: border-box;
  }
  .formS {
    display: flex;
    padding: 0 30px 20px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-end;
    /deep/ .van-field {
      flex: 1;
      margin-right: 20px;
      font-size: 28px;
      padding-left: 0;
      background: transparent;
      border: none;
      border-bottom: 1px solid #fff;
      padding: 10px;
      .van-field__label {
        color: #fff;
      }
      &::after {
        display: none;
      }
      input {
        color: #fff;
      }
      .van-field__button {
        border-left: 1px solid #d8d8d8;
      }
      .hqyzm {
        font-size: 24px;
        font-weight: 400;
        color: #ffc27b;
        line-height: 33px;
      }
    }
    .van-button {
      height: 70px;
      width: 150px;
    }
  }
  .tableBox {
    flex: 1;
    padding: 20px 30px;
    box-sizing: border-box;
    /deep/.el-table {
      background: transparent !important;
      color: #fff;
      border-color: rgba(0, 250, 251, 0.20);
      &::before{
          background: rgba(0, 250, 251, 0.20);
      }
      &::after{
          background: rgba(0, 250, 251, 0.20);
      }
      table,
      tr,
      td,
      th {
        background: transparent !important;
        color: #fff;
        border-color: rgba(0, 250, 251, 0.20);
      }
      .el-table__empty-text {
        background: transparent;
        color: #fff;
        border-color: rgba(0, 250, 251, 0.20);
      }
        .el-table__expand-icon {
            color: #FFF;
        }
    }
    /deep/ table {
        tr,
        td {
            background: rgba(0, 251, 251, .051) !important;
            color: #FFF;
            border-color: rgba(0, 250, 251, 0.20);
        }
        tr {
            margin-bottom: 1px;
        }
        th {
            color: #FFF;
            background: rgba(0, 250, 251, 0.20);
            border-color: transparent;
        }
        thead {
            th {
                border-color: rgba(0, 250, 251, 0.20) !important;
            }
        }
    }
  }
  .ckyyxx {
    position: absolute;
    top: 210px;
    left: 55px;
    height: 59px;
    font-size: 42px;
    font-weight: 500;
    line-height: 59px;
    letter-spacing: 1px;
  }
  .kjdl {
    position: absolute;
    left: 55px;
    top: 283px;
    height: 33px;
    font-size: 24px;
    font-weight: 400;
    line-height: 33px;
    letter-spacing: 1px;
  }
  .infoBtn {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 600px;
  }
  .van-steps {
    margin-top: 50px;
    background: transparent;
    .van-step {
      color: #fff;
      font-size: 26px;
      font-weight: 400;
      color: #ffffff;
      line-height: 37px;
      letter-spacing: 1px;
      span {
        display: block;
      }
      &::after {
        display: none;
      }
    }
  }
  .infoBox {
    position: absolute;
    top: 500px;
    left: o;
    padding: 0 50px 0 30px;
    box-sizing: border-box;
    width: 100vw;
    height: auto;
    .titleInfo {
      display: flex;
      align-items: center;
      margin-left: 27px;
      span {
        width: 10px;
        height: 40px;
        background: linear-gradient(180deg, #0016ff 0%, #c724f8 100%);
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .title {
    position: absolute;
    top: 54px;
    right: 58px;
    width: 110px;
    height: 55px;
  }
  .gjsh {
    position: absolute;
    top: 200px;
    left: 50px;
    height: 43px;
    font-size: 39px;
    font-weight: 400;
    line-height: 59px;
    letter-spacing: 1px;
  }
  .ggaq {
    position: absolute;
    left: 50px;
    top: 260px;
    height: 86px;
    font-size: 86px;
    font-weight: bold;
    line-height: 129px;
    letter-spacing: 1px;
  }
  .ggaqEl {
    position: absolute;
    left: 55px;
    top: 375px;
    height: 38px;
    font-size: 34px;
    font-family: ArialMT;
    line-height: 39px;
    letter-spacing: 4px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  }
  .formBox {
    position: absolute;
    top: 360px;
    left: 0;
    right: 0;
    margin: auto;
    width: 670px;
    // height: 1069px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 40px;
    padding: 40px;
    box-sizing: border-box;
    .van-form {
      /deep/ .van-field {
        font-size: 28px;
        padding-left: 0;
        margin-top: 25px;
        background: transparent;
        border: none;
        border-bottom: 1px solid #fff;
        .van-field__label {
          color: #fff;
        }
        &::after {
          display: none;
        }
        input {
          color: #fff;
        }
        .van-field__button {
          border-left: 1px solid #d8d8d8;
        }
        .hqyzm {
          font-size: 24px;
          font-weight: 400;
          color: #ffc27b;
          line-height: 33px;
        }
      }
      .infoT {
        font-size: 24px;
        font-weight: 300;
        color: #ffffff;
        line-height: 33px;
        text-align: right;
        width: 100%;
        display: block;
        margin-top: 16px;
      }
      .van-button {
        margin-top: 120px;
      }
    }
  }
}
</style>