|
|
|
|
<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>
|
