|
|
<template>
|
|
|
<view class="me">
|
|
|
<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
|
|
|
<!-- 状态栏占位 -->
|
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
|
<!-- 真正的导航栏内容 -->
|
|
|
<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
|
|
|
<view>我的</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="me-top">
|
|
|
<view class="me-info">
|
|
|
<view class="me-info-img">
|
|
|
<u-avatar bg-color="#fff" :src="info.headimgurl?info.headimgurl:headReplace" size="120"></u-avatar>
|
|
|
<view @click="showform = true">
|
|
|
<span>{{info.name?info.name:''}}</span><u-icon name="edit-pen-fill"></u-icon>
|
|
|
<view>
|
|
|
<span>{{info.mobile?info.mobile:''}}</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="me-info-party">
|
|
|
{{info.address?info.address:''}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="me-list">
|
|
|
<view class="me-list-item" v-for="item in list" @click="toUrl(item.url)">
|
|
|
<view class="me-list-item-left">
|
|
|
<u-icon :name="item.icon" size="55" color="#e50015"></u-icon>
|
|
|
<!-- <image :src="item.src" :style="{width:item.width,height:item.height}"></image> -->
|
|
|
<view>{{item.title}}</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<u-icon name="arrow-right" size="40" color="#a7a7a7"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<u-popup v-model="showPhone" mode="bottom" :mask-close-able="false">
|
|
|
<view class="login-btn" style="padding:60rpx">
|
|
|
<button class="login-btn-btn" open-type="getPhoneNumber" @getphonenumber="getUserWxPhone">授权手机号</button>
|
|
|
</view>
|
|
|
|
|
|
</u-popup>
|
|
|
<u-popup v-model="showform" mode="bottom">
|
|
|
<view class="login-form">
|
|
|
<view>
|
|
|
<span>头像：</span>
|
|
|
<view style="border:none">
|
|
|
<htz-image-upload :max="1" v-model="avatarList" mediaType="image" :chooseNum="1"
|
|
|
:sourceType="['album','camera']" :compress="false" :quality="80" :formData="otherData"
|
|
|
:remove="true" :dataType="1" @uploadSuccess="uploadSuccess" @imgDelete="imgDelete"
|
|
|
@uploadFail="uploadFail" :action="action"></htz-image-upload>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<span>姓名：</span>
|
|
|
<view>
|
|
|
<u-input :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.name"
|
|
|
placeholder="请输入姓名" :border="false" shape="circle" clearable></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<span>手机号：</span>
|
|
|
<view :style="{'border':hasPhone?'none':'1px solid #999'}">
|
|
|
<view v-if="hasPhone">
|
|
|
{{form.mobile}}
|
|
|
</view>
|
|
|
<u-input v-else :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.mobile"
|
|
|
placeholder="请输入手机号" :border="false" shape="circle" clearable></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<span>党支部：</span>
|
|
|
|
|
|
<view v-if="hasParty" style="border: none;">{{form.address}}</view>
|
|
|
<view v-else style="justify-content: space-between;min-height:40px" @click="openPicker">
|
|
|
<u-input @click="openPicker" readonly disabled style="width:100%" :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.address"
|
|
|
placeholder="请选择居住地所属党支部" :border="false" shape="circle">
|
|
|
</u-input>
|
|
|
<!-- <view>{{form.address?form.address:'请选择居住地所属党支部'}}</view> -->
|
|
|
<view class="icon-right">
|
|
|
<view>|</view>
|
|
|
<u-icon size="30" name="arrow-down"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="login-btn">
|
|
|
<view class="login-btn-btn" @click="submit">提 交</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-picker v-model="showParty" @confirm="confirmParty" :range="partyList" range-key="name"
|
|
|
confirm-color="#e50015" mode="selector"></u-picker>
|
|
|
|
|
|
<tabbar :current-page="1"></tabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
|
|
|
import tabbar from "../../components/tabbar/tabbar.vue"
|
|
|
import {
|
|
|
ROOTPATH as baseUrl
|
|
|
} from "@/common/config.js"
|
|
|
import {
|
|
|
isNull,
|
|
|
isOnlyChinese,
|
|
|
isMobile,
|
|
|
toast
|
|
|
} from "@/common/util.js"
|
|
|
export default {
|
|
|
components: {
|
|
|
tabbar,
|
|
|
htzImageUpload
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
navBarBoxHeight: 0,
|
|
|
navBarHeight: 0,
|
|
|
navBarTop: 0,
|
|
|
info: {},
|
|
|
headReplace: require("@/static/me-img.png"),
|
|
|
list: [{
|
|
|
src: require("@/static/me-clock.png"),
|
|
|
icon: 'clock-fill',
|
|
|
title: '学习记录',
|
|
|
url: "/packages/record/record"
|
|
|
}, {
|
|
|
src: require("@/static/me-clock.png"),
|
|
|
icon: 'setting-fill',
|
|
|
title: '清除缓存',
|
|
|
url: ""
|
|
|
}],
|
|
|
showPhone: false,
|
|
|
hasPhone: false,
|
|
|
hasParty: false,
|
|
|
showform: false,
|
|
|
showParty: false,
|
|
|
action: '',
|
|
|
otherData: {
|
|
|
token: ''
|
|
|
},
|
|
|
avatarList: [],
|
|
|
partyList: [],
|
|
|
form: {
|
|
|
name: '',
|
|
|
mobile: '',
|
|
|
address: ''
|
|
|
},
|
|
|
|
|
|
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
|
this.navBarHeight = MenuButton.height
|
|
|
this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
|
|
|
this.action = baseUrl + "/api/mobile/upload-file"
|
|
|
this.getToken()
|
|
|
this.otherData.token = this.vuex_token
|
|
|
this.getInitUser()
|
|
|
this.getParty()
|
|
|
},
|
|
|
methods: {
|
|
|
async getToken() {
|
|
|
if (isNull(this.vuex_token)) {
|
|
|
await uni.login({
|
|
|
provider: 'weixin',
|
|
|
success: (res) => {
|
|
|
console.log(res.code);
|
|
|
this.$u.api.login({
|
|
|
code: res.code
|
|
|
}).then(res => {
|
|
|
this.$u.vuex('vuex_token', res.token)
|
|
|
})
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
toUrl(url) {
|
|
|
if (url) {
|
|
|
uni.navigateTo({
|
|
|
url: url
|
|
|
})
|
|
|
} else {
|
|
|
uni.showModal({
|
|
|
title:'是否清除缓存信息？',
|
|
|
success:function(res){
|
|
|
if(res.confirm){
|
|
|
uni.removeStorageSync('xtykt_lifeData')
|
|
|
uni.reLaunch({
|
|
|
url: '/pages/index/index'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
}
|
|
|
},
|
|
|
async getInitUser() {
|
|
|
const res = await this.$u.api.user()
|
|
|
this.$u.vuex('vuex_user', res)
|
|
|
this.form = res
|
|
|
this.info = this.$u.deepClone(res);
|
|
|
this.avatarList = []
|
|
|
if (!isNull(res.headimgurl)) {
|
|
|
this.avatarList.push({
|
|
|
type: 0,
|
|
|
url: res.headimgurl
|
|
|
})
|
|
|
}
|
|
|
if (isNull(this.form.mobile)) {
|
|
|
this.showPhone = true
|
|
|
} else {
|
|
|
this.hasPhone = true
|
|
|
}
|
|
|
if (!isNull(this.form.address)) {
|
|
|
this.hasParty = true
|
|
|
}
|
|
|
},
|
|
|
getUserWxPhone(res) {
|
|
|
console.log(res)
|
|
|
if(!res.detail.code){
|
|
|
this.showPhone = false
|
|
|
return
|
|
|
}
|
|
|
this.$u.api.getPhone({
|
|
|
code: res.detail.code
|
|
|
}).then(res => {
|
|
|
console.log(res)
|
|
|
this.form.mobile = res.mobile
|
|
|
this.form.name = res.near_user ? res.near_user.name : ''
|
|
|
this.form.address = res.near_user ? res.near_user.address : ''
|
|
|
this.showPhone = false
|
|
|
this.showform = true
|
|
|
if (!isNull(this.form.mobile)) {
|
|
|
this.hasPhone = true
|
|
|
}
|
|
|
if (!isNull(this.form.address)) {
|
|
|
this.hasParty = true
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
async getParty() {
|
|
|
const res = await this.$u.api.getParty()
|
|
|
this.partyList = res
|
|
|
},
|
|
|
openPicker() {
|
|
|
if (!this.hasParty) {
|
|
|
uni.hideKeyboard()
|
|
|
this.showParty = true
|
|
|
}
|
|
|
|
|
|
},
|
|
|
confirmParty(e) {
|
|
|
if (e) {
|
|
|
this.form.address = this.partyList[e].name
|
|
|
}
|
|
|
},
|
|
|
uploadSuccess(res) {
|
|
|
console.log("succ", res)
|
|
|
uni.showLoading({
|
|
|
title: "上传成功"
|
|
|
})
|
|
|
let data = JSON.parse(res.data)
|
|
|
this.form.headimgurl = data.url
|
|
|
this.avatarList = []
|
|
|
this.avatarList.push({
|
|
|
type: 0,
|
|
|
url: data.url
|
|
|
})
|
|
|
},
|
|
|
uploadFail(res) {
|
|
|
console.log("fail", res)
|
|
|
},
|
|
|
imgDelete(res) {
|
|
|
this.avatarList = res.tempFilePaths
|
|
|
this.form.headimgurl = ''
|
|
|
console.log(this.info.headimgurl)
|
|
|
},
|
|
|
submit() {
|
|
|
if (isNull(this.form.name) || isNull(this.form.mobile) || isNull(this.form.address)) {
|
|
|
toast("请填写所有信息")
|
|
|
return
|
|
|
}
|
|
|
if (!isOnlyChinese(this.form.name)) {
|
|
|
toast("请输入中文姓名")
|
|
|
return
|
|
|
}
|
|
|
if (!isNull(this.form.mobile) && !isMobile(this.form.mobile)) {
|
|
|
toast("请输入正确的手机号")
|
|
|
return
|
|
|
}
|
|
|
this.$u.api.saveUser(this.form).then(res => {
|
|
|
toast('更新成功')
|
|
|
this.showform = false
|
|
|
this.getInitUser()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
::v-deep .u-picker-body{
|
|
|
height: 800rpx!important;
|
|
|
}
|
|
|
.me {
|
|
|
// height:100vh;
|
|
|
// background: linear-gradient(to right, #da212d, #f96666);
|
|
|
|
|
|
.navBarBox {
|
|
|
// position: fixed;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
// z-index: 999;
|
|
|
width: 100%;
|
|
|
padding: 0 20rpx;
|
|
|
// margin-bottom:24rpx;
|
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
|
|
|
|
.navBar {
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-info {
|
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
|
color: #fff;
|
|
|
font-size: 32rpx;
|
|
|
padding: 35rpx;
|
|
|
padding-top: 0;
|
|
|
padding-bottom: 105rpx;
|
|
|
|
|
|
&-img {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.u-avatar {
|
|
|
margin-right: 20rpx
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
margin-right: 10rpx
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-party {
|
|
|
font-size: 24rpx;
|
|
|
margin-top: 35rpx
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-list {
|
|
|
margin-top: -70rpx;
|
|
|
border-radius: 70rpx 70rpx 0 0;
|
|
|
background-color: #fff;
|
|
|
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 50rpx 35rpx;
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
font-size: 32rpx;
|
|
|
color: #333333;
|
|
|
|
|
|
& image {
|
|
|
margin-right: 20rpx;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
&-left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
u-icon {
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.login {
|
|
|
|
|
|
// border-radius: 50rpx 50rpx 0 0;
|
|
|
// margin-top: -60rpx;
|
|
|
// background: #e1f1f2;
|
|
|
// position: relative;
|
|
|
&-form {
|
|
|
padding: 20rpx 60rpx;
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
>view {
|
|
|
margin-bottom: 30rpx;
|
|
|
background-color: #fff;
|
|
|
padding: 20rpx 40rpx;
|
|
|
border-radius: 20rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
span {
|
|
|
width: 120rpx;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
>view {
|
|
|
border: 1px solid #999;
|
|
|
border-radius: 10rpx;
|
|
|
display: flex;
|
|
|
width: calc(100% - 120rpx);
|
|
|
padding: 0 20rpx;
|
|
|
padding-right: 0
|
|
|
}
|
|
|
|
|
|
.icon-right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
.u-icon {
|
|
|
margin: 0 20rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-btn {
|
|
|
padding: 30rpx 60rpx;
|
|
|
padding-top: 0;
|
|
|
|
|
|
&-btn {
|
|
|
box-shadow: 0.5px 3px 9px 0px rgba(235, 107, 85, 0.3);
|
|
|
background: #e50015;
|
|
|
border-radius: 44rpx;
|
|
|
text-align: center;
|
|
|
height: 88rpx;
|
|
|
color: #fff;
|
|
|
line-height: 88rpx;
|
|
|
font-size: 34rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
</style> |
