Merge branch 'master' of http://182.92.169.222:3000/yu/CostumingPlatform
commit
3a92312db1
24 changed files with 849 additions and 186 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -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