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

<template>
<div class="container normal-panel">
  <div class="product-detail container">
    <el-row :gutter="20">
      <el-col :span="7">
        <img style="width:100%" :src="selectProduct.attinfos?selectProduct.attinfos[0].url:''">
      </el-col>
      <el-col :span="17">
        <div>
          <p class="productName normal-margin">{{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.gradeprice}}</span></p>
          <div class="line normal-margin"></div>
          <div>
            <p class="normal-margin">规格:{{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" label="描述文字"></el-input-number>
          </div>
          <p class="normal-margin">型号:&emsp;{{selectProduct.model}}</p>
          <div class="type">
            <span class="small">型号</span>
            <div class="content">
              <el-tag @click="typeClick(item)" v-for="(item,index) in detail" :key="index"
                :style="selectProduct.itemno == item.itemno ? 'background:#2b3e68;color:#ffffff' : ''">{{item.model}}
              </el-tag>
            </div>
          </div>
          <!-- <p class="normal-margin">材质:&emsp;{{selectProduct.model}}</p> -->
          <el-button class="normal-margin" type="primary" style="width:200px" @click="addCart">加入购物车</el-button>
          <div>
            <p>相关链接</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>

<script>
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: '',
  data () {
    return {
      detail: '',
      count: 1,
      selectProduct: ''
    };
  },
  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] : ''
      console.log(this.selectProduct);

    },
    countChange (num) {
      this.count = num
      console.log(this.count, '数量');
    },
    typeClick (data) {
      console.log(data);
      this.selectProduct = data
      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 //货品编号
        },
      })
      console.log(res);

      if (res.code == 1) {
        this.$message({
          message: '加入购物车成功',
          type: 'success'
        })
      }
    }
  },
};
</script>

<style scoped>
.product-detail{
  background: #fff;
  width: 80%;
  margin:30px 0;
  border-radius: 10px;
}
.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
}.product-detail{
  background: #fff;
  width: 80%;
  margin:30px 0;
  border-radius: 10px;
}
.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
}
</style>