update:优化机构扫码页

src/pages/org-bind.vue

@@ -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;
 }