完成大体功能和样式
This commit is contained in:
180
pages-biz/profile/profile.vue
Normal file
180
pages-biz/profile/profile.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="u-m-20">
|
||||
<u-navbar :is-back="true" title="账号实名信息" :border-bottom="false"></u-navbar>
|
||||
<view>
|
||||
<!-- <u-cell-group>
|
||||
<u-cell-item title="头像" :arrow="false" hover-class="none" @click="updateAvatar">
|
||||
<u-avatar :src="pic" size="100"></u-avatar>
|
||||
</u-cell-item>
|
||||
</u-cell-group> -->
|
||||
<!-- <u-cell-group>
|
||||
<u-cell-item title="昵称" :arrow="false" hover-class="none" @click="updateName">
|
||||
{{vuex_user.user.nickName}}
|
||||
</u-cell-item>
|
||||
</u-cell-group> -->
|
||||
<u-cell-group>
|
||||
<u-cell-item :title="getTitle" :arrow="false" hover-class="none" @click="updateName">
|
||||
{{(cardNo == null ? orgNo : cardNo) || ''}}
|
||||
</u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<u-modal v-model="showModel" @confirm="confirmAuthCode" ref="uModal" :async-close="true"
|
||||
:title="'设置' + getTitle">
|
||||
<view class="slot-content">
|
||||
<u-input v-model="authCode" type="text" :border="false" :placeholder="'请输入' + getTitle" />
|
||||
</view>
|
||||
</u-modal>
|
||||
|
||||
<!-- <view class="u-m-t-20">
|
||||
<u-button type="primary" @click="subProfile">提交</u-button>
|
||||
</view> -->
|
||||
|
||||
<!-- 如果是微信登录小程序，则获取用户的昵称与头像 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- <u-button type="default">使用微信头像与昵称</u-button> -->
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from "@/common/config.js" // 全局配置文件
|
||||
import {
|
||||
rsaEncrypt
|
||||
} from "@/common/utils/ras.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
userType: null,
|
||||
oaAuth: null,
|
||||
cusNo: null,
|
||||
userName: null,
|
||||
openId: null
|
||||
},
|
||||
pic: null,
|
||||
authCode: '',
|
||||
showModel: false,
|
||||
cardNo: null,
|
||||
orgNo: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let userVo = uni.getStorageSync('userInfo');
|
||||
this.user = userVo;
|
||||
},
|
||||
methods: {
|
||||
updateName() {
|
||||
this.showModel = true;
|
||||
},
|
||||
// 简单身份证校验（18 位）
|
||||
checkIdCard(code) {
|
||||
return /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(
|
||||
code
|
||||
);
|
||||
},
|
||||
// 统一社会信用代码校验（18 位）
|
||||
checkCreditCode(code) {
|
||||
return /^[0-9A-Z]{18}$/.test(code);
|
||||
},
|
||||
confirmAuthCode() {
|
||||
let loginType = this.user.userType
|
||||
if (!this.authCode) {
|
||||
this.showModel = false;
|
||||
return this.$mytip.toast(loginType === '0' ? '请输入身份证号' : '请输入组织社会信用代码')
|
||||
}
|
||||
// 身份证校验
|
||||
if (this.loginType === '0' && !this.checkIdCard(this.authCode)) {
|
||||
uni.showToast({
|
||||
title: '身份证号格式不正确',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 企业社会信用代码校验
|
||||
if (this.loginType === '1' && !this.checkCreditCode(this.authCode)) {
|
||||
uni.showToast({
|
||||
title: '社会信用代码格式不正确',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let life = uni.getStorageSync('lifeData') || {}
|
||||
let token = life.vuex_token
|
||||
let url = "/login/updateVerifyCode";
|
||||
let encryptCode = rsaEncrypt(this.authCode);
|
||||
this.$u.post(url, {
|
||||
userType: loginType,
|
||||
code: loginType === '0' ? encryptCode : this.authCode
|
||||
}, {
|
||||
'WT': token
|
||||
}).then(obj => {
|
||||
if (obj.flag) {
|
||||
if (loginType === '0') {
|
||||
this.cardNo = encryptCode
|
||||
this.cardNo = this.applyMask(this.authCode)
|
||||
} else {
|
||||
this.orgNo = this.authCode
|
||||
}
|
||||
this.showModel = false;
|
||||
this.$mytip.toast('修改成功');
|
||||
this.getUserProfile();
|
||||
uni.switchTab({
|
||||
url: '/pages/center/center'
|
||||
})
|
||||
} else {
|
||||
this.$mytip.toast('修改失败');
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
applyMask(idCard) {
|
||||
if (idCard.length !== 18) return idCard; // 非18位直接返回
|
||||
return idCard.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$2****');
|
||||
},
|
||||
updateAvatar() {
|
||||
this.$u.route('/pages-biz/profile/avatar')
|
||||
},
|
||||
subProfile() {
|
||||
// 1.更新vuex中的用户信息
|
||||
this.$mytip.toast('修改成功')
|
||||
// 2.页面跳转
|
||||
|
||||
},
|
||||
getUserProfile() {
|
||||
// 如果是微信登录小程序，则获取用户的昵称与头像
|
||||
// #ifdef MP-WEIXIN
|
||||
// 此处执行微信才执行
|
||||
// #endif
|
||||
let token = this.$getToken();
|
||||
let loginType = this.user.userType
|
||||
let url = `/login/userInfo?loginType=${loginType}`;
|
||||
this.$u.get(url, {}, {
|
||||
'WT': token
|
||||
}).then(obj => {
|
||||
uni.setStorageSync('userInfo', {
|
||||
userType: obj.data.userType,
|
||||
oaAuth: obj.data.oaAuth,
|
||||
cusNo: obj.data.cusNo,
|
||||
userName: obj.data.userName,
|
||||
openId: obj.data.openId
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTitle() {
|
||||
return this.user.userType === '0' ?
|
||||
'身份证号' :
|
||||
'企业社会信用代码'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-content {
|
||||
padding: 40rpx;
|
||||
}
|
||||
</style>
|
||||
136
pages-biz/profile/setting.vue
Normal file
136
pages-biz/profile/setting.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="设置" :border-bottom="false">
|
||||
</u-navbar>
|
||||
<view class="setting-content">
|
||||
<u-cell-group>
|
||||
<u-cell-item title="账号实名信息" @click="profile"></u-cell-item>
|
||||
<!-- <u-cell-item title="订阅系统消息" :arrow="false">
|
||||
|
||||
<u-switch v-model="longSubscribe" @change="toggleLongSubscribe" />
|
||||
|
||||
</u-cell-item> -->
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="btn">
|
||||
<u-button @click="logout" plain>退出登录</u-button>
|
||||
</view>
|
||||
|
||||
<view class="version">Version {{vuex_version}}</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
longSubscribe: false // 开关状态
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
profile() {
|
||||
this.$u.route('/pages-biz/profile/profile')
|
||||
},
|
||||
logout() {
|
||||
// 登录成功修改token与用户信息
|
||||
this.$u.vuex('vuex_token', '');
|
||||
this.$u.vuex('vuex_user', {});
|
||||
uni.removeStorageSync('userInfo');
|
||||
return uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
},
|
||||
toggleLongSubscribe(e) {
|
||||
this.longSubscribe = e
|
||||
// 微信小程序专用
|
||||
// #ifdef MP-WEIXIN
|
||||
if (this.longSubscribe) {
|
||||
const tmplIds = ['TEMPLATE_ID_1', 'TEMPLATE_ID_2'] // 在小程序后台配置的长期订阅模板
|
||||
wx.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
success: (res) => {
|
||||
// 用户同意才生效
|
||||
console.log('长期订阅授权结果', res)
|
||||
if (Object.values(res).some((v) => v === 'accept')) {
|
||||
uni.showToast({
|
||||
title: '长期订阅开启成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// 可以把状态保存到后端
|
||||
this.saveLongSubscribeStatus(true)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '未授权订阅',
|
||||
icon: 'none'
|
||||
})
|
||||
this.longSubscribe = false
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error(err)
|
||||
this.longSubscribe = false
|
||||
},
|
||||
})
|
||||
} else {
|
||||
// 取消订阅
|
||||
uni.showToast({
|
||||
title: '已关闭系统消息订阅',
|
||||
icon: 'none'
|
||||
})
|
||||
this.saveLongSubscribeStatus(false)
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
|
||||
saveLongSubscribeStatus(enable) {
|
||||
// TODO: 后端保存用户长期订阅状态
|
||||
console.log('保存长期订阅状态到后端', enable)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.setting-content {
|
||||
padding: 0rpx 20rpx;
|
||||
border-radius: 10rpx;
|
||||
background: #FFFFFF;
|
||||
width: 94%;
|
||||
margin: 20rpx auto;
|
||||
|
||||
&::v-deep .u-cell {
|
||||
color: #222222 !important;
|
||||
}
|
||||
|
||||
&::v-deep .u-cell_title {
|
||||
font-size: 30rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 94%;
|
||||
margin: 30rpx auto;
|
||||
|
||||
&::v-deep .u-btn {
|
||||
border-radius: 10rpx;
|
||||
font-size: 36rpx !important;
|
||||
color: #EA4047 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&::v-deep .u-hairline-border:after {
|
||||
border: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.version {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user