ruyi_cloud/src/views/product/info/detail/index.vue

<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>

      <el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-carousel trigger="click" height="400px">
          <el-carousel-item v-for="item in carouselImages" :key="item">
            <el-image :src="item" style="height: 100%; width: 100%"/>
          </el-carousel-item>
        </el-carousel>
        <div style="margin-top: 20px;">
          <el-row :gutter="20">
            <el-col :span="6">
              <div>
                <el-statistic
                  :value="123"
                  :title="title"
                ></el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="商品评价">
                  <template slot="formatter">
                    456
                  </template>
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic
                  group-separator=","
                  :precision="0"
                  decimal-separator="."
                  :value="123"
                  title="收藏人气"
                >
                </el-statistic>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-statistic title="品牌信息">
                  <template slot="formatter">
                    {{projectDetail.brandInfo.nam}}
                  </template>
                </el-statistic>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="12">
          <h1>商品名称</h1>
          <h3>商品规格（{{checkSkuInfo.sku}}）</h3>
          <h2 style="color: red">￥{{checkSkuInfo.price}}</h2>
        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
          <el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
<!--            <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">
            </el-radio-group>-->
            <el-radio v-model="form['rule'+index]" @change="selectRuleSku"
                      v-for="value in ruleAttr.valueList"
                      :label="value" :key="value" :value="value" border>{{value}}</el-radio>
          </el-form-item>
          <el-form-item label="数量">
            <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">加入购物车</el-button>
            <el-button>立即购买</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px;">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商品详情</span>
        </div>
        <el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
          <el-descriptions-item v-for="attribute in attributeGroup.attributeList"
                                :label="attribute.name">{{attributeMap[attribute.id]}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="其他属性" :column="1">
          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        </el-descriptions>

        <editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >

        </editor>
      </el-card>
    </el-row>
  </div>
</template>

<script>
import {getDetailInfo} from "@/api/product/info";

export default {
  name: "productDetail",
  data() {
    return {
      like: true,
      value1: 415,
      value2: 1314,
      title: "销量人气",
      form: {
        num: 1
      },
      projectDetail: {
        projectInfo: {
          name: ""
        },
        brandInfo: {
          nam: ""
        }
      },
      checkSkuInfo: {
        price: 0.00
      },
      carouselImages: [],
      attributeMap: {}
    }
  },
  created() {
    this.initProjectDetailInfo();
  },
  methods: {
    initSku(){
      let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
      let skuArr = sku.split("-");
      skuArr.forEach((rule, index) => {
        this.form['rule'+index] = rule;
      })
      this.selectRuleSku();
    },
    selectRuleSku(){
      let ruleSize = this.projectDetail.ruleAttrModelList.length;
      let sku = "";
      for (let index = 0; ; index++) {
        sku += this.form['rule'+index];
        if (index + 1 === ruleSize){
          break
        }
        sku += "-";
      }
      this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
    },
    initProjectDetailInfo(){
      getDetailInfo(3).then(response => {
        this.projectDetail = response.data;
        this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
          let key = productAttributeInfo.attributeId;
          this.attributeMap[key] = productAttributeInfo["value"]
        })
        console.log(this.attributeMap)
        let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
        for (let index = 0; index < ruleAttrLength; index++) {
          this.form["rule"+index] = null;
        }
        this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",")
        this.initSku();
      })
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.ql-toolbar{
  display: none;
}
</style>