|
|
@@ -0,0 +1,234 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-popup :show="userlogo" mode="bottom" round='12' :close-on-click-overlay="false">
|
|
|
+ <view class="userlogo column">
|
|
|
+ <view class="mtb30 justify-start align-center ml20">
|
|
|
+ <u-avatar src="/static/logo.png" size="50"></u-avatar>
|
|
|
+ <view class="bold mlr20">御君方</view>
|
|
|
+ <view>申请</view>
|
|
|
+ </view>
|
|
|
+ <view class="bold fs36 ml20">授权你的昵称头像信息</view>
|
|
|
+ <view class="mtb20 justify-between align-center plr20">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
+ <view v-if="userinfos.nickname">
|
|
|
+ <u-icon name="checkbox-mark" color="#00aa00" size="22"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="ml20">
|
|
|
+ <view class="base-color-3 bold">第一步</view>
|
|
|
+ <view class="fs32 base-color-9">请点击授权微信昵称</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-container">
|
|
|
+ <input
|
|
|
+ type="nickname"
|
|
|
+ class="hidden-input"
|
|
|
+ @blur="onNickNameInput"
|
|
|
+ @input="onNickNameInput"
|
|
|
+ />
|
|
|
+ <button class="custom-button" :class="nameuser==''?'subname':'subavt'">{{nameuser?"已授权":'允许授权'}}</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="mtb20 justify-between align-center plr20 mt40">
|
|
|
+ <view class="justify-start align-center">
|
|
|
+ <view class="boxweixin" :class="userinfos.nickname==''?'boxnosel':'boxsel'">
|
|
|
+ <view v-if="userinfos.avatar">√</view>
|
|
|
+ </view>
|
|
|
+ <view class="ml20">
|
|
|
+ <view class="base-color-3 bold">第二步</view>
|
|
|
+ <view class="fs32 base-color-9">请点击授权微信头像</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button-container">
|
|
|
+ <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="hidden-input"
|
|
|
+ v-if="nameuser">
|
|
|
+ 允许授权
|
|
|
+ </button>
|
|
|
+ <button class="custom-button sub" @click="shouquan" v-if="nameuser==''">允许授权</button>
|
|
|
+ <button class="custom-button " :class="avataruser==''?'subname':'subavt'"
|
|
|
+ v-else>{{avataruser?"已授权":'允许授权'}}</button>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="submitname" @click="confimrname" :class="nameuser&&avataruser?'subact':'sub'">确定</view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {editUser}from '@/api/course.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userlogo:false,
|
|
|
+ imgname:'',
|
|
|
+ userinfos:{
|
|
|
+ nickname:"",
|
|
|
+ avatar:""
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ nameuser() {
|
|
|
+ return this.userinfos.nickname
|
|
|
+ },
|
|
|
+ avataruser() {
|
|
|
+ return this.userinfos.avatar
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //修改用户昵称以及头像
|
|
|
+ editUserA(){
|
|
|
+ this.userinfos=uni.getStorageSync('web_userInfo')?uni.getStorageSync('web_userInfo'):this.userinfos
|
|
|
+ const data={
|
|
|
+ nickName:this.userinfos.nickname,
|
|
|
+ // avatar:this.userinfos.avatar,
|
|
|
+ }
|
|
|
+ editUser(data).then(res=>{
|
|
|
+ if(res.code==200){
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.$emit('editUserSuccess')
|
|
|
+ },100)
|
|
|
+ }else{
|
|
|
+ uni.removeStorageSync('web_userInfo')
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title:res.msg
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ shouquan(){
|
|
|
+ if(this.userinfos.nickname==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请先授权微信昵称",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confimrname(){
|
|
|
+ if(this.userinfos.nickname==''){
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请授权微信昵称",
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // if(this.userinfos.avatar==''){
|
|
|
+ // uni.showToast({
|
|
|
+ // icon:'none',
|
|
|
+ // title: "请授权微信头像",
|
|
|
+ // });
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ uni.setStorageSync('web_userInfo',this.userinfos)
|
|
|
+ this.editUserA()
|
|
|
+ this.userlogo=false
|
|
|
+ },
|
|
|
+ onNickNameInput(e){
|
|
|
+ console.log(e)
|
|
|
+ this.userinfos.nickname=e.detail.value
|
|
|
+ },
|
|
|
+ onChooseAvatar(e){
|
|
|
+ this.userinfos.avatar=e.detail.avatarUrl
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'https://h5api.his.cdwjyyh.com'+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
|
|
|
+ filePath: e.detail.avatarUrl,
|
|
|
+ name: 'file',
|
|
|
+ formData: {
|
|
|
+ 'user': 'test' // 上传附带参数
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ console.log(uploadFileRes)
|
|
|
+ // 根据接口具体返回格式 赋值具体对应url
|
|
|
+ var data=JSON.parse(uploadFileRes.data)
|
|
|
+ this.userinfos.avatar=data.url
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .subname{
|
|
|
+ background-color: #00aa00;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .subavt{
|
|
|
+ background-color: #fff;
|
|
|
+ border: 2rpx #0a0 solid;
|
|
|
+ color: #00aa00;
|
|
|
+ }
|
|
|
+ .boxweixin{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 34rpx;
|
|
|
+ color: #0a0;
|
|
|
+ }
|
|
|
+ .boxnosel{
|
|
|
+ border: #757575 4rpx solid;
|
|
|
+ }
|
|
|
+ .boxsel{
|
|
|
+ border: #0a0 4rpx solid;
|
|
|
+ }
|
|
|
+ .button-container {
|
|
|
+ position: relative;
|
|
|
+ width: 240rpx;
|
|
|
+ }
|
|
|
+ .hidden-input {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .custom-button {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ /* 其他样式 */
|
|
|
+ width:100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ }
|
|
|
+ .submitname{
|
|
|
+ width: 90%;
|
|
|
+
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
+ .sub{
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ color: #0a0;
|
|
|
+ }
|
|
|
+ .subact{
|
|
|
+ background-color: #0a0;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .userlogo{
|
|
|
+ height: 760rpx;
|
|
|
+ }
|
|
|
+ .exsct {
|
|
|
+ height: 92rpx;
|
|
|
+ width: 437rpx;
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 69rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 27rpx;
|
|
|
+ left: 28rpx;
|
|
|
+ box-shadow: inset -57rpx 0px 40rpx -26rpx rgba(255, 255, 255, 0.7);
|
|
|
+ will-change: left, opacity;
|
|
|
+ animation: leftFade 2s linear infinite;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+</style>
|
