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

服装类型

Browse Source
zhc4dev
暖暖 2 years ago
parent 7902aaaee9
commit f3080eea6b
2 changed files with 361 additions and 207 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. 200
      ant-design-vue-jeecg/src/views/shopping/pages/clothDetail.vue
  2. 368
      ant-design-vue-jeecg/src/views/shopping/pages/clothType.vue

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

@ -4,29 +4,33 @@
<Header fontColor="#000"></Header> <Header fontColor="#000"></Header>
<div class="jz menu d-flex"> <div class="jz menu d-flex">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">服装类型</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/shopping/clothType' }">服装类型</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">男装</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{
<el-breadcrumb-item :to="{ path: '/shopping/views/clothType' }">裤子</el-breadcrumb-item> this.$route.query.parentName
}}</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{
this.$route.query.name
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{ <el-breadcrumb-item>{{
this.$route.query.title this.$route.query.title
}}</el-breadcrumb-item> }}</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
<div class="collect d-flex"> <div class="collect d-flex">
<span v-if="collectFlag" class="iconfont icon-weishoucang"></span> <span v-if="!collectFlag" class="iconfont icon-weishoucang" @click="collectChange"></span>
<span v-else class="iconfont icon-yishoucang"></span> <span v-if="collectFlag" class="iconfont icon-yishoucang" @click="collectChange"></span>
<span>点击收藏（{{popularity}}人气）</span> <span>点击收藏（{{popularity}}人气）</span>
</div> </div>
</div> </div>
<div class="detailDiv jz d-flex"> <div class="detailDiv jz d-flex">
<!-- 详情页衣服id{{ this.$route.query.id }} 详情页衣服title{{-->
<!-- this.$route.query.title-->
<!-- }} -->
<div class="l"> <div class="l">
<a-carousel arrows dots-class="slick-dots slick-thumb"> <a-carousel arrows dots-class="slick-dots slick-thumb" >
<a slot="customPaging" slot-scope="props"> <template slot="customPaging" slot-scope="props" >
<img src="../assets/details02.png" /> <a v-for="(item,index) in baseUrl" :key="index">
</a> <!-- <img v-for="(item,index) in baseUrl" :key="index" :src="item" />-->
<img :src="item" />
</a>
</template>
<div v-for="(item,index) in baseUrl" :key="index"> <div v-for="(item,index) in baseUrl" :key="index">
<img :src="item" /> <img :src="item" />
</div> </div>
@ -37,31 +41,69 @@
<p class="sales f_12">销量：{{sales}}件</p> <p class="sales f_12">销量：{{sales}}件</p>
<p class="price f_14 c_333">价格：<span class="f_20">¥{{price}}</span></p> <p class="price f_14 c_333">价格：<span class="f_20">¥{{price}}</span></p>
<p class="favour f_14 c_333">优惠：<span class="f_12">{{favour}}</span></p> <p class="favour f_14 c_333">优惠：<span class="f_12">{{favour}}</span></p>
<p class="sell f_14 c_333 d-flex">促销：<span class="f_14">{{sell}}</span><span class="button">详情>>></span></p> <p class="sell f_14 c_333 d-flex">
<span id="title">促销：</span>
<span class="f_14 textfield" id="sell">
{{sell}}
<span class="button" id="btn02" @click="xiangQing(false)">收起>>></span>
</span>
<span class="button" id="btn01" @click="xiangQing(true)">详情>>></span>
</p>
<div class="line"></div> <div class="line"></div>
<div class="color f_14">颜色:{{color}} </div> <div class="color f_14">颜色:{{color}} </div>
<a-radio-group v-model="radioValue" @change="onChange"> <a-radio-group v-model="radioValue" @change="onChange">
<a-radio :value="1"> <a-radio :value="'black'">
黑 黑
</a-radio> </a-radio>
<a-radio :value="2"> <a-radio :value="'gray'">
灰 灰
</a-radio> </a-radio>
<a-radio :value="3"> <a-radio :value="'orange'">
橙 橙
</a-radio> </a-radio>
</a-radio-group> </a-radio-group>
<div class="size f_14">尺码:<a>尺码参照表</a> | <i class="iconfont icon-ic_jia"></i> <span class="c_333 f_14">找到您的尺寸</span></div> <div class="size f_14">尺码:<a @click="dialogVisible1 = true">尺码参照表</a> | <i class="iconfont icon-ic_jia"></i> <span class="c_333 f_14">找到您的尺寸</span></div>
<div class="sizeDiv d-flex"> <el-dialog
<span class="item f_16" v-for="(item,index) in sizeList" :key="index">{{item.size}}</span> title="尺码参照表"
:visible.sync="dialogVisible1"
width="30%">
<span>这里放尺码参照表</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible1 = false">关 闭</el-button>
</span>
</el-dialog>
<div class="sizeDiv">
<!-- <div class="sizeDiv d-flex" id="sizeDiv">-->
<!-- <span class="item f_16" v-for="(item,index) in sizeList" :key="index" @click="chooseSize(item,index)">{{item.size}}</span>-->
<el-radio-group v-model="size" size="small" @change="sizeChange">
<el-radio-button v-for="(item,index) in sizeList" :key="index" :label="item.size" :disabled="!item.flag" ></el-radio-button>
</el-radio-group>
</div> </div>
<div class="line"></div> <div class="line"></div>
<div class="serve f_16 c_1B">免费配送与退货服务<span class="button">更多详情</span></div> <div class="serve f_16 c_1B">免费配送与退货服务<span class="button" @click="dialogVisible2 = true">更多详情</span></div>
<el-dialog
title="免费配送与退货服务"
:visible.sync="dialogVisible2"
width="30%">
<span>text</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible2 = false">关 闭</el-button>
</span>
</el-dialog>
<div class="line"></div> <div class="line"></div>
<div class="stages f_16 c_1B">使用花呗分期，最低每月¥1182.50。<span class="button c_1B">详细说明</span></div> <div class="stages f_16 c_1B">使用花呗分期，最低每月¥1182.50。<span class="button c_1B" @click="dialogVisible3 = true">详细说明</span></div>
<el-dialog
title="花呗分期详细说明"
:visible.sync="dialogVisible3"
width="30%">
<span>text</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible3 = false">关 闭</el-button>
</span>
</el-dialog>
<div class="d-flex btnDiv"> <div class="d-flex btnDiv">
<div class="dialogButton primary f_14">加入购物袋</div> <div class="dialogButton default f_14">加入购物袋</div>
<div type="primary" class="dialogButton default f_14">立即购买</div></div> <div type="primary" class="dialogButton primary f_14">立即购买</div></div>
</div> </div>
@ -112,45 +154,56 @@
components: { Header,Footer }, components: { Header,Footer },
data() { data() {
return { return {
radioValue: 1, dialogVisible1: false,//控制 尺码参照表 弹窗开关
dialogVisible2: false,//控制 更多详情 弹窗开关
dialogVisible3: false,//控制 详细说明 弹窗开关
collectFlag:false,//是否收藏 collectFlag:false,//是否收藏
popularity:0,//人气 popularity:172,//人气
title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题 title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题
sales:2342,//销量 sales:2342,//销量
price:13200.00,//价格 price:13200.00,//价格
favour:'满1100减300',//优惠 favour:'满1100减300',//优惠
sell:'每满300元，可减40元现金，每满600元，可减80元现金，最多可减40000元 | 距结束还剩',//促销 sell:'每满300元，可减40元现金，最多可减40000元 | 距结束还剩每满300元，可减40元现金，最多可减40000元 | 距结束还剩 ',//促销
color:'黑色',//颜色 color:'黑色',//颜色
radioValue: 'black',//选中的颜色
sizeList:[ sizeList:[
{ {
id:1, id:1,
size:"XXS" size:"XXS",
flag:false//没有该尺码库存
}, },
{ {
id:2, id:2,
size:"XS" size:"XS",
flag:true//有该尺码库存
}, },
{ {
id:3, id:3,
size:"S" size:"S",
flag:true
}, },
{ {
id:4, id:4,
size:"M" size:"M",
flag:true
}, },
{ {
id:5, id:5,
size:"L" size:"L",
flag:false
}, },
{ {
id:6, id:6,
size:"XL" size:"XL",
flag:true
}, },
{ {
id:7, id:7,
size:"XXL" size:"XXL",
flag:true
}, },
], ],//尺码列表
size:'',//选中的尺码
selectedClothList:[ selectedClothList:[
{ {
id:1, id:1,
@ -196,29 +249,90 @@
}; };
}, },
methods: { methods: {
collectChange(){
if(!this.collectFlag){
this.collectFlag = true
this.popularity+=1
}else{
this.collectFlag = false
this.popularity-=1
}
},
onChange(e) { onChange(e) {
console.log('radio checked', e.target.value); console.log('radio checked', e.target.value);
}, },
sizeChange(value){
this.size = value
},
xiangQing(flag){
let sell = document.getElementById('sell')
let btn01 = document.getElementById('btn01')
let btn02 = document.getElementById('btn02')
if(flag){
sell.classList.remove('textfield')
btn01.style.display = 'none'
sell.style.width = '600px'
btn02.style.display = 'inline-block'
}else{
sell.classList.add('textfield')
sell.style.width = '300px'
btn01.style.display = 'inline-block'
btn02.style.display = 'none'
}
}
}, },
mounted() {
// let sell = document.getElementById('sell')
// let title = document.getElementById('title')
// console.log('sell')
// console.log(sell)
// console.log(sell.getBoundingClientRect())
// console.log(title.getBoundingClientRect())
// console.log(sell.style.width)
}
}; };
</script> </script>
<style> <style>
.clothDetails .top .middle .router-link-exact-active.router-link-active { .clothDetails .top .middle .router-link-exact-active.router-link-active {
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
} }
</style> </style>
<style lang="less" scoped> <style lang="less" scoped>
/*&:hover .iconfont{*/
/* color: red;*/
/*}*/
@import '../assets/common.css'; @import '../assets/common.css';
.textfield {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#btn02{
display: none;
}
.clothDetails { .clothDetails {
.menu{ .menu{
justify-content: space-between; justify-content: space-between;
padding-top: 100px; padding-top: 100px;
.collect{ .collect{
&:hover .iconfont{ box-sizing: border-box;
color: red;
}
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
.icon-yishoucang{
color: red;
}
.iconfont{
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
padding: 1px;
box-sizing: border-box;
/*&:hover{*/
/* border: 1px dashed #C4C4C4;*/
/*}*/
}
span{ span{
margin-right: 5px; margin-right: 5px;
vertical-align: top; vertical-align: top;
@ -256,11 +370,13 @@
} }
} }
.sell{ .sell{
align-items: center; align-items: start;
.f_14{ .f_14{
display: inline-block; display: inline-block;
width: 50%; width: 300px;
overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.button{
/*display: none;*/
} }
} }
.line{ .line{
@ -293,10 +409,6 @@
.sizeDiv{ .sizeDiv{
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
.item{
margin-right: 30px;
color: #1B1B1B ;
}
} }
.serve{ .serve{
font-weight: 600; font-weight: 600;

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

@ -16,10 +16,11 @@
<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-submenu>
</el-menu> </el-menu>
<div class="right"> <div class="right">
@ -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){
@ -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