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

成衣推荐详情

Browse Source
zhc4dev
暖暖 2 years ago
parent 824ca1ec32
commit 4fc4d38aae
2 changed files with 582 additions and 1 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. 2
      ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
  2. 581
      ant-design-vue-jeecg/src/views/shopping/pages/clothDetail1.vue

2
ant-design-vue-jeecg/src/views/shopping/components/Header/HeaderView.vue
Unescape View File

@ -12,7 +12,7 @@
<router-link to="/shopping/sirendingzhi" :style="{ color: fontColor }" class="srdz"
>私人定制</router-link
>
<router-link to="/shopping/chengyi" :style="{ color: fontColor }"
<router-link to="/shopping/chengyi" :style="{ color: fontColor }" class="cytj"
>成衣推荐</router-link
>
<router-link to="/shopping/news" :style="{ color: fontColor }"

581
ant-design-vue-jeecg/src/views/shopping/pages/clothDetail1.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save