Merge branch 'master' of http://182.92.169.222:3000/yu/CostumingPlatform
commit
b9abc51a58
6 changed files with 613 additions and 4 deletions
@ -0,0 +1,581 @@ |
||||
<template> |
||||
<!-- 服装详情页--> |
||||
<div class="clothDetails"> |
||||
<Header fontColor="#000"></Header> |
||||
<div class="jz menu d-flex"> |
||||
<el-breadcrumb separator="/"> |
||||
<el-breadcrumb-item :to="{ path: '/shopping/clothType' }">服装类型</el-breadcrumb-item> |
||||
<el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{ |
||||
this.$route.query.parentName |
||||
}}</el-breadcrumb-item> |
||||
<el-breadcrumb-item :to="{ path: '/shopping/clothType' }">{{ |
||||
this.$route.query.name |
||||
}}</el-breadcrumb-item> |
||||
<el-breadcrumb-item>{{ |
||||
this.$route.query.title |
||||
}}</el-breadcrumb-item> |
||||
</el-breadcrumb> |
||||
<div class="collect d-flex"> |
||||
<span v-if="!collectFlag" class="iconfont icon-weishoucang" @click="collectChange"></span> |
||||
<span v-if="collectFlag" class="iconfont icon-yishoucang" @click="collectChange"></span> |
||||
<span>点击收藏（{{popularity}}人气）</span> |
||||
</div> |
||||
|
||||
</div> |
||||
<div class="detailDiv jz d-flex"> |
||||
<div class="l"> |
||||
<a-carousel arrows dots-class="slick-dots slick-thumb" > |
||||
<template slot="customPaging" slot-scope="props" > |
||||
<a v-for="(item,index) in baseUrl" :key="index"> |
||||
<!-- <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"> |
||||
<img :src="item" /> |
||||
</div> |
||||
</a-carousel> |
||||
</div> |
||||
<div class="r"> |
||||
<div class="title f_20">{{title}}</div> |
||||
<p class="sales f_12">销量：{{sales}}件</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="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="color f_14">颜色:{{color}} </div> |
||||
<a-radio-group v-model="radioValue" @change="onChange"> |
||||
<a-radio :value="'白色'"> |
||||
白色 |
||||
</a-radio> |
||||
<a-radio :value="'黑色'"> |
||||
黑色 |
||||
</a-radio> |
||||
<a-radio :value="'灰色'"> |
||||
灰色 |
||||
</a-radio> |
||||
</a-radio-group> |
||||
<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> |
||||
<el-dialog |
||||
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 class="line"></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="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="dialogButton default f_14">加入购物袋</div> |
||||
<div type="primary" class="dialogButton primary f_14" @click="buyNow">立即购买</div></div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
<div class="selected jz"> |
||||
<div class="title f_16 c_333">已选</div> |
||||
<div class="selectedCloth d-flex"> |
||||
<div class="item" v-for="(item,index) in selectedClothList" :key="index"> |
||||
<img :src="item.url"> |
||||
<p class="c_333">{{item.text}}</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="detail jz"> |
||||
<div class="title d-flex"> |
||||
<span class="c_fff">商品介绍</span> |
||||
<span class="c_fff">加入购物车</span> |
||||
</div> |
||||
<table> |
||||
<tr> |
||||
<td class="textfield">商品名称：{{clothDetail.name}}</td> |
||||
<td>商品编号：{{clothDetail.num}}</td> |
||||
<td>规格：{{clothDetail.style}}</td> |
||||
<td>产品概述：{{clothDetail.weight}}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>结构：{{clothDetail.itemNo}}</td> |
||||
<td>特征：{{clothDetail.collar}}</td> |
||||
<td>折叠搭配及包装：{{clothDetail.material}}</td> |
||||
<td>适用场景：{{clothDetail.scene}}</td> |
||||
</tr> |
||||
<tr> |
||||
<td>配件及标志：{{clothDetail.type}}</td> |
||||
<td>缝纫形式：{{clothDetail.placket}}</td> |
||||
<td>产地：{{clothDetail.slit}}</td> |
||||
<td>适用人群：{{clothDetail.people}}</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
<Footer></Footer> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Header from "../components/Header/HeaderView"; |
||||
import Footer from "../components/Footer/FooterView" |
||||
import { httpAction, getAction } from '@/api/manage' |
||||
export default { |
||||
name: "clothDetail", |
||||
components: { Header,Footer }, |
||||
data() { |
||||
return { |
||||
url: { |
||||
lxlistxq: "/zygoods/zyGoods/lxlistxq", |
||||
}, |
||||
dialogVisible1: false,//控制 尺码参照表 弹窗开关 |
||||
dialogVisible2: false,//控制 更多详情 弹窗开关 |
||||
dialogVisible3: false,//控制 详细说明 弹窗开关 |
||||
collectFlag:false,//是否收藏 |
||||
popularity:172,//人气 |
||||
title:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制',//标题 |
||||
sales:2342,//销量 |
||||
price:13200.00,//价格 |
||||
favour:'满1100减300',//优惠 |
||||
sell:'每满300元，可减40元现金，最多可减40000元 | 距结束还剩每满300元，可减40元现金，最多可减40000元 | 距结束还剩 ',//促销 |
||||
color:'白色',//颜色 |
||||
radioValue: '白色',//选中的颜色 |
||||
sizeList:[ |
||||
{ |
||||
id:1, |
||||
size:"XXS", |
||||
flag:false//没有该尺码库存 |
||||
}, |
||||
{ |
||||
id:2, |
||||
size:"XS", |
||||
flag:true//有该尺码库存 |
||||
}, |
||||
{ |
||||
id:3, |
||||
size:"S", |
||||
flag:true |
||||
}, |
||||
{ |
||||
id:4, |
||||
size:"M", |
||||
flag:true |
||||
}, |
||||
{ |
||||
id:5, |
||||
size:"L", |
||||
flag:false |
||||
}, |
||||
{ |
||||
id:6, |
||||
size:"XL", |
||||
flag:true |
||||
}, |
||||
{ |
||||
id:7, |
||||
size:"XXL", |
||||
flag:true |
||||
}, |
||||
],//尺码列表 |
||||
size:'',//选中的尺码 |
||||
selectedClothList:[ |
||||
{ |
||||
id:1, |
||||
text:'明门襟', |
||||
url:require("../assets/selected04.png") |
||||
}, |
||||
{ |
||||
id:2, |
||||
text:'大八字领', |
||||
url:require("../assets/selected02.png") |
||||
}, |
||||
{ |
||||
id:3, |
||||
text:'无口袋', |
||||
url:require("../assets/selected05.png") |
||||
}, |
||||
{ |
||||
id:4, |
||||
text:'边褶不收省', |
||||
url:require("../assets/selected03.png") |
||||
}, |
||||
{ |
||||
id:5, |
||||
text:'礼服圆角', |
||||
url:require("../assets/selected01.png") |
||||
}, |
||||
],//已选的图片信息 |
||||
clothDetail:{ |
||||
name:'【西服定制】定制西装男套装结婚西装婚礼伴郎订婚正装新郎西服套装夏季 款式仅供参考 一人一版量身定制', |
||||
num:10053909681884, |
||||
style:'通勤风', |
||||
weight:'1.0Kg', |
||||
itemNo:'3680婚庆西服', |
||||
collar:'青果领', |
||||
material:'羊毛100%', |
||||
scene:'婚礼，宴会', |
||||
type:'标准型', |
||||
placket:'单排扣', |
||||
slit:'后中开衩', |
||||
people:'青年' |
||||
},//商品信息 |
||||
baseUrl:[require("../assets/details01.png"),require("../assets/details02.png"),require("../assets/details03.png"),require("../assets/details04.png"),] |
||||
}; |
||||
}, |
||||
methods: { |
||||
collectChange(){ |
||||
if(!this.collectFlag){ |
||||
this.collectFlag = true |
||||
this.popularity+=1 |
||||
}else{ |
||||
this.collectFlag = false |
||||
this.popularity-=1 |
||||
} |
||||
}, |
||||
onChange(e) { |
||||
console.log('radio checked', e.target.value); |
||||
this.color = 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' |
||||
|
||||
} |
||||
|
||||
}, |
||||
buyNow(){ |
||||
this.$router.push({ |
||||
path: "/shopping/placeOrder", |
||||
query: { |
||||
// id: item.id,//传参 |
||||
}, |
||||
}); |
||||
} |
||||
}, |
||||
mounted() { |
||||
getAction(this.url.lxlistxq,{id:this.$route.query.id}).then((res1) => { |
||||
if (res1.success) { |
||||
//console.log(res1.result) |
||||
this.selectedClothList = res1.result.selectedClothList; |
||||
this.baseUrl = res1.result.baseUrl; |
||||
this.title = res1.result.zyGoods.goodsName; |
||||
this.popularity = res1.result.zyGoods.click; |
||||
this.sales = res1.result.zyGoods.num; |
||||
this.price = res1.result.zyGoods.unitPrice; |
||||
this.clothDetail.name = res1.result.zyGoods.goodsName; |
||||
this.clothDetail.num = res1.result.zyGoods.goodsCode; |
||||
this.clothDetail.style = res1.result.zyGoods.specification; |
||||
this.clothDetail.weight = res1.result.zyGoods.productOverview; |
||||
this.clothDetail.itemNo = res1.result.zyGoods.structure; |
||||
this.clothDetail.collar = res1.result.zyGoods.characteristic; |
||||
this.clothDetail.material = res1.result.zyGoods.foldingPackaging; |
||||
//this.clothDetail.scene = res1.result.zyGoods.goodsName; |
||||
this.clothDetail.type = res1.result.zyGoods.accLogos; |
||||
this.clothDetail.placket = res1.result.zyGoods.sewingForm; |
||||
this.clothDetail.slit = res1.result.zyGoods.placeOrigin; |
||||
//this.clothDetail.people = res1.result.zyGoods.goodsName; |
||||
}else{ |
||||
this.$message.error(res1.message); |
||||
} |
||||
}); |
||||
// 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> |
||||
<style> |
||||
.clothDetails .cytj { |
||||
border-bottom: 2px solid #000; |
||||
} |
||||
|
||||
</style> |
||||
<style lang="less" scoped> |
||||
/*&:hover .iconfont{*/ |
||||
/* color: red;*/ |
||||
/*}*/ |
||||
@import '../assets/common.css'; |
||||
.textfield {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} |
||||
#btn02{ |
||||
display: none; |
||||
} |
||||
.clothDetails { |
||||
.menu{ |
||||
justify-content: space-between; |
||||
padding-top: 100px; |
||||
.collect{ |
||||
box-sizing: border-box; |
||||
align-items: center; |
||||
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{ |
||||
margin-right: 5px; |
||||
vertical-align: top; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
.detailDiv { |
||||
justify-content: space-between; |
||||
min-width: 1200px; |
||||
.l{ |
||||
width: 610px; |
||||
.cloth{ |
||||
width: 610px; |
||||
height: 641px; |
||||
} |
||||
} |
||||
.r{ |
||||
padding: 20px; |
||||
.title{ |
||||
color: #1B1B1B; |
||||
font-weight: 500; |
||||
margin-bottom: 16px; |
||||
} |
||||
.sales{ |
||||
font-weight: 400; |
||||
color: rgba(51,51,51,0.5); |
||||
} |
||||
.favour{ |
||||
color: #746957; |
||||
span{ |
||||
border: 1px solid #746957; |
||||
padding: 2px 5px; |
||||
} |
||||
} |
||||
.sell{ |
||||
align-items: start; |
||||
.f_14{ |
||||
display: inline-block; |
||||
width: 300px; |
||||
} |
||||
.button{ |
||||
/*display: none;*/ |
||||
} |
||||
} |
||||
.line{ |
||||
height: 0px; |
||||
border-bottom: 1px solid #ccc; |
||||
margin: 20px 0 20px 0; |
||||
} |
||||
.color{ |
||||
font-weight: 600; |
||||
color: #1B1B1B; |
||||
margin-bottom: 15px; |
||||
} |
||||
& /deep/ .ant-radio-wrapper{ |
||||
margin-right: 25px; |
||||
} |
||||
.size{ |
||||
margin-top: 20px; |
||||
a{ |
||||
margin-left: 20px; |
||||
text-decoration: underline; |
||||
color: #333333; |
||||
margin-right: 20px; |
||||
} |
||||
i{ |
||||
margin-left: 20px; |
||||
margin-right: 6px; |
||||
color: #1B1B1B; |
||||
} |
||||
} |
||||
.sizeDiv{ |
||||
margin-top: 20px; |
||||
margin-bottom: 20px; |
||||
} |
||||
.serve{ |
||||
font-weight: 600; |
||||
.button{ |
||||
margin-left: 10px; |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
.stages{ |
||||
color: #B79674; |
||||
margin-bottom: 30px; |
||||
.button{ |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
.btnDiv{ |
||||
justify-content: space-around; |
||||
.dialogButton { |
||||
width: 35%; |
||||
min-width: 300px; |
||||
height: 44px; |
||||
text-align: center; |
||||
line-height: 44px; |
||||
transition: all 0.2s; |
||||
} |
||||
.default { |
||||
border: 1px solid #1b1b1b; |
||||
color: #1b1b1b; |
||||
margin-right: 20px; |
||||
|
||||
&:hover { |
||||
border-color: #fff; |
||||
color: #fff; |
||||
background-color: #1b1b1b; |
||||
} |
||||
} |
||||
.primary { |
||||
background: #1b1b1b; |
||||
border: 2px solid #1b1b1b; |
||||
color: #e5dfd9; |
||||
&:hover { |
||||
// border-color: #1b1b1b; |
||||
// color: #1b1b1b; |
||||
// background-color: #fff; |
||||
opacity: 0.8; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.selected{ |
||||
.title{ |
||||
border-left: 5px solid #746957; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
padding-left: 25px; |
||||
margin-bottom: 50px; |
||||
} |
||||
.selectedCloth{ |
||||
flex-wrap: wrap; |
||||
.item{ |
||||
margin-right: 55px; |
||||
width: 180px; |
||||
height: 250px; |
||||
img{ |
||||
width: 180px; |
||||
height: 180px; |
||||
margin-bottom: 20px; |
||||
} |
||||
p{ |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.detail{ |
||||
margin-bottom: 20px; |
||||
.title{ |
||||
justify-content: space-between; |
||||
background-color: #F7F7F7; |
||||
border: 1px solid #EEEEEE; |
||||
margin-bottom: 25px; |
||||
span{ |
||||
width: 146px; |
||||
height: 38px; |
||||
line-height: 38px; |
||||
background-color: #746957; |
||||
text-align: center; |
||||
align-items: center; |
||||
} |
||||
} |
||||
table{ |
||||
width: 100%; |
||||
td{ |
||||
max-width: 500px; |
||||
min-width: 300px; |
||||
margin-right: 20px; |
||||
padding-right: 50px; |
||||
padding-bottom: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
/* For demo */ |
||||
.ant-carousel >>> .slick-dots { |
||||
height: auto; |
||||
} |
||||
.ant-carousel >>> .slick-slide img { |
||||
border: 5px solid #fff; |
||||
display: block; |
||||
margin: auto; |
||||
max-width: 80%; |
||||
} |
||||
.ant-carousel >>> .slick-thumb { |
||||
bottom: -45px; |
||||
} |
||||
.ant-carousel >>> .slick-thumb li { |
||||
width: 60px; |
||||
height: 45px; |
||||
} |
||||
.ant-carousel >>> .slick-thumb li img { |
||||
width: 100%; |
||||
height: 100%; |
||||
filter: grayscale(100%); |
||||
} |
||||
.ant-carousel >>> .slick-thumb li.slick-active img { |
||||
filter: grayscale(0%); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@ |
||||
package org.jeecg.modules.system.vo; |
||||
|
||||
import lombok.Data; |
||||
import org.jeecg.modules.system.entity.SysUser; |
||||
|
||||
import java.util.List; |
||||
|
||||
@Data |
||||
public class SysUserdfVO { |
||||
private SysUser sysUser; |
||||
private List<String> fapiao; |
||||
private List<String> dizhi; |
||||
} |
||||
Loading…
Reference in new issue