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 118 additions and 42 deletions
... ... @@ -16,22 +16,22 @@ Page({
userInfo: {},
tabBarArr: [
{
icon: '../../static/images/limit/icon_rmfs_n@3x.png',
iconSelected: '../../static/images/limit/icon_rmfs_p@3x.png',
name: '热门发售',
method: 'app.limitProduct.hotLimitProduct',
reportName: 'home_hot'
},
{
icon: '../../static/images/limit/icon_jjfs_n@3x.png',
iconSelected: '../../static/images/limit/icon_jjfs_p@3x.png',
// icon: '../../static/images/limit/icon_jjfs_n@3x.png',
// iconSelected: '../../static/images/limit/icon_jjfs_p@3x.png',
name: '即将发售',
method: 'app.limitProduct.soonToSaleLimitProduct',
reportName: 'home_soon'
},
{
icon: '../../static/images/limit/icon_yjfs_n@3x.png',
iconSelected: '../../static/images/limit/icon_yjfs_p@3x.png',
// icon: '../../static/images/limit/icon_rmfs_n@3x.png',
// iconSelected: '../../static/images/limit/icon_rmfs_p@3x.png',
name: '热门发售',
method: 'app.limitProduct.hotLimitProduct',
reportName: 'home_hot'
},
{
// icon: '../../static/images/limit/icon_yjfs_n@3x.png',
// iconSelected: '../../static/images/limit/icon_yjfs_p@3x.png',
name: '已经发售',
method: 'app.limitProduct.alreadySaleLimitProduct',
reportName: 'home_already'
... ... @@ -161,5 +161,9 @@ Page({
},
navigateToHome: function(e) { // 跳转到我的限购码
router.go('userCenter');
},
goToRule: function (e) {
router.goUrl('https://activity.yoho.cn/feature/2213.html?title=说明详情');
}
});
... ...
... ... @@ -5,11 +5,11 @@
<view class='tab-bar-container'>
<view wx:for="{{tabBarArr}}" wx:key="name" class='tab-bar-item' bindtap='tabChange' data-index="{{index}}">
<block wx:if="{{tabSelected === index}}"><!--选中的tabBarIndex和循环里的index相同时-->
<image src="{{item.iconSelected}}"></image>
<!-- <image src="{{item.iconSelected}}"></image> -->
<text class='selected'>{{item.name}}</text>
</block>
<block wx:else>
<image src="{{item.icon}}"></image>
<!-- <image src="{{item.icon}}"></image> -->
<text>{{item.name}}</text>
</block>
</view>
... ... @@ -22,12 +22,13 @@
<block wx:if='{{index === tabSelected}}'>
<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'>
<image src="{{helper.image(listItem.defaultUrl, 690, 460, 1)}}"></image>
<image src="../../static/images/no1@3x.png" class="rank" />
<view class='item-content'>
<text class='item-name'>{{listItem.productName}}</text>
<view class='item-info'>
<text class='item-price'>{{listItem.price || '￥0.00'}}</text>
<view class='item-date'>
<image src='{{icon.clock}}'></image>
<!-- <image src='{{icon.clock}}'></image> -->
<text>{{listItem.saleTime}}发售</text>
</view>
</view>
... ... @@ -38,6 +39,10 @@
</view>
<view class='list-foot-blank'>{{footText}}</view>
</view>
<view class="rule-bg" bindtap="goToRule">
<text class="rule-text">参与规则</text>
</view>
<!--我的限购码按钮-->
<view class='my-code-button' bindtap='navigateToHome'>
我的限购码
... ...
... ... @@ -35,13 +35,15 @@ page {
}
.tab-bar-item text {
font-family: PingFang-SC-Medium;
font-weight: bold;
margin-left: 4rpx;
font-size: 28rpx;
color: #afafaf;
color: #B0B0B0 ;
}
.tab-bar-item text.selected {
color: #000;
color: #444444;
}
.tab-bar-item image {
... ... @@ -50,7 +52,8 @@ page {
}
.tab-bar-item:nth-child(n + 2) {
border-left: 2rpx solid #afafaf;
height: 30rpx;
border-left: 2rpx solid #e0e0e0;
}
/* END */
... ... @@ -83,27 +86,32 @@ page {
.list-wrapper .list-container .item-container {
display: flex;
flex-direction: column;
width: 690rpx;
margin-top: 30rpx;
margin-bottom: 10rpx;
box-shadow: 0 0 10rpx #e0e0e0;
width: 750rpx;
margin-bottom: 20rpx;
position: relative;
}
/* 列表item大图 */
.item-container image {
width: 100%;
height: 432rpx;
border-radius: 20rpx 20rpx 0 0;
height: 470rpx;
margin: 0;
padding: 0;
}
.list-wrapper .list-container .rank {
position: absolute;
width: 90rpx;
height: 38rpx;
top: 30rpx;
left: 30rpx;
}
/* 列表item文字及价格等信息容器 */
.item-container .item-content {
display: flex;
width: 100%;
flex-direction: column;
border-radius: 0 0 20rpx 20rpx;
background-color: #fff;
line-height: 42rpx;
font-size: 30rpx;
... ... @@ -111,9 +119,12 @@ page {
/* 列表item标题文字 */
.item-content .item-name {
padding: 20rpx 30rpx 0rpx 30rpx;
padding: 36rpx 30rpx 0rpx 40rpx;
margin-bottom: 22rpx;
font-family: PingFang-SC-Regular;
font-size: 14px;
color: #222222;
letter-spacing: -0.34px;
/* 以下样式为控制 行数超过2行后显示... */
overflow: hidden;
text-overflow: ellipsis;
... ... @@ -128,39 +139,71 @@ page {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
/* 价格 */
.item-info .item-price {
padding: 0 0 40rpx 30rpx;
padding: 0 0 10rpx 40rpx;
font-family: PingFang-SC-Semibold;
font-weight: bolder;
font-size: 18px;
color: #D0021B;
letter-spacing: -0.43px;
}
/* 发售时间 */
.item-info .item-date {
display: flex;
flex-direction: row;
background-color: #444;
justify-content: center;
align-items: center;
background-color: white;
line-height: 40rpx;
height: 40rpx;
border-radius: 20rpx;
width: 220rpx;
height: 60rpx;
border: 1rpx solid #222222;
margin-right: 30rpx;
margin-bottom: 20rpx;
}
/* 发售时间内文字 */
.item-info .item-date text {
color: #fff;
font-size: 24rpx;
padding: 0 14rpx 0 2rpx;
/* padding: 0 14rpx 0 2rpx; */
font-family: PingFang-SC-Bold;
font-weight: bold;
font-size: 14px;
color: #222222;
letter-spacing: 0;
}
/* 发售时间小图标 */
.item-info .item-date image {
width: 24rpx;
height: 24rpx;
padding: 8rpx;
/* END */
.rule-bg {
opacity: 0.6;
background-color: #000000;
border-radius: 50%;
width: 92rpx;
height: 92rpx;
right: 40rpx;
bottom: 170rpx;
float: right;
position: fixed;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
/* END */
.rule-text {
width: 52rpx;
font-family: PingFang-SC-Regular;
font-size: 13px;
color: #FFFFFF;
letter-spacing: 0;
text-align: center;
line-height: 16px;
}
.my-code-button {
position: fixed;
... ...
... ... @@ -634,9 +634,33 @@ Page(Object.assign({
queueCancel() {
this.reload();
},
saleRemind() {
wx.showModal({
title: '',
content: '关注“YOHOBUY有货”获得以下特权\n\
1、有资格参与限定商品抢购\n\
2、限定商品上架通知\n\
3、限定球鞋每周免费送',
confirmText: '去关注',
showCancel: false,
success(res) {
if (res.confirm) {
wx.showToast({
icon: 'none',
title: '公众号“YOHOBUY有货”，已复制成功，打开微信去搜索关注吧！',
duration: 3000
});
}
}
})
},
assistCancel() {
this.reload();
},
assistJion() {
this.reload();
},
buyNow() {
router.goUrl(`miniapp.yohobuy.com/pages/goodsDetail/goodsDetail?app=yohobuy&productSkn=${this.data.productSkn}`);
},
... ...
... ... @@ -84,7 +84,7 @@
<view class="top-title" >你的好友邀请你为ta助力</view>
<view class="top-action">
<view class="as-bottom ok width130" bindtap="assistAction">帮ta助力</view>
<view class="as-bottom cancel width130" bindtap="assistCancel">取消</view>
<view class="as-bottom ok width130" bindtap="assistJion">直接参加</view>
</view>
</view>
</action-bar>
... ... @@ -185,7 +185,7 @@
<block wx:elif="{{showStatus === 6}}">
<action-bar wx:if="{{productSourceType === 1}}">
<view class="bottom1-action">
<view class="as-bottom cancel">即将开售</view>
<view class="as-bottom confirm" bindtap="saleRemind">订阅商品发售提醒</view>
</view>
</action-bar>
... ... @@ -201,7 +201,7 @@
<action-bar wx:else>
<view class="bottom1-action">
<view class="as-bottom cancel">即将开售</view>
<view class="as-bottom cancel">订阅商品发售提醒</view>
</view>
</action-bar>
</block>
... ...