模版管理和设置 首页

src/configs/customer.ts

-export type CustomerRate = 'FREE'|'VIP'|'EN'
+export type CustomerRate = 'FREE'|'VIP'|'EN'|'TME'
 export interface CustomerTheme{
     name:CustomerRate,
     bg:string,
@@ -9,7 +9,8 @@ export interface CustomerTheme{
 export const FREE_USER_THEME:CustomerTheme = {name:'FREE',bg:'linear-gradient(270deg, #94A3C0 0%, #99A3B8 100%)',color:'#94a3c0', desc:'免费版·个人'}
 export const VIP_USER_THEME:CustomerTheme = {name:'VIP',bg:'linear-gradient(270deg, #4165E2 0%, #5276F5 100%)',color:'#dd9b38', desc:'会员版·个人'}
 export const ENT_USER_THEME:CustomerTheme = {name:'EN',bg:'linear-gradient(270deg, #DD9B38 0%, #E6B351 100%);',color:'#252860', desc:'会员版·企业'}
+export const TME_USER_THEME:CustomerTheme = {name:'TME',bg:'linear-gradient(270deg, #DD9B38 0%, #E6B351 100%);',color:'#252860', desc:'会员版·模版'}
 
-export const CustomerThemeConfig:CustomerTheme[] = [FREE_USER_THEME,VIP_USER_THEME,ENT_USER_THEME] 
+export const CustomerThemeConfig:CustomerTheme[] = [FREE_USER_THEME,VIP_USER_THEME,ENT_USER_THEME,TME_USER_THEME] 
 
 export const USER_DEFAULT_HEADER = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713839840000_239.png'
\ No newline at end of file

src/router/router.ts

@@ -195,6 +195,22 @@ const routes: RouteRecordRaw[] = [
       },
     ]
   },
+  {
+    path: '/m',
+    component: () => import('@/views/TemplateCenter/Layout.vue'),
+    meta:{
+      title:'模版管理与设置中心'
+    },
+    children:[
+      {
+        path: '/m',
+        component: () => import('@/views/UserCenter/Index.vue'),
+        meta:{
+          title:'字体管理'
+        }
+      },
+    ]
+  },
   {
     path: '/:catchAll(.*)*',
     component: () => import('@/views/ErrorNotFound.vue'),

src/store/menu.ts

@@ -20,7 +20,8 @@ export interface MenuState {
 const menus:{menu:Menu,owner:MenuOwner}[] = [
     {menu:{name:'账号一览',icon:'IconEarth',url:'/u'},owner:'*'},
     {menu:{name:'订单/发票',icon:'IconCurrency',url:'/u/order'},owner:'*'},
-    {menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'*'}
+    {menu:{name:'账户设置',icon:'IconProtect',url:'/u/setting'},owner:'*'},
+    {menu:{name:'字体设置',icon:'IconAddText',url:'/m'},owner:'M'}
 ]
 
 export const useMenuStore = defineStore('menu', {
@@ -37,7 +38,7 @@ export const useMenuStore = defineStore('menu', {
             if (!state.userMenu || state.userMenu.length==0) {
                 const userStore= useUserStore()
                 const userInfo = userStore.getUser
-                let userPermissions:MenuOwner[] = ['*','F']
+                let userPermissions:MenuOwner[] = ['M']
                 
                 if(userInfo.it){
                     userPermissions.push('E')
@@ -48,7 +49,9 @@ export const useMenuStore = defineStore('menu', {
                 if(userInfo.iv){
                     userPermissions.push('V')
                 }
-                
+                if(userInfo.im){
+                    userPermissions.push('M')
+                }
                 const findFreeMenu = menus.filter(x=>userPermissions.includes(x.owner))
                 if(findFreeMenu){
                     state.userMenu = findFreeMenu.map(x=>x.menu)

src/store/user.ts

@@ -39,7 +39,7 @@ export const useUserStore = defineStore('user', {
             let rate:CustomerRate = 'FREE'
             if(state.userInfo.it) rate = 'EN'
             else if(state.userInfo.iv) rate = 'VIP'
-
+            else if(state.userInfo.im) rate = 'TME'
             const theme = CustomerThemeConfig.find(x=>x.name==rate)
             return theme
         },
@@ -58,6 +58,7 @@ export const useUserStore = defineStore('user', {
                     d.isTemplate = d.IsEditTripTemplate
                     d.ia = 0
                     d.it = true
+                    d.im = true
                     this.userInfo = d
                     
                     return true

src/views/TemplateCenter/Index.vue

+<template>
+    <div class="user-header rounded row items-center" :style="{ background: userTheme?.bg }">
+      <el-avatar :size="64" :src="userInfo.photo && userInfo.photo.includes('http') ? userInfo.photo:USER_DEFAULT_HEADER" shape="square" :style="{ BackgroundColor: userTheme?.color }" style="font-size: 36px;font-weight: bold;"></el-avatar>
+      <div class="q-ml-lg text-white col">
+        <div class="" style="font-size: 20px;">{{ userInfo.nickname }}</div>
+        <div class="q-mt-sm text-info">个人账号ID：{{ userInfo.cardno??'8027970449819221090' }}</div>
+      </div>
+      <div class="text-white">{{ userTheme?.desc }}</div>
+      <div :style="{'background':vipTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为VIP</div>
+      <!-- <div :style="{'background':vipTheme.color}" v-if="1==2" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">续费VIP</div> -->
+      <div :style="{'background':enTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为企业</div>
+    </div>
+  
+    <div class="q-mt-xl">
+      <div class="user-label text-grey-8">我的权益</div>
+      <div class="row">
+        <el-card class="user-card q-mr-lg" shadow="never">
+          <div class="row items-center">
+            <div class="col">
+              <span class="title">行程设计</span>
+              <div class="text-small text-info q-mt-sm">会员可以无限制创建行程</div>
+            </div>
+            <el-button type="info" class="normal">开通会员</el-button>
+          </div>
+          <div style="font-size: 14px;" class="row items-center q-mt-lg">
+            <span class="text-grey-8">当前已创建：</span>
+            <span class="text-dark q-ml-md cursor-pointer">1个行程</span>
+            <IconRight :size="20"></IconRight>
+            <div class="col"></div>
+            <span class="text-grey-8">还可创建：</span>
+            <span class="text-dark q-ml-md">0个行程</span>
+          </div>
+        </el-card>
+        <el-card class="user-card" shadow="never">
+          <div class="row items-center">
+            <div class="col">
+              <span class="title">授权模板</span>
+              <div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
+            </div>
+            <!-- <el-button type="info" class="normal">开通会员</el-button> -->
+          </div>
+          <div style="font-size: 14px;" class="row items-center q-mt-lg">
+            <span class="text-grey-8">当前模板可用范围：</span>
+            <span class="text-dark q-ml-md cursor-pointer">免费模板</span>
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <div class="q-mt-xl">
+      <div class="user-label text-grey-8">更多权益</div>
+      <div class="row">
+        <el-card class="user-card" shadow="never">
+          <div class="row items-center">
+            <div class="col">
+              <span class="title">存储空间</span>
+              <div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
+            </div>
+            <el-button type="info" class="normal">会员尊享10G空间</el-button>
+          </div>
+          <div style="font-size: 14px;" class="q-mt-xl">
+            <el-progress :percentage="50" />
+          </div>
+        </el-card>
+        <el-card class="user-card q-mx-lg" shadow="never">
+          <div class="row items-center">
+            <div class="col">
+              <span class="title">旅行资料库</span>
+              <div class="text-small text-info q-mt-sm">会员可以使用平台全部旅行资料库</div>
+            </div>
+          </div>
+          <div style="font-size: 14px;" class="q-mt-xl">
+            <div style="font-size: 14px;" class="row items-center q-mt-lg">
+              <span class="text-grey-8">当前资料库数据：</span>
+              <span class="text-dark q-ml-md cursor-pointer">10W+</span>
+            </div>
+          </div>
+        </el-card>
+        <el-card class="user-card col column flex-center cursor-pointer" shadow="never">
+          <div class="row items-center flex-center">
+            <div class="text-info" style="font-size: 13px;">查看更多会员特权 </div>
+            <IconRight :size="16" class="q-ml-md"></IconRight>
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <div class="q-mt-xl">
+      <div class="user-label text-weight-bold" style="font-size: 16px;">快速管理</div>
+      <div class="q-mt-lg row">
+        <el-card class="enter-card col" shadow="never">
+          <div class="title">快速开票</div>
+          <div class="text-small q-mt-md q-mb-lg text-grey-8">开票入口及开票进度查询</div>
+        </el-card>
+        <el-card class="enter-card col q-mx-lg" shadow="never">
+          <div class="title">团队共享协作</div>
+          <div class="text-small q-mt-md q-mb-lg text-grey-8">与团队共享内容，文件规范存放，多人协同编辑</div>
+        </el-card>
+        <el-card class="enter-card col q-mx-lg" shadow="never">
+          <div class="title">团队成员管理</div>
+          <div class="text-small q-mt-md q-mb-lg text-grey-8">邀请团队成员，团队私有模板管理</div>
+        </el-card>
+        <el-card class="enter-card col q-mr-lg" shadow="never">
+          <div class="title">常见问题</div>
+          <div class="text-small q-mt-md q-mb-lg text-grey-8">帮助中心：查看常见问题及使用指南</div>
+        </el-card>
+      </div>
+    </div>
+  
+  </template>
+  
+  <script lang="ts" setup>
+  import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
+  import { useUserStore } from "@/store";
+  import { storeToRefs } from "pinia";
+  import { ref } from "vue";
+  import {USER_DEFAULT_HEADER} from '@/configs/customer'
+  
+  const useUser = useUserStore()
+  const { userInfo } = storeToRefs(useUser)
+  const userTheme = useUser.getUserTheme
+  
+  const vipTheme = VIP_USER_THEME
+  const enTheme = ENT_USER_THEME
+  
+  </script>
+  
+  <style scoped>
+  .user-header {
+    padding: 16px 24px;
+    position: relative;
+    font-size: 14px;
+    color:#FFF;
+    z-index: 1;
+    width:100%;
+    overflow: hidden;
+  }
+  
+  .user-header::after {
+    position: absolute;
+    top: 0;
+    right: -48px;
+    bottom: -12px;
+    z-index: -1;
+    width: 100%;
+    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
+    content: "";
+    transform: scale(2);
+    transform-origin: right center;
+  }
+  .user-label{
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+  .user-card {
+    width: 33%;
+    min-height: 112px;
+  }
+  .user-card .title,
+  .enter-card .title{
+    font-size: 15px;
+    font-weight: bold;
+    color: #000;
+  }
+  </style>
\ No newline at end of file

src/views/TemplateCenter/Layout.vue

+<template>
+    <div class="window-height column">
+        <div class="user-center-header row items-center">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
+                style="height: 24px" />
+            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
+                模版管理与设置
+            </div>
+            <div class="col"></div>
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
+                style="height: 33px" />
+            <div class="primary-link-button q-ml-lg">创建设计</div>
+            <UserCard :size="33"></UserCard>
+        </div>
+        <div class="col row">
+            <div class="user-center-menu column ">
+                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
+                    <el-menu-item :index="i" v-for="(x,i) in menus" :key="i" :route="x.url">
+                        <component :is="x.icon" style="font-size: 20px;"></component>
+                        <span class="q-ml-lg">{{ x.name }}</span>
+                    </el-menu-item>
+                </el-menu>
+                <el-button class="full-width pingfangr text-weight-bolder" @click="forwardSpace" style="font-size: 14px !important;" icon="arrow-left">返回工作台</el-button>
+            </div>
+            <el-scrollbar class="col full-height user-center-body" wrap-style="overflow-x:unset;">
+                <router-view />
+            </el-scrollbar>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import UserCard from "@/components/User/UserCard.vue";
+import { useMenuStore } from "@/store";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+const useMenu = useMenuStore();
+const menus = ref(useMenu.getUserMenu);
+const activeIndex = ref(0)
+
+const forwardSpace = () => router.push('/space')
+
+watch(() => router.currentRoute.value.path, (toPath) => {
+    menus.value = useMenu.getUserMenu
+    console.log(menus.value,'====')
+    if(!menus.value) return
+    activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
+},{immediate: true,deep: true})
+</script>
+
+<style scoped>
+.user-center-header {
+    padding: 0 40px 0 28px;
+    border-bottom: 1px solid #efefef;
+    height: 56px;
+    color: #000;
+}
+
+.user-center-menu {
+    width: 232px;
+    padding: 20px 0 20px 16px;
+}
+
+.user-center-body {
+    padding: 20px 40px 40px 40px;
+}
+</style>