parent
544bf5664a
commit
ed32bbdeff
7 changed files with 595 additions and 19 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