修改文案与颜色

src/components/VipPurchaseModal/index.tsx

@@ -9,7 +9,7 @@ import {
   getOrderDetail
 } from '@/api/payment';
 import { useUserStore } from '@/store/modules/users';
-import { getHttpOrigin } from '@/helpers/utils';
+import { getHttpOrigin } from '/src/helpers/utils';
 
 // API返回的套餐类型
 interface VipPackageApiItem {
@@ -169,7 +169,7 @@ export default defineComponent({
           if (data && data.status === 'PAID') {
             stopPolling();
             window.$message.success('支付成功');
-            handleCancel()
+            handleCancel();
             await userStore.getInfo();
             emit('success');
             emit('close');
@@ -245,7 +245,7 @@ export default defineComponent({
 
           // getHttpOrigin() +
           qrCodeUrl.value =
-            'https://test.kt.colexiu.com/classroom-app/#/payDefine?' + params;
+            getHttpOrigin() + '/classroom-app/#/payDefine?' + params;
           console.log(qrCodeUrl.value);
           showQrCode.value = true;
           console.log(qrCodeUrl.value, 'value');
@@ -267,14 +267,25 @@ export default defineComponent({
       stopPolling();
     });
 
+    // 计算会员是否过期
+    const membershipEndTime = userStore.getUserInfo?.membershipEndTime;
+    const isVipExpired = computed(() => {
+      return !membershipEndTime || new Date(membershipEndTime) < new Date();
+    });
+
+    // 子标题文案
+    const subtitleText = computed(() => {
+      return isVipExpired.value
+        ? '您的会员已过期，请续费后继续使用'
+        : '您的会员即将过期，续费后可继续使用';
+    });
+
     return () => (
       <NSpin show={pageLoading.value} class={styles.spinWrap}>
         <div class={styles.vipPurchaseModal}>
           {!showQrCode.value ? (
             <div>
-              <div class={styles.subtitle}>
-                您的会员已过期，请续费后继续使用
-              </div>
+              <div class={styles.subtitle}>{subtitleText.value}</div>
 
               <div class={styles.packageList}>
                 {vipPackages.value.map((pkg: VipPackage) => (
@@ -284,7 +295,8 @@ export default defineComponent({
                       styles.packageItem,
                       selectedPackageId.value === pkg.id ? styles.selected : ''
                     ]}
-                    onClick={() => (selectedPackageId.value = pkg.id)}>
+                    onClick={() => (selectedPackageId.value = pkg.id)}
+                  >
                     <div class={styles.packageName}>{pkg.name}</div>
                     <div class={styles.freeText}>{pkg.freeText || ''}</div>
                     <div class={styles.packagePrice}>
@@ -307,7 +319,8 @@ export default defineComponent({
                   type="primary"
                   loading={loading.value}
                   disabled={loading.value || hasClicked.value}
-                  onClick={handlePurchase}>
+                  onClick={handlePurchase}
+                >
                   续费 ¥{currentPackage.value?.price}
                 </NButton>
               </div>
@@ -319,7 +332,7 @@ export default defineComponent({
                 {qrCodeUrl.value && (
                   <TheQrCode text={qrCodeUrl.value} size={200} />
                 )}
-                <div class={styles.payTip}>请扫描二维码完成支付</div>
+                <div class={styles.payTip}>请使用微信扫描二维码完成支付</div>
                 <div class={styles.orderInfo}>订单号：{orderNo.value}</div>
               </div>
 

src/components/layout/index.module.less

@@ -416,6 +416,15 @@
     color: #333333;
   }
 
+  .vipHighlight {
+    .smallTitle {
+      color: #EA4132;
+    }
+    .smallIcon {
+      color: #EA4132;
+    }
+  }
+
   .logoutInfo {
     margin-top: 16px;
   }

src/components/layout/layoutTop.tsx

@@ -197,7 +197,8 @@ export default defineComponent({
           <NImage
             src={schoolIcon}
             class={styles.schoolIcon}
-            previewDisabled></NImage>
+            previewDisabled
+          ></NImage>
           <p>
             {(info.value?.schoolInfos && info.value?.schoolInfos[0].name) || ''}
           </p>
@@ -221,7 +222,8 @@ export default defineComponent({
                     // eventGlobal.emit('teacher-guideInfo', route.name);
 
                     guideSectionRef.value?.onToggle();
-                  }}>
+                  }}
+                >
                   <NImage src={gnydIcon} previewDisabled></NImage>
                 </div>
               ),
@@ -260,7 +262,8 @@ export default defineComponent({
                   }}
                 </NTooltip>
               )
-            }}>
+            }}
+          >
             <ClassModal
               onConfirm={() => {
                 classRecordStatus.value = false;
@@ -293,14 +296,16 @@ export default defineComponent({
                       noReadCount.value > 0 ? '' : styles.messageBadgeNo
                     ]}
                     {...{ id: 'home-3' }}
-                    color={'#FF1036'}>
+                    color={'#FF1036'}
+                  >
                     <NImage
                       class={[
                         styles.messageIcon,
                         noReadCount.value > 0 ? styles.animation : ''
                       ]}
                       preview-disabled
-                      src={messageIcon}></NImage>
+                      src={messageIcon}
+                    ></NImage>
                   </NBadge>
                 ),
                 default: '聊天'
@@ -325,28 +330,31 @@ export default defineComponent({
                   <NImage
                     preview-disabled
                     class={styles.teacherIcon}
-                    src={
-                      info.value.avatar ? info.value.avatar : teacherIcon
-                    }></NImage>
+                    src={info.value.avatar ? info.value.avatar : teacherIcon}
+                  ></NImage>
                   <NIcon
                     class={
                       showHeadFlag.value ? styles.rotueLeft : styles.rotueRight
-                    }>
+                    }
+                  >
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                       <path
                         d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
-                        fill="currentColor"></path>
+                        fill="currentColor"
+                      ></path>
                     </svg>
                   </NIcon>
                 </div>
               )
-            }}>
+            }}
+          >
             <div class={styles.propWrap}>
               <div class={styles.teacherInfo}>
                 <NImage
                   class={styles.teacherIcon}
                   src={info.value.avatar ? info.value.avatar : teacherIcon}
-                  previewDisabled></NImage>
+                  previewDisabled
+                ></NImage>
                 <div class={styles.userInfos}>
                   <div class={styles.nameWrap}>
                     <NTooltip class={styles.nameTool}>
@@ -376,11 +384,13 @@ export default defineComponent({
               <div class={styles.propWrapList}>
                 <div
                   class={styles.propWrapItem}
-                  onClick={() => oncheckEditStatus(gotoPerson)}>
+                  onClick={() => oncheckEditStatus(gotoPerson)}
+                >
                   <NImage
                     class={styles.smallIcon}
                     src={personIcon}
-                    previewDisabled></NImage>
+                    previewDisabled
+                  ></NImage>
                   <p class={styles.smallTitle}>个人信息</p>
                 </div>
                 {info.value.isSuperAdmin ||
@@ -389,11 +399,13 @@ export default defineComponent({
                     class={styles.propWrapItem}
                     onClick={() => {
                       oncheckEditStatus(gotoSchool);
-                    }}>
+                    }}
+                  >
                     <NImage
                       class={styles.smallIcon}
                       src={schoolDot}
-                      previewDisabled></NImage>
+                      previewDisabled
+                    ></NImage>
                     <p class={styles.smallTitle}>学校信息</p>
                   </div>
                 ) : null}
@@ -402,29 +414,37 @@ export default defineComponent({
                   <NImage
                     class={styles.smallIcon}
                     src={clockIcon}
-                    previewDisabled></NImage>
+                    previewDisabled
+                  ></NImage>
                   <p class={styles.smallTitle}>修改密码</p>
                 </div>
 
                 <div
                   class={styles.propWrapItem}
-                  onClick={() => oncheckEditStatus(aboutUs)}>
+                  onClick={() => oncheckEditStatus(aboutUs)}
+                >
                   <NImage
                     class={styles.smallIcon}
                     src={iconAboutus}
-                    previewDisabled></NImage>
+                    previewDisabled
+                  ></NImage>
                   <p class={styles.smallTitle}>关于我们</p>
                 </div>
-                <div class={styles.propWrapItem} onClick={() => onOpenVip()}>
+                <div
+                  class={[styles.propWrapItem, styles.vipHighlight]}
+                  onClick={() => onOpenVip()}
+                >
                   <svg
                     class={styles.smallIcon}
                     style={{ marginTop: '4px' }}
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
-                    viewBox="0 0 24 24">
+                    viewBox="0 0 24 24"
+                  >
                     <path
                       d="M18.5 11.5c.92 0 1.75.26 2.49.69V5c0-1.1-.89-2-1.99-2H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h8.55c-.02-.17-.05-.33-.05-.5c0-2.76 2.24-5 5-5zm-5.61-1.45c-.56.28-1.23.28-1.79 0l-5.61-2.8a.893.893 0 0 1-.49-.8c0-.66.7-1.1 1.29-.8L12 8.5l5.71-2.85a.89.89 0 0 1 1.29.8c0 .34-.19.65-.49.8l-5.62 2.8zM18.5 13c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5zm2 3.5c0 .28-.22.5-.5.5h-3c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h3c.28 0 .5.22.5.5z"
-                      fill="currentColor"></path>
+                      fill="currentColor"
+                    ></path>
                   </svg>
                   <p class={styles.smallTitle}>会员续费</p>
                 </div>
@@ -437,12 +457,14 @@ export default defineComponent({
                   // .then(() => {
                   //   window.location.reload();
                   // });
-                }}>
+                }}
+              >
                 <div class={styles.propWrapItem}>
                   <NImage
                     class={styles.smallIcon}
                     src={closeIcon}
-                    previewDisabled></NImage>
+                    previewDisabled
+                  ></NImage>
                   <p class={styles.smallTitle}>退出登录</p>
                 </div>
               </div>
@@ -456,7 +478,8 @@ export default defineComponent({
           v-model:show={showWord.value}
           preset="dialog"
           showIcon={false}
-          title="修改密码">
+          title="修改密码"
+        >
           <ForgotPassword
             phone={info.value.phone}
             onClose={() => {
@@ -471,7 +494,8 @@ export default defineComponent({
           showIcon={false}
           class={showImGroupLoading.value ? styles.hideModal : ''}
           {...{ id: 'imGroupDiv' }}
-          displayDirective="show">
+          displayDirective="show"
+        >
           <ImGroup />
         </NModal>
 
@@ -480,12 +504,12 @@ export default defineComponent({
           class={['modalTitle', 'background', styles.suggestWrap]}
           v-model:show={showSuggestionViseble.value}
           display-directive="show"
-          showIcon={false}>
+          showIcon={false}
+        >
           <SuggestionOption
             ref={suggestionOptionRef}
-            onClose={() =>
-              (showSuggestionViseble.value = false)
-            }></SuggestionOption>
+            onClose={() => (showSuggestionViseble.value = false)}
+          ></SuggestionOption>
         </NModal>
 
         {/* 操作手册 */}