yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【商品列表】 

1. 实现完成
pull/1/MERGE
YunaiV 2023-06-25 11:20:41 +08:00
parent 335146ed94
commit 13769114d2
5 changed files with 165 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
pages/goods_details/index.vue
View File

@ -913,9 +913,11 @@
// 设置营销活动 // 设置营销活动
const spuIds = good_list.map(item => item.id); const spuIds = good_list.map(item => item.id);
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => { if (spuIds.length > 0) {
ProductUtil.setActivityList(good_list, res.data); PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
}); ProductUtil.setActivityList(good_list, res.data);
});
}
}) })
}, },
/** /**

247
pages/goods_list/index.vue
View File

@ -7,84 +7,79 @@
<!-- #endif --> <!-- #endif -->
<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text> <view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
<input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search" <input placeholder='搜索商品名称' placeholder-class='placeholder' confirm-type='search' name="search"
:value='where.keyword' @confirm="searchSubmit"></input> :value='where.keyword' @confirm="searchSubmit" />
</view> </view>
<view class='iconfont' :class='is_switch==true?"icon-pailie":"icon-tupianpailie"' @click='Changswitch'> <view class='iconfont' :class='is_switch ? "icon-pailie":"icon-tupianpailie"' @click='Changswitch'>
</view> </view>
</view> </view>
<view class='nav acea-row row-middle'> <view class='nav acea-row row-middle'>
<view class='item' :class='title ? "font-color":""' @click='set_where(1)'>{{title ? title:'默认'}}</view> <view class='item' :class='title ? "font-color":""' @click='set_where(1)'>{{title ? title:'默认'}}</view>
<view class='item' @click='set_where(2)'> <view class='item' @click='set_where(2)'>
价格 价格
<image v-if="price==1" src='../../static/images/up.png'></image> <image v-if="price === 1" src='../../static/images/up.png'></image>
<image v-else-if="price==2" src='../../static/images/down.png'></image> <image v-else-if="price === 2" src='../../static/images/down.png'></image>
<image v-else src='../../static/images/horn.png'></image> <image v-else src='../../static/images/horn.png'></image>
</view> </view>
<view class='item' @click='set_where(3)'> <view class='item' @click='set_where(3)'>
销量 销量
<image v-if="stock==1" src='../../static/images/up.png'></image> <image v-if="stock === 1" src='../../static/images/up.png'></image>
<image v-else-if="stock==2" src='../../static/images/down.png'></image> <image v-else-if="stock === 2" src='../../static/images/down.png'></image>
<image v-else src='../../static/images/horn.png'></image> <image v-else src='../../static/images/horn.png'></image>
</view> </view>
<!-- down --> <!-- down -->
<view class='item' :class='nows ? "font-color":""' @click='set_where(4)'>新品</view> <view class='item' :class='nows ? "font-color":""' @click='set_where(4)'>新品</view>
</view> </view>
<view :class='is_switch==true?"":"listBox"' v-if="productList.length>0"> <view :class='is_switch?"":"listBox"' v-if="productList.length > 0">
<view class='list acea-row row-between-wrapper' :class='is_switch==true?"":"on"'> <view class='list acea-row row-between-wrapper' :class='is_switch?"":"on"'>
<view class='item' :class='is_switch==true?"":"on"' hover-class='none' <view class='item' :class='is_switch?"":"on"' hover-class='none'
v-for="(item,index) in productList" :key="index" @click="godDetail(item)"> v-for="(item,index) in productList" :key="index" @click="godDetail(item)">
<view class='pictrue' :class='is_switch==true?"":"on"'> <view class='pictrue' :class='is_switch?"":"on"'>
<image :src='item.image' :class='is_switch==true?"":"on"'></image> <image :src='item.picUrl' :class='is_switch?"":"on"'></image>
<span class="pictrue_log_class" <span class="pictrue_log_class"
:class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'" :class="is_switch ? 'pictrue_log_big' : 'pictrue_log'"
v-if="item.activityH5 && item.activityH5.type === '1'">秒杀</span> v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 1">秒杀</span>
<span class="pictrue_log_class" <span class="pictrue_log_class"
:class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'" :class="is_switch ? 'pictrue_log_big' : 'pictrue_log'"
v-if="item.activityH5 && item.activityH5.type === '2'">砍价</span> v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 2">砍价</span>
<span class="pictrue_log_class" <span class="pictrue_log_class"
:class="is_switch === true ? 'pictrue_log_big' : 'pictrue_log'" :class="is_switch ? 'pictrue_log_big' : 'pictrue_log'"
v-if="item.activityH5 && item.activityH5.type === '3'">拼团</span> v-if="item.activityList && item.activityList[0] && item.activityList[0].type === 3">拼团</span>
</view> </view>
<view class='text' :class='is_switch==true?"":"on"'> <view class='text' :class='is_switch?"":"on"'>
<view class='name line1'>{{item.storeName}}</view> <view class='name line1'>{{item.name}}</view>
<view class='money font-color' :class='is_switch==true?"":"on"'>￥<text <view class='money font-color' :class='is_switch?"":"on"'>￥<text
class='num'>{{item.price}}</text></view> class='num'>{{ fen2yuan(item.price) }}</text></view>
<view class='vip acea-row row-between-wrapper' :class='is_switch==true?"":"on"'> <view class='vip acea-row row-between-wrapper' :class='is_switch?"":"on"'>
<view class='vip-money' v-if="item.vip_price && item.vip_price > 0">￥{{item.vip_price}} <view class='vip-money' v-if="item.vipPrice > 0">￥{{ fen2yuan(item.vipPrice) }}
<image src='../../static/images/vip.png'></image> <image src='../../static/images/vip.png'></image>
</view> </view>
<view>已售{{Number(item.sales) + Number(item.ficti) || 0}}{{item.unitName}}</view> <view>已售 {{ item.salesCount || 0}} {{item.unitName}}</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'> <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} <text class='loading iconfont icon-jiazai' :hidden='!loading'/> {{loadTitle}}
</view> </view>
</view> </view>
</view> </view>
<view class='noCommodity' v-if="productList.length==0 && where.page > 1"> <view class='noCommodity' v-if="productList.length === 0 && where.pageNo > 1">
<view class='pictrue'> <view class='pictrue'>
<image src='../../static/images/noShopper.png'></image> <image src='../../static/images/noShopper.png'></image>
</view> </view>
<recommend :hostProduct="hostProduct"></recommend> <recommend :hostProduct="hostProduct" />
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import {
getProductslist,
getProductHot
} from '@/api/store.js';
import recommend from '@/components/recommend'; import recommend from '@/components/recommend';
import { import { mapGetters } from "vuex";
mapGetters import { goShopDetail } from '@/libs/order.js'
} from "vuex"; import * as ProductSpuApi from '@/api/product/spu.js';
import { import * as PromotionActivityApi from '@/api/promotion/activity.js';
goShopDetail import * as ProductUtil from '@/utils/product.js';
} from '@/libs/order.js' import * as Util from '@/utils/util.js';
export default { export default {
computed: mapGetters(['uid']), computed: mapGetters(['uid']),
components: { components: {
recommend recommend
@ -93,14 +88,14 @@
return { return {
productList: [], productList: [],
is_switch: true, is_switch: true,
where: { where: { // 筛选条件
keyword: '', keyword: '',
priceOrder: '', sortField: '',
salesOrder: '', sortAsc: '',
news: 0, recommendType: '',
page: 1, pageNo: 1,
limit: 20, pageSize: 20,
cid: 0, categoryId: 0,
}, },
price: 0, price: 0,
stock: 0, stock: 0,
@ -109,6 +104,8 @@
loading: false, loading: false,
loadTitle: '加载更多', loadTitle: '加载更多',
title: '', title: '',
// ========== 热门商品 ==========
hostProduct: [], hostProduct: [],
hotPage: 1, hotPage: 1,
hotLimit: 10, hotLimit: 10,
@ -116,7 +113,7 @@
}; };
}, },
onLoad: function(options) { onLoad: function(options) {
this.$set(this.where, 'cid', options.cid || 0); this.$set(this.where, 'categoryId', options.cid || 0);
this.title = options.title || ''; this.title = options.title || '';
this.$set(this.where, 'keyword', options.searchValue || ''); this.$set(this.where, 'keyword', options.searchValue || '');
this.get_product_list(); this.get_product_list();
@ -141,47 +138,32 @@
}) })
}, },
Changswitch: function() { Changswitch: function() {
let that = this; this.is_switch = !this.is_switch
that.is_switch = !that.is_switch
}, },
searchSubmit: function(e) { searchSubmit: function(e) {
let that = this; this.$set(this.where, 'keyword', e.detail.value);
that.$set(that.where, 'keyword', e.detail.value); this.loadend = false;
that.loadend = false; this.$set(this.where, 'pageNo', 1)
that.$set(that.where, 'page', 1)
this.get_product_list(true); this.get_product_list(true);
}, },
/** /**
* 获取我的推荐 * 点击事件处理
*/ */
get_host_product: function() {
let that = this;
if (that.hotScroll) return
getProductHot(
that.hotPage,
that.hotLimit,
).then(res => {
that.hotPage++
that.hotScroll = res.data.list.length < that.hotLimit
that.hostProduct = that.hostProduct.concat(res.data.list)
});
},
//点击事件处理
set_where: function(e) { set_where: function(e) {
switch (e) { switch (e) {
case 1: case 1:
return; return;
break; break;
case 2: case 2:
if (this.price == 0) this.price = 1; if (this.price === 0) this.price = 1;
else if (this.price == 1) this.price = 2; else if (this.price === 1) this.price = 2;
else if (this.price == 2) this.price = 0; else if (this.price === 2) this.price = 0;
this.stock = 0; this.stock = 0;
break; break;
case 3: case 3:
if (this.stock == 0) this.stock = 1; if (this.stock === 0) this.stock = 1;
else if (this.stock == 1) this.stock = 2; else if (this.stock === 1) this.stock = 2;
else if (this.stock == 2) this.stock = 0; else if (this.stock === 2) this.stock = 0;
this.price = 0 this.price = 0
break; break;
case 4: case 4:
@ -189,45 +171,100 @@
break; break;
} }
this.loadend = false; this.loadend = false;
this.$set(this.where, 'page', 1); this.$set(this.where, 'pageNo', 1);
this.get_product_list(true); this.get_product_list(true);
}, },
//设置where条件 /**
* 设置where条件
*/
setWhere: function() { setWhere: function() {
if (this.price == 0) this.where.priceOrder = ''; if (this.price === 0 && this.stock === 0) {
else if (this.price == 1) this.where.priceOrder = 'asc'; this.where.sortField = undefined;
else if (this.price == 2) this.where.priceOrder = 'desc'; this.where.sortAsc = undefined;
if (this.stock == 0) this.where.salesOrder = ''; } else if (this.price === 1) {
else if (this.stock == 1) this.where.salesOrder = 'asc'; this.where.sortField = 'price';
else if (this.stock == 2) this.where.salesOrder = 'desc'; this.where.sortAsc = true;
this.where.news = this.nows ? 1 : 0; } else if (this.price === 2) {
this.where.sortField = 'price';
this.where.sortAsc = false;
} else if (this.stock === 1) {
this.where.sortField = 'salesCount';
this.where.sortAsc = true;
} else if (this.stock === 2) {
this.where.sortField = 'salesCount';
this.where.sortAsc = false;
}
this.where.recommendType = this.nows ? 'new' : undefined;
}, },
//查找产品 /**
* 查找产品
*/
get_product_list: function(isPage) { get_product_list: function(isPage) {
let that = this; this.setWhere();
that.setWhere(); if (this.loadend || this.loading) {
if (that.loadend) return; return;
if (that.loading) return; }
if (isPage === true) that.$set(that, 'productList', []); if (isPage === true) {
that.loading = true; this.$set(this, 'productList', []);
that.loadTitle = ''; }
getProductslist(that.where).then(res => { this.loading = true;
let list = res.data.list; this.loadTitle = '';
let productList = that.$util.SplitArray(list, that.productList); ProductSpuApi.getSpuPage(this.where).then(res => {
let loadend = list.length < that.where.limit; const good_list = res.data.list;
that.loadend = loadend; const loadend = good_list.length < this.where.limit;
that.loading = false; this.loadend = loadend;
that.loadTitle = loadend ? '已全部加载' : '加载更多'; this.loading = false;
that.$set(that, 'productList', productList); this.loadTitle = loadend ? '已全部加载' : '加载更多';
that.$set(that.where, 'page', that.where.page + 1); this.$set(this.where, 'pageNo', this.where.pageNo + 1);
if (that.productList.length === 0) { // 设置营销活动
const spuIds = good_list.map(item => item.id);
if (spuIds.length > 0) {
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
ProductUtil.setActivityList(good_list, res.data);
const productList = this.$util.SplitArray(good_list, this.productList)
this.$set(this, 'productList', productList); // 放在此处，避免 Vue 监控不到数组里的元素变化
});
}
// 加载不到商品的情况下，加载热门商品
if (good_list.length === 0 && this.productList.length === 0) {
this.get_host_product(); this.get_host_product();
} }
}).catch(err => { }).catch(err => {
that.loading = false; this.loading = false;
that.loadTitle = '加载更多'; this.loadTitle = '加载更多';
}); });
}, },
/**
* 获取我的推荐
*/
get_host_product: function() {
if (this.hotScroll) {
return
}
ProductSpuApi.getSpuPage({
recommendType: 'hot',
pageNo: this.hotPage,
pageSize: this.hotLimit
}).then(res => {
const good_list = res.data.list;
this.hotPage++
this.hotScroll = good_list.length < this.hotLimit
// 设置营销活动
const spuIds = good_list.map(item => item.id);
if (spuIds.length > 0) {
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
ProductUtil.setActivityList(good_list, res.data);
this.hostProduct = this.hostProduct.concat(good_list) // 放在此处，避免 Vue 监控不到数组里的元素变化
});
}
});
},
fen2yuan(price) {
return Util.fen2yuan(price)
}
}, },
onReachBottom() { onReachBottom() {
if (this.productList.length > 0) { if (this.productList.length > 0) {

20
pages/goods_search/index.vue
View File

@ -153,10 +153,12 @@
this.isbastList = true; this.isbastList = true;
// 设置营销活动 // 设置营销活动
const spuIds = good_list.map(item => item.id); const spuIds = good_list.map(item => item.id);
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => { if (spuIds.length > 0) {
ProductUtil.setActivityList(good_list, res.data); PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
this.bastList = this.$util.SplitArray(good_list, this.bastList); // 放在此处，避免 Vue 监控不到数组里的元素变化 ProductUtil.setActivityList(good_list, res.data);
}); this.bastList = this.$util.SplitArray(good_list, this.bastList); // 放在此处，避免 Vue 监控不到数组里的元素变化
});
}
}).catch(err => { }).catch(err => {
this.loading = false this.loading = false
this.loadTitle = '加载更多' this.loadTitle = '加载更多'
@ -179,10 +181,12 @@
this.hotPage += 1; this.hotPage += 1;
// 设置营销活动 // 设置营销活动
const spuIds = good_list.map(item => item.id); const spuIds = good_list.map(item => item.id);
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => { if (spuIds.length > 0) {
ProductUtil.setActivityList(good_list, res.data); PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
this.hostProduct = this.hostProduct.concat(good_list); // 放在此处，避免 Vue 监控不到数组里的元素变化 ProductUtil.setActivityList(good_list, res.data);
}); this.hostProduct = this.hostProduct.concat(good_list); // 放在此处，避免 Vue 监控不到数组里的元素变化
});
}
}); });
} }
} }

10
pages/index/index.vue
View File

@ -553,10 +553,12 @@
// 设置营销活动 // 设置营销活动
const spuIds = good_list.map(item => item.id); const spuIds = good_list.map(item => item.id);
PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => { if (spuIds.length > 0) {
ProductUtil.setActivityList(good_list, res.data); PromotionActivityApi.getActivityListBySpuIds(spuIds).then(res => {
this.tempArr = this.tempArr.concat(good_list); // 放在此处，避免 Vue 监控不到数组里的元素变化 ProductUtil.setActivityList(good_list, res.data);
}); this.tempArr = this.tempArr.concat(good_list); // 放在此处，避免 Vue 监控不到数组里的元素变化
});
}
}) })
}, },
/** /**

1
utils/product.js
View File

@ -105,5 +105,4 @@ export function setActivityList(spuList, activityListMap) {
spu.activityList = activityListMap[spu.id + ''] || []; spu.activityList = activityListMap[spu.id + ''] || [];
spu.activityList = sortActivityList(spu.activityList, spu); spu.activityList = sortActivityList(spu.activityList, spu);
} }
console.log(spuList);
} }