服装类型

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

@@ -4,29 +4,33 @@
     <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/clothType' }">服装类型</el-breadcrumb-item>
-        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">男装</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{
-        <el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">裤子</el-breadcrumb-item>
+          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"></span>
+        <span v-if="!collectFlag" class="iconfont icon-weishoucang" @click="collectChange"></span>
-        <span v-else class="iconfont icon-yishoucang"></span>
+        <span v-if="collectFlag" class="iconfont icon-yishoucang" @click="collectChange"></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">
+          <template slot="customPaging" slot-scope="props" >
-            <img src="../assets/details02.png" />
+            <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>
@@ -37,31 +41,69 @@
         <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>
+        <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="1">
+          <a-radio :value="'black'">
             黑
           </a-radio>
-          <a-radio :value="2">
+          <a-radio :value="'gray'">
             灰
           </a-radio>
-          <a-radio :value="3">
+          <a-radio :value="'orange'">
             橙
           </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="size f_14">尺码:<a @click="dialogVisible1 = true">尺码参照表</a> | <i class="iconfont icon-ic_jia"></i> <span class="c_333 f_14">找到您的尺寸</span></div>
-        <div class="sizeDiv d-flex">
+        <el-dialog
-          <span class="item f_16" v-for="(item,index) in sizeList" :key="index">{{item.size}}</span>
+          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">更多详情</span></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">详细说明</span></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 primary f_14">加入购物袋</div>
+          <div class="dialogButton default  f_14">加入购物袋</div>
-          <div type="primary" class="dialogButton default  f_14">立即购买</div></div>
+          <div type="primary" class="dialogButton primary   f_14">立即购买</div></div>
 
       </div>
 
@@ -112,45 +154,56 @@
     components: { Header,Footer },
     data() {
       return {
-        radioValue: 1,
+        dialogVisible1: false,//控制 尺码参照表 弹窗开关
+        dialogVisible2: false,//控制 更多详情 弹窗开关
+        dialogVisible3: false,//控制 详细说明 弹窗开关
         collectFlag:false,//是否收藏
-        popularity:0,//人气
+        popularity:172,//人气
         title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题
         sales:2342,//销量
         price:13200.00,//价格
         favour:'满1100减300',//优惠
-        sell:'每满300元，可减40元现金，每满600元，可减80元现金，最多可减40000元 | 距结束还剩',//促销
+        sell:'每满300元，可减40元现金，最多可减40000元 | 距结束还剩每满300元，可减40元现金，最多可减40000元 | 距结束还剩 ',//促销
         color:'黑色',//颜色
+        radioValue: 'black',//选中的颜色
         sizeList:[
           {
             id:1,
-            size:"XXS"
+            size:"XXS",
+            flag:false//没有该尺码库存
           },
           {
             id:2,
-            size:"XS"
+            size:"XS",
+            flag:true//有该尺码库存
           },
           {
             id:3,
-            size:"S"
+            size:"S",
+            flag:true
           },
           {
             id:4,
-            size:"M"
+            size:"M",
+            flag:true
           },
           {
             id:5,
-            size:"L"
+            size:"L",
+            flag:false
           },
           {
             id:6,
-            size:"XL"
+            size:"XL",
+            flag:true
           },
           {
             id:7,
-            size:"XXL"
+            size:"XXL",
+            flag:true
           },
-        ],
+        ],//尺码列表
+        size:'',//选中的尺码
         selectedClothList:[
           {
             id:1,
@@ -196,29 +249,90 @@
       };
     },
     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);
       },
+      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'
+
+        }
+
+      }
     },
+    mounted() {
+      // 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 .top .middle .router-link-exact-active.router-link-active {
     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{
-        &:hover .iconfont{
+        box-sizing: border-box;
-          color: red;
-        }
         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;
@@ -256,11 +370,13 @@
           }
         }
         .sell{
-          align-items: center;
+          align-items: start;
           .f_14{
             display: inline-block;
-            width: 50%;
+            width: 300px;
-            overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
+          }
+          .button{
+            /*display: none;*/
           }
         }
         .line{
@@ -293,10 +409,6 @@
         .sizeDiv{
           margin-top: 20px;
           margin-bottom: 20px;
-          .item{
-            margin-right: 30px;
-            color: #1B1B1B ;
-          }
         }
         .serve{
           font-weight: 600;

ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue

@@ -16,10 +16,11 @@
                 <i class="el-icon-male"></i>
                 <span>{{ item.name }}</span>
               </template>
-              <el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">
+              <el-menu-item v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">{{ j.name }}</el-menu-item>
-                <template slot="title">{{ j.name }}</template>
+<!--              <el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">-->
-                <el-menu-item v-for="(k, i3) in j.childrens" :key="i3" :index="k.id">{{ k.name }}</el-menu-item>
+<!--                <template slot="title">{{ j.name }}</template>-->
-              </el-submenu>
+<!--                <el-menu-item v-for="(k, i3) in j.childrens" :key="i3" :index="k.id">{{ k.name }}</el-menu-item>-->
+<!--              </el-submenu>-->
             </el-submenu>
           </el-menu>
           <div class="right">
@@ -193,10 +194,6 @@
           {
             id: '1',
             name: "男装",
-            childrens: [
-              {
-                id: '11',
-                name: "上衣",
             childrens: [
               {
                 id: '111',
@@ -214,12 +211,6 @@
                 id: '114',
                 name: "针织衫",
               },
-                ],
-              },
-              {
-                id: '12',
-                name: "外套",
-                childrens: [
               {
                 id: '121',
                 name: "夹克",
@@ -232,12 +223,6 @@
                 id: '123',
                 name: "风衣",
               },
-                ],
-              },
-              {
-                id: '13',
-                name: "裤子",
-                childrens: [
               {
                 id: '131',
                 name: "休闲裤",
@@ -272,15 +257,9 @@
               },
             ],
           },
-            ],
-          },
           {
             id: '2',
             name: "女装",
-            childrens: [
-              {
-                id: '21',
-                name: "上衣",
             childrens: [
               {
                 id: '211',
@@ -298,12 +277,6 @@
                 id: '214',
                 name: "针织衫",
               },
-                ],
-              },
-              {
-                id: '22',
-                name: "外套",
-                childrens: [
               {
                 id: '221',
                 name: "夹克",
@@ -316,12 +289,6 @@
                 id: '223',
                 name: "风衣",
               },
-                ],
-              },
-              {
-                id: '23',
-                name: "裤子",
-                childrens: [
               {
                 id: '231',
                 name: "休闲裤",
@@ -356,13 +323,78 @@
               },
             ],
           },
+          {
+            id: '3',
+            name: "童装",
+            childrens: [
+              {
+                id: '311',
+                name: "衬衫",
+              },
+              {
+                id: '312',
+                name: "卫衣",
+              },
+              {
+                id: '313',
+                name: "Polo衫",
+              },
+              {
+                id: '314',
+                name: "针织衫",
+              },
+              {
+                id: '321',
+                name: "夹克",
+              },
+              {
+                id: '322',
+                name: "羽绒服",
+              },
+              {
+                id: '323',
+                name: "风衣",
+              },
+              {
+                id: '331',
+                name: "休闲裤",
+              },
+              {
+                id: '332',
+                name: "西裤",
+              },
+              {
+                id: '333',
+                name: "工装裤",
+              },
+              {
+                id: '334',
+                name: "运动裤",
+              },
+              {
+                id: '335',
+                name: "卫裤",
+              },
+              {
+                id: '336',
+                name: "九分裤",
+              },
+              {
+                id: '337',
+                name: "短裤",
+              },
+              {
+                id: '338',
+                name: "哈伦裤",
+              },
             ],
           },
         ],
         // 目前选择的菜单
         current:{
           id:'',
-          name:''
+          name:'',
+          parrentName:''
         }
       };
     },
@@ -374,19 +406,24 @@
         const indexb =  this.typeData[indexa].childrens.findIndex((value, keys, arr) => {
           return value.id == indexPath[1]
         })
-        const indexc =  this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => {
+        // const indexc =  this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => {
-          return value.id == indexPath[2]
+        //   return value.id == indexPath[2]
-        })
+        // })
-        this.current.name =  this.typeData[indexa].childrens[indexb].childrens[indexc].name
+        // this.current.name =  this.typeData[indexa].childrens[indexb].childrens[indexc].name
-        this.current.id =  this.typeData[indexa].childrens[indexb].childrens[indexc].id
+        // this.current.id =  this.typeData[indexa].childrens[indexb].childrens[indexc].id
+        this.current.name =  this.typeData[indexa].childrens[indexb].name
+        this.current.id =  this.typeData[indexa].childrens[indexb].id
+        this.current.parrentName =  this.typeData[indexa].name
       },
       handleSelet(index,indexPath){
         this.findIndex(indexPath)
+        //这里更改右边显示衣服的数据,通过this.current.id查
+        // this.clothsList
       },
       clothDetails(item) {
         this.$router.push({
           path: "/shopping/ClothDetail",
-          query: { id: item.id, title: item.title },
+          query: { id: item.id, title: item.title ,name:this.current.name,parentName:this.current.parrentName},
         });
       },
       handleCommand(command){
@@ -405,6 +442,11 @@
         }
       }
     },
+    mounted() {
+      this.current.name =  this.typeData[0].childrens[0].name
+      this.current.id =  this.typeData[0].childrens[0].id
+      this.current.parrentName =  this.typeData[0].name
+    }
   }
 </script>
 <style scoped>