Skip to content

Commit dac039d

Browse files
gookinggooking
committed
vop商品列表
1 parent 3474bee commit dac039d

5 files changed

Lines changed: 323 additions & 16 deletions

File tree

‎node_modules/apifm-uniapp/index.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,12 @@
5555
"navigationBarTitleText":"商品列表"
5656
}
5757
},
58+
{
59+
"path" : "pages/goods/list-vop",
60+
"style": {
61+
"navigationBarTitleText":"商品列表"
62+
}
63+
},
5864
{
5965
"path" : "pages/goods/fav",
6066
"style": {

‎pages/goods/list-vop.vue‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
<template>
2+
<view>
3+
<u-sticky bgColor="#FFFFFF">
4+
<view class="search">
5+
<u-search placeholder="输入关键词搜索" v-model="kw" :showAction="false" @search="search">
6+
</u-search>
7+
<!-- #ifndef H5 || MP-KUAISHOU -->
8+
<view class="scan" @click="searchscan">
9+
<u-icon name="scan" size="48rpx"></u-icon>
10+
</view>
11+
<!-- #endif -->
12+
</view>
13+
<u-tabs :list="tabs" lineColor="#e64340" @click="paixu"></u-tabs>
14+
</u-sticky>
15+
<page-box-empty v-if="!goods || goods.length == 0" title="暂无商品" sub-title="当前类目下无法帮你找到合适的商品" :show-btn="true" />
16+
<view v-if="showmod == 0" class="goodslist">
17+
<view v-for="(item, index) in goods" :key="index" class="list" @click="toDetailsTap">
18+
<image :src="item.pic" class="image" mode="aspectFill" lazy-load="true" @click="goDetail(item)" />
19+
<view class="r">
20+
<view class="goods-title" @click="goDetail(item)">{{item.name}}</view>
21+
<u--text v-if="item.characteristic" class="goods-title" :text="item.characteristic" size="28rpx"
22+
color="#c95060"></u--text>
23+
<view class="price-score">
24+
<view v-if="item.minPrice" class="item"><text>¥</text>{{item.minPrice}}</view>
25+
<view v-if="item.minScore" class="item"><text>∮</text>{{item.minScore}}</view>
26+
</view>
27+
</view>
28+
29+
</view>
30+
</view>
31+
<view v-else>
32+
<view class="goods-container">
33+
<view v-for="(item, index) in goods" :key="index" class="goods-box" bindtap="toDetailsTap">
34+
<view class="img-box">
35+
<image :src="item.pic" class="image" mode="aspectFill" lazy-load="true" @click="goDetail(item)" />
36+
</view>
37+
<u--text class="goods-title" :text="item.name" :lines="3" size="28rpx" color="#333" @click="goDetail(item)"></u--text>
38+
<u--text v-if="item.characteristic" class="goods-title" :text="item.characteristic" size="28rpx"
39+
color="#c95060"></u--text>
40+
<view class="price-score">
41+
<view v-if="item.minPrice" class="item"><text>¥</text>{{item.minPrice}}</view>
42+
<view v-if="item.minScore" class="item"><text>∮</text>{{item.minScore}}</view>
43+
</view>
44+
</view>
45+
</view>
46+
</view>
47+
</view>
48+
</template>
49+
50+
<script>
51+
export default {
52+
data() {
53+
return {
54+
cid1: '',
55+
cid2: '',
56+
kw: '',
57+
orderBy: '',
58+
categoryId: '',
59+
page: 1,
60+
tabs: [
61+
{
62+
code: '',
63+
name: '综合',
64+
},
65+
{
66+
code: 'winsdate_desc',
67+
name: '新品',
68+
},
69+
{
70+
code: 'sort_totalsales15_desc',
71+
name: '销售'
72+
},
73+
{
74+
code: 'price_asc',
75+
name: '价格'
76+
},
77+
],
78+
imageDomain: undefined,
79+
goods: undefined,
80+
showmod: 1
81+
}
82+
},
83+
created() {
84+
85+
},
86+
mounted() {
87+
88+
},
89+
onReady() {
90+
91+
},
92+
onLoad(e) {
93+
this.kw = e.kw ? e.kw : ''
94+
this.cid1 = e.cid1 ? e.cid1 : ''
95+
this.cid2 = e.cid2 ? e.cid2 : ''
96+
this._goods()
97+
},
98+
onShow() {
99+
100+
},
101+
onShareAppMessage(e) {
102+
return {
103+
title: '"' + this.sysconfigMap.mallName + '" ' + this.sysconfigMap.share_profile,
104+
path: '/pages/index/index?inviter_id=' + this.uid
105+
}
106+
},
107+
onReachBottom() {
108+
this.page += 1
109+
this._goods()
110+
},
111+
methods: {
112+
search(v) {
113+
this.kw = v
114+
this.page = 1
115+
this._goods()
116+
},
117+
searchscan() {
118+
uni.scanCode({
119+
scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
120+
success: res => {
121+
this.kw = res.result
122+
this.page = 1
123+
this._goods()
124+
}
125+
})
126+
},
127+
paixu(item) {
128+
this.orderBy = this.tabs[item.index].code
129+
this.page = 1
130+
this._goods()
131+
},
132+
async _goods() {
133+
uni.showLoading({
134+
title: ''
135+
})
136+
// https://www.yuque.com/apifm/nu0f75/gqmtgw
137+
const res = await this.$wxapi.jdvopGoodsList({
138+
page: this.page,
139+
keyword: this.kw,
140+
sortType: this.orderBy ? this.orderBy : '',
141+
cid1: this.cid1 ? this.cid1 : '',
142+
cid2: this.cid2 ? this.cid2 : '',
143+
})
144+
uni.hideLoading()
145+
if (res.code == 0) {
146+
this.imageDomain = res.data.imageDomain
147+
res.data.result.forEach(ele => {
148+
ele.pic = this.imageDomain + ele.pic
149+
ele.name = ele.skuName
150+
ele.minPrice = ele.priceSale
151+
})
152+
if (this.page == 1) {
153+
this.goods = res.data.result
154+
} else {
155+
this.goods = this.goods.concat(res.data.result)
156+
}
157+
} else {
158+
if (this.page == 1) {
159+
this.goods = null
160+
} else {
161+
uni.showToast({
162+
title: '没有更多了～',
163+
icon: 'none'
164+
})
165+
}
166+
}
167+
},
168+
goDetail(item) {
169+
uni.navigateTo({
170+
url: '/pages/goods/detail?id=' + item.id
171+
})
172+
}
173+
}
174+
}
175+
</script>
176+
<style scoped lang="scss">
177+
.search {
178+
padding: 8rpx;
179+
display: flex;
180+
align-items: center;
181+
.scan {
182+
padding: 0 16rpx;
183+
}
184+
}
185+
.goodslist {
186+
.list {
187+
margin: 20rpx;
188+
border-radius: 16rpx;
189+
display: flex;
190+
padding: 20rpx;
191+
.image {
192+
width: 260rpx;
193+
height: 260rpx;
194+
flex-shrink: 0;
195+
border-radius: 16rpx;
196+
}
197+
.r {
198+
margin-left: 32rpx;
199+
.goods-title {
200+
color: #333;
201+
font-size: 28rpx;
202+
}
203+
.label {
204+
color: #e64340;
205+
font-size: 24rpx;
206+
display: flex;
207+
align-items: flex-start;
208+
margin-top: 8rpx;
209+
text {
210+
margin-left: 8rpx;
211+
}
212+
}
213+
}
214+
.count-down {
215+
background: rgba(250, 195, 198, 0.3);
216+
border-radius: 5rpx;
217+
font-size: 14rpx;
218+
color: red;
219+
font-weight: 400;
220+
padding: 6rpx 16rpx;
221+
margin-top: 6rpx;
222+
text-align: center;
223+
border-radius: 10rpx;
224+
}
225+
}
226+
.price-box {
227+
display: flex;
228+
justify-content: space-between;
229+
align-items: center;
230+
.msbtn {
231+
width: 170rpx;
232+
height: 60rpx;
233+
background: linear-gradient(156deg, #FF7863 0%, #FF211A 100%);
234+
border-radius: 34rpx;
235+
border: none !important;
236+
line-height: 60rpx !important;
237+
font-size: 13px !important;
238+
}
239+
.price {
240+
color: #e64340;
241+
font-size: 40rpx;
242+
margin-top: 12rpx;
243+
padding-right: 32rpx;
244+
text {
245+
margin-left: 16rpx;
246+
color: #666666;
247+
font-size: 26rpx;
248+
text-decoration: line-through;
249+
}
250+
}
251+
}
252+
}
253+
.goods-container {
254+
display: flex;
255+
justify-content: space-between;
256+
flex-wrap: wrap;
257+
box-sizing: content-box;
258+
padding: 0 24rpx;
259+
.goods-box {
260+
width: 339rpx;
261+
background-color: #fff;
262+
overflow: hidden;
263+
margin-top: 24rpx;
264+
border-radius: 5px;
265+
border: 1px solid #D1D1D1;
266+
padding-bottom: 10rpx;
267+
.img-box {
268+
width: 339rpx;
269+
height: 339rpx;
270+
overflow: hidden;
271+
image {
272+
width: 339rpx;
273+
height: 339rpx;
274+
}
275+
}
276+
.goods-title {
277+
padding: 0 4rpx;
278+
}
279+
.goods-price-container {
280+
display: flex;
281+
align-items: baseline;
282+
}
283+
.goods-price {
284+
overflow: hidden;
285+
font-size: 34rpx;
286+
color: #F20C32;
287+
margin-left: 24rpx;
288+
}
289+
.goods-price2 {
290+
overflow: hidden;
291+
font-size: 26rpx;
292+
color: #aaa;
293+
text-decoration: line-through;
294+
margin-left: 20rpx;
295+
}
296+
}
297+
}
298+
</style>

‎pages/goods/list.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</view>
1313
<u-tabs :list="tabs" lineColor="#e64340" @click="paixu"></u-tabs>
1414
</u-sticky>
15-
<u-empty v-if="!goods || goods.length == 0" mode="list" text="暂无商品" marginTop="200rpx" />
15+
<page-box-empty v-if="!goods || goods.length == 0" title="暂无商品" sub-title="当前类目下无法帮你找到合适的商品" :show-btn="true" />
1616
<view v-if="showmod == 0" class="goodslist">
1717
<view v-for="(item, index) in goods" :key="index" class="list" @click="toDetailsTap">
1818
<image :src="item.pic" class="image" mode="aspectFill" lazy-load="true" @click="goDetail(item)" />
@@ -144,7 +144,9 @@
144144
this.goods = this.goods.concat(res.data.result)
145145
}
146146
} else {
147-
if (this.page != 1) {
147+
if (this.page == 1) {
148+
this.goods = null
149+
} else {
148150
uni.showToast({
149151
title: '没有更多了～',
150152
icon: 'none'

‎pages/index/index.vue‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<template>
22
<view class="index">
3-
<u-sticky bgColor="#00FF00"></u-sticky><!-- TODO h5 下会把内容遮住 -->
4-
<view class="top-box" :style="headerMarginTopStyle">
5-
<view class="t">{{ sysconfigMap.mallName }}</view>
6-
<view class="search">
7-
<u-search placeholder="输入关键词搜索" v-model="kw" :showAction="false" :disabled="true" @click="goSearch">
8-
</u-search>
3+
<u-sticky bgColor="#FFFFFF" customNavHeight="0">
4+
<view class="top-box" :style="headerMarginTopStyle">
5+
<view class="t">{{ sysconfigMap.mallName }}</view>
6+
<view class="search">
7+
<u-search placeholder="输入关键词搜索" v-model="kw" :showAction="false" :disabled="true" @click="goSearch">
8+
</u-search>
9+
</view>
10+
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
11+
<view class="mp-btn" :style="menuButtonInfoStyle"></view>
12+
<!-- #endif -->
913
</view>
10-
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ -->
11-
<view class="mp-btn" :style="menuButtonInfoStyle"></view>
12-
<!-- #endif -->
13-
</view>
14-
14+
</u-sticky>
1515
<u-cell v-if="shopInfo" icon="map" :title="shopInfo.name" value="切换门店" url="/pages/shop/select" clickable
1616
isLink></u-cell>
1717
<view class="swiper">
@@ -181,7 +181,7 @@
181181
export default {
182182
data() {
183183
return {
184-
headerMarginTopStyle: 'margin-top:32rpx',
184+
headerMarginTopStyle: 'margin-top:0',
185185
kw: '',
186186
menuButtonInfoStyle: '',
187187
shopInfo: undefined,
@@ -449,6 +449,7 @@
449449
<style scoped lang="scss">
450450
.index {
451451
.top-box {
452+
padding: 16rpx 8rpx;
452453
display: flex;
453454
align-items: center;
454455
background-color: #FFFFFF;

0 commit comments

Comments
 (0)