From 96496a1c7da5a1b5b5086c5f5da3977f121b2f20 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Tue, 14 Nov 2023 17:36:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=EF=BC=9A=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E5=90=8E=E6=9C=AA=E8=8E=B7=E5=8F=96=E7=94=A8=E6=88=B7=E6=98=B5?=
 =?UTF-8?q?=E7=A7=B0=E5=92=8C=E5=A4=B4=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Authorize.vue | 380 ++++++++++++++++++++++++++-------------
 1 file changed, 252 insertions(+), 128 deletions(-)

diff --git a/components/Authorize.vue b/components/Authorize.vue
index 26c3a69..d072ca4 100644
--- a/components/Authorize.vue
+++ b/components/Authorize.vue
@@ -2,51 +2,76 @@
 	<view>
 		<view class='mask' v-if='isShowAuth && code' @click='close'></view>
 		<view class='Popup' :class="{'privacyPoupon' : canGetPrivacySetting }" v-if='isShowAuth && code' :style="'top:'+top+'px;'">
+      <!--登录弹框 - logo-->
 			<view class="logo-auth">
 				<image class="image" :src='routine_logo' mode="aspectFit"></image>
 			</view>
-			<!--#ifdef H5-->
-			<text v-if="isWeixin" class='title'>授权提醒</text>
-			<text v-else class='title'>{{title}}</text>
-			<!--#endif-->
-			<!--#ifdef APP-PLUS-->
-			<text class='title'>用户登录</text>
-			<!--#endif-->
-			<!--#ifdef MP-->
-			<text class='title'>{{title}}</text>
-			<!--#endif-->
-			<!--#ifdef H5-->
-			<text v-if="isWeixin" class='tip'>请授权用户信息，以便为您提供更好的服务！</text>
-			<text v-else class='tip'>{{info}}</text>
-			<!--#endif-->
-			<!--#ifdef APP-PLUS-->
-			<text class='tip'>请登录，将为您提供更好的服务！</text>
-			<!--#endif-->
-			<!--#ifdef MP-->
-			<text class='tip'>{{info}}</text>
-			<!--#endif-->
+      <!--登录弹框 - 标题-->
+      <template>
+        <!--#ifdef H5-->
+        <view v-if="isWeixin" class='title'>授权提醒</view>
+        <view v-else class='title'>{{title}}</view>
+        <!--#endif-->
+        <!--#ifdef APP-PLUS-->
+        <view class='title'>用户登录</view>
+        <!--#endif-->
+        <!--#ifdef MP-->
+        <view class='title'>{{title}}</view>
+        <!--#endif-->
+      </template>
+      <!--登录弹框 - 提示-->
+      <template>
+        <!--#ifdef H5-->
+        <view v-if="isWeixin" class='tip'>请授权用户信息，以便为您提供更好的服务！</view>
+        <view v-else class='tip'>{{info}}</view>
+        <!--#endif-->
+        <!--#ifdef APP-PLUS-->
+        <view class='tip'>请登录，将为您提供更好的服务！</view>
+        <!--#endif-->
+        <!--#ifndef MP-->
+        <view class='tip'>{{info}}</view>
+        <!--#endif-->
+        <!--#ifdef MP-WEIXIN-->
+        <view class="popup_box">
+          <view class="info">
+            <button class="userAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+              <image class="avatar" :src="avatar"></image>
+            </button>
+            <view class="row">
+              <view class="text1">昵称：</view>
+              <input type="nickname" class="weui-input" :value="nickname" placeholder="请输入昵称" @change="changeNickname"/>
+            </view>
+
+
+
+
+          </view>
+        </view>
+        <!--#endif-->
+      </template>
+      <!--操作按钮-->
 			<view class='bottom flex'>
-				<text class='item' @click='close'>随便逛逛</text>
+				<view class='item' @click='close'>随便逛逛</view>
 				<!-- #ifdef MP -->
-				<button class="item grant" hover-class="none"
-					@tap="getUserProfile"><text class="text">去授权</text></button>
+				<button class="item grant" hover-class="none" @tap="getUserProfile">
+          <view class="text">授权登录</view>
+        </button>
 				<!-- #endif -->
 				<!-- #ifdef APP-PLUS -->
 				<button class="item grant" @tap="toWecahtAuth">
-					<text class="text">去登录</text>
+					<view class="text">去登录</view>
 				</button>
 				<!-- #endif -->
 				<!-- #ifdef H5 -->
 				<button class="item grant" @tap="toWecahtAuth">
-					<text v-if="isWeixin" class="text">去授权</text>
-					<text v-else class="text">去登录</text>
+					<view v-if="isWeixin" class="text">去授权</view>
+					<view v-else class="text">去登录</view>
 				</button>
 				<!-- #endif -->
 			</view>
 		</view>
 		<!-- #ifdef MP -->
-		<privacyAgreementPopup ref="privacyAgreement" v-if="canGetPrivacySetting" @onclose="onclose"  @onReject="close" @onAgree="onAgree">
-		</privacyAgreementPopup>
+		<privacyAgreementPopup ref="privacyAgreement" v-if="canGetPrivacySetting" @onclose="onclose"  @onReject="close" @onAgree="onAgree"></privacyAgreementPopup>
 		<!-- #endif -->
 		<!-- #ifdef MP -->
 		<editUserModal :isShow="editModal" @closeEdit="closeEdit" @editSuccess="editSuccess"></editUserModal>
@@ -56,20 +81,17 @@
 <script>
 
 	const app = getApp();
-	import Cache from '../utils/cache';
-	import {
-		getLogo, commonAuth
-	} from '../api/public';
-	import { LOGO_URL, USER_INFO, EXPIRES_TIME} from '../config/cache';
-	import { mapGetters } from 'vuex';
-	import Routine from '../libs/routine';
-	import { configMap } from '@/utils/index';
-	import Auth from '../libs/wechat';
-	import { toLogin } from '../libs/login';
-	// #ifdef MP
-	import editUserModal from '@/components/eidtUserModal/index.vue'
-	import privacyAgreementPopup from '@/components/privacyAgreementPopup/index.vue'
-	// #endif
+  import Cache from '../utils/cache';
+  import {commonAuth} from '../api/public';
+  import {EXPIRES_TIME, USER_INFO} from '../config/cache';
+  import {mapGetters} from 'vuex';
+  import Routine from '../libs/routine';
+  import {configMap} from '@/utils/index';
+  import {toLogin} from '../libs/login';
+  // #ifdef MP
+  import editUserModal from '@/components/eidtUserModal/index.vue'
+  import privacyAgreementPopup from '@/components/privacyAgreementPopup/index.vue'
+  // #endif
 	export default {
 		name: 'Authorize',
 		props: {
@@ -109,6 +131,9 @@
 				mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
 				editModal: false, // 编辑头像信息
 				canGetPrivacySetting: false,
+        // 用户信息
+        avatar: '',
+        nickname: '',
 			}
 		},
 		computed: {
@@ -144,12 +169,9 @@
 						userInfo.code = self.code;
 						userInfo.spread = app.globalData.spid; //获取推广人ID
 						userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
-						commonAuth({
-							auth: {
-							type:'routine',
-							auth: userInfo
-						}
-						}).then(res=>{
+            userInfo.new_nickname = self.nickname;
+            userInfo.new_avatar = self.avatar;
+						commonAuth({auth: {type:'routine', auth: userInfo}}).then(res=>{
 							if(res.data.status == 200){
 								let time = res.data.result.expires_time - Cache.time();
 								self.$store.commit('UPDATE_USERINFO', res.data.result.user);
@@ -234,8 +256,6 @@
 				if (wx.getPrivacySetting) {
 					wx.getPrivacySetting({
 						success: res => {
-              console.log("wx.getPrivacySetting  success");
-							console.log(res)
 							if (res.needAuthorization) {
 								// 需要弹出隐私协议
 								this.canGetPrivacySetting = true
@@ -268,97 +288,116 @@
 				// 	this.$emit('authColse', false);
 				// }
 			},
+
+
+      // 微信头像获取
+      onChooseAvatar(e) {
+        const {avatarUrl} = e.detail
+        this.$util.uploadImgs('upload/image', avatarUrl, (res) => {
+          this.avatar = res.data.path
+        }, (err) => {
+          console.log(err)
+        })
+      },
+      changeNickname(e){
+        this.nickname = e.detail.value || e.target.value;
+      }
+
 		}
 	}
 </script>
 
 <style scoped lang='scss'>
 	.Popup {
-		flex: 1;
-		align-items: center;
-		justify-content: center;
-		width: 500rpx;
-		background-color: #fff;
-		position: fixed;
-		top: 500rpx;
-		left: 125rpx;
-		z-index: 900;
-	/* 	&.privacyPoupon{
-			z-index: 0
-		} */
-	}
-	.Popup {
+    --logo-auth-size-: 180rpx;
+
+    width: 80%;
+    background-color: #fff;
+    position: fixed;
+    top: 500rpx;
+    left: 10%;
+    z-index: 900;
+    padding:calc(var(--logo-auth-size-) / 2) 20rpx 20rpx 20rpx;
+    border-radius: 15rpx;
+
 		.logo-auth {
-			z-index: -1;
-			position: absolute;
-			left: 50%;
-			top: 0%;
-			transform: translate(-50%, -50%);
-			width: 150rpx;
-			height: 150rpx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border: 8rpx solid #fff;
-			border-radius: 50%;
-			background: #fff;
+      position: absolute;
+      top: calc(0rpx - (var(--logo-auth-size-) + 8rpx) / 2);
+      left: calc((100% - 180rpx) / 2);
+      width: var(--logo-auth-size-);
+      height: var(--logo-auth-size-);
+      border: 8rpx solid #fff;
+      border-radius: 50%;
+      background: #fff;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      .image {
+        height: var(--logo-auth-size-);
+        margin-top: -30rpx;
+      }
 		}
-		.image {
-			height: 42rpx;
-			margin-top: -54rpx;
-		}
-	}
-	.Popup .title {
-		font-size: 28rpx;
-		color: #000;
-		text-align: center;
-		margin-top: 30rpx;
-		align-items: center;
-		justify-content: center;
-		width: 500rpx;
-		display: flex;
-	}
-	.Popup .tip {
-		font-size: 22rpx;
-		color: #555;
-		padding: 0 24rpx;
-		margin-top: 25rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-	.Popup .bottom .item {
-		width: 250rpx;
-		height: 80rpx;
-		background-color: #eeeeee;
-		text-align: center;
-		line-height: 80rpx;
-		margin-top: 54rpx;
-		font-size: 24rpx;
-		color: #666;
-		.text{
-			font-size: 24rpx;
-			color: #666;
-		}
-	}
-	.Popup .bottom .item.on {
-		width: 500rpx;
+    .title {
+      width: 100%;
+      height: 60rpx;
+      line-height: 60rpx;
+      text-align: center;
+      font-size: 32rpx;
+      color: #000;
+    }
+    .tip {
+      width: 100%;
+      line-height: 50rpx;
+      font-size: 28rpx;
+      color: #555;
+      padding: 20rpx 0;
+      text-align: left;
+    }
+    .bottom{
+      width: 100%;
+      height: 80rpx;
+      margin-top: 50rpx;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: space-around;
+      align-items: center;
+
+      .item {
+        width: 200rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        background-color: #eeeeee;
+        text-align: center;
+        font-size: 26rpx;
+        color: #666;
+        .text{
+          font-size: 26rpx;
+          color: #666;
+        }
+      }
+      .item.on {
+        width: 500rpx;
+      }
+      .item.grant {
+        font-weight: bold;
+        background-color: #E93323;
+        /* background-color: var(--view-theme); */
+        border-radius: 0;
+        padding: 0;
+        .text{
+          font-size: 28rpx;
+          color: #fff;
+        }
+      }
+    }
 	}
 	.flex {
 		display: flex;
 		flex-direction: row;
 	}
-	.Popup .bottom .item.grant {	
-		font-weight: bold;
-		background-color: #E93323;
-		/* background-color: var(--view-theme); */
-		border-radius: 0;
-		padding: 0;
-		.text{
-			font-size: 28rpx;
-			color: #fff;
-		}
-	}
 	.mask {
 		position: fixed;
 		top: 0;
@@ -368,4 +407,89 @@
 		background-color: rgba(0, 0, 0, 0.65);
 		z-index: 99;
 	}
+
+  .popup_box {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 35rpx;
+    display: flex;
+    flex-direction: column;
+
+    .h1 {
+      width: 100%;
+      position: fixed;
+      top: 0;
+      background: #fff;
+      font-size: 36rpx;
+      height: 100rpx;
+      line-height: 100rpx;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      padding: 0 28rpx;
+      box-sizing: border-box;
+    }
+    .h1 icon {
+      font-size: 32rpx;
+      color: #c9c9c9;
+    }
+    .info {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+    .info .userAvatar {
+      width: 130rpx;
+      height: 130rpx;
+      border-radius: 100%;
+      overflow: hidden;
+      padding: 0;
+      margin-top: 45px;
+      background-color: #fff;
+      border: 2rpx solid #cccccc;
+    }
+    .info .userAvatar .avatar {
+      display: block;
+      width: 130rpx;
+      height: 130rpx;
+    }
+    .info .row {
+      border-bottom: 1px solid #ccc;
+      display: flex;
+      align-items: center;
+      height: 80rpx;
+      padding-left: 20rpx;
+    }
+    .info .row.text1 {
+      flex: 2;
+    }
+    .info .row.weui-input {
+      flex: 6;
+    }
+    .btn {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      background: #fff;
+      align-items: center;
+      justify-content: center;
+      display: flex;
+      padding-top: 20rpx;
+      padding-bottom: 20rpx;
+    }
+    .btn .button {
+      width: 90%;
+      height: 84rpx;
+      border-radius: 64rpx;
+      background: #f15353;
+      color: #fff;
+      font-size: 36rpx;
+      border: none;
+      text-align: center;
+      line-height: 84rpx;
+    }
+  }
 </style>