UI优化

src/pages/be-vip.vue

@@ -3,12 +3,15 @@ import { ref } from "vue";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
+import SModal from "@/components/SModal.vue";
+import Signin from "@/components/Signin.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, config } = storeToRefs(store);
 
 const selectedVIP = ref(0);
+const showModal = ref(false);
 
 const chooseVip = (index) => {
   selectedVIP.value = index;
@@ -16,10 +19,8 @@ const chooseVip = (index) => {
 
 const onPay = () => {
   if (!user.value.id) {
-    return uni.showToast({
-      title: "请先登录",
-      icon: "none",
-    });
+    showModal.value = true;
+  } else {
   }
 };
 </script>
@@ -29,7 +30,7 @@ const onPay = () => {
     <view v-if="user.id" class="header">
       <view>
         <Avatar :src="user.avatar" :size="35" :border="true" />
-        <text>{{ user.nickName }}</text>
+        <text class="truncate">{{ user.nickName }}</text>
       </view>
       <text>5月5号到期</text>
     </view>
@@ -76,6 +77,9 @@ const onPay = () => {
         </view>
       </view>
       <SButton :onClick="onPay">支付</SButton>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <Signin :onClose="() => (showModal = false)" />
+      </SModal>
     </view>
   </Container>
 </template>
@@ -97,6 +101,8 @@ const onPay = () => {
 }
 .header > view > text:last-child {
   margin-left: 10px;
+  width: 120px;
+  text-align: left;
 }
 .header > text:nth-child(2) {
   color: #fed847;