yu
/
CostumingPlatform
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

服装类型点击菜单+综合排序

Browse Source
zhc4dev
暖暖 2 years ago
parent 9ddd168757
commit 76839ca6ea
3 changed files with 172 additions and 101 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ant-design-vue-jeecg/src/config/router.config.js
  2. 32
      ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue
  3. 243
      ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue

4
ant-design-vue-jeecg/src/config/router.config.js
Unescape View File

@ -632,4 +632,8 @@ export const constantRouterMap = [
path: '/shopping/views/sirendingzhi',//这里是你需要设置新窗口打开的页面的路径s
component: () => import('@/views/shopping/pages/sirendingzhi'),
},
{
path: '/shopping/views/ClothDetail',//这里是你需要设置新窗口打开的页面的路径s
component: () => import('@/views/shopping/pages/clothDetail'),
},
]

32
ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue
Unescape View File

@ -0,0 +1,32 @@
<template>
<div class="clothDetails">
<Header fontColor="#000"></Header>
<div class="detailDiv">
详情页衣服id{{ this.$route.query.id }} 详情页衣服title{{
this.$route.query.title
}}
</div>
</div>
</template>
<script>
import Header from "../components/Header/HeaderView";
export default {
name: "clothDetail",
components: { Header },
data() {
return {};
},
};
</script>
<style>
.clothDetails .top .middle .router-link-exact-active.router-link-active {
border-bottom: 2px solid #000;
}
</style>
<style lang="less" scoped>
.clothDetails {
.detailDiv {
padding-top: 100px;
}
}
</style>

243
ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue
Unescape View File

@ -5,58 +5,44 @@
<div class="main">
<div class="jz d-flex">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
@select="handleSelet"
style="width: 10%; min-width: 140px"
:unique-opened="true"
>
<el-submenu v-for="(item, i) in typeData" :key="i" index="i+1">
<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-group v-for="(j, i2) in item.childrens" :key="i2">
<el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">
<template slot="title">{{ j.name }}</template>
<el-menu-item
index="1-1"
v-for="(k, i3) in j.childrens"
:key="i3"
>{{ k.name }}</el-menu-item
>
</el-menu-item-group>
<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-item index="2">
<i class="el-icon-female"></i>
<span slot="title">女装</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-lollipop"></i>
<span slot="title">童装</span>
</el-menu-item> -->
</el-menu>
<div class="right">
<div class="name d-flex">
<span>Polo衫</span>
<span>{{this.current.name}}</span>
<div class="d-flex">
<el-dropdown>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
综合<i class="el-icon-arrow-down el-icon--right"></i>
排序<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>按销量排序</el-dropdown-item>
<el-dropdown-item>按评分排序</el-dropdown-item>
<el-dropdown-item>按价格排序</el-dropdown-item>
<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 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">
@ -68,9 +54,6 @@
>
<div class="imgDiv">
<img :src="item.imgUrl" alt="" />
<!-- <div class="button c_000 f_16" @click="clothChoice(item)">
点击选择
</div> -->
</div>
<div class="clothTitle">
<p class="price d-flex">
@ -90,6 +73,32 @@
</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:"clothType",
components: {Header},
@ -100,15 +109,15 @@
{
id: 1,
imgUrl: require("../assets/cloth.png"),
currentPrice: 599,
currentPrice: 199,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3100,
},
{
id: 2,
imgUrl: require("../assets/cloth.png"),
currentPrice: 599,
currentPrice: 299,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
@ -116,18 +125,18 @@
{
id: 3,
imgUrl: require("../assets/cloth.png"),
currentPrice: 599,
currentPrice: 399,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3300,
},
{
id: 4,
imgUrl: require("../assets/cloth.png"),
currentPrice: 599,
currentPrice: 499,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3400,
},
{
id: 5,
@ -135,15 +144,15 @@
currentPrice: 599,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3500,
},
{
id: 6,
imgUrl: require("../assets/cloth.png"),
currentPrice: 599,
currentPrice: 699,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3600,
},
{
id: 7,
@ -151,7 +160,7 @@
currentPrice: 599,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3700,
},
{
id: 8,
@ -159,7 +168,7 @@
currentPrice: 599,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3800,
},
{
id: 9,
@ -167,7 +176,7 @@
currentPrice: 599,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat: 3900,
},
{
id: 10,
@ -175,89 +184,89 @@
currentPrice: 599,
historicalPrice: 799,
title: "HOODIE 运动长袖连帽卫衣套头衫",
heat: 3200,
heat:4000,
},
],
// 菜单数据
typeData: [
{
id: 1,
id: '1',
name: "男装",
childrens: [
{
id: 1 - 1,
id: '11',
name: "上衣",
childrens: [
{
id: 1 - 1 - 1,
id: '111',
name: "衬衫",
},
{
id: 1 - 1 - 2,
id: '112',
name: "卫衣",
},
{
id: 1 - 1 - 3,
id: '113',
name: "Polo衫",
},
{
id: 1 - 1 - 4,
id: '114',
name: "针织衫",
},
],
},
{
id: 1 - 2,
id: '12',
name: "外套",
childrens: [
{
id: 1 - 2 - 1,
id: '121',
name: "夹克",
},
{
id: 1 - 2 - 2,
id: '122',
name: "羽绒服",
},
{
id: 1 - 2 - 3,
id: '123',
name: "风衣",
},
],
},
{
id: 1 - 3,
id: '13',
name: "裤子",
childrens: [
{
id: 1 - 3 - 1,
id: '131',
name: "休闲裤",
},
{
id: 1 - 3 - 2,
id: '132',
name: "西裤",
},
{
id: 1 - 3 - 3,
id: '133',
name: "工装裤",
},
{
id: 1 - 3 - 4,
id: '134',
name: "运动裤",
},
{
id: 1 - 3 - 5,
id: '135',
name: "卫裤",
},
{
id: 1 - 3 - 6,
id: '136',
name: "九分裤",
},
{
id: 1 - 3 - 7,
id: '137',
name: "短裤",
},
{
id: 1 - 3 - 8,
id: '138',
name: "哈伦裤",
},
],
@ -265,83 +274,83 @@
],
},
{
id: 2,
id: '2',
name: "女装",
childrens: [
{
id: 2 - 1,
id: '21',
name: "上衣",
childrens: [
{
id: 2 - 1 - 1,
id: '211',
name: "衬衫",
},
{
id: 2 - 1 - 2,
id: '212',
name: "卫衣",
},
{
id: 2 - 1 - 3,
id: '213',
name: "Polo衫",
},
{
id: 2 - 1 - 4,
id: '214',
name: "针织衫",
},
],
},
{
id: 2 - 2,
id: '22',
name: "外套",
childrens: [
{
id: 2 - 2 - 1,
id: '221',
name: "夹克",
},
{
id: 2 - 2 - 2,
id: '222',
name: "羽绒服",
},
{
id: 2 - 2 - 3,
id: '223',
name: "风衣",
},
],
},
{
id: 2 - 3,
id: '23',
name: "裤子",
childrens: [
{
id: 2 - 3 - 1,
id: '231',
name: "休闲裤",
},
{
id: 2 - 3 - 2,
id: '232',
name: "西裤",
},
{
id: 2 - 3 - 3,
id: '233',
name: "工装裤",
},
{
id: 2 - 3 - 4,
id: '234',
name: "运动裤",
},
{
id: 2 - 3 - 5,
id: '235',
name: "卫裤",
},
{
id: 2 - 3 - 6,
id: '236',
name: "九分裤",
},
{
id: 2 - 3 - 7,
id: '237',
name: "短裤",
},
{
id: 2 - 3 - 8,
id: '238',
name: "哈伦裤",
},
],
@ -349,25 +358,51 @@
],
},
],
// 目前选择的菜单
current:{
id:'',
name:''
}
};
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
clothChoice(item) {
this.dialogModel.imgUrl = item.imgUrl;
this.dialogModel.name = item.title;
this.dialogModel.price = item.currentPrice;
this.dialogVisible = true;
},
dialogSure() {
this.dialogVisible = false;
this.current = 1;
},
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/views/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>

Write Preview
Loading…
Cancel
Save