zhc077
2 years ago
commit
7902aaaee9
30 changed files with 916 additions and 189 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> |
||||
|
||||
@ -0,0 +1,19 @@ |
||||
package org.jeecg.modules.person.vo; |
||||
|
||||
import lombok.Data; |
||||
import org.jeecg.common.aspect.annotation.Dict; |
||||
|
||||
@Data |
||||
public class User1 { |
||||
private String id; |
||||
private String userName; |
||||
private String realName; |
||||
private String avatar; |
||||
@Dict(dicCode = "sex") |
||||
private String sex; |
||||
private String email; |
||||
private String phone; |
||||
@Dict(dicCode = "user_status") |
||||
private Integer status; |
||||
|
||||
} |
||||
Loading…
Reference in new issue