刘文博 / gulu-vue

Blame view

src/pages/index/index.vue 8.24 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">
fb85b244c   BigBoss   user页面 
40
41
 
  						<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
  							<Card :goods = "goods"></Card>
0db291810   BigBoss   “-mcomfirmOder页面 
42
43
44
45
46
47
48
49
50
51
52
 
  						</view>
  					</view>
  					<view class="loading-text">{{loadingText}}</view>
  				</view>
  				
  			</view>
  		</view>
  	</view>
  </template>
  
  <script>
4de4be344   喻鹏   客服在线和我的订单-待付款 
53
 
  	import UniDrawer from "@/components/uni-drawer/uni-drawer.vue";
fb85b244c   BigBoss   user页面 
54
 
  	import Card from "../../components/Card/Card.vue"
0db291810   BigBoss   “-mcomfirmOder页面 
55
56
57
58
 
  	import HMfilterDropdown  from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
  	import data from '@/common/data.js';//筛选菜单数据
  	export default {
  		components: {
8cfe981a3   BigBoss   修改 
59
 
  			'UniDrawer':UniDrawer,
fb85b244c   BigBoss   user页面 
60
61
 
              'HMfilterDropdown':HMfilterDropdown,
  			'Card':Card
0db291810   BigBoss   “-mcomfirmOder页面 
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
  			},
  		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   修改 
78
79
80
81
82
83
84
85
86
87
 
  					{ 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页面 
88
89
90
91
92
93
94
95
96
97
98
99
100
 
  				],
  				loadingText:"正在加载...",
  				filterDropdownValue:[],
  				filterData:[]
  			}
  		},
  		filters: {
  		　　outData(value) {
  		　　　　return JSON.stringify(value);
  		　　}
  		},
  		onLoad: function () {
  			//定时器模拟ajax异步请求数据
8cfe981a3   BigBoss   修改 
101
102
103
104
105
106
107
108
109
 
  			// 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页面 
110
 
  				this.filterData = data;
8cfe981a3   BigBoss   修改 
111
112
 
  			// },100);
  			// 模拟ajax请求子菜单数据。
0db291810   BigBoss   “-mcomfirmOder页面 
113
 
  			// setTimeout(()=>{
8cfe981a3   BigBoss   修改 
114
 
  			// 	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页面 
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
 
  			// },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": [
  							
  						]
  					}
  			}
  		},
  		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   修改 
165
 
  				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页面 
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
 
  				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   修改 
191
 
  		left: 0;
0db291810   BigBoss   “-mcomfirmOder页面 
192
193
194
195
 
  	}
  	.searchBar {
  		width: 670rpx;
  		display: flex;
0db291810   BigBoss   “-mcomfirmOder页面 
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
  		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页面 
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
 
  		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页面 
236
237
 
  		top: 178rpx !important;
  	}
8cfe981a3   BigBoss   修改 
238
0db291810   BigBoss   “-mcomfirmOder页面 
239
 
  	.goods-list{
8cfe981a3   BigBoss   修改 
240
 
  		padding-top: 286rpx;
0db291810   BigBoss   “-mcomfirmOder页面 
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
 
  		.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%;
fb85b244c   BigBoss   user页面 
258
259
260
 
  				margin: 0 0 20rpx 0;
  				background: #FFFFFF;
  				border: 1px solid #F2F2F2;
0db291810   BigBoss   “-mcomfirmOder页面 
261
262
263
264
265
 
  			}
  		}
  	}
  
  </style>