update:优化机构扫码页
This commit is contained in:
+145
-33
@@ -1,16 +1,35 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
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 {
|
||||
@@ -40,9 +59,17 @@ const bindOrg = async () => {
|
||||
binding.value = true;
|
||||
status.value = "binding";
|
||||
errorMessage.value = "";
|
||||
bindInfo.value = {};
|
||||
|
||||
try {
|
||||
await tempBindOrgAPI(scene.value);
|
||||
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") {
|
||||
@@ -83,45 +110,69 @@ onLoad((options) => {
|
||||
|
||||
<template>
|
||||
<view class="page">
|
||||
<AppBackground :type="6" bgColor="#20202c" />
|
||||
|
||||
<view class="content">
|
||||
<text class="title">机构设备绑定</text>
|
||||
<text class="title">登录门店Pad端</text>
|
||||
|
||||
<view v-if="status === 'idle' || status === 'binding'" class="state">
|
||||
<text class="state-title">正在绑定</text>
|
||||
<text class="description">正在绑定机构设备，请稍候……</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">
|
||||
<text class="state-title">请先登录</text>
|
||||
<text class="description">
|
||||
{{
|
||||
errorMessage ||
|
||||
"登录后即可绑定当前机构设备。关闭登录窗口后，也可以再次点击下方按钮继续。"
|
||||
}}
|
||||
</text>
|
||||
<SButton width="560rpx" :rounded="20" :onClick="openSignin">
|
||||
<text>立即登录</text>
|
||||
<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">
|
||||
<text class="state-title">绑定成功</text>
|
||||
<text class="description">
|
||||
您的账号已成功绑定机构设备，请返回 iPad 继续操作。
|
||||
</text>
|
||||
<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>
|
||||
|
||||
<view v-else-if="status === 'failed'" class="state">
|
||||
<text class="state-title">绑定失败</text>
|
||||
<view v-else-if="status === 'failed'" class="state message-state">
|
||||
<text class="state-title">授权登录失败</text>
|
||||
<text class="description">{{ errorMessage }}</text>
|
||||
<SButton width="560rpx" :rounded="20" :onClick="bindOrg">
|
||||
<text>重新绑定</text>
|
||||
<SButton width="600rpx" :rounded="22" :onClick="bindOrg">
|
||||
<text>重新登录</text>
|
||||
</SButton>
|
||||
</view>
|
||||
|
||||
<view v-else class="state">
|
||||
<view v-else class="state message-state">
|
||||
<text class="state-title">二维码无效</text>
|
||||
<text class="description">请重新扫描机构设备上的小程序码。</text>
|
||||
<text class="description">请重新扫描门店Pad端上的小程序码。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -139,32 +190,93 @@ onLoad((options) => {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: calc(var(--status-bar-height) + 120rpx) 48rpx 80rpx;
|
||||
background-color: #000;
|
||||
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 {
|
||||
font-size: 44rpx;
|
||||
font-weight: 600;
|
||||
color: #d8ad69;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.state {
|
||||
width: 100%;
|
||||
margin-top: 120rpx;
|
||||
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 {
|
||||
margin: 28rpx 0 60rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.state-title {
|
||||
font-size: 36rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user