yos_web/src/SDrpManagement/ProductGroup/modules/GroupDetail/groupDetail.vue

<template>
<div class="container normal-panel">
  <el-tag style="margin-left: 15px" size="small" >{{selectProduct.brandname}}</el-tag>
  <div class="product-detail container flex-align-stretch" style="width: 100%">
    <div>
      <el-image style="width:400px;height:400px;margin-right:30px" :src="actImage?actImage.url:''" fit="cover" />
      <div class="flex-align-stretch column">
        <el-image class="thumImage mt-10" :class="item.attachmentid === actImage.attachmentid?'act':''" v-for="item in selectProduct.attinfos" :key="item.index" :src="item.url" @click="actImage = item" fit="cover" />
      </div>
    </div>

    <div style="flex:1;">
      <p class="productName normal-margin">
        <el-tag class="inline-16" @click="actTradefield = item.tradefield" v-for="(item,index) in tradefield" :key="index" size="small" :effect="actTradefield === item.tradefield ? 'dark' : 'plain'">{{item.tradefield}}
        </el-tag>
        {{selectProduct.itemname}}
      </p>
      <p class="normal-margin" style="color:#888;">编码:&emsp;{{selectProduct.itemno}}</p>
      <p class="normal-margin">价格:&emsp;<span class="product-price">¥{{selectProduct.gradeprice}}</span>&nbsp;<span class="text-throughline">¥{{selectProduct.marketprice}}</span></p>
      <div class="line normal-margin"></div>
      <p class="normal-margin">型号:&emsp;{{selectProduct.model}}</p>
      <div>
        <p class="normal-margin">规格:&emsp;{{selectProduct.spec}}</p>
      </div>
      <div>
        <p class="normal-margin">标准:&emsp;{{selectProduct.standards}}</p>
      </div>
      <div v-if="selectProduct.itemextend">
        <p class="normal-margin">材质:&emsp;{{selectProduct.itemextend[0].material}}</p>
      </div>
      <div class="flex-align-center" style="margin-bottom:30px">
        <p>数量:&emsp;</p>
        <el-input-number v-model="count" :min="selectProduct.orderminqty" :step="selectProduct.orderaddqty" size="small" label="描述文字"></el-input-number>
        <span style="color:#888;font-size: 14px;margin-left: 10px">起订量：{{selectProduct.orderminqty}}</span>
        <span style="color:#888;font-size: 14px;margin-left: 10px">增量：{{selectProduct.orderaddqty}}</span>
        <span style="color:#888;font-size: 14px;margin-left: 10px">库存：
          <span v-if="selectProduct.stockstatus === '紧缺'" style="color: red">{{selectProduct.stockstatus}}</span>
          <span v-else-if="selectProduct.stockstatus === '充足'" style="color: green">{{selectProduct.stockstatus}}</span>
          <span v-else>{{selectProduct.stockstatus}}</span>
        </span>
      </div>

      <div class="type">
        <div class="content normal-margin">
          <p class="inline-16">更多:</p>
          <el-tag class="inline-16" style="margin-top: 5px;margin-bottom: 5px" @click="typeClick(item)" v-for="(item,index) in detail" :key="index" size="small" :effect="selectProduct.itemno == item.itemno ? 'dark' : 'plain'">
            {{item.model.length >20?item.model.substring(0,19)+'...':item.model}}
          </el-tag>
<!--          <span style="color: #4f7bfd;width: 100px"  @click="typeClick(item)" v-for="(item,index) in detail" :key="index">
              {{item.model}}
            </span>-->
        </div>
      </div>
<!--      <div class="type">
        <div class="content normal-margin">
          <p class="inline-16">领域:</p>
          <el-tag class="inline-16" @click="actTradefield = item.tradefield" v-for="(item,index) in tradefield" :key="index" size="small" :effect="actTradefield === item.tradefield ? 'dark' : 'plain'">{{item.tradefield}}
          </el-tag>
        </div>
      </div>-->
      <div style="width: 700px;background: #f6f6f6;margin-bottom: 20px">
        <el-row :gutter="20" style="margin-left: 10px">
          <el-col :span="8" style="margin-top: 10px; " v-if="selectProduct.itemextend[0].device">
            <span class="search__label">装置:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].device}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].prodline">
            <span class="search__label">产线:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].prodline}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].specalnote">
            <span class="search__label">特殊说明:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].specalnote}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].pressure">
            <span class="search__label">压力等级:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].pressure}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].butterflyplatedrive">
            <span class="search__label">蝶板驱动:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].butterflyplatedrive}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px" v-if="selectProduct.itemextend[0].connection">
            <span class="search__label">连接形式:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].connection}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px;margin-bottom: 10px" v-if="selectProduct.itemextend[0].valveplatematerial">
            <span class="search__label">阀板材质:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].valveplatematerial}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px;margin-bottom: 10px" v-if="selectProduct.itemextend[0].actuatortype">
            <span class="search__label">执行器类型:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].actuatortype}}</span>
          </el-col>
          <el-col :span="8" style="margin-top: 10px;margin-bottom: 20px" v-if="selectProduct.itemextend[0].actuatorbrand">
            <span class="search__label">执行器品牌:</span>
            <span class="tab-color">{{selectProduct.itemextend[0].actuatorbrand}}</span>
          </el-col>
        </el-row>
      </div>
      <el-button class="normal-margin" type="primary" style="width:200px" icon="el-icon-shopping-cart-full" @click="addCart"  :disabled="usertype === 0 || usertype === 1">加入购物车</el-button>
      <div style="display:flex">
        <p>相关链接:&emsp;</p>
        <div>
          <div v-for="item in selectProduct.technicalinfo" :key="item.index">
            <a class="file-link" :href="item.url">{{item.document}}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      detail: '',
      count: 1,
      selectProduct: '',
      actImage:{},
      tradefield:[],
      actTradefield:'',
      usertype:""
    };
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getDetail()
  },
  mounted() {
    this.usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
  },
  methods: {
    async getDetail () {
      let res = await this.$api.requested({
        "id": "20220926142403",
        "content": {
          "sa_itemgroupid": this.$route.query.id
        }
      })
      this.detail = res.data
      this.selectProduct = this.detail ? this.detail[0] : ''
      this.actImage = this.detail ? this.detail[0].attinfos[0] : {}
      this.tradefield  = this.detail ? this.detail[0].tradefield : []
      this.actTradefield = this.detail[0].tradefield[0].tradefield
    },
    countChange (num) {
      this.count = num
    },
    typeClick (data) {
      console.log(data,"切换")
      this.selectProduct = data
      this.actImage = data.attinfos[0]
      this.actTradefield = data.tradefield[0].tradefield
      this.count = 1
    },
    
    async addCart () {
      let res = await this.$api.requested({
        "id": 20220924095102,
        "content": {
          "sa_brandid": this.$route.query.brandid, //品牌id
          "itemid": this.selectProduct.itemid, //货品id
          "qty": this.count, //数量
          "itemno": this.selectProduct.itemno, //货品编号
          "tradefield":this.actTradefield
        },
      })
      this.tool.showMessage(res)
    }
  },
};
</script>

<style scoped>
.product-detail{
  height: calc(100vh - 210px);
  overflow: scroll;
  width: 900px;
}
.productName{
  font-size: 1.75rem !important;
  color: #333 !important;
}
.line{
  border-bottom: 1px dashed #e3e5ea;
}
.border-left {
  border-left:1px solid #e3e5ea
}
.product-price {
  font-size: 1.25rem !important;
  color: red;
}
.product-itemno{
  font-size: 12px;
  color:#888;
  margin-bottom: 20px;
}
.text-throughline{
  font-size: 14px;
  text-decoration: line-through;
  color:#999
}
.product-detail p{
  font-size: 14px;
  color:#888 ;
}
.productName{
  font-size: 1.75rem !important;
  color: #333 !important;
}
.line{
  border-bottom: 1px dashed #e3e5ea;
}
.border-left {
  border-left:1px solid #e3e5ea
}
.product-price {
  font-size: 1.25rem !important;
  color: red;
}
.product-itemno{
  font-size: 12px;
  color:#888;
  margin-bottom: 20px;
}
.text-throughline{
  font-size: 14px;
  text-decoration: line-through;
  color:#999
}
.thumImage{
  width:100px;
  height:100px;
  margin-right:30px;
  border:1px solid #f1f2f3;
  cursor: pointer;
  
}
.column{
  flex-direction: row;
}
.act{
  border:1px solid #607d8b;
}
.file-link{
  font-size: 12px;
  margin-bottom:16px;
  color:#3848f6
}
.file-link a{
  text-decoration: none;
  margin-left:10px;
  color:#999
}
.file-link:hover{
  color:#4F7BFD;
  text-decoration: underline;
}
.tab-color{
  color: #5a73d3;
  font-size: 15px;
  /*font-weight: bold;*/
}
</style>