dlh/shop_uniapp
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

将新品推荐和热销榜单改为两个功能模块来做

Browse Source
This commit is contained in:
wangxiaowei 2024-07-27 14:04:36 +08:00
parent 9522e30ff7
commit cacd88529f
9 changed files with 183 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
api/store.js
View File

@ -209,4 +209,13 @@ export function getMallNewsDetail(params) {
export function searchGoods(params) {
return request.get('goods/searchByName', {params});
}
}
export function getHotList(params) {
return request.get('goods/hotList', {params});
}
export function getNewGoods(params) {
return request.get('goods/newGoods', {params});
}

52
bundle_b/pages/mall_news/index.vue
View File

@ -9,24 +9,24 @@
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" class="flex">
<view class="goods-name bold">{{item.title}}</view>
<view class="goods-name m-t-10">{{item.desc}}</view>
<view v-if="item.files != ''">
<view v-if="item.type == 0">
<scroll-view style="white-space: nowrap;" :scroll-x="true">
<view class="flex">
<u-image @click="preview(v.src, i)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
</view>
</scroll-view>
</view>
<view v-if="item.type == 1">
<video :src="item.files[0].src" class="thumb-video"></video>
</view>
</view>
</router-link>
<view v-if="item.files != ''">
<view v-if="item.type == 0">
<scroll-view style="white-space: nowrap;" :scroll-x="true">
<view class="flex">
<u-image @click="preview(v.src, item.files)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
</view>
</scroll-view>
</view>
<view v-if="item.type == 1">
<video :src="item.files[0].src" class="thumb-video"></video>
</view>
</view>
<view class="shop m-t-20" v-if="item.shop">
<view class="bold">推荐商品</view>
<router-link :to="{path: '/pages/goods_details/goods_details', query: {id: item.shop_id}}" class="flex">
<view class="flex">
<u-image @click="preview(v.src, i)" class="thumb" width="200rpx" height="200rpx" :border-radius="10" :src="item.shop.image"></u-image>
<u-image class="thumb" width="200rpx" height="200rpx" :border-radius="10" :src="item.shop.image"></u-image>
<view>
<view>{{item.shop.name}}</view>
<price-format :price="item.shop.min_price" :color="colorConfig.primary" :subscript-size="26" :first-size="38" :second-size="26"/>
@ -43,14 +43,15 @@
<view class="list">
<view v-for="(item, index) in list" :key="index">
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" class="flex">
<view class="goods-name bold">{{item.title}}</view>
<view class="goods-name m-t-10">{{item.desc}}</view>
<router-link :to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}" class="flex">
<view class="goods-name bold">{{item.title}}</view>
<view class="goods-name m-t-10">{{item.desc}}</view>
</router-link>
<view v-if="item.files != ''">
<view v-if="item.type == 0">
<scroll-view style="white-space: nowrap;" :scroll-x="true">
<view class="flex">
<u-image @click="preview(v.src, i)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
<u-image @click="preview(v.src, item.files)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
</view>
</scroll-view>
</view>
@ -58,7 +59,6 @@
<video :src="item.files[0].src" class="thumb-video"></video>
</view>
</view>
</router-link>
</view>
</view>
</view>
@ -82,10 +82,18 @@
};
},
methods: {
preview(url) {
uni.previewImage({
urls: [url]
});
preview(current, files) {
console.log(current)
console.log(files)
let f = files.map((item) => {
return item.src
})
this.$nextTick(() => {
uni.previewImage({
current,
urls: f
});
})
},
upCallback(page) {

17
components/active-area/active-area.vue
View File

@ -2,21 +2,22 @@
<view :class="['active-area bg-white', type]">
<view class="active-hd flex row-between" v-if="title">
<view class="xxl bold">{{title}}</view>
<router-link :to="url" v-if="url && type == 'hot'">
<router-link :to="url" v-if="url">
<view class="sm">更多 <u-icon name="arrow-right"></u-icon>
</view>
</router-link>
</view>
<view class="active-con">
<scroll-view style="white-space: nowrap;" :scroll-x="true" v-if="type == 'hot'">
<view class="goods-wrap">
<goods-list :show-bg="false" type="row-hot" :list="list" :price-type="priceType"></goods-list>
</view>
</scroll-view>
<goods-list v-if="type == 'new'" type="new" :list="list" :show-bg="false" :price-type="priceType"></goods-list>
<!-- <scroll-view style="white-space: nowrap;" :scroll-x="true" v-if="type == 'hot'">
<view class="goods-wrap"> -->
<!-- <goods-list :show-bg="false" type="row-hot" :list="list" :price-type="priceType"></goods-list> -->
<!-- </view>
</scroll-view> -->
<goods-list v-if="type == 'hot'" :show-bg="false" type="double" :show-order="true" :list="list" :price-type="priceType" :width="'320rpx'"></goods-list>
<goods-list v-if="type == 'new'" type="double" :width="'320rpx'" :list="list" :show-bg="false" :price-type="priceType"></goods-list>
</view>
<router-link :to="url" v-if="url && type == 'new'">
<router-link :to="url" v-if="url">
<view class="bg-white xs flex row-center more">查看更多 <u-icon name="arrow-right">
</u-icon>
</view>

2
components/cate-home/cate-home.vue
View File

@ -7,7 +7,7 @@
<cate-nav :list="navList"></cate-nav>
</view>
<view class="contain" v-if="hotGoods.length">
<active-area :list="hotGoods" type="hot" title="品类热销" :price-type="category_price_type"></active-area>
<active-area :list="hotGoods" type="double" title="品类热销" :price-type="category_price_type"></active-area>
</view>
<view class="contain" v-if="newGoods.length">
<active-area :list="newGoods" type="new" title="品类推荐" :price-type="category_price_type"></active-area>

24
components/goods-list/goods-list.vue
View File

@ -63,6 +63,9 @@
line-through :price="item.market_price || item.price"></price-format>
</view> -->
</view>
<image v-if="showOrder && index < 3" class="paixu"
:src="' https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/No.' + index + '.png'"></image>
</view>
</router-link>
</view>
@ -312,6 +315,10 @@
priceType: {
type: Number,
default: 0
},
showOrder: {
type: Boolean,
default: false
}
},
data() {
@ -360,6 +367,7 @@
width: 347rpx;
border-radius: 10rpx;
overflow: hidden;
position: relative;
.goods-info {
padding: 10rpx;
@ -368,7 +376,6 @@
height: 80rpx;
line-height: 40rpx;
}
}
}
}
@ -431,15 +438,12 @@
}
}
.goods-row,
.goods-hot {
.paixu {
position: absolute;
top: 0;
left: 20rpx;
width: 48rpx;
height: 60rpx;
}
.paixu {
position: absolute;
top: 0;
left: 20rpx;
width: 48rpx;
height: 60rpx;
}
}
</style>

11
components/index-home/index-home.vue
View File

@ -100,11 +100,12 @@
</view>
<view class="m-t-20" v-if="appConfig.index_setting.host_show && hotGoods.length">
<active-area :list="hotGoods" :price-type="priceType" type="hot" title="热销榜单" url="/pages/active_list/active_list?type=hot"></active-area>
<active-area :list="hotListGoods" :price-type="priceType" type="hot" title="热销榜单" url="/pages/active_list/active_list?type=hot"></active-area>
</view>
<view class="m-t-20" v-if="appConfig.index_setting.new_show && newGoods.length">
<!-- <view class="m-t-20" v-if="appConfig.index_setting.new_show && newGoods.length">
<active-area :list="newGoods" :price-type="priceType" type="new" title="新品推荐" url="/pages/active_list/active_list?type=new"></active-area>
</view>
</view> -->
<!-- <view class="m-t-20" v-if="appConfig.index_setting.community_show && communityArticle.length">
<community-recommend :list="communityArticle" title="种草社区" url="/pages/community/community"></community-recommend>
@ -117,7 +118,6 @@
<view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopRecommend.length" v-for="(item, index) in shopRecommend" :key="index">
<shop-item :item="item" :price-type="priceType"></shop-item>
</view>
</view>
</view>
</template>
@ -195,6 +195,9 @@
hotGoods() {
return this.homeData.hots || []
},
hotListGoods() {
return this.homeData.hot_list || []
},
newGoods() {
return this.homeData.news || []
},

48
components/mall-news/mall-news.vue
View File

@ -4,15 +4,27 @@
<view class="white xxl bold">商城快讯</view>
</view>
<view v-if="list" class="goods-seckill">
<router-link v-for="(item, index) in list" :key="index"
:to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}">
<view class="item bg-white flex">
<view class="goods-info m-l-20 flex-1">
<view class="goods-name line-2 bold">{{item.title}}</view>
<view class="goods-name line-2 m-t-10">{{item.desc}}</view>
<view class="item bg-white flex" v-for="(item, index) in list" :key="index">
<view class="goods-info m-l-20 flex-1">
<router-link
:to="{path: '/bundle_b/pages/mall_news/detail', query: {id: item.id}}">
<view class="goods-name line-2 bold">{{item.title}}</view>
<view class="goods-name line-2 m-t-10">{{item.desc}}</view>
</router-link>
<view v-if="item.files != ''" style="width: 80%;">
<view v-if="item.type == 0">
<scroll-view style="white-space: nowrap;" :scroll-x="true">
<view class="flex">
<u-image @click="preview(v.src, item.files)" class="thumb" v-for="(v, i) in item.files" :key="i" width="240rpx" height="240rpx" :border-radius="10" :src="v.src"></u-image>
</view>
</scroll-view>
</view>
<view v-if="item.type == 1">
<video :src="item.files[0].src" class="thumb-video"></video>
</view>
</view>
</view>
</router-link>
</view>
</view>
<router-link :to="'/bundle_b/pages/mall_news/index'">
<view class="xs flex row-center more">查看更多 <u-icon name="arrow-right"></u-icon>
@ -35,7 +47,17 @@
};
},
methods: {
preview(current, files) {
let f = files.map((item) => {
return item.src
})
this.$nextTick(() => {
uni.previewImage({
current,
urls: f
});
})
}
}
}
</script>
@ -84,5 +106,15 @@
height: 80rpx;
border-top: $-solid-border;
}
.thumb {
margin-right: 20rpx;
margin-top: 20rpx;
}
.thumb-video {
width: 100%;
margin-top: 20rpx;
}
}
</style>

82
pages/active_list/active_list.vue
View File

@ -15,7 +15,7 @@
<u-divider v-if="type == 'new'" :color="colorConfig.normal" bg-color="transparent" :font-size="38">新品推荐</u-divider>
</view>
<view class="hot">
<goods-list v-if="type == 'hot'" :list="goodsList" type="hot" :price-type="price_type"></goods-list>
<goods-list v-if="type == 'hot'" :show-order="true" :list="goodsList" type="double" :price-type="price_type"></goods-list>
</view>
<view class="news">
<goods-list v-if="type == 'new'" :list="goodsList" type="double" :price-type="price_type"></goods-list>
@ -27,7 +27,9 @@
<script>
import {
getGoodsList
getHotList,
getGoodsList,
getNewGoods
} from '@/api/store';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
export default {
@ -40,6 +42,7 @@
tip: "暂无商品～"
}
},
hotList: [],
goodsList: [],
type: '',
price_type: 0
@ -68,41 +71,56 @@
p_id: this.$store.getters.hasPid,
set: this.$store.getters.hasSetId
}
switch(this.type) {
case 'hot': params.sort_by_sales = 'desc'
break;
case 'new': params.sort_by_create = 'desc'
break;
}
getGoodsList(params).then(res => {
if (res.code == 1) {
this.price_type = res.data.set_price_type;
let curPageData = res.data.lists;
let curPageLen = curPageData.length;
let hasNext = !!res.data.more;
if (page.num == 1) {
this.goodsList = [];
// switch(this.type) {
// case 'hot': params.sort_by_sales = 'desc'
// break;
// case 'new': params.sort_by_create = 'desc'
// break;
// }
if (this.type == 'hot') {
getHotList(params).then(res => {
if (res.code == 1) {
this.price_type = 0;
let curPageData = res.data.lists;
let curPageLen = curPageData.length;
let hasNext = !!res.data.more;
if (page.num == 1) {
this.goodsList = [];
}
this.goodsList = this.goodsList.concat(curPageData);
this.mescroll.endSuccess(curPageLen, hasNext);
}
this.goodsList = this.goodsList.concat(curPageData);
this.mescroll.endSuccess(curPageLen, hasNext);
}
}).catch(err => {
this.mescroll.endErr()
})
}).catch(err => {
this.mescroll.endErr()
})
}
if (this.type == 'new') {
params.type = 'all'
getNewGoods(params).then(res => {
if (res.code == 1) {
this.price_type = 0;
let curPageData = res.data.lists;
let curPageLen = curPageData.length;
let hasNext = !!res.data.more;
if (page.num == 1) {
this.goodsList = [];
}
this.goodsList = this.goodsList.concat(curPageData);
this.mescroll.endSuccess(curPageLen, hasNext);
}
}).catch(err => {
this.mescroll.endErr()
})
}
},
}
};
</script>
<style lang="scss">
.hot-list {
.main {
.list-title {
margin: 27rpx 0 30rpx;
}
.hot {
padding: 0 30rpx;
}
}
.list-title {
margin: 27rpx 0 30rpx;
}
</style>

30
pages/user/user.vue
View File

@ -65,7 +65,7 @@
{{userInfo.xy_price || 0}}
</view>
<view class="sm m-t-10 bold">
信用额度
授信额度
</view>
</view>
</router-link>
@ -264,8 +264,9 @@
</view>
</view>
<goods-column ref="mescrollItem"></goods-column>
<view class="m-20">
<active-area :list="newGoods" :price-type="priceType" type="new" title="新品推荐" url="/pages/active_list/active_list?type=new"></active-area>
</view>
<tabbar></tabbar>
</view>
</template>
@ -278,7 +279,8 @@
} from 'vuex'
import {
getMenu,
getTools
getTools,
getNewGoods
} from '@/api/store'
import {
toLogin
@ -296,13 +298,15 @@
showNav: false,
navBg: 0,
menuList: [],
toolsList: []
toolsList: [],
newGoods: []
};
},
onLoad(options) {
this.getMenuFun();
this.getMenuFun()
this.getToolsFun()
this.getNewGoodsFun()
},
onShow() {
@ -322,9 +326,10 @@
},
onPullDownRefresh() {
this.getUser().then(() => {
uni.stopPullDownRefresh();
uni.stopPullDownRefresh()
})
this.getMenuFun();
this.getMenuFun()
this.getNewGoodsFun()
},
methods: {
...mapActions(['getCartNum', 'getUser']),
@ -349,6 +354,15 @@
url
});
},
async getNewGoodsFun() {
const {
code,
data
} = await getNewGoods({type: 'recommend'});
if (code == 1) {
this.newGoods = data
}
},
async getMenuFun() {
const {
data,