caimei-authentic-www/pages/_template/app/center/device/index.vue

<template>
  <div class="page">
    <div class="page-content">
      <div class="title">设备认证信息</div>
      <template v-if="!isAuth">
        <div class="tip">抱歉，您暂未认证设备</div>
        <div class="btn" @click="toAuth">去认证</div>
      </template>
      <div class="device-list" v-else>
        <div
          class="device"
          @click="toDetail(product)"
          v-for="product in list"
          :key="product.productId"
        >
          <div class="cover">
            <img :src="product.image" :alt="product.productName" />
          </div>
          <div class="content">
            <div class="name">{{ product.productName }}</div>
            <div class="sncode">SN码：{{ product.snCode | formatSnCode }}</div>
          </div>
        </div>
      </div>
      <div class="to-auth-btn" v-if="isAuth && !isPc" @click="toAuth">去认证</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  layout: 'app-normal',
  data() {
    return {
      list: [],
      clubInfo: {},
    }
  },
  filters: {
    formatSnCode(code) {
      if (!code) return ''
      return code.replace(/^(\w{2})\w+(\w{4})$/, '$1******$2')
    },
  },
  computed: {
    ...mapGetters(['routePrefix', 'userInfo', 'authUserId', 'isPc']),
    isAuth() {
      return this.clubInfo.auditStatus === 1 && this.list.length > 0
    },
  },
  created() {
    this.fetchProductList()
    this.fetchAuthDetail()
  },
  methods: {
    // 产看详情
    toDetail(row) {
      const path = `${this.routePrefix}/center/device/detail?productId=${row.productId}&relationId=${row.relationId}`
      this.$router.push(path)
    },
    // 获取机构信息
    async fetchAuthDetail() {
      try {
        if (this.userInfo && !this.userInfo.authId) return
        const res = await this.$http.api.fetchClubAuthInfoData({
          authId: this.userInfo.authId,
        })
        this.clubInfo = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 获取已认证设备列表
    async fetchProductList() {
      try {
        const authId = this.userInfo.authId
        if (!authId) return
        const res = await this.$http.api.fetchClubAuthProductList({
          authId,
          authUserId: this.authUserId,
        })
        if (res.data) {
          this.list = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 去认证
    toAuth() {
      this.$router.push(`${this.routePrefix}/form/club-register`)
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin ellipsis($line: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@media screen and (min-width: 768px) {
  .page-content {
    width: 1000px;
    margin: 0 auto;
    .title {
      font-size: 24px;
      text-align: center;
      font-weight: bold;
      padding: 60px 0;
    }

    .tip {
      font-size: 16px;
      color: #b2b2b2;
      margin-top: 200px;
      margin-bottom: 24px;
      text-align: center;
    }

    .btn {
      width: 98px;
      height: 36px;
      background: #BC1724;
      border-radius: 4px;
      text-align: center;
      line-height: 36px;
      color: #fff;
      font-size: 16px;
      margin: 0 auto;
      cursor: pointer;
    }

    .device-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      .device {
        width: 490px;
        height: 136px;
        background: #f3f5f6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16px;
        margin-bottom: 20px;
        cursor: pointer;

        .cover {
          img {
            display: block;
            width: 106px;
            height: 106px;
          }
        }
        .content {
          width: 320px;
          margin-left: 16px;
          .name {
            font-size: 18px;
            color: #282828;
            font-weight: bold;
            margin-bottom: 24px;
            @include ellipsis(1);
          }
          .sncode {
            font-size: 16px;
            color: #666666;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-content {
    .title {
      font-size: 4.2vw;
      text-align: center;
      font-weight: bold;
      padding: 8vw 0;
    }

    .to-auth-btn {
      width: 85.2vw;
      height: 12vw;
      background: #BC1724;
      border-radius: 0.2vw;
      text-align: center;
      line-height: 12vw;
      color: #ffffff;
      font-size: 3.6vw;
      position: fixed;
      bottom: 24vw;
      left: 50%;
      transform: translateX(-50%);
    }

    .tip {
      font-size: 3vw;
      color: #b2b2b2;
      margin-top: 60vw;
      margin-bottom: 4.8vw;
      text-align: center;
    }

    .btn {
      width: 36vw;
      height: 8.8vw;
      background: #BC1724;
      border-radius: 0.4vw;
      text-align: center;
      line-height: 8.8vw;
      color: #fff;
      font-size: 3.4vw;
      margin: 0 auto;
    }

    .device-list {
      padding: 0 3.2vw;
      padding-bottom: 26vw;
      .device {
        height: 26vw;
        background: #f3f5f6;
        border-radius: 0.8vw;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 3.2vw;
        margin-bottom: 3.2vw;
        cursor: pointer;

        .cover {
          img {
            display: block;
            width: 19.6vw;
            height: 19.6vw;
          }
        }
        .content {
          width: 59vw;
          margin-left: 3.2vw;
          .name {
            font-size: 3.6vw;
            color: #282828;
            font-weight: bold;
            margin-bottom: 3.2vw;
            @include ellipsis(1);
          }
          .sncode {
            font-size: 3.6vw;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>