专栏首页雪胖纸的玩蛇日常11.开发newapp个人中心pages/me/me.vue和修改密码功能

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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 16.普通用户、网格长、网格员,操作数据(3)newapp/components/putong.vue

    玩蛇的胖纸
  • 18.普通用户、网格长、网格员,操作数据(5)newapp/components/wgy.vue

    玩蛇的胖纸
  • 10.开发newapp的登录功能login

    玩蛇的胖纸
  • uni学习笔记分享

    杨充
  • Android6.0源码分析之View(一)

    目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

    fanfan
  • 如何使用小程序视图容器组件

    在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

    宮園薰
  • 山科小站小程序

    WindrunnerMax
  • 小程序url传参如何写变量

    蓓蕾心晴
  • 小程序学习笔记

    xing.org1^
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan

扫码关注云+社区

领取腾讯云代金券