feat: ✨ 楼层装修新增绑定分类功能
学习很差啦
parent
f08d166c86
commit
d01edbdfe2
|
|
@ -1,80 +1,161 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 一行两列商品展示 -->
|
||||
<view class="goods-list" v-if="type == 'twoColumns'">
|
||||
<view v-for="(item, index) in res" :key="index" class="goods-item">
|
||||
<view class="image-wrapper" @click="navigateToDetailPage(item)">
|
||||
<u-image
|
||||
:src="item.thumbnail"
|
||||
width="100%"
|
||||
height="330rpx"
|
||||
mode="aspectFill"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</view>
|
||||
<view class="goods-detail">
|
||||
<div
|
||||
class="title clamp"
|
||||
v-html="lightSearchStr(keyword, item.goodsName)"
|
||||
@click="navigateToDetailPage(item)"
|
||||
></div>
|
||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||
<div class="price" v-if="item.price != undefined">
|
||||
¥<span
|
||||
>{{
|
||||
$options.filters.goodsFormatPrice(item.price)[0]
|
||||
}} </span
|
||||
>.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
|
||||
</div>
|
||||
</view>
|
||||
<div class="count-config" @click="navigateToDetailPage(item)">
|
||||
<span>已售 {{ item.buyCount || "0" }}</span>
|
||||
<span>{{ item.commentNum || "0" }}条评论</span>
|
||||
</div>
|
||||
<div
|
||||
class="store-seller-name"
|
||||
v-if="storeName"
|
||||
@click="navigateToStoreDetailPage(item)"
|
||||
>
|
||||
<div class="text-hidden">
|
||||
<u-tag
|
||||
style="margin-right: 10rpx"
|
||||
size="mini"
|
||||
mode="dark"
|
||||
v-if="item.selfOperated"
|
||||
text="自营"
|
||||
type="error"
|
||||
/>
|
||||
<span>{{ item.storeName || "暂无" }}</span>
|
||||
</div>
|
||||
<span>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 一行一列商品展示 -->
|
||||
<div v-if="type == 'oneColumns'">
|
||||
<div v-for="(item, index) in res" :key="index" class="goods-row">
|
||||
<div class="flex goods-col">
|
||||
<div class="goods-img" @click="navigateToDetailPage(item)">
|
||||
<u-image width="230rpx" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
|
||||
<u-image
|
||||
width="230rpx"
|
||||
border-radius="16"
|
||||
height="230rpx"
|
||||
:src="item.goodsImage || item.thumbnail"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.goodsName }}</div>
|
||||
<div class="title clamp3" @click="navigateToDetailPage(item)">
|
||||
{{ item.goodsName }}
|
||||
</div>
|
||||
<view class="price-box" @click="navigateToDetailPage(item)">
|
||||
<div class="price" v-if="item.price!=undefined">
|
||||
¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{
|
||||
$options.filters.goodsFormatPrice(item.price )[1]
|
||||
}}
|
||||
<div class="price" v-if="item.price != undefined">
|
||||
¥<span
|
||||
>{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
|
||||
>.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
|
||||
</div>
|
||||
</view>
|
||||
<div class="promotion" @click="navigateToDetailPage(item)">
|
||||
<div v-if="item.salesModel == 'WHOLESALE'">
|
||||
<span>批</span>
|
||||
</div>
|
||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||
<div
|
||||
v-for="(promotionItem, promotionIndex) in getPromotion(item)"
|
||||
:key="promotionIndex"
|
||||
>
|
||||
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1"
|
||||
>满减</span
|
||||
>
|
||||
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config">
|
||||
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
|
||||
<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="overflow: hidden"
|
||||
@click="navigateToDetailPage(item)"
|
||||
class="count-config"
|
||||
>
|
||||
<span style="float: left; font-size: 22rpx"
|
||||
>已售 {{ item.buyCount || "0" }}</span
|
||||
>
|
||||
<span style="float: right; font-size: 22rpx"
|
||||
>{{ item.commentNum || "0" }}条评论</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commonTpl from '@/components/m-goods-list/common'
|
||||
export default {
|
||||
import commonTpl from "@/components/m-goods-list/common";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lightColor: this.$mainColor
|
||||
}
|
||||
lightColor: this.$mainColor,
|
||||
};
|
||||
},
|
||||
mixins: [commonTpl],
|
||||
props: {
|
||||
// 展示的类型
|
||||
type:{
|
||||
type:String,
|
||||
default:"oneColumns"
|
||||
},
|
||||
// 遍历的数据
|
||||
res: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
},
|
||||
methods: {
|
||||
// 跳转到商品详情
|
||||
navigateToDetailPage(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
<style lang="scss" scoped>
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10rpx 20rpx 284rpx;
|
||||
width: 100%;
|
||||
|
||||
>.goods-item {
|
||||
> .goods-item {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
border-radius: 16rpx;
|
||||
|
|
@ -87,7 +168,6 @@
|
|||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
|
|
@ -107,31 +187,30 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.goods-row {
|
||||
.goods-row {
|
||||
background: #fff;
|
||||
padding: 16rpx;
|
||||
|
||||
>.goods-col {
|
||||
> .goods-col {
|
||||
display: flex;
|
||||
|
||||
>.goods-img {
|
||||
> .goods-img {
|
||||
overflow: hidden;
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
>.goods-detail {
|
||||
> .goods-detail {
|
||||
flex: 7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
|
||||
>.title {
|
||||
> .title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
|
|
@ -173,7 +252,7 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
|
||||
>.price-box {
|
||||
> .price-box {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -182,7 +261,7 @@
|
|||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
|
||||
>.price {
|
||||
> .price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
|
|
@ -193,6 +272,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,11 @@ export default {
|
|||
},
|
||||
};
|
||||
},
|
||||
onReachBottom(){
|
||||
// 给子级监听触底加载
|
||||
uni.$emit('onReachBottom',true)
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.$refs.tpl.init();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,38 @@
|
|||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<u-sticky>
|
||||
<div class="goods-cell-title">
|
||||
<div class="goods-item-title" :class="{ 'selected-title': selected.index == index }"
|
||||
@click="handleClickTitle(title, index)" v-for="(title, index) in res.list[0].titleWay" :key="index">
|
||||
<div
|
||||
class="goods-item-title"
|
||||
:class="{ 'selected-title': selected.index == index }"
|
||||
@click="handleClickTitle(title, index)"
|
||||
v-for="(title, index) in res.list[0].titleWay"
|
||||
:key="index"
|
||||
>
|
||||
<h4 class="h4">{{ title.title }}</h4>
|
||||
<div>{{ title.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</u-sticky>
|
||||
<div class="goods-list">
|
||||
<div v-if="item.___index != undefined ? (selected.index == item.___index) : ( selected.val == item.type)"
|
||||
@click="handleClick(item)" class="goods-item" v-for="(item, item_index) in res.list[0].listWay"
|
||||
:key="item_index">
|
||||
<div
|
||||
v-if="
|
||||
item.___index != undefined
|
||||
? selected.index == item.___index
|
||||
: selected.val == item.type
|
||||
"
|
||||
@click="handleClick(item)"
|
||||
class="goods-item"
|
||||
v-for="(item, item_index) in res.list[0].listWay"
|
||||
:key="item_index"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<u-image :src="item.img" height="350rpx" mode="aspectFit" width="100%">
|
||||
<u-image
|
||||
:src="item.img"
|
||||
height="350rpx"
|
||||
mode="aspectFit"
|
||||
width="100%"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</div>
|
||||
|
|
@ -24,9 +41,42 @@
|
|||
{{ item.title }}
|
||||
</div>
|
||||
<div class="goods-bottom">
|
||||
<div class="goods-price"> ¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{
|
||||
$options.filters.goodsFormatPrice(item.price)[1]
|
||||
}}</div>
|
||||
<div class="goods-price">
|
||||
¥<span
|
||||
>{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
|
||||
>.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="res.list[0].titleWay[selected.index].bindCategory && goodsData.length"
|
||||
v-for="(item, index) in goodsData"
|
||||
:key="index"
|
||||
class="goods-item"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<u-image
|
||||
:src="item.thumbnail"
|
||||
height="350rpx"
|
||||
mode="aspectFit"
|
||||
width="100%"
|
||||
>
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</div>
|
||||
<div class="goods-desc">
|
||||
<div class="goods-title">
|
||||
{{ item.goodsName }}
|
||||
</div>
|
||||
<div class="goods-bottom">
|
||||
<div class="goods-price">
|
||||
¥<span
|
||||
>{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
|
||||
>.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,6 +84,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getGoodsList } from "@/api/goods.js";
|
||||
export default {
|
||||
title: "商品分类以及商品",
|
||||
data() {
|
||||
|
|
@ -42,21 +93,43 @@ export default {
|
|||
index: 0,
|
||||
val: "",
|
||||
},
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 100,
|
||||
categoryId: "",
|
||||
},
|
||||
goodsData: [], //商品循环内容
|
||||
goodsResult:"", //es总返回内容
|
||||
};
|
||||
},
|
||||
props: ["res"],
|
||||
props: ["res","enableBottomLoad"],
|
||||
watch: {
|
||||
res: {
|
||||
handler(val) {
|
||||
// 监听父级的值 如果有值将值赋给selected
|
||||
if (val) {
|
||||
this.selected.val = this.res.list[0].listWay[0].type;
|
||||
console.log(val)
|
||||
// 如果第一个标签页绑定为商品
|
||||
this.selected.val = this.res.list[0].listWay[0] ? this.res.list[0].listWay[0].type: '';
|
||||
// 如果第一个标签为绑定为分类
|
||||
this.res.list[0].titleWay[0].bindCategory ? this.initGoods(this.res.list[0].titleWay[0]) : ''
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
uni.$on('onReachBottom',()=>{
|
||||
if(this.enableBottomLoad && this.goodsResult.totalElements >= this.params.pageNumber * this.params.pageSize){
|
||||
this.params.pageNumber++
|
||||
this.initGoods(this.res.list[0].titleWay[this.selected.index])
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
destroyed(){
|
||||
uni.$off('onReachBottom')
|
||||
},
|
||||
methods: {
|
||||
handleClick(item) {
|
||||
uni.navigateTo({
|
||||
|
|
@ -66,9 +139,25 @@ export default {
|
|||
closeGoods(val, index) {
|
||||
this.res.list[0].listWay.splice(index, 1);
|
||||
},
|
||||
async initGoods(val) {
|
||||
if(this.enableBottomLoad) this.params.pageSize = 20
|
||||
val ? this.params.categoryId = val.bindCategory.id : '';
|
||||
const res = await getGoodsList(this.params);
|
||||
if (res.data.success) {
|
||||
this.goodsResult = res.data.result
|
||||
const result = res.data.result.content.map(item=>item.content)
|
||||
this.goodsData.push(...result);
|
||||
console.log(this.goodsData)
|
||||
}
|
||||
},
|
||||
handleClickTitle(val, index) {
|
||||
this.selected.index = index;
|
||||
this.selected.val = val.title;
|
||||
if (val.bindCategory) {
|
||||
this.params.pageNumber = 1
|
||||
this.goodsData = []
|
||||
this.initGoods(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -151,7 +240,7 @@ $w_94: 94%;
|
|||
margin: 0 auto;
|
||||
> .goods-title {
|
||||
font-size: 24rpx;
|
||||
height: 70rpx;
|
||||
height: 67rpx;
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -165,11 +254,10 @@ $w_94: 94%;
|
|||
> .goods-price {
|
||||
line-height: 2;
|
||||
color: $main-color;
|
||||
>span{
|
||||
> span {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<textPicture v-if="item.type == 'textPicture'" :res="item.options" />
|
||||
<menuLayout v-if="item.type == 'menu'" :res="item.options" />
|
||||
<flexOne v-if="item.type == 'flexOne'" :res="item.options" />
|
||||
<goods v-if="item.type == 'goods'" :res="item.options" />
|
||||
<goods :enableBottomLoad="enableLoad" v-if="item.type == 'goods'" :res="item.options" />
|
||||
<group v-if="item.type == 'group'" :res="item.options" />
|
||||
<notice v-if="item.type == 'notice'" :res="item.options" />
|
||||
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
|
||||
|
|
@ -85,6 +85,7 @@ export default {
|
|||
config,
|
||||
pageData: "", //楼层页面数据
|
||||
isIos: "",
|
||||
enableLoad:false, //触底加载 针对于商品模块
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
|
@ -124,8 +125,12 @@ export default {
|
|||
this.pageData = "";
|
||||
getFloorData().then((res) => {
|
||||
if (res.data.success) {
|
||||
this.pageData = JSON.parse(res.data.result.pageData);
|
||||
console.log(this.pageData);
|
||||
const result = JSON.parse(res.data.result.pageData)
|
||||
this.pageData = result;
|
||||
if(result.list.length){
|
||||
// 如果最后一个装修模块是商品模块的话 默认启用自动加载
|
||||
result.list[result.list.length-1] ? result.list[result.list.length-1].model == 'goods' ? this.enableLoad = true : '' : ''
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue