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 text-sm" @tap=GotoUpPwd>修改密码</button>
                        <button class="cu-btn round text-cyan text-sm" style="margin-left:15upx;" @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">
                <view class="title">现居地址：</view>
                <input name="input" disabled="true" v-model="userinfo.address"></input>
            </view>
            <view class="cu-form-group">
                <view class="title">单位：</view>
                <input name="input" disabled="true" v-model="userinfo.danwei"></input>
            </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">
                <view class="title">户籍地址：</view>
                <input name="input" disabled="true" v-model="userinfo.huji"></input>
            </view>
        </view>
        
        <!-- 版权信息 -->
        <view class="solid-bottom padding text-center">
            ©由赤峰市落忆网络科技有限公司提供技术支持
        </view>
        
    </view>
</template>

<script>
import {host,get,post} from '@/commons/post_and_get.js';
    export default {
        data() {
            return {
                title:'如果用户信息有变化或与实际信息不符，请联系网格员及时修改。',
                userinfo:{}
            }
        },
        methods: {
            async isLogin(){                
                let token=uni.getStorageSync('token')
                if(token){
                    //更新个人数据信息开始
                    let re =await get('/user_operations/upuserinfo/',{'token':token})
                    // console.log(111,re)
                    if(re.status==200){
                        uni.setStorageSync('token' , re.data.token);
                        uni.setStorageSync('info' , re.data.info);
                    }else{
                        uni.removeStorageSync('token');
                        uni.navigateTo({url:'/pages/login/login'})
                    }
                    //更新个人数据信息结束
                    // 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='网格长'}
                    if(t.is_dangyuan){t.is_dangyuan='是'}
                    if(!t.is_dangyuan){t.is_dangyuan='否'}
                    if(t.is_teshu){t.is_teshu='是'}
                    if(!t.is_teshu){t.is_teshu='否'}
                    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{
    width: 100%;
    justify-content:space-around;
    display: flex;
}

</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>