CostumingPlatform/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue

<template>
<!--  服装详情页-->
  <div class="clothDetails">
    <Header fontColor="#000"></Header>
    <div class="jz menu d-flex">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/shopping/clothType' }">服装类型</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{
          this.$route.query.parentName
          }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{
          this.$route.query.name
          }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          this.$route.query.title
          }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="collect d-flex">
        <span v-if="!collectFlag" class="iconfont icon-weishoucang" @click="collectChange"></span>
        <span v-if="collectFlag" class="iconfont icon-yishoucang" @click="collectChange"></span>
        <span>点击收藏（{{popularity}}人气）</span>
      </div>

    </div>
    <div class="detailDiv jz d-flex">
      <div class="l">
        <a-carousel arrows dots-class="slick-dots slick-thumb" >
          <template slot="customPaging" slot-scope="props" >
            <a  v-for="(item,index) in baseUrl" :key="index">
  <!--            <img v-for="(item,index) in baseUrl" :key="index" :src="item" />-->
              <img :src="item" />
            </a>
          </template>
          <div v-for="(item,index) in baseUrl" :key="index">
            <img :src="item" />
          </div>
        </a-carousel>
      </div>
      <div class="r">
        <div class="title f_20">{{title}}</div>
        <p class="sales f_12">销量：{{sales}}件</p>
        <p class="price f_14 c_333">价格：<span class="f_20">¥{{price}}</span></p>
        <p class="favour f_14 c_333">优惠：<span class="f_12">{{favour}}</span></p>
        <p class="sell f_14 c_333 d-flex">
          <span id="title">促销：</span>
          <span class="f_14 textfield" id="sell">
            {{sell}}
            <span class="button" id="btn02" @click="xiangQing(false)">收起>>></span>
          </span>
          <span class="button" id="btn01" @click="xiangQing(true)">详情>>></span>
        </p>
        <div class="line"></div>
        <div class="color f_14">颜色:{{color}} </div>
        <a-radio-group v-model="radioValue" @change="onChange">
          <a-radio :value="'白色'">
            白色
          </a-radio>
          <a-radio :value="'黑色'">
            黑色
          </a-radio>
          <a-radio :value="'灰色'">
            灰色
          </a-radio>
        </a-radio-group>
        <div class="size f_14">尺码:<a @click="dialogVisible1 = true">尺码参照表</a> | <i class="iconfont icon-ic_jia"></i> <span class="c_333 f_14">找到您的尺寸</span></div>
        <el-dialog
          title="尺码参照表"
          :visible.sync="dialogVisible1"
          width="30%">
          <span>这里放尺码参照表</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible1 = false">关 闭</el-button>
          </span>
        </el-dialog>
        <div class="sizeDiv">
<!--        <div class="sizeDiv d-flex" id="sizeDiv">-->
<!--          <span class="item f_16" v-for="(item,index) in sizeList" :key="index" @click="chooseSize(item,index)">{{item.size}}</span>-->
          <el-radio-group v-model="size" size="small" @change="sizeChange">
            <el-radio-button v-for="(item,index) in sizeList"  :key="index" :label="item.size" :disabled="!item.flag" ></el-radio-button>
          </el-radio-group>
        </div>
        <div class="line"></div>
        <div class="serve f_16 c_1B">免费配送与退货服务<span class="button" @click="dialogVisible2 = true">更多详情</span></div>
        <el-dialog
          title="免费配送与退货服务"
          :visible.sync="dialogVisible2"
          width="30%">
          <span>text</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible2 = false">关 闭</el-button>
          </span>
        </el-dialog>
        <div class="line"></div>
        <div class="stages f_16 c_1B">使用花呗分期，最低每月¥1182.50。<span class="button c_1B" @click="dialogVisible3 = true">详细说明</span></div>
        <el-dialog
          title="花呗分期详细说明"
          :visible.sync="dialogVisible3"
          width="30%">
          <span>text</span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible3 = false">关 闭</el-button>
          </span>
        </el-dialog>
        <div class="d-flex btnDiv">
          <div class="dialogButton default  f_14">加入购物袋</div>
          <div type="primary" class="dialogButton primary   f_14" @click="buyNow">立即购买</div></div>

      </div>

    </div>
    <div class="selected jz">
      <div class="title f_16 c_333">已选</div>
      <div class="selectedCloth d-flex">
        <div class="item" v-for="(item,index) in selectedClothList" :key="index">
          <img :src="item.url">
          <p class="c_333">{{item.text}}</p>
        </div>
      </div>
    </div>
    <div class="detail jz">
      <div class="title d-flex">
        <span class="c_fff">商品介绍</span>
        <span class="c_fff">加入购物车</span>
      </div>
      <table>
        <tr>
          <td class="textfield">商品名称：{{clothDetail.name}}</td>
          <td>商品编号：{{clothDetail.num}}</td>
          <td>规格：{{clothDetail.style}}</td>
          <td>产品概述：{{clothDetail.weight}}</td>
        </tr>
        <tr>
          <td>结构：{{clothDetail.itemNo}}</td>
          <td>特征：{{clothDetail.collar}}</td>
          <td>折叠搭配及包装：{{clothDetail.material}}</td>
          <td>适用场景：{{clothDetail.scene}}</td>
        </tr>
        <tr>
          <td>配件及标志：{{clothDetail.type}}</td>
          <td>缝纫形式：{{clothDetail.placket}}</td>
          <td>产地：{{clothDetail.slit}}</td>
          <td>适用人群：{{clothDetail.people}}</td>
        </tr>
      </table>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import Header from "../components/Header/HeaderView";
  import Footer from "../components/Footer/FooterView"
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: "clothDetail",
    components: { Header,Footer },
    data() {
      return {
        url: {
          lxlistxq: "/zygoods/zyGoods/lxlistxq",
        },
        dialogVisible1: false,//控制 尺码参照表 弹窗开关
        dialogVisible2: false,//控制 更多详情 弹窗开关
        dialogVisible3: false,//控制 详细说明 弹窗开关
        collectFlag:false,//是否收藏
        popularity:172,//人气
        title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题
        sales:2342,//销量
        price:13200.00,//价格
        favour:'满1100减300',//优惠
        sell:'每满300元，可减40元现金，最多可减40000元 | 距结束还剩每满300元，可减40元现金，最多可减40000元 | 距结束还剩 ',//促销
        color:'白色',//颜色
        radioValue: '白色',//选中的颜色
        sizeList:[
          {
            id:1,
            size:"XXS",
            flag:false//没有该尺码库存
          },
          {
            id:2,
            size:"XS",
            flag:true//有该尺码库存
          },
          {
            id:3,
            size:"S",
            flag:true
          },
          {
            id:4,
            size:"M",
            flag:true
          },
          {
            id:5,
            size:"L",
            flag:false
          },
          {
            id:6,
            size:"XL",
            flag:true
          },
          {
            id:7,
            size:"XXL",
            flag:true
          },
        ],//尺码列表
        size:'',//选中的尺码
        selectedClothList:[
          {
            id:1,
            text:'明门襟',
            url:require("../assets/selected04.png")
          },
          {
            id:2,
            text:'大八字领',
            url:require("../assets/selected02.png")
          },
          {
            id:3,
            text:'无口袋',
            url:require("../assets/selected05.png")
          },
          {
            id:4,
            text:'边褶不收省',
            url:require("../assets/selected03.png")
          },
          {
            id:5,
            text:'礼服圆角',
            url:require("../assets/selected01.png")
          },
        ],//已选的图片信息
        clothDetail:{
          name:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',
          num:10053909681884,
          style:'通勤风',
          weight:'1.0Kg',
          itemNo:'3680婚庆西服',
          collar:'青果领',
          material:'羊毛100%',
          scene:'婚礼，宴会',
          type:'标准型',
          placket:'单排扣',
          slit:'后中开衩',
          people:'青年'
        },//商品信息
        baseUrl:[require("../assets/details01.png"),require("../assets/details02.png"),require("../assets/details03.png"),require("../assets/details04.png"),]
      };
    },
    methods: {
      collectChange(){
        if(!this.collectFlag){
          this.collectFlag = true
          this.popularity+=1
        }else{
          this.collectFlag = false
          this.popularity-=1
        }
      },
      onChange(e) {
        console.log('radio checked', e.target.value);
        this.color = e.target.value;
      },
      sizeChange(value){
        this.size = value
      },
      xiangQing(flag){
        let sell = document.getElementById('sell')
        let btn01 = document.getElementById('btn01')
        let btn02 = document.getElementById('btn02')
        if(flag){
          sell.classList.remove('textfield')
          btn01.style.display = 'none'
          sell.style.width = '600px'
          btn02.style.display = 'inline-block'
        }else{
          sell.classList.add('textfield')
          sell.style.width = '300px'

          btn01.style.display = 'inline-block'
          btn02.style.display = 'none'

        }

      },
      buyNow(){
        this.$router.push({
          path: "/shopping/placeOrder",
          query: {
            // id: item.id,//传参
            goodsid:this.$route.query.id,
            size : this.size,
            title :this.$route.query.title,
            name :this.$route.query.name,
            parentName : this.$route.query.parentName,
          },
        });
      }
    },
    mounted() {
      getAction(this.url.lxlistxq,{id:this.$route.query.id}).then((res1) => {
        if (res1.success) {
          //console.log(res1.result)
          this.selectedClothList = res1.result.selectedClothList;
          this.baseUrl = res1.result.baseUrl;
          this.title = res1.result.zyGoods.goodsName;
          this.popularity = res1.result.zyGoods.click;
          this.sales = res1.result.zyGoods.num;
          this.price = res1.result.zyGoods.unitPrice;
          this.clothDetail.name = res1.result.zyGoods.goodsName;
          this.clothDetail.num = res1.result.zyGoods.goodsCode;
          this.clothDetail.style = res1.result.zyGoods.specification;
          this.clothDetail.weight = res1.result.zyGoods.productOverview;
          this.clothDetail.itemNo = res1.result.zyGoods.structure;
          this.clothDetail.collar = res1.result.zyGoods.characteristic;
          this.clothDetail.material = res1.result.zyGoods.foldingPackaging;
          //this.clothDetail.scene = res1.result.zyGoods.goodsName;
          this.clothDetail.type = res1.result.zyGoods.accLogos;
          this.clothDetail.placket = res1.result.zyGoods.sewingForm;
          this.clothDetail.slit = res1.result.zyGoods.placeOrigin;
          //this.clothDetail.people = res1.result.zyGoods.goodsName;
        }else{
          this.$message.error(res1.message);
        }
      });
      // let sell = document.getElementById('sell')
      // let title = document.getElementById('title')
      // console.log('sell')
      // console.log(sell)
      // console.log(sell.getBoundingClientRect())
      // console.log(title.getBoundingClientRect())
      // console.log(sell.style.width)
    }
  };
</script>
<style>
  .clothDetails .fzlx {
    border-bottom: 2px solid #000;
  }

</style>
<style lang="less" scoped>
  /*&:hover .iconfont{*/
  /*  color: red;*/
  /*}*/
  @import '../assets/common.css';
  .textfield {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
  #btn02{
    display: none;
  }
  .clothDetails {
    .menu{
      justify-content: space-between;
      padding-top: 100px;
      .collect{
        box-sizing: border-box;
        align-items: center;
        font-size: 14px;
        .icon-yishoucang{
          color: red;
        }
        .iconfont{
          width: 16px;
          height: 16px;
          line-height: 16px;
          text-align: center;
          padding: 1px;
          box-sizing: border-box;
          /*&:hover{*/
          /*  border: 1px dashed #C4C4C4;*/

          /*}*/
        }
        span{
          margin-right: 5px;
          vertical-align: top;
        }

      }

    }
    .detailDiv {
      justify-content: space-between;
      min-width: 1200px;
      .l{
        width: 610px;
        .cloth{
          width: 610px;
          height: 641px;
        }
      }
      .r{
        padding: 20px;
        .title{
          color: #1B1B1B;
          font-weight: 500;
          margin-bottom: 16px;
        }
        .sales{
          font-weight: 400;
          color: rgba(51,51,51,0.5);
        }
        .favour{
          color: #746957;
          span{
            border: 1px solid #746957;
            padding: 2px 5px;
          }
        }
        .sell{
          align-items: start;
          .f_14{
            display: inline-block;
            width: 300px;
          }
          .button{
            /*display: none;*/
          }
        }
        .line{
          height: 0px;
          border-bottom: 1px solid #ccc;
          margin: 20px 0 20px 0;
        }
        .color{
          font-weight: 600;
          color: #1B1B1B;
          margin-bottom: 15px;
        }
        & /deep/ .ant-radio-wrapper{
          margin-right: 25px;
        }
        .size{
          margin-top: 20px;
          a{
            margin-left: 20px;
            text-decoration: underline;
            color: #333333;
            margin-right: 20px;
          }
          i{
            margin-left: 20px;
            margin-right: 6px;
            color: #1B1B1B;
          }
        }
        .sizeDiv{
          margin-top: 20px;
          margin-bottom: 20px;
        }
        .serve{
          font-weight: 600;
          .button{
            margin-left: 10px;
            text-decoration: underline;
          }
        }
        .stages{
          color: #B79674;
          margin-bottom: 30px;
          .button{
            text-decoration: underline;
          }
        }
        .btnDiv{
          justify-content: space-around;
          .dialogButton {
            width: 35%;
            min-width: 300px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            transition: all 0.2s;
          }
          .default {
            border: 1px solid #1b1b1b;
            color: #1b1b1b;
            margin-right: 20px;

            &:hover {
              border-color: #fff;
              color: #fff;
              background-color: #1b1b1b;
            }
          }
          .primary {
            background: #1b1b1b;
            border: 2px solid #1b1b1b;
            color: #e5dfd9;
            &:hover {
              // border-color: #1b1b1b;
              // color: #1b1b1b;
              // background-color: #fff;
              opacity: 0.8;
            }
          }
        }

      }
    }
    .selected{
      .title{
      border-left: 5px solid #746957;
      height: 40px;
      line-height: 40px;
      padding-left: 25px;
        margin-bottom: 50px;
      }
      .selectedCloth{
        flex-wrap: wrap;
        .item{
          margin-right: 55px;
          width: 180px;
          height: 250px;
          img{
            width: 180px;
            height: 180px;
            margin-bottom: 20px;
          }
          p{
            text-align: center;
          }
        }
      }
    }
    .detail{
      margin-bottom: 20px;
      .title{
        justify-content: space-between;
        background-color: #F7F7F7;
        border: 1px solid #EEEEEE;
        margin-bottom: 25px;
        span{
          width: 146px;
          height: 38px;
          line-height: 38px;
          background-color: #746957;
          text-align: center;
          align-items: center;
        }
      }
      table{
        width: 100%;
        td{
          max-width: 500px;
          min-width: 300px;
          margin-right: 20px;
          padding-right: 50px;
          padding-bottom: 10px;
        }
      }
    }
  }
</style>
<style scoped>
  /* For demo */
  .ant-carousel >>> .slick-dots {
    height: auto;
  }
  .ant-carousel >>> .slick-slide img {
    border: 5px solid #fff;
    display: block;
    margin: auto;
    max-width: 80%;
  }
  .ant-carousel >>> .slick-thumb {
    bottom: -45px;
  }
  .ant-carousel >>> .slick-thumb li {
    width: 60px;
    height: 45px;
  }
  .ant-carousel >>> .slick-thumb li img {
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
  }
  .ant-carousel >>> .slick-thumb li.slick-active img {
    filter: grayscale(0%);
  }
</style>