From 4fc4d38aae6aca1a51c2f5885271f658d3ee4ea1 Mon Sep 17 00:00:00 2001
From: shenyuan <shenyuan2825@163.com>
Date: Thu, 16 Mar 2023 08:59:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=90=E8=A1=A3=E6=8E=A8=E8=8D=90=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shopping/components/Header/HeaderView.vue |   2 +-
 .../src/views/shopping/pages/clothDetail1.vue | 581 ++++++++++++++++++
 2 files changed, 582 insertions(+), 1 deletion(-)
 create mode 100644 ant-design-vue-jeecg/src/views/shopping/pages/clothDetail1.vue

diff --git a/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue b/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
index 7bfc979c..39c661f1 100644
--- a/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
+++ b/ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
@@ -12,7 +12,7 @@
       <router-link to="/shopping/sirendingzhi" :style="{ color: fontColor }" class="srdz"
         >私人定制</router-link
       >
-      <router-link to="/shopping/chengyi" :style="{ color: fontColor }"
+      <router-link to="/shopping/chengyi" :style="{ color: fontColor }" class="cytj"
         >成衣推荐</router-link
       >
       <router-link to="/shopping/news" :style="{ color: fontColor }"
diff --git a/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail1.vue b/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail1.vue
new file mode 100644
index 00000000..3d266d19
--- /dev/null
+++ b/ant-design-vue-jeecg/src/views/shopping/pages/clothDetail1.vue
@@ -0,0 +1,581 @@
+<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,//传参
+          },
+        });
+      }
+    },
+    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 .cytj {
+    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>