jinjian1.1/pages/mine/index.vue

159 lines
3.3 KiB
Vue

<template>
<view>
<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
<view class="u-m-r-10">
<u-avatar :src="pic" size="140"></u-avatar>
</view>
<view class="u-flex-1">
<view class="u-font-18 u-p-b-20">昵称</view>
<view class="u-font-14 u-tips-color">{{tel}}</view>
</view>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell icon="file-text" title="进件历史" :isLink="true" @click="goHistory"></u-cell>
</u-cell-group>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell icon="star" title="去进件" @click="goAdd"></u-cell>
<u-cell icon="photo" title="修改昵称" @click="isShow=true"></u-cell>
<u-cell icon="coupon" title="修改密码" @click="isMima=true"></u-cell>
</u-cell-group>
</view>
<view class="u-m-t-20">
<u-cell-group>
<u-cell @click="back" icon="setting" title="退出登录"></u-cell>
</u-cell-group>
</view>
<u-popup :show="isShow" mode="center" @close="close">
<u--input placeholder="请输入新昵称" border="surround" type='text' v-model="value" @change="change"></u--input>
<u-button type="primary" text="确定" @click="changeVal"></u-button>
</u-popup>
<u-popup :show="isMima" mode="center" @close="close">
<u--input placeholder="请输入原密码" border="surround" type='password' v-model="oldMima" @change="change2"></u--input>
<u--input placeholder="请输入新密码" border="surround" type='password' v-model="newMima" @change="change3"></u--input>
<u-button type="primary" text="确定" @click="changeVal"></u-button>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
pic: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/img/logo/merch.png',
tel: '',
isShow: false, //修改昵称
isMima: false, //修改密码
value: '',
oldMima:'',
newMima:''
}
},
onLoad() {
this.tel = uni.getStorageSync('phone')
},
methods: {
//修改昵称、密码
changeVal() {
this.close()
},
change(e) {
this.value = e
},
change2(e) {
this.oldMima = e
},
change3(e) {
this.newMima = e
},
close() {
this.isMima = false;
this.isShow = false;
this.value='';
this.oldMima='';
this.newMima='';
},
//进件历史
goHistory() {
uni.navigateTo({
url: '/pages/mine/history'
})
},
goAdd() {
uni.switchTab({
url: '/pages/index/index'
})
},
//退出登录
back() {
uni.clearStorage();
uni.reLaunch({
url: '/pages/login/index'
});
}
}
}
</script>
<style>
page {
background-color: #ededed !important;
}
</style>
<style lang="scss" scoped>
/deep/.u-popup__content {
padding: 60rpx 40rpx !important;
border-radius: 20rpx !important;
}
/deep/ .u-input{
margin-bottom: 40rpx;
}
.user-box {
background-color: #fff;
padding-top: 120rpx;
}
.u-p-b-30 {
padding-bottom: 30rpx !important;
}
.u-p-l-30 {
padding-left: 30rpx !important;
}
.u-p-r-20 {
padding-right: 20rpx !important;
}
.u-m-r-10 {
margin-right: 20rpx;
}
.u-m-t-20 {
margin-top: 20rpx;
background-color: #fff;
}
.u-flex-1 {
flex: 1;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
/deep/.u-cell__body {
padding: 32rpx 30rpx !important;
}
.u-font-14 {
font-size: 28rpx;
}
</style>