zhuce
/
lilishop-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
学习很差啦 2022-10-19 11:56:42 +08:00
parent f08d166c86
commit d01edbdfe2
4 changed files with 385 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
components/m-goods-list/base-list.vue
View File

@ -1,59 +1,140 @@
<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]
}}
¥<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'
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: {
@ -63,11 +144,11 @@
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;
@ -87,7 +168,6 @@
margin-right: 20rpx;
}
.image-wrapper {
width: 100%;
height: 330rpx;
@ -109,7 +189,6 @@
}
}
.goods-row {
background: #fff;
padding: 16rpx;
@ -193,6 +272,5 @@
}
}
}
}
</style>

5
pages/tabbar/home/index.vue
View File

@ -15,6 +15,11 @@ export default {
},
};
},
onReachBottom(){
// 给子级监听触底加载
uni.$emit('onReachBottom',true)
},
onPullDownRefresh() {
this.$refs.tpl.init();

118
pages/tabbar/home/template/tpl_goods.vue
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;
@ -171,5 +260,4 @@ $w_94: 94%;
}
}
}
</style>

11
pages/tabbar/home/views.vue
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 : '' : ''
}
}
});
},