码迷,mamicode.com
首页 > 移动开发 > 详细

11.开发newapp个人中心pages/me/me.vue和修改密码功能

时间:2020-06-21 12:06:27      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:bar   direction   banner   new   dump   text   justify   app   art   

1.在小程序端newapp开发个人中心页面:

1.备用

1.新建修改密码页面uppwd

技术图片

 

 2.开发pages/me/me.vue:

<template>
    <view class="content">
        <view class="padding-xl radius shadow-warp bg-cyan">
            <view class="v-header">
                <view class="pic">
                    <open-data type="userAvatarUrl"></open-data>
                </view>
                <view class="pin">
                    <open-data type="userNickName"></open-data>
                    <view class="t padding">
                        <button class="cu-btn round text-cyan" @tap=GotoUpPwd>修改密码</button>
                        <button class="cu-btn round text-cyan" style="margin-left: 25upx;" @tap=Logout>退出登录</button>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="bg-white margin-top">
            <view class="cu-form-group">
                <view class="title">名字:</view>
                <input name="input" disabled="true" v-model="userinfo.name"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">民族:</view>
                <input name="input" disabled="true" v-model="userinfo.minzu"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">是否是党员:</view>
                <input name="input" disabled="true" v-model="userinfo.is_dangyuan"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">性别:</view>
                <input name="input" disabled="true" v-model="userinfo.sex"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">电话:</view>
                <input name="input" disabled="true" v-model="userinfo.mobile"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">身份证号:</view>
                <input name="input" disabled="true" v-model="userinfo.no"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">出生日期:</view>
                <input name="input" disabled="true" v-model="userinfo.chusheng"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">文化程度:</view>
                <input name="input" disabled="true" v-model="userinfo.wenhua"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">是否属于特殊群体:</view>
                <input name="input" disabled="true" v-model="userinfo.is_teshu"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">特殊群体:</view>
                <input name="input" disabled="true" v-model="userinfo.teshu"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">用户权限:</view>
                <input name="input" disabled="true" v-model="userinfo.power"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">婚姻状况:</view>
                <input name="input" disabled="true" v-model="userinfo.hunyin"></input>
            </view>
            
            <view class="cu-form-group align-start">
                <view class="title">现居地址:</view>
                <textarea maxlength="-1" disabled="true" v-model="userinfo.address"></textarea>
            </view>
            <view class="cu-form-group align-start">
                <view class="title">单位:</view>
                <textarea maxlength="-1" disabled="true" v-model="userinfo.danwei"></textarea>
            </view>
            <view class="cu-form-group">
                <view class="title">职位:</view>
                <input name="input" disabled="true" v-model="userinfo.zhiwei"></input>
            </view>
            
            <view class="cu-form-group">
                <view class="title">户籍性质:</view>
                <input name="input" disabled="true" v-model="userinfo.hujixz"></input>
            </view>
            
            <view class="cu-form-group align-start">
                <view class="title">户籍地址:</view>
                <textarea maxlength="-1" disabled="true" v-model="userinfo.huji"></textarea>
            </view>
        
        </view>
        
        <!-- 版权信息 -->
        <view class="solid-bottom padding text-center">
            ©由赤峰市落忆网络科技有限公司提供技术支持
        </view>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title:如果用户信息有变化或与实际信息不符,请联系网格员及时修改。,
                userinfo:{}
            }
        },
        methods: {
            isLogin(){                
                let token=uni.getStorageSync(token);
                if(token){
                    console.log(uni.getStorageSync(info))
                    let t=uni.getStorageSync(info)
                    if(t.sex==1){t.sex=}
                    if(t.sex==2){t.sex=}
                    if(t.sex==3){t.sex=不详}
                    if(t.hujixz==1){t.hujixz=农业户口}
                    if(t.hujixz==2){t.hujixz=非农业户口}
                    if(t.wenhua==0){t.wenhua=}
                    if(t.wenhua==1){t.wenhua=小学}
                    if(t.wenhua==2){t.wenhua=初中}
                    if(t.wenhua==3){t.wenhua=高中}
                    if(t.wenhua==4){t.wenhua=中专}
                    if(t.wenhua==5){t.wenhua=大专}
                    if(t.wenhua==6){t.wenhua=本科}
                    if(t.wenhua==7){t.wenhua=硕士}
                    if(t.wenhua==8){t.wenhua=博士}
                    if(t.hunyin==1){t.hunyin=未婚}
                    if(t.hunyin==2){t.hunyin=已婚}
                    if(t.hunyin==3){t.hunyin=离异}
                    if(t.hunyin==4){t.hunyin=丧偶}
                    if(t.power==1){t.power=普通用户}
                    if(t.power==2){t.power=单元长(组长)}
                    if(t.power==3){t.power=楼长(街长)}
                    if(t.power==4){t.power=网格员}
                    if(t.power==5){t.power=网格长}
                    this.userinfo=t    
                }else{
                    uni.navigateTo({url:/pages/login/login})
                }
            },
            //退出登录
            Logout(){
                uni.removeStorageSync(token);
                uni.navigateTo({url:/pages/login/login})
            },
            //去修改密码页面
            GotoUpPwd(){
                uni.navigateTo({url:/pages/uppwd/uppwd})
            }
        },
        onShow() {
            this.isLogin()
        }
    }
</script>

<style>
.pic{
    width: 200upx;
    height: 200upx;
}
.pin{
    width: 400upx;
    font-size: 40upx;
}
.v-header{
    display: flex;
    width: 100%;
    justify-content:space-around;
}
.t{
    font-size: 30upx;
    width: 100%;
    justify-content:space-around;
}

</style>

 

运行效果:

技术图片技术图片

 

 2.修改密码功能

1.在后端开发修改密码api

1.在NewCenter后端apps/user_operations/views.py中编写修改密码视图类:

#……


class UpPwdView(APIView):
    """用户修改密码"""
    def post(self, request):
        token=request.data.get(token)
        oldpwd=request.data.get(oldpwd)
        newpwd=request.data.get(newpwd)
        if token and oldpwd and newpwd:
            user = UserProfile.objects.filter(token=token,password=oldpwd).first()
            if user:
                user.password=newpwd
                user.save()
                re=UserProfileModelSerializer(user)
                result = {"status": "200", "data":{msg: 修改密码成功} }
            else:
                result = {"status": "403", "data": {msg: 查无此用户}}
        else:
            result = {"status": "404", "data": {msg: 未收到足够参数。}}
        return HttpResponse(json.dumps(result, ensure_ascii=False), content_type="application/json,charset=utf-8")

2.apps/user_operations/ulrs.py中:

from django.urls import path
from .views import GetPianQuBannerView,GetNoticeListView,UserLoginView,UpPwdView

urlpatterns = [
    path(getbanner/,GetPianQuBannerView.as_view()),#手机端获取banner图
    path(getnoticeclist/,GetNoticeListView.as_view()),#获取公告列表
    path(userlogin/,UserLoginView.as_view()),#小程序用户登录
    path(uppwd/,UpPwdView.as_view()),#用户修改密码
]

2.在newapp/pages/uppwd/uppwd.vue中:

<template>
    
    <view class="content">
        <view class="padding-xl radius shadow-warp bg-white margin-top">
            <view class="cu-form-group">
                <view class="title">旧密码:</view>
                <input placeholder="旧密码" v-model="tel"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">新密码:</view>
                <input placeholder="新密码" v-model="pwd"></input>
            </view>
        </view>
        <view class="padding flex flex-direction">
            <button class="cu-btn bg-green margin-tb-sm lg" @tap="upPwd" data-target="Modal">确认更新密码</button>
        </view>
        
        
        <view class="cu-modal" :class="modalName==‘Modal‘?‘show‘:‘‘">
            <view class="cu-dialog">
                <view class="cu-bar bg-white justify-end">
                    <view class="content">提示:</view>
                    <view class="action" @tap="hideModal">
                        <text class="cuIcon-close text-red"></text>
                    </view>
                </view>
                <view class="padding-xl">
                    {{title}}
                </view>
            </view>
        </view>
        
    </view>
        

</template>

<script>
import {host,get,post} from @/commons/post_and_get.js;
    export default {
        data() {
            return {
                modalName: null,
                title:请输入旧密码和新密码,
                tel:‘‘,
                pwd:‘‘,
                
            }
        },
        methods: {
            showModal(e) {
                this.modalName = e.currentTarget.dataset.target
            },
            hideModal(e) {
                this.modalName = null
            },
            async upPwd(e){
                if(this.tel &&this.pwd){

                    console.log(提交旧密码和新密码还有token)
                    let re=await post(/user_operations/uppwd/,{oldpwd:this.tel,newpwd:this.pwd,token:uni.getStorageSync(token)})
                    console.log(re)
                    this.title=re.data.msg
                    this.showModal(e)
                }else{
                    this.showModal(e)
                }
            }
            
            
        }
    }
</script>

<style>
.content{
    margin-top: 200upx;
}
</style>

 

11.开发newapp个人中心pages/me/me.vue和修改密码功能

标签:bar   direction   banner   new   dump   text   justify   app   art   

原文地址:https://www.cnblogs.com/xuepangzi/p/13171557.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!