Authored by htoooth

add css and js

... ... @@ -165,6 +165,47 @@ class HaveGain {
return res.json(result);
}).catch(next);
}
promoDetail(req, res, next) {
let uid = req.user.uid;
let pid = req.params.id;
if (!pid) {
return next(Error('promo detail pid is empty'));
}
return req.ctx(haveGainModel).promoDetail(pid, uid).then(result => {
if (result.error) {
return next(result.error);
}
return res.render('have-gain/promoDetail', Object.assign({
page: 'have-gain-promodetail',
title: '活动说明'
}, result));
}).catch(next);
}
promoSubmit(req, res, next) {
let uid = req.user.uid;
let pid = req.params.id;
return req.ctx(haveGainModel).promoSubmit(pid, uid).then(result => {
if (result.error) {
return res.json({
code: 401,
message: result.error.message
});
}
return res.json({
code: 200,
...result
});
}).catch(next);
}
}
module.exports = new HaveGain();
... ...
... ... @@ -112,4 +112,52 @@ module.exports = class extends global.yoho.BaseModel {
}
});
}
async promoDetail(pid, uid) {
return this.get({
data: {
method: 'app.union.shareOrder.queryActivityPage',
uid,
id: pid
}
}).then(result => {
if (result.code !== 200) {
return {
error: Error('出错了')
};
}
return {
status: uid ? result.data.status : 0,
imageUrl: result.data.image,
content: result.data.content,
contentTitle: result.data.title,
url: result.data.url
};
});
}
async promoSubmit(pid, uid) {
return this.get({
data: {
method: 'app.union.shareOrder.preJoinActivity',
uid: uid,
id: pid
}
}).then(result => {
if (result.code !== 200) {
return {
error: Error('出错了')
};
}
return {
data: {
...result.data
},
};
});
}
};
... ...
... ... @@ -337,4 +337,8 @@ router.get('/have-gain/fail', auth, haveGain.fail); // 有货有赚审核不通
router.post('/have-gain/resetApply', auth, haveGain.resetApply); // 有货有赚审核不通过,重新申请API
router.post('/have-gain/submitApply', auth, haveGain.submitApply); // 有货有赚-申请开通
// 有货有赚推广活动
router.get('/have-gain/promo/:id.html', haveGain.promoDetail);
router.post('/have-gain/promo/:id', auth, haveGain.promoSubmit);
module.exports = router;
... ...
<div class="promo-page">
<div class="promo-banner">
<img src="{{imageUrl}}">
</div>
<div class="promo-desc">
<div class="promo-desc__title">{{{contentTitle}}}</div>
<div class="promo-desc__content">{{{content}}}</div>
</div>
<div class="promo-status {{#isEqualOr status 0 1}} promo-status_submit {{else}} promo-status_over {{/isEqualOr}}js-submit" data-url="{{url}}" data-pid="{{id}}" data-status="{{status}}">
{{#isEqualOr status 0 1}}
点击确认参加活动
{{/isEqualOr}}
{{#isEqualOr status 2}}
报名成功,去分享活动商品
{{/isEqualOr}}
{{#isEqualOr status 3}}
不满足参加活动条件
{{/isEqualOr}}
{{#isEqualOr status 4}}
活动未开始
{{/isEqualOr}}
{{#isEqualOr status 5}}
活动已结束,请关注其他活动
{{/isEqualOr}}
</div>
</div>
... ...
{{#isEqualOr status 0 1}}
点击确认参加活动
{{/isEqualOr}}
{{#isEqualOr status 2}}
报名成功,去分享活动商品
{{/isEqualOr}}
{{#isEqualOr status 3}}
不满足参加活动条件
{{/isEqualOr}}
{{#isEqualOr status 4}}
活动未开始
{{/isEqualOr}}
{{#isEqualOr status 5}}
活动已结束,请关注其他活动
{{/isEqualOr}}
... ...
import 'scss/activity/have-gain-promodetail.page.scss';
import $ from 'yoho-jquery';
import statusTpl from 'hbs/activity/have-gain/status.hbs';
require('js/plugin/modal.alert');
const $promoStatus = $('.promo-status.js-submit');
function joinActivity(id) {
return $.post(`/activity/have-gain/promo/${id}`);
}
function changeStatus(status) {
$promoStatus.removeClass('promo-status_over').addClass('promo-status_submit')
.html(statusTpl({status}));
}
$promoStatus.on('click', function() {
const $this = $(this);
const url = $this.data('url');
const pid = $this.data('pid');
if ($this.hasClass('promo-status_over')) {
return;
}
if (url) {
window.location.href = url;
return;
}
if (pid) {
joinActivity(pid).then(result => {
if (result.code !== 200) {
$.yAlert(result.data.message);
return;
}
$.yAlert(result.data.message);
changeStatus(result.data.result);
});
}
});
... ...
/* stylelint-disable */
.promo-status {
position: fixed;
bottom: 0;
width: 100%;
height: 110px;
color: white;
font-size: 32px;
text-align: center;
line-height: 110px;
}
.promo-status_submit {
background: #d0021b;
}
.promo-status_over {
background: #444;
}
.promo-desc__title {
font-size: 32px;
color: #444;
margin-top: 40px;
margin-bottom: 20px;
}
.promo-desc__content {
font-size: 28px;
color: #444;
line-height: 60px;
}
... ...