刘文博 / gulu-vue

Blame view

src/pages/index/index.vue 9.52 KB
edit raw normal view history
0db291810   BigBoss   “-mcomfirmOder页面 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
  <template>
  	<view class="content">
  		<view class="header">
  			<!-- 搜索-->
  			<view class="searchBar">
  				<icon class="searchIcon" type="search" size="14"></icon>
  				<input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
  			</view>
  			
  			<!-- 筛选栏-->
  			<view class="screenBar">
  				<view  v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"  >
  					<view class="screenItem"  v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
  						{{ item.text }}<icon type="info" size="14"></icon>
  					</view>
  					<view class="screenItem"  v-bind:class="{ active: current === item.current }" v-if="item.current === 4"  @click="showDrawer('showRight')">
  							{{ item.text }}<icon type="info" size="14"></icon>
  					</view>
  					<view v-if="item.current !== 2&&item.current!==4">
  						<view class="screenItem"  v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
  					</view>
  				</view>
  			</view>
  		</view>
8cfe981a3   BigBoss   修改 
25
 
  		<Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
0db291810   BigBoss   “-mcomfirmOder页面 
26
27
28
 
  			<view class="close">
  				<view  @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
  			</view>
8cfe981a3   BigBoss   修改 
29
 
  		</Uni-drawer>
0db291810   BigBoss   “-mcomfirmOder页面 
30
31
32
33
34
35
36
 
  		
  		
  		
  		<!-- 筛选菜单-->
  		<view class="content-wrap">
  			<view>
  				<HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
0db291810   BigBoss   “-mcomfirmOder页面 
37
38
39
 
  				<!-- 商品列表 -->
  				<view class="goods-list">
  					<view class="product-list">
8cfe981a3   BigBoss   修改 
40
41
 
  						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods.goods_id)">
  							<image mode="widthFix" :src="goods.img" ></image>
0db291810   BigBoss   “-mcomfirmOder页面 
42
43
 
  							<view class="name">{{goods.name}}</view>
  							<view class="info">
8cfe981a3   BigBoss   修改 
44
 
  								<view class="priceBox">
0db291810   BigBoss   “-mcomfirmOder页面 
45
 
  								<view class="price">{{goods.price}}</view>
8cfe981a3   BigBoss   修改 
46
47
 
  								<view class="originCost">{{goods.originCost}}</view>
  								</view>
0db291810   BigBoss   “-mcomfirmOder页面 
48
49
50
51
52
53
54
55
56
57
58
59
60
 
  								<view class="slogan">{{goods.slogan}}</view>
  							</view>
  						</view>
  					</view>
  					<view class="loading-text">{{loadingText}}</view>
  				</view>
  				
  			</view>
  		</view>
  	</view>
  </template>
  
  <script>
8cfe981a3   BigBoss   修改 
61
 
  	import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue";
0db291810   BigBoss   “-mcomfirmOder页面 
62
63
64
65
 
  	import HMfilterDropdown  from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
  	import data from '@/common/data.js';//筛选菜单数据
  	export default {
  		components: {
8cfe981a3   BigBoss   修改 
66
 
  			'UniDrawer':UniDrawer,
0db291810   BigBoss   “-mcomfirmOder页面 
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
              'HMfilterDropdown':HMfilterDropdown
  			},
  		data() {
  			return {
  				screenItems: [
  					{current:0,text:'全部',hasIcon:false},
  					{current:1,text:'销量',hasIcon:false},
  					{current:2,text:'价格',hasIcon:true},
  					{current:3,text:'折扣',hasIcon:false},
  					{current:4,text:'筛选',hasIcon:true},
  					],
  				current: 0,
  				showRight: false,
  				indexArr:'',
  				valueArr:'',
  				//商品数据
  				goodsList:[
8cfe981a3   BigBoss   修改 
84
85
86
87
88
89
90
91
92
93
 
  					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
  					{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
0db291810   BigBoss   “-mcomfirmOder页面 
94
95
96
97
98
99
100
101
102
103
104
105
106
 
  				],
  				loadingText:"正在加载...",
  				filterDropdownValue:[],
  				filterData:[]
  			}
  		},
  		filters: {
  		　　outData(value) {
  		　　　　return JSON.stringify(value);
  		　　}
  		},
  		onLoad: function () {
  			//定时器模拟ajax异步请求数据
8cfe981a3   BigBoss   修改 
107
108
109
110
111
112
113
114
115
 
  			// setTimeout(()=>{
  			// 	//传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
  			// 	this.filterDropdownValue = [
  			// 		[1,1,0],				//第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
  			// 		[null,null],			//第1个菜单选中 都不选中
  			// 		[1],					//第2个菜单选中 一级菜单的第1项
  			// 		[[0],[1,2,7],[1,0]],	//筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
  			// 		[[0],[1],[1]],			//单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
  			// 	];
0db291810   BigBoss   “-mcomfirmOder页面 
116
 
  				this.filterData = data;
8cfe981a3   BigBoss   修改 
117
118
 
  			// },100);
  			// 模拟ajax请求子菜单数据。
0db291810   BigBoss   “-mcomfirmOder页面 
119
 
  			// setTimeout(()=>{
8cfe981a3   BigBoss   修改 
120
 
  			// 	this.filterData[1].submenu[0].submenu = [{"name": "附近","value": "附近"},{"name": "1km","value": "1km"},{"name": "2km","value": "2km"},{"name": "3km","value": "3km"},{"name": "4km","value": "4km"},{"name": "5km","value": "5km"}];
0db291810   BigBoss   “-mcomfirmOder页面 
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
 
  			// },5000)
  		},
  		methods: {
  			showDrawer(e) {
  				this.$refs[e].open()
  			},
  			closeDrawer(e) {
  				this.$refs[e].close()
  			},
  			change(e, type) {
  				this[type] = e
  			},
  			onClickItem(e) {
  				if (this.current !== e) {
  					this.current = e;
  				}
  			},
  			dropDown(){
  				console.log('下拉')
  			},
  			//接收菜单结果
  			confirm(e){
  				this.indexArr = e.index;
  				this.valueArr = e.value;
  				return;
  				console.log('修改菜单');
  				this.filterData[4].submenu[1] = {
  						"name": "项目2",
  						"submenu": [
  							
  						]
  					}
8cfe981a3   BigBoss   修改 
153
154
155
 
  			},
  			toGoods(id){
  				console.log(id)
0db291810   BigBoss   “-mcomfirmOder页面 
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
  			}
  		},
  		onNavigationBarButtonTap(e) {
  			this.showRight = !this.showRight
  		},
  		//上拉加载，
  		onReachBottom(){
  			console.log('到底加载')
  			let len = this.goodsList.length;
  			if(len>=30){
  				this.loadingText="~~到底了~~";
  				return false;
  			}else{
  				this.loadingText="正在加载...";
  			}
  			let end_goods_id = this.goodsList[len-1].goods_id;
  			for(let i=1;i<=10;i++){
  				let goods_id = end_goods_id+i;
8cfe981a3   BigBoss   修改 
174
 
  				let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg',name: '商品名称', originCost:'￥198' ,price: '￥168', slogan:'1235人付款' };
0db291810   BigBoss   “-mcomfirmOder页面 
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
 
  				this.goodsList.push(p);
  			}
  		},
  	}
  </script>
  
  <style lang="scss">
  	.content {
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  		background-color: #F7F6F6;
  	}
  	.header{
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  		justify-content: center;
  		background-color: #F7F6F6;
  		height:178rpx ;
  		width: 100%;
  		z-index: 999;
  		position: fixed;
  		top: 0;
8cfe981a3   BigBoss   修改 
200
 
  		left: 0;
0db291810   BigBoss   “-mcomfirmOder页面 
201
202
203
204
 
  	}
  	.searchBar {
  		width: 670rpx;
  		display: flex;
0db291810   BigBoss   “-mcomfirmOder页面 
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
 
  		justify-content: center;
  		align-items: center;
  		box-sizing: border-box;
  		padding: 0rpx 16rpx;
  		border: 1px solid #FF6B4A;
  		border-radius: 8rpx;
  		background-color: #ffffff;
  	}
  	
  	.searchIpt {
  		height: 68rpx;
  		width: 670rpx;
  		padding: 16rpx;
  		font-size: 28rpx;
  		box-sizing: border-box;
  	}
  	.screenBar{
0db291810   BigBoss   “-mcomfirmOder页面 
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
 
  		width: 670rpx;
  		height: 110rpx;
  		display: flex;
  		flex-direction: row;
  		justify-content: space-between;
  		align-items: center;
  		color: #333333;
  		font-size: 32rpx;
  	}
  	.active{
  		color: #FF6B4A;
  	}
  	.screenItem{
  		display: flex;
  		justify-content: center;
  		align-items: center;
  	}
  	.content-wrap{
  		width: 100%;
  		background-color: #FFFFFF;
  	}
  	
  	.HMfilterDropdown{
0db291810   BigBoss   “-mcomfirmOder页面 
245
246
 
  		top: 178rpx !important;
  	}
8cfe981a3   BigBoss   修改 
247
0db291810   BigBoss   “-mcomfirmOder页面 
248
 
  	.goods-list{
8cfe981a3   BigBoss   修改 
249
 
  		padding-top: 286rpx;
0db291810   BigBoss   “-mcomfirmOder页面 
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
 
  		.loading-text{
  			width: 100%;
  			display: flex;
  			justify-content: center;
  			align-items: center;
  			height: 30px;
  			color: #979797;
  			font-size: 12px;
  		}
  		.product-list{
  			width: 92%;
  			padding: 0 4% 3vw 4%; 
  			display: flex;
  			justify-content: space-between;
  			flex-wrap: wrap;
  			.product{
  				width: 48%;
  				border-radius: 10px;
  				background-color: #fff;
  				margin: 0 0 7px 0;
  				box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  				image{
  					width: 100%;
  					border-radius: 10px 10px 0 0;
8cfe981a3   BigBoss   修改 
274
 
  					height: 184rpx;
0db291810   BigBoss   “-mcomfirmOder页面 
275
276
277
278
279
280
281
282
283
 
  				}
  				.name{
  					width: 92%;
  					padding: 5px 4%;
  					display: -webkit-box;
  					-webkit-box-orient: vertical;
  					-webkit-line-clamp: 2;
  					text-align: justify;
  					overflow: hidden;
8cfe981a3   BigBoss   修改 
284
285
 
  					font-size: 24rpx;
  					color: #333333;
0db291810   BigBoss   “-mcomfirmOder页面 
286
287
288
289
 
  				}
  				.info{
  					display: flex;
  					justify-content: space-between;
8cfe981a3   BigBoss   修改 
290
 
  					align-items: center;
0db291810   BigBoss   “-mcomfirmOder页面 
291
292
 
  					width: 92%;
  					padding: 5px 4% 5px 4%;
8cfe981a3   BigBoss   修改 
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
 
  					.priceBox{
  						display: flex;
  						justify-content: space-between;
  						align-items: center;
  						.price{
  							color: #EB5D3B;
  							font-size: 28rpx;
  							font-weight: 600;
  							margin-right: 10rpx;
  						}
  						.originCost{
  							text-decoration:line-through;
  							color: #999999;
  							font-size: 20rpx;
  						}
0db291810   BigBoss   “-mcomfirmOder页面 
309
310
 
  					}
  					.slogan{
8cfe981a3   BigBoss   修改 
311
312
 
  						color: #999999;
  						font-size: 20rpx;
0db291810   BigBoss   “-mcomfirmOder页面 
313
314
315
316
317
318
319
 
  					}
  				}
  			}
  		}
  	}
  
  </style>