Merge Request #7
← To merge requests
From
adam:master
into
jp:master
Commits (1)
Showing
5 changed files
Show diff stats
src/components/Card/Card.vue
1 | <template> | 1 | <template> |
2 | <view class="card" @tap="toGoods(goods.goods_id)"> | 2 | <view class="card" @tap="toGoods(goods.id)"> |
3 | <image mode="widthFix" :src="goods.img" ></image> | 3 | <image mode="widthFix" :src="goods.imgurl" ></image> |
4 | <view class="name">{{goods.name}}</view> | 4 | <view class="name">{{goods.name}}</view> |
5 | <view class="info"> | 5 | <view class="info"> |
6 | <view class="priceBox"> | 6 | <view class="priceBox"> |
7 | <view class="price">{{goods.price}}</view> | 7 | <view class="price">{{goods.rsSon.Min_Price}}</view> |
8 | <view class="originCost">{{goods.originCost}}</view> | 8 | <view class="originCost"> |
9 | {{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}} | ||
10 | <!-- {{goods.oldPrice}} --> | ||
11 | </view> | ||
9 | </view> | 12 | </view> |
10 | <view class="slogan">{{goods.slogan}}</view> | 13 | <view class="slogan">{{goods.trade_num}}</view> |
11 | </view> | 14 | </view> |
12 | </view> | 15 | </view> |
13 | </template> | 16 | </template> |
14 | 17 | ||
15 | <script> | 18 | <script> |
16 | export default { | 19 | export default { |
17 | props: { | 20 | props: { |
18 | /** | 21 | /** |
19 | * 商品数据 | 22 | * 商品数据 |
20 | */ | 23 | */ |
21 | goods: { | 24 | goods: { |
22 | goods_id: Number, | 25 | id: Number, |
23 | img: String, | 26 | imgurl: String, |
24 | name: String, | 27 | name: String, |
25 | originCost:String, | 28 | oldPrice:String, |
26 | price: String, | 29 | price: String, |
27 | slogan:String | 30 | memo:String |
28 | } | 31 | } |
29 | 32 | ||
30 | }, | 33 | }, |
31 | created() { | 34 | created() { |
32 | }, | 35 | }, |
33 | data() { | 36 | data() { |
34 | return { | 37 | return { |
35 | 38 | ||
36 | }; | 39 | }; |
37 | }, | 40 | }, |
38 | methods:{ | 41 | methods:{ |
39 | toGoods(id){ | 42 | toGoods(id){ |
40 | console.log(id) | 43 | console.log('toGoods =====> id======>', id) |
41 | uni.navigateTo({ | 44 | uni.navigateTo({ |
42 | url: `../detail/detail?oderId=1`, | 45 | url: `../detail/detail?oderId=1`, |
43 | success: res => {}, | 46 | success: res => {}, |
44 | fail: () => {}, | 47 | fail: () => {}, |
45 | complete: () => {} | 48 | complete: () => {} |
46 | }); | 49 | }); |
47 | } | 50 | } |
48 | } | 51 | } |
49 | } | 52 | } |
50 | </script> | 53 | </script> |
51 | 54 | ||
52 | <style lang="scss"> | 55 | <style lang="scss"> |
53 | image{ | 56 | image{ |
54 | width: 100%; | 57 | width: 100%; |
55 | height: 120rpx; | 58 | height: 120rpx; |
56 | } | 59 | } |
57 | .name{ | 60 | .name{ |
58 | width: 92%; | 61 | width: 92%; |
59 | padding: 5px 4%; | 62 | padding: 5px 4%; |
60 | display: -webkit-box; | 63 | display: -webkit-box; |
61 | -webkit-box-orient: vertical; | 64 | -webkit-box-orient: vertical; |
62 | -webkit-line-clamp: 2; | 65 | -webkit-line-clamp: 2; |
63 | text-align: justify; | 66 | text-align: justify; |
64 | overflow: hidden; | 67 | overflow: hidden; |
65 | font-size: 24rpx; | 68 | font-size: 24rpx; |
66 | color: #333333; | 69 | color: #333333; |
67 | } | 70 | } |
68 | .info{ | 71 | .info{ |
69 | display: flex; | 72 | display: flex; |
70 | justify-content: space-between; | 73 | justify-content: space-between; |
71 | align-items: center; | 74 | align-items: center; |
72 | width: 92%; | 75 | width: 92%; |
73 | padding: 5px 4% 5px 4%; | 76 | padding: 5px 4% 5px 4%; |
74 | .priceBox{ | 77 | .priceBox{ |
75 | display: flex; | 78 | display: flex; |
76 | justify-content: space-between; | 79 | justify-content: space-between; |
77 | align-items: center; | 80 | align-items: center; |
78 | .price{ | 81 | .price{ |
79 | color: #EB5D3B; | 82 | color: #EB5D3B; |
80 | font-size: 28rpx; | 83 | font-size: 28rpx; |
81 | font-weight: 600; | 84 | font-weight: 600; |
82 | margin-right: 10rpx; | 85 | margin-right: 10rpx; |
83 | } | 86 | } |
84 | .originCost{ | 87 | .originCost{ |
85 | text-decoration:line-through; | 88 | text-decoration:line-through; |
86 | color: #999999; | 89 | color: #999999; |
87 | font-size: 20rpx; | 90 | font-size: 20rpx; |
88 | } | 91 | } |
89 | 92 | ||
90 | } | 93 | } |
91 | .slogan{ | 94 | .slogan{ |
92 | color: #999999; | 95 | color: #999999; |
93 | font-size: 20rpx; | 96 | font-size: 20rpx; |
94 | } | 97 | } |
95 | } | 98 | } |
96 | </style> | 99 | </style> |
97 | 100 |
src/manifest.json
1 | { | 1 | { |
2 | "name" : "gulu-vue", | 2 | "name": "gulu-vue", |
3 | "appid" : "", | 3 | "appid": "", |
4 | "description" : "", | 4 | "description": "", |
5 | "versionName" : "1.0.0", | 5 | "versionName": "1.0.0", |
6 | "versionCode" : "100", | 6 | "versionCode": "100", |
7 | "transformPx" : false, | 7 | "transformPx": false, |
8 | "app-plus" : { | 8 | "h5": { |
9 | "devServer": { | ||
10 | "port": 8080, | ||
11 | "disableHostCheck": true, | ||
12 | "proxy": { | ||
13 | "/": { | ||
14 | "pathRewrite": { | ||
15 | "/": "/" | ||
16 | }, | ||
17 | "target": "https://api.glass.xiuyetang.com/", | ||
18 | "changeOrigin": true, | ||
19 | "serure": false | ||
20 | } | ||
21 | } | ||
22 | }, | ||
23 | "router" : { | ||
24 | "mode" : "history" | ||
25 | } | ||
26 | }, | ||
27 | "app-plus": { | ||
9 | /* 5+App特有相关 */ | 28 | /* 5+App特有相关 */ |
10 | "modules" : {}, | 29 | "modules": {}, |
11 | /* 模块配置 */ | 30 | /* 模块配置 */ |
12 | "distribute" : { | 31 | "distribute": { |
13 | /* 应用发布信息 */ | 32 | /* 应用发布信息 */ |
14 | "android" : { | 33 | "android": { |
15 | /* android打包配置 */ | 34 | /* android打包配置 */ |
16 | "permissions" : [ | 35 | "permissions": [ |
17 | "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", | 36 | "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", |
18 | "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", | 37 | "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", |
19 | "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", | 38 | "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>", |
20 | "<uses-permission android:name=\"android.permission.VIBRATE\"/>", | 39 | "<uses-permission android:name=\"android.permission.VIBRATE\"/>", |
21 | "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", | 40 | "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", |
22 | "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", | 41 | "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", |
23 | "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", | 42 | "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", |
24 | "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", | 43 | "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>", |
25 | "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", | 44 | "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", |
26 | "<uses-permission android:name=\"android.permission.CAMERA\"/>", | 45 | "<uses-permission android:name=\"android.permission.CAMERA\"/>", |
27 | "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", | 46 | "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>", |
28 | "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", | 47 | "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", |
29 | "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", | 48 | "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>", |
30 | "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", | 49 | "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", |
31 | "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", | 50 | "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", |
32 | "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", | 51 | "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", |
33 | "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", | 52 | "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>", |
34 | "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", | 53 | "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", |
35 | "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", | 54 | "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>", |
36 | "<uses-feature android:name=\"android.hardware.camera\"/>", | 55 | "<uses-feature android:name=\"android.hardware.camera\"/>", |
37 | "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", | 56 | "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>", |
38 | "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" | 57 | "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" |
39 | ] | 58 | ] |
40 | }, | 59 | }, |
41 | "ios" : {}, | 60 | "ios": {}, |
42 | /* ios打包配置 */ | 61 | /* ios打包配置 */ |
43 | "sdkConfigs" : {} | 62 | "sdkConfigs": {} |
44 | }, | 63 | }, |
45 | /* SDK配置 */ | 64 | /* SDK配置 */ |
46 | "usingComponents" : true | 65 | "usingComponents": true |
47 | }, | 66 | }, |
48 | "quickapp" : {}, | 67 | "quickapp": {}, |
49 | /* 快应用特有相关 */ | 68 | /* 快应用特有相关 */ |
50 | "mp-weixin" : { | 69 | "mp-weixin": { |
51 | /* 小程序特有相关 */ | 70 | /* 小程序特有相关 */ |
52 | "usingComponents" : true, | 71 | "usingComponents": true, |
53 | "appid" : "wx115b25aa396d27ac", | 72 | "appid": "wx115b25aa396d27ac", |
54 | "setting" : { | 73 | "setting": { |
55 | "urlCheck" : true | 74 | "urlCheck": true |
56 | } | 75 | } |
57 | }, | 76 | }, |
58 | "mp-alipay" : { | 77 | "mp-alipay": { |
59 | "usingComponents" : true | 78 | "usingComponents": true |
60 | }, | 79 | }, |
61 | "mp-baidu" : { | 80 | "mp-baidu": { |
62 | "usingComponents" : true | 81 | "usingComponents": true |
63 | }, | 82 | }, |
64 | "mp-toutiao" : { | 83 | "mp-toutiao": { |
65 | "usingComponents" : true | 84 | "usingComponents": true |
66 | }, | 85 | }, |
67 | "mp-qq" : { | 86 | "mp-qq": { |
68 | "usingComponents" : true | 87 | "usingComponents": true |
69 | } | 88 | } |
70 | } | 89 | } |
src/pages.json
1 | { | 1 | { |
2 | "pages": [ | 2 | "pages": [ |
3 | { | 3 | { |
4 | "path" : "pages/refundProgress/refundProgress", | ||
5 | "style": { | ||
6 | "navigationBarTitleText": "申请退款" | ||
7 | } | ||
8 | }, | ||
9 | { | ||
10 | "path": "pages/index/index", | 4 | "path": "pages/index/index", |
11 | "style": { | 5 | "style": { |
12 | "navigationBarTitleText": "商城一览" | 6 | "navigationBarTitleText": "商城一览" |
13 | // "enablePullDownRefresh":true | 7 | // "enablePullDownRefresh":true |
14 | } | 8 | } |
15 | }, | 9 | }, |
10 | |||
11 | { | ||
12 | "path" : "pages/refundProgress/refundProgress", | ||
13 | "style": { | ||
14 | "navigationBarTitleText": "申请退款" | ||
15 | } | ||
16 | }, | ||
17 | |||
16 | { | 18 | { |
17 | "path" : "pages/myOrder/myOrder", | 19 | "path" : "pages/myOrder/myOrder", |
18 | "style" : { | 20 | "style" : { |
19 | "navigationBarTitleText": "我的订单"} | 21 | "navigationBarTitleText": "我的订单"} |
20 | }, | 22 | }, |
21 | { | 23 | { |
22 | "path": "pages/addArddess/addArddess", | 24 | "path": "pages/addArddess/addArddess", |
23 | "style": { | 25 | "style": { |
24 | "navigationBarTitleText": "新增地址" | 26 | "navigationBarTitleText": "新增地址" |
25 | } | 27 | } |
26 | }, | 28 | }, |
27 | { | 29 | { |
28 | "path" : "pages/confirmOrder/confirmOrder", | 30 | "path" : "pages/confirmOrder/confirmOrder", |
29 | "style" : { | 31 | "style" : { |
30 | "navigationBarTitleText": "确认订单"} | 32 | "navigationBarTitleText": "确认订单"} |
31 | }, | 33 | }, |
32 | { | 34 | { |
33 | "path": "pages/cart/cart", | 35 | "path": "pages/cart/cart", |
34 | "style": { | 36 | "style": { |
35 | "navigationBarTitleText": "购物车" | 37 | "navigationBarTitleText": "购物车" |
36 | } | 38 | } |
37 | }, | 39 | }, |
38 | { | 40 | { |
39 | "path": "pages/user/user", | 41 | "path": "pages/user/user", |
40 | "style": { | 42 | "style": { |
41 | "navigationBarTitleText": "我的" | 43 | "navigationBarTitleText": "我的" |
42 | } | 44 | } |
43 | }, | 45 | }, |
44 | { | 46 | { |
45 | "path": "pages/details-3/details-3" | 47 | "path": "pages/details-3/details-3" |
46 | }, | 48 | }, |
47 | { | 49 | { |
48 | "path": "pages/refundment/Refundways" | 50 | "path": "pages/refundment/Refundways" |
49 | }, | 51 | }, |
50 | { | 52 | { |
51 | "path": "pages/refundment/refundment" | 53 | "path": "pages/refundment/refundment" |
52 | }, | 54 | }, |
53 | { | 55 | { |
54 | "path": "pages/Predelivery/Predelivery" | 56 | "path": "pages/Predelivery/Predelivery" |
55 | }, | 57 | }, |
56 | { | 58 | { |
57 | "path": "pages/customerService/customerService" | 59 | "path": "pages/customerService/customerService" |
58 | }, | 60 | }, |
59 | { | 61 | { |
60 | "path": "pages/myorder-paying/myorder-paying" | 62 | "path": "pages/myorder-paying/myorder-paying" |
61 | }, | 63 | }, |
62 | { | 64 | { |
63 | "path": "pages/detail/detail" | 65 | "path": "pages/detail/detail" |
64 | } | 66 | } |
65 | 67 | ||
66 | ], | 68 | ], |
67 | "globalStyle": { | 69 | "globalStyle": { |
68 | "navigationBarTextStyle": "black", | 70 | "navigationBarTextStyle": "black", |
69 | "navigationBarTitleText": "uni-app", | 71 | "navigationBarTitleText": "uni-app", |
70 | "navigationBarBackgroundColor": "#F8F8F8", | 72 | "navigationBarBackgroundColor": "#F8F8F8", |
71 | "backgroundColor": "#F8F8F8" | 73 | "backgroundColor": "#F8F8F8" |
72 | }, | 74 | }, |
73 | "tabBar": { | 75 | "tabBar": { |
74 | "color": "#C0C4CC", | 76 | "color": "#C0C4CC", |
75 | "selectedColor": "#fa436a", | 77 | "selectedColor": "#fa436a", |
76 | "borderStyle": "black", | 78 | "borderStyle": "black", |
77 | "backgroundColor": "#ffffff", | 79 | "backgroundColor": "#ffffff", |
78 | "list": [{ | 80 | "list": [{ |
79 | "pagePath": "pages/index/index", | 81 | "pagePath": "pages/index/index", |
80 | "iconPath": "static/tab-home.png", | 82 | "iconPath": "static/tab-home.png", |
81 | "selectedIconPath": "static/tab-home-current.png", | 83 | "selectedIconPath": "static/tab-home-current.png", |
82 | "text": "首页" | 84 | "text": "首页" |
83 | }, | 85 | }, |
84 | { | 86 | { |
85 | "pagePath": "pages/cart/cart", | 87 | "pagePath": "pages/cart/cart", |
86 | "iconPath": "static/tab-cart.png", | 88 | "iconPath": "static/tab-cart.png", |
87 | "selectedIconPath": "static/tab-cart-current.png", | 89 | "selectedIconPath": "static/tab-cart-current.png", |
88 | "text": "购物车" | 90 | "text": "购物车" |
89 | }, | 91 | }, |
90 | { | 92 | { |
91 | "pagePath": "pages/user/user", | 93 | "pagePath": "pages/user/user", |
92 | "iconPath": "static/tab-my.png", | 94 | "iconPath": "static/tab-my.png", |
93 | "selectedIconPath": "static/tab-my-current.png", | 95 | "selectedIconPath": "static/tab-my-current.png", |
src/pages/addArddess/addArddess.vue
1 | <template> | 1 | <template> |
2 | <view class="wrap"> | 2 | <view class="wrap"> |
3 | <view class="content"> | 3 | <view class="content"> |
4 | <view class="item,name" > | 4 | <view class="item,name" > |
5 | <text class="itemText">姓名</text> | 5 | <text class="itemText">姓名</text> |
6 | <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> | 6 | <input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8"/> |
7 | </view> | 7 | </view> |
8 | <view class="item,phone"> | 8 | <view class="item,phone"> |
9 | <text class="itemText">电话</text> | 9 | <text class="itemText">电话</text> |
10 | <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> | 10 | <input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8"/> |
11 | </view> | 11 | </view> |
12 | <view class="item,area" > | 12 | <view class="item,area" > |
13 | <text class="itemText">地区</text> | 13 | <text class="itemText">地区</text> |
14 | <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> | 14 | <view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view> |
15 | <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> | 15 | <view class="btn" v-else @tap="openAddres">{{pickerText}}</view> |
16 | <simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> | 16 | <simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address> |
17 | </view> | 17 | </view> |
18 | <view class="item,address" > | 18 | <view class="item,address" > |
19 | <text class="itemText">详细地址</text> | 19 | <text class="itemText">详细地址</text> |
20 | <input placeholder="街道、小区门牌等详细地址"/> | 20 | <input placeholder="街道、小区门牌等详细地址"/> |
21 | </view> | 21 | </view> |
22 | <view class="item,check" > | 22 | <view class="item,check" > |
23 | <text class="itemText">设为默认地址</text> | 23 | <text class="itemText">设为默认地址</text> |
24 | <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> | 24 | <switch checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)" @change="changeDefalutAddress" /> |
25 | </view> | 25 | </view> |
26 | <input /> | 26 | <input /> |
27 | </view> | 27 | </view> |
28 | <view class="button">保存并使用</view> | 28 | <view class="button">保存并使用</view> |
29 | </view> | 29 | </view> |
30 | </template> | 30 | </template> |
31 | 31 | ||
32 | <script> | 32 | <script> |
33 | import SimpleAddress from '@/components/Simple-address/Simple-address.vue'; | 33 | import SimpleAddress from '@/components/Simple-address/Simple-address.vue'; |
34 | export default { | 34 | export default { |
35 | data() { | 35 | data() { |
36 | return { | 36 | return { |
37 | cityPickerValueDefault: [0, 0, 1], | 37 | cityPickerValueDefault: [0, 0, 1], |
38 | pickerText: '', | 38 | pickerText: '', |
39 | isDefalutAddress:true | 39 | isDefalutAddress:true |
40 | 40 | ||
41 | }; | 41 | }; |
42 | }, | 42 | }, |
43 | components: { | 43 | components: { |
44 | SimpleAddress | 44 | SimpleAddress |
45 | }, | 45 | }, |
46 | methods: { | 46 | methods: { |
47 | openAddres() { | 47 | openAddres() { |
48 | this.cityPickerValueDefault = [0,0,1] | 48 | this.cityPickerValueDefault = [0,0,1] |
49 | this.$refs.SimpleAddress.open(); | 49 | this.$refs.SimpleAddress.open(); |
50 | }, | 50 | }, |
51 | onConfirm(e) { | 51 | onConfirm(e) { |
52 | this.pickerText = e.label; | 52 | this.pickerText = e.label; |
53 | }, | 53 | }, |
54 | changeDefalutAddress(e){ | 54 | changeDefalutAddress(e){ |
55 | this.isDefalutAddress = e.target.value | 55 | this.isDefalutAddress = e.target.value |
56 | } | 56 | } |
57 | } | 57 | } |
58 | } | 58 | } |
59 | </script> | 59 | </script> |
60 | 60 | ||
61 | <style lang="scss"> | 61 | <style lang="scss"> |
62 | .wrap{ | 62 | .wrap{ |
63 | height: 100vh; | 63 | height: 100vh; |
64 | background-color:#F2F2F2 ; | 64 | background-color:#F2F2F2 ; |
65 | font-family: PingFangSC-Regular; | 65 | font-family: PingFangSC-Regular; |
66 | letter-spacing: -0.23px; | 66 | letter-spacing: -0.23px; |
67 | padding-top: 19rpx; | 67 | padding-top: 19rpx; |
68 | } | 68 | } |
69 | .content{ | 69 | .content{ |
70 | background-color: #FFFFFF; | 70 | background-color: #FFFFFF; |
71 | border-radius: 8px; | 71 | border-radius: 8px; |
72 | border-radius: 8px; | 72 | border-radius: 8px; |
73 | padding: 40rpx 56rpx; | 73 | padding: 40rpx 56rpx; |
74 | margin-left: 40rpx; | 74 | margin-left: 40rpx; |
75 | width: 670rpx; | 75 | width: 670rpx; |
76 | box-sizing: border-box; | 76 | box-sizing: border-box; |
77 | .item{ | 77 | .item{ |
78 | display: flex; | 78 | display: flex; |
79 | justify-content: flex-start; | 79 | justify-content: flex-start; |
80 | font-size: 14px; | 80 | font-size: 14px; |
81 | align-items: center; | 81 | align-items: center; |
82 | height: 112rpx; | 82 | height: 112rpx; |
83 | border-bottom: 1rpx solid #E9E9E9; | 83 | border-bottom: 1rpx solid #E9E9E9; |
84 | .itemText{ | 84 | .itemText{ |
85 | width: 162rpx; | 85 | width: 162rpx; |
86 | font-family: PingFangSC-Regular; | 86 | font-family: PingFangSC-Regular; |
87 | letter-spacing: -0.26px; | 87 | letter-spacing: -0.26px; |
88 | } | 88 | } |
89 | .btn{ | 89 | .btn{ |
90 | color: #333333 !important; | 90 | color: #333333 !important; |
91 | } | 91 | } |
92 | } | 92 | } |
93 | .check{ | 93 | .check{ |
94 | justify-content: space-between; | 94 | justify-content: space-between; |
95 | } | 95 | } |
96 | } | 96 | } |
97 | .button{ | 97 | .button{ |
98 | position: fixed; | 98 | position: fixed; |
99 | bottom: 0; | 99 | bottom: 0; |
100 | left: 0; | 100 | left: 0; |
101 | height: 112rpx; | 101 | height: 112rpx; |
102 | width: 100%; | 102 | width: 100%; |
103 | background: #FF6B4A; | 103 | background: #FF6B4A; |
104 | display: flex; | 104 | display: flex; |
105 | justify-content: center; | 105 | justify-content: center; |
106 | align-items: center; | 106 | align-items: center; |
107 | font-size: 16px; | 107 | font-size: 16px; |
108 | color: #FFFFFF; | 108 | color: #FFFFFF; |
109 | letter-spacing: -0.3px; | 109 | letter-spacing: -0.3px; |
110 | } | 110 | } |
111 | </style> | 111 | </style> |
112 | 112 |
src/pages/index/index.vue
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 |
14 | {{ item.text }}<icon type="info" size="14"></icon> | 14 | class="screenItem" |
15 | </view> | 15 | v-bind:class="{ active: current === item.current }" |
16 | <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')"> | 16 | v-if="item.current === 2" |
17 | {{ item.text }}<icon type="info" size="14"></icon> | 17 | @click="dropDown" |
18 | </view> | 18 | > |
19 | <view v-if="item.current !== 2&&item.current!==4"> | 19 | {{ item.text }} |
20 | <view class="screenItem" v-bind:class="{ active: current === item.current }">{{ item.text }}</view> | 20 | <icon type="info" size="14"></icon> |
21 | </view> | 21 | </view> |
22 | </view> | 22 | <view |
23 | </view> | 23 | class="screenItem" |
24 | </view> | 24 | v-bind:class="{ active: current === item.current }" |
25 | <uni-drawer ref="showRight" mask="true" maskClick=true mode="right" :width="320" @change="change($event,'showRight')"> | 25 | v-if="item.current === 4" |
26 | <view class="close"> | 26 | @click="showDrawer('showRight')" |
27 | <view @click="closeDrawer('showRight')"><text class="word-btn-white">关闭</text></view> | 27 | > |
28 | </view> | 28 | {{ item.text }} |
29 | </uni-drawer> | 29 | <icon type="info" size="14"></icon> |
30 | 30 | </view> | |
31 | 31 | <view v-if="item.current !== 2&&item.current!==4"> | |
32 | 32 | <view | |
33 | <!-- 筛选菜单--> | 33 | class="screenItem" |
34 | <view class="content-wrap"> | 34 | v-bind:class="{ active: current === item.current }" |
35 | <view> | 35 | >{{ item.text }}</view> |
36 | <HMfilterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" :updateMenuName="true" @confirm="confirm" dataFormat="Object"></HMfilterDropdown> | 36 | </view> |
37 | <!-- 商品列表 --> | 37 | </view> |
38 | <view class="goods-list"> | 38 | </view> |
39 | <view class="product-list"> | 39 | </view> |
40 | <view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" > | 40 | <Uni-drawer |
41 | <Card :goods = "goods"></Card> | 41 | ref="showRight" |
42 | </view> | 42 | mask="true" |
43 | </view> | 43 | maskClick="true" |
44 | <view class="loading-text">{{loadingText}}</view> | 44 | mode="right" |
45 | </view> | 45 | :width="320" |
46 | 46 | @change="change($event,'showRight')" | |
47 | </view> | 47 | > |
48 | </view> | 48 | <view class="close"> |
49 | </view> | 49 | <view @click="closeDrawer('showRight')"> |
50 | <text class="word-btn-white">关闭</text> | ||
51 | </view> | ||
52 | </view> | ||
53 | </Uni-drawer> | ||
54 | |||
55 | <!-- 筛选菜单--> | ||
56 | <view class="content-wrap"> | ||
57 | <view> | ||
58 | <HMfilterDropdown | ||
59 | :filterData="filterData" | ||
60 | :defaultSelected="filterDropdownValue" | ||
61 | :updateMenuName="true" | ||
62 | @confirm="confirm" | ||
63 | data-format="Object" | ||
64 | ></HMfilterDropdown> | ||
65 | <!-- 商品列表 --> | ||
66 | <view class="goods-list"> | ||
67 | <view class="product-list"> | ||
68 | <view class="product" v-for="(goods) in goodsList" :key="goods.id"> | ||
69 | <Card :goods="goods"></Card> | ||
70 | </view> | ||
71 | </view> | ||
72 | <view class="loading-text">{{loadingText}}</view> | ||
73 | </view> | ||
74 | </view> | ||
75 | </view> | ||
76 | </view> | ||
50 | </template> | 77 | </template> |
51 | 78 | ||
52 | <script> | 79 | <script> |
53 | import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; | 80 | import UniDrawer from "@/components/Uni-drawer/Uni-drawer.vue"; |
54 | import Card from "../../components/Card/Card.vue" | 81 | import Card from "../../components/Card/Card.vue"; |
55 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; | 82 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; |
56 | import data from '@/common/data.js';//筛选菜单数据 | 83 | import data from "@/common/data.js"; //筛选菜单数据 |
57 | export default { | 84 | export default { |
58 | components: { | 85 | components: { |
59 | 'UniDrawer':UniDrawer, | 86 | UniDrawer: UniDrawer, |
60 | 'HMfilterDropdown':HMfilterDropdown, | 87 | HMfilterDropdown: HMfilterDropdown, |
61 | 'Card':Card | 88 | Card: Card |
62 | }, | 89 | }, |
63 | data() { | 90 | data() { |
64 | return { | 91 | return { |
65 | screenItems: [ | 92 | screenItems: [ |
66 | {current:0,text:'全部',hasIcon:false}, | 93 | { current: 0, text: "全部", hasIcon: false }, |
67 | {current:1,text:'销量',hasIcon:false}, | 94 | { current: 1, text: "销量", hasIcon: false }, |
68 | {current:2,text:'价格',hasIcon:true}, | 95 | { current: 2, text: "价格", hasIcon: true }, |
69 | {current:3,text:'折扣',hasIcon:false}, | 96 | { current: 3, text: "折扣", hasIcon: false }, |
70 | {current:4,text:'筛选',hasIcon:true}, | 97 | { current: 4, text: "筛选", hasIcon: true } |
71 | ], | 98 | ], |
72 | current: 0, | 99 | current: 0, |
73 | showRight: false, | 100 | showRight: false, |
74 | indexArr:'', | 101 | indexArr: "", |
75 | valueArr:'', | 102 | valueArr: "", |
76 | //商品数据 | 103 | // //商品数据 |
77 | goodsList:[ | 104 | goodsList: [ |
78 | { goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 105 | { |
79 | { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 106 | // goods_id: 0, |
80 | { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 107 | // img: "/static/img/goods/p1.jpg", |
81 | { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 108 | // name: "商品名称", |
82 | { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 109 | // originCost: "¥198", |
83 | { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 110 | // price: "¥168", |
84 | { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 111 | // slogan: "1235人浏览" |
85 | { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 112 | } |
86 | { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' }, | 113 | ], |
87 | { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称',originCost:'¥198',price: '¥168', slogan:'1235人浏览' } | 114 | loadingText: "正在加载...", |
88 | ], | 115 | filterDropdownValue: [], |
89 | loadingText:"正在加载...", | 116 | filterData: [] |
90 | filterDropdownValue:[], | 117 | }; |
91 | filterData:[] | 118 | }, |
92 | } | 119 | filters: { |
93 | }, | 120 | outData(value) { |
94 | filters: { | 121 | return JSON.stringify(value); |
95 | outData(value) { | 122 | } |
96 | return JSON.stringify(value); | 123 | }, |
97 | } | 124 | onLoad: function() { |
98 | }, | 125 | uni.request({ |
99 | onLoad: function () { | 126 | url: "https://api.glass.xiuyetang.com/app/prod/list", //仅为示例,并非真实接口地址。 |
100 | //定时器模拟ajax异步请求数据 | 127 | method: "post", |
101 | // setTimeout(()=>{ | 128 | data: { |
102 | // //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null | 129 | // text: 'uni.request' |
103 | // this.filterDropdownValue = [ | 130 | }, |
104 | // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 | 131 | header: { |
105 | // [null,null], //第1个菜单选中 都不选中 | 132 | // 'custom-header': 'hello', //自定义请求头信息 |
106 | // [1], //第2个菜单选中 一级菜单的第1项 | 133 | "Content-Type": "application/x-www-form-urlencoded" |
107 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 | 134 | // 'Content-Type':'multipart/form-data' |
108 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 | 135 | // 'Content-Type':'ext/plain' |
109 | // ]; | 136 | }, |
110 | this.filterData = data; | 137 | timeout: 3000, |
111 | // },100); | 138 | // dataType:'json' |
112 | // 模拟ajax请求子菜单数据。 | 139 | // responseType:'text', |
113 | // setTimeout(()=>{ | 140 | // sslVerify: true,//验证 ssl 证书 |
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"}]; | 141 | withCredentials: false, //跨域请求时是否携带凭证(cookies) |
115 | // },5000) | 142 | success: res => { |
116 | }, | 143 | console.error("success status === > ", res); |
117 | methods: { | 144 | this.goodsList = res.data.data; |
118 | showDrawer(e) { | 145 | // console.log('res.data', res.data); |
119 | this.$refs[e].open() | 146 | // this.text = 'request success'; |
120 | }, | 147 | }, |
121 | closeDrawer(e) { | 148 | fail: res => { |
122 | this.$refs[e].close() | 149 | console.log("fail status === > ", res); |
123 | }, | 150 | }, |
124 | change(e, type) { | 151 | complete: res => { |
125 | this[type] = e | 152 | console.log("complete status === > ", res); |
126 | }, | 153 | } |
127 | onClickItem(e) { | 154 | }); |
128 | if (this.current !== e) { | 155 | //定时器模拟ajax异步请求数据 |
129 | this.current = e; | 156 | // setTimeout(()=>{ |
130 | } | 157 | // //传入defaultSelected的结构不能错,错了就报错运行异常。 不选中的项目传入null |
131 | }, | 158 | // this.filterDropdownValue = [ |
132 | dropDown(){ | 159 | // [1,1,0], //第0个菜单选中 一级菜单的第1项,二级菜单的第1项,三级菜单的第3项 |
133 | console.log('下拉') | 160 | // [null,null], //第1个菜单选中 都不选中 |
134 | }, | 161 | // [1], //第2个菜单选中 一级菜单的第1项 |
135 | //接收菜单结果 | 162 | // [[0],[1,2,7],[1,0]], //筛选菜单选中 第一个筛选的第0项,第二个筛选的第1,2,7项,第三个筛选的第1,0项 |
136 | confirm(e){ | 163 | // [[0],[1],[1]], //单选菜单选中 第一个筛选的第0项,第二个筛选的第1项,第三个筛选的第1项 |
137 | this.indexArr = e.index; | 164 | // ]; |
138 | this.valueArr = e.value; | 165 | // this.filterData = data; |
139 | return; | 166 | // },100); |
140 | console.log('修改菜单'); | 167 | // 模拟ajax请求子菜单数据。 |
141 | this.filterData[4].submenu[1] = { | 168 | // setTimeout(()=>{ |
142 | "name": "项目2", | 169 | // console.log('发起请求','ddddddd'); |
143 | "submenu": [ | 170 | // // 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"}]; |
144 | 171 | // },3000); | |
145 | ] | 172 | }, |
146 | } | 173 | methods: { |
147 | } | 174 | showDrawer(e) { |
148 | }, | 175 | this.$refs[e].open(); |
149 | onNavigationBarButtonTap(e) { | 176 | }, |
150 | this.showRight = !this.showRight | 177 | closeDrawer(e) { |
151 | }, | 178 | this.$refs[e].close(); |
152 | //上拉加载, | 179 | }, |
153 | onReachBottom(){ | 180 | change(e, type) { |
154 | console.log('到底加载') | 181 | this[type] = e; |
155 | let len = this.goodsList.length; | 182 | }, |
156 | if(len>=30){ | 183 | onClickItem(e) { |
157 | this.loadingText="~~到底了~~"; | 184 | if (this.current !== e) { |
158 | return false; | 185 | this.current = e; |
159 | }else{ | 186 | } |
160 | this.loadingText="正在加载..."; | 187 | }, |
161 | } | 188 | dropDown() { |
162 | let end_goods_id = this.goodsList[len-1].goods_id; | 189 | console.log("下拉"); |
163 | for(let i=1;i<=10;i++){ | 190 | }, |
164 | let goods_id = end_goods_id+i; | 191 | //接收菜单结果 |
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人付款' }; | 192 | confirm(e) { |
166 | this.goodsList.push(p); | 193 | this.indexArr = e.index; |
167 | } | 194 | this.valueArr = e.value; |
168 | }, | 195 | return; |
169 | } | 196 | console.log("修改菜单"); |
197 | this.filterData[4].submenu[1] = { | ||
198 | name: "项目2", | ||
199 | submenu: [] | ||
200 | }; | ||
201 | } | ||
202 | }, | ||
203 | onNavigationBarButtonTap(e) { | ||
204 | this.showRight = !this.showRight; | ||
205 | }, | ||
206 | //上拉加载, | ||
207 | onReachBottom() { | ||
208 | console.log("到底加载"); | ||
209 | let len = this.goodsList.length; | ||
210 | if (len >= 30) { | ||
211 | this.loadingText = "~~到底了~~"; | ||
212 | return false; | ||
213 | } else { | ||
214 | this.loadingText = "正在加载..."; | ||
215 | } | ||
216 | let end_goods_id = this.goodsList[len - 1].goods_id; | ||
217 | for (let i = 1; i <= 10; i++) { | ||
218 | let goods_id = end_goods_id + i; | ||
219 | let p = { | ||
220 | goods_id: goods_id, | ||
221 | img: | ||
222 | "/static/img/goods/p" + | ||
223 | (goods_id % 10 == 0 ? 10 : goods_id % 10) + | ||
224 | ".jpg", | ||
225 | name: "商品名称", | ||
226 | originCost: "¥198", | ||
227 | price: "¥168", | ||
228 | slogan: "1235人付款" | ||
229 | }; | ||
230 | this.goodsList.push(p); | ||
231 | } | ||
232 | } | ||
233 | }; | ||
170 | </script> | 234 | </script> |
171 | 235 | ||
172 | <style lang="scss"> | 236 | <style lang="scss"> |
173 | .content { | 237 | .content { |
174 | display: flex; | 238 | display: flex; |
175 | flex-direction: column; | 239 | flex-direction: column; |
176 | align-items: center; | 240 | align-items: center; |
177 | justify-content: center; | 241 | justify-content: center; |
178 | background-color: #F7F6F6; | 242 | background-color: #f7f6f6; |
179 | } | 243 | } |
180 | .header{ | 244 | .header { |
181 | display: flex; | 245 | display: flex; |
182 | flex-direction: column; | 246 | flex-direction: column; |
183 | align-items: center; | 247 | align-items: center; |
184 | justify-content: center; | 248 | justify-content: center; |
185 | background-color: #F7F6F6; | 249 | background-color: #f7f6f6; |
186 | height:178rpx ; | 250 | height: 178rpx; |
187 | width: 100%; | 251 | width: 100%; |
188 | z-index: 999; | 252 | z-index: 999; |
189 | position: fixed; | 253 | position: fixed; |
190 | top: 0; | 254 | top: 0; |
191 | left: 0; | 255 | left: 0; |
192 | } | 256 | } |
193 | .searchBar { | 257 | .searchBar { |
194 | width: 670rpx; | 258 | width: 670rpx; |
195 | display: flex; | 259 | display: flex; |
196 | justify-content: center; | 260 | justify-content: center; |
197 | align-items: center; | 261 | align-items: center; |
198 | box-sizing: border-box; | 262 | box-sizing: border-box; |
199 | padding: 0rpx 16rpx; | 263 | padding: 0rpx 16rpx; |
200 | border: 1px solid #FF6B4A; | 264 | border: 1px solid #ff6b4a; |
201 | border-radius: 8rpx; | 265 | border-radius: 8rpx; |
202 | background-color: #ffffff; | 266 | background-color: #ffffff; |
203 | } | 267 | } |
204 | 268 | ||
205 | .searchIpt { | 269 | .searchIpt { |
206 | height: 68rpx; | 270 | height: 68rpx; |
207 | width: 670rpx; | 271 | width: 670rpx; |
208 | padding: 16rpx; | 272 | padding: 16rpx; |
209 | font-size: 28rpx; | 273 | font-size: 28rpx; |
210 | box-sizing: border-box; | 274 | box-sizing: border-box; |
211 | } | 275 | } |
212 | .screenBar{ | 276 | .screenBar { |
213 | width: 670rpx; | 277 | width: 670rpx; |
214 | height: 110rpx; | 278 | height: 110rpx; |
215 | display: flex; | 279 | display: flex; |
216 | flex-direction: row; | 280 | flex-direction: row; |
217 | justify-content: space-between; | 281 | justify-content: space-between; |
218 | align-items: center; | 282 | align-items: center; |
219 | color: #333333; | 283 | color: #333333; |
220 | font-size: 32rpx; | 284 | font-size: 32rpx; |
221 | } | 285 | } |
222 | .active{ | 286 | .active { |
223 | color: #FF6B4A; | 287 | color: #ff6b4a; |
224 | } | 288 | } |
225 | .screenItem{ | 289 | .screenItem { |
226 | display: flex; | 290 | display: flex; |
227 | justify-content: center; | 291 | justify-content: center; |
228 | align-items: center; | 292 | align-items: center; |
229 | } | 293 | } |
230 | .content-wrap{ | 294 | .content-wrap { |
231 | width: 100%; | 295 | width: 100%; |
232 | background-color: #FFFFFF; | 296 | background-color: #ffffff; |
233 | } | 297 | } |
234 | 298 | ||
235 | .HMfilterDropdown{ | 299 | .HMfilterDropdown { |
236 | top: 178rpx !important; | 300 | top: 178rpx !important; |
237 | } | 301 | } |
238 | |||
239 | .goods-list{ | ||
240 | padding-top: 286rpx; | ||
241 | .loading-text{ | ||
242 | width: 100%; | ||
243 | display: flex; | ||
244 | justify-content: center; | ||
245 | align-items: center; | ||
246 | height: 30px; | ||
247 | color: #979797; | ||
248 | font-size: 12px; | ||
249 | } | ||
250 | .product-list{ | ||
251 | width: 92%; | ||
252 | padding: 0 4% 3vw 4%; | ||
253 | display: flex; | ||
254 | justify-content: space-between; | ||
255 | flex-wrap: wrap; | ||
256 | .product{ | ||
257 | width: 48%; | ||
258 | margin: 0 0 20rpx 0; | ||
259 | background: #FFFFFF; | ||
260 | border: 1px solid #F2F2F2; | ||
261 | } | ||
262 | } | ||
263 | } | ||
264 | 302 | ||
303 | .goods-list { |