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

成衣

Browse Source
zhc4dev
暖暖 2 years ago
parent 5da8781327
commit b85dc8c03e
1 changed files with 262 additions and 220 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 482
      ant-design-vue-jeecg/src/views/shopping/pages/chengyi.vue

482
ant-design-vue-jeecg/src/views/shopping/pages/chengyi.vue
Unescape View File

@ -1,75 +1,76 @@
<template> <template>
<!-- 服装类型--> <!-- 成衣推荐-->
<div class="chengyi"> <div class="chengyi">
<Header fontColor="#000"></Header> <Header fontColor="#000"></Header>
<div class="main"> <div class="main">
<div class="jz d-flex"> <div class="jz d-flex">
<el-menu <el-menu
class="el-menu-vertical-demo" class="el-menu-vertical-demo"
@select="handleSelet" @select="handleSelet"
style="width: 10%; min-width: 140px" style="width: 10%; min-width: 140px"
:unique-opened="true" :unique-opened="true"
> >
<el-submenu v-for="(item, i) in typeData" :key="i" :index="item.id"> <el-submenu v-for="(item, i) in typeData" :key="i" :index="item.id">
<template slot="title"> <template slot="title">
<i class="el-icon-male"></i> <i class="el-icon-male"></i>
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</template> </template>
<el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id"> <el-menu-item v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">{{ j.name }}</el-menu-item>
<template slot="title">{{ j.name }}</template> <!-- <el-submenu v-for="(j, i2) in item.childrens" :key="i2" :index="j.id">-->
<el-menu-item v-for="(k, i3) in j.childrens" :key="i3" :index="k.id">{{ k.name }}</el-menu-item> <!-- <template slot="title">{{ j.name }}</template>-->
</el-submenu> <!-- <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> </el-submenu>
<div class="right"> </el-menu>
<div class="name d-flex"> <div class="right">
<span>{{this.current.name}}</span> <div class="name d-flex">
<div class="d-flex"> <span>{{this.current.name}}</span>
<el-dropdown @command="handleCommand"> <div class="d-flex">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link"> <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> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="heat">热度</el-dropdown-item> <el-dropdown-item command="heat">热度</el-dropdown-item>
<!-- <el-dropdown-item command="esteem">评分</el-dropdown-item>--> <!-- <el-dropdown-item command="esteem">评分</el-dropdown-item>-->
<el-dropdown-item command="high">价格降序</el-dropdown-item> <el-dropdown-item command="high">价格降序</el-dropdown-item>
<el-dropdown-item command="low">价格升序</el-dropdown-item> <el-dropdown-item command="low">价格升序</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<!-- <div class="iconDiv d-flex">--> <!-- <div class="iconDiv d-flex">-->
<!-- <span>价格</span>--> <!-- <span>价格</span>-->
<!-- <div class="icon d-flex">--> <!-- <div class="icon d-flex">-->
<!-- <i class="el-icon-arrow-up"></i>--> <!-- <i class="el-icon-arrow-up"></i>-->
<!-- <i class="el-icon-arrow-down"></i>--> <!-- <i class="el-icon-arrow-down"></i>-->
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
</div>
</div> </div>
<div class="clothDiv d-flex"> </div>
<div <div class="clothDiv d-flex">
class="item" <div
v-for="(item, index) in clothsList" class="item"
:key="index" v-for="(item, index) in clothsList"
@click="clothDetails(item)" :key="index"
> @click="clothDetails(item)"
<div class="imgDiv"> >
<img :src="item.imgUrl" alt="" /> <div class="imgDiv">
</div> <img :src="item.imgUrl" alt="" />
<div class="clothTitle"> </div>
<p class="price d-flex"> <div class="clothTitle">
<span class="f_16 c_333">￥{{ item.currentPrice }}</span> <p class="price d-flex">
<span class="f_12 c_999">￥{{ item.historicalPrice }}</span> <span class="f_16 c_333">￥{{ item.currentPrice }}</span>
</p> <span class="f_12 c_999">￥{{ item.historicalPrice }}</span>
<p class="f_12 c_333">{{ item.title }}</p> </p>
<p class="f_12 c_9a9b9b">热度{{ item.heat }}</p> <p class="f_12 c_333">{{ item.title }}</p>
</div> <p class="f_12 c_9a9b9b">热度{{ item.heat }}</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
@ -195,82 +196,64 @@
name: "男装", name: "男装",
childrens: [ childrens: [
{ {
id: '11', id: '111',
name: "上衣", name: "衬衫",
childrens: [ },
{ {
id: '111', id: '112',
name: "衬衫", name: "卫衣",
}, },
{ {
id: '112', id: '113',
name: "卫衣", name: "Polo衫",
}, },
{ {
id: '113', id: '114',
name: "Polo衫", name: "针织衫",
}, },
{ {
id: '114', id: '121',
name: "针织衫", name: "夹克",
}, },
], {
}, id: '122',
{ name: "羽绒服",
id: '12', },
name: "外套", {
childrens: [ id: '123',
{ name: "风衣",
id: '121', },
name: "夹克", {
}, id: '131',
{ name: "休闲裤",
id: '122', },
name: "羽绒服", {
}, id: '132',
{ name: "西裤",
id: '123', },
name: "风衣", {
}, id: '133',
], name: "工装裤",
}, },
{ {
id: '13', id: '134',
name: "裤子", name: "运动裤",
childrens: [ },
{ {
id: '131', id: '135',
name: "休闲裤", name: "卫裤",
}, },
{ {
id: '132', id: '136',
name: "西裤", name: "九分裤",
}, },
{ {
id: '133', id: '137',
name: "工装裤", name: "短裤",
}, },
{ {
id: '134', id: '138',
name: "运动裤", name: "哈伦裤",
},
{
id: '135',
name: "卫裤",
},
{
id: '136',
name: "九分裤",
},
{
id: '137',
name: "短裤",
},
{
id: '138',
name: "哈伦裤",
},
],
}, },
], ],
}, },
@ -279,82 +262,130 @@
name: "女装", name: "女装",
childrens: [ childrens: [
{ {
id: '21', id: '211',
name: "上衣", name: "衬衫",
childrens: [ },
{ {
id: '211', id: '212',
name: "衬衫", name: "卫衣",
}, },
{ {
id: '212', id: '213',
name: "卫衣", name: "Polo衫",
}, },
{ {
id: '213', id: '214',
name: "Polo衫", name: "针织衫",
}, },
{ {
id: '214', id: '221',
name: "针织衫", name: "夹克",
}, },
], {
}, id: '222',
{ name: "羽绒服",
id: '22', },
name: "外套", {
childrens: [ id: '223',
{ name: "风衣",
id: '221', },
name: "夹克", {
}, id: '231',
{ name: "休闲裤",
id: '222', },
name: "羽绒服", {
}, id: '232',
{ name: "西裤",
id: '223', },
name: "风衣", {
}, id: '233',
], name: "工装裤",
}, },
{ {
id: '23', id: '234',
name: "裤子", name: "运动裤",
childrens: [ },
{ {
id: '231', id: '235',
name: "休闲裤", name: "卫裤",
}, },
{ {
id: '232', id: '236',
name: "西裤", name: "九分裤",
}, },
{ {
id: '233', id: '237',
name: "工装裤", name: "短裤",
}, },
{ {
id: '234', id: '238',
name: "运动裤", name: "哈伦裤",
}, },
{ ],
id: '235', },
name: "卫裤", {
}, id: '3',
{ name: "童装",
id: '236', childrens: [
name: "九分裤", {
}, id: '311',
{ name: "衬衫",
id: '237', },
name: "短裤", {
}, id: '312',
{ name: "卫衣",
id: '238', },
name: "哈伦裤", {
}, id: '313',
], name: "Polo衫",
},
{
id: '314',
name: "针织衫",
},
{
id: '321',
name: "夹克",
},
{
id: '322',
name: "羽绒服",
},
{
id: '323',
name: "风衣",
},
{
id: '331',
name: "休闲裤",
},
{
id: '332',
name: "西裤",
},
{
id: '333',
name: "工装裤",
},
{
id: '334',
name: "运动裤",
},
{
id: '335',
name: "卫裤",
},
{
id: '336',
name: "九分裤",
},
{
id: '337',
name: "短裤",
},
{
id: '338',
name: "哈伦裤",
}, },
], ],
}, },
@ -362,7 +393,8 @@
// 目前选择的菜单 // 目前选择的菜单
current:{ current:{
id:'', id:'',
name:'' name:'',
parrentName:''
} }
}; };
}, },
@ -374,19 +406,24 @@
const indexb = this.typeData[indexa].childrens.findIndex((value, keys, arr) => { const indexb = this.typeData[indexa].childrens.findIndex((value, keys, arr) => {
return value.id == indexPath[1] return value.id == indexPath[1]
}) })
const indexc = this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => { // const indexc = this.typeData[indexa].childrens[indexb].childrens.findIndex((value, keys, arr) => {
return value.id == indexPath[2] // return value.id == indexPath[2]
}) // })
this.current.name = this.typeData[indexa].childrens[indexb].childrens[indexc].name // this.current.name = this.typeData[indexa].childrens[indexb].childrens[indexc].name
this.current.id = this.typeData[indexa].childrens[indexb].childrens[indexc].id // this.current.id = this.typeData[indexa].childrens[indexb].childrens[indexc].id
this.current.name = this.typeData[indexa].childrens[indexb].name
this.current.id = this.typeData[indexa].childrens[indexb].id
this.current.parrentName = this.typeData[indexa].name
}, },
handleSelet(index,indexPath){ handleSelet(index,indexPath){
this.findIndex(indexPath) this.findIndex(indexPath)
//这里更改右边显示衣服的数据,通过this.current.id查
// this.clothsList
}, },
clothDetails(item) { clothDetails(item) {
this.$router.push({ this.$router.push({
path: "/shopping/ClothDetail", path: "/shopping/ClothDetail",
query: { id: item.id, title: item.title }, query: { id: item.id, title: item.title ,name:this.current.name,parentName:this.current.parrentName},
}); });
}, },
handleCommand(command){ handleCommand(command){
@ -396,8 +433,8 @@
else if(command == 'high'){//价格降序 else if(command == 'high'){//价格降序
this.clothsList.sort(compareDown("currentPrice")) this.clothsList.sort(compareDown("currentPrice"))
} }
// else if(command == 'esteem'){//按评分排序 // else if(command == 'esteem'){//按评分排序
// this.clothsList.sort(compare("heat")) // this.clothsList.sort(compare("heat"))
// } // }
else if(command == 'low'){//价格升序 else if(command == 'low'){//价格升序
@ -405,6 +442,11 @@
} }
} }
}, },
mounted() {
this.current.name = this.typeData[0].childrens[0].name
this.current.id = this.typeData[0].childrens[0].id
this.current.parrentName = this.typeData[0].name
}
} }
</script> </script>
<style scoped> <style scoped>

Write Preview
Loading…
Cancel
Save