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

我的收藏

Browse Source
zhc4dev
暖暖 2 years ago
parent b43a2bcf2d
commit 6ba103368b
2 changed files with 257 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. 254
      ant-design-vue-jeecg/src/views/shopping/components/collection.vue
  2. 4
      ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue

254
ant-design-vue-jeecg/src/views/shopping/components/collection.vue
Unescape View File

@ -0,0 +1,254 @@
<template>
<div class="collection">
<!-- 收藏列表-->
<div class="d-flex collectList" v-if="collectList.length != 0">
<div class="item d-flex" v-for="(item,index) in collectList" :key="index" v-if="index<7">
<img :src="item.imgUrl">
<div class="title f_14">{{item.title}}</div>
<div class="price f_14">￥{{item.price}}</div>
<div class="c_75 f_12">{{item.size}}</div>
<div class="c_75 f_12">{{item.zhuliao}}</div>
<div class="c_75 f_12">{{item.fuliao}}</div>
<a class="button1 f_12">删除</a>
<div class="button2 f_12 c_fff">加入购物袋</div>
</div>
<div class="more d-flex">
<a class="c_1B f_20">点击进入衣橱<a-icon type="right" /></a>
<a class="f_14">查看更多收藏</a>
</div>
</div>
<!-- 收藏列表没有数据-->
<div class="else" v-if="collectList.length == 0">
<p class="c_1B f_30">您的衣橱中没有收藏任何商品。</p>
<div class="c_fff f_12">前往探索</div>
</div>
<div class="recommending d-flex" v-if="collectList.length == 0">
<div class="item title d-flex">
<p class="f_20">您可能喜欢</p>
<p class="f_14">根据算法推荐</p>
</div>
<div class="item" v-for="(item,index) in recommendList" :key="index" v-if="index<4">
<img :src="item.imgUrl">
<span v-if="!item.flag" class="iconfont icon-weishoucang" @click="shouCang(item)"></span>
<span v-if="item.flag" class="iconfont icon-yishoucang" @click="shouCang(item)"></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "collection",
components: { },
data() {
return {
// collectList:[
// {
// id:1,
// imgUrl:require("../assets/cloth001.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:2,
// imgUrl:require("../assets/cloth002.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:3,
// imgUrl:require("../assets/cloth004.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:4,
// imgUrl:require("../assets/cloth003.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:5,
// imgUrl:require("../assets/cloth001.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:6,
// imgUrl:require("../assets/cloth002.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:7,
// imgUrl:require("../assets/cloth004.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// },
// {
// id:8,
// imgUrl:require("../assets/cloth003.png"),
// title:"商品名商品名商品名商品名商品名",
// price:'23500',
// size:"款式名",
// zhuliao:"主料名",
// fuliao:"辅料名",
// }
// ],
collectList:[],
recommendList:[
{
id:1,
imgUrl:require("../assets/cloth003.png"),
flag:false//是否点赞
},
{
id:2,
imgUrl:require("../assets/cloth002.png"),
flag:false
},
{
id:3,
imgUrl:require("../assets/cloth002.png"),
flag:false
},
{
id:4,
imgUrl:require("../assets/cloth003.png"),
flag:false
},
],
};
},
methods: {
shouCang(item){
console.log(item)
item.flag = !item.flag
}
},
};
</script>
<style lang="less" scoped>
@import '../assets/common.css';
.collection{
width: 1114px;margin:0 auto;
.collectList{
justify-content: flex-start;
flex-wrap: wrap;
.more{
width: 240px;
flex-direction: column;
align-items: center;
justify-content: center;
.c_1B{
margin-bottom: 12px;
}
.f_14{
color: #666;
}
}
.item{
width: 240px;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
margin-right: 30px;
img{
width: 220px;
height: 220px;
}
.title{
color: #1A1919;
}
.price{
color: #1A1919;
margin-top: 9px;
margin-bottom: 12px;
}
.c_75{
color: #757575;
}
.button1{
margin-top: 10px;
margin-bottom: 24px;
color: #1A1919;
text-decoration: underline;
}
.button2{
background-color: #000;
padding: 8px 16px;
transition: all 0.3s;
&:hover{
opacity: 0.6;
}
}
}
}
.else{
text-align: center;
padding-top: 60px;
margin-bottom: 150px;
.c_fff{
width: 196px;
height: 42px;
line-height: 42px;
background-color: #000;
margin: 0 auto;
transition: all 0.3s;
&:hover{
opacity: 0.8;
}
}
}
.recommending{
border: 1px solid #E7E7E7;
.title{
flex-direction: column;
justify-content: center;
align-items: center;
.f_20{
color: #313131;
}
.f_14{
color: #4B4E4B;
}
}
.item{
position: relative;
width: 300px;
border-right: 1px solid #E7E7E7;
.iconfont{
position: absolute;
top: 5%;
right: 5%;
}
img{
width: 200px;
}
}
}
}
</style>

4
ant-design-vue-jeecg/src/views/shopping/pages/gerenzhongxin.vue
Unescape View File

@ -122,6 +122,7 @@
</a-modal>-->
</div>
</div>
<Collection v-if="current[0] == 'collect'"></Collection>
<div class="orderList" >
<div class="item" v-for="(item,index) in allOrders" :key="index">
<div class="top d-flex">
@ -168,9 +169,10 @@
import { getFileAccessHttpUrl} from "@/api/manage"
import { httpAction, getAction } from '@/api/manage'
import PasswordModal from '../../system/modules/PasswordModal'
import Collection from "../components/collection";
export default {
name: "gerenzhongxin",
components: { Header,Footer,PasswordModal },
components: { Header,Footer,PasswordModal ,Collection},
data() {0
return {
model:{

Write Preview
Loading…
Cancel
Save