fe / yoho-limited-sell-miniapp · Commits

Go to a project

Authored by 肖亚东
Commit e203365832955fc93bec7d45e3f877d32c6db36f 1 parent ac46e499

限定首页列表以及详情页ui调整

Inline Side-by-side
Showing 13 changed files with 128 additions and 52 deletions
@@ -16,22 +16,22 @@ Page({ @@ -16,22 +16,22 @@ Page({
16 userInfo: {}, 16 userInfo: {},
17 tabBarArr: [ 17 tabBarArr: [
18 { 18 {
19 - icon: '../../static/images/limit/icon_rmfs_n@3x.png',  
20 - iconSelected: '../../static/images/limit/icon_rmfs_p@3x.png',  
21 - name: '热门发售',  
22 - method: 'app.limitProduct.hotLimitProduct',  
23 - reportName: 'home_hot'  
24 - },  
25 - {  
26 - icon: '../../static/images/limit/icon_jjfs_n@3x.png',  
27 - iconSelected: '../../static/images/limit/icon_jjfs_p@3x.png', 19 + // icon: '../../static/images/limit/icon_jjfs_n@3x.png',
  20 + // iconSelected: '../../static/images/limit/icon_jjfs_p@3x.png',
28 name: '即将发售', 21 name: '即将发售',
29 method: 'app.limitProduct.soonToSaleLimitProduct', 22 method: 'app.limitProduct.soonToSaleLimitProduct',
30 reportName: 'home_soon' 23 reportName: 'home_soon'
31 }, 24 },
32 { 25 {
33 - icon: '../../static/images/limit/icon_yjfs_n@3x.png',  
34 - iconSelected: '../../static/images/limit/icon_yjfs_p@3x.png', 26 + // icon: '../../static/images/limit/icon_rmfs_n@3x.png',
  27 + // iconSelected: '../../static/images/limit/icon_rmfs_p@3x.png',
  28 + name: '热门发售',
  29 + method: 'app.limitProduct.hotLimitProduct',
  30 + reportName: 'home_hot'
  31 + },
  32 + {
  33 + // icon: '../../static/images/limit/icon_yjfs_n@3x.png',
  34 + // iconSelected: '../../static/images/limit/icon_yjfs_p@3x.png',
35 name: '已经发售', 35 name: '已经发售',
36 method: 'app.limitProduct.alreadySaleLimitProduct', 36 method: 'app.limitProduct.alreadySaleLimitProduct',
37 reportName: 'home_already' 37 reportName: 'home_already'
@@ -161,5 +161,9 @@ Page({ @@ -161,5 +161,9 @@ Page({
161 }, 161 },
162 navigateToHome: function(e) { // 跳转到我的限购码 162 navigateToHome: function(e) { // 跳转到我的限购码
163 router.go('userCenter'); 163 router.go('userCenter');
  164 + },
  165 +
  166 + goToRule: function (e) {
  167 + router.goUrl('https://activity.yoho.cn/feature/2213.html?title=说明详情');
164 } 168 }
165 }); 169 });
@@ -5,11 +5,11 @@ @@ -5,11 +5,11 @@
5 <view class='tab-bar-container'> 5 <view class='tab-bar-container'>
6 <view wx:for="{{tabBarArr}}" wx:key="name" class='tab-bar-item' bindtap='tabChange' data-index="{{index}}"> 6 <view wx:for="{{tabBarArr}}" wx:key="name" class='tab-bar-item' bindtap='tabChange' data-index="{{index}}">
7 <block wx:if="{{tabSelected === index}}"><!--选中的tabBarIndex和循环里的index相同时--> 7 <block wx:if="{{tabSelected === index}}"><!--选中的tabBarIndex和循环里的index相同时-->
8 - <image src="{{item.iconSelected}}"></image> 8 + <!-- <image src="{{item.iconSelected}}"></image> -->
9 <text class='selected'>{{item.name}}</text> 9 <text class='selected'>{{item.name}}</text>
10 </block> 10 </block>
11 <block wx:else> 11 <block wx:else>
12 - <image src="{{item.icon}}"></image> 12 + <!-- <image src="{{item.icon}}"></image> -->
13 <text>{{item.name}}</text> 13 <text>{{item.name}}</text>
14 </block> 14 </block>
15 </view> 15 </view>
@@ -22,12 +22,13 @@ @@ -22,12 +22,13 @@
22 <block wx:if='{{index === tabSelected}}'> 22 <block wx:if='{{index === tabSelected}}'>
23 <view class='item-container' wx:for='{{nowList.limitProductVoList}}' wx:key="listItem.id" wx:for-item='listItem' data-id='{{listItem.id}}' data-code='{{listItem.limitProductCode}}' bindtap='navigateToDetail'> 23 <view class='item-container' wx:for='{{nowList.limitProductVoList}}' wx:key="listItem.id" wx:for-item='listItem' data-id='{{listItem.id}}' data-code='{{listItem.limitProductCode}}' bindtap='navigateToDetail'>
24 <image src="{{helper.image(listItem.defaultUrl, 690, 460, 1)}}"></image> 24 <image src="{{helper.image(listItem.defaultUrl, 690, 460, 1)}}"></image>
  25 + <image src="../../static/images/no1@3x.png" class="rank" />
25 <view class='item-content'> 26 <view class='item-content'>
26 <text class='item-name'>{{listItem.productName}}</text> 27 <text class='item-name'>{{listItem.productName}}</text>
27 <view class='item-info'> 28 <view class='item-info'>
28 <text class='item-price'>{{listItem.price || '￥0.00'}}</text> 29 <text class='item-price'>{{listItem.price || '￥0.00'}}</text>
29 <view class='item-date'> 30 <view class='item-date'>
30 - <image src='{{icon.clock}}'></image> 31 + <!-- <image src='{{icon.clock}}'></image> -->
31 <text>{{listItem.saleTime}}发售</text> 32 <text>{{listItem.saleTime}}发售</text>
32 </view> 33 </view>
33 </view> 34 </view>
@@ -38,6 +39,10 @@ @@ -38,6 +39,10 @@
38 </view> 39 </view>
39 <view class='list-foot-blank'>{{footText}}</view> 40 <view class='list-foot-blank'>{{footText}}</view>
40 </view> 41 </view>
  42 + <view class="rule-bg" bindtap="goToRule">
  43 + <text class="rule-text">参与规则</text>
  44 + </view>
  45 +
41 <!--我的限购码按钮--> 46 <!--我的限购码按钮-->
42 <view class='my-code-button' bindtap='navigateToHome'> 47 <view class='my-code-button' bindtap='navigateToHome'>
43 我的限购码 48 我的限购码
@@ -35,13 +35,15 @@ page { @@ -35,13 +35,15 @@ page {
35 } 35 }
36 36
37 .tab-bar-item text { 37 .tab-bar-item text {
  38 + font-family: PingFang-SC-Medium;
  39 + font-weight: bold;
38 margin-left: 4rpx; 40 margin-left: 4rpx;
39 font-size: 28rpx; 41 font-size: 28rpx;
40 - color: #afafaf; 42 + color: #B0B0B0 ;
41 } 43 }
42 44
43 .tab-bar-item text.selected { 45 .tab-bar-item text.selected {
44 - color: #000; 46 + color: #444444;
45 } 47 }
46 48
47 .tab-bar-item image { 49 .tab-bar-item image {
@@ -50,7 +52,8 @@ page { @@ -50,7 +52,8 @@ page {
50 } 52 }
51 53
52 .tab-bar-item:nth-child(n + 2) { 54 .tab-bar-item:nth-child(n + 2) {
53 - border-left: 2rpx solid #afafaf; 55 + height: 30rpx;
  56 + border-left: 2rpx solid #e0e0e0;
54 } 57 }
55 58
56 /* END */ 59 /* END */
@@ -83,27 +86,32 @@ page { @@ -83,27 +86,32 @@ page {
83 .list-wrapper .list-container .item-container { 86 .list-wrapper .list-container .item-container {
84 display: flex; 87 display: flex;
85 flex-direction: column; 88 flex-direction: column;
86 - width: 690rpx;  
87 - margin-top: 30rpx;  
88 - margin-bottom: 10rpx;  
89 - box-shadow: 0 0 10rpx #e0e0e0; 89 + width: 750rpx;
  90 + margin-bottom: 20rpx;
  91 + position: relative;
90 } 92 }
91 93
92 /* 列表item大图 */ 94 /* 列表item大图 */
93 .item-container image { 95 .item-container image {
94 width: 100%; 96 width: 100%;
95 - height: 432rpx;  
96 - border-radius: 20rpx 20rpx 0 0; 97 + height: 470rpx;
97 margin: 0; 98 margin: 0;
98 padding: 0; 99 padding: 0;
99 } 100 }
100 101
  102 +.list-wrapper .list-container .rank {
  103 + position: absolute;
  104 + width: 90rpx;
  105 + height: 38rpx;
  106 + top: 30rpx;
  107 + left: 30rpx;
  108 +}
  109 +
101 /* 列表item文字及价格等信息容器 */ 110 /* 列表item文字及价格等信息容器 */
102 .item-container .item-content { 111 .item-container .item-content {
103 display: flex; 112 display: flex;
104 width: 100%; 113 width: 100%;
105 flex-direction: column; 114 flex-direction: column;
106 - border-radius: 0 0 20rpx 20rpx;  
107 background-color: #fff; 115 background-color: #fff;
108 line-height: 42rpx; 116 line-height: 42rpx;
109 font-size: 30rpx; 117 font-size: 30rpx;
@@ -111,9 +119,12 @@ page { @@ -111,9 +119,12 @@ page {
111 119
112 /* 列表item标题文字 */ 120 /* 列表item标题文字 */
113 .item-content .item-name { 121 .item-content .item-name {
114 - padding: 20rpx 30rpx 0rpx 30rpx; 122 + padding: 36rpx 30rpx 0rpx 40rpx;
115 margin-bottom: 22rpx; 123 margin-bottom: 22rpx;
116 - 124 + font-family: PingFang-SC-Regular;
  125 + font-size: 14px;
  126 + color: #222222;
  127 + letter-spacing: -0.34px;
117 /* 以下样式为控制 行数超过2行后显示... */ 128 /* 以下样式为控制 行数超过2行后显示... */
118 overflow: hidden; 129 overflow: hidden;
119 text-overflow: ellipsis; 130 text-overflow: ellipsis;
@@ -128,48 +139,80 @@ page { @@ -128,48 +139,80 @@ page {
128 width: 100%; 139 width: 100%;
129 flex-direction: row; 140 flex-direction: row;
130 justify-content: space-between; 141 justify-content: space-between;
  142 + align-items: center;
131 } 143 }
132 144
133 /* 价格 */ 145 /* 价格 */
134 .item-info .item-price { 146 .item-info .item-price {
135 - padding: 0 0 40rpx 30rpx; 147 + padding: 0 0 10rpx 40rpx;
  148 + font-family: PingFang-SC-Semibold;
  149 + font-weight: bolder;
  150 + font-size: 18px;
  151 + color: #D0021B;
  152 + letter-spacing: -0.43px;
136 } 153 }
137 154
138 /* 发售时间 */ 155 /* 发售时间 */
139 .item-info .item-date { 156 .item-info .item-date {
140 display: flex; 157 display: flex;
141 flex-direction: row; 158 flex-direction: row;
142 - background-color: #444; 159 + justify-content: center;
  160 + align-items: center;
  161 + background-color: white;
143 line-height: 40rpx; 162 line-height: 40rpx;
144 - height: 40rpx;  
145 - border-radius: 20rpx; 163 + width: 220rpx;
  164 + height: 60rpx;
  165 + border: 1rpx solid #222222;
146 margin-right: 30rpx; 166 margin-right: 30rpx;
  167 + margin-bottom: 20rpx;
147 } 168 }
148 169
149 /* 发售时间内文字 */ 170 /* 发售时间内文字 */
150 .item-info .item-date text { 171 .item-info .item-date text {
151 - color: #fff;  
152 - font-size: 24rpx;  
153 - padding: 0 14rpx 0 2rpx;  
154 -}  
155 -  
156 -/* 发售时间小图标 */  
157 -.item-info .item-date image {  
158 - width: 24rpx;  
159 - height: 24rpx;  
160 - padding: 8rpx; 172 + /* padding: 0 14rpx 0 2rpx; */
  173 + font-family: PingFang-SC-Bold;
  174 + font-weight: bold;
  175 + font-size: 14px;
  176 + color: #222222;
  177 + letter-spacing: 0;
161 } 178 }
162 179
163 /* END */ 180 /* END */
164 181
  182 +.rule-bg {
  183 + opacity: 0.6;
  184 + background-color: #000000;
  185 + border-radius: 50%;
  186 + width: 92rpx;
  187 + height: 92rpx;
  188 + right: 40rpx;
  189 + bottom: 170rpx;
  190 + float: right;
  191 + position: fixed;
  192 + z-index: 9999;
  193 + display: flex;
  194 + justify-content: center;
  195 + align-items: center;
  196 +}
  197 +
  198 +.rule-text {
  199 + width: 52rpx;
  200 + font-family: PingFang-SC-Regular;
  201 + font-size: 13px;
  202 + color: #FFFFFF;
  203 + letter-spacing: 0;
  204 + text-align: center;
  205 + line-height: 16px;
  206 +}
  207 +
165 .my-code-button { 208 .my-code-button {
166 - position: fixed;  
167 - bottom: 0;  
168 - width: 100%;  
169 - height: 88rpx;  
170 - text-align: center;  
171 - font-size: 30rpx;  
172 - line-height: 88rpx;  
173 - background-color: #fff;  
174 - border-top: 1rpx solid #E0E0E0; 209 + position: fixed;
  210 + bottom: 0;
  211 + width: 100%;
  212 + height: 88rpx;
  213 + text-align: center;
  214 + font-size: 30rpx;
  215 + line-height: 88rpx;
  216 + background-color: #fff;
  217 + border-top: 1rpx solid #E0E0E0;
175 } 218 }
@@ -634,9 +634,33 @@ Page(Object.assign({ @@ -634,9 +634,33 @@ Page(Object.assign({
634 queueCancel() { 634 queueCancel() {
635 this.reload(); 635 this.reload();
636 }, 636 },
  637 + saleRemind() {
  638 + wx.showModal({
  639 + title: '',
  640 + content: '关注“YOHOBUY有货”获得以下特权\n\
  641 + 1、有资格参与限定商品抢购\n\
  642 + 2、限定商品上架通知\n\
  643 + 3、限定球鞋每周免费送',
  644 + confirmText: '去关注',
  645 + showCancel: false,
  646 + success(res) {
  647 + if (res.confirm) {
  648 + wx.showToast({
  649 + icon: 'none',
  650 + title: '公众号“YOHOBUY有货”，已复制成功，打开微信去搜索关注吧！',
  651 + duration: 3000
  652 + });
  653 + }
  654 + }
  655 + })
  656 + },
  657 +
637 assistCancel() { 658 assistCancel() {
638 this.reload(); 659 this.reload();
639 }, 660 },
  661 + assistJion() {
  662 + this.reload();
  663 + },
640 buyNow() { 664 buyNow() {
641 router.goUrl(`miniapp.yohobuy.com/pages/goodsDetail/goodsDetail?app=yohobuy&productSkn=${this.data.productSkn}`); 665 router.goUrl(`miniapp.yohobuy.com/pages/goodsDetail/goodsDetail?app=yohobuy&productSkn=${this.data.productSkn}`);
642 }, 666 },
@@ -84,7 +84,7 @@ @@ -84,7 +84,7 @@
84 <view class="top-title" >你的好友邀请你为ta助力</view> 84 <view class="top-title" >你的好友邀请你为ta助力</view>
85 <view class="top-action"> 85 <view class="top-action">
86 <view class="as-bottom ok width130" bindtap="assistAction">帮ta助力</view> 86 <view class="as-bottom ok width130" bindtap="assistAction">帮ta助力</view>
87 - <view class="as-bottom cancel width130" bindtap="assistCancel">取消</view> 87 + <view class="as-bottom ok width130" bindtap="assistJion">直接参加</view>
88 </view> 88 </view>
89 </view> 89 </view>
90 </action-bar> 90 </action-bar>
@@ -185,7 +185,7 @@ @@ -185,7 +185,7 @@
185 <block wx:elif="{{showStatus === 6}}"> 185 <block wx:elif="{{showStatus === 6}}">
186 <action-bar wx:if="{{productSourceType === 1}}"> 186 <action-bar wx:if="{{productSourceType === 1}}">
187 <view class="bottom1-action"> 187 <view class="bottom1-action">
188 - <view class="as-bottom cancel">即将开售</view> 188 + <view class="as-bottom confirm" bindtap="saleRemind">订阅商品发售提醒</view>
189 </view> 189 </view>
190 </action-bar> 190 </action-bar>
191 191
@@ -201,7 +201,7 @@ @@ -201,7 +201,7 @@
201 201
202 <action-bar wx:else> 202 <action-bar wx:else>
203 <view class="bottom1-action"> 203 <view class="bottom1-action">
204 - <view class="as-bottom cancel">即将开售</view> 204 + <view class="as-bottom cancel">订阅商品发售提醒</view>
205 </view> 205 </view>
206 </action-bar> 206 </action-bar>
207 </block> 207 </block>