mall-web-ssr/components/product/component/ComponentDetail.vue

<template>
  <div class="componentDetail">
    <div class="container">
      <div class="menu">
        <component-menu/>
      </div>
      <div class="detail">
        <div class="component-img">
          <img :src="list.img || '/images/component/default.png'"/>
        </div>
        <div class="component-message">
          <div class="message-code">
            <span>{{list.code}}</span>
          </div>
          <div class="hr-grey"></div>
          <div class="row">
            <div class="form-group row" v-if="list.kind">
              <div class="message-item">类目</div>
              <div class="colon">:</div>
              <div><a class="message-body blue" target="_blank" :href="`/product/kind/${list.kindid}`">{{list.kind.nameCn}}</a></div>
            </div>
            <div class="form-group row" v-if="list.brand">
              <div class="message-item">品牌</div>
              <div class="colon">:</div>
              <div><a class="message-body blue" target="_blank" :href="`/product/brand/${list.brand.uuid}`">{{list.brand.nameCn}}</a></div>
            </div>
            <div class="form-group row">
              <div class="message-item">总库存量</div>
              <div class="colon">:</div>
              <div class="message-body">{{list.reserve || '暂无库存'}}</div>
            </div>
            <div class="form-group row">
              <div class="message-item">封装</div>
              <div class="colon">:</div>
              <div class="message-body">{{list.encapsulation || '暂无信息'}}</div>
            </div>
            <div class="form-group row">
              <div class="message-item">下载</div>
              <div class="colon">:</div>
              <div class="message-body"><a :href="list.attach" v-if="list.attach">规格书</a><span v-if="!list.attach">暂无规格书</span></div>
            </div>
            <div class="form-group">
               <button type="text" v-if="!collectList" @click="collect(list.id)" class="btn btn-default btn-stroe" style="line-height: 26px;">加入收藏</button>
               <button class="btn btn-default btn-stroe" v-if="collectList" disabled="disabled">已收藏</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--关注-->
    <el-dialog
      :visible.sync="dialogVisible"
      size="tiny"
    >
      <h3 class="header-text">收藏成功！</h3>
      <div class="focus modal-body">
        <button type="button" @click="dialogVisible = false" class="btn" style="margin-left:25px;">关&nbsp;&nbsp;闭</button>
        <button type="button" class="focus-btn btn btn btn-info" style="margin-left:35px;">
          <a href="/user#/home/componentcol" target="_blank">查看我的产品收藏</a>
        </button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { ComponentMenu } from '~components/product'
  export default {
    name: 'ComponentDetail',
    data () {
      return {
        dialogVisible: false
      }
    },
    mounted () {
      this.collectList()
    },
    computed: {
      lists () {
        return this.$store.state.componentDetail.detail
      },
      list () {
        return this.lists.data
      },
      user () {
        return this.$store.state.option.user
      },
      colList () {
        return this.$store.state.product.common.collectList.data
      },
      collectList () {
        let id = this.lists.data.id
        let store = this.colList
        if (store) {
          for (let i = 0; i < store.length; i++) {
            if (store[i].componentid === id) {
              return true
            }
          }
        }
      }
    },
    components: {
      ComponentMenu
    },
    methods: {
      collect (id) {
        if (this.user.logged) {
          this.dialogVisible = true
          let kind = 2
          this.$store.dispatch('product/saveEntity', {componentid: id, kind: kind})
          this.collectList = true
        } else {
          this.$http.get('/login/page').then(response => {
            if (response.data) {
              this.$router.push('/auth/login')
            }
          })
        }
      }
    }
  }
</script>
<style scoped>
  .header-text {
    text-align: center;
    font-size: 20px;
    color: #008B00;
    margin-top: 0;
  }
  .focus button.focus-btn a{
    color: #fff;
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  .focus button.focus-btn{
    width: 138px;
    height: 36px;
    line-height: 36px;
    padding: 0;
  }
  .componentDetail .el-dialog__wrapper .focus-btn a{
    color: #fff;
  }
  .componentDetail .container {
    width: 1190px;
    padding: 0;
  }
  .detail{
    margin-bottom: 20px;
  }
  .componentDetail .container .component-img {
    width: 260px;
    height: 260px;
    display: table-cell;
    border:1px solid #ccc;
    text-align: center;
    vertical-align: middle;
  }
  .componentDetail .container .component-img a {
    display: table-cell;
    width: 258px;
    height: 258px;
    text-align: center;
    vertical-align: middle;
  }
  .componentDetail .container .component-img img {
    max-width: 258px;
    max-height: 258px;
  }
  .componentDetail .blue {
    color: #214797;
  }
  .componentDetail .container .component-message {
    width: 910px;
    display: table-cell;
    padding-left: 20px;
    margin-left: 10px;
  }
  .componentDetail .container .component-message .message-code {
    font-size: 24px;
    color: rgb(50,50,50);
    font-weight: 700;
    line-height: 40px;
  }
  .componentDetail .container .component-message .hr-grey {
    height: 1px;
    width: 100%;
    background-color: #ccc;
  }
  .componentDetail .container .component-message .row {
    margin: 12px 0;
    width: 890px;
    height: 16px;
  }
  .componentDetail .container .component-message .message-item {
    float:left;
    width:60px;
    text-align: justify;
    text-align-last: justify;
    font-size: 14px;
  }
  .componentDetail .container .component-message .colon {
    float:left;
    margin: 0 10px;
  }
  .componentDetail .container .component-message .message-body {
    float: left;
    font-size: 14px;
  }
  .componentDetail .container .component-message .message-body a {
    color: #337ab7;
  }
  .componentDetail .container .component-message .message-body:hover a{
    color: #23527c;
  }
  .componentDetail .message-item:first-child {
    padding-left: 0;
  }
  .componentDetail .container .storeIns{
    margin-top: 20px;
    width: 1190px;
    height: 48px;
    line-height: 48px;
  }
  .componentDetail .container .storeIns .sign {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
  }
  .componentDetail .container .storeIns .storeInList {
    display: table-cell;
  }
  .componentDetail .container .storeIn {
    width: 98px;
    height: 49px;
    line-height: 30px;
    float: left;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
  }
  .componentDetail .container .storeIn-active {
    width: 98px;
    float: left;
    border: 1px solid #5078cb;
    text-align: center;
    vertical-align: middle;
    margin-right: 15px;
    cursor: pointer;
  }
  .componentDetail .container .storeIn a,.componentDetail .storeIn-active a {
    display: table-cell;
    height: 46px;
    width: 98px;
    text-align: center;
    vertical-align: middle;
  }
  .componentDetail .storeIn a>img,.componentDetail .storeIn-active a>img {
    max-width: 95px;
    max-height: 46px;
  }
</style>