7 changed files with 575 additions and 3 deletions
-
1src/js/api.js
-
3src/pages.json
-
58src/pages/menu/forth.vue
-
25src/subpackage/authorization/components/user_info/iconfont.css
-
132src/subpackage/authorization/components/user_info/impower.vue
-
357src/subpackage/authorization/components/user_info/tuniaoui-wx-user-info.vue
-
2src/subpackage/authorization/js/api.js
@ -0,0 +1,25 @@ |
|||||
|
@charset "UTF-8"; |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: "tuniaoFont"; /* Project id 3784643 */ |
||||
|
src: |
||||
|
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAN8AAsAAAAAB4gAAAMvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqCQIIdATYCJAMMCwgABCAFhH8HPRuYBiMRpmvPIfurAzsYPj7DCVbrRAmElfXCs4V6xacO8aHO69VXu54tTy8h0hcJ7ufgieY+3+xscrn9B8wKQQFBywplLZCw9SwcOyZ5pKsoAQAbcICJTr7AjPPqr06NRkeIAemFpXv8cje1+/LkuLvD789WJZUANjOe9F76qptDOSMUui/Ua0WQKpZGXaqf5hHZdAD6x8tRJtRKtQd7j5UKkk6lWywYkGADCZBnGLugJd6CAI4GOjH956Ep4k7imdNkYTGFAkm2nJyPrBNwA7YhWwgQ/K4bLXITD8wl8xxuBN+XwyYJwOAp5jFjOwNbPNwd3l3WiyFAv3sCBLjcAB6gQM3GjLLSbJpDo1ANiqsiFiX7WAQzqTcMA06j/pb/eAbEx8yMAaAChg3sDjs6COwub8IAoAD4PEZkA7iAZClPKdicmJLc2OiZcQC3cV613sc3Ab9W7YItQtio9YgdKGjgr+ANlbg5gPvXFacv8IyvKTH4pcjV7VIcfnuIAUd3VCbxcCIKj++rvr/hpx/iwxd4/5mxDXeILbBp2+ByMIlGMuQEU3gjiVaMcXk8Dn2gWo5wuRwuIldLRqRwWogvmCRXE9/kSvrVQP4iFDVWRSbRakMk/AtcBYVpO6rpah1V9J/m/Wt+q8WfsOV+S5KFTGD5dwW9KFstZUs5smuYK3V495zwUG+r/Izf0PWtbWj/HUQsAL9u+cGK8NCiAgRnaRJ49fqljrxWc4PaKs4pQwBlMLUeAzgcEGLakvg5nCZ3zgTBkZzAEEUuFEeJyMrq4BGhGT6OPjiqGd4eIZkLKGKjgTKuAAgpPIAhjmdQUngnsrJdeKTxBz4pkgjHjJQeFqFMXv8PQqg0QP+F2cbAdoHqFmaM52jYlcbNoeTq4CtPkjzHAE1Zl0QvFEjGmp9fY6vKwBI9kOvIuQhJ4kJWy0k1dVXFVXcpbfTmIIRKA/RfmG0M7G1T3cKM8VwMXGlEnR1KY0uU+CTJnM1ODk1ZdxJdSOjYdGOp+TW2k6szsNg8qIvIuQipetFCVstpQCB1lcXHXUl5ZOpfdBvgMI9QMaJi8TZdzLS36K8/ueDZOWMAAA==') format('woff2'), |
||||
|
url('//at.alicdn.com/t/c/font_3784643_5jru9pe5fad.woff?t=1669045092678') format('woff'), |
||||
|
url('//at.alicdn.com/t/c/font_3784643_5jru9pe5fad.ttf?t=1669045092678') format('truetype'); |
||||
|
} |
||||
|
|
||||
|
[class*='tn-icon-'] { |
||||
|
font-family: 'tuniaoFont' !important; |
||||
|
font-style: normal; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
text-align: center; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.tn-icon-close:before { |
||||
|
content: "\e74d"; |
||||
|
} |
||||
|
|
||||
|
.tn-icon-camera-fill:before { |
||||
|
content: "\e75d"; |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
<wx-user-info-modal |
||||
|
v-model="showAuthorizationModal" |
||||
|
@updated="updatedUserInfoEvent" |
||||
|
:isModal="isModal" |
||||
|
:alway="alway" |
||||
|
></wx-user-info-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import WxUserInfoModal from './tuniaoui-wx-user-info.vue'; |
||||
|
import { AUTHOR_API } from '../../js/api'; |
||||
|
import servers from '../../js/server'; |
||||
|
import { showModal, jsonPar, showLoad, hideLoad } from '@/utils/util'; |
||||
|
export default { |
||||
|
components: { WxUserInfoModal }, |
||||
|
props: { |
||||
|
isModal: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
alway: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
showAuthorizationModal(nVal, oVal){ |
||||
|
let { initData } = this; |
||||
|
if(!nVal&&oVal)initData?.close(); |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showAuthorizationModal: false, |
||||
|
initData: {}, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
show(data){ |
||||
|
this.showAuthorizationModal = true; |
||||
|
this.initData = data; |
||||
|
}, |
||||
|
hide(){ |
||||
|
this.showAuthorizationModal = false; |
||||
|
}, |
||||
|
// 获取到的用户信息 |
||||
|
async updatedUserInfoEvent(info) { |
||||
|
let { initData, userEdit } = this; |
||||
|
try{ |
||||
|
let _imgUrl = await this.uploadImg(info.avatar); |
||||
|
let _editObj = { nickname: info.nickname, avatar_url: _imgUrl }; |
||||
|
await userEdit(_editObj); |
||||
|
initData?.success?.(_editObj); |
||||
|
}catch(err){ |
||||
|
console.warn('authorize components user info impower updatedUserInfoEvent err --->', err) |
||||
|
initData?.fail?.(err); |
||||
|
} |
||||
|
}, |
||||
|
// 上传头像 |
||||
|
async uploadImg(url){ |
||||
|
try{ |
||||
|
showLoad(); |
||||
|
let _imgInfo = await servers.uploadFile({ |
||||
|
url: AUTHOR_API.zs_user_avatar, |
||||
|
filePath: url, |
||||
|
}); |
||||
|
if(_imgInfo.statusCode != 200)throw(_imgInfo); |
||||
|
let _imgRes = jsonPar(_imgInfo.data); |
||||
|
if(_imgRes.code != 0)throw(_imgRes); |
||||
|
hideLoad(); |
||||
|
return _imgRes.data.url || ''; |
||||
|
}catch(err){ |
||||
|
hideLoad(); |
||||
|
showModal({ content: err?.errMsg ?? err?.message ?? '上传图片失败！' }); |
||||
|
console.warn('authorize components user info impower uploadImg err --->', err) |
||||
|
return Promise.reject(err); |
||||
|
} |
||||
|
}, |
||||
|
// 用户信息上传 |
||||
|
userEdit({ nickname, avatar_url }){ |
||||
|
showLoad(); |
||||
|
return servers.post({ |
||||
|
url: AUTHOR_API.changeAvatar, |
||||
|
data: { nickname, avatar_url }, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
hideLoad(); |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
console.log('userEdit res--->', _data); |
||||
|
return _data?.data; |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
hideLoad(); |
||||
|
showModal({ content: err.message || '操作失败！' }); |
||||
|
console.warn('authorize components user info impower userEdit err --->', err); |
||||
|
return Promise.reject(err); |
||||
|
}) |
||||
|
}, |
||||
|
// 刷新用户信息 |
||||
|
refreshUserInfo(){ |
||||
|
return servers.post({ |
||||
|
url: ATR_API.userCurrent, |
||||
|
data: {}, |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res => { |
||||
|
let _data = res?.data || {}; |
||||
|
if(_data.code === 0){ |
||||
|
uni.setStorageSync('userInfo', _data?.data); |
||||
|
this.$store.commit('refreshUserInfo', _data?.data); |
||||
|
return _data?.data; |
||||
|
}else{ |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err => { |
||||
|
console.warn('authorize components user info impower refreshUserInfo err --->', err); |
||||
|
// return Promise.reject(err); |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
</style> |
||||
@ -0,0 +1,357 @@ |
|||||
|
<template> |
||||
|
<view |
||||
|
v-if="openModal || alway" |
||||
|
class="wx-authorization-modal" |
||||
|
:class="{ 'modal-class': isModal }" |
||||
|
> |
||||
|
<view |
||||
|
class="wam__mask" |
||||
|
@touchmove.prevent="" |
||||
|
@tap.stop="closeModal" |
||||
|
></view> |
||||
|
|
||||
|
<!-- 内容区域 --> |
||||
|
<view class="wam__wrapper"> |
||||
|
<!-- 关闭按钮 --> |
||||
|
<view class="wam__close-btn" @tap.stop="closeModal"> |
||||
|
<text class="tn-icon-close"></text> |
||||
|
</view> |
||||
|
<!-- 标题 --> |
||||
|
<view class="wam__title">获取您的昵称、头像</view> |
||||
|
<!-- tips --> |
||||
|
<view class="wam__sub-title"> |
||||
|
获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面 |
||||
|
</view> |
||||
|
|
||||
|
<!-- 头像选择 --> |
||||
|
<view class="wam__avatar"> |
||||
|
<view class="button-shadow"> |
||||
|
<button |
||||
|
class="button" |
||||
|
open-type="chooseAvatar" |
||||
|
@chooseavatar="chooseAvatarEvent" |
||||
|
> |
||||
|
<view v-if="userInfo.avatar" class="avatar__image"> |
||||
|
<image class="image" :src="userInfo.avatar" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view v-else class="avatar__empty"> |
||||
|
<!-- <image class="image" src="https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1668928062708-assets/web-upload/764843cf-055a-4cb6-b5d3-dca528b33fd4.jpeg" mode="aspectFill"></image> --> |
||||
|
</view> |
||||
|
<view class="avatar--icon"> |
||||
|
<view class="tn-icon-camera-fill"></view> |
||||
|
</view> |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 昵称输入 --> |
||||
|
<view class="wam__nickname"> |
||||
|
<view class="nickname__data"> |
||||
|
<input class="input" type="nickname" v-model="userInfo.nickname" placeholder="请输入昵称" placeholder-style="color: #AAAAAA;"> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<!-- 保存按钮 --> |
||||
|
<view |
||||
|
class="wam__submit-btn" |
||||
|
:class="[{ |
||||
|
'disabled': !userInfo.avatar || !userInfo.nickname |
||||
|
}]" |
||||
|
hover-class="tn-btn-hover-class" |
||||
|
:hover-stay-time="150" |
||||
|
@tap.stop="submitUserInfo" |
||||
|
> |
||||
|
保 存 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
options: { |
||||
|
// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素) |
||||
|
virtualHost: true |
||||
|
}, |
||||
|
props: { |
||||
|
value: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
isModal: { |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
alway: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
openModal: false, |
||||
|
userInfo: { |
||||
|
avatar: '', |
||||
|
nickname: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
value: { |
||||
|
handler(val) { |
||||
|
this.openModal = val |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
// 头像选择 |
||||
|
chooseAvatarEvent(e) { |
||||
|
this.userInfo.avatar = e.detail.avatarUrl |
||||
|
}, |
||||
|
|
||||
|
// 更新用户信息 |
||||
|
submitUserInfo() { |
||||
|
// 判断是否已经选择了用户头像和输入了用户昵称 |
||||
|
if (!this.userInfo.avatar || !this.userInfo.nickname) { |
||||
|
return uni.showToast({ |
||||
|
icon: 'none', |
||||
|
title: '请选择头像和输入用户信息' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 更新完成事件 |
||||
|
this.$emit('updated', this.userInfo) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 关闭弹框 |
||||
|
closeModal() { |
||||
|
this.$emit('input', false) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
@import './iconfont.css'; |
||||
|
|
||||
|
.modal-class{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
z-index: 99998; |
||||
|
.wam { |
||||
|
&__mask { |
||||
|
display: block !important; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
opacity: 0; |
||||
|
animation: showMask 0.25s ease 0.1s forwards; |
||||
|
} |
||||
|
&__close-btn { |
||||
|
display: block !important; |
||||
|
display: none; |
||||
|
position: absolute; |
||||
|
top: 30rpx; |
||||
|
right: 30rpx; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
&__wrapper{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
transform-origin: center bottom; |
||||
|
transform: scaleY(0); |
||||
|
animation: showWrapper 0.25s ease 0.1s forwards; |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.wx-authorization-modal { |
||||
|
// view { |
||||
|
// box-sizing: border-box; |
||||
|
// } |
||||
|
|
||||
|
.image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: inherit; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
.wam { |
||||
|
/* mask */ |
||||
|
&__mask { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* close-btn */ |
||||
|
&__close-btn { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
/* wrapper */ |
||||
|
&__wrapper { |
||||
|
background-color: #FFFFFF; |
||||
|
border-radius: 20rpx 20rpx 0rpx 0rpx; |
||||
|
padding: 40rpx; |
||||
|
padding-top: 60rpx; |
||||
|
padding-bottom: 40rpx; |
||||
|
padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx); |
||||
|
padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* title */ |
||||
|
&__title { |
||||
|
font-size: 34rpx; |
||||
|
} |
||||
|
/* sub-title */ |
||||
|
&__sub-title { |
||||
|
font-size: 26rpx; |
||||
|
color: #AAAAAA; |
||||
|
margin-top: 16rpx; |
||||
|
padding-bottom: 30rpx; |
||||
|
} |
||||
|
|
||||
|
/* 头像选择 */ |
||||
|
&__avatar { |
||||
|
width: 100%; |
||||
|
margin-top: 30rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.button-shadow { |
||||
|
border: 8rpx solid rgba(255,255,255,0.05); |
||||
|
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15); |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
position: relative; |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: visible; |
||||
|
background-image: repeating-linear-gradient(45deg, #E4E9EC, #F8F7F8); |
||||
|
color: #FFFFFF; |
||||
|
background-color: transparent; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
font-size: inherit; |
||||
|
line-height: inherit; |
||||
|
border: none; |
||||
|
&::after { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
&__empty, &__image { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border-radius: inherit; |
||||
|
} |
||||
|
|
||||
|
&--icon { |
||||
|
position: absolute; |
||||
|
right: -10rpx; |
||||
|
bottom: -6rpx; |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
// transform: translate(50%, 50%); |
||||
|
background-color: #1D2541; |
||||
|
color: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
border: 6rpx solid #FFFFFF; |
||||
|
line-height: 1; |
||||
|
font-size: 36rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 昵称 */ |
||||
|
&__nickname { |
||||
|
margin-top: 40rpx; |
||||
|
|
||||
|
.nickname { |
||||
|
|
||||
|
&__data { |
||||
|
margin-top: 16rpx; |
||||
|
width: 100%; |
||||
|
padding: 26rpx 20rpx; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #F8F7F8; |
||||
|
|
||||
|
.input { |
||||
|
color: #080808; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 保存按钮 */ |
||||
|
&__submit-btn { |
||||
|
width: 100%; |
||||
|
background-color: $mColor; |
||||
|
color: #FFFFFF; |
||||
|
margin-top: 60rpx; |
||||
|
border-radius: 10rpx; |
||||
|
padding: 25rpx; |
||||
|
font-size: 32rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
&.disabled { |
||||
|
background-color: #E6E6E6; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tn-btn-hover-class { |
||||
|
box-shadow: inset 10rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
@keyframes showMask { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
@keyframes showWrapper { |
||||
|
0% { |
||||
|
transform: scaleY(0); |
||||
|
} |
||||
|
100% { |
||||
|
transform: scaleY(1); |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue