1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
| <template>
<view>
<!-- 滚动分页 -->
<scroll-view v-if="goodsList.length > 0" scroll-y="true" @scrolltolower="loadMore()"
:style="{ height: scrollH + 'rpx' }">
<view>
<!-- 搜索框 -->
<view class="search-box" @click="toSearchpage">
<uni-search-bar v-model="keyword" :radius="20" bgColor="#F7F7F7"
cancelButton="none"></uni-search-bar>
</view>
<view class="goods-list">
<block v-for="(item,i) in goodsList" :key="i">
<uni-card @click="toGood(item)" margin="20rpx">
<view class="goods-item">
<!-- 左侧盒子 -->
<view class="goods-item-left">
<image v-if="item.pic1Url" mode="aspectFit" slot="cover"
:src="baseUrl + item.pic1Url" class="goods-pic"></image>
<image v-else slot='cover' :src="require(`@/static/images/items/default.png`)"
class="goods-pic"></image>
</view>
<!-- 右侧盒子 -->
<view class="goods-item-right">
<!-- 商品的名称 -->
<view class="goods-name">
【{{item.cateName}}】{{item.itemName}}
</view>
<view>
外部型号：{{item.externalModel}}
</view>
<view>
{{item.itemDescription}}
</view>
<!-- 价格 -->
<view class="goods-info-box">
<!-- <view class="goods-price">¥{{item.itemsPrice|toFixed}}</view> -->
<view v-if="!item.itemsPrice == '待定'" class="goods-price">¥{{item.itemsPrice}}
</view>
</view>
</view>
</view>
</uni-card>
</block>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import {
getItemList
} from "@/api/system/items.js"
import config from '@/config'
export default {
data() {
return {
pages: 1,
//获取滚动距离
scrollH: 0,
// 用户输入的关键词
keyword: '',
// 引入baseUrl
baseUrl: config.baseUrl,
//第几页
pageNum: 0,
goodsList: [],
total: 0,
//默认显示的图片
defaultPic: '../../static/goods/default.png',
// 用于对比是否是最后一页
lastPage: [],
// 是否允许继续滚动
isRock: true
};
},
onLoad(options) {
this.keyword = options.keyword || '';
this.getGoodsList();
},
onShow() {
this.scrollH = this.scrollHs()
},
methods: {
toGood(item) {
this.$tab.navigateTo("/pages/good/index?id=" + item.itemId);
},
toSearchpage() {
this.$tab.navigateTo('/pages/searchPage/index')
},
// 获取开始滚动距离
scrollHs() {
let sys = uni.getSystemInfoSync()
let winWidth = sys.windowWidth
let winrate = 750 / winWidth
let winHeight = parseInt(sys.windowHeight * winrate)
return winHeight - 20
},
// 获取商品
getGoodsList() {
this.pageNum++
getItemList(this.keyword, this.pageNum).then(res => {
if (res.code === 200) {
// 判断上一次查询和这次的查询是否一样
if(this.lastPage.length > 0 && this.lastPage[0].itemId===res.rows[0].itemId){
this.isRock = false
}else{
this.lastPage = []
res.rows.map(item => {
this.goodsList.push(item)
this.lastPage.push(item)
})
}
} else {
uni.showToast({
title: "请求出错",
icon: "error"
})
}
})
},
loadMore() {
if (this.isRock) {
this.getGoodsList()
}
}
},
filters: { // 将 filters 配置放在组件内部
toFixed(num) {
return Number(num).toFixed(2)
}
}
};
</script>
<style lang="scss">
.search-box {
background-color: #55aaff;
position: sticky;
z-index: 999;
}
.goods-item {
display: flex;
padding: 10px 5px;
// border-bottom: 1px solid #f0f0f0;
.goods-item-left {
margin-right: 5xp;
.goods-pic {
width: 100px;
height: 100px;
display: block;
}
}
.goods-item-right {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 10rpx;
.goods-name {
font-size: 13px;
}
.goods-info-box {
.goods-price {
color: #c00000;
font-size: 16px;
}
}
}
}
</style>
|
