feat: 楼层装修新增绑定分类功能

master
学习很差啦 2022-10-19 11:56:42 +08:00
parent f08d166c86
commit d01edbdfe2
4 changed files with 385 additions and 209 deletions

View File

@ -1,198 +1,276 @@
<template>
<div>
<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-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="goods-detail">
<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>
</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">
<span v-if="promotionItem.indexOf('COUPON') != -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>
</div>
</div>
</div>
<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-loading slot="loading"></u-loading>
</u-image>
</div>
<div class="goods-detail">
<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>
</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"
>
<span v-if="promotionItem.indexOf('COUPON') != -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>
</div>
</div>
</div>
</div>
</template>
<script>
import commonTpl from '@/components/m-goods-list/common'
export default {
data() {
return {
lightColor: this.$mainColor
}
},
mixins: [commonTpl],
props: {
//
res: {
type: Array,
default: () => {
return []
}
},
},
methods:{
//
navigateToDetailPage(item) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
});
},
}
}
import commonTpl from "@/components/m-goods-list/common";
export default {
data() {
return {
lightColor: this.$mainColor,
};
},
mixins: [commonTpl],
props: {
//
type:{
type:String,
default:"oneColumns"
},
//
res: {
type: Array,
default: () => {
return [];
},
},
},
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 {
background-color: #ffffff;
display: flex;
border-radius: 16rpx;
flex-direction: column;
width: calc(50% - 30rpx);
margin-bottom: 20rpx;
padding-bottom: 20rpx;
&:nth-child(2n + 1) {
margin-right: 20rpx;
}
.image-wrapper {
width: 100%;
height: 330rpx;
border-radius: 16rpx 16rpx 0 0;
overflow: hidden;
padding: 0;
}
}
.count-config,
.store-seller-name {
font-size: $font-sm;
}
.text-hidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.goods-row {
background: #fff;
padding: 16rpx;
>.goods-col {
display: flex;
>.goods-img {
overflow: hidden;
flex: 4;
}
>.goods-detail {
flex: 7;
}
}
}
.goods-detail {
margin: 0 20rpx;
>.title {
font-size: $font-base;
color: $font-color-dark;
line-height: 1.5;
height: 86rpx;
padding: 10rpx 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.promotion {
margin-top: 4rpx;
display: flex;
div {
span {
font-size: 24rpx;
color: $light-color;
margin-right: 10rpx;
padding: 0 4rpx;
border-radius: 2rpx;
}
}
}
.store-seller-name {
color: #666;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.count-config {
padding: 5rpx 0;
color: #666;
display: flex;
font-size: 24rpx;
justify-content: space-between;
}
>.price-box {
margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10rpx;
font-size: 24rpx;
color: $font-color-light;
>.price {
font-size: 26rpx;
line-height: 1;
color: $main-color;
font-weight: bold;
/deep/ span:nth-of-type(1) {
font-size: 38rpx;
}
}
}
}
display: flex;
flex-wrap: wrap;
margin: 10rpx 20rpx 284rpx;
width: 100%;
> .goods-item {
background-color: #ffffff;
display: flex;
border-radius: 16rpx;
flex-direction: column;
width: calc(50% - 30rpx);
margin-bottom: 20rpx;
padding-bottom: 20rpx;
&:nth-child(2n + 1) {
margin-right: 20rpx;
}
.image-wrapper {
width: 100%;
height: 330rpx;
border-radius: 16rpx 16rpx 0 0;
overflow: hidden;
padding: 0;
}
}
.count-config,
.store-seller-name {
font-size: $font-sm;
}
.text-hidden {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.goods-row {
background: #fff;
padding: 16rpx;
> .goods-col {
display: flex;
> .goods-img {
overflow: hidden;
flex: 4;
}
> .goods-detail {
flex: 7;
}
}
}
.goods-detail {
margin: 0 20rpx;
> .title {
font-size: $font-base;
color: $font-color-dark;
line-height: 1.5;
height: 86rpx;
padding: 10rpx 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.promotion {
margin-top: 4rpx;
display: flex;
div {
span {
font-size: 24rpx;
color: $light-color;
margin-right: 10rpx;
padding: 0 4rpx;
border-radius: 2rpx;
}
}
}
.store-seller-name {
color: #666;
overflow: hidden;
display: flex;
justify-content: space-between;
}
.count-config {
padding: 5rpx 0;
color: #666;
display: flex;
font-size: 24rpx;
justify-content: space-between;
}
> .price-box {
margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10rpx;
font-size: 24rpx;
color: $font-color-light;
> .price {
font-size: 26rpx;
line-height: 1;
color: $main-color;
font-weight: bold;
/deep/ span:nth-of-type(1) {
font-size: 38rpx;
}
}
}
}
</style>

View File

@ -15,6 +15,11 @@ export default {
},
};
},
onReachBottom(){
//
uni.$emit('onReachBottom',true)
},
onPullDownRefresh() {
this.$refs.tpl.init();

View File

@ -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>

View File

@ -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 : '' : ''
}
}
});
},