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

<template>
  <!--  成衣推荐-->
  <div class="chengyi">

    <Header fontColor="#000"></Header>
    <div class="main">
      <div class="jz d-flex">
        <el-menu
          class="el-menu-vertical-demo"
          @select="handleSelet"
          style="width: 10%; min-width: 140px"
          :unique-opened="true"
        >
          <el-submenu v-for="(item, i) in typeData" :key="i" :index="item.id">
            <template slot="title">
              <i class="el-icon-male"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">{{ j.name }}</el-menu-item>
            <!--              <el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">-->
            <!--                <template slot="title">{{ j.name }}</template>-->
            <!--                <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">
          <div class="name d-flex">
            <span>{{this.current.name}}</span>
            <div class="d-flex">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  排序<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="heat">热度</el-dropdown-item>
                  <!--                    <el-dropdown-item command="esteem">评分</el-dropdown-item>-->
                  <el-dropdown-item command="high">价格降序</el-dropdown-item>
                  <el-dropdown-item command="low">价格升序</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!--                <div class="iconDiv d-flex">-->
              <!--                  <span>价格</span>-->
              <!--                  <div class="icon d-flex">-->
              <!--                    <i class="el-icon-arrow-up"></i>-->
              <!--                    <i class="el-icon-arrow-down"></i>-->
              <!--                  </div>-->
              <!--                </div>-->
            </div>
          </div>
          <div class="clothDiv d-flex">
            <div
              class="item"
              v-for="(item, index) in clothsList"
              :key="index"
              @click="clothDetails(item)"
            >
              <div class="imgDiv">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="clothTitle">
                <p class="price d-flex">
                  <span class="f_16 c_333">￥{{ item.currentPrice }}</span>
                  <span class="f_12 c_999">￥{{ item.historicalPrice }}</span>
                </p>
                <p class="f_12 c_333">{{ item.title }}</p>
                <p class="f_12 c_9a9b9b">热度{{ item.heat }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
  import Header from '../components/Header/HeaderView'
  let compareDown = function (prop) {
    return function (obj1, obj2) {
      var val1 = obj1[prop];
      var val2 = obj2[prop];
      if (val1 < val2) {
        return 1;
      } else if (val1 > val2) {
        return -1;
      } else {
        return 0;
      }
    }
  }
  let compareUp = function (prop) {
    return function (obj1, obj2) {
      var val1 = obj1[prop];
      var val2 = obj2[prop];
      if (val1 < val2) {
        return -1;
      } else if (val1 > val2) {
        return 1;
      } else {
        return 0;
      }
    }
  }
  export default {
    name:"chengyi",
    components: {Header},
    data() {
      return {
        // 右侧展示衣服数据
        clothsList: [
          {
            id: 1,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 199,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3100,
          },
          {
            id: 2,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 299,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3200,
          },
          {
            id: 3,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 399,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3300,
          },
          {
            id: 4,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 499,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3400,
          },
          {
            id: 5,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3500,
          },
          {
            id: 6,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 699,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3600,
          },
          {
            id: 7,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3700,
          },
          {
            id: 8,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3800,
          },
          {
            id: 9,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat: 3900,
          },
          {
            id: 10,
            imgUrl: require("../assets/cloth.png"),
            currentPrice: 599,
            historicalPrice: 799,
            title: "HOODIE 运动长袖连帽卫衣套头衫",
            heat:4000,
          },
        ],
        // 菜单数据
        typeData: [
          {
            id: '1',
            name: "男装",
            childrens: [
              {
                id: '111',
                name: "衬衫",
              },
              {
                id: '112',
                name: "卫衣",
              },
              {
                id: '113',
                name: "Polo衫",
              },
              {
                id: '114',
                name: "针织衫",
              },
              {
                id: '121',
                name: "夹克",
              },
              {
                id: '122',
                name: "羽绒服",
              },
              {
                id: '123',
                name: "风衣",
              },
              {
                id: '131',
                name: "休闲裤",
              },
              {
                id: '132',
                name: "西裤",
              },
              {
                id: '133',
                name: "工装裤",
              },
              {
                id: '134',
                name: "运动裤",
              },
              {
                id: '135',
                name: "卫裤",
              },
              {
                id: '136',
                name: "九分裤",
              },
              {
                id: '137',
                name: "短裤",
              },
              {
                id: '138',
                name: "哈伦裤",
              },
            ],
          },
          {
            id: '2',
            name: "女装",
            childrens: [
              {
                id: '211',
                name: "衬衫",
              },
              {
                id: '212',
                name: "卫衣",
              },
              {
                id: '213',
                name: "Polo衫",
              },
              {
                id: '214',
                name: "针织衫",
              },
              {
                id: '221',
                name: "夹克",
              },
              {
                id: '222',
                name: "羽绒服",
              },
              {
                id: '223',
                name: "风衣",
              },
              {
                id: '231',
                name: "休闲裤",
              },
              {
                id: '232',
                name: "西裤",
              },
              {
                id: '233',
                name: "工装裤",
              },
              {
                id: '234',
                name: "运动裤",
              },
              {
                id: '235',
                name: "卫裤",
              },
              {
                id: '236',
                name: "九分裤",
              },
              {
                id: '237',
                name: "短裤",
              },
              {
                id: '238',
                name: "哈伦裤",
              },
            ],
          },
          {
            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:'',
          parrentName:''
        }
      };
    },
    methods: {
      findIndex(indexPath){
        const indexa =  this.typeData.findIndex((value, keys, arr) => {
          return value.id == indexPath[0]
        })
        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) => {
        //   return value.id == indexPath[2]
        // })
        // this.current.name =  this.typeData[indexa].childrens[indexb].childrens[indexc].name
        // 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 ,name:this.current.name,parentName:this.current.parrentName},
        });
      },
      handleCommand(command){
        if(command == 'heat'){//按热度排序
          this.clothsList.sort(compareDown("heat"))
        }
        else if(command == 'high'){//价格降序
          this.clothsList.sort(compareDown("currentPrice"))
        }
          // else if(command == 'esteem'){//按评分排序
          //   this.clothsList.sort(compare("heat"))
        // }

        else if(command == 'low'){//价格升序
          this.clothsList.sort(compareUp("currentPrice"))
        }
      }
    },
    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>
  @import '../assets/common.css';
</style>
<style>
  .chengyi .top .middle .router-link-exact-active.router-link-active {
    border-bottom: 2px solid #000;
  }
</style>
<style lang="less" scoped>
  .chengyi {
    .main {
      padding-top: 100px;

      .right {
        width: 90%;
        padding-left: 20px;
        min-width: 1290px;
        box-sizing: border-box;

        .name {
          height: 22px;
          font-size: 22px;
          line-height: 22px;
          justify-content: space-between;
          align-items: center;
          color: #000;
          margin-bottom: 20px;
          .d-flex {
            align-items: center;
            .el-dropdown {
              margin-right: 20px;
              .el-dropdown-link {
                color: #000;
                cursor: pointer;
              }
            }
            .iconDiv {
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              span {
                margin-right: 5px;
              }
              .icon {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                i {
                  font-size: 7px;
                }
              }
            }
          }
        }
        .clothDiv {
          flex-wrap: wrap;
          align-items: center;
          .item {
            width: 308px;
            height: 562px;
            margin-bottom: 30px;
            margin-right: 10px;
            .imgDiv {
              position: relative;
              img {
                width: 308px;
                height: 462px;
              }
              &:hover .button {
                opacity: 1;
                color: #fff;
              }
              .button {
                position: absolute;
                opacity: 0;
                transition: all 0.3s linear;
                width: 152px;
                height: 51px;
                line-height: 51px;
                background: #000000;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
              }
            }
            .clothTitle {
              width: 100%;
              height: 100px;
              .price {
                align-items: center;
                padding-left: 6px;
                .f_16 {
                  margin-right: 10px;
                }
                .f_12 {
                  text-decoration: line-through;
                }
              }
              & > .f_12 {
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
</style>