commit
95246a5541
7 changed files with 624 additions and 119 deletions
@ -0,0 +1,518 @@ |
||||
<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-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: '11', |
||||
name: "上衣", |
||||
childrens: [ |
||||
{ |
||||
id: '111', |
||||
name: "衬衫", |
||||
}, |
||||
{ |
||||
id: '112', |
||||
name: "卫衣", |
||||
}, |
||||
{ |
||||
id: '113', |
||||
name: "Polo衫", |
||||
}, |
||||
{ |
||||
id: '114', |
||||
name: "针织衫", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
id: '12', |
||||
name: "外套", |
||||
childrens: [ |
||||
{ |
||||
id: '121', |
||||
name: "夹克", |
||||
}, |
||||
{ |
||||
id: '122', |
||||
name: "羽绒服", |
||||
}, |
||||
{ |
||||
id: '123', |
||||
name: "风衣", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
id: '13', |
||||
name: "裤子", |
||||
childrens: [ |
||||
{ |
||||
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: '21', |
||||
name: "上衣", |
||||
childrens: [ |
||||
{ |
||||
id: '211', |
||||
name: "衬衫", |
||||
}, |
||||
{ |
||||
id: '212', |
||||
name: "卫衣", |
||||
}, |
||||
{ |
||||
id: '213', |
||||
name: "Polo衫", |
||||
}, |
||||
{ |
||||
id: '214', |
||||
name: "针织衫", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
id: '22', |
||||
name: "外套", |
||||
childrens: [ |
||||
{ |
||||
id: '221', |
||||
name: "夹克", |
||||
}, |
||||
{ |
||||
id: '222', |
||||
name: "羽绒服", |
||||
}, |
||||
{ |
||||
id: '223', |
||||
name: "风衣", |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
id: '23', |
||||
name: "裤子", |
||||
childrens: [ |
||||
{ |
||||
id: '231', |
||||
name: "休闲裤", |
||||
}, |
||||
{ |
||||
id: '232', |
||||
name: "西裤", |
||||
}, |
||||
{ |
||||
id: '233', |
||||
name: "工装裤", |
||||
}, |
||||
{ |
||||
id: '234', |
||||
name: "运动裤", |
||||
}, |
||||
{ |
||||
id: '235', |
||||
name: "卫裤", |
||||
}, |
||||
{ |
||||
id: '236', |
||||
name: "九分裤", |
||||
}, |
||||
{ |
||||
id: '237', |
||||
name: "短裤", |
||||
}, |
||||
{ |
||||
id: '238', |
||||
name: "哈伦裤", |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
// 目前选择的菜单 |
||||
current:{ |
||||
id:'', |
||||
name:'' |
||||
} |
||||
}; |
||||
}, |
||||
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 |
||||
}, |
||||
handleSelet(index,indexPath){ |
||||
this.findIndex(indexPath) |
||||
}, |
||||
clothDetails(item) { |
||||
this.$router.push({ |
||||
path: "/shopping/ClothDetail", |
||||
query: { id: item.id, title: item.title }, |
||||
}); |
||||
}, |
||||
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")) |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
</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> |
||||
@ -0,0 +1,34 @@ |
||||
<template> |
||||
<div class="news"> |
||||
<Header fontColor="#000"></Header> |
||||
<div style="padding-top: 88px"> |
||||
新闻页面 |
||||
</div> |
||||
<Footer></Footer> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Header from "../components/Header/HeaderView"; |
||||
import Footer from "../components/Footer/FooterView" |
||||
export default { |
||||
name: "news", |
||||
components: { Header,Footer }, |
||||
data() { |
||||
return { |
||||
}; |
||||
}, |
||||
methods: { |
||||
|
||||
}, |
||||
}; |
||||
</script> |
||||
<!--<style>--> |
||||
<!-- .news .top .middle .router-link-exact-active.router-link-active {--> |
||||
<!-- border-bottom: 2px solid #000;--> |
||||
<!-- }--> |
||||
<!--</style>--> |
||||
<style lang="less" scoped> |
||||
@import '../assets/common.css'; |
||||
|
||||
</style> |
||||
|
||||
Loading…
Reference in new issue