fe / yohobuy-node · Commits

Go to a project

Authored by yyq
Commit f136b40d0569e91e636f218ff288f46f76c5c698 1 parent 332b4444

dialog ui

Inline Side-by-side
Showing 8 changed files with 179 additions and 21 deletions
... ... @@ -7,6 +7,8 @@
const _ = require('lodash');
const setPager = require(`${global.utils}/pager`).setPager;
const POP_IMG_CODE = 'fa046a09b7c2c0e06927162404d95111';
module.exports = class extends global.yoho.BaseModel {
constructor(ctx) {
super(ctx);
... ... @@ -22,7 +24,12 @@ module.exports = class extends global.yoho.BaseModel {
method: 'app.invitecode.history',
uid: uid,
page: page || 1
}})
}}),
this.get({
api: global.yoho.ServiceAPI,
url: 'operations/api/v5/resource/get',
data: {content_code: POP_IMG_CODE}
})
]).then(result => {
let resData = _.get(result, '[0].data', {});
... ... @@ -55,6 +62,16 @@ module.exports = class extends global.yoho.BaseModel {
}
}
if (result[2].code === 200) {
let sourceData = result[2].data || [];
_.dropWhile(sourceData, o => {
return o.template_name !== 'single_image';
});
resData.popImgSrc = _.get(sourceData, '[0].data[0].src', '');
}
return resData;
});
}
... ...
... ... @@ -9,14 +9,14 @@
<div class="item-card">
<span class="tag">方法一：扫描邀请二维码</span>
<div class="card-main">
<div class="spread-code" data-url="{{url}}"></div>
<div class="spread-code" data-url="{{qrcodeUrl}}"></div>
</div>
<p>{{{activityDescribe}}}</p>
</div>
<div class="item-card">
<span class="tag">方法二：使用潮流口令</span>
<div class="card-main">
<p class="spread-id" data-word="{{trendWord}}">{{inviteCode}}</p>
<p class="spread-id{{#unless trendWord}} new-tip{{/unless}}" data-word="{{trendWord}}" data-img="{{image2 popImgSrc w=360 h=130}}">{{inviteCode}}</p>
<div class="edit-word">
<span class="iconfont">&#xe6c7;</span>
</div>
... ... @@ -27,8 +27,7 @@
<span class="tag">方法三：使用邀请链接</span>
<div class="card-main">
<div class="spread-url">
<input type="text" value="{{url}}" class
="copy-url" readonly="readonly">
<input type="text" value="{{shareUrl}}" class="copy-url" readonly="readonly">
<div class="succ-tip">复制成功</div>
</div>
</div>
... ... @@ -78,10 +77,8 @@
</div>
{{> pager}}
<div class="hide trend-word-tpl">
<h3>设置潮流口令的好处是？</h3>
<div>{{{trendWordSetReason}}}</div>
<h3>被邀请好友的可获得?</h3>
<div>{{{invitedFriendWelfare}}}</div>
<h3>玩转潮流口令，超值福利等你拿</h3>
<div>{{{trendGuidePopUpDesc}}}</div>
</div>
{{/ spread}}
</div>
... ...
<p class="word-tip">邀请码升级为潮流口令<br>设置您的潮流口令彰显您的潮流本色</p>
<input type="text" class="trend-word-input" placeholder="请设置15位字符以内的潮流口令" maxlength="15" value="{{word}}">
<p class="err-tip"></p>
<div class="ext-info">{{{content}}}</div>
<div class="cover-img">
<div class="img-block">
<img src="{{img}}">
</div>
</div>
<div class="cont-wrap">
<input type="text" class="trend-word-input" placeholder="请设置15位字符以内的潮流口令" maxlength="15" value="{{word}}">
<p class="err-tip"></p>
<div class="ext-info">{{{content}}}</div>
</div>
... ...

5.85 KB | W: | H:

11 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -23,8 +23,12 @@ var defaultWord = $spreadWord.data('word');
require('../common');
require('yoho-jquery-qrcode');
function reseatWordSize() {
$spreadWord.css('font-size', 22 + parseInt((14 - $spreadWord.text().length) / 7, 10) * 4);
function reseatWordSize(word) {
if (!word) {
return;
}
$spreadWord.css('font-size', 22 + parseInt((14 - word.length) / 7, 10) * 4);
}
function saveTrendWord(dg) {
... ... @@ -50,8 +54,8 @@ function saveTrendWord(dg) {
}).done(function(data) {
if (data.code === 200) {
$spreadWord.text(word);
reseatWordSize();
defaultWord = word;
reseatWordSize(defaultWord);
dg.close && dg.close();
} else {
... ... @@ -85,20 +89,21 @@ clipboard.on('success', function() {
}, 2000);
});
$editBtn.on('click', function() {
$editBtn.on('click', function(e) {
var _d = new Dialog({
content: trendWordTpl({
img: $spreadWord.data('img'),
word: defaultWord,
content: reasonHtml
}),
className: 'edit-trend-word-dg',
className: 'edit-trendword-dialog',
btns: [
{
id: 'trend-edit-cancel',
btnClass: ['trend-edit-cancel'],
name: '暂不',
cb: function() {
if (!window.cookie('no_cue_trendword')) {
if (e.isTrigger && !window.cookie('no_cue_trendword')) {
window.setCookie('no_cue_trendword', 1, {expires: 30});
}
_d.close();
... ... @@ -116,7 +121,7 @@ $editBtn.on('click', function() {
}).show();
});
reseatWordSize();
reseatWordSize(defaultWord);
if (!defaultWord && !window.cookie('no_cue_trendword')) {
$editBtn.trigger('click');
... ...
... ... @@ -56,12 +56,23 @@
}
.spread-id {
font-size: 38px;
font-size: 36px;
max-width: 190px;
word-break: break-all;
display: inline-block;
vertical-align: middle;
line-height: 1.2;
position: relative;
}
.new-tip:before {
content: "";
position: absolute;
left: 50%;
top: -20px;
width: 50px;
height: 26px;
background: url(/home/new-tip.png);
}
.edit-word {
... ... @@ -197,3 +208,125 @@
}
}
}
.edit-trendword-dialog {
width: 360px;
box-sizing: border-box;
border: 0;
border-radius: 6px;
padding: 0;
background-color: #fff;
.close {
display: none;
}
.cover-img {
height: 130px;
position: relative;
margin-bottom: 60px;
.img-block {
width: 100%;
position: absolute;
bottom: 0;
}
img {
width: 100%;
height: 100%;
display: block;
}
&:after {
content: "";
position: absolute;
width: 213px;
height: 25px;
background: url(/home/word-title.png);
left: 50%;
bottom: -40px;
margin-left: -106px;
}
}
.cont-wrap {
padding: 0 14px;
.trend-word-input {
height: 40px;
width: 100%;
font-size: 16px;
color: #fff;
background: #d2d2d2;
padding: 0;
border: 0;
border-radius: 6px;
box-sizing: border-box;
text-align: center;
}
input::-webkit-input-placeholder {
color: #fff;
}
input:-moz-placeholder {
color: #fff;
}
input::-moz-placeholder {
color: #fff;
}
input:-ms-input-placeholder {
color: #fff;
}
}
.ext-info {
h3 {
line-height: 60px;
font-size: 18px;
font-weight: 700;
}
div {
padding: 0 20px;
text-align: left;
line-height: 2;
color: #444;
font-weight: 700;
font-size: 14px;
}
.red {
font-size: 16px;
color: #ec000e;
}
}
.btns {
padding: 10px 14px;
margin-bottom: 10px;
height: 52px;
> * {
display: block;
float: left;
width: 160px;
height: 52px;
line-height: 52px;
border: 0;
padding: 0;
border-radius: 6px;
font-size: 16px;
color: #fff;
background-color: #252525;
}
.trend-edit-sure {
float: right;
background-color: #ec000e;
}
}
}
... ...