Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
fafba665 by simon
Options

版本提交

1 parent fca038b5
Inline Side-by-side
Showing 16 changed files with 702 additions and 157 deletions
...@@ -19,68 +19,68 @@ ...@@ -19,68 +19,68 @@
19 // @lazysprite "filetype"; 19 // @lazysprite "filetype";
20 20
21 .test { 21 .test {
22 background-image: url(%ASSETS_IMG%/qr-r.jpg); 22 background-image: url(%ASSETS_IMG%/qr-r.jpg);
23 } 23 }
24 24
25 .app { 25 .app {
26 height: 100%; 26 height: 100%;
27 justify-content: space-between; 27 justify-content: space-between;
28 // text-align: center; 28 // text-align: center;
29 box-sizing: border-box; 29 box-sizing: border-box;
30 font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0; 30 font-family: PingFangSC-Regular, -apple-system-font, Helvetica Neue, Helvetica, sans-serif, FZY3JW-GB1-0;
31 } 31 }
32 32
33 .app__width { 33 .app__width {
34 width: 750px; 34 width: 750px;
35 } 35 }
36 36
37 .app__width { 37 .app__width {
38 width: 750px; 38 width: 750px;
39 } 39 }
40 40
41 .app__inner { 41 .app__inner {
42 margin: 20px; 42 margin: 20px;
43 } 43 }
44 44
45 .app__title { 45 .app__title {
46 font-size: $fontSize; 46 font-size: $fontSize;
47 line-height: $fontSize + 4px; 47 line-height: $fontSize + 4px;
48 font-weight: bold; 48 font-weight: bold;
49 padding-bottom: 10px; 49 padding-bottom: 10px;
50 margin-bottom: 20px; 50 margin-bottom: 20px;
51 border-bottom: .5px solid #EEEEEE; 51 border-bottom: .5px solid #EEEEEE;
52 } 52 }
53 53
54 .app__desc { 54 .app__desc {
55 font-size: $fontSizeSmaller; 55 font-size: $fontSizeSmaller;
56 line-height: $fontSizeSmaller +2px; 56 line-height: $fontSizeSmaller +2px;
57 margin-bottom: 20px; 57 margin-bottom: 20px;
58 color: $colorGray; 58 color: $colorGray;
59 } 59 }
60 60
61 .app__bgc { 61 .app__bgc {
62 position: fixed; 62 position: fixed;
63 background-color: #ffffff; 63 background-color: #ffffff;
64 width: 100%; 64 width: 100%;
65 height: 100%; 65 height: 100%;
66 } 66 }
67 67
68 .app__bg { 68 .app__bg {
69 position: absolute; 69 position: absolute;
70 width: 100%; 70 width: 100%;
71 height: 100%; 71 height: 100%;
72 } 72 }
73 73
74 .app__top-shadow { 74 .app__top-shadow {
75 position: fixed; 75 position: fixed;
76 width: 750px; 76 width: 750px;
77 height: 1px; 77 height: 1px;
78 box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07); 78 box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07);
79 background-color: #ffffff; 79 background-color: #ffffff;
80 } 80 }
81 81
82 .app__content { 82 .app__content {
83 position: relative; 83 position: relative;
84 } 84 }
85 85
86 86
...@@ -88,26 +88,31 @@ ...@@ -88,26 +88,31 @@
88 // web font icon 88 // web font icon
89 89
90 @font-face { 90 @font-face {
91 font-family: "iconfont"; 91 font-family: "iconfont";
92 src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAAB6gAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDDIJmATYCJAMMCwgABCAFhG0HORuvBsgOJUHBwIABAAlgPHyN/f7c3UVEk0mi+3QSQxJNJCoexUrxUhhKIyT4UsKbL89+kizTNWb3wyt7UkR96ayA4xev1q04fZzIa32ey/Gt5wc26luWy5iT9qKFAcYBBbQ3RgEFWiAJesPYlRdxn0C9YccRqxl5ZcBCYSwLxJFS3gwsUk6lpj7UCtUle4t4Yqo2XaeXAHj0vx//QUhYkFRlxtq1w/Q2kPRz+iOmhipDoM51Gx7PD3aIjBlAITZLgxuoMDODUq8YTerLqxUhjRU3GgFfqeqrzT88kiCqGbWNYAJlEz+nbQmJP1h91rUZVMPcGeAZM51XhqohJw97O/vO23paqy3T6coNhsqQ1esr3nVWF19mTZ3YnOwtWwPk5bvMfvYCQV11V+xUzZx02tPO6H02TtP0y4dn5a7M9ravfPvs/poNl43TTmVrW87O66dcKzd3myo2Tjo5rW07l6+fcXXd3KmUDdBKXH240GtvAAw49qfa2BeatkTevUsumTJX5pzRRVy781FXe+YP15YALi0+kkDHQRm8OLz2sP/U1NGjIPxKdyVpafxHpKWvbajtddvnaxmZHLP0XGY1d2wvLarJWrd3LMD6Q1DiSPHusrPgvOxtlAKDyt7bk32nH3emP+npcwo2dKU/Vj040Jn2+HTvAU5VFtOf5vZDf683NVrpbEvIO7N3IX421A40MRbmdVIPQGXQhMi7/+o3vjanTBtt4/7Vygr4/p/GIHW7aqBWorXqz7QVQMVYCK4xXLnISlup57Ntpvcth3Ju8j8aod2b/tauu8+FWl0xkhpDyGqNEIWZQZUG86hWawH1pmUebtBBQolShynjAKHVFSTNPpG1ekUU5jWqdPuGaq1Bod56OJ7ZYCyUdKqEmjFqgy3dUNkqCozlwXRQX4Lk7VyzlNT4XAWSNMo4DA4IyuYzkYCkMTZoOuQhGDOQkUQeZoDHEMeJUC2JKtSKAxQYq2MCA5myFwW0ijygrZAgzTCkDdSiG6TUSiRg3MEYnft8CUSuHaeZVNNTka6ASDSUo0PBAgS1IDKNQquea3lGo4NcCAxjQAyJiAdlgFkIhyOC1OWzVJBWWABFj5RajECzH9PWGDC/mX++Q1DPGJsjRY6i5hgx1hSNwhTxatwNAAAAAA==') format('woff2'), 92 src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAAB6gAAANdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDDIJmATYCJAMMCwgABCAFhG0HORuvBsgOJUHBwIABAAlgPHyN/f7c3UVEk0mi+3QSQxJNJCoexUrxUhhKIyT4UsKbL89+kizTNWb3wyt7UkR96ayA4xev1q04fZzIa32ey/Gt5wc26luWy5iT9qKFAcYBBbQ3RgEFWiAJesPYlRdxn0C9YccRqxl5ZcBCYSwLxJFS3gwsUk6lpj7UCtUle4t4Yqo2XaeXAHj0vx//QUhYkFRlxtq1w/Q2kPRz+iOmhipDoM51Gx7PD3aIjBlAITZLgxuoMDODUq8YTerLqxUhjRU3GgFfqeqrzT88kiCqGbWNYAJlEz+nbQmJP1h91rUZVMPcGeAZM51XhqohJw97O/vO23paqy3T6coNhsqQ1esr3nVWF19mTZ3YnOwtWwPk5bvMfvYCQV11V+xUzZx02tPO6H02TtP0y4dn5a7M9ravfPvs/poNl43TTmVrW87O66dcKzd3myo2Tjo5rW07l6+fcXXd3KmUDdBKXH240GtvAAw49qfa2BeatkTevUsumTJX5pzRRVy781FXe+YP15YALi0+kkDHQRm8OLz2sP/U1NGjIPxKdyVpafxHpKWvbajtddvnaxmZHLP0XGY1d2wvLarJWrd3LMD6Q1DiSPHusrPgvOxtlAKDyt7bk32nH3emP+npcwo2dKU/Vj040Jn2+HTvAU5VFtOf5vZDf683NVrpbEvIO7N3IX421A40MRbmdVIPQGXQhMi7/+o3vjanTBtt4/7Vygr4/p/GIHW7aqBWorXqz7QVQMVYCK4xXLnISlup57Ntpvcth3Ju8j8aod2b/tauu8+FWl0xkhpDyGqNEIWZQZUG86hWawH1pmUebtBBQolShynjAKHVFSTNPpG1ekUU5jWqdPuGaq1Bod56OJ7ZYCyUdKqEmjFqgy3dUNkqCozlwXRQX4Lk7VyzlNT4XAWSNMo4DA4IyuYzkYCkMTZoOuQhGDOQkUQeZoDHEMeJUC2JKtSKAxQYq2MCA5myFwW0ijygrZAgzTCkDdSiG6TUSiRg3MEYnft8CUSuHaeZVNNTka6ASDSUo0PBAgS1IDKNQquea3lGo4NcCAxjQAyJiAdlgFkIhyOC1OWzVJBWWABFj5RajECzH9PWGDC/mX++Q1DPGJsjRY6i5hgx1hSNwhTxatwNAAAAAA==') format('woff2'),
93 } 93 }
94 94
95 .iconfont { 95 .iconfont {
96 font-family: "iconfont" !important; 96 font-family: "iconfont" !important;
97 font-size: 16px; 97 font-size: 16px;
98 font-style: normal; 98 font-style: normal;
99 -webkit-font-smoothing: antialiased; 99 -webkit-font-smoothing: antialiased;
100 -moz-osx-font-smoothing: grayscale; 100 -moz-osx-font-smoothing: grayscale;
101 } 101 }
102 102
103 .iconrefresh:before { 103 .iconrefresh:before {
104 content: "\e874"; 104 content: "\e874";
105 } 105 }
106 106
107 .iconempty:before { 107 .iconempty:before {
108 content: "\e6a6"; 108 content: "\e6a6";
109 } 109 }
110 110
111 .drop-down-item :last-child { 111 .drop-down-item :last-child {
112 border-bottom: none; 112 border-bottom: none;
113 }
114
115 .link {
116 color: $colorBlue;
113 } 117 }
118
......
...@@ -8,75 +8,95 @@ ...@@ -8,75 +8,95 @@
8 * 8 *
9 */ 9 */
10 10
11 // 居中按钮样式
12 @mixin btn-center($width, $height) {
13 width: $width;
14 height: $height;
15 line-height: $height;
16 text-align: center;
17 }
18
19 // 超过多少行自动省略 默认一行
20 @mixin ellipsis($line:1) {
21 display: -webkit-box;
22 word-break: break-all;
23 -webkit-box-orient: vertical;
24 -webkit-line-clamp: $line;
25 overflow: hidden;
26 text-overflow: ellipsis;
27 }
28
11 // 文字截取 29 // 文字截取
12 @mixin text-overflow() { 30 @mixin text-overflow() {
13 overflow: hidden; 31 overflow: hidden;
14 white-space: normal; 32 white-space: normal;
15 text-overflow: ellipsis; 33 text-overflow: ellipsis;
16 word-break: break-all; 34 word-break: break-all;
17 word-wrap: normal; 35 word-wrap: normal;
18 } 36 }
19 37
20 @mixin word-break() { 38 @mixin word-break() {
21 word-break: break-all; 39 word-break: break-all;
22 word-wrap: break-word; 40 word-wrap: break-word;
23 white-space: normal; 41 white-space: normal;
24 } 42 }
25 43
26 // No wrap 44 // No wrap
27 @mixin no-wrap() { 45 @mixin no-wrap() {
28 word-break: normal; 46 word-break: normal;
29 word-wrap: normal; 47 word-wrap: normal;
30 white-space: nowrap; 48 white-space: nowrap;
31 } 49 }
32 50
33 // 清除浮动 51 // 清除浮动
34 @mixin clearfix() { 52 @mixin clearfix() {
35 &:before, 53
36 &:after { 54 &:before,
37 content: " "; // 1 55 &:after {
38 display: table; // 2 56 content: " "; // 1
39 } 57 display: table; // 2
40 &:after { 58 }
41 clear: both; 59
42 } 60 &:after {
61 clear: both;
62 }
43 } 63 }
44 64
45 // Single side border-radius 65 // Single side border-radius
46 @mixin border-top-radius($radius) { 66 @mixin border-top-radius($radius) {
47 border-top-right-radius: $radius; 67 border-top-right-radius: $radius;
48 border-top-left-radius: $radius; 68 border-top-left-radius: $radius;
49 } 69 }
50 70
51 @mixin border-right-radius($radius) { 71 @mixin border-right-radius($radius) {
52 border-bottom-right-radius: $radius; 72 border-bottom-right-radius: $radius;
53 border-top-right-radius: $radius; 73 border-top-right-radius: $radius;
54 } 74 }
55 75
56 @mixin border-bottom-radius($radius) { 76 @mixin border-bottom-radius($radius) {
57 border-bottom-right-radius: $radius; 77 border-bottom-right-radius: $radius;
58 border-bottom-left-radius: $radius; 78 border-bottom-left-radius: $radius;
59 } 79 }
60 80
61 @mixin border-left-radius($radius) { 81 @mixin border-left-radius($radius) {
62 border-bottom-left-radius: $radius; 82 border-bottom-left-radius: $radius;
63 border-top-left-radius: $radius; 83 border-top-left-radius: $radius;
64 } 84 }
65 85
66 // Center-align a block level element 86 // Center-align a block level element
67 @mixin center-block() { 87 @mixin center-block() {
68 display: block; 88 display: block;
69 margin-left: auto; 89 margin-left: auto;
70 margin-right: auto; 90 margin-right: auto;
71 } 91 }
72 92
73 // CSS image replacement 93 // CSS image replacement
74 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 94 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
75 @mixin hide-text() { 95 @mixin hide-text() {
76 font-size: 0; 96 font-size: 0;
77 line-height: 0; 97 line-height: 0;
78 color: transparent; 98 color: transparent;
79 text-shadow: none; 99 text-shadow: none;
80 background-color: transparent; 100 background-color: transparent;
81 border: 0; 101 border: 0;
82 } 102 }
......
...@@ -237,3 +237,8 @@ ...@@ -237,3 +237,8 @@
237 width: 100%; 237 width: 100%;
238 height: 100%; 238 height: 100%;
239 } 239 }
240
241 .shadow {
242 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10);
243 border-radius: 8px;
244 }
......
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {},
4 onLoad(options) {} 4 onLoad(options) {},
5 // 编辑收货地址
6 onAddressEditHandler() {
7 app.router.push({
8 path: "addressEdit"
9 })
10 },
11 // 添加收货地址
12 onAddressAddHandler() {
13 app.router.push({
14 path: "addressEdit"
15 })
16 }
5 }) 17 })
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "我的收货地址"
3 } 3 }
......
1 @import '../../assets/scss/mixins'; 1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 $contentWidth:690px;
5
4 .page { 6 .page {
5 .bgc {} 7 .bgc {
8 background: #F8F8F8;
9 }
6 10
7 .bg {} 11 .bg {}
8 12
9 .main { 13 .main {
10 .top-space { 14 .top-space {
11 height: 0px; 15 height: 20px;
16 }
17
18 // 内容容器通用样式
19 .cont-wrap {
20 margin: 20px auto 0;
21 width: $contentWidth;
22 background: #fff;
23 padding: 30px 28px;
24 @extend .bb;
25 @extend .shadow;
12 } 26 }
13 27
14 .content { 28 .content {
15 position: relative; 29 position: relative;
30
31 .manage-wrap {}
32
33 // 表单
34 .form {
35 padding: 30px 30px;
36
37 &-tit {
38 margin-bottom: 28px;
39 display: flex;
40 justify-content: space-between;
41 font-size: 24px;
42
43 .address-message {
44 color: #333333;
45 display: flex;
46 align-content: center;
47 align-items: center;
48 height: 36px;
49
50 .address {
51 font-size: 32px;
52 margin-right: 20px;
53 vertical-align: middle;
54 }
55
56 .used {
57 color: #fff;
58 background: #FF7B21;
59 border-radius: 8px;
60 display: inline-block;
61 padding: 2px 12px;
62 text-align: center;
63 }
64 }
65
66 .address-edit {
67 color: #3680EB;
68 font-size: 28px;
69 }
70 }
71
72 &-item {
73 margin-bottom: 20px;
74 font-size: 28px;
75 display: flex;
76
77 .label {
78 min-width: 140px;
79 color: #666666;
80 }
81
82 .cont {
83 color: #333333;
84 @extend .bb;
85 padding-left: 20px;
86 }
87 }
88
89 }
90
91 // 添加地址
92 .manage-add {
93 width: $contentWidth;
94 margin: 20px auto;
95 @extend .bb;
96 background: #fff;
97 padding: 38px 30px;
98 font-size: 32px;
99 color: #3680EB;
100 @extend .shadow;
101 }
16 } 102 }
17 } 103 }
18 } 104 }
......
...@@ -3,6 +3,54 @@ ...@@ -3,6 +3,54 @@
3 <view class="app__bg bg"></view> 3 <view class="app__bg bg"></view>
4 <view class="app__content main"> 4 <view class="app__content main">
5 <view class="top-space"></view> 5 <view class="top-space"></view>
6 <view class="content"></view> 6 <view class="content">
7 <!-- 地址 item -->
8 <view class="manage-wrap">
9 <view class="cont-wrap form">
10 <view class="form-tit">
11 <view class="address-message">
12 <view class="address">地址一：默认地址</view>
13 <view class="used">当前使用</view>
14 </view>
15 <view bindtap="onAddressEditHandler" class="address-edit">编辑</view>
16 </view>
17 <view class="form-item">
18 <view class="label">收货人</view>
19 <view class="cont">郑亮亮</view>
20 </view>
21 <view class="form-item">
22 <view class="label">收货电话</view>
23 <view class="cont">13800000000</view>
24 </view>
25 <view class="form-item">
26 <view class="label">收货地址</view>
27 <view class="cont">深圳市龙岗区XXX路</view>
28 </view>
29 </view>
30 <view class="cont-wrap form">
31 <view class="form-tit">
32 <view class="address-message">
33 <view class="address">地址一：默认地址</view>
34 <view class="used">当前使用</view>
35 </view>
36 <view bindtap="onAddressEditHandler" class="address-edit">编辑</view>
37 </view>
38 <view class="form-item">
39 <view class="label">收货人</view>
40 <view class="cont">郑亮亮</view>
41 </view>
42 <view class="form-item">
43 <view class="label">收货电话</view>
44 <view class="cont">13800000000</view>
45 </view>
46 <view class="form-item">
47 <view class="label">收货地址</view>
48 <view class="cont">深圳市龙岗区XXX路</view>
49 </view>
50 </view>
51 </view>
52 <!-- 添加地址 -->
53 <view bindtap="onAddressAddHandler" class="manage-add">+添加地址</view>
54 </view>
7 </view> 55 </view>
8 </view> 56 </view>
......
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {},
4 onLoad(options) {} 4 onLoad(options) {},
5 /**
6 * 确认兑换 / 提交订单
7 */
8 onSubmitHandler() {
9
10 },
11 /**
12 * 收获地址管理
13 */
14 onAddressManagementHandler() {
15 app.router.push({
16 path:"addressManagement"
17 })
18 }
5 }) 19 })
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "礼物详情"
3 } 3 }
......
1 @import '../../assets/scss/mixins'; 1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 $contentWidth:690px;
5
4 .page { 6 .page {
5 .bgc {} 7 .bgc {
8 background: #F8F8F8;
9 }
6 10
7 .bg {} 11 .bg {}
8 12
9 .main { 13 .main {
10 .top-space { 14 .top-space {
11 height: 0px; 15 height: 20px;
12 } 16 }
13 17
14 .content { 18 .content {
15 position: relative; 19 position: relative;
20
21 // 内容容器通用样式
22 .cont-wrap {
23 margin: 20px auto 0;
24 width: $contentWidth;
25 background: #fff;
26 padding: 30px 28px;
27 @extend .bb;
28 @extend .shadow;
29 }
30
31 // 产品
32 .product {
33 width: $contentWidth;
34 margin: 0 auto;
35
36 &-item {
37 background: #fff;
38 width: $contentWidth;
39 height: 260px;
40 margin: 20px 0;
41 @extend .shadow;
42 @extend .bb;
43 padding: 30px;
44 display: flex;
45 justify-content: space-between;
46
47 .image-wrap {
48 width: 200px;
49 height: 200px;
50
51 .img {}
52 }
53
54 .cont {
55 position: relative;
56 flex: 1;
57 @extend .bb;
58 padding-left: 20px;
59 display: flex;
60 flex-wrap: wrap;
61 align-content: center;
62
63 .name {
64 font-size: 36px;
65 color: #333333;
66 @include ellipsis(2);
67 }
68
69 .integral {
70 margin-top: 16px;
71 font-size: 28px;
72 color: #FF7900;
73 }
74 }
75
76
77 }
78 }
79
80 // 京东卡使用规则
81 .use-rule {
82
83 color: #666666;
84 font-size: 28px;
85 line-height: 48px;
86 }
87
88 // 表单
89 .form {
90 padding: 30px 30px 40px;
91
92 &-tit {
93 margin-bottom: 22px;
94 display: flex;
95 justify-content: space-between;
96 font-size: 24px;
97
98 .address-message {
99 color: #333333;
100 }
101
102 .address-edit {
103 color: #3680EB;
104 }
105 }
106
107 &-item {
108 margin-bottom: 30px;
109 font-size: 28px;
110 display: flex;
111
112 .label {
113 min-width: 140px;
114 color: #666666;
115 }
116
117 .cont {
118 color: #333333;
119 @extend .bb;
120 padding-left: 20px;
121 }
122 }
123
124 &-remark {
125 background: #F8F8F8;
126 border: 0 solid #CCCCCC;
127 border-radius: 4px;
128 min-height: 200px;
129 @extend .bb;
130 padding: 20px;
131 color: #333333;
132 font-size: 28px;
133 }
134 }
135 }
136
137 // 底部
138 .bottom {
139 position: fixed;
140 bottom: 0;
141
142 // 提交栏
143 .submit-bar {
144 width: 750px;
145 height: 100px;
146 display: flex;
147 justify-content: space-between;
148 background-color: #fff;
149
150 &-cont {
151 flex: 1;
152 height: 100px;
153 line-height: 100px;
154 font-size: 32px;
155 @extend .bb;
156 padding: 0 30px;
157
158 .integral {
159 color: $colorBlue;
160 }
161 }
162
163 &-btn {
164 background: #3680EB;
165 color: #fff;
166 font-size: 32px;
167 @include btn-center(240px, 100px);
168 }
169 }
16 } 170 }
17 } 171 }
18 } 172 }
......
...@@ -3,6 +3,58 @@ ...@@ -3,6 +3,58 @@
3 <view class="app__bg bg"></view> 3 <view class="app__bg bg"></view>
4 <view class="app__content main"> 4 <view class="app__content main">
5 <view class="top-space"></view> 5 <view class="top-space"></view>
6 <view class="content"></view> 6 <view class="content">
7 <view class="product">
8 <view class="product-item">
9 <view class="image-wrap">
10 <!-- <image /> -->
11 </view>
12 <view class="cont">
13 <view class="name">某东购物卡200元某东购物卡200元</view>
14 <view class="integral">消耗积分：3000分</view>
15 </view>
16 </view>
17 </view>
18 <block wx:if="{{1<0}}">
19 <!-- 使用规则 (京东卡) -->
20 <view class="cont-wrap use-rule">
21 京东E卡可在京东商城
22 <span class="link">www.jd.com</span>
23 上购买自营商品（“自营商品”指在商品详情页明确标识为自营的商品），用户可在订单结算时输入E卡密码并使用。
24 </view>
25 </block>
26 <block wx:else>
27 <!-- 表单提交 (实物) -->
28 <view class="cont-wrap form">
29 <view class="form-tit">
30 <view class="address-message">收货信息</view>
31 <view bindtap="onAddressManagementHandler" class="address-edit">更改地址</view>
32 </view>
33 <view class="form-item">
34 <view class="label">收货人</view>
35 <view class="cont">郑亮亮</view>
36 </view>
37 <view class="form-item">
38 <view class="label">收货电话</view>
39 <view class="cont">13800000000</view>
40 </view>
41 <view class="form-item">
42 <view class="label">收货地址</view>
43 <view class="cont">深圳市龙岗区XXX路</view>
44 </view>
45 <textarea placeholder="备注您的其他要求" class="form-remark"></textarea>
46 </view>
47 </block>
48 </view>
49 <view class="bottom">
50 <view class="submit-bar">
51 <view class="submit-bar-cont">
52 现有积分
53 <span class="integral">350</span>
54 分
55 </view>
56 <view bindtap="onSubmitHandler" class="submit-bar-btn">确认兑换</view>
57 </view>
58 </view>
7 </view> 59 </view>
8 </view> 60 </view>
......
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {
4 onLoad(options) {} 4 productList: ["", "", ""]
5 },
6 onLoad(options) {},
7 /**
8 * 显示礼物详情
9 */
10 onShowGiftDetailHandler() {
11 app.router.push({
12 path: "giftDetail"
13 });
14 }
5 }) 15 })
......
...@@ -82,10 +82,9 @@ $contentWidth:690px; ...@@ -82,10 +82,9 @@ $contentWidth:690px;
82 &-item { 82 &-item {
83 background: #fff; 83 background: #fff;
84 width: $contentWidth; 84 width: $contentWidth;
85 height: 260px; 85 // height: 260px;
86 margin: 20px 0; 86 margin: 20px 0;
87 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10); 87 @extend .shadow;
88 border-radius: 8px;
89 @extend .bb; 88 @extend .bb;
90 padding: 30px; 89 padding: 30px;
91 display: flex; 90 display: flex;
...@@ -100,16 +99,20 @@ $contentWidth:690px; ...@@ -100,16 +99,20 @@ $contentWidth:690px;
100 .cont { 99 .cont {
101 position: relative; 100 position: relative;
102 flex: 1; 101 flex: 1;
102 @extend .bb;
103 padding-left: 20px;
103 104
104 .name { 105 .name {
105 font-size: 32px; 106 font-size: 32px;
106 color: #333333; 107 color: #333333;
108 @include ellipsis;
107 } 109 }
108 110
109 .desc { 111 .desc {
110 font-size: 24px; 112 font-size: 24px;
111 color: #999999; 113 color: #999999;
112 margin-top: 12px; 114 margin-top: 12px;
115 @include ellipsis(2);
113 } 116 }
114 117
115 .integral { 118 .integral {
...@@ -125,9 +128,9 @@ $contentWidth:690px; ...@@ -125,9 +128,9 @@ $contentWidth:690px;
125 bottom: 0; 128 bottom: 0;
126 right: 0; 129 right: 0;
127 130
128 width: 140px; 131 width: 142px;
129 height: 64px; 132 height: 60px;
130 line-height: 64px; 133 line-height: 60px;
131 text-align: center; 134 text-align: center;
132 color: #fff; 135 color: #fff;
133 border-radius: 8px; 136 border-radius: 8px;
......
...@@ -24,37 +24,15 @@ ...@@ -24,37 +24,15 @@
24 <view class="top-space"></view> 24 <view class="top-space"></view>
25 <view class="content"> 25 <view class="content">
26 <view class="product"> 26 <view class="product">
27 <view class="product-item"> 27 <view class="product-item" wx:for="{{productList}}" wx:key="{{index}}">
28 <view class="image-wrap"> 28 <view class="image-wrap">
29 <!-- <image /> --> 29 <!-- <image /> -->
30 </view> 30 </view>
31 <view class="cont"> 31 <view class="cont">
32 <view class="name">某东购物卡200元</view> 32 <view class="name">某东购物卡200元</view>
33 <view class="desc">可在xx超市使用，可够买xxx</view> 33 <view class="desc">可在xx超市使用，可够买xxx可在xx超市使用，可够买xxx可在xx超市使用，可够买xxx</view>
34 <view class="integral">消耗积分：3000分</view> 34 <view class="integral">消耗积分：3000分</view>
35 <view class="btn">查看</view> 35 <view bindtap="onShowGiftDetailHandler" data-data="{{item}}" class="btn">查看</view>
36 </view>
37 </view>
38 <view class="product-item">
39 <view class="image-wrap">
40 <!-- <image /> -->
41 </view>
42 <view class="cont">
43 <view class="name">某东购物卡200元</view>
44 <view class="desc">可在xx超市使用，可够买xxx</view>
45 <view class="integral">消耗积分：3000分</view>
46 <view class="btn">查看</view>
47 </view>
48 </view>
49 <view class="product-item">
50 <view class="image-wrap">
51 <!-- <image /> -->
52 </view>
53 <view class="cont">
54 <view class="name">某东购物卡200元</view>
55 <view class="desc">可在xx超市使用，可够买xxx</view>
56 <view class="integral">消耗积分：3000分</view>
57 <view class="btn">查看</view>
58 </view> 36 </view>
59 </view> 37 </view>
60 </view> 38 </view>
......
...@@ -28,8 +28,7 @@ $contentWidth:670px; ...@@ -28,8 +28,7 @@ $contentWidth:670px;
28 width: $contentWidth; 28 width: $contentWidth;
29 height: 100px; 29 height: 100px;
30 background: #FFFFFF; 30 background: #FFFFFF;
31 box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.10); 31 @extend .shadow;
32 border-radius: 8px;
33 margin: 222px auto 0; 32 margin: 222px auto 0;
34 display: flex; 33 display: flex;
35 justify-content: space-between; 34 justify-content: space-between;
......
1 // 手机正则 1 // 手机正则
2 const REGEXPS = { 2 const REGEXPS = {
3 "mobile": /^1\d{10}$/ 3 "mobile": /^1\d{10}$/
4 } 4 }
5 // 验证手机 5 // 验证手机
6 function checkMobile(str) { 6 function checkMobile(str) {
7 return REGEXPS.mobile.test(str); 7 return REGEXPS.mobile.test(str);
8 } 8 }
9 9
10 10
11 function formatTime(date) { 11 /**
12 var year = date.getFullYear() 12 * 链接参数转换为obj
13 var month = date.getMonth() + 1 13 * 入参 完整链接
14 var day = date.getDate() 14 * @param {*} url
15 */
16 function param2Obj(url) {
17 const search = url.split('?')[1]
18 if (!search) {
19 return {}
20 }
21 return JSON.parse(
22 '{"' +
23 decodeURIComponent(search)
24 .replace(/"/g, '\\"')
25 .replace(/&/g, '","')
26 .replace(/=/g, '":"') +
27 '"}'
28 )
29 }
15 30
16 var hour = date.getHours() 31 /**
17 var minute = date.getMinutes() 32 * 格式化日期常规日期
18 var second = date.getSeconds() 33 * 格式yyyy-MM-dd hh:mm:ss
34 * @param {*} date
35 */
36 function formatTime(date) {
37 var year = date.getFullYear()
38 var month = date.getMonth() + 1
39 var day = date.getDate()
19 40
41 var hour = date.getHours()
42 var minute = date.getMinutes()
43 var second = date.getSeconds()
20 44
21 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 45 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
22 } 46 }
23 47
48 /**
49 * 格式化数字，不足一位补充0
50 * @param {*} n
51 */
24 function formatNumber(n) { 52 function formatNumber(n) {
25 n = n.toString() 53 n = n.toString()
26 return n[1] ? n : '0' + n 54 return n[1] ? n : '0' + n
27 } 55 }
28 56
29
30
31
32 /** 57 /**
33 * 获取屏幕剩余高度 58 * 获取屏幕剩余高度
34 * useHeight 单位是rpx 59 * useHeight 单位是rpx
35 * 默认返回单位是rpx 可通过unit参数改为 px 60 * 默认返回单位是rpx 可通过unit参数改为 px
36 */ 61 */
37 function getLastScreenHeight(useHeight = 0, unit = 'rpx') { 62 function getLastScreenHeight(useHeight = 0, unit = 'rpx') {
38 let sysInfo = wx.getSystemInfoSync(); 63 let sysInfo = wx.getSystemInfoSync();
39 let clientHeight = sysInfo.windowHeight; 64 let clientHeight = sysInfo.windowHeight;
40 // 获取可使用窗口高度 65 // 获取可使用窗口高度
41 let clientWidth = sysInfo.windowWidth; 66 let clientWidth = sysInfo.windowWidth;
42 // 算出比例 67 // 算出比例
43 let ratio = 750 / clientWidth; 68 let ratio = 750 / clientWidth;
44 // 算出屏幕高度(单位rpx) 69 // 算出屏幕高度(单位rpx)
45 let height = clientHeight * ratio; 70 let height = clientHeight * ratio;
46 // 计算剩余高度 71 // 计算剩余高度
47 let lastHeight = height - useHeight; 72 let lastHeight = height - useHeight;
48 // 可转换成px 73 // 可转换成px
49 if (unit == 'px') { 74 if (unit == 'px') {
50 lastHeight = lastHeight / 750 * clientWidth 75 lastHeight = lastHeight / 750 * clientWidth
51 } 76 }
52 return lastHeight; 77 return lastHeight;
78 }
79
80
81 /**
82 * px转rpx
83 * @param {*} value
84 */
85 function pxToRpx(value) {
86 let sysInfo = wx.getSystemInfoSync();
87 let clientWidth = sysInfo.windowWidth;
88 let result = value / 750 * clientWidth
89 return result;
90 }
91
92
93 // 格式化星期几
94 function formatWeek(week) {
95 let result = "";
96 switch (week) {
97 case 1:
98 result = "一";
99 break;
100 case 2:
101 result = "二";
102 break;
103 case 3:
104 result = "三";
105 break;
106 case 4:
107 result = "四";
108 break;
109 case 5:
110 result = "五";
111 break;
112 case 6:
113 result = "六";
114 break;
115 case 0:
116 result = "日";
117 break;
118
119 default:
120 break;
121 }
122 return result;
123 }
124
125 /**
126 * 获取点击传值
127 * @param {*} evt
128 * @param {*} key
129 */
130 function getBindtapData(evt, key = "data") {
131 let keyStr = key || "data";
132 return evt.currentTarget.dataset[keyStr];
133 }
134
135 /**
136 * 获取小程序码
137 * path = "/pages/index/index?pa=1"
138 * @param {*} path
139 */
140 function wxacodeGet(path) {
141 return " https://api.k.wxpai.cn/bizproxy/mzcfsapi/qrcode/create?path=" + encodeURIComponent(path);
142 }
143
144
145 /**
146 * @desc 函数防抖
147 * @param func 函数
148 * @param wait 延迟执行毫秒数
149 * @param immediate true 表立即执行，false 表非立即执行
150 */
151 function debounce(func, wait, immediate) {
152 let timeout;
153
154 return function () {
155 let context = this;
156 let args = arguments;
157
158 if (timeout) clearTimeout(timeout);
159 if (immediate) {
160 var callNow = !timeout;
161 timeout = setTimeout(() => {
162 timeout = null;
163 }, wait)
164 if (callNow) func.apply(context, args)
165 } else {
166 timeout = setTimeout(function () {
167 func.apply(context, args)
168 }, wait);
169 }
170 }
171 }
172
173 /**
174 * @desc 函数节流
175 * @param func 函数
176 * @param wait 延迟执行毫秒数
177 * @param type 1 表时间戳版，2 表定时器版
178 * 时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
179 */
180 function throttle(func, wait, type) {
181 if (type === 1) {
182 var previous = 0;
183 } else if (type === 2) {
184 var timeout;
185 }
186 return function () {
187 let context = this;
188 let args = arguments;
189 if (type === 1) {
190 let now = Date.now();
191
192 if (now - previous > wait) {
193 func.apply(context, args);
194 previous = now;
195 }
196 } else if (type === 2) {
197 if (!timeout) {
198 timeout = setTimeout(() => {
199 timeout = null;
200 func.apply(context, args)
201 }, wait)
202 }
203 }
204 }
53 } 205 }
54 206
55 module.exports = { 207 module.exports = {
56 formatTime: formatTime, 208 formatTime: formatTime,
57 checkMobile: checkMobile, 209 checkMobile: checkMobile,
58 getLastScreenHeight: getLastScreenHeight 210 getLastScreenHeight: getLastScreenHeight,
211 debounce: debounce,
212 throttle: throttle,
213 param2Obj: param2Obj,
214 pxToRpx: pxToRpx,
215 formatWeek: formatWeek,
216 getBindtapData: getBindtapData,
217 wxacodeGet: wxacodeGet,
59 } 218 }
......