刘文博 / gulu-vue

Download as
Browse Code »

Commit a4377daecca4d5272fa6bf437fd5aacb38c4019a

Authored by Adam
1 parent 087870850b
Exists in master

go

Showing 1 changed file with 2 additions and 2 deletions   Show diff stats
src/pages/index/index.vue
Diff comments   View file @a4377da
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="header"> 3 <view class="header">
4 <!-- 搜索--> 4 <!-- 搜索-->
5 <view class="searchBar"> 5 <view class="searchBar">
6 <icon class="searchIcon" type="search" size="14"></icon> 6 <icon class="searchIcon" type="search" size="14"></icon>
7 <input class="searchIpt" placeholder="老花镜" confirm-type="search"/> 7 <input class="searchIpt" placeholder="老花镜" confirm-type="search"/>
8 </view> 8 </view>
9 9
10 <!-- 筛选栏--> 10 <!-- 筛选栏-->
11 <view class="screenBar"> 11 <view class="screenBar">
12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > 12 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" >
13 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown"> 13 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown">
14 {{ item.text }}<icon type="info" size="14"></icon> 14 {{ item.text }}<icon type="info" size="14"></icon>
15 </view> 15 </view>
16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> 16 <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')">
17 {{ item.text }}<icon type="info" size="14"></icon> 17 {{ item.text }}<icon type="info" size="14"></icon>
18 </view> 18 </view>
19 <view v-if="item.current !== 2&&item.current!==4"> 19 <view v-if="item.current !== 2&&item.current!==4">
20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> 20 <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view>
21 </view> 21 </view>
22 </view> 22 </view>
23 </view> 23 </view>
24 </view> 24 </view>
25 <Uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> 25 <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')">
26 <view class="close"> 26 <view class="close">
27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> 27 <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view>
28 </view> 28 </view>
29 </Uni-drawer> 29 </uni-drawer>
30 30
31 31
32 32
33 <!-- 筛选菜单--> 33 <!-- 筛选菜单-->
34 <view class="content-wrap"> 34 <view class="content-wrap">
35 <view> 35 <view>
36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> 36 <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown>
37 <!-- 商品列表 --> 37 <!-- 商品列表 -->
38 <view class="goods-list"> 38 <view class="goods-list">
39 <view class="product-list"> 39 <view class="product-list">
40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > 40 <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" >
41 <Card :goods = "goods"></Card> 41 <Card :goods = "goods"></Card>
42 </view> 42 </view>
43 </view> 43 </view>
44 <view class="loading-text">{{loadingText}}</view> 44 <view class="loading-text">{{loadingText}}</view>
45 </view> 45 </view>
46 46
47 </view> 47 </view>
48 </view> 48 </view>
49 </view> 49 </view>
50 </template> 50 </template>
51 51
52 <script> 52 <script>
53 import UniDrawer from "@/components/uni-drawer/uni-drawer.vue"; 53 import UniDrawer from "@/components/uni-drawer/uni-drawer.vue";
54 import Card from "../../components/Card/Card.vue" 54 import Card from "../../components/Card/Card.vue"
55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; 55 import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue";
56 import data from '@/common/data.js';//筛选菜单数据 56 import data from '@/common/data.js';//筛选菜单数据
57 export default { 57 export default {
58 components: { 58 components: {
59 'UniDrawer':UniDrawer, 59 'UniDrawer':UniDrawer,
60 'HMfilterDropdown':HMfilterDropdown, 60 'HMfilterDropdown':HMfilterDropdown,
61 'Card':Card 61 'Card':Card
62 }, 62 },
63 data() { 63 data() {
64 return { 64 return {
65 screenItems: [ 65 screenItems: [
66 {current:0,text:'全部',hasIcon:false}, 66 {current:0,text:'全部',hasIcon:false},
67 {current:1,text:'销量',hasIcon:false}, 67 {current:1,text:'销量',hasIcon:false},
68 {current:2,text:'价格',hasIcon:true}, 68 {current:2,text:'价格',hasIcon:true},
69 {current:3,text:'折扣',hasIcon:false}, 69 {current:3,text:'折扣',hasIcon:false},
70 {current:4,text:'筛选',hasIcon:true}, 70 {current:4,text:'筛选',hasIcon:true},
71 ], 71 ],
72 current: 0, 72 current: 0,
73 showRight: false, 73 showRight: false,
74 indexArr:'', 74 indexArr:'',
75 valueArr:'', 75 valueArr:'',
76 //商品数据 76 //商品数据
77 goodsList:[ 77 goodsList:[
78 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 78 { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
79 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 79 { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
80 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 80 { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
81 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 81 { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
82 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 82 { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
83 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 83 { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
84 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 84 { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
85 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 85 { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
86 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }, 86 { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
87 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' } 87 { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' }
88 ], 88 ],
89 loadingText:"正在加载...", 89 loadingText:"正在加载...",
90 filterDropdownValue:[], 90 filterDropdownValue:[],
91 filterData:[] 91 filterData:[]
92 } 92 }
93 }, 93 },
94 filters: { 94 filters: {
95 　　outData(value) { 95 　　outData(value) {
96 　　　　return JSON.stringify(value); 96 　　　　return JSON.stringify(value);
97 　　} 97 　　}
98 }, 98 },
99 onLoad: function () { 99 onLoad: function () {
100 //定时器模拟ajax异步请求数据 100 //定时器模拟ajax异步请求数据
101 // setTimeout(()=>{ 101 // setTimeout(()=>{
102 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null 102 // //传入defaultSelected的结构不能错，错了就报错运行异常。 不选中的项目传入null
103 // this.filterDropdownValue = [ 103 // this.filterDropdownValue = [
104 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项 104 // [1,1,0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
105 // [null,null], //第1个菜单选中 都不选中 105 // [null,null], //第1个菜单选中 都不选中
106 // [1], //第2个菜单选中 一级菜单的第1项 106 // [1], //第2个菜单选中 一级菜单的第1项
107 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项 107 // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
108 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项 108 // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
109 // ]; 109 // ];
110 this.filterData = data; 110 this.filterData = data;
111 // },100); 111 // },100);
112 // 模拟ajax请求子菜单数据。 112 // 模拟ajax请求子菜单数据。
113 // setTimeout(()=>{ 113 // setTimeout(()=>{
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"}]; 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"}];
115 // },5000) 115 // },5000)
116 }, 116 },
117 methods: { 117 methods: {
118 showDrawer(e) { 118 showDrawer(e) {
119 this.$refs[e].open() 119 this.$refs[e].open()
120 }, 120 },
121 closeDrawer(e) { 121 closeDrawer(e) {
122 this.$refs[e].close() 122 this.$refs[e].close()
123 }, 123 },
124 change(e, type) { 124 change(e, type) {
125 this[type] = e 125 this[type] = e
126 }, 126 },
127 onClickItem(e) { 127 onClickItem(e) {
128 if (this.current !== e) { 128 if (this.current !== e) {
129 this.current = e; 129 this.current = e;
130 } 130 }
131 }, 131 },
132 dropDown(){ 132 dropDown(){
133 console.log('下拉') 133 console.log('下拉')
134 }, 134 },
135 //接收菜单结果 135 //接收菜单结果
136 confirm(e){ 136 confirm(e){
137 this.indexArr = e.index; 137 this.indexArr = e.index;
138 this.valueArr = e.value; 138 this.valueArr = e.value;
139 return; 139 return;
140 console.log('修改菜单'); 140 console.log('修改菜单');
141 this.filterData[4].submenu[1] = { 141 this.filterData[4].submenu[1] = {
142 "name": "项目2", 142 "name": "项目2",
143 "submenu": [ 143 "submenu": [
144 144
145 ] 145 ]
146 } 146 }
147 } 147 }
148 }, 148 },
149 onNavigationBarButtonTap(e) { 149 onNavigationBarButtonTap(e) {
150 this.showRight = !this.showRight 150 this.showRight = !this.showRight
151 }, 151 },
152 //上拉加载， 152 //上拉加载，
153 onReachBottom(){ 153 onReachBottom(){
154 console.log('到底加载') 154 console.log('到底加载')
155 let len = this.goodsList.length; 155 let len = this.goodsList.length;
156 if(len>=30){ 156 if(len>=30){
157 this.loadingText="~~到底了~~"; 157 this.loadingText="~~到底了~~";
158 return false; 158 return false;
159 }else{ 159 }else{
160 this.loadingText="正在加载..."; 160 this.loadingText="正在加载...";
161 } 161 }
162 let end_goods_id = this.goodsList[len-1].goods_id; 162 let end_goods_id = this.goodsList[len-1].goods_id;
163 for(let i=1;i<=10;i++){ 163 for(let i=1;i<=10;i++){
164 let goods_id = end_goods_id+i; 164 let goods_id = end_goods_id+i;
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人付款' }; 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人付款' };
166 this.goodsList.push(p); 166 this.goodsList.push(p);
167 } 167 }
168 }, 168 },
169 } 169 }
170 </script> 170 </script>
171 171
172 <style lang="scss"> 172 <style lang="scss">
173 .content { 173 .content {
174 display: flex; 174 display: flex;
175 flex-direction: column; 175 flex-direction: column;
176 align-items: center; 176 align-items: center;
177 justify-content: center; 177 justify-content: center;
178 background-color: #F7F6F6; 178 background-color: #F7F6F6;
179 } 179 }
180 .header{ 180 .header{
181 display: flex; 181 display: flex;
182 flex-direction: column; 182 flex-direction: column;
183 align-items: center; 183 align-items: center;
184 justify-content: center; 184 justify-content: center;
185 background-color: #F7F6F6; 185 background-color: #F7F6F6;
186 height:178rpx ; 186 height:178rpx ;
187 width: 100%; 187 width: 100%;
188 z-index: 999; 188 z-index: 999;
189 position: fixed; 189 position: fixed;
190 top: 0; 190 top: 0;
191 left: 0; 191 left: 0;
192 } 192 }
193 .searchBar { 193 .searchBar {
194 width: 670rpx; 194 width: 670rpx;
195 display: flex; 195 display: flex;
196 justify-content: center; 196 justify-content: center;
197 align-items: center; 197 align-items: center;
198 box-sizing: border-box; 198 box-sizing: border-box;
199 padding: 0rpx 16rpx; 199 padding: 0rpx 16rpx;
200 border: 1px solid #FF6B4A; 200 border: 1px solid #FF6B4A;
201 border-radius: 8rpx; 201 border-radius: 8rpx;
202 background-color: #ffffff; 202 background-color: #ffffff;
203 } 203 }
204 204
205 .searchIpt { 205 .searchIpt {
206 height: 68rpx; 206 height: 68rpx;
207 width: 670rpx; 207 width: 670rpx;
208 padding: 16rpx; 208 padding: 16rpx;
209 font-size: 28rpx; 209 font-size: 28rpx;
210 box-sizing: border-box; 210 box-sizing: border-box;
211 } 211 }
212 .screenBar{ 212 .screenBar{
213 width: 670rpx; 213 width: 670rpx;
214 height: 110rpx; 214 height: 110rpx;
215 display: flex; 215 display: flex;
216 flex-direction: row; 216 flex-direction: row;
217 justify-content: space-between; 217 justify-content: space-between;
218 align-items: center; 218 align-items: center;
219 color: #333333; 219 color: #333333;
220 font-size: 32rpx; 220 font-size: 32rpx;
221 } 221 }
222 .active{ 222 .active{
223 color: #FF6B4A; 223 color: #FF6B4A;
224 } 224 }
225 .screenItem{ 225 .screenItem{
226 display: flex; 226 display: flex;
227 justify-content: center; 227 justify-content: center;
228 align-items: center; 228 align-items: center;
229 } 229 }
230 .content-wrap{ 230 .content-wrap{
231 width: 100%; 231 width: 100%;
232 background-color: #FFFFFF; 232 background-color: #FFFFFF;
233 } 233 }
234 234
235 .HMfilterDropdown{ 235 .HMfilterDropdown{
236 top: 178rpx !important; 236 top: 178rpx !important;
237 } 237 }
238 238
239 .goods-list{ 239 .goods-list{
240 padding-top: 286rpx; 240 padding-top: 286rpx;
241 .loading-text{ 241 .loading-text{
242 width: 100%; 242 width: 100%;
243 display: flex; 243 display: flex;
244 justify-content: center; 244 justify-content: center;
245 align-items: center; 245 align-items: center;
246 height: 30px; 246 height: 30px;
247 color: #979797; 247 color: #979797;
248 font-size: 12px; 248 font-size: 12px;
249 } 249 }
250 .product-list{ 250 .product-list{
251 width: 92%; 251 width: 92%;
252 padding: 0 4% 3vw 4%; 252 padding: 0 4% 3vw 4%;
253 display: flex; 253 display: flex;
254 justify-content: space-between; 254 justify-content: space-between;
255 flex-wrap: wrap; 255 flex-wrap: wrap;
256 .product{ 256 .product{
257 width: 48%; 257 width: 48%;
258 margin: 0 0 20rpx 0; 258 margin: 0 0 20rpx 0;
259 background: #FFFFFF; 259 background: #FFFFFF;
260 border: 1px solid #F2F2F2; 260 border: 1px solid #F2F2F2;
261 } 261 }
262 } 262 }
263 } 263 }
264 264
265 </style> 265 </style>
266 266