刘文博 / gulu-vue

Download as
Browse Code »

Commit 435c08bd8b7c46dcb68de75a911c4e88cd36b847

Authored by BigBoss
1 parent 026545fd85
Exists in master

新增订单详情页面

Showing 22 changed files with 936 additions and 5 deletions   Show diff stats
1 { 1 {
2 "pages": [ 2 "pages": [
3 {
4 "path" : "pages/confirmOrder/confirmOrder",
5 "style" : {
6 "navigationBarTitleText": "确认订单"}
7 },
8 { 3 {
9 "path": "pages/index/index", 4 "path": "pages/index/index",
10 "style": { 5 "style": {
11 "navigationBarTitleText": "商城一览" 6 "navigationBarTitleText": "商城一览"
12 // "enablePullDownRefresh":true 7 // "enablePullDownRefresh":true
13 } 8 }
14 }, 9 },
10 {
11 "path" : "pages/confirmOrder/confirmOrder",
12 "style" : {
13 "navigationBarTitleText": "确认订单"}
14 },
15 { 15 {
16 "path": "pages/cart/cart", 16 "path": "pages/cart/cart",
17 "style": { 17 "style": {
18 "navigationBarTitleText": "购物车" 18 "navigationBarTitleText": "购物车"
19 } 19 }
20 }, 20 },
21 { 21 {
22 "path": "pages/user/user", 22 "path": "pages/user/user",
23 "style": { 23 "style": {
24 "navigationBarTitleText": "我的" 24 "navigationBarTitleText": "我的"
25 } 25 }
26 },
27 {
28 "path": "pages/details-3/details-3"
29 },
30 {
31 "path": "pages/detail/detail"
26 } 32 }
27 ], 33 ],
28 "globalStyle": { 34 "globalStyle": {
29 "navigationBarTextStyle": "black", 35 "navigationBarTextStyle": "black",
30 "navigationBarTitleText": "uni-app", 36 "navigationBarTitleText": "uni-app",
31 "navigationBarBackgroundColor": "#F8F8F8", 37 "navigationBarBackgroundColor": "#F8F8F8",
32 "backgroundColor": "#F8F8F8" 38 "backgroundColor": "#F8F8F8"
33 }, 39 },
34 "tabBar": { 40 "tabBar": {
35 "color": "#C0C4CC", 41 "color": "#C0C4CC",
36 "selectedColor": "#fa436a", 42 "selectedColor": "#fa436a",
37 "borderStyle": "black", 43 "borderStyle": "black",
38 "backgroundColor": "#ffffff", 44 "backgroundColor": "#ffffff",
39 "list": [{ 45 "list": [{
40 "pagePath": "pages/index/index", 46 "pagePath": "pages/index/index",
41 "iconPath": "static/tab-home.png", 47 "iconPath": "static/tab-home.png",
42 "selectedIconPath": "static/tab-home-current.png", 48 "selectedIconPath": "static/tab-home-current.png",
43 "text": "首页" 49 "text": "首页"
44 }, 50 },
45 { 51 {
46 "pagePath": "pages/cart/cart", 52 "pagePath": "pages/cart/cart",
47 "iconPath": "static/tab-cart.png", 53 "iconPath": "static/tab-cart.png",
48 "selectedIconPath": "static/tab-cart-current.png", 54 "selectedIconPath": "static/tab-cart-current.png",
49 "text": "购物车" 55 "text": "购物车"
50 }, 56 },
51 { 57 {
52 "pagePath": "pages/user/user", 58 "pagePath": "pages/user/user",
53 "iconPath": "static/tab-my.png", 59 "iconPath": "static/tab-my.png",
54 "selectedIconPath": "static/tab-my-current.png", 60 "selectedIconPath": "static/tab-my-current.png",
55 "text": "我的" 61 "text": "我的"
src/pages/addArddess/addArddess.vue
Diff comments   View file @435c08b
File was created 1 <template>
2 <view class="wrap">
3 <view class="content">
4
5 </view>
6 <view class="button">保存并使用</view>
7 </view>
8 </template>
9
10 <script>
11 export default {
12 data() {
13 return {
14
15 };
16 }
17 }
18 </script>
19
20 <style lang="scss">
21
22 </style>
23
src/pages/detail/detail.vue
Diff comments   View file @435c08b
File was created 1 <template>
2 <view class="container">
3 <view class="D1">
4 <!-- 轮播图 -->
5 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
6 <swiper-item v-for="(item,index) in sliding" :key="index">
7 <view class="swiper-item ">
8 <image :src="item.img" mode="widthFix" class="width100"></image>
9 </view>
10 </swiper-item>
11 </swiper>
12 <view class="D1_price">￥{{price}}</view>
13 <view class="D1_name"><span class="D1_name1">{{name}}</span><span class="D1_number">{{number}}购买过</span></view>
14 <view class="D1_spans"><span>支持7天无理由退货</span><span>顺丰发货</span><span>30天质量保证</span></view>
15 </view>
16 <view class="D2">
17 <view><span class="D2_span1">框架材质：</span><span class="D2_span2">{{introduction.material}}</span></view>
18 <view><span class="D2_span1">功能：</span><span class="D2_span2">{{introduction.func}}</span></view>
19 <view><span class="D2_span1">折射率：</span><span class="D2_span2">{{introduction.rate}}</span></view>
20 </view>
21 <view class="D3">
22 <view class="D3_header">
23 <view>商品保障</view>
24 <view>规格参数</view>
25 <view>售后保障</view>
26 </view>
27 <view class="D3_list">
28 <view v-for="(item) in parameter" :key="item.key">
29 <image class="D3_image" v-bind:src = "item.img"></image>
30 <span>{{item.standard}}</span>
31 <span>{{item.slength}}</span>
32 </view>
33 </view>
34 </view>
35 <view class="D4">
36 <view class="D4_esvalue">
37 <view>{{esvalue}}</view>
38 <view class="D4_2"></view>
39 </view>
40 <view class="D4_list">
41 <view v-for="(assess) in assess" :key="assess.key">{{assess.Iassess}}</view>
42 </view>
43 </view>
44 <view class="D5">
45 <view class="D5_fixed1">
46 <image src="/static/img/detail/hr.png"></image>
47 <view>商品详细</view>
48 <image src="/static/img/detail/hr.png"></image>
49 </view>
50 <view class="D5_all">
51 <image v-bind:src="imgAll"></image>
52 </view>
53 <view class="D5_photoes">
54 <view class="D5_photoes1">
55 <view v-for="(photoes) in photoes" :key="photoes.value">
56 <image v-bind:src = "photoes.img"></image>
57 <view>{{photoes.value}}</view>
58 </view>
59 </view>
60 <view class="D5_logo1">帕森防蓝光镜片</view>
61 <view class="D5_logo2">健康护眼，我们是认真的！</view>
62 <view class="D5_logo3"><image src='/static/img/detail/logo.png'></image></view>
63 </view>
64 </view>
65 <view class="D6">
66 <view class="D6_v1">CHARM DETAIL</view>
67 <view class="D6_v2">细节展示</view>
68 <view ><image v-bind:src="imgDetail"></image></view>
69 <view>........................................................................</view>
70 <view class="D6_v5"><span class="D6_v5_s1">优质选材 </span><span class="D6_v5_s2"> / 金属材质 光泽饱满</span></view>
71 </view>
72
73 <!-- 底部菜单 -->
74 <view class="botton">
75 <view class="botton_1"><image v-bind:src="imgShop.img"></image><view class="botton_image">购物车</view></view>
76 <view class="botton_2">
77 <view class="botton_input">加入购物车</view>
78 <view class="botton_now" @click="goConfirmOder">立即购买</view>
79 </view>
80 </view>
81 </view>
82 </template>
83
84 <script>
85 export default {
86 data(){
87 return {
88 name:'商品名称',
89 price: 120,
90 number: 391,
91 sliding:[
92 {img:'/static/img/detail/d1.png'},
93 {img:'/static/img/detail/d1.png'},
94 {img:'/static/img/detail/d1.png'},
95 {img:'/static/img/detail/d1.png'}
96 ],
97 parameter:[
98 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:'139mm'},
99 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:'51mm'},
100 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:'45mm'},
101 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:'19mm'},
102 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:'138mm'},
103 {key: 5,img:'/static/img/detail/d7.png', standard:'框架重', slength:'19mm'}
104 ],
105 assess:[
106 {key: 0, Iassess: '价格实惠'},
107 {key: 1, Iassess: '美观大方'},
108 {key: 2, Iassess: '易搭配'}
109 ],
110 esvalue:'宝贝好评率 100%',
111 introduction:{
112 material:'钛合金',
113 func:'抗疲劳/防辐射',
114 rate: 1.6
115 },
116 imgAll:'/static/img/detail/d8.png' ,
117 photoes:[
118 {value:'日常办公', img:'/static/img/detail/d9.png'},
119 {value:'上网', img:'/static/img/detail/d10.png'},
120 {value:'追剧', img:'/static/img/detail/d11.png'},
121 {value:'玩游戏', img:'/static/img/detail/d12.png'},
122 ],
123 imgDetail:'/static/img/detail/d13.png',
124 imgShop:{
125 img:'/static/tab-cart.png',
126 IsShown: false
127 }
128 }
129 },
130 methods:{
131 goConfirmOder(){
132 uni.navigateTo({
133 url: '../confirmOrder/confirmOrder',
134 success: res => {},
135 fail: () => {},
136 complete: () => {}
137 });
138 }
139 }
140 }
141 </script>
142 <style lang='scss'>
143 .container{
144 background-color:#f8f8f8 ;
145 }
146 .D1,.D2,.D3,.D4,.D6{
147 background: #ffffff;
148 margin-bottom: 10px;
149 padding:8px 20px 8px 20px;
150 box-sizing: border-box;
151
152 }
153 .D5{
154 background: #ffffff;
155 padding:8px 20px 8px 20px;
156 box-sizing: border-box;
157 }
158 .swiper{
159 width: 100%;
160 height: 560rpx;
161 .swiper-item{
162 width: 100%;
163 image{
164 width: 100%;
165 }
166 }
167 }
168 .D1{
169 .D1_price{
170 color: #EB5D3B;
171 font-size: 18px;
172 margin-top: 5px;
173 font-family: 'PingFangSC-Semibold';
174 }
175 .D1_name{
176 font-size: 16px;
177 font-family: 'PingFangSC-Semibold';
178 margin-top: 5px;
179 display: flex;
180 justify-content: space-between;
181 .D1_name1{
182 font-weight: bold;
183 }
184 .D1_number{
185 color: #999999 ;
186 font-size: 14px;
187 font-family: 'PingFangSC-Regular';
188 }
189 }
190 .D1_spans{
191 font-size: 10px;
192 color:#999999;
193 margin-top: 5px;
194 span{
195 height: 14px;
196 margin-right: 10px;
197 }
198 }
199
200 }
201 .D2{
202 font-size: 14px;
203 font-family: 'PingFangSC-Regular';
204 view{
205 height: 24px;
206 }
207 .D2_span1{
208 color: #999999;
209 }
210 .D2_span2{
211 color: #333333;
212 }
213 }
214 .D3{
215 font-size: 14px;
216 color: #333333;
217 .D3_header{
218 display: flex;
219 justify-content: space-between;
220 font-family: 'PingFangSC-Medium';
221 font-weight: bold;
222 margin-bottom: 14px;
223 view{
224 margin-right: 10px;
225 }
226 }
227 .D3_list{
228 margin-bottom: 4px;
229 }
230 .D3_list view{
231 display: flex;
232 align-content: center;
233 }
234 .D3_list image{
235 width: 50px;
236 height: 25px;
237 margin-right: 6px;
238 }
239 .D3_list span{
240 margin-left: 6px;
241 margin-right: 5px;
242 font-family: 'PingFangSC-Regular';
243 }
244 }
245 .D4{
246 .D4_esvalue{
247 display: flex;
248 justify-content: space-between;
249 margin-bottom: 10px;
250 .D4_2{
251 width: 90px;
252 border: #333333 ridge;
253 }
254 }
255 .D4_esvalue view{
256 font-size: 14px;
257 color: #333333;
258 font-weight: bold;
259 }
260 .D4_list view{
261 display: inline-block;
262 font-size: 12px;
263 text-align: center;
264 margin-right: 12px;
265 width: 90px;
266 height: 24px;
267 line-height: 24px;
268 background: #F2F2F2;
269 color: #666666 ;
270 }
271 }
272 .D5{
273 .D5_fixed1{
274 display: flex;
275 justify-content: space-between;
276 align-content: center;
277 margin-bottom: 12px;
278 view{
279 font-size: 14px;
280 color: #333333;
281 font-weight: bold;
282 font-family: 'PingFangSC-Medium';
283 line-height: 24px;
284 }
285 image{
286 width: 240rpx;
287 height: 3px;
288 margin-top: 10px;
289 }
290 }
291 .D5_all {
292 width: 100%;
293 height: 380px;
294 margin-bottom: 30px;
295 font-family: 'PingFangSC-Regular';
296 border: #999999 solid 1.5px;
297 image{
298 width: 100%;
299 height: 380px;
300 }}
301 .D5_photoes1{
302 display: grid;
303 grid-template-columns: 48% 48%;
304 grid-row-gap: 10px;
305 grid-column-gap: 4%;
306 image{
307 width: 100%;
308 height: 70px;
309 }
310 view{
311 width: 100%;
312 font-size: 14px;
313 text-align: center;
314 background: #949494;
315 font-family: 'PingFangSC-Regular';
316 color: #ffffff;
317 view{
318 height: 24px;
319 line-height: 24px;
320 }
321 }
322 }
323 .D5_logo1,.D5_logo2{
324 text-align: center;
325 }
326 .D5_logo1{
327 margin-top: 40px;
328 font-size: 24px;
329 font-weight: bold;
330 font-family: 'PingFangSC-Semibold';
331 }
332 .D5_logo2{
333 font-size: 12px;
334 }
335 .D5_logo3{
336 width: 100%;
337 text-align: center;
338 image{
339 width: 50px;
340 height: 24px;
341 }
342 }
343 }
344 .D6{
345 width: 100%;
346 height: 430px;
347 background: #F9F6ED;
348 margin-bottom: 48rpx;
349 view{
350 text-align: center;
351 }
352 .D6_v1{
353 font-weight: bold;
354 }
355 .D6_v2{
356 font-size: 14px;
357 margin-bottom: 30px;
358 }
359 .D6_v5{
360 .D6_v5_s1{
361 font-weight: bold;
362 }
363 .D6_v5_s2{
364 font-size: 14px;
365 }
366 }
367 }
368 .botton{
369 position: fixed;
370 bottom: 0;
371 height: 74px;
372 width: 100%;
373 background: #FFFFFF;
374 padding: 20px 20px 8px 20px;
375 font-family: 'PingFangSC-Regular';
376 box-sizing: border-box;
377 display: flex;
378 justify-content: space-between;
379 align-content: center;
380 .botton_1{
381 width: 20%;
382 height: 100%;
383 text-align: center;
384 color: #989898;
385 }
386 image{
387 width: 60%;
388 height: 30px;
389 }
390 .botton_image{
391 font-size: 12px;
392 text-align: center;
393 }
394 .botton_2{
395 width: 74%;
396 height: 86%;
397 display: grid;
398 grid-template-columns: 50% 50%;
399 }
400 .botton_input{
401 display: inline-flex;
402 align-items: center;
403 justify-content: space-around;
404 background: #FFF0EC;
405 font-size: 16px;
406 color: #FF6B4A;
407 border-radius: 20px 0 0 20px;
408 }
409 .botton_now{
410 display: inline-flex;
411 align-items: center;
412 justify-content: space-around;
413 background: #FF6B4A;
414 font-size: 16px;
415 color: #FFFFFF;
416 border-radius:0 20px 20px 0;
417 }
418 }
419 </style>
src/pages/details-3/details-3.vue
Diff comments   View file @435c08b
File was created 1 <template>
2 <view class="content">
3 <view class="header">
4 <view class="header-name">
5 <navigator open-type="navigateBack" hover-class="navigator-hover">
6 <image src="/static/back.png"></image>
7 </navigator>
8 <text>{{name}}</text>
9 </view>
10 </view>
11 <scroll-view scroll-y class="sroll-view">
12 <view class="goods-details">
13 <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500" >
14 <swiper-item v-for="(item) in infos" :key="item.goods_id">
15 <image :src="item.img" mode="scaleToFill"></image>
16 </swiper-item>
17 </swiper>
18 <view class="goods-price">
19 <text class="now-price">￥120</text>
20 <text class="old-price">￥198</text>
21 <text class="buy-num">349人购买过</text>
22 </view>
23 <view class="goods-name">
24 <text>眼镜名称名称名称名称名眼镜名称眼镜名称眼镜名称眼镜名称眼镜名称</text>
25 </view>
26 <view class="goods-courier">
27 <text>支持7天无理由退货</text>
28 <text class="courier-support">顺丰发货</text>
29 </view>
30 </view>
31 <view class="goods-form">
32 <text class="p1">填写验光数据</text>
33 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
34 <view class="choice-use">
35 <text class="p3">您一般用眼镜:</text>
36 <image :src="tablist.read ? tabicon[0] : tabicon[1]" @click="changeRead"></image>
37 <text class="p4">阅读</text>
38 <image :src="tablist.seeLong ? tabicon[0] : tabicon[1]" @click="changeSeeLong"></image>
39 <text class="p5">看远处</text>
40 </view>
41 <view class="picker" >
42 <view class="picker-choice">
43 <view class="choice-left">
44 <text class="p11">{{pickerInfoList[0].nameC}}</text>
45 <text class="p12">{{pickerInfoList[0].nameE}}</text>
46 </view>
47 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
48 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
49 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
50 <image src="../../static/detail-tabicon.png" ></image>
51 </picker>
52 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
53 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
54 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
55 <image src="../../static/detail-tabicon.png" ></image>
56 </picker>
57 </view>
58 </view>
59 <view class="picker" >
60 <view class="picker-choice">
61 <view class="choice-left">
62 <text class="p11">{{pickerInfoList[1].nameC}}</text>
63 <text class="p12">{{pickerInfoList[1].nameE}}</text>
64 </view>
65 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
66 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
67 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
68 <image src="../../static/detail-tabicon.png" ></image>
69 </picker>
70 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
71 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
72 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
73 <image src="../../static/detail-tabicon.png" ></image>
74 </picker>
75 </view>
76 </view>
77 <view class="picker" >
78 <view class="picker-choice">
79 <view class="choice-left">
80 <text class="p11">{{pickerInfoList[2].nameC}}</text>
81 <text class="p12">{{pickerInfoList[2].nameE}}</text>
82 </view>
83 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
84 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
85 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
86 <image src="../../static/detail-tabicon.png" ></image>
87 </picker>
88 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
89 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
90 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
91 <image src="../../static/detail-tabicon.png" ></image>
92 </picker>
93 </view>
94 </view>
95 <view class="picker" >
96 <view class="picker-choice">
97 <view class="choice-left">
98 <text class="p11">{{pickerInfoList[3].nameC}}</text>
99 <text class="p12">{{pickerInfoList[3].nameE}}</text>
100 </view>
101 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
102 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
103 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
104 <image src="../../static/detail-tabicon.png" ></image>
105 </picker>
106 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
107 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
108 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
109 <image src="../../static/detail-tabicon.png" ></image>
110 </picker>
111 </view>
112 </view>
113 <view class="picker" >
114 <view class="picker-choice">
115 <view class="choice-left">
116 <text class="p11">{{pickerInfoList[4].nameC}}</text>
117 </view>
118 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
119 <text class="p14">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
120 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
121 <image src="../../static/detail-tabicon.png" ></image>
122 </picker>
123 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
124 <text class="p14">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
125 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
126 <image src="../../static/detail-tabicon.png" ></image>
127 </picker>
128 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
129 <text class="p14">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
130 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
131 <image src="../../static/detail-tabicon.png" ></image>
132 </picker>
133 </view>
134 </view>
135 <view class="confirm">
136 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
137 <text>确认以上输入信息来源于我的验光数据!</text>
138 </view>
139 </view>
140 </scroll-view>
141 <view class="goods-submit">
142 <button>下一步</button>
143 </view>
144 </view>
145 </template>
146
147 <script>
148
149 export default {
150 components: {
151
152 },
153 data() {
154 return {
155 name: '眼镜名称名称',
156 infos: [
157 { goods_id: 0, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
158 { goods_id: 1, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
159 { goods_id: 2, img: '/static/img/goods/p12.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
160 { goods_id: 3, img: '/static/img/goods/p11.png', name: '商品名称', price: '￥168', slogan:'1235人付款' },
161 ],
162 tablist: {
163 read: true,
164 seeLong: false,
165 confirm: false
166 },
167 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
168 // 度数相关数据
169 pickerInfoList:[
170 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
171 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
172 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
173 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
174 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
175 ],
176 }
177 },
178 onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
179
180 },
181 methods: {
182 changeRead() {
183 this.tablist.read = !this.tablist.read
184 // this.current = e.detail.current;
185 },
186 changeSeeLong() {
187 this.tablist.seeLong = !this.tablist.seeLong
188 },
189 changeConfirm() {
190 this.tablist.confirm = !this.tablist.confirm
191 },
192
193 bindPickerChange01: function(e) {
194 this.pickerInfoList[0].nameIndex1 = e.target.value
195 },
196 bindPickerChange02: function(e) {
197 this.pickerInfoList[0].nameIndex2 = e.target.value
198 },
199
200 bindPickerChange11: function(e) {
201 this.pickerInfoList[1].nameIndex1 = e.target.value
202 },
203 bindPickerChange12: function(e) {
204 this.pickerInfoList[1].nameIndex2 = e.target.value
205 },
206
207 bindPickerChange21: function(e) {
208 this.pickerInfoList[2].nameIndex1 = e.target.value
209 },
210 bindPickerChange22: function(e) {
211 this.pickerInfoList[2].nameIndex2 = e.target.value
212 },
213
214 bindPickerChange31: function(e) {
215 this.pickerInfoList[3].nameIndex1 = e.target.value
216 },
217 bindPickerChange32: function(e) {
218 this.pickerInfoList[3].nameIndex2 = e.target.value
219 },
220
221 bindPickerChange41: function(e) {
222 this.pickerInfoList[4].nameIndex1 = e.target.value
223 },
224 bindPickerChange42: function(e) {
225 this.pickerInfoList[4].nameIndex2 = e.target.value
226 },
227 bindPickerChange43: function(e) {
228 this.pickerInfoList[4].nameIndex3 = e.target.value
229 },
230 }
231 }
232 </script>
233
234 <style lang="scss">
235 .content {
236 display: flex;
237 flex-direction: column;
238 align-items: center;
239 justify-content: center;
240
241 }
242 .header{
243 display: flex;
244 flex-direction: column;
245 align-items: center;
246 background-color: #fff;
247 width: 100%;
248 height: 64rpx;
249 z-index: 999;
250 position: fixed;
251 top: 0;
252 .header-name {
253 display: flex;
254 width: 684rpx;
255 text {
256 font-size: 36rpx;
257 color: #333333;
258 letter-spacing: -0.34px;
259 margin-left: 54rpx;
260 }
261 image {
262 width: 11px;
263 height: 18px;
264 border-radius: 16px;
265 }
266 }
267
268 }
269
270 .sroll-view{
271 height: 1760rpx;
272 }
273
274 .goods-details{
275 display: flex;
276 flex-direction: column;
277 align-items: center;
278 justify-content: center;
279 background-color: #fff;
280 margin-bottom: 40rpx;
281 .swiper {
282 width: 684rpx;
283 height: 512rpx;
284 image {
285 width: 100%;
286 height: 100%;
287 border-radius: 16rpx;
288 }
289 }
290 .goods-price {
291 display: flex;
292 justify-content: space-between;
293 padding: 40rpx 0 30rpx 0;
294 align-items: center;
295 width: 684rpx;
296 .now-price {
297 font-size: 18px;
298 color: #EB5D3B;
299 }
300 .old-price {
301 font-size: 14px;
302 color: #999999;
303 letter-spacing: -0.26px;
304 margin-left: -156px;
305 text-decoration: line-through;
306 }
307 .buy-num {
308 font-size: 14px;
309 color: #999999;
310 letter-spacing: -0.26px;
311 text-align: justify;
312 }
313 }
314 .goods-name {
315 font-size: 16px;
316 color: #333333;
317 letter-spacing: -0.3px;
318 text-align: justify;
319 width: 684rpx;
320 }
321 .goods-courier {
322 width: 684rpx;
323 font-size: 10px;
324 color: #999999;
325 letter-spacing: -0.19px;
326 padding: 10rpx 0;
327 .courier-support {
328 padding-left: 20rpx;
329 }
330 }
331
332 }
333 .goods-form {
334 display: flex;
335 flex-direction: column;
336 align-items: center;
337 justify-content: center;
338 background-color: #fff;
339 width: 100%;
340 .choice-use{
341 display: flex;
342 margin-bottom: 40rpx;
343 width: 684rpx;
344 align-items: center;
345 .p3 {
346 font-size: 14px;
347 color: #333333;
348 letter-spacing: -0.26px;
349 text-align: justify;
350 line-height: 24px;
351 width: 164px;
352 }
353 .p4 {
354 font-size: 14px;
355 color: #666666;
356 letter-spacing: -0.26px;
357 margin: 0 71rpx 0 24rpx ;
358 }
359 .p5 {
360 font-size: 14px;
361 color: #666666;
362 letter-spacing: -0.26px;
363 margin-left: 24rpx;
364 }
365 }
366 .p1 {
367 font-size: 16px;
368 color: #333333;
369 letter-spacing: -0.3px;
370 text-align: justify;
371 line-height: 24px;
372 margin: 4px 0;
373
374 }
375 .p2 {
376 font-size: 12px;
377 color: #999999;
378 letter-spacing: -0.23px;
379 margin-bottom: 18rpx;
380 }
381 image{
382 width: 28rpx;
383 height: 26rpx;
384 }
385 .confirm {
386 display: flex;
387 align-items: center;
388 font-size: 12px;
389 color: #666666;
390 letter-spacing: -0.23px;
391 width: 684rpx;
392 image{
393 margin-right:25rpx;
394 }
395 }
396 .picker{
397 display: flex;
398 flex-direction: column;
399 justify-content: center;
400 align-items: center;
401 width: 100%;
402 image{
403 width: 10px;
404 height: 10px;
405 margin-right: 5px;
406 }
407 .picker-choice{
408 display: flex;
409 width: 684rpx;
410 align-items: center;
411 margin-bottom: 40rpx;
412 .choice-left{
413 width: 210rpx;
414 .p11 {
415 font-size: 14px;
416 color: #333333;
417 letter-spacing: -0.26px;
418 text-align: justify;
419 line-height: 24px;
420 margin-right: 10px;
421 }
422 .p12 {
423 font-size: 10px;
424 color: #3F3F3F;
425 letter-spacing: -0.19px;
426 text-align: justify;
427 line-height: 24px;
428 }
429
430
431 }
432 .p13 {
433 font-size: 10px;
434 color: #999999;
435 letter-spacing: -0.19px;
436 margin-right: 10px;
437 }
438 .p13-date {
439 font-size: 10px;
440 color: #999999;
441 letter-spacing: -0.19px;
442 margin-right: 5px;
443 }
444 .p14 {
445 font-size: 14px;
446 color: #666666;
447 letter-spacing: -0.26px;
448 text-align: center;
449 width: 124rpx;
450 border-bottom: 1px solid #CFCFCF;
451 }
452
453 }
454 }
455 }
456 .goods-submit{
457 display: flex;
458 flex-direction: column;
459 align-items: center;
460 justify-content: center;
461 position: fixed;
462 bottom: 0;
463 z-index: 999;
464 width: 100%;
465 height: 120rpx;
466 background-color: #fff;
467 button{
468 width: 540rpx;
469 height: 80rpx;
470 font-size: 32rpx;
471 color: #fff;
472 background: #FF6B4A;
473 border-radius: 20px;
474 border-radius: 20px;
475 }
476 }
477
478 </style>
src/pages/index/index.vue
Diff comments   View file @435c08b
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({
157 url: `../detail/detail?oderId=1`,
158 success: res => {},
159 fail: () => {},
160 complete: () => {}
161 });
156 } 162 }
157 }, 163 },
158 onNavigationBarButtonTap(e) { 164 onNavigationBarButtonTap(e) {
159 this.showRight = !this.showRight 165 this.showRight = !this.showRight
160 }, 166 },
161 //上拉加载， 167 //上拉加载，
162 onReachBottom(){ 168 onReachBottom(){
163 console.log('到底加载') 169 console.log('到底加载')
164 let len = this.goodsList.length; 170 let len = this.goodsList.length;
165 if(len>=30){ 171 if(len>=30){
166 this.loadingText="~~到底了~~"; 172 this.loadingText="~~到底了~~";
167 return false; 173 return false;
168 }else{ 174 }else{
169 this.loadingText="正在加载..."; 175 this.loadingText="正在加载...";
170 } 176 }
171 let end_goods_id = this.goodsList[len-1].goods_id; 177 let end_goods_id = this.goodsList[len-1].goods_id;
172 for(let i=1;i<=10;i++){ 178 for(let i=1;i<=10;i++){
173 let goods_id = end_goods_id+i; 179 let goods_id = end_goods_id+i;
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人付款' }; 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人付款' };
175 this.goodsList.push(p); 181 this.goodsList.push(p);
176 } 182 }
177 }, 183 },
178 } 184 }
179 </script> 185 </script>
180 186
181 <style lang="scss"> 187 <style lang="scss">
182 .content { 188 .content {
183 display: flex; 189 display: flex;
184 flex-direction: column; 190 flex-direction: column;
185 align-items: center; 191 align-items: center;
186 justify-content: center; 192 justify-content: center;
187 background-color: #F7F6F6; 193 background-color: #F7F6F6;
188 } 194 }
189 .header{ 195 .header{
190 display: flex; 196 display: flex;
191 flex-direction: column; 197 flex-direction: column;
192 align-items: center; 198 align-items: center;
193 justify-content: center; 199 justify-content: center;
194 background-color: #F7F6F6; 200 background-color: #F7F6F6;
195 height:178rpx ; 201 height:178rpx ;
196 width: 100%; 202 width: 100%;
197 z-index: 999; 203 z-index: 999;
198 position: fixed; 204 position: fixed;
199 top: 0; 205 top: 0;
200 left: 0; 206 left: 0;
201 } 207 }
202 .searchBar { 208 .searchBar {
203 width: 670rpx; 209 width: 670rpx;
204 display: flex; 210 display: flex;
205 justify-content: center; 211 justify-content: center;
206 align-items: center; 212 align-items: center;
207 box-sizing: border-box; 213 box-sizing: border-box;
208 padding: 0rpx 16rpx; 214 padding: 0rpx 16rpx;
209 border: 1px solid #FF6B4A; 215 border: 1px solid #FF6B4A;
210 border-radius: 8rpx; 216 border-radius: 8rpx;
211 background-color: #ffffff; 217 background-color: #ffffff;
212 } 218 }
213 219
214 .searchIpt { 220 .searchIpt {
215 height: 68rpx; 221 height: 68rpx;
216 width: 670rpx; 222 width: 670rpx;
217 padding: 16rpx; 223 padding: 16rpx;
218 font-size: 28rpx; 224 font-size: 28rpx;
219 box-sizing: border-box; 225 box-sizing: border-box;
220 } 226 }
221 .screenBar{ 227 .screenBar{
222 width: 670rpx; 228 width: 670rpx;
223 height: 110rpx; 229 height: 110rpx;
224 display: flex; 230 display: flex;
225 flex-direction: row; 231 flex-direction: row;
226 justify-content: space-between; 232 justify-content: space-between;
227 align-items: center; 233 align-items: center;
228 color: #333333; 234 color: #333333;
229 font-size: 32rpx; 235 font-size: 32rpx;
230 } 236 }
231 .active{ 237 .active{
232 color: #FF6B4A; 238 color: #FF6B4A;
233 } 239 }
234 .screenItem{ 240 .screenItem{
235 display: flex; 241 display: flex;
236 justify-content: center; 242 justify-content: center;
237 align-items: center; 243 align-items: center;
238 } 244 }
239 .content-wrap{ 245 .content-wrap{
240 width: 100%; 246 width: 100%;
241 background-color: #FFFFFF; 247 background-color: #FFFFFF;
242 } 248 }
243 249
244 .HMfilterDropdown{ 250 .HMfilterDropdown{
245 top: 178rpx !important; 251 top: 178rpx !important;
246 } 252 }
247 253
248 .goods-list{ 254 .goods-list{
249 padding-top: 286rpx; 255 padding-top: 286rpx;
250 .loading-text{ 256 .loading-text{
251 width: 100%; 257 width: 100%;
252 display: flex; 258 display: flex;
253 justify-content: center; 259 justify-content: center;
254 align-items: center; 260 align-items: center;
255 height: 30px; 261 height: 30px;
256 color: #979797; 262 color: #979797;
257 font-size: 12px; 263 font-size: 12px;
258 } 264 }
259 .product-list{ 265 .product-list{
260 width: 92%; 266 width: 92%;
261 padding: 0 4% 3vw 4%; 267 padding: 0 4% 3vw 4%;
262 display: flex; 268 display: flex;
263 justify-content: space-between; 269 justify-content: space-between;
264 flex-wrap: wrap; 270 flex-wrap: wrap;
265 .product{ 271 .product{
266 width: 48%; 272 width: 48%;
267 border-radius: 10px; 273 border-radius: 10px;
268 background-color: #fff; 274 background-color: #fff;
269 margin: 0 0 7px 0; 275 margin: 0 0 7px 0;
270 box-shadow: 0 3px 12px rgba(0,0,0,0.1); 276 box-shadow: 0 3px 12px rgba(0,0,0,0.1);
271 image{ 277 image{
272 width: 100%; 278 width: 100%;
273 border-radius: 10px 10px 0 0; 279 border-radius: 10px 10px 0 0;
274 height: 184rpx; 280 height: 184rpx;
275 } 281 }
276 .name{ 282 .name{
277 width: 92%; 283 width: 92%;
278 padding: 5px 4%; 284 padding: 5px 4%;
279 display: -webkit-box; 285 display: -webkit-box;
280 -webkit-box-orient: vertical; 286 -webkit-box-orient: vertical;
281 -webkit-line-clamp: 2; 287 -webkit-line-clamp: 2;
282 text-align: justify; 288 text-align: justify;
283 overflow: hidden; 289 overflow: hidden;
284 font-size: 24rpx; 290 font-size: 24rpx;
285 color: #333333; 291 color: #333333;
286 } 292 }
287 .info{ 293 .info{
288 display: flex; 294 display: flex;
289 justify-content: space-between; 295 justify-content: space-between;
290 align-items: center; 296 align-items: center;
291 width: 92%; 297 width: 92%;
292 padding: 5px 4% 5px 4%; 298 padding: 5px 4% 5px 4%;
293 .priceBox{ 299 .priceBox{
294 display: flex; 300 display: flex;
295 justify-content: space-between; 301 justify-content: space-between;
296 align-items: center; 302 align-items: center;
297 .price{ 303 .price{
298 color: #EB5D3B; 304 color: #EB5D3B;
299 font-size: 28rpx; 305 font-size: 28rpx;
300 font-weight: 600; 306 font-weight: 600;
301 margin-right: 10rpx; 307 margin-right: 10rpx;
302 } 308 }
303 .originCost{ 309 .originCost{
304 text-decoration:line-through; 310 text-decoration:line-through;
305 color: #999999; 311 color: #999999;
306 font-size: 20rpx; 312 font-size: 20rpx;
307 } 313 }
308 314
309 } 315 }
310 .slogan{ 316 .slogan{
311 color: #999999; 317 color: #999999;
312 font-size: 20rpx; 318 font-size: 20rpx;
313 } 319 }
314 } 320 }
315 } 321 }
316 } 322 }
317 } 323 }
318 324
319 </style> 325 </style>
320 326
src/static/img/detail/d1.png
Diff comments   View file @435c08b

170 KB
src/static/img/detail/d10.png
Diff comments   View file @435c08b

53.8 KB
src/static/img/detail/d11.png
Diff comments   View file @435c08b

52.9 KB
src/static/img/detail/d12.png
Diff comments   View file @435c08b

42.1 KB
src/static/img/detail/d13.png
Diff comments   View file @435c08b

46.4 KB
src/static/img/detail/d2.png
Diff comments   View file @435c08b

4.45 KB
src/static/img/detail/d3.png
Diff comments   View file @435c08b

3.95 KB
src/static/img/detail/d4.png
Diff comments   View file @435c08b

4.02 KB
src/static/img/detail/d5.png
Diff comments   View file @435c08b

3.96 KB
src/static/img/detail/d6.png
Diff comments   View file @435c08b

4.21 KB
src/static/img/detail/d7.png
Diff comments   View file @435c08b

3.93 KB
src/static/img/detail/d8.png
Diff comments   View file @435c08b

252 KB
src/static/img/detail/d9.png
Diff comments   View file @435c08b

51.7 KB
src/static/img/detail/d_star.png
Diff comments   View file @435c08b

3.94 KB
src/static/img/detail/hr.png
Diff comments   View file @435c08b

260 Bytes
src/static/img/detail/logo.png
Diff comments   View file @435c08b

469 Bytes
src/static/img/detail/shop.png
Diff comments   View file @435c08b

1018 Bytes