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/views/clothType' }">服装类型</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">男装</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">裤子</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"></span>
        <span v-else class="iconfont icon-yishoucang"></span>
        <span>点击收藏（{{popularity}}人气）</span>
      </div>

    </div>
    <div class="detailDiv jz d-flex">
      <!--      详情页衣服id{{ this.$route.query.id }} 详情页衣服title{{-->
      <!--      this.$route.query.title-->
      <!--      }} -->
      <div class="l">
        <a-carousel arrows dots-class="slick-dots slick-thumb">
          <a slot="customPaging" slot-scope="props">
            <img src="../assets/details02.png" />
          </a>
          <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 class="f_14">{{sell}}</span><span class="button">详情>>></span></p>
        <div class="line"></div>
        <div class="color f_14">颜色:{{color}} </div>
        <a-radio-group v-model="radioValue" @change="onChange">
          <a-radio :value="1">
            黑
          </a-radio>
          <a-radio :value="2">
            灰
          </a-radio>
          <a-radio :value="3">
            橙
          </a-radio>
        </a-radio-group>
        <div class="size f_14">尺码:<a>尺码参照表</a> | <i class="iconfont icon-ic_jia"></i> <span class="c_333 f_14">找到您的尺寸</span></div>
        <div class="sizeDiv d-flex">
          <span class="item f_16" v-for="(item,index) in sizeList" :key="index">{{item.size}}</span>
        </div>
        <div class="line"></div>
        <div class="serve f_16 c_1B">免费配送与退货服务<span class="button">更多详情</span></div>
        <div class="line"></div>
        <div class="stages f_16 c_1B">使用花呗分期，最低每月¥1182.50。<span class="button c_1B">详细说明</span></div>
        <div class="d-flex btnDiv">
          <div class="dialogButton primary f_14">加入购物袋</div>
          <div type="primary" class="dialogButton default  f_14">立即购买</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"
  export default {
    name: "clothDetail",
    components: { Header,Footer },
    data() {
      return {
        radioValue: 1,
        collectFlag:false,//是否收藏
        popularity:0,//人气
        title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题
        sales:2342,//销量
        price:13200.00,//价格
        favour:'满1100减300',//优惠
        sell:'每满300元，可减40元现金，每满600元，可减80元现金，最多可减40000元 | 距结束还剩',//促销
        color:'黑色',//颜色
        sizeList:[
          {
            id:1,
            size:"XXS"
          },
          {
            id:2,
            size:"XS"
          },
          {
            id:3,
            size:"S"
          },
          {
            id:4,
            size:"M"
          },
          {
            id:5,
            size:"L"
          },
          {
            id:6,
            size:"XL"
          },
          {
            id:7,
            size:"XXL"
          },
        ],
        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: {
      onChange(e) {
        console.log('radio checked', e.target.value);
      },
    },
  };
</script>
<style>
  .clothDetails .top .middle .router-link-exact-active.router-link-active {
    border-bottom: 2px solid #000;
  }
</style>
<style lang="less" scoped>
  @import '../assets/common.css';
  .clothDetails {
    .menu{
      justify-content: space-between;
      padding-top: 100px;
      .collect{
        &:hover .iconfont{
          color: red;
        }
        align-items: center;
        font-size: 14px;
        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: center;
          .f_14{
            display: inline-block;
            width: 50%;
            overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
          }
        }
        .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;
          .item{
            margin-right: 30px;
            color: #1B1B1B ;
          }
        }
        .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>