feat[litemall-vue]: 支持品牌商列表页面和品牌商详情页面
This commit is contained in:
Junling Bu
@@ -118,7 +118,21 @@ export function goodsDetail(query) {
|
||||
const GoodsRelated='wx/goods/related'; //商品详情页的关联商品（大家都在看）
|
||||
|
||||
const BrandList='wx/brand/list'; //品牌列表
|
||||
export function brandList(query) {
|
||||
return request({
|
||||
url: BrandList,
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
const BrandDetail='wx/brand/detail'; //品牌详情
|
||||
export function brandDetail(query) {
|
||||
return request({
|
||||
url: BrandDetail,
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
const CartList='wx/cart/index'; //获取购物车的数据
|
||||
export function cartList(query) {
|
||||
|
||||
@@ -49,5 +49,17 @@ export default [
|
||||
name: 'groupon',
|
||||
component: () => import('@/views/items/groupon'),
|
||||
props: route => route.query
|
||||
},
|
||||
{
|
||||
path: '/items/brand/:brandId',
|
||||
name: 'brand',
|
||||
props: true,
|
||||
component: () => import('@/views/items/brand')
|
||||
},
|
||||
{
|
||||
path: '/items/brand-list',
|
||||
name: 'brandList',
|
||||
component: () => import('@/views/items/brand-list'),
|
||||
props: route => route.query
|
||||
}
|
||||
];
|
||||
|
||||
@@ -82,6 +82,29 @@
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
<van-panel>
|
||||
<van-grid clickable
|
||||
:column-num="2">
|
||||
<van-grid-item v-for="(brand ,index) in shopInfos.brandList"
|
||||
:key="index"
|
||||
:text="brand.name"
|
||||
:url="goBrand(brand.id)">
|
||||
<img :src="brand.picUrl"
|
||||
style="width: 80%;" />
|
||||
<div style="size:10px;"> {{ brand.name }}</div>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
<div slot='header'>
|
||||
<van-cell-group>
|
||||
<van-cell title="品牌商直供"
|
||||
isLink>
|
||||
<router-link to="/items/brand-list"
|
||||
class="text-desc">更多品牌商</router-link>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
<van-panel>
|
||||
<van-row gutter>
|
||||
<van-col span="12"
|
||||
@@ -126,7 +149,7 @@
|
||||
class="text-desc">更多人气推荐</router-link>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</div>
|
||||
</div>
|
||||
</van-panel>
|
||||
|
||||
</div>
|
||||
@@ -149,6 +172,8 @@ import {
|
||||
CouponList,
|
||||
Toast,
|
||||
Card,
|
||||
Grid,
|
||||
GridItem,
|
||||
Row,
|
||||
Col,
|
||||
Tag
|
||||
@@ -172,6 +197,9 @@ export default {
|
||||
goDetail(id) {
|
||||
return `#/items/detail/${id}`;
|
||||
},
|
||||
goBrand(id) {
|
||||
return `#/items/brand/${id}`;
|
||||
},
|
||||
getCoupon(id) {
|
||||
couponReceive({ couponId: id }).then(res => {
|
||||
Toast.success('领取成功');
|
||||
@@ -207,7 +235,9 @@ export default {
|
||||
[SwipeItem.name]: SwipeItem,
|
||||
[Tabbar.name]: Tabbar,
|
||||
[TabbarItem.name]: TabbarItem,
|
||||
[Tag.name]: Tag
|
||||
[Tag.name]: Tag,
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -217,7 +247,9 @@ export default {
|
||||
.interval_bot {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.van-panel {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.goods-channel {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
|
||||
142
litemall-vue/src/views/items/brand-list/index.vue
Normal file
142
litemall-vue/src/views/items/brand-list/index.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="goods_brand_list">
|
||||
<van-list v-model="loading"
|
||||
:finished="finished"
|
||||
:immediate-check="false"
|
||||
finished-text="没有更多了"
|
||||
@load="getBrandList">
|
||||
<div class="brand-info"
|
||||
v-for="(brand, index) in list"
|
||||
:key="index"
|
||||
@click="itemClick(brand.id)">
|
||||
<div class="name">
|
||||
<img class="img"
|
||||
:src="brand.picUrl"
|
||||
background-size="cover" />
|
||||
<div class="info-box">
|
||||
<div class="txt">{{brand.name}}</div>
|
||||
<div class="line"></div>
|
||||
<div class="price">{{brand.floorPrice}}元起</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{brand.desc}}
|
||||
</div>
|
||||
</div>
|
||||
</van-list>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandList } from '@/api/api';
|
||||
import { List } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
page: 0,
|
||||
limit: 10,
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
this.page = 0;
|
||||
this.list = [];
|
||||
this.getBrandList();
|
||||
},
|
||||
getBrandList() {
|
||||
this.page++;
|
||||
brandList({
|
||||
isNew: true,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
this.list.push(...res.data.data.list);
|
||||
this.loading = false;
|
||||
this.finished = res.data.data.page >= res.data.data.pages;
|
||||
});
|
||||
},
|
||||
itemClick(id) {
|
||||
this.$router.push(`/items/brand/${id}`);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
[List.name]: List
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods_brand_list {
|
||||
.brand-info {
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: block;
|
||||
|
||||
.txt {
|
||||
margin-top: 60px;
|
||||
height: 25px;
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
}
|
||||
.price{
|
||||
height: 25px;
|
||||
font-size: 25px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding: 25px 20px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
litemall-vue/src/views/items/brand/index.vue
Normal file
127
litemall-vue/src/views/items/brand/index.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="goods_brand">
|
||||
<div class="brand-info">
|
||||
<div class="name">
|
||||
<img class="img"
|
||||
:src="brand.picUrl"
|
||||
background-size="cover" />
|
||||
<div class="info-box">
|
||||
<div class="txt">{{brand.name}}</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{brand.desc}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-card v-for="(item, i) in brand.list"
|
||||
:key="i"
|
||||
:desc="item.brief"
|
||||
:title="item.name"
|
||||
:thumb="item.picUrl"
|
||||
:price="item.retailPrice"
|
||||
:origin-price="item.counterPrice"
|
||||
@click="itemClick(item.id)">
|
||||
</van-card>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { brandDetail } from '@/api/api';
|
||||
import { Card } from 'vant';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
brandId: [String, Number]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
brand: {}
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
brandDetail({
|
||||
id: this.brandId
|
||||
}).then(res => {
|
||||
this.brand = res.data.data;
|
||||
});
|
||||
},
|
||||
itemClick(id) {
|
||||
this.$router.push(`/items/detail/${id}`);
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
[Card.name]: Card
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods_brand {
|
||||
.brand-info {
|
||||
.name {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: block;
|
||||
|
||||
.txt {
|
||||
display: block;
|
||||
margin-top: 60px;
|
||||
height: 35px;
|
||||
font-size: 35px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 0 auto;
|
||||
margin-top: 16px;
|
||||
display: block;
|
||||
height: 2px;
|
||||
width: 145px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
padding: 25px 20px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user