smdz/src/view/smdz-pc/index.vue

<template>
  <div>
    <div class="content vflex acenter jaround" v-if="flag !== 'null'">
      <img :src="img_title" class="img_title" alt="">
      <el-input placeholder="请输入提取码" v-model="code" :type="show?'text':'password'" v-if="is_code" maxlength="12">
        <div slot="suffix">
          <img src="@/assets/image/visible.png" v-if="show" @click="see" class="point" style="width:24px;height: 24px;" alt="">
          <img src="@/assets/image/display.png" v-else @click="see" class="point"  style="width:24px;height: 24px;" alt="">
        </div>
      </el-input>
      <div>
        <div class="btn point" @click="extract">提取文件</div>
        <div class="text">该文件<span class="blue">有效期{{ effective }}天</span></div>
      </div>
      <div>
        <FootersWap></FootersWap>
      </div>
    </div>
    <div class="web_box vflex acenter jcenter" v-else>
      <img :src="img_title" class="img_title" alt="">
      <el-input placeholder="请输入提取码" v-model="code" :type="show?'text':'password'" v-if="is_code" maxlength="12">
        <div slot="suffix">
          <img src="@/assets/image/visible.png" v-if="show" @click="see" class="point" style="width:24px;height: 24px;" alt="">
          <img src="@/assets/image/display.png" v-else @click="see" class="point"  style="width:24px;height: 24px;" alt="">
        </div>
      </el-input>
      <div class="btn point" @click="extract">提取文件</div>
      <div class="text">该文件<span class="blue">有效期{{ effective }}天</span></div>
      <Footers></Footers>
    </div>
  </div>
</template>

<script>
  import { baseUrl } from '@/api/http.js'
  import Footers from '@/components/footer.vue'
  import FootersWap from '@/components/footerWap'

  export default{
    name: 'index_pc',
    components: { Footers,FootersWap },
    data() {
      return{
        img_title: require('@/assets/image/pc_title.png'),
        code: '',
        show: false,
        effective: 14,
        is_code: true,
        flag: '',
        id: '',
      } 
    },
    created() {
      this.flag = window.localStorage.getItem('flag')
      this.id = window.localStorage.getItem('id')
      this.getData()
    },
    
    methods: {
      
      getData() {
        let that = this
        let data = {
          id: that.id
        }
        that.$http.getData(data).then((res) => {
          if(res.data.code == 0) {
            // that.$message.error(res.data.msg)
            // that.$router.push('/error_pc')
          } else if(res.data.code == 1) {
            that.is_code = res.data.data.is_password == 1 ? true : false
            that.effective = res.data.data.period_of_validity
            window.localStorage.setItem('UUID',res.data.data.uuid)
            window.localStorage.setItem('package_name',res.data.data.package_name)
          } else if(res.data.code == 2) {
            that.effective = res.data.data
            that.$router.push({
              name:'error_pc',
              params:{
                effective: that.effective
              }
            })
          } 
        }).catch(() => {
          that.$message.error('系统繁忙')
        })
      },
      see() {
        this.show = !this.show
      },
      ragPwd() {
        
      },
      extract() {
        let that = this
        if(that.is_code && that.code == '') {
          that.$message.error({
            message: '请输入提取码',
            customClass: 'font20'
          })
          return
        }
        var reg = /^[a-zA-Z0-9]{1,12}$/; //密码(长度在12，只能包含字母、数字)
        var flag = reg.test(this.code);
        if(that.is_code && !flag) {
          this.$message.error({
            message:'提取码必须是字母或数字',
            customClass: 'font20'
          })
          return
        }
        let data = {
          id: that.id,
          password: that.code
        }
        that.$http.getFile(data).then((res) => {
          if(res.data.code == 0) {
            this.$message.error({
              message: res.data.msg,
              customClass: 'font20'
            })
            
          } else if(res.data.code == 1) {
            that.$router.push({
              name: 'down_pc',
              params: {
                effective: that.effective,
                code: that.code
              }
            })
          }
        })
        
      }
    }
  }
</script>

<style scoped>
  .web_box {
    width: 100%;
    min-height: 100vh;
    background: url('@/assets/image/pc_bg.png') no-repeat;
    background-size: 100% 100%;
  }
  .web_box .img_title {
    width: 440px;
    height: 89px;
    margin-bottom: 165px;
  }
  .web_box .btn {
    width: 272px;
    height: 60px;
    background: #1677B3;
    border-radius: 30px;
    margin: 120px 0 20px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 60px;
    text-align: center;
  }
  .web_box .text {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 22px;
  }
  .web_box .blue {
    color: #1677B3;
  }
  .web_box /deep/ .el-input {
    width: 510px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 30px;
    border: 1px solid #CCCCCC;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .web_box /deep/ .el-input .el-input__inner {
    border: none;
    height: 100%;
  }
  .web_box /deep/ .el-input .el-input__suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
  }
</style>
<style>
  .font20 {
    font-size: 20px !important;
  }
</style>
<style scoped>
  .content {
    width: 100%;
    min-height: 100vh;
    background: #FFFFFF;
  }
  .content .img_title {
    width: 183px;
    height: 37px;
  }
  .content .btn {
    width: 192px;
    height: 44px;
    background: #1677B3;
    border-radius: 30px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 44px;
    text-align: center;
  }
  .content .text {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 22px;
    padding-top: 20px;
    text-align: center;
  }
  .content .blue {
    color: #1677B3;
  }
  .content /deep/ .el-input {
    width: 272px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 30px;
    border: 1px solid #CCCCCC;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .content /deep/ .el-input .el-input__inner {
    border: none;
    height: 100%;
    font-size: 15px;
  }
  .content /deep/ .el-input .el-input__suffix {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
  }
</style>