proginn-frontend/components/common/connectUs.vue

<template>
  <div :class="{connectUs: !mobile, connectUsMobile: mobile}">
    <div class="toastBox" v-if="isShowToast">
      <div class="toastArea">
        <div class="title">行业解决方案专属客服</div>
        <div class="tips">填写联系方式 立即与专属客服进行沟通</div>
        <div class="nameCell">
          <p class="label">联系人</p>
          <input type="text" v-model="name" maxlength="10">
        </div>
        <div class="phoneCell">
          <p class="label">电话</p>
          <input type="number" v-model="phone" oninput="if(value.length>5)value=value.slice(0,11)">
        </div>
        <div class="submitBtn" @click="handleSubmit">
          <p>提 交</p>
        </div>
        <div class="closeIcon" @click="close"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["source", "isShowToast", "sourceId"],
  components: {},
  data() {
    return {
      name: "",
      phone: "",
      mobile: this.$deviceType.isMobile()
    };
  },
  computed: {},
  mounted() {
    const {realname = '', login_mobile = '', mobile=''} = this.$store.state.userinfo || {}
    this.name = realname
    this.phone = login_mobile || mobile
  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleSubmit() {
      if (!this.name || !this.phone || this.phone.length < 6) {
        return this.$message.error('请填写完整的信息')
      }
      const UA = ['Mobile 浏览器', 'PC 浏览器', 'Android', 'IOS']
      let agent = 'PC 浏览器'
      if (this.$deviceType.android) {
        agent = 'Android'
      } else if (this.$deviceType.ios) {
        agent = 'IOS'
      } else if (this.$deviceType.isMobile()) {
        agent = 'Mobile 浏览器'
      }
      const { name, phone, source, sourceId } = this
      let p = {
        name, phone, from: source, agent
      }
      if (sourceId) {
        p.id = sourceId
      }
      this.$axios.$post('/api/user/create_not_login_user', p).then(res => {
        this.$message.success(res.info || '提交成功')
        this.$emit('close')
        if (res.status === 1) {
          this.name = ''
          this.phone = ''
        }
      }).catch(e => {
        this.$message.error('提交失败,请重试！')
      })
    }
  }
};
</script>

<style lang="scss">
  @import "~@/assets/css/scssCommon.scss";
.connectUs {
  .toastBox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .toastArea {
      position: relative;
      width: 446px;
      height: 403px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      padding: 30px 47px;

      .title {
        font-size: 19px;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 26px;
        text-align: center;
      }

      .tips {
        margin-top: 8px;
        margin-bottom: 14px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 17px;
        text-align: center;
      }

      .nameCell, .phoneCell {
        margin-top: 25px;

        .label {
          font-size: 14px;
          font-weight: 500;
          color: rgba(25, 34, 46, 1);
          line-height: 20px;
        }
        input {
          margin-top: 5px;
          padding: 10px;
          width: 352px;
          height: 48px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(221, 225, 230, 1);
        }
      }
      .nameCell {
        margin-top: 39px;
      }

      .submitBtn {
        margin-top: 18px;
        width: 352px;
        height: 48px;
        background: rgba(48, 142, 255, 1);
        box-shadow: 0 2px 6px 0 rgba(48, 142, 255, 0.3);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        p {
          font-size: 14px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
        }
      }

      .closeIcon {
        position: absolute;
        right: 20px;
        top: 34px;
        width: 16px;
        height: 16px;
        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }

  }

}
.connectUsMobile {
  .toastBox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 888;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .toastArea {
      position: relative;
      width: pxtovw(355);
      height: pxtovw(403);
      background: rgba(255, 255, 255, 1);
      border-radius: pxtovw(3);
      padding: pxtovw(30) pxtovw(30);

      .title {
        font-size: pxtovw(19);
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: pxtovw(26);
        text-align: center;
      }

      .tips {
        margin-top: pxtovw(8);
        margin-bottom: pxtovw(14);
        font-size: pxtovw(12);
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: pxtovw(17);
        text-align: center;
      }

      .nameCell, .phoneCell {
        margin-top: pxtovw(25);

        .label {
          font-size: pxtovw(14);
          font-weight: 500;
          color: rgba(25, 34, 46, 1);
          line-height: pxtovw(20);
        }
        input {
          margin-top: pxtovw(5);
          padding: pxtovw(10);
          width: pxtovw(295);
          height: pxtovw(48);
          background: rgba(255, 255, 255, 1);
          border-radius: pxtovw(3);
          border: pxtovw(1) solid rgba(221, 225, 230, 1);
        }
      }
      .nameCell {
        margin-top: pxtovw(39);
      }

      .submitBtn {
        margin-top: pxtovw(18);
        width: pxtovw(295);
        height: pxtovw(48);
        background: rgba(48, 142, 255, 1);
        box-shadow: 0 pxtovw(2) pxtovw(6) 0 rgba(48, 142, 255, 0.3);
        border-radius: pxtovw(2);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        p {
          font-size: pxtovw(14);
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: pxtovw(20);
        }
      }

      .closeIcon {
        position: absolute;
        right: pxtovw(20);
        top: pxtovw(34);
        width: pxtovw(16);
        height: pxtovw(16);
        background: url('~@/assets/img/credit/closeIcon.png') no-repeat;
        background-size: cover;
        cursor: pointer;
      }
    }

  }
}
</style>