chore: initial import
This commit is contained in:
liangjian
4
uni_modules/tuniaoui-wx-user-info/changelog.md
Normal file
4
uni_modules/tuniaoui-wx-user-info/changelog.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## 1.0.1（2022-11-22）
|
||||
更新使用文档
|
||||
## 1.0.0（2022-11-22）
|
||||
适配微信新版获取用户头像、昵称信息
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<view
|
||||
v-if="openModal"
|
||||
class="wx-authorization-modal"
|
||||
>
|
||||
<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
|
||||
}
|
||||
},
|
||||
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 '../../static/iconfont.css';
|
||||
|
||||
.wx-authorization-modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 99998;
|
||||
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.wam {
|
||||
/* mask */
|
||||
&__mask {
|
||||
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 */
|
||||
&__close-btn {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
/* wrapper */
|
||||
&__wrapper {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
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);
|
||||
transform-origin: center bottom;
|
||||
transform: scaleY(0);
|
||||
animation: showWrapper 0.25s ease 0.1s forwards;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
/* 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: #05C160;
|
||||
color: #FFFFFF;
|
||||
margin-top: 60rpx;
|
||||
margin-bottom: 10vh;
|
||||
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>
|
||||
83
uni_modules/tuniaoui-wx-user-info/package.json
Normal file
83
uni_modules/tuniaoui-wx-user-info/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "tuniaoui-wx-user-info",
|
||||
"displayName": "微信用户信息设置弹框",
|
||||
"version": "1.0.1",
|
||||
"description": "设置微信用户头像、昵称信息",
|
||||
"keywords": [
|
||||
"微信小程序",
|
||||
"微信小程序用户信息",
|
||||
"图鸟UI"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "n",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "n",
|
||||
"Android Browser": "n",
|
||||
"微信浏览器(Android)": "n",
|
||||
"QQ浏览器(Android)": "n"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "n",
|
||||
"IE": "n",
|
||||
"Edge": "n",
|
||||
"Firefox": "n",
|
||||
"Safari": "n"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "n",
|
||||
"百度": "n",
|
||||
"字节跳动": "n",
|
||||
"QQ": "n",
|
||||
"钉钉": "n",
|
||||
"快手": "n",
|
||||
"飞书": "n",
|
||||
"京东": "n"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
84
uni_modules/tuniaoui-wx-user-info/readme.md
Normal file
84
uni_modules/tuniaoui-wx-user-info/readme.md
Normal file
@@ -0,0 +1,84 @@
|
||||
|
||||
# 使用说明
|
||||
|
||||
使用方法：
|
||||
|
||||
```
|
||||
<template>
|
||||
<view class="login-page">
|
||||
<!-- 授权登录按钮 -->
|
||||
<view class="submit-btn" @tap.stop="openAuthorizationModal">
|
||||
授权登录
|
||||
</view>
|
||||
|
||||
|
||||
<wx-user-info-modal
|
||||
v-model="showAuthorizationModal"
|
||||
@updated="updatedUserInfoEvent"
|
||||
></wx-user-info-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
|
||||
|
||||
export default {
|
||||
components: { WxUserInfoModal },
|
||||
data() {
|
||||
return {
|
||||
showAuthorizationModal: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 打开获取用户信息弹框
|
||||
openAuthorizationModal() {
|
||||
this.showAuthorizationModal = true
|
||||
},
|
||||
|
||||
// 获取到的用户信息
|
||||
updatedUserInfoEvent(info) {
|
||||
console.log('获取到的用户信息', info)
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.login-page {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 授权按钮 */
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
background-color: #05C160;
|
||||
color: #FFFFFF;
|
||||
margin-top: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx;
|
||||
font-size: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
参数说明：
|
||||
|
||||
| 参数 | 说明 |
|
||||
| :-------- | ---------------------------------------------------- |
|
||||
| v-model | 弹出、关闭设置用户信息弹框 |
|
||||
|
||||
25
uni_modules/tuniaoui-wx-user-info/static/iconfont.css
Normal file
25
uni_modules/tuniaoui-wx-user-info/static/iconfont.css
Normal file
@@ -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";
|
||||
}
|
||||
Reference in New Issue
Block a user