fe / yoho-limited-sell-miniapp · Commits

Go to a project

Authored by 肖亚东
Commit d0c2e7f3dfd512d256169af94d93f5bf9cef8480 1 parent 4ea3daa1

首页修改，详情页增加倒计时等

Inline Side-by-side
Showing 12 changed files with 210 additions and 34 deletions
const config = {
domains: {
// production
api: 'https://api.yoho.cn',
service: 'https://api.yoho.cn',
// api: 'https://api.yoho.cn',
// service: 'https://api.yoho.cn',
// gray
// api: 'http://apigray.yoho.cn',
// store: 'http://openstore.yohops.com',
// test
// api: 'http://api-test3.dev.yohocorp.com',
// service: 'http://api-test3.dev.yohocorp.com',
api: 'http://api-test3.dev.yohocorp.com',
service: 'http://api-test3.dev.yohocorp.com',
yasApi: 'https://analysis.yohobuy.com/yas_mobile'
},
... ...
... ... @@ -149,6 +149,16 @@ Page({
console.log(e);
let id = e.currentTarget.dataset.id;
let limitProductCode = e.currentTarget.dataset.code;
let appOnly = e.currentTarget.dataset.appOnly;
if (appOnly) {
wx.showModal({
title: '',
content: '请去有货APP参加',
showCancel: false
})
return;
}
if (app.getUid() && app.getUserInfo().wechat) {
router.go('productDetail', {limitProductCode});
... ...
... ... @@ -22,7 +22,9 @@
<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" />
<image wx:if="{{true}}" src="../../static/images/no1@3x.png" class="rank" />
<image wx:if="{{true}}" src="../../static/images/app_only@3x.png" class="app_only" />
<image wx:if="{{true}}" src="../../static/images/sold_out@3x.png" class="sold_out" />
<view class='item-content'>
<text class='item-name'>{{listItem.productName}}</text>
<view class='item-info'>
... ...
... ... @@ -107,6 +107,22 @@ page {
left: 30rpx;
}
.list-wrapper .list-container .app_only {
position: absolute;
width: 100rpx;
height: 100rpx;
top: 0rpx;
right: 0rpx;
}
.list-wrapper .list-container .sold_out {
position: absolute;
width: 200rpx;
height: 200rpx;
top: 40rpx;
right: 40rpx;
}
/* 列表item文字及价格等信息容器 */
.item-container .item-content {
display: flex;
... ...
let timer;
Component({
properties: {
type: String,
current: {
type: Number,
observer: '_dataChange'
},
begin: Number,
end: Number
},
data: {
label: '',
days: '',
hours: '',
minutes: '',
seconds: '',
diff: '',
fullContent: ''
},
pageLifetimes: {
show() {
console.log('show');
},
hide() {
console.log('hide');
clearInterval(timer);
}
},
methods: {
_dataChange() {
const {current, begin, end} = this.data;
let label = '距开售';
// if (current && begin && end) {
// label = begin - current > 0 ? '距离活动开始' : '距离活动结束';
// }
this.data.diff = Math.abs(begin - current > 0 ? begin - current : end - current);
if (timer) {
clearInterval(timer);
}
timer = setInterval(() => {
this.tick(label);
--this.data.diff;
if (this.data.diff < 0) {
clearInterval(timer);
this.triggerEvent('endcountdown', {
isEnd: current - begin > 0
});
}
}, 1000);
},
tick(label) {
let diff = this.data.diff;
let days = Math.floor(diff / (24 * 3600));
days = days > 9 ? days : '0' + days;
let leave1 = diff % (24 * 3600);
let hours = Math.floor(leave1 / (3600));
hours = hours > 9 ? hours : '0' + hours;
let leave2 = leave1 % 3600;
let minutes = Math.floor(leave2 / 60);
minutes = minutes > 9 ? minutes : '0' + minutes;
let seconds = leave2 % 60;
seconds = seconds > 9 ? seconds : '0' + seconds;
// let fullContent = label + ' ' + days + ' 天 ' + hours + '：' + minutes + '：' + seconds;
let fullContent = hours + ' ：' + minutes + ' ：' + seconds;
this.setData({
label,
days,
hours,
minutes,
seconds,
fullContent
});
}
}
});
... ...
{
"component": true
}
\ No newline at end of file
... ...
<view wx:if="{{label}}" class="comp-count-dow-by-now">
<text class="tips">{{label}}</text>
<!-- <text class="number">{{days}}</text>
<text class="number">{{hours}}：</text>
<text class="number">{{minutes}}：</text>
<text class="number">{{seconds}}</text> -->
<text class="time">{{fullContent}}</text>
</view>
... ...
.comp-count-dow-by-now {
width: 100%;
height: 134rpx;
color: #ffffff;
font-size: 32rpx;
text-align: center;
background-color: #ffffff;
font-family: PingFang-SC-Regular, sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.comp-count-dow-by-now .tips {
font-family: PingFang-SC-Regular;
font-size: 12px;
color: #222222;
letter-spacing: -0.24px;
margin-right: 18rpx;
margin-top: 28rpx;
}
.comp-count-dow-by-now .time {
display: inline-block;
font-size: 72rpx;
font-family: PingFang-SC-Heavy;
font-weight: bold;
color: #222222;
letter-spacing: -0.31px;
}
... ...
... ... @@ -658,7 +658,10 @@ Page(Object.assign({
}
})
},
//倒计时结束
endCountdown() {
},
assistCancel() {
this.reload();
},
... ...
... ... @@ -9,6 +9,7 @@
"quick-navigation": "/components/layout/quick-navigation/quick-navigation",
"yoho-alert": "./components/alert/alert",
"assist-list": "./components/assist-list/assist-list",
"action-bar": "./components/action-bar/action-bar"
"action-bar": "./components/action-bar/action-bar",
"count-down-by-now": "./components/count-down-by-now/index"
}
}
... ...
<import src="../../../vendors/zanui/actionsheet/index.wxml" />
<wxs src="../../../wxs/helper.wxs" module="helper" />
<view >
<image class="detail-banner-image" src="{{helper.image(defaultImage, 750, 470, 1)}}"></image>
</view>
<count-down-by-now
bindendcountdown="endCountdown"
current="1551921200"
begin="1551931200">
</count-down-by-now>
<image class="detail-banner-image" src="{{helper.image(defaultImage, 750, 470, 1)}}"></image>
<view class="detail-container">
<view class="product-name">
<text class="name">{{productName}}</text>
</view>
<view class="realPrice">{{price}}</view>
<!-- <view class="realPrice">{{price}}</view> -->
<view class="advanceTitleView">
<view class="advanceTime">
<!-- <view class="advanceTime">
<view class="image-time"><image class="image-time" src="../../../static/images/shijian2@3x.png"></image></view>
<block wx:if="{{saleTime}}">
<view class="text-time">{{saleTime}} 发售</view>
... ... @@ -17,10 +23,11 @@
<block wx:else>
<view class="text-time">发售时间待定</view>
</block>
</view>
</view> -->
<view class="realPrice">{{price}}</view>
<view class="advanceTitle">{{reminderNum}}人已关注</view>
</view>
<view class="detail-btn" bindtap="buyNow">查看商品详情</view>
<!-- <view class="detail-btn" bindtap="buyNow">查看商品详情</view> -->
</view>
<view class="line"></view>
<image class="banner-image" lazy-load bindtap="goList" src="../../../static/images/banner.png"></image>
... ... @@ -56,20 +63,20 @@
<assist-list wx:if="{{showAssistList}}" list="{{avatarList}}" num="{{assistLimit}}"></assist-list>
<block wx:if="{{limitProductType === 4}}">
<!-- 没有助力 -->
<block wx:if="{{showStatus === 1}}">
<block wx:if="{{productSourceType === 1}}">
<action-bar wx:if="{{assistStatus === 1 || assistStatus === 3}}">
<form bindsubmit="assistShare" report-submit='true'>
<view class="bottom1-action">
<button class="as-bottom ok" formType="submit">邀请好友助力获取限购码</button>
<button class="as-bottom ok" formType="submit">邀请新用户助力获取限购码</button>
<view class="help-wrapper" bindtap="goHelp">
<image class="help" src="../../../static/images/XD_q_ic@3x.png"></image>
</view>
</view>
</form>
</action-bar>
<action-bar wx:elif="{{assistStatus === 2}}">
<view class="bottom1-action">
<view class="as-bottom cancel">即将开售</view>
... ... @@ -195,7 +202,7 @@
<block wx:elif="{{showStatus === 6}}">
<action-bar wx:if="{{productSourceType === 1}}">
<view class="bottom1-action">
<view class="as-bottom confirm" bindtap="saleRemind">订阅商品发售提醒</view>
<view class="as-bottom confirm" bindtap="saleRemind">关注公众号获得发售提醒</view>
</view>
</action-bar>
... ... @@ -211,7 +218,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>
... ...
... ... @@ -5,8 +5,8 @@
}
.detail-banner-image {
width: 750rpx;
height: 470rpx;
width: 100%;
height: 468rpx;
display: block;
}
... ... @@ -17,15 +17,19 @@
line-height: 34rpx;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
margin-bottom: 40rpx;
margin-top: 20rpx;
}
.advanceTitleView .advanceTitle {
font-size: 24rpx;
color: #b0b0b0;
font-size: 24rpx;
color: #b0b0b0;
font-family: PingFang-SC-Medium;
font-weight: bold;
letter-spacing: 0;
}
.advanceTitleView .advanceTime {
/* .advanceTitleView .advanceTime {
font-size: 24rpx;
color: #000;
display: flex;
... ... @@ -42,17 +46,16 @@
.advanceTitleView .text-time {
display: inline-block;
height: 34rpx;
line-height: 34rpx;
}
line-height: 34rpx;
}*/
.realPrice {
.advanceTitleView .realPrice {
font-family: PingFang-SC-Medium;
color: #d0021b;
color: #D0021B;
line-height: 40rpx;
height: 40rpx;
font-size: 30rpx;
font-size: 36rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.detail-btn {
... ... @@ -82,10 +85,13 @@
}
.product-name {
width: 100%;
font-family: PingFang-SC-Regular;
font-size: 30rpx;
margin-bottom: 10rpx;
width: 100%;
margin-bottom: 10rpx;
font-family: PingFang-SC-Semibold;
font-weight: 500;
font-size: 15px;
color: #444444;
letter-spacing: -0.36px;
}
.bottom1-action {
... ...