first commit
This commit is contained in:
PC-202306242200\Administrator
@@ -0,0 +1,379 @@
|
||||
<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="header" 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: {
|
||||
nickname: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
header: {
|
||||
type: String,
|
||||
default: 'data:image/jpg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjREMEQwRkY0RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjREMEQwRkY1RjgwNDExRUE5OTY2RDgxODY3NkJFODMxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEQwRDBGRjJGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEQwRDBGRjNGODA0MTFFQTk5NjZEODE4Njc2QkU4MzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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'
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
openModal: false,
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
nickname: ''
|
||||
},
|
||||
base64Avatar: '',
|
||||
ossdata: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.userInfo.nickname = this.nickname
|
||||
this.userInfo.avatar = this.header
|
||||
this.getOssData()
|
||||
},
|
||||
watch: {
|
||||
nickname(e) {
|
||||
console.log(123);
|
||||
this.userInfo.nickname = e
|
||||
},
|
||||
header(e) {
|
||||
console.log(234);
|
||||
this.userInfo.avatar = e
|
||||
},
|
||||
value: {
|
||||
handler(val) {
|
||||
this.openModal = val
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getOssData() {
|
||||
this.$http.get('/com/oss/uptoken').then(({
|
||||
data
|
||||
}) => {
|
||||
this.ossdata = data;
|
||||
})
|
||||
},
|
||||
// 头像选择
|
||||
chooseAvatarEvent(e) {
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
this.userInfo.avatar = avatarUrl
|
||||
let ext = avatarUrl.split('.').pop();
|
||||
let key = this.ossdata.dir + Math.random() + '.' + ext;
|
||||
|
||||
uni.uploadFile({
|
||||
url: this.ossdata.host, //仅为示例，非真实的接口地址
|
||||
filePath: this.userInfo.avatar,
|
||||
name: 'file',
|
||||
formData: {
|
||||
key: key,
|
||||
OSSAccessKeyId: this.ossdata.accessid,
|
||||
policy: this.ossdata.policy,
|
||||
'success_action_status': '200',
|
||||
Signature: this.ossdata.signature,
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.userInfo.avatar = this.ossdata.host + '/' + key;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 更新用户信息
|
||||
submitUserInfo() {
|
||||
// 判断是否已经选择了用户头像和输入了用户昵称
|
||||
console.log(this.userInfo);
|
||||
if (!this.userInfo.avatar || !this.userInfo.nickname) {
|
||||
return uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请选择头像和输入用户信息'
|
||||
})
|
||||
}
|
||||
|
||||
if (this.userInfo.nickname.length > 8) {
|
||||
uni.showToast({
|
||||
title: '最多8个字符',
|
||||
icon: 'none'
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
// 更新完成事件
|
||||
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;
|
||||
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>
|
||||
Reference in New Issue
Block a user