no message

src/assets/styles/common.css

@@ -75,6 +75,9 @@ page {
     line-height: 1.375rem;
     letter-spacing: 0.00714em;
 }
+.text-success{
+	color: #20af6e !important;
+}
 /* ::-webkit-scrollbar {
     display: none;
     width: 0 !important;

src/components/User/UserCard.vue

 <template>
   <div class="items-center row">
+    <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
+                style="height: 33px" @click="forwardProduct" class="cusor-pointer"/>
+    <div class="primary-link-button q-ml-lg cusor-pointer no-select">创建设计</div>
     <el-dropdown trigger="click">
       <el-avatar
         :size="size"
@@ -108,10 +111,10 @@ import { openNewBlank } from "@/utils/common";
 const props = defineProps({
     size: {
       type: Number,
-      default: 40,
+      default: 33,
     },
 });
-
+const forwardProduct = () => router.push('/p/show')
 const router = useRouter()
 const useUser = useUserStore();
 const { userInfo } = storeToRefs(useUser);

src/configs/customer.ts

@@ -5,6 +5,12 @@ export interface CustomerTheme{
     color:string,
     desc:string
 }
+export interface MemberRights{
+    name:string,
+    value:string,
+    sub?:string,
+    range:('F'|'P'|'E')[]
+}
 
 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:'会员版·个人'}
@@ -13,4 +19,32 @@ export const TME_USER_THEME:CustomerTheme = {name:'TME',bg:'linear-gradient(270d
 
 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
+export const USER_DEFAULT_HEADER = 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713839840000_239.png'
+
+const ALL_MEMBER_RIGHTS:MemberRights[]=[
+    {name:'创建行程数量',value:'1',sub:'(无法上传自有模板)',range:['F']},
+    {name:'云盘空间',value:'100MB',range:['F']},
+    {name:'POI图库',value:'10次',range:['F']},
+    {name:'PDF水印',value:'系统标识',range:['F']},
+    {name:'图片水印',value:'系统标识',range:['F']},
+    {name:'VIP模板',value:'no',range:['F']},
+    {name:'创建行程数量',value:'无限制',range:['E','P']},
+    {name:'云盘空间',value:'10GB',range:['P']},
+    {name:'企业共享空间',value:'500GB',range:['E']},
+    {name:'POI图库',value:'无限制',range:['E','P']},
+    {name:'PDF水印',value:'可去除',range:['E','P']},
+    {name:'图片水印',value:'可去除',range:['E','P']},
+    {name:'VIP模板',value:'yes',range:['E','P']},
+    {name:'历史版本记录',value:'yes',range:['E','P']},
+    {name:'POI资料卡',value:'yes',range:['E','P']},
+    {name:'行程快速构建工具',value:'yes',range:['E','P']},
+    {name:'地图插件',value:'yes',range:['E','P']},
+    {name:'自动报价工具',value:'yes',range:['E','P']},
+    {name:'私有模板管理',value:'yes',range:['E','P']},
+    {name:'文件找回',value:'yes',range:['E','P']},
+    {name:'内部共享行程',value:'yes',range:['E']}
+]
+
+export const FreeMemberRight = ALL_MEMBER_RIGHTS.filter(x=>x.range.includes('F'))
+export const PersonMemberRight = ALL_MEMBER_RIGHTS.filter(x=>x.range.includes('P'))
+export const EntMemberRight = ALL_MEMBER_RIGHTS.filter(x=>x.range.includes('E'))
\ No newline at end of file

src/router/router.ts

@@ -239,6 +239,13 @@ const routes: RouteRecordRaw[] = [
       },
     ]
   },
+  {
+    path: '/p/show',
+    component: () => import('@/views/Product/Show.vue'),
+    meta:{
+      title:'产品介绍'
+    }
+  },
   {
     path: '/:catchAll(.*)*',
     component: () => import('@/views/ErrorNotFound.vue'),

src/services/OrderService.ts

@@ -17,5 +17,15 @@ class OrderService{
         let msg = {orderid}
         return Api.Post("ppt_GetPPTOrderDetails",msg)
     }
+
+    static async CreateTempOrderPaymentAsync(parameters:any):Promise<HttpResponse>{
+        let msg = parameters
+        return Api.Post("ppt_SetPPTTemplateOrder",msg)
+    }
+
+    static async GetOrderPayStatusAsync(no:any):Promise<HttpResponse>{
+        let msg = {no}
+        return Api.Post("ppt_order_pay_status",msg)
+    }
 }
 export default OrderService;
\ No newline at end of file

src/store/menu.ts

@@ -41,7 +41,7 @@ export const useMenuStore = defineStore('menu', {
             if (!state.userMenu || state.userMenu.length==0) {
                 const userStore= useUserStore()
                 const userInfo = userStore.getUser
-                let userPermissions:MenuOwner[] = ['M']
+                let userPermissions:MenuOwner[] = ['F','*']
                 
                 if(userInfo.it){
                     userPermissions.push('E')
@@ -52,6 +52,9 @@ export const useMenuStore = defineStore('menu', {
                 if(userInfo.iv){
                     userPermissions.push('V')
                 }
+                if(userInfo.isTemplate){
+                    userPermissions.push('M')
+                }
                 const findFreeMenu = menus.filter(x=>userPermissions.includes(x.owner))
                 if(findFreeMenu){
                     state.userMenu = findFreeMenu.map(x=>x.menu)

src/views/Index.vue

@@ -140,7 +140,7 @@
               <template v-if="!userInfo.it">
                 <div class="row items-center">
                   <div class="text-info text-small col">未加入任何企业</div>
-                  <el-button type="primary" @click="redicetTo('/space/cp')" link icon="officeBuilding">立即创建企业</el-button>
+                  <el-button type="primary" @click="()=>orderVisible=true" link icon="officeBuilding">立即创建企业</el-button>
                 </div>
                 <el-divider />
                 <el-menu mode="vertical">
@@ -148,7 +148,7 @@
                     <el-icon><Plus /></el-icon>
                     <span>加入企业</span>
                   </el-menu-item>
-                  <el-menu-item index="2">
+                  <el-menu-item index="2"  v-if="userInfo.it && userInfo.ia">
                     <el-icon><Setting /></el-icon>
                     <span>设置</span>
                   </el-menu-item>
@@ -163,6 +163,7 @@
       </div>
     </div>
   </div>
+  <OrderReview v-if="orderVisible" :default-type="2" @close="()=>orderVisible=false"></OrderReview>
 </template>
 
 <script lang="ts" setup>
@@ -175,9 +176,11 @@ import { openNewBlank } from "@/utils/common";
 import { useSellTemplateStore } from "@/store";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
+import OrderReview from '@/views/components/Order/Review.vue'
 
 const { userInfo } = storeToRefs(useUserStore());
 const sellStore = useSellTemplateStore()
+const orderVisible = ref(false)
 const router = useRouter()
 const isWorkspace = ref(true) 
 isWorkspace.value = !router.currentRoute.value.path.includes('/space/cp')

src/views/Product/Show.vue

+<template>
+    <div class="product column">
+        <div class=" bg-info row items-center" style="padding:10px 24px;">
+            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
+                style="height: 24px" class="cusor-pointer" @click="forwardSpace" />
+            <div class="col"></div>
+            <!-- <div class="primary-link-button q-ml-lg cusor-pointer">创建设计</div> -->
+            <UserCard :size="33"></UserCard>
+        </div>
+        <div class="col full-width">
+            <el-scrollbar class="full-width full-height">
+                <div class="title text-center">全新Travel Design 一站式协同行程设计平台</div>
+                <div class="row flex-center">
+                    <div class="item">
+                        <div class="top-box">
+                            <div class="text-weight-bold" style="font-size: 1.25vw">免费版</div>
+                            <div class="tag default">免费试用1个月</div>
+                            <div class="text-weight-bolder text-dark" style="font-size: 2.39583vw;">
+                                <span>￥0</span>
+                                <span class="text-info text-small text-light q-ml-md">/人/年</span>
+                            </div>
+                            <div class="button">注册生效</div>
+                        </div>
+                        <div class="bottom-box">
+                            <div class="content-item" v-for="(x,i) in free" :key="i">
+                                <span>{{ x.name }}</span>
+                                <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
+                                <span v-else-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
+                                <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item dark">
+                        <div class="top-box" style="background: #3556F9;">
+                            <div class="text-weight-bold" style="font-size: 1.25vw">个人专业版</div>
+                            <div class="tag">可季度·半年·1年·2年</div>
+                            <div class="text-weight-bolder" style="font-size: 2.39583vw;">
+                                <span>￥49.9</span>
+                                <span class="text-small text-light q-ml-md">/月起</span>
+                            </div>
+                            <div class="button opcatiy" @click="openOrderView(1)">立即购买</div>
+                        </div>
+                        <div class="bottom-box">
+                            <div class="bottom-box">
+                                <div class="content-item" v-for="(x,i) in person" :key="i">
+                                    <span>{{ x.name }}</span>
+                                    <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
+                                    <span v-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
+                                    <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="item dark">
+                        <div class="top-box" style="background: #581BDA;">
+                            <div class="text-weight-bold" style="font-size: 1.25vw">企业/团队专业版</div>
+                            <div class="tag">1年起购</div>
+                            <div class="text-weight-bolder" style="font-size: 2.39583vw;">
+                                <span>￥2999</span>
+                                <span class="text-small text-light q-ml-md">/ 年起</span>
+                            </div>
+                            <div class="button opcatiy" @click="openOrderView(2)">立即购买</div>
+                        </div>
+                        <div class="bottom-box">
+                            <div class="bottom-box">
+                                <div class="content-item" v-for="(x,i) in ent" :key="i">
+                                    <span>{{ x.name }}</span>
+                                    <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
+                                    <span v-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
+                                    <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-scrollbar>
+        </div>
+        
+    </div>
+    <OrderReview v-if="orderVisible" :default-type="showType" @close="()=>orderVisible=false"></OrderReview>
+</template>
+
+<script lang="ts" setup>
+import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
+import OrderReview from '@/views/components/Order/Review.vue'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const free = FreeMemberRight
+const person = PersonMemberRight
+const ent = EntMemberRight
+const showType = ref(1)
+const orderVisible = ref(false)
+const router = useRouter()
+
+const openOrderView = (t:number)=>{
+    showType.value=t
+    orderVisible.value=true
+}
+const forwardSpace = ()=> router.push('/space')
+</script>
+
+<style scoped>
+.product {
+    width: 100vw;
+    height: 100vh;
+    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713929308000_541.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    
+}
+.product .title{
+    font-weight: 800;
+    font-size: 2.0833vw;
+    color: #000000;
+    margin-top: 5.20833vw;
+    line-height: 1;
+    margin-bottom:4.323vw;
+}
+.product .item{
+    width: 21.1979vw;
+    box-shadow: 0px 0px 1.09375vw 0px rgba(140,171,241,0.27);
+    border-radius: 8px;
+    margin-right: 3.64583vw;
+    background: linear-gradient(0deg, #FFFFFF, #F3F7FF);
+    margin-bottom: 50px;
+}
+.product .item.dark{
+    color:#FFF;
+    background: linear-gradient(0deg, #F8FAFF, #E6EEFF);
+    box-shadow: 0px 0px 1.09375vw 0px rgba(140,171,241,0.27);
+}
+.product .item .bottom-box{
+    padding: 1.71875vw;
+    /* padding-top: 0; */
+}
+.product .item .top-box{
+    background: #FFFFFF;
+    border-radius: 8px;
+    padding: 1.71875vw;
+    box-shadow: 0px 0px 1.09375vw 0px rgba(140,171,241,0.27);
+}
+.product .item *{
+    line-height: 1;
+}
+.product .item:last-child{
+    margin-right: 0;
+}
+.product .item .tag{
+    padding:0 0.78125vw;
+    height: 1.5625vw;
+    font-size: 0.7291vw;
+    line-height: 1.5625vw;
+    background: #8CABF145;
+    color:#FFF;
+    margin-top: 0.7291vw;
+    margin-bottom: 2.9166vw;
+    display: inline-block;
+    border-radius: 0px 8px 8px 8px;
+}
+.product .item .tag.default{
+    background: #f6f7f9;
+    color: #000000;
+}
+.product .item .button{
+    height: 2.0833vw;
+    line-height: 2.0833vw;
+    background: #f6f7f9;
+    border-radius: 8px;
+    border: 1px solid #f6f7f9;
+    font-weight: 400;
+    font-size: 0.729166vw;
+    color: grey;
+    margin-top: 2.34375vw;
+    /* margin-bottom: 3.64583vw; */
+    cursor:not-allowed;
+    text-align: center;
+    user-select: none;
+}
+.product .item .button.opcatiy{
+    background: rgba(0,0,0,.1);
+    border: 1px solid rgba(255,255,255,.5);
+    color:#FFF;
+    cursor: pointer;
+}
+.product .item .content-item{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 0.7291666vw;
+    margin-bottom: 1.0vw;
+    color: #000000;
+}
+.product .item .content-item:last-child{
+    margin: 0;
+}
+</style>
\ No newline at end of file

src/views/TemplateCenter/Layout.vue

@@ -7,9 +7,10 @@
                 模版管理与设置
             </div>
             <div class="col"></div>
-            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
+            <!-- <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 cusor-pointer" @click="addVisible=true">创建设计</div>
+            <div class="primary-link-button q-ml-lg" @click="addVisible=true">创建设计</div> -->
+
             <UserCard :size="33"></UserCard>
         </div>
         <div class="col row">

src/views/UserCenter/Layout.vue

@@ -2,14 +2,12 @@
     <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" />
+                style="height: 24px" @click="forwardSpace" class="cusor-pointer" />
             <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">
@@ -42,6 +40,7 @@ const activeIndex = ref(0)
 
 const forwardSpace = () => router.push('/space')
 
+
 watch(() => router.currentRoute.value.path, (toPath) => {
     menus.value = useMenu.getUserMenu
     if(!menus.value) return

src/views/components/Order/Review.vue

+<template>
+  <div class="full-dialog column flex-center items-center" ref="OrderReviewRef">
+    <div class="pre-order-box animate__animated animate__backInUp">
+        <div class="close-btn column items-center flex-center cusor-pointer" @click="close">
+            <IconClose size="0.83vw"></IconClose>
+        </div>
+        <div class="tabs-version-box row">
+            <div class="item col" :class="{'active':activeVersion==1}" @click="changeVersionHandler(1)">个人版</div>
+            <div class="item col" :class="{'active':activeVersion==2}" @click="changeVersionHandler(2)">企业版</div>
+        </div>
+        <div class="pre-order row">
+            <div class="item column">
+                <div class="pa border text-weight-bold" style="font-size: 0.83vw;">权益详情</div>
+                <div class="col">
+                    <el-scrollbar class="pa full-width full-height">
+                        <div class="content-item" v-if="currentProduct">
+                            <span>适用人数</span>
+                            <span>{{ currentProduct.maxuser }}人</span>
+                        </div>
+                        <div class="content-item" v-for="(x,i) in rights" :key="i">
+                            <span>{{ x.name }}</span>
+                            <span v-if="x.value=='no'"><IconClose :size="16" class="text-negative"></IconClose> </span>
+                            <span v-if="x.value=='yes'"><IconCheck :size="16" class="text-success" /></span>
+                            <span v-else><span class="text-grey-8" v-if="x.sub">{{ x.sub }}</span>{{ x.value }}</span>
+                        </div>
+                    </el-scrollbar>
+                </div>
+            </div>
+            <div class="item col column">
+                <div class="pa border text-weight-bold" style="font-size: 0.83vw;">{{ activeVersion==1?'个人专业版':'企业专业版' }}</div>
+                <div class="col" v-loading="loading">
+                    <div class="row wrap">
+                        <div class="price-item cusor-pointer" v-for="(x,i) in products" :key="i" :class="{'active':currentProduct.priceid==x.priceid}" @click="changeCurrentProduct(x)">
+                            <div class="pname">{{ activeVersion==1? x.invalidname:x.vipname }}</div>
+                            <div class="price" v-if="x.price>0">
+                                <span class="text-weight-bold">￥</span>
+                                <span class="text-weight-bold" style="font-size: 1.67vw;">{{ x.price }}</span>
+                                <span class="text-grey-8">/人</span>
+                            </div>
+                            <div class="price" v-else>
+                                <span class="text-weight-bold" style="font-size: 1.2vw;">咨询客服</span>
+                            </div>
+                            <div class="text-small text-info" v-if="x.price>0">只需{{ Math.floor((x.price/x.invalidmonth)) }}/每月</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="item" v-if="currentProduct">
+                <div class="pa border text-weight-bold" style="font-size: 0.83vw;">支付订单</div>
+                <div class="pa" style="font-size: 0.73vw;" v-loading="qrLoading">
+                    <template v-if="currentProduct.price>0 && qrCode!='none'">
+                        <QRCode :value="qrCode" size="100%" v-if="!qrLoading"></QRCode>
+                        <QRCode value="http://www.viitto.com" size="100%" v-if="qrLoading"></QRCode>
+                        <div style="color: #929292;margin:0.63vw 0 1.15vw 0">使用 微信 扫码支付 支付即视为你同意 <span class="cusor-pointer text-primary">相关协议</span> 条例</div>
+                        <div class="rounded bg-info column flex-center items-center text-dark" style="padding:1.5vw;">
+                            <div class="text-weight-bold" style="margin-bottom: 1.2vw">实付金额</div>
+                            <div class="text-negative">
+                                <span>￥</span>
+                                <span style="font-size: 1.35vw" class="text-weight-bold">{{ currentProduct.price.toString().split('.')[0] }}</span>
+                                <span>.{{ currentProduct.price.toFixed(2).toString().split('.')[1] }}</span>
+                            </div>
+                        </div>
+                    </template>
+                    <div v-else>
+                        <div class="text-small text-info" style="margin-bottom: 1.5vw">定制版本需要联系客服进行沟通，我们将会根据你的需求为你进行量身打造</div>
+                        <el-button type="primary" size="large" class="full-width">开始定制</el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ApiResult, VipType } from '@/configs/axios'
+import { EntMemberRight, FreeMemberRight, PersonMemberRight } from '@/configs/customer'
+import OrderService from '@/services/OrderService'
+import UserServices from '@/services/UserService'
+import { query } from '@/utils/common'
+import { ref,PropType, onMounted } from 'vue'
+
+const props = defineProps({
+  defaultType: {
+    type: Number,
+    default:1
+  }
+})
+
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
+const activeVersion = ref(props.defaultType)
+const rights = ref(PersonMemberRight)
+const loading = ref(false)
+const entProducts = ref<any[]>();
+const psnProducts = ref<any[]>();
+const products = ref<any[]|undefined>([])
+const currentProduct = ref<any>()
+const qrCode = ref('none')
+const qrLoading = ref(false)
+const OrderReviewRef = ref()
+const orderNum = ref('')
+const queryTimer = ref<any>(null)
+const currentPayStatus = ref(0)
+
+const changeVersionHandler = (v:number)=>{
+    activeVersion.value=v
+    currentProduct.value = null
+    rights.value = v==1?PersonMemberRight:EntMemberRight
+    products.value = v==1?psnProducts.value:entProducts.value
+    if(products.value && products.value.length>0) currentProduct.value = products.value[0]
+    setPaymentQrCode()
+}
+const formatProductHandler = (data: any[]) => {
+  if (Array.isArray(data)) {
+    entProducts.value = data.filter((x) => x.viptype == VipType.TEAM);
+    psnProducts.value = data.filter((x) => x.viptype == VipType.PERSON);
+    products.value = activeVersion.value ==1 ?psnProducts.value:entProducts.value
+    if(products.value && products.value.length>0) currentProduct.value = products.value[0]
+    setPaymentQrCode()
+  }
+}
+const getProduct = async () => {
+  loading.value = true;
+  const response = await UserServices.GetProductAsync();
+
+  if (response.data.resultCode == ApiResult.SUCCESS) {
+    formatProductHandler(response.data.data.pageData);
+  }
+  loading.value = false;
+}
+const changeCurrentProduct = (item:any)=>{
+    currentProduct.value  = item
+    setPaymentQrCode()
+}
+const beginTimerHandler = ()=>{
+    queryTimer.value = setInterval(async ()=>{
+        await getOrderStatus()
+    },3000)
+}
+const stopTimerHandler = ()=>{
+    if(queryTimer.value){
+        clearInterval(queryTimer.value)
+        queryTimer.value=null
+    }
+}
+const getOrderStatus = async ()=>{
+    if(orderNum.value!=''){
+        const response = await OrderService.GetOrderPayStatusAsync(orderNum.value)
+        if(response.data.resultCode == ApiResult.SUCCESS){
+            currentPayStatus.value = parseInt(response.data.message)
+        }else{
+            stopTimerHandler()
+        }
+    }
+        
+}
+const setPaymentQrCode = async ()=>{
+    stopTimerHandler()
+    orderNum.value=''
+    qrLoading.value=true
+    const parameters = {
+        priceid:currentProduct.value.priceid,
+        vipid:currentProduct.value.vipid,
+        pricetype:1,
+        price:currentProduct.value.price,
+        activedate:'2024-04-15',
+        orderid:0
+    }
+    const response = await OrderService.CreateTempOrderPaymentAsync(parameters)
+    if(response.data.resultCode==ApiResult.SUCCESS){
+        qrCode.value = response.data.data.qr
+        orderNum.value = response.data.data.no
+        beginTimerHandler()
+    }else{
+        qrCode.value='none'
+    }
+    qrLoading.value=false
+}
+const close = ()=>{
+    emit('close')
+}
+
+onMounted(()=>{
+    if(OrderReviewRef.value){
+        OrderReviewRef.value.click()
+    }
+})
+getProduct()
+</script>
+
+<style scoped>
+.pre-order-box{
+    width: 62.5vw;
+    height: 32.66vw;
+    background: linear-gradient(90deg, #638FEB, #5921DB);
+    border-radius: 0vw 0vw 0.52vw 0.52vw;
+    padding: 4px;
+    position: relative;
+}
+.pre-order-box .close-btn{
+    position: absolute;
+    top:-4.17vw;
+    right: -1.93vw;
+    width: 1.77vw;
+    height: 1.77vw;
+    border:2px solid #AFAFAF;
+    text-align: center;
+    color:#AFAFAF;
+    border-radius: 50%;
+}
+.pre-order-box .close-btn:hover{
+    color: #FFF;
+    border-color: #FFF;
+}
+.pre-order-box .pre-order{
+    width: 100%;
+    height: 100%;
+    background: #EFF4FF;
+    border-radius: 0px 0px 10px 10px;
+    padding:1.56vw;
+}
+.pre-order-box .pre-order .item{
+    background: #FFF;
+    height: 100%;
+    margin-right: 1.25vw;
+    border-radius: 0.52vw;
+}
+.pre-order-box .pre-order .item .border{
+    border-bottom: 1px solid #EFF4FF;;
+}
+.pre-order-box .pre-order .item .pa{
+    padding:1.09vw 2.08vw;
+}
+.pre-order-box .pre-order .item:first-child,
+.pre-order-box .pre-order .item:last-child{
+    width:12.86vw;
+}
+.pre-order-box .pre-order .item:last-child{
+    margin-right: 0;
+}
+.pre-order-box .pre-order .item .content-item{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    font-size: 0.73vw;
+    margin-bottom: 0.7vw;
+    color: #000000;
+}
+.pre-order-box .pre-order .price-item{
+    width: 7.81vw;
+    height: 9.58vw;
+    background: #FFFFFF;
+    border-radius: 0.42vw;
+    border: 1px solid #D1D1D1;
+    padding:2.4vw 0 1.2vw 1.2vw;
+    margin:2.03vw 0 0 1.72vw;
+}
+.pre-order-box .pre-order .price-item.active{
+    background: #EEF3FF;
+    border: 1px solid #3556F9;
+}
+
+.pre-order-box .pre-order .price-item .pname{
+    font-weight: bold;
+    font-size: 0.94vw;
+    color: #000000;
+    line-height: 1;
+    margin-bottom: 1.2vw;
+}
+.pre-order-box .pre-order .price-item .price{
+    font-size: 0.73vw;
+    margin-bottom: 1.2vw;
+}
+.pre-order-box .pre-order .price-item.active .price{
+    color:#3556F9;
+}
+.pre-order-box .pre-order .item .content-item:last-child{
+    margin: 0;
+}
+.pre-order-box .tabs-version-box{
+    height: 2.6vw;
+    top:-2.6vw;
+    position: absolute;
+    left: 0;
+    right: 0;
+}
+.pre-order-box .tabs-version-box .item:first-child{
+    margin-right: 1.04vw;
+}
+.pre-order-box .tabs-version-box .item{
+    height: 2.6vw;
+    background: #DFDFDF;
+    border-radius: 1.25vw 1.25vw 0vw 0vw;
+    text-align: center;
+    line-height: 2.6vw;
+    font-size: 0.94vw;
+    color: #000000;
+    cursor: pointer;
+    user-select: none;
+}
+.pre-order-box .tabs-version-box .item.active{
+    background: linear-gradient(90deg, #649DED, #570AD8);
+    color:#FFF;
+}
+</style>
\ No newline at end of file