刘文博 / gulu-vue

Download as
Browse Code »

Commit de990cf3f83ac22ca68c0ffff344367d76124d6f

Authored by BigBoss
2 parents 435c08bd8b f11bc9727c
Exists in master

Merge branch 'master' of http://121.40.31.31:8888/jp/gulu-vue

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