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> <template>
<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 v-for="(item, index) in res" :key="index" class="goods-row">
<div class="flex goods-col"> <div class="flex goods-col">
<div class="goods-img" @click="navigateToDetailPage(item)"> <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-loading slot="loading"></u-loading>
</u-image> </u-image>
</div> </div>
<div class="goods-detail"> <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)"> <view class="price-box" @click="navigateToDetailPage(item)">
<div class="price" v-if="item.price != undefined"> <div class="price" v-if="item.price != undefined">
¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{ ¥<span
$options.filters.goodsFormatPrice(item.price )[1] >{{ $options.filters.goodsFormatPrice(item.price)[0] }} </span
}} >.{{ $options.filters.goodsFormatPrice(item.price)[1] }}
</div> </div>
</view> </view>
<div class="promotion" @click="navigateToDetailPage(item)"> <div class="promotion" @click="navigateToDetailPage(item)">
<div v-if="item.salesModel == 'WHOLESALE'"> <div v-if="item.salesModel == 'WHOLESALE'">
<span>批</span> <span>批</span>
</div> </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('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> <span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
</div> </div>
</div> </div>
<div style="overflow: hidden" @click="navigateToDetailPage(item)" class="count-config"> <div
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span> style="overflow: hidden"
<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span> @click="navigateToDetailPage(item)"
</div> 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>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import commonTpl from '@/components/m-goods-list/common' import commonTpl from "@/components/m-goods-list/common";
export default { export default {
data() { data() {
return { return {
lightColor: this.$mainColor lightColor: this.$mainColor,
} };
}, },
mixins: [commonTpl], mixins: [commonTpl],
props: { props: {
// 展示的类型
type:{
type:String,
default:"oneColumns"
},
// 遍历的数据 // 遍历的数据
res: { res: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
}, },
}, },
methods: { methods: {
@ -63,11 +144,11 @@
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`, url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
}); });
}, },
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.goods-list { .goods-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -87,7 +168,6 @@
margin-right: 20rpx; margin-right: 20rpx;
} }
.image-wrapper { .image-wrapper {
width: 100%; width: 100%;
height: 330rpx; height: 330rpx;
@ -109,7 +189,6 @@
} }
} }
.goods-row { .goods-row {
background: #fff; background: #fff;
padding: 16rpx; padding: 16rpx;
@ -193,6 +272,5 @@
} }
} }
} }
} }
</style> </style>

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

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

118
pages/tabbar/home/template/tpl_goods.vue
View File

@ -1,21 +1,38 @@
<template> <template>
<div class="layout"> <div class="layout">
<u-sticky> <u-sticky>
<div class="goods-cell-title"> <div class="goods-cell-title">
<div class="goods-item-title" :class="{ 'selected-title': selected.index == index }" <div
@click="handleClickTitle(title, index)" v-for="(title, index) in res.list[0].titleWay" :key="index"> 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> <h4 class="h4">{{ title.title }}</h4>
<div>{{ title.desc }}</div> <div>{{ title.desc }}</div>
</div> </div>
</div> </div>
</u-sticky> </u-sticky>
<div class="goods-list"> <div class="goods-list">
<div v-if="item.___index != undefined ? (selected.index == item.___index) : ( selected.val == item.type)" <div
@click="handleClick(item)" class="goods-item" v-for="(item, item_index) in res.list[0].listWay" v-if="
:key="item_index"> 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"> <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-loading slot="loading"></u-loading>
</u-image> </u-image>
</div> </div>
@ -24,9 +41,42 @@
{{ item.title }} {{ item.title }}
</div> </div>
<div class="goods-bottom"> <div class="goods-bottom">
<div class="goods-price"> ¥<span>{{ $options.filters.goodsFormatPrice(item.price )[0] }} </span>.{{ <div class="goods-price">
$options.filters.goodsFormatPrice(item.price)[1] ¥<span
}}</div> >{{ $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> </div>
</div> </div>
@ -34,6 +84,7 @@
</div> </div>
</template> </template>
<script> <script>
import { getGoodsList } from "@/api/goods.js";
export default { export default {
title: "商品分类以及商品", title: "商品分类以及商品",
data() { data() {
@ -42,21 +93,43 @@ export default {
index: 0, index: 0,
val: "", val: "",
}, },
params: {
pageNumber: 1,
pageSize: 100,
categoryId: "",
},
goodsData: [], //商品循环内容
goodsResult:"", //es总返回内容
}; };
}, },
props: ["res"], props: ["res","enableBottomLoad"],
watch: { watch: {
res: { res: {
handler(val) { handler(val) {
// 监听父级的值 如果有值将值赋给selected // 监听父级的值 如果有值将值赋给selected
if (val) { 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, 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: { methods: {
handleClick(item) { handleClick(item) {
uni.navigateTo({ uni.navigateTo({
@ -66,9 +139,25 @@ export default {
closeGoods(val, index) { closeGoods(val, index) {
this.res.list[0].listWay.splice(index, 1); 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) { handleClickTitle(val, index) {
this.selected.index = index; this.selected.index = index;
this.selected.val = val.title; 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; margin: 0 auto;
> .goods-title { > .goods-title {
font-size: 24rpx; font-size: 24rpx;
height: 70rpx; height: 67rpx;
display: -webkit-box; display: -webkit-box;
font-weight: 500; font-weight: 500;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -171,5 +260,4 @@ $w_94: 94%;
} }
} }
} }
</style> </style>

11
pages/tabbar/home/views.vue
View File

@ -42,7 +42,7 @@
<textPicture v-if="item.type == 'textPicture'" :res="item.options" /> <textPicture v-if="item.type == 'textPicture'" :res="item.options" />
<menuLayout v-if="item.type == 'menu'" :res="item.options" /> <menuLayout v-if="item.type == 'menu'" :res="item.options" />
<flexOne v-if="item.type == 'flexOne'" :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" /> <group v-if="item.type == 'group'" :res="item.options" />
<notice v-if="item.type == 'notice'" :res="item.options" /> <notice v-if="item.type == 'notice'" :res="item.options" />
<promotions v-if="item.type == 'promotionDetail'" :res="item.options" /> <promotions v-if="item.type == 'promotionDetail'" :res="item.options" />
@ -85,6 +85,7 @@ export default {
config, config,
pageData: "", //楼层页面数据 pageData: "", //楼层页面数据
isIos: "", isIos: "",
enableLoad:false, //触底加载 针对于商品模块
}; };
}, },
components: { components: {
@ -124,8 +125,12 @@ export default {
this.pageData = ""; this.pageData = "";
getFloorData().then((res) => { getFloorData().then((res) => {
if (res.data.success) { if (res.data.success) {
this.pageData = JSON.parse(res.data.result.pageData); const result = JSON.parse(res.data.result.pageData)
console.log(this.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 : '' : ''
}
} }
}); });
}, },