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

<template>
<div class="container normal-panel">
  <div class="product-detail container flex-align-stretch">
    <div>
      <el-image style="width:400px;height:400px;margin-right:30px" :src="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>
      <div>
        <p class="normal-margin">规格:&emsp;{{selectProduct.spec}}</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>
      </div>
      <p class="normal-margin">当前型号:&emsp;{{selectProduct.model}}</p>
      <div class="type">
        <div class="content normal-margin">
          <p class="inline-16">更多型号:</p>
          <el-tag class="inline-16" @click="typeClick(item)" v-for="(item,index) in detail" :key="index" size="small" :effect="selectProduct.itemno == item.itemno ? 'dark' : 'plain'">{{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>-->
      
      <el-button class="normal-margin" type="primary" style="width:200px" icon="el-icon-shopping-cart-full" @click="addCart">加入购物车</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:''
    };
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      let res = await this.$api.requested({
        "id": "20220926142403",
        "version": 1,
        "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] : {}
      console.log(this.actImage)
      this.tradefield  = this.detail ? this.detail[0].tradefield : []
      this.actTradefield = this.detail[0].tradefield[0].tradefield
      console.log(this.actTradefield)
      console.log(this.actImage)
    },
    countChange (num) {
      this.count = num
    },
    typeClick (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);
  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;
}
</style>