服装智能制造软件平台V3.0
http://182.92.169.222/hhxy/#/user/login
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
576 lines
16 KiB
576 lines
16 KiB
<template> |
|
<!-- 私人定制--> |
|
<div class="sirendingzhi"> |
|
<div class="stepsDiv"> |
|
<Header fontColor="#fff"></Header> |
|
|
|
<!-- <el-steps :active="2"> |
|
<el-step title="服装类型" description="选择定制的服装类型"></el-step> |
|
<el-step title="款式模块" description="更改各款式模块"></el-step> |
|
<el-step title="量体数据" description="一人一版量体定制"></el-step> |
|
<el-step title="购买下单" description="工期视具体情况而定"></el-step> |
|
</el-steps> --> |
|
<a-steps :current="current"> |
|
<a-step> |
|
<template #title>服装类型</template> |
|
<template #description> |
|
<span>选择定制的服装类型</span> |
|
</template> |
|
</a-step> |
|
<a-step title="款式模块" description="更改各款式模块" /> |
|
<a-step title="量体数据" description="一人一版量体定制" /><a-step |
|
title="购买下单" |
|
description="工期视具体情况而定" |
|
/> |
|
</a-steps> |
|
</div> |
|
<div class="steps__wrapper" v-if="current == 0"> |
|
<div class="title"> |
|
<div class="jz"> |
|
<p>服装类型</p> |
|
</div> |
|
</div> |
|
<div class="main"> |
|
<div class="jz d-flex"> |
|
<el-menu |
|
default-active="2" |
|
class="el-menu-vertical-demo" |
|
@open="handleOpen" |
|
@close="handleClose" |
|
style="width: 10%; min-width: 140px" |
|
> |
|
<el-submenu index="1"> |
|
<template slot="title"> |
|
<i class="el-icon-male"></i> |
|
<span>男装</span> |
|
</template> |
|
<el-menu-item index="1-1">衬衫</el-menu-item> |
|
<el-menu-item index="1-2">卫衣</el-menu-item> |
|
<el-menu-item index="1-3">夹克</el-menu-item> |
|
<el-menu-item index="1-4">T恤</el-menu-item> |
|
<el-menu-item index="1-5">Polo衫</el-menu-item> |
|
<el-menu-item index="1-6">针织衫</el-menu-item> |
|
<el-menu-item index="1-7">羽绒服</el-menu-item> |
|
<el-menu-item index="1-8">风衣</el-menu-item> |
|
<el-menu-item index="1-9">西服</el-menu-item> |
|
<el-menu-item index="1-10">休闲裤</el-menu-item> |
|
<el-menu-item index="1-11">西裤</el-menu-item> |
|
<el-menu-item index="1-12">工装裤</el-menu-item> |
|
<el-menu-item index="1-13">运动裤</el-menu-item> |
|
<el-menu-item index="1-14">卫裤</el-menu-item> |
|
<el-menu-item index="1-15">九分裤</el-menu-item> |
|
<el-menu-item index="1-16">短裤</el-menu-item> |
|
<el-menu-item index="1-17">哈伦裤</el-menu-item> |
|
</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> |
|
<div class="d-flex"> |
|
<el-dropdown> |
|
<span class="el-dropdown-link"> |
|
综合<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-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" |
|
> |
|
<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"> |
|
<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> |
|
<el-dialog |
|
:visible.sync="dialogVisible" |
|
width="30%" |
|
:close-on-click-modal="true" |
|
:lock-scroll="true" |
|
> |
|
<div class="dialogTitle f_24">您确定要选择此款式吗？</div> |
|
<div class="dialogDiv d-flex"> |
|
<!-- <img src="" alt="" /> --> |
|
<div class="img"></div> |
|
<div class="dialogName c_000 f_16">款式#{{ dialogModel.name }}</div> |
|
<div class="dialogPrice c_999 f_14"> |
|
基础价：¥ {{ dialogModel.price }} |
|
</div> |
|
</div> |
|
<span slot="footer" class="dialog-footer d-flex"> |
|
<div |
|
@click="dialogVisible = false" |
|
class="dialogButton default f_14" |
|
> |
|
重新选择 |
|
</div> |
|
<div |
|
type="primary" |
|
@click="dialogSure" |
|
class="dialogButton primary f_14" |
|
> |
|
确定，下一步 |
|
</div> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</div> |
|
<div class="steps__wrapper" v-if="current == 1"></div> |
|
<div v-if="current == 3"> |
|
<PlaceOrder></PlaceOrder> |
|
</div> |
|
<Footer></Footer> |
|
</div> |
|
</template> |
|
<script> |
|
import Header from "../components/Header/HeaderView"; |
|
import Footer from "../components/Footer/FooterView"; |
|
import PlaceOrder from "../components/Order/placeOrder" |
|
export default { |
|
name: "sirendingzhi", |
|
components: { Header ,PlaceOrder,Footer}, |
|
data() { |
|
return { |
|
current: 3, |
|
dialogVisible: false, |
|
dialogModel: { |
|
imgUrl: "", |
|
name: "", |
|
price: 0, |
|
}, |
|
clothsList: [ |
|
{ |
|
id: 1, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 2, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 3, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 4, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 5, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 6, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 7, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 8, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 9, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
{ |
|
id: 10, |
|
imgUrl: require("../assets/cloth.png"), |
|
currentPrice: 599, |
|
historicalPrice: 799, |
|
title: "HOODIE 运动长袖连帽卫衣套头衫", |
|
heat: 3200, |
|
}, |
|
], |
|
}; |
|
}, |
|
methods: { |
|
handleOpen(key, keyPath) { |
|
console.log(key, keyPath); |
|
}, |
|
handleClose(key, keyPath) { |
|
console.log(key, keyPath); |
|
}, |
|
// onChange(current) { |
|
// console.log("onChange:", current); |
|
// this.current = current; |
|
// }, |
|
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; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<!-- <style> |
|
.TypeView .top .middle .router-link-exact-active.router-link-active { |
|
border-bottom: 2px solid #000; |
|
} |
|
</style> --> |
|
<style scoped> |
|
@import '../assets/common.css'; |
|
</style> |
|
<style lang="less" scoped> |
|
.stepsDiv { |
|
background: url("../assets/bg04.png"); |
|
padding-bottom: 50px; |
|
.ant-steps { |
|
padding-top: 120px; |
|
width: 60%; |
|
margin: 0 auto; |
|
min-width: 1000px; |
|
.ant-steps-item-finish { |
|
&/deep/ .ant-steps-item-icon { |
|
background-color: rgba(0, 0, 0, 0.1); |
|
border-color: #c8a985; |
|
i { |
|
color: #c8a985; |
|
} |
|
} |
|
&/deep/ .ant-steps-item-title { |
|
color: #fff; |
|
&::after { |
|
background-color: #c8a985; |
|
} |
|
} |
|
&/deep/ .ant-steps-item-description { |
|
color: rgba(255, 255, 255, 0.6); |
|
} |
|
} |
|
.ant-steps-item-process { |
|
&/deep/ .ant-steps-item-icon { |
|
background-color: #c8a985; |
|
border-color: #c8a985; |
|
i { |
|
color: #fff; |
|
} |
|
} |
|
&/deep/ .ant-steps-item-title { |
|
color: #c8a985; |
|
&::after { |
|
background-color: #fff; |
|
} |
|
} |
|
&/deep/ .ant-steps-item-description { |
|
color: rgba(255, 255, 255, 0.6); |
|
} |
|
} |
|
.ant-steps-item-wait { |
|
&/deep/ .ant-steps-item-icon { |
|
background-color: rgba(0, 0, 0, 0.1); |
|
border-color: rgba(255, 255, 255, 0.6); |
|
& .ant-steps-icon { |
|
color: rgba(255, 255, 255, 0.6); |
|
} |
|
} |
|
&/deep/ .ant-steps-item-title { |
|
color: rgba(255, 255, 255, 0.6); |
|
&::after { |
|
background-color: #fff; |
|
} |
|
} |
|
&/deep/ .ant-steps-item-description { |
|
color: rgba(255, 255, 255, 0.6); |
|
} |
|
} |
|
.ant-steps-item-container:hover { |
|
& /deep/ .ant-steps-item-icon { |
|
background-color: #c8a985; |
|
border-color: #c8a985; |
|
i { |
|
color: #fff; |
|
} |
|
} |
|
& /deep/ .ant-steps-item-title { |
|
color: #c8a985; |
|
&::after { |
|
background-color: #fff; |
|
} |
|
} |
|
& /deep/ .ant-steps-item-description { |
|
color: rgba(255, 255, 255, 0.6); |
|
} |
|
} |
|
} |
|
.el-steps { |
|
padding-top: 100px; |
|
width: 60%; |
|
margin: 0 auto; |
|
min-width: 1000px; |
|
& /deep/ .is-process { |
|
color: #c8a985; |
|
.is-text { |
|
border-color: #c8a985; |
|
} |
|
.el-step__icon { |
|
background-color: #c8a985; |
|
color: #fff; |
|
} |
|
} |
|
& /deep/ .is-wait { |
|
color: rgba(255, 255, 255, 0.4); |
|
.is-text { |
|
border-color: rgba(255, 255, 255, 0.4); |
|
} |
|
.el-step__icon { |
|
background-color: rgba(255, 255, 255, 0.4); |
|
color: #fff; |
|
} |
|
} |
|
& /deep/ .is-finish { |
|
color: #ffffff; |
|
.is-text { |
|
border-color: #c8a985; |
|
} |
|
& /deep/ .el-step__line { |
|
border-color: #c8a985; |
|
} |
|
.el-step__icon { |
|
background-color: #ffffff; |
|
color: #c8a985; |
|
} |
|
} |
|
} |
|
} |
|
.steps__wrapper { |
|
.title { |
|
font-size: 26px; |
|
font-weight: 600; |
|
color: #000000; |
|
line-height: 22px; |
|
margin-bottom: 20px; |
|
margin-top: 60px; |
|
} |
|
.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; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.el-dialog__wrapper { |
|
&/deep/ .el-dialog { |
|
width: 816px !important; |
|
.dialogTitle { |
|
text-align: center; |
|
color: #1b1b1b; |
|
line-height: 36px; |
|
} |
|
.dialogDiv { |
|
flex-direction: column; |
|
align-items: center; |
|
padding: 30px 50px 10px 50px; |
|
.img { |
|
width: 200px; |
|
height: 200px; |
|
background: #d9d9d9; |
|
} |
|
.dialogName { |
|
margin-top: 20px; |
|
margin-bottom: 20px; |
|
} |
|
} |
|
.dialog-footer { |
|
justify-content: center; |
|
align-items: center; |
|
.dialogButton { |
|
width: 128px; |
|
height: 40px; |
|
text-align: center; |
|
line-height: 38px; |
|
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; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|