my_information.html 9.8 KB
<!DOCTYPE html>
<html lang="en">

{include file="public/head"/}
<link rel="stylesheet" href="__CDN__/assets/advertising/css/personalMsg.css">
<link rel="stylesheet" href="__CDN__/assets/advertising/mui/mui.picker.min.css">

<body>
    <!-- 顶部 -->
    <div class="personal_msg_top">
        <!-- 头像 -->
        <div class="per_msg_header layout align_center justify flex_row">
            <div class="">头像</div>
            <div class="header_img upload">
                <img src="{$user.avatar}" alt="">
                <input type="hidden" id="avatar" value="{$user.avatar}"/>
            </div>
        </div>
        <div class="per_msg_nick layout align_center justify flex_row">
            <div class="">昵称</div>
            <div class="">
                <input type="text" id="nickname" value="{$user.nickname}" placeholder="请输入微信昵称">
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="personal_msg_bottom">
        <div class="per_msg_single layout align_center justify flex_row" id="sexPicker">
            <div class="">性别</div>
            <div class="layout align_center justify flex_row">
                <input type="text" placeholder="请选择性别" disabled {empty name="$user.gender"}disabled{/empty} class="sex_input" value="{if condition='$user.gender eq 1'}男{elseif condition='$user.gender eq 2'/}女{/if}">
                <input type="hidden" id="gender" value="{$user.gender}"/>
                <img src="__CDN__/assets/advertising/img/right.png" alt="">
            </div>
        </div>
        <div class="per_msg_single layout align_center justify flex_row" id="agePicker">
            <div class="">年龄</div>
            <div class="layout align_center justify flex_row">
                <input type="text" id="year" placeholder="请选择年份" disabled {empty name="$user.year"}disabled{/empty} class="age_input" value="{notempty name='$user.year'}{$user['year']}{/notempty}">
                <img src="__CDN__/assets/advertising/img/right.png" alt="">
            </div>
        </div>
        <div class="per_msg_single layout align_center justify flex_row" id="datePicker">
            <div class="">生日</div>
            <div class="layout align_center justify flex_row">
                <input type="text" id="day" placeholder="请选择出生日期" disabled {empty name="$user.day"}disabled{/empty} class="date_input" value="{notempty name='$user.day'}{$user['day']}{/notempty}">
                <img src="__CDN__/assets/advertising/img/right.png" alt="">
            </div>
        </div>
        <div class="per_msg_single layout align_center justify flex_row">
            <div class="">所在城市</div>
            <div class="city_name"></div>
        </div>
        <div class="btn">保存</div>
    </div>
    <!-- 提示 -->
    <div class="personal_msg_tips layout justify flex_row">
        <div class="personal_tips_icon">
            <img src="__CDN__/assets/advertising/img/sun_34@2x.png" alt="">
        </div>
        <div>
            <p>如实填写信息将有助于获取更多、更有用的信息!</p>
            <p> 性别,年龄,生日填写后无法修改,如填写错误请联系客 服进行处理。</p>
        </div>
    </div>
    {include file="public/js" /}
    <script src="__CDN__/assets/advertising/mui/mui.min.js"></script>
    <script src="__CDN__/assets/advertising/mui/mui.picker.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script>
        $(function(){
            var picker = new mui.PopPicker();
            picker.setData([{
                value: '1',
                text: '男'
            }, {
                value: '2',
                text: '女'
            }]);
            $("#sexPicker").click(function() {
                var sex = "{$user.gender}";//$(".sex_input").val();
                if (sex == '0') {
                    picker.show(function(selectItems) {
                        $(".sex_input").val(selectItems[0].text);
                        $("#gender").val(selectItems[0].value);
                    })
                }

            });

            // 年
            var dtPicker = new mui.DtPicker({
                type: "year",
                beginDate: new Date(1815, 04, 25), //设置开始日期
                endDate: new Date(2019, 04, 25), //设置结束日期
            });
            $("#agePicker").click(function() {
                var year = "{$user.year}";//$(".age_input").val();
                if (!year) {
                    dtPicker.show(function(e) {
                        $(".age_input").val(e.y.text);
                    });
                }

            });

            // 月日
            var dtPicker1 = new mui.DtPicker({
                type: "day",
            });
            $("#datePicker").click(function() {
                var date = "{$user.day}";//$(".date_input").val();
                if (!date) {
                    dtPicker1.show(function(e) {
                        $(".date_input").val(e.value)
                    })
                }
            });
            var user_id = "{$user.id}";
            var lat = '';
            var lng = '';
            wx.config(
                {$jssdk}
            );
            wx.ready(function () {
                wx.getLocation({
                    success: function (res) {
                        console.log(res);
                        success(res);
                    },
                    cancel: function (res) {
                        alert('必须同意授权获取地理位置才能获得奖励哦');
                    }
                });
                $('.upload').click(function () {
                    wx.chooseImage({
                        count: 1, // 默认9
                        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                        success: function (res) {
                            $(res.localIds).each(function (key, localId) {
                                uploadImages(localId);
                            });
                        }
                    });
                });
                function uploadImages(localId) {
                    wx.uploadImage({
                        localId: localId,
                        isShowProgressTips: 1,
                        success: function (res) {
                            var serverId = res.serverId; // 返回图片的服务器端ID
                            $.ajax({
                                url:"{:url('home/upload/fetImage')}",
                                type:"GET",
                                data:{'media':serverId},
                                success:function(res){
                                    console.log(res);
                                    if(res.code == 1){
                                        $('.upload').find('img').attr('src',res.data);
                                        $('#avatar').val(res.data);
                                    }
                                },
                                error:function(res){
                                    toast('与服务器断开连接');
                                }
                            })
                        },
                        fail: function (res) {
                            toast(JSON.stringify(res));
                        }
                    });
                }
            });
            function success(data) {
                lat = data.latitude; //经度
                lng = data.longitude; //纬度
                //保存到用户表
                $.ajax({
                    url:"{:url('home/member/get_city')}",
                    type:"POST",
                    data:{'user_id':user_id,'longitude':lng,'latitude':lat},
                    success:function(res){
                        if(res.code == 1){
                            $('.city_name').text(res.data.province+" "+res.data.city);
                            toast('定位成功');
                        }else{
                            toast('定位失败');
                        }
                    },
                    error:function(res){
                        toast('与服务器断开连接')
                    }
                });
            }
            //更新
            $('.btn').click(function(){
                var nickname = $('#nickname').val();
                var avatar = $('#avatar').val();
                var gender = $('#gender').val() != '' ? $('#gender').val() : '';
                var year = $('#year').val() != '' ? $('#year').val() : '';
                var day = $('#day').val() != '' ? $('#day').val() : '';
                if(avatar == ''){
                    toast('请上传头像');
                    return false;
                }else if(nickname == ''){
                    toast('请输入昵称');
                    return false;
                }
                $.ajax({
                    url:"{:url('home/member/update_information')}",
                    type:"GET",
                    data:{'user_id':user_id,'nickname':nickname,'avatar':avatar,'gender':gender,'year':year,'day':day},
                    success:function(res){
                        console.log(res);
                        if(res.code == 1){
                            toast('修改成功');
                            setTimeout(function(){
                                window.location.href = '';
                            },2000);
                        }
                    },
                    error:function(res){
                        toast('与服务器断开连接');
                    }
                })
            })
        });
    </script>
</body>

</html>