307 lines
6.8 KiB
Vue
307 lines
6.8 KiB
Vue
<script setup>
|
||
import { computed, ref } from "vue";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import Signin from "@/components/Signin.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import AppBackground from "@/components/AppBackground.vue";
|
||
import DeviceChargingDialog from "@/components/DeviceChargingDialog.vue";
|
||
import { tempBindOrgAPI } from "@/apis";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
|
||
const scene = ref("");
|
||
const status = ref("idle");
|
||
const errorMessage = ref("");
|
||
const showSignin = ref(false);
|
||
const binding = ref(false);
|
||
const bindInfo = ref({});
|
||
|
||
const successInfo = computed(() => {
|
||
const result = bindInfo.value || {};
|
||
|
||
return {
|
||
avatar: user.value.avatar,
|
||
nickName: user.value.nickName || "--",
|
||
mobile: result.mobile || "--",
|
||
storeName: result.storeName || "--",
|
||
};
|
||
});
|
||
|
||
const getToken = () => {
|
||
try {
|
||
const env = uni.getAccountInfoSync().miniProgram.envVersion;
|
||
return uni.getStorageSync(`${env}_token`);
|
||
} catch (error) {
|
||
return "";
|
||
}
|
||
};
|
||
|
||
const openSignin = () => {
|
||
showSignin.value = true;
|
||
};
|
||
|
||
const closeSignin = () => {
|
||
showSignin.value = false;
|
||
};
|
||
|
||
const bindOrg = async () => {
|
||
if (binding.value || !scene.value) return;
|
||
|
||
if (!getToken()) {
|
||
status.value = "login";
|
||
return;
|
||
}
|
||
|
||
binding.value = true;
|
||
status.value = "binding";
|
||
errorMessage.value = "";
|
||
bindInfo.value = {};
|
||
|
||
try {
|
||
const result = (await tempBindOrgAPI(scene.value)) || {};
|
||
if (result.success !== true) {
|
||
status.value = "failed";
|
||
errorMessage.value = result.msg || "授权登录失败，请稍后重试。";
|
||
return;
|
||
}
|
||
|
||
bindInfo.value = result;
|
||
status.value = "success";
|
||
} catch (error) {
|
||
if (error?.type === "AUTH_INVALID") {
|
||
status.value = "login";
|
||
errorMessage.value = "登录已失效，请重新登录后完成绑定。";
|
||
} else {
|
||
status.value = "failed";
|
||
errorMessage.value = error?.message || "网络异常，请稍后重试。";
|
||
}
|
||
} finally {
|
||
binding.value = false;
|
||
}
|
||
};
|
||
|
||
const handleLoginSuccess = async () => {
|
||
await bindOrg();
|
||
};
|
||
|
||
const goHome = () => {
|
||
uni.reLaunch({ url: "/pages/index" });
|
||
};
|
||
|
||
onLoad((options) => {
|
||
try {
|
||
const value = decodeURIComponent(String(options?.scene || ""));
|
||
if (!/^org_\d+$/.test(value)) {
|
||
status.value = "invalid";
|
||
return;
|
||
}
|
||
|
||
scene.value = value;
|
||
if (getToken()) {
|
||
void bindOrg();
|
||
} else {
|
||
status.value = "login";
|
||
}
|
||
} catch (error) {
|
||
status.value = "invalid";
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="page">
|
||
<AppBackground :type="6" bgColor="#20202c" />
|
||
|
||
<view class="content">
|
||
<text class="title">登录门店Pad端</text>
|
||
|
||
<view
|
||
v-if="status === 'idle' || status === 'binding'"
|
||
class="state message-state"
|
||
>
|
||
<text class="state-title">正在授权登录</text>
|
||
<text class="description">正在登录门店Pad端，请稍候……</text>
|
||
</view>
|
||
|
||
<view v-else-if="status === 'login'" class="state login-state">
|
||
<image
|
||
class="login-icon"
|
||
src="../static/org-bind/login-icon.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text class="login-title">{{
|
||
errorMessage || "请先登录小程序"
|
||
}}</text>
|
||
<SButton width="600rpx" :rounded="22" :onClick="openSignin">
|
||
<text>微信授权登录</text>
|
||
</SButton>
|
||
</view>
|
||
|
||
<view v-else-if="status === 'success'" class="state success-state">
|
||
<view class="avatar-wrap">
|
||
<Avatar
|
||
:src="successInfo.avatar"
|
||
:size="176"
|
||
sizeUnit="rpx"
|
||
imageMode="aspectFill"
|
||
/>
|
||
<image
|
||
class="success-badge"
|
||
src="../static/org-bind/green-gou.png"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<text class="success-title">已成功授权登录射灵星球门店Pad端。</text>
|
||
<view class="account-info">
|
||
<text>登录账号：{{ successInfo.nickName }}</text>
|
||
<text>手机号：{{ successInfo.mobile }}</text>
|
||
<text>登录门店：{{ successInfo.storeName }}</text>
|
||
<text class="warm-tip">
|
||
温馨提示：离开门店时候记得在Pad退出登录哦！
|
||
</text>
|
||
</view>
|
||
<view class="success-action">
|
||
<SButton width="600rpx" :rounded="22" :onClick="goHome">
|
||
<text>回到首页</text>
|
||
</SButton>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else-if="status === 'failed'" class="state message-state">
|
||
<text class="state-title">授权登录失败</text>
|
||
<text class="description">{{ errorMessage }}</text>
|
||
<SButton width="600rpx" :rounded="22" :onClick="bindOrg">
|
||
<text>重新登录</text>
|
||
</SButton>
|
||
</view>
|
||
|
||
<view v-else class="state message-state">
|
||
<text class="state-title">二维码无效</text>
|
||
<text class="description">请重新扫描门店Pad端上的小程序码。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<Signin
|
||
:show="showSignin"
|
||
:onClose="closeSignin"
|
||
:onSuccess="handleLoginSuccess"
|
||
/>
|
||
<DeviceChargingDialog />
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.page {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
padding: calc(var(--status-bar-height) + 64rpx) 48rpx 80rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.title {
|
||
color: #d8ad69;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.state {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.login-state,
|
||
.success-state {
|
||
margin-top: 320rpx;
|
||
}
|
||
|
||
.message-state {
|
||
margin-top: 240rpx;
|
||
}
|
||
|
||
.login-icon {
|
||
width: 176rpx;
|
||
height: 176rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.login-title {
|
||
width: 600rpx;
|
||
margin: 28rpx 0 60rpx;
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
|
||
.avatar-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.success-badge {
|
||
position: absolute;
|
||
right: -2rpx;
|
||
bottom: 4rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.success-title {
|
||
width: 572rpx;
|
||
margin-top: 28rpx;
|
||
color: #fed847;
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.account-info {
|
||
box-sizing: border-box;
|
||
width: 572rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #FFFFFF;
|
||
font-size: 28rpx;
|
||
line-height: 52rpx;
|
||
}
|
||
|
||
.warm-tip {
|
||
margin-top: 40rpx;
|
||
color: #b8b8bd;
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.success-action {
|
||
margin-top: 64rpx;
|
||
}
|
||
|
||
.state-title {
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.description {
|
||
max-width: 600rpx;
|
||
margin: 32rpx 0 64rpx;
|
||
color: #b8b8b8;
|
||
font-size: 28rpx;
|
||
line-height: 1.8;
|
||
text-align: center;
|
||
}
|
||
</style>
|