Authored by zhangxiaoru

分享样式

... ... @@ -151,6 +151,9 @@ app.use((req, res, next) => {
next();
});
// 添加请求上下文
app.use(global.yoho.httpCtx());
// dispatcher
try {
const user = require('./doraemon/middleware/user');
... ...
'use strict';
// const shareBuyModel = require('../models/share-buy'),
// headerModel = require('../../../doraemon/models/header');
exports.index = (req, res) => {
// let uid = req.user.uid;
// req.ctx(shareBuyModel).shareIndex(uid).then(data => {
res.render('share-buy/share-buy', {
localCss: true,
width750: true,
title: '分享购'
});
// }).catch(next);
};
exports.detail = (req, res) => {
// let uid = req.user.uid;
res.render('share-buy/share-detail', {
localCss: true,
width750: true,
title: '分享购',
page: 'share-buy'
});
};
... ...
// const config = global.yoho.config;
// module.exports = class extends global.yoho.BaseModel {
// shareIndex(uid) {
// let data = {
// content_code: 'ec9eb72eae121fcd6c1b7d1de75caff1'
// }
// let options = {
// url: 'operations/api/v5/resource/get',
// data: data,
// param: {
// cache: true,
// code: 200
// },
// api: global.yoho.ServiceAPI
// };
// return this.get(options).then(result => {
// return result;
// });
// };
// };
... ...
... ... @@ -43,6 +43,8 @@ const appDownloads = require(`${cRoot}/app-downloads`);
const redbag = require(`${cRoot}/redbag`);
const annualAccount = require(`${cRoot}/annual-account`);
const shareBuy = require(`${cRoot}/share-buy`);
// routers
router.get('/demo', demo.index);
... ... @@ -238,4 +240,7 @@ router.get('/app-downloads', appDownloads.index);
router.get('/couponSend', couponFloor.couponSend); // 获取优惠券
router.get('/share-buy', shareBuy.index); // 分享购首页
router.get('/share-buy/detail', shareBuy.detail); // 分享购详情页
module.exports = router;
... ...
<div class="share-buy-page yoho-page">
<div class="share-title"></div>
<div class="coupon-list">
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
</div>
<div class="news-flash">
<span class="news-title">返利快讯</span>
<ul class="news">
<li>1234545</li>
<li>qweee</li>
<li>是的是的</li>
</ul>
</div>
<div class="tab">
<a>我的返利收益</a>
<a>分享购攻略</a>
</div>
</div>
... ...
<div class="share-buy-page yoho-page">
<div class="share-title"></div>
<div class="coupon-list">
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
<div class="coupon-group">
<div class="coupon-left">
<p class="coupon-money">
<i class="iconfont"></i>
<span class="money">50</span>
</p>
<p class="coupon-type">现金券</p>
</div>
<div class="coupon-right">
<span>立即参与</span>
<p class="coupon-mold">品牌卷</p>
<p class="coupon-limit">全场通用</p>
</div>
</div>
</div>
<div class="news-flash">
<span class="news-title">返利快讯</span>
<ul class="news">
<li>1234545</li>
<li>qweee</li>
<li>是的是的</li>
</ul>
</div>
<div class="tab">
<a>我的返利收益</a>
<a>分享购攻略</a>
</div>
</div>
{{!-- <div>{{message}}1111</div>
<div class="activity-time" data-time-s="">
<span></span>
<span></span>天
<span></span>
<span></span>小时
<span></span>
<span></span>分钟
<span></span>
<span></span>秒
</div>
<div class="gonggao">
<ul class="gun">
<li>1234545</li>
<li>qweee</li>
<li>是的是的</li>
</ul>
</div> --}}
... ...
<div class="share-detail-page">
<div class="coupon-detail">
<div class="countdown">
<div class="title">距离活动时间还剩:</div>
<div class="activity-time">
<span></span>
<span></span>
<span></span>
<span></span>小时
<span></span>
<span></span>分钟
<span></span>
<span></span>
</div>
</div>
<div class="coupon-info">
<div class="info-top">
<div class="coupon-money">
<i class="iconfont"></i>
<span>50</span>
</div>
<span class="coupon-code">fhewlfhwefh</span>
<span class="copy">复制</span>
<p class="share-way">(券码可直接分享给好友)
<span class="coupon-type">现金券<span>
</p>
</div>
<div class="info-bottom">
<span class="share-coupon">全场通用</span>
<span class="coupon-tip">特列商品(秒杀、限定、境外、预售等)暂不支持使用优惠券。</span>
<span class="validity">有效期</span>
</div>
<p class="use-way">
使用方法:<br>
复制以上优惠券码,在有货APP优惠券列表页兑换券码或结
算时优惠券栏输入扣减; <br>
券码一个账户仅可使用1次。
</p>
</div>
</div>
</div>
... ...
... ... @@ -14,8 +14,12 @@ const domains = {
liveApi: 'http://testapi.live.yohops.com:9999/',
singleApi: 'http://api-test3.yohops.com:9999/',
api: 'http://api-test3.yohops.com:9999/',
service: 'http://service-test3.yohops.com:9999/',
// api: 'http://api-test3.yohops.com:9999/',
// service: 'http://service-test3.yohops.com:9999/',
api: 'http://api.yoho.cn/',
service: 'http://service.yoho.cn/',
global: 'http://api-global.yohobuy.com',
store: 'http://192.168.102.210:8080/portal-gateway/',
... ...
'use strict';
let $ = require('yoho-jquery');
// tip = require('plugin/tip');
let $activityTime = $('.activity-time'),
endTime = $activityTime ? $activityTime.data('time-s') : '';
let params = {
anHour: 3600, // 1小时=?秒
aMinute: 60, // 1分钟=?秒
aSecond: 1, // 1秒=?秒
timeDom: $activityTime, // 时间对象数组
endTime: [endTime] // 时间差数组
};
require('activity/share-buy.page.css');
if ($('.share-buy-page').height() < $(window).height()) {
$('.share-buy-page').height($(window).height());
}
function division(time) {
time = time > 10 ? time + '' : '0' + time;
let timeArr = time.split('');
return timeArr;
}
// 倒计时
function getRTime(conf) {
let d = 0,
h = 0,
m = 0,
s = 0;
conf.timeDom.each(function(key, item) {
conf.endTime[key] = conf.endTime[key] - conf.aSecond;
if (conf.endTime[key] > conf.aSecond) {
d = Math.floor(conf.endTime[key] / conf.anHour / 24);
h = Math.floor(conf.endTime[key] / conf.anHour % 24);
m = Math.floor(conf.endTime[key] / conf.aMinute % 60);
s = Math.floor(conf.endTime[key] / conf.aSecond % 60);
// showTime += d > 0 ? d + '天' : '';
// showTime += h > 0 ? h + '小时' : '';
// showTime += m + '分钟';
// showTime += s > 0 ? s + '秒' : '';
// if (showTime.length !== '') {
// showTime = '剩' + showTime;
// }
// console.log(m, division(m));
$(item).find('span').eq(0).html(division(d)[0]);
$(item).find('span').eq(1).html(division(d)[1]);
$(item).find('span').eq(2).html(division(h)[0]);
$(item).find('span').eq(3).html(division(h)[1]);
$(item).find('span').eq(4).html(division(m)[0]);
$(item).find('span').eq(5).html(division(m)[1]);
$(item).find('span').eq(6).html(division(s)[0]);
$(item).find('span').eq(7).html(division(s)[1]);
$(item).fadeIn();
} else {
$(item).hide();
}
});
}
function startCountDown(p) {
$.extend(params, p || {});
setInterval(function() {
getRTime(params);
}, 1000);
}
$.ajax({
type: 'GET',
url: '/product/sale/discount/getTime',
data: {
id: 3919
},
success: function(data) {
if (data) {
startCountDown({
endTime: [data]
});
}
}
});
function Marquee() {
$('.news').animate({
marginTop: '-' + $('.news').find('li:first').height() + 'px'
}, 1000, function() {
$(this).css({ marginTop: '0px' }).find('li:first').appendTo(this);
});
}
if ($('.news').find('li').length > 1) {
setInterval(Marquee, 2000);
}
... ...
.share-buy-page {
width: 100%;
height: 100%;
background-image: resolve("activity/share-buy/back.png");
background-size: 100%;
padding-top: 110px;
.share-title {
background-image: resolve("activity/share-buy/body.png");
width: 580px;
height: 197px;
background-size: 100%;
margin: auto;
}
.coupon-list {
background-color: #d0021b;
margin: 115px 30px 0;
padding: 30px 0;
}
.coupon-group {
margin: 0 20px 30px;
background-image: resolve("activity/share-buy/coupon.png");
background-size: 100%;
width: 651px;
height: 190px;
padding-top: 25px;
.coupon-left {
float: left;
width: 180px;
text-align: center;
.coupon-money {
color: #d0021b;
font-size: 34px;
}
.money {
font-size: 70px;
font-family: DINCond;
}
.coupon-type {
font-size: 24px;
color: #b0b0b0;
}
}
.coupon-right {
width: 470px;
float: left;
padding-left: 36px;
.coupon-mold {
font-size: 30px;
line-height: 96px;
font-weight: 700;
font-family: PingFang;
}
.coupon-limit {
font-size: 22px;
color: #b0b0b0;
line-height: 40px;
}
span {
float: right;
margin: 45px 35px 0 0;
display: block;
width: 130px;
height: 50px;
line-height: 50px;
font-size: 28px;
color: #fff;
background-color: #d0021b;
text-align: center;
}
}
&:last-child {
margin-bottom: 0;
}
}
.news-flash {
height: 70px;
overflow: hidden;
text-align: center;
color: #fff;
margin: 30px;
.news-title {
display: block;
float: left;
width: 150px;
height: 70px;
background-color: #d0021b;
color: #fff;
font-size: 30px;
line-height: 70px;
}
.news {
background-color: #222;
li {
height: 70px;
width: 100%;
font-size: 24px;
line-height: 70px;
}
}
}
.tab {
width: 100%;
height: 125px;
background-color: #d0021b;
position: fixed;
bottom: 0;
z-index: 10;
a {
width: 50%;
height: 125px;
line-height: 125px;
text-align: center;
display: block;
float: left;
color: #fff;
font-size: 34px;
}
}
}
.share-detail-page {
.coupon-detail {
margin: 30px;
background-color: #d0021b;
}
.countdown {
color: #fff;
text-align: center;
margin: 5px 0 40px;
.title {
height: 70px;
line-height: 70px;
}
.activity-time {
font-size: 22px;
span {
display: inline-block;
width: 35px;
height: 45px;
font-size: 32px;
background-color: #bb0218;
}
}
}
.coupon-info {
background-image: resolve("activity/share-buy/coupon-detail.png");
background-size: 100%;
background-repeat: no-repeat;
padding: 50px 20px 0;
.info-top {
padding: 0 30px;
}
.coupon-money {
float: right;
font-size: 28px;
height: 56px;
.iconfont {
vertical-align: top;
}
span {
position: relative;
top: -17px;
font-size: 70px;
}
}
.coupon-code {
display: inline-block;
font-size: 28px;
}
.copy {
display: inline-block;
width: 90px;
height: 40px;
background-color: #444;
color: #fff;
font-size: 24px;
line-height: 40px;
text-align: center;
border-radius: 5px;
}
.share-way {
width: 100%;
color: #b0b0b0;
font-size: 24px;
display: inline-block;
.coupon-type {
float: right;
}
}
.info-bottom {
color: #b0b0b0;
font-size: 24px;
padding: 40px 30px 0;
span {
display: inline-block;
}
.validity {
height: 42px;
line-height: 42px;
}
}
.use-way {
margin-top: 45px;
padding-bottom: 20px;
font-size: 24px;
color: #fff;
}
}
}
... ...
@import "share-buy";
... ...
@import "share-buy/share-detail";
... ...