111 lines
2.2 KiB
Vue
111 lines
2.2 KiB
Vue
<template>
|
||
<nut-overlay :visible="visible" :close-on-click-overlay="false">
|
||
<view class="text">
|
||
<view>授权提醒</view>
|
||
<view style="margin-top: 10px"
|
||
>请授权头像信息，以便为您提供更好的服务！
|
||
</view>
|
||
<view class="bom">
|
||
<view class="btn b" @click="onCancel">随便逛逛</view>
|
||
<view class="btn a" @tap="onOk">去授权</view>
|
||
</view>
|
||
</view>
|
||
</nut-overlay>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// import { computed, ref } from "vue";
|
||
import Taro from '@tarojs/taro';
|
||
import {login} from '@/api/user';
|
||
|
||
defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits(['update:visible', 'ok']);
|
||
|
||
const onCancel = () => {
|
||
emit('update:visible', false);
|
||
};
|
||
|
||
const onOk = () => {
|
||
Taro.showLoading({
|
||
title: '正在授权中',
|
||
mask: true,
|
||
});
|
||
Taro.getUserProfile({
|
||
desc: '完善用户资料',
|
||
success: async user => {
|
||
Taro.login({
|
||
success: async ({code}) => {
|
||
try {
|
||
const {data}: any = await login({
|
||
code: code,
|
||
nickName: user.userInfo.nickName,
|
||
avatarUrl: user.userInfo.avatarUrl,
|
||
});
|
||
Taro.setStorageSync('token', data.token);
|
||
emit('ok', false);
|
||
} catch (error) {
|
||
Taro.showToast({
|
||
title: error.message,
|
||
icon: 'none',
|
||
});
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
},
|
||
complete: () => {
|
||
Taro.hideLoading();
|
||
},
|
||
});
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
},
|
||
complete: () => {
|
||
Taro.hideLoading();
|
||
},
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.text {
|
||
text-align: center;
|
||
background-color: #fff;
|
||
width: 500px;
|
||
padding: 20px;
|
||
margin: auto;
|
||
transform: translateY(150%);
|
||
border-radius: 10px;
|
||
|
||
.bom {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
|
||
.btn {
|
||
width: 150px;
|
||
padding: 10px;
|
||
border-radius: 15px;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.a {
|
||
background-color: #ff5000;
|
||
}
|
||
|
||
.b {
|
||
background-color: rgba(255, 80, 0, 0.5);
|
||
}
|
||
}
|
||
}
|
||
</style>
|