shop_app/pages/user/authorize.vue

<template>
	<view class="whole">
		<up-popup :show="show" :z-index="100" mode="bottom" :round="10" :closeOnClickOverlay="false">
			<view class="cont">
				<view class="BBox">
					<view class="tit">需要您的授权</view>
					<view class="desc">为了提供更好得服务<br/>请在稍后的提示框中点击“允许”</view>
					<image class="img" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/04/26/i0qdqwMRCTway5EL7KGSE2GhFHv39Q488NPsFOss.png" mode="widthFix"></image>
					<view class="btnBox">
						<view class="btn cancel" @click="cancel">取消</view>
						<view class="btn" @click="wxLogin">确定</view>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast, getShopInfo } from '@/components/common.js'
	import API from '/api/index'
	
	export default {
		setup() {
			const data = reactive({
				show: true,
				overlayStyle: {
					background: 'rgba(0,0,0,0.6)',
					height: '100vh',
					width: '100%'
				},
				Color: uni.getStorageSync('theme_color'),
			})
			
			const wxLogin = () => {
				uni.showLoading({
					title: '正在登录...',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: (res) => {
						const { code } = res
						uni.request({
							method: 'POST',
							url: API.url + '/api/v1/auth/login',
							data: {
								code,
								from: 'uni-app',
								uuid: uni.getStorageSync('uuid')
							},
							header: {
								Authorization: uni.getStorageSync('token') || '',
								accept: "application/json",
								appid: API.appId
							},
							success: (val) => {
								if(!Array.isArray(val.data)) {
									if(val.data.access_token) {
										let token = val.data.token_type + ' ' + val.data.access_token
										uni.setStorageSync('token', token)
										uni.setStorageSync('subscribe', val.data.is_subscribe)
										uni.setStorageSync('avatar', val.data.avatar)
										uni.setStorageSync('nickname', val.data.nickname)
										uni.setStorageSync('role', 0)
										uni.setStorageSync('login_type', 'mini-app')
										uni.setStorageSync('is_vip', val.data.is_vip)
										uni.setStorageSync('is_new', val.data.is_new)
										uni.setStorageSync('is_authorized', val.data.is_authorized)
										uni.setStorageSync('is_default_avatar', val.data.is_default_avatar)
										uni.setStorageSync('sessionKey', val.data.session_key)
										uni.setStorageSync('saveTime', Date.now()) // 存储时间
										uni.setStorageSync('expires_in', val.data.expires_in * 1000) // 失效时间
										getShopInfo().then((ress) => {
											uni.reLaunch({
											    url: '/pages/index/index'
											})
											uni.hideLoading()
										})
									}
								}
							},
							fail: (err) => {
								console.log('uni.request fail', err)
								uni.hideLoading()
							}
						})
					},
					fail: (err) => {
						console.log('uni.login fail', err)
						uni.hideLoading()
					}
				})
			}
			
			function cancel() {
				uni.navigateBack({delta: 1})
			}
			
			return {
				...toRefs(data),
				wxLogin,
				cancel
			}
		},
		async onLoad(options) {
			
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
	}
	.cont{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.BBox{
		background-color: #fff;
		width: 100%;
		border-radius: 8px;
		padding: 30px 20px;
		box-sizing: border-box;
		text-align: center;
		.tit{
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 20px;
		}
		.desc{
			font-size: 14px;
			line-height: 20px;
			color: #555;
		}
		.img{
			width: 80%;
			display: block;
			margin: 30px auto;
		}
		.btnBox{
			display: flex;
			justify-content: space-between;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 45%;
				height: 40px;
				font-size: 14px;
				background-color: v-bind('Color');
				border-radius: 40px;
				color: #fff;
				&.cancel{
					background-color: #ccc;
					color: #222;
				}
			}
		}
	}
</style>