family-userInfo.page.js 2.34 KB
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'),
            $height: $('.inp.height'),
            $weight: $('.inp.weight'),
            $userAvatar: $('.user-avatar')
        };

        this.init();
    }

    init() {
        this.bindEvents();
        this.on('citySwiperCb', (event, data) => { // 返回选中的slide对象
            console.log(data);
        });
        this.defaultPic();
    }

    bindEvents() {
        this.selector.$chosenCity.on('click', this.chosenCity.bind(this));
        this.selector.$modifyInp.on('blur', this.modifyInp.bind(this));
    }

    defaultPic() {
        let myImage = new Image(),
            avatar;

        avatar = this.selector.$userAvatar.data('avatar');
        myImage.src = avatar;
        myImage.onload = () => {
            this.selector.$userAvatar.css('background-image', 'url(' + avatar + ')');
        };
    }

    modifyInp() {
        this.ajax({
            url: '/home/family/modify',
            data: {
                nickName: this.selector.$nickName.val(),
                gender: this.selector.$gender.val(),
                birthday: this.selector.$birthday.val(),
                height: this.selector.$height.val(),
                weight: this.selector.$weight.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();
});