fe / yohobuywap-node · Commits

Go to a project

Authored by 李靖
Commit 200de72c4dcc15bd174b0cf3f0bb3b7eb172eafc 1 parent f3319604

修改个人信息

Inline Side-by-side
Showing 9 changed files with 546 additions and 2 deletions
... ... @@ -26,7 +26,7 @@ exports.coinDetail = (req, res) => {
localCss: true
};
res.render('family/coin-detail', Object.assign(responseData, ''));
res.render('family/coin-detail', responseData);
};
exports.getCoinData = (req, res, next) => {
... ... @@ -44,3 +44,37 @@ exports.getCoinData = (req, res, next) => {
res.json(result);
}).catch(next);
};
exports.userInfo = (req, res, next) => {
let responseData = {
module: 'home',
page: 'family-userInfo',
pageHeader: headerModel.setNav({
navTitle: '个人信息'
}),
title: 'YOHO！个人信息',
width750: true,
localCss: true
};
let params = {
uid: req.user.uid
};
req.ctx(family).userInfo(params).then(result => {
res.render('family/userInfo', Object.assign(responseData, result));
}).catch(next);
};
exports.modify = (req, res, next) => {
let params = {
uid: req.user.uid,
nickName: req.query.nickName,
gender: req.query.gender,
birthday: req.query.birthday
};
req.ctx(family).modify(params).then((result) => {
res.json(result);
}).catch(next);
};
... ...
... ... @@ -2,6 +2,7 @@
const _ = require('lodash');
const moment = require('moment');
const camelCase = global.yoho.camelCase;
class familyModel extends global.yoho.BaseModel {
constructor(ctx) {
... ... @@ -49,6 +50,57 @@ class familyModel extends global.yoho.BaseModel {
});
}
userInfo(params) {
let options = {
data: {
method: 'app.passport.profile',
uid: params.uid
},
param: {
code: 200
}
};
return this.get(options).then(result => {
let resu = {};
if (_.get(result, 'data')) {
let thisGender = result.data.gender;
result.data.gender = (thisGender === '1' ? '男' : '女');
result.data.otherGender = (thisGender === '1' ? '女' : '男');
if (result.data.gender === '男') {
result.data.genderId = 1;
result.data.otherGenderId = 2;
} else {
result.data.genderId = 2;
result.data.otherGenderId = 1;
}
resu = camelCase(result.data);
}
return resu;
});
}
modify(params) {
let options = {
data: {
method: 'app.passport.modifyBase',
uid: params.uid,
nick_name: params.nickName,
gender: params.gender,
birthday: params.birthday
},
param: {
code: 200
}
};
return this.get(options).then(result => {
return result;
});
}
checkType(params) {
switch (params) {
case 1:
... ...
... ... @@ -180,4 +180,6 @@ router.get('/tide-command', auth, tideCommand.tideCommand); // 设置潮流口
router.get('/family', auth, family.familyIndex); // family首页
router.get('/family/coinDetail', auth, family.coinDetail); // 积分详情页
router.get('/family/coinDetail/getCoinData', auth, family.getCoinData); // 筛选积分详情
router.get('/family/userInfo', auth, family.userInfo); // family个人信息页
router.get('/family/modify', auth, family.modify); // family修改个人信息页
module.exports = router;
... ...
<div class="family-user-info">
<div class="info-list">
<div class="list-item user-pic">
<div class="title">头像</div>
<div class="main">
<img class="pic" src="http://img2.imgtn.bdimg.com/it/u=523024675,1399288021&fm=26&gp=0.jpg" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div class="list-item">
<div class="title">昵称</div>
<div class="main">
<input class="inp nick-name modify" type="text" value="{{nickname}}" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div class="list-item">
<div class="title">性别</div>
<div class="main">
<select class="inp gender modify">
<option value="{{genderId}}">{{gender}}</option>
<option value="{{otherGenderId}}">{{otherGender}}</option>
</select>
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div class="list-item">
<div class="title">生日</div>
<div class="main">
<span class="date-c">
<input class="inp birthday modify" type="date" value="{{birthday}}" />
</span>
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div id="chosen-city" class="list-item">
<div class="title">城市</div>
<div class="main">
<span class="inp">江苏 南京</span>
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div class="list-item">
<div class="title">我的潮流口令</div>
<div class="main">
<input class="inp" type="text" value="#谁比我更潮谁比我更潮！#" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div class="list-item">
<div class="title">我的二维码</div>
<div class="main">
<input class="inp" type="text" value="177****4699" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
</div>
<div class="info-list">
<div class="list-item">
<div class="title">身高</div>
<div class="main">
<input class="inp" type="text" value="163cm" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
<div class="list-item">
<div class="title">体重</div>
<div class="main">
<input class="inp" type="text" value="体重" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
</div>
<div class="info-list">
<div class="list-item">
<div class="title">账号安全</div>
<div class="main">
<input class="inp" type="text" value="修改手机号+密码等" />
</div>
<div class="arr">
<span class="iconfont">&#xe604;</span>
</div>
</div>
</div>
<div class="city-swiper">
<div class="swiper-header">
<div class="cancel">取消</div>
<div class="ok">完成</div>
</div>
<div class="swiper-list">
<div class="swiper-container">
<div class="swiper-wrapper">
<div id="01" class="swiper-slide">江苏</div>
<div id="02" class="swiper-slide">浙江</div>
<div id="03" class="swiper-slide">安徽</div>
<div id="04" class="swiper-slide">福建</div>
<div id="05" class="swiper-slide">广东</div>
<div id="06" class="swiper-slide">广西</div>
<div id="07" class="swiper-slide">云南</div>
<div id="09" class="swiper-slide">内蒙古</div>
<div id="010" class="swiper-slide">黑龙江</div>
<div id="011" class="swiper-slide">新疆维吾尔自治区</div>
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div id="11" class="swiper-slide">南京</div>
<div id="12" class="swiper-slide">苏州</div>
<div id="13" class="swiper-slide">无锡</div>
<div id="14" class="swiper-slide">常州</div>
<div id="15" class="swiper-slide">宿迁</div>
<div id="16" class="swiper-slide">徐州</div>
<div id="17" class="swiper-slide">盐城</div>
<div id="18" class="swiper-slide">南通</div>
<div id="19" class="swiper-slide">扬州</div>
<div id="110" class="swiper-slide">连云港</div>
</div>
</div>
<div class="swiper-line"></div>
</div>
</div>
</div>
\ No newline at end of file
... ...
import 'home/family-userInfo.page.css';
import 'home/family/city-swiper.css';
import CitySwiper from './family/city-swiper';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
import tip from 'plugin/tip';
class UserInfo extends Page {
constructor() {
super();
this.selector = {
$chosenCity: $('#chosen-city'),
$citySwiper: $('.city-swiper'),
$modifyInp: $('.inp.modify'),
$nickName: $('.inp.nick-name'),
$gender: $('.inp.gender'),
$birthday: $('.inp.birthday'),
};
this.init();
}
init() {
this.bindEvents();
this.on('citySwiperCb', (event, data) => { // 返回选中的slide对象
console.log(data);
});
}
bindEvents() {
this.selector.$chosenCity.on('click', this.chosenCity.bind(this));
this.selector.$modifyInp.on('blur', this.modifyInp.bind(this));
}
modifyInp() {
this.ajax({
url: '/home/family/modify',
data: {
nickName: this.selector.$nickName.val(),
gender: this.selector.$gender.val(),
birthday: this.selector.$birthday.val()
},
}).then(result => {
if (result && result.code === 200) {
location.href = location.href;
} else {
tip.show(result.message);
}
}).catch(error => {
tip.show(error);
});
}
chosenCity() {
this.selector.$citySwiper.show();
new CitySwiper({
swiperNum: 2, // swiper列数
lineNum: 5, // 每列行数
centeredSlides: true, // 剧中显示
hidePartingLine: false // 隐藏两条分割线
});
}
}
$(() => {
new UserInfo();
});
... ...
import Swiper from 'yoho-swiper';
import $ from 'yoho-jquery';
import Page from 'yoho-page';
class CitySwiper extends Page {
constructor(data) {
super();
this.selector = {
$swiperC: $('.city-swiper'),
$swiper: $('.city-swiper .swiper-list').find('.swiper-container'),
$slide: $('.city-swiper .swiper-list').find('.swiper-slide'),
$swiperLine: $('.city-swiper .swiper-line'),
$swiperList: $('.city-swiper .swiper-list')
};
this.init(data);
}
init(data) {
let swiperParams = this.swiperParams(data);
this.setStyle(data);
new Swiper('.city-swiper .swiper-container', swiperParams);
}
setStyle(data) {
let wWidth = $(window).width();
let swiperWidth = wWidth / data.swiperNum || 1;
let lineHeight = this.selector.$swiperList.height() / data.lineNum;
let lineTop = lineHeight / 2;
if (data.hidePartingLine) {
this.selector.$swiperLine.hide();
}
this.selector.$swiper.css('width', `${swiperWidth}px`);
this.selector.$swiperLine.css('height', `${lineHeight}px`);
this.selector.$swiperLine.css('margin-top', `-${lineTop}px`);
}
swiperParams(data) {
let $thisSwiper = '';
let newParams = {
direction: 'vertical',
slidesPerView: data.lineNum || 1,
centeredSlides: data.centeredSlides,
loop: data.true,
onInit: (swiper) => {
$thisSwiper = swiper.activeIndex;
$thisSwiper = $(swiper.slides[`${$thisSwiper}`]);
this.emit('citySwiperCb', $thisSwiper);
},
onSlideChangeEnd: (swiper) => {
$thisSwiper = swiper.activeIndex;
$thisSwiper = $(swiper.slides[`${$thisSwiper}`]);
this.emit('citySwiperCb', $thisSwiper);
}
};
return newParams;
}
}
module.exports = CitySwiper;
... ...
... ... @@ -10,9 +10,10 @@ class Page {
}
on(name, ...cb) {
name = `yohoevent.${name}`;
this.event.on(name, ...cb);
this.$event.on(name, ...cb);
}
emit(name, ...data) {
name = `yohoevent.${name}`;
this.$event.trigger(name, ...data);
}
ajax(options = {}) {
... ...
html,
body {
background-color: #f0f0f0;
}
input,
select {
border: 0;
background: 0;
}
.family-user-info {
input::-webkit-clear-button {
display: none;
}
input::-webkit-calendar-picker-indicator {
display: none;
}
.info-list {
padding-left: 30px;
background-color: #fff;
margin-bottom: 20px;
.list-item {
height: 90px;
line-height: 90px;
padding-right: 30px;
border-bottom: solid 1px #e0e0e0;
.title {
width: 220px;
float: left;
font-size: 30px;
}
.main {
width: 450px;
float: left;
height: 90px;
padding: 10px 0;
padding-right: 20px;
position: relative;
}
.arr {
width: 20px;
float: left;
color: #b0b0b0;
}
select.inp {
width: auto;
direction: rtl;
}
.inp {
width: 100%;
height: 70px;
line-height: 70px;
font-size: 30px;
color: #b0b0b0;
text-align: right;
float: right;
padding: 0;
}
.date-c {
position: absolute;
top: 10px;
right: 20px;
width: 205px;
white-space: nowrap;
overflow: hidden;
}
.pic {
float: right;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
&.user-pic {
height: 140px;
line-height: 140px;
.main {
padding: 20px 0;
padding-right: 20px;
}
}
}
.list-item:last-child {
border-bottom: 0;
}
}
}
... ...
.city-swiper {
display: none;
width: 750px;
height: 430px;
position: fixed;
bottom: 0;
left: 0;
background-color: #ececec;
.swiper-header {
height: 70px;
background-color: #f5f5f5;
div {
line-height: 70px;
color: #005bff;
font-size: 30px;
padding: 0 20px;
}
.cancel {
float: left;
}
.ok {
float: right;
}
}
.swiper-list {
height: 360px;
width: 750px;
overflow: hidden;
position: relative;
}
.swiper-container {
height: 360px;
float: left;
}
.swiper-slide {
text-align: center;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
color: #cecfcf;
font-size: 30px;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.swiper-slide-prev {
transform: rotateX(30deg);
-webkit-transform: rotateX(30deg);
color: #aeb0b1;
}
.swiper-slide-next {
transform: rotateX(30deg);
-webkit-transform: rotateX(30deg);
color: #aeb0b1;
}
.swiper-slide-active {
transform: rotateX(0);
-webkit-transform: rotateX(0);
color: #000;
}
.swiper-line {
position: absolute;
top: 50%;
left: 0;
width: 750px;
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
z-index: -1;
}
}
... ...