feat: 首页欢迎语组件布局调整

src/App.vue

@@ -16,6 +16,7 @@ onHide(() => {
 
 <style lang="scss">
 @import "@/static/fonts/iconfont.css";
+@import "@/static/scss/index.scss";
 
 /* 添加全局样式 */
 page,

src/hooks/useGoLogin.js

@@ -1,4 +1,4 @@
-import { loginAuth, bindPhone } from "@/manager/LoginManager";
+import { loginAuth, bindPhone, checkPhone } from "@/manager/LoginManager";
 import { clientId } from "@/constant/base";
 import { useAppStore } from "@/store";
 
@@ -10,16 +10,28 @@ export const goBack = () => uni.navigateBack({ delta: 1 });
 
 // 登录逻辑
 export const onLogin = async (e) => {
-  console.info("onLogin code: ", e.detail);
+  console.info("onLogin code: ", e);
 
   return new Promise(async (resolve, reject) => {
     // 判断用户拒绝
-    if (e.detail.errno === 104) {
+    if (e !== undefined && e && e.detail && e.detail.errno === 104) {
       reject();
       return;
     }
 
     await loginAuth(e).then(async () => {
+      // 检查手机号是否绑定
+      const checkRes = await checkPhone();
+      if (checkRes.data) {
+        resolve();
+        return;
+      }
+
+      if (e === undefined) {
+        resolve();
+        return;
+      }
+
       const { code } = e.detail;
 
       // 绑定手机号

src/main.js

@@ -1,4 +1,5 @@
 import App from "./App";
+import share from "./utils/share";
 
 // #ifndef VUE3
 import Vue from "vue";
@@ -21,6 +22,7 @@ export function createApp() {
 
   pinia.use(createUnistorage());
   app.use(pinia);
+  app.use(share);
 
   return {
     app,

src/manager/AuthManager.js

@@ -11,7 +11,10 @@ export const getWeChatAuthCode = (e) => {
     // #endif
 
     // 判断用户拒绝授权
-    if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
+    if (
+      e !== undefined &&
+      e.detail.errMsg === "getPhoneNumber:fail user deny"
+    ) {
       reject();
       return;
     }

src/manager/LoginManager.js

@@ -48,13 +48,9 @@ const bindPhone = async (params) => {
   }
 };
 
-const checkPhone = async (phone) => {
+const checkPhone = async () => {
-  try {
+  const response = await checkUserPhone();
-    const response = await checkUserPhone(phone);
   return response;
-  } catch (error) {
-    throw err;
-  }
 };
 
 export { loginAuth, bindPhone, checkPhone };

src/pages/index/components/chat/ChatCardAi/styles/index.scss

@@ -5,15 +5,10 @@
   overflow-x: hidden; // ✅ 防止横向撑开
 
   .chat-ai {
-    margin: 6px 12px;
+    margin: 6px 0;
-    padding: 0 12px;
+    padding: 0 20px; // 消息内容的内边距 左右20px
-    max-width: 100%; // ✅ 限制最大宽度
     min-width: 100px;
-    background: rgba(255, 255, 255, 0.4);
+    max-width: 100%; // ✅ 限制最大宽度
-    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 4px 20px 20px 20px;
-    border: 1px solid;
-    border-color: #ffffff;
     overflow: hidden; // ✅ 超出内容被切掉
     word-wrap: break-word; // ✅ 长单词自动换行
     word-break: break-all; // ✅ 强制换行

src/pages/index/components/chat/ChatCardMine/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="chat-mine">
+  <view class="chat-mine bg-17294E">
     <text>{{ text }}</text>
     <slot></slot>
   </view>

src/pages/index/components/chat/ChatCardMine/styles/index.scss

@@ -1,12 +1,7 @@
 .chat-mine {
-  margin: 6px 12px;
+  margin: 6px 20px;
   padding: 8px 16px;
-
+  border-radius: 15px;
-  background-color: #00a6ff;
-  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 20px 4px 20px 20px;
-  border: 1px solid;
-  border-color: #ffffff;
 
   display: flex;
   flex-direction: column;

src/pages/index/components/chat/ChatCardOther/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="chat-other">
+  <view class="chat-other pl-20">
     <text>{{ text }}</text>
     <slot></slot>
   </view>

src/pages/index/components/chat/ChatCardOther/styles/index.scss

@@ -1,11 +1,11 @@
 .chat-other {
   width: 100%;
   margin: 6px 0;
-  padding: 0 12px;
   display: flex;
   flex-direction: column;
   max-width: 100%; // ✅ 限制最大宽度
   overflow-x: hidden; // ✅ 防止横向撑开
+  padding-left: 20px;
 
   text {
     font-size: $uni-font-size-base;

src/pages/index/components/chat/ChatMainList/index.vue

@@ -1,35 +1,21 @@
 <template>
-  <view class="chat-container" @touchend="handleTouchEnd">
+  <view class="flex flex-col h-screen" @touchend="handleTouchEnd">
-    <!-- 顶部的背景 -->
-    <ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
-
-    <view class="chat-content">
     <!-- 顶部自定义导航栏 -->
-      <view
+    <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
-        class="nav-bar-container"
+      <ChatTopNavBar @openDrawer="openDrawer" />
-        :style="{
-          paddingTop: statusBarHeight + 'px',
-        }"
-      >
-        <ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
     </view>
 
     <!-- 消息列表（可滚动区域） -->
     <scroll-view
-        :scroll-top="scrollTop"
+      class="main flex-full"
       scroll-y
+      :scroll-top="scrollTop"
       :scroll-with-animation="true"
-        class="area-msg-list"
       @scroll="handleScroll"
       @scrolltolower="handleScrollToLower"
     >
       <!-- welcome栏 -->
-        <ChatTopWelcome
+      <ChatTopWelcome :mainPageDataModel="mainPageDataModel" />
-          class="chat-container-top-bannar"
-          :initPageImages="mainPageDataModel.initPageImages"
-          :welcomeContent="mainPageDataModel.welcomeContent"
-        >
-        </ChatTopWelcome>
 
       <view
         class="area-msg-list-content"
@@ -46,9 +32,7 @@
           >
             <template #content v-if="item.toolCall">
               <QuickBookingComponent
-                  v-if="
+                v-if="item.toolCall.componentName === CompName.quickBookingCard"
-                    item.toolCall.componentName === CompName.quickBookingCard
-                  "
               />
               <DiscoveryCardComponent
                 v-else-if="
@@ -75,8 +59,7 @@
               />
               <AddCarCrad
                 v-else-if="
-                    item.toolCall.componentName ===
+                  item.toolCall.componentName === CompName.enterLicensePlateCard
-                    CompName.enterLicensePlateCard
                 "
                 :toolCall="item.toolCall"
               />
@@ -100,11 +83,6 @@
 
         <template v-else>
           <ChatCardOther class="message-item-other" :text="item.msg">
-              <ChatMoreTips
-                @replySent="handleReply"
-                :itemList="mainPageDataModel.guideWords"
-              />
-
             <ActivityListComponent
               v-if="
                 mainPageDataModel.activityList &&
@@ -126,7 +104,7 @@
     </scroll-view>
 
     <!-- 输入框区域 -->
-      <view class="footer-area">
+    <view class="footer">
       <ChatQuickAccess @replySent="handleReplyInstruct" />
       <ChatInputArea
         ref="inputAreaRef"
@@ -141,7 +119,6 @@
       />
     </view>
   </view>
-  </view>
 </template>
 
 <script setup>
@@ -157,13 +134,11 @@ import {
 import { WSS_URL } from "@/request/base/baseUrl";
 import { MessageRole, MessageType, CompName } from "@/model/ChatModel";
 import ChatTopWelcome from "../ChatTopWelcome/index.vue";
-import ChatTopBgImg from "../ChatTopBgImg/index.vue";
 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
 import ChatCardAI from "../ChatCardAi/index.vue";
 import ChatCardMine from "../ChatCardMine/index.vue";
 import ChatCardOther from "../ChatCardOther/index.vue";
 import ChatQuickAccess from "../ChatQuickAccess/index.vue";
-import ChatMoreTips from "../ChatMoreTips/index.vue";
 import ChatInputArea from "../ChatInputArea/index.vue";
 import QuickBookingComponent from "../../module/QuickBookingComponent/index.vue";
 import DiscoveryCardComponent from "../../module/DiscoveryCardComponent/index.vue";

src/pages/index/components/chat/ChatMainList/styles/index.scss

@@ -1,106 +1,4 @@
-.chat-container {
+.footer {
-  width: 100vw;
+  height: 118px;
-  height: 100vh;
+  // touch-action: pan-x;
-  background-color: #e9f3f7;
-
-  display: flex;
-  flex-direction: column;
-  overflow: hidden !important;
-  position: relative;
-  /* 确保在键盘弹起时布局正确 */
-  box-sizing: border-box;
-
-  .chat-container-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 0;
-    height: 270px;
-    background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
-  }
-
-  .chat-content {
-    width: 100vw;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    z-index: 1;
-    overflow: hidden;
-  }
-
-  .chat-container-top-bannar {
-    width: 100vw;
-    flex-shrink: 0;
-    touch-action: none;
-  }
-
-  .area-msg-list {
-    width: 100vw;
-    flex: 1;
-    overflow-y: auto;
-    min-height: 0;
-    height: 0;
-    padding: 4px 0 0;
-    overscroll-behavior: contain; /* 阻止滚动穿透 */
-    -webkit-overflow-scrolling: touch;
-
-    display: flex;
-    flex-direction: column;
-
-    .message-item-ai {
-      display: flex;
-      justify-content: flex-start;
-    }
-
-    .message-item-mine {
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    .message-item-other {
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
-
-.footer-area {
-  width: 100vw;
-  flex-shrink: 0;
-  padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
-  background-color: #e9f3f7;
-  touch-action: pan-x;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: fit-content;
-  /* 安卓键盘适配 - 使用相对定位配合adjustPan */
-  position: relative;
-  z-index: 1;
-  transition: padding-bottom 0.3s ease;
-  /* 确保输入区域始终可见 */
-  // transform: translateZ(0);
-  // -webkit-transform: translateZ(0);
-}
-
-// 打字机光标闪烁动画
-.typing-cursor {
-  display: inline-block;
-  color: #42adf9;
-  font-weight: bold;
-  font-size: 1.2em;
-  animation: blink 1s infinite;
-  margin-left: 2px;
-}
-
-@keyframes blink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0;
-  }
 }

src/pages/index/components/chat/ChatMoreTips/index.vue

@@ -1,14 +1,17 @@
 <template>
-  <view class="more-tips">
+  <view class="more-tips bg-white border-box">
-    <view class="more-tips-scroll">
+    <view class="font-size-0 whitesspace-nowrap scroll-x">
       <view
-        class="more-tips-item"
+        class="more-tips-item border-box inline-block mr-8"
-        v-for="(item, index) in itemList"
+        v-for="(item, index) in guideWords"
         :key="index"
       >
-        <view class="more-tips-item-title" @click="sendReply(item)">
+        <text
+          class="font-500 font-size-12 line-height-24 text-center"
+          @click="sendReply(item)"
+        >
           {{ item }}
-        </view>
+        </text>
       </view>
     </view>
   </view>
@@ -16,10 +19,11 @@
 
 <script setup>
 import { defineProps } from "vue";
+
 const emits = defineEmits(["replySent"]);
 
 defineProps({
-  itemList: {
+  guideWords: {
     type: Array,
     default: [
       "定温泉票",

src/pages/index/components/chat/ChatMoreTips/styles/index.scss

@@ -1,35 +1,15 @@
 .more-tips {
-  width: 100%;
+  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.03);
-
+  border-radius: 0px 0px 20px 20px;
-  &-scroll {
+  padding: 12px 0 12px 12px;
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-    padding-bottom: 12px;
-    box-sizing: border-box;
-  }
 
   .more-tips-item {
-    border-radius: 8px;
+    background: #f7f7f7;
-    margin: 4px;
+    border-radius: 5px;
-    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
+    padding: 6px 8px;
-    background-color: $uni-bg-color;
-    padding: 2px 12px;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    white-space: nowrap;
-    position: relative;
 
-    .more-tips-item-title {
+    &:last-child {
-      font-weight: 500;
+      margin-right: 12px;
-      font-size: $uni-font-size-sm;
-      color: #00a6ff;
-      line-height: 24px;
-      text-align: center;
-      white-space: nowrap;
     }
   }
 }

src/pages/index/components/chat/ChatTopBgImg/index.vue

@@ -1,9 +0,0 @@
-<template>
-  <view class="top-bg"> </view>
-</template>
-
-<script></script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>

src/pages/index/components/chat/ChatTopBgImg/styles/index.scss

@@ -1,11 +0,0 @@
-.top-bg {
-  width: 100%;
-  height: 270px;
-  overflow: hidden;
-  background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
-
-  .top-bg-img {
-    width: 100%;
-    height: 100%;
-  }
-}

src/pages/index/components/chat/ChatTopWelcome/index.vue

@@ -1,51 +1,59 @@
 <template>
-  <view class="top-bg-content">
+  <view class="welcome-content border-box p-20">
-    <view class="top-item">
+    <view class="wrap rounded-20">
-      <!-- :style="backgroundStyle" -->
+      <view
+        class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
+      >
         <image
-        class="top-item-left"
+          class="ip relative"
-        :src="initPageImages.welcomeImageUrl"
-        mode="aspectFit"
-      ></image>
-      <image
-        class="top-item-right"
           :src="initPageImages.logoImageUrl"
           mode="aspectFit"
-      ></image>
+        />
+        <view
+          class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
+        >
+          {{ welcomeContent }}
+        </view>
+      </view>
+
+      <ChatMoreTips :guideWords="guideWords" @replySent="handleReply" />
     </view>
-    <ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
   </view>
 </template>
 
 <script setup>
 import { defineProps, computed } from "vue";
-import ChatCardAI from "../ChatCardAi/index.vue";
+import ChatMoreTips from "../ChatMoreTips/index.vue";
 
 const props = defineProps({
-  initPageImages: {
+  mainPageDataModel: {
     type: Object,
-    default: {
+    default: () => {
+      return {
+        initPageImages: {
           backgroundImageUrl: "",
           logoImageUrl: "",
           welcomeImageUrl: "",
         },
-  },
+        welcomeContent:
-  welcomeContent: {
-    type: String,
-    default:
           "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
+        guideWords: [
+          "定温泉票",
+          "定酒店",
+          "优惠套餐",
+          "亲子玩法",
+          "了解交通",
+          "看看酒店",
+          "看看美食",
+        ],
+      };
+    },
   },
 });
 
-// 计算背景样式
+const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
-const backgroundStyle = computed(() => {
+const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
-  return {
+const guideWords = computed(() => props.mainPageDataModel.guideWords);
-    backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat",
-  };
-});
 </script>
 
 <style lang="scss" scoped>

src/pages/index/components/chat/ChatTopWelcome/styles/index.scss

@@ -1,25 +1,10 @@
-.top-bg-content {
+.wrap {
-  display: flex;
+  background-color: rgba(255, 255, 255, 0.5);
-  justify-content: flex-end;
-  align-items: stretch;
-  flex-direction: column;
 }
 
-.top-item {
+.ip {
-  display: flex;
+  flex: 0 0 123px;
-  flex-direction: row;
+  width: 123px;
-  justify-content: space-between;
+  height: 166px;
-  align-items: center;
+  margin-top: -20px;
-  padding: 0 32px;
-  margin-bottom: -6px;
-}
-
-.top-item-left {
-  width: 118px;
-  height: 52px;
-}
-
-.top-item-right {
-  width: 130px;
-  height: 130px;
 }

src/pages/index/components/drawer/MineSetting/index.vue

@@ -106,6 +106,7 @@ const handleLogout = () => {
       if (res.confirm) {
         uni.clearStorageSync();
         appStore.setHasToken(false);
+        appStore.setTokenExpired(true);
         emits("closeDrawer");
         uni.$emit(NOTICE_EVENT_LOGOUT);
       }

src/pages/index/components/module/RecommendPostsList/index.vue

@@ -1,17 +1,28 @@
 <template>
   <view class="container">
     <ModuleTitle :title="recommendTheme.themeName" />
-    <view class="container-scroll">
+
+    <view class="container-scroll font-size-0 scroll-x whitescape-nowrap">
       <view
+        class="card-item bg-white inline-block rounded-20 mr-8"
         v-for="(item, index) in recommendTheme.recommendPostsList"
         :key="index"
+        @click="sendReply(item)"
       >
-        <view class="mk-card-item" @click="sendReply(item)">
+        <view class="m-4 relative">
-          <image class="card-img" :src="item.coverPhoto" mode="aspectFill" />
+          <image
+            class="card-img rounded-16 relative z-10"
+            :src="item.coverPhoto"
+            mode="aspectFill"
+          />
 
-          <view class="overlay-gradient">
+          <view class="shadow absolute rounded-16"></view>
-            <text class="overlay-text">{{ item.topic }}</text>
         </view>
+
+        <view
+          class="card-text color-171717 font-size-14 line-height-20 border-box"
+        >
+          {{ item.topic }}
         </view>
       </view>
     </view>

src/pages/index/components/module/RecommendPostsList/styles/index.scss

@@ -1,53 +1,27 @@
-.container {
-  width: 100%;
-}
-
 .container-scroll {
-  display: flex;
-  flex-direction: row;
-  overflow-x: auto;
   margin: 4px 0 6px;
 }
 
-.mk-card-item {
+.card-item {
-  flex-shrink: 0; /* 关键：防止 flex 布局压缩子元素宽度 */
+  width: 128px;
-  width: 142px;
+  height: 164px;
-  height: 126px;
+}
-  border-radius: 10px;
+
-  overflow: hidden;
+.card-img {
-  margin-right: 8px;
+  height: 120px;
-  position: relative;
+  width: 120px;
-
+}
-  .card-img {
+
-    width: 100%;
+.shadow {
-    height: 100%;
+  background-color: #e5e8ee;
-    display: block;
+  height: 96px;
-  }
+  width: 96px;
-
+  bottom: -4px;
-  /* 渐变背景层 */
+  left: 50%;
-  .overlay-gradient {
+  transform: translateX(-50%);
-    position: absolute;
+  z-index: 1;
-    bottom: 0;
+}
-    left: 0;
+
-    width: 100%;
+.card-text {
-    height: 50px; /* 渐变层高度，可调 */
+  padding: 4px 8px 8px;
-    background: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0.001) 0%,
-      rgba(0, 0, 0, 0.5) 100%
-    );
-    display: flex;
-    align-items: flex-end; /* 文字贴近底部 */
-    padding: 0 8px 6px; /* 内边距让文字与边缘保持距离 */
-    box-sizing: border-box;
-  }
-
-  /* 渐变层上的文字 */
-  .overlay-text {
-    color: #fff;
-    font-weight: 500;
-    font-size: $uni-font-size-sm;
-    text-align: left;
-    width: 100%;
-  }
 }

src/pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="container">
+  <view class="w-full h-screen bg-liner">
     <ChatMainList />
   </view>
 
@@ -61,10 +61,4 @@ onUnmounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.container {
-  width: 100vw;
-  height: 100vh;
-  background-color: $uni-bg-color;
-}
-</style>

src/pages/login/index.vue

@@ -29,15 +29,25 @@
       >
         微信一键登录
       </button>
+
       <button
-        v-if="isAgree"
+        v-if="isAgree && !appStore.tokenExpired"
         class="login-btn"
-        open-type="getPhoneNumber"
         type="primary"
+        open-type="getPhoneNumber"
         @getphonenumber="getPhoneNumber"
       >
         微信一键登录
       </button>
+
+      <button
+        v-if="isAgree && appStore.tokenExpired"
+        class="login-btn"
+        type="primary"
+        @click="handleLogin"
+      >
+        微信一键登录
+      </button>
     </view>
 
     <!-- 协议勾选 -->
@@ -79,6 +89,8 @@ import CheckBox from "@/components/CheckBox/index.vue";
 import AgreePopup from "./components/AgreePopup/index.vue";
 import { zniconsMap } from "@/static/fonts/znicons.js";
 import { getCurrentConfig } from "@/constant/base";
+import { useAppStore } from "@/store";
+const appStore = useAppStore();
 
 const isAgree = ref(false);
 const visible = ref(false);
@@ -113,6 +125,20 @@ const getPhoneNumber = (e) => {
     .catch(() => {});
 };
 
+const handleLogin = () => {
+  console.log("handleLogin");
+  onLogin()
+    .then(() => {
+      uni.showToast({
+        title: "登录成功",
+        icon: "success",
+      });
+      appStore.setTokenExpired(false);
+      goBack();
+    })
+    .catch(() => {});
+};
+
 // 处理同意协议点击事件
 const handleAgreeClick = (type) => {
   visible.value = true;

src/request/base/request.js

@@ -60,6 +60,7 @@ function request(url, args = {}, method = "POST", customConfig = {}) {
           uni.setStorageSync("token", "");
           const appStore = useAppStore();
           appStore.setHasToken(false);
+          appStore.setTokenExpired(true);
           uni.$emit(NOTICE_EVENT_LOGOUT);
           goLogin();
         }

src/static/scss/background.scss

@@ -0,0 +1,23 @@
+// 背景颜色
+.bg-white {
+  background-color: #fff;
+}
+
+.bg-gray {
+  background-color: #f5f5f5;
+}
+
+.bg-17294E {
+  background-color: #17294e;
+}
+
+.bg-liner {
+  background: linear-gradient(205deg, #8ae3fc 0%, rgba(138, 227, 252, 0) 20%),
+    linear-gradient(155deg, #fef7e1 0%, rgba(254, 247, 225, 0) 20%),
+    radial-gradient(
+      48% 48% at 61% 118%,
+      #ffffff 0%,
+      rgba(255, 255, 255, 0) 100%
+    ),
+    linear-gradient(180deg, rgba(238, 248, 255, 0) 0%, #eef8ff 50%), #eef8ff;
+}

src/static/scss/border.scss

@@ -0,0 +1,4 @@
+// 边框
+.border {
+  border: 1px solid #000;
+}

src/static/scss/colors.scss

@@ -0,0 +1,49 @@
+// 字体颜色
+
+.color-white {
+  color: #fff;
+}
+
+.color-00 {
+  color: #000;
+}
+
+.color-33 {
+  color: #333;
+}
+
+.color-66 {
+  color: #666;
+}
+
+.color-99 {
+  color: #999;
+}
+
+.color-525866 {
+  color: #525866;
+}
+
+.color-171717 {
+  color: #171717;
+}
+
+.color-99A0AE {
+  color: #99a0ae;
+}
+
+.color-FF3D60 {
+  color: #ff3d60;
+}
+
+.color-2D91FF {
+  color: #2d91ff;
+}
+
+.color-43669A {
+  color: #43669a;
+}
+
+.color-21B466 {
+  color: #21b466;
+}

src/static/scss/display.scss

@@ -0,0 +1,16 @@
+// 显示类型
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}

src/static/scss/ellipsis.scss

@@ -0,0 +1,13 @@
+// 省略号
+.ellipsis-1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellipsis-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}

src/static/scss/flex.scss

@@ -0,0 +1,36 @@
+// 弹性布局
+.flex {
+  display: flex;
+}
+
+.flex-items-center {
+  align-items: center;
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-justify-between {
+  justify-content: space-between;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-full {
+  flex: 1;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0;
+}

src/static/scss/font-family.scss

@@ -0,0 +1,8 @@
+// 字体-family
+.font-family-sans-serif {
+  font-family: sans-serif;
+}
+
+.font-family-misans-vf {
+  font-family: MiSans VF, MiSans VF;
+}

src/static/scss/font-size.scss

@@ -0,0 +1,28 @@
+// 字体-size
+.font-size-0 {
+  font-size: 0px;
+}
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.font-size-16 {
+  font-size: 16px;
+}
+
+.font-size-17 {
+  font-size: 17px;
+}
+
+.font-size-18 {
+  font-size: 18px;
+}
+
+.font-size-20 {
+  font-size: 20px;
+}

src/static/scss/font-weight.scss

@@ -0,0 +1,20 @@
+// 字体-weight
+.font-bold {
+  font-weight: bold;
+}
+
+.font-400 {
+  font-weight: 400;
+}
+
+.font-500 {
+  font-weight: 500;
+}
+
+.font-600 {
+  font-weight: 600;
+}
+
+.font-700 {
+  font-weight: 700;
+}

src/static/scss/height.scss

@@ -0,0 +1,3 @@
+.h-screen {
+  height: 100vh;
+}

src/static/scss/index.scss

@@ -0,0 +1,21 @@
+@import "./background.scss";
+@import "./border.scss";
+@import "./colors.scss";
+@import "./display.scss";
+@import "./flex.scss";
+@import "./font-weight.scss";
+@import "./height.scss";
+@import "./line-height.scss";
+@import "./margin.scss";
+@import "./padding.scss";
+@import "./font-size.scss";
+@import "./font-family.scss";
+@import "./text-align.scss";
+@import "./rounded.scss";
+@import "./ellipsis.scss";
+@import "./position.scss";
+@import "./scroll.scss";
+@import "./overflow.scss";
+@import "./width.scss";
+@import "./z-index.scss";
+@import "./white-space.scss";

src/static/scss/line-height.scss

@@ -0,0 +1,20 @@
+// 行高
+.line-height-17 {
+  line-height: 17px;
+}
+
+.line-height-18 {
+  line-height: 18px;
+}
+
+.line-height-20 {
+  line-height: 20px;
+}
+
+.line-height-21 {
+  line-height: 21px;
+}
+
+.line-height-22 {
+  line-height: 22px;
+}

src/static/scss/margin.scss

@@ -0,0 +1,16 @@
+// 外边距-bottom
+.m-4 {
+  margin: 4px;
+}
+
+.mr-8 {
+  margin-right: 8px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.mb-12 {
+  margin-bottom: 12px;
+}

src/static/scss/overflow.scss

@@ -0,0 +1,4 @@
+// 溢出
+.overflow-hidden {
+  overflow: hidden;
+}

src/static/scss/padding.scss

@@ -0,0 +1,52 @@
+// 内边距
+.p-8 {
+  padding: 8px;
+}
+
+.p-12 {
+  padding: 12px;
+}
+
+.pt-12 {
+  padding-top: 12px;
+}
+
+.pr-12 {
+  padding-right: 12px;
+}
+
+.pb-12 {
+  padding-bottom: 12px;
+}
+
+.pl-12 {
+  padding-left: 12px;
+}
+
+.pl-16 {
+  padding-left: 16px;
+}
+
+.pr-16 {
+  padding-right: 16px;
+}
+
+.p-20 {
+  padding: 20px;
+}
+
+.pt-20 {
+  padding-top: 20px;
+}
+
+.pl-20 {
+  padding-left: 20px;
+}
+
+.pr-20 {
+  padding-right: 20px;
+}
+
+.pb-20 {
+  padding-bottom: 20px;
+}

src/static/scss/position.scss

@@ -0,0 +1,8 @@
+// 定位
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}

src/static/scss/rounded.scss

@@ -0,0 +1,24 @@
+// 圆角
+.rounded-4 {
+  border-radius: 4px;
+}
+
+.rounded-8 {
+  border-radius: 8px;
+}
+
+.rounded-12 {
+  border-radius: 12px;
+}
+
+.rounded-16 {
+  border-radius: 16px;
+}
+
+.rounded-20 {
+  border-radius: 20px;
+}
+
+.rounded-full {
+  border-radius: 50%;
+}

src/static/scss/scroll.scss

@@ -0,0 +1,8 @@
+// 滚动条
+.scroll-y {
+  overflow-y: auto;
+}
+
+.scroll-x {
+  overflow-x: auto;
+}

src/static/scss/text-align.scss

@@ -0,0 +1,12 @@
+// 文本-align
+.text-center {
+  text-align: center;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}

src/static/scss/white-space.scss

@@ -0,0 +1,3 @@
+.whitesspace-nowrap {
+  white-space: nowrap;
+}

src/static/scss/width.scss

@@ -0,0 +1,7 @@
+.w-full {
+  width: 100%;
+}
+
+.w-50 {
+  width: 50%;
+}

src/static/scss/z-index.scss

@@ -0,0 +1,15 @@
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}

src/store/modules/app.js

@@ -6,6 +6,7 @@ export const useAppStore = defineStore("app", {
       title: "",
       sceneId: "",
       hasToken: false,
+      tokenExpired: false,
     };
   },
   getters: {},
@@ -17,8 +18,11 @@ export const useAppStore = defineStore("app", {
     setSceneId(data) {
       this.sceneId = data;
     },
-    setHasToken(data) {
+    setHasToken(status) {
-      this.hasToken = data;
+      this.hasToken = status;
+    },
+    setTokenExpired(status) {
+      this.tokenExpired = status;
     },
   },
 

src/utils/share.js

@@ -0,0 +1,15 @@
+export default {
+  install(app) {
+    app.mixin({
+      onLoad() {
+        const page = getCurrentPages().pop();
+        if (page) {
+          uni.showShareMenu({
+            withShareTicket: true,
+            menus: ["shareAppMessage", "shareTimeline"],
+          });
+        }
+      },
+    });
+  },
+};