family.page.js
4.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import 'home/family.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
import yoho from 'yoho-app';
import integral from 'home/integral-paradise.hbs';
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');
class FamilyIndex extends Page {
constructor() {
super();
this.selector = {
$userAvatar: $('.user-avatar'),
$codeSet: $('.code-set'),
$invition: $('.invition'),
$invitonSet: $('.inviton-set'),
$textarea: $('textarea'),
integralCh: echarts.init(document.getElementById('charts')),
chartWidth: $('.charts').width(),
$integralContent: $('.integral-content')
};
this.view = {
integral
};
this.init();
this.selector.$codeSet.on('click', this.setTrendPop.bind(this));
this.selector.$textarea.on('blur', this.saveTrendWord.bind(this));
this.selector.integralCh.on('click', this.jump.bind(this));
}
init() {
this.headIco();
this.integralCharts();
}
// 头像
headIco() {
if (this.selector.$userAvatar.data('avatar')) {
this.selector.$userAvatar.css('background-image', 'url(' + this.selector.$userAvatar.data('avatar') + ')');
}
}
// 积分乐园图表
integralCharts() {
let integralData = {
total: 18922,
totalHref: location.protocol + '//m.yohobuy.com/home/family/coinDetail?openby:yohobuy={"action":"go.h5","params":{"url":"' + location.protocol + '//m.yohobuy.com/home/family/coinDetail"}}', // eslint-disable-line
data: [
{value: 40, name: 'rose2', color: '#000', percent: '20%', plateType: 1},
{value: 35, name: 'rose3', plateType: 2},
{value: 30, name: 'rose4', plateType: 3},
{value: 25, name: 'rose5'},
{value: 20, name: 'rose6'},
{value: 15, name: 'rose7'},
]
};
this.selector.$integralContent.append(this.view.integral(integralData));
this.selector.integralCh.setOption({
calculable: true,
color: ['#C1232B', '#B5C334', '#FCCE10'],
series: [
{
type: 'pie',
radius: [this.selector.chartWidth / 3, this.selector.chartWidth / 2],
roseType: 'radius',
center: ['50%', '50%'],
label: {
normal: false
},
data: integralData.data
}
]
});
}
// 设置潮流口令
setTrendPop() {
this.selector.$invition.hide();
this.selector.$invitonSet.show();
this.selector.$textarea.focus();
}
// 提交口令
saveTrendWord() {
let trendWord = this.selector.$textarea.val();
this.ajax({
type: 'GET',
url: location.protocol + '//m.yohobuy.com/activity/set-trend-world',
data: {
trendWord: trendWord
}
}).then(result => {
tip.show(result.message);
if (result.code === 200) {
this.selector.$invition.show();
this.selector.$invitonSet.hide();
this.selector.$invition.find('.trend-code').html('# ' + trendWord + ' #');
} else {
this.selector.$textarea.focus();
}
}).catch(() => {
tip.show('服务异常，请稍后重试');
});
}
// 积分图表点击跳转
jump(params) {
if (yoho && yoho.isApp) {
yoho.goH5(`${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`);
} else {
window.location.href = `${location.protocol}//m.yohobuy.com/home/family/coinDetail?plateType=${params.data.plateType}`; // eslint-disable-line
}
}
}
$(() => {
new FamilyIndex();
});