支付页面

.env.dev

@@ -5,4 +5,4 @@ NODE_ENV = 'development'
 # VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
-# VUE_APP_BASE_URL = 'http://192.168.1.6:7766'
+# VUE_APP_BASE_URL = '18.167.251.121:17088'

src/assets/style/style.css

@@ -595,14 +595,36 @@ li {
 .libraryPageCascader .ant-cascader-menu {
   margin-top: 4rem;
 }
+.closeIcon {
+  position: absolute;
+  top: calc(2rem*1.2);
+  right: calc(2rem*1.2);
+  cursor: pointer;
+  width: calc(4rem*1.2);
+  height: calc(4rem*1.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.closeIcon .fi-rr-cross-small::before {
+  padding: calc(0.2rem*1.2);
+  border-radius: 5px;
+  border: solid 2px rgba(0, 0, 0, 0.25);
+  transition: 1s all;
+  color: rgba(0, 0, 0, 0.55);
+}
+.closeIcon.collection_closeIcon:hover .fi-rr-cross-small::before {
+  border: solid 2px rgba(0, 0, 0, 0.55);
+  color: #000000;
+}
 .collection_modal .ant-modal-body,
-.design_detail_modal_component .ant-modal-body,
+.payOrder_modal.design_detail_modal_component .ant-modal-body,
 .designOpenrtion_modal .ant-modal-body,
 .library_page .ant-modal-body {
   overflow-y: hidden;
 }
 .collection_modal .design_title_text,
-.design_detail_modal_component .design_title_text,
+.payOrder_modal.design_detail_modal_component .design_title_text,
 .designOpenrtion_modal .design_title_text,
 .library_page .design_title_text {
   font-size: var(--aida-fsize2);
@@ -612,7 +634,7 @@ li {
   margin-bottom: calc(2rem*1.2);
 }
 .collection_modal .design_title_text .design_title_text_intro,
-.design_detail_modal_component .design_title_text .design_title_text_intro,
+.payOrder_modal.design_detail_modal_component .design_title_text .design_title_text_intro,
 .designOpenrtion_modal .design_title_text .design_title_text_intro,
 .library_page .design_title_text .design_title_text_intro {
   font-size: var(--aida-fsize1-4);
@@ -620,7 +642,7 @@ li {
   color: rgba(0, 0, 0, 0.45);
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card,
-.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
+.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
 .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
 .library_page .ant-upload.ant-upload-select-picture-card {
   background: #FFFFFF;
@@ -631,27 +653,27 @@ li {
   margin: 0;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
-.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
+.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
 .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
 .library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
   font-size: calc(3.2rem*1.2);
   color: #B7B7B7;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
-.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
+.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
 .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
 .library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text {
   font-size: calc(1.6rem*1.2);
   color: #B7B7B7;
 }
 .collection_modal .ant-upload-list-picture-card-container,
-.design_detail_modal_component .ant-upload-list-picture-card-container,
+.payOrder_modal.design_detail_modal_component .ant-upload-list-picture-card-container,
 .designOpenrtion_modal .ant-upload-list-picture-card-container,
 .library_page .ant-upload-list-picture-card-container {
   display: none !important;
 }
 .collection_modal .ant-upload-picture-card-wrapper,
-.design_detail_modal_component .ant-upload-picture-card-wrapper,
+.payOrder_modal.design_detail_modal_component .ant-upload-picture-card-wrapper,
 .designOpenrtion_modal .ant-upload-picture-card-wrapper,
 .library_page .ant-upload-picture-card-wrapper {
   width: auto;
@@ -683,16 +705,19 @@ li {
   color: #000000;
 }
 .design_detail_modal_component .ant-upload-list-picture-card-container,
-.designOpenrtion_modal .ant-upload-list-picture-card-container {
+.designOpenrtion_modal .ant-upload-list-picture-card-container,
+.UpgradePlan_modal .ant-upload-list-picture-card-container {
   display: none !important;
 }
 .design_detail_modal_component .ant-upload-picture-card-wrapper,
-.designOpenrtion_modal .ant-upload-picture-card-wrapper {
+.designOpenrtion_modal .ant-upload-picture-card-wrapper,
+.UpgradePlan_modal .ant-upload-picture-card-wrapper {
   width: auto;
   vertical-align: top;
 }
 .design_detail_modal_component .subitOkPreviewBtn,
-.designOpenrtion_modal .subitOkPreviewBtn {
+.designOpenrtion_modal .subitOkPreviewBtn,
+.UpgradePlan_modal .subitOkPreviewBtn {
   background-color: #38205b;
   color: #fff;
   cursor: pointer;

src/assets/style/style.less

@@ -578,20 +578,7 @@ ul,li{
 // .ant-select-dropdown{
 // 	z-index: 10001;
 // }
-//提示框样式
-.ant-modal-root{
-	.ant-modal-wrap{
-		.ant-modal-confirm-confirm{
-			.ant-modal-content{
-				.ant-modal-body{
-					.ant-modal-confirm-body-wrapper{
 
-					}
-				}
-			}
-		}
-	}
-}
 .ant-message-info .anticon{
 	// color: #b2b2b2;
 }
@@ -711,8 +698,31 @@ ul,li{
 		margin-top: 4rem;
 	}
 }
+.closeIcon{
+	position: absolute;
+	top: calc(2rem*1.2);
+	right: calc(2rem*1.2);
+	cursor: pointer;
+	width: calc(4rem*1.2);
+	height: calc(4rem*1.2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.fi-rr-cross-small::before{
+		padding: calc(.2rem*1.2);
+		border-radius: 5px;
+		border: solid 2px rgba(0, 0, 0, 0.25);
+		transition: 1s all;
+		color: rgba(0, 0, 0, 0.55);
+	}
+	&.collection_closeIcon:hover .fi-rr-cross-small::before{
+		border: solid 2px rgba(0, 0, 0, 0.55);
+		color: rgba(0, 0, 0, 1);
+	}
+}
 //collection 弹窗
-.collection_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
+.collection_modal,.payOrder_modal.design_detail_modal_component,.designOpenrtion_modal,.library_page{
 	
     .ant-modal-body{
         overflow-y: hidden;
@@ -781,7 +791,7 @@ ul,li{
 		}
 	}
 }
-.design_detail_modal_component,.designOpenrtion_modal{
+.design_detail_modal_component,.designOpenrtion_modal,.UpgradePlan_modal{
 	.ant-upload-list-picture-card-container{
 		display: none !important;
 	}

src/component/HomePage/Header.vue

@@ -40,6 +40,13 @@
                 >
 					Trial Approval
                 </div>
+				<div
+					class="trialApproval button_second"
+                    @click="UpgradePlan()"
+                >
+					Upgrade Plan
+                </div>
+				
             </div>
             <nav class="header_nav_content">
                 <div
@@ -166,6 +173,7 @@
                 <!-- 绑定邮箱第一步 end -->
             </div>
         </a-modal>
+		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
     </div>
 </template>
 <script >
@@ -174,6 +182,7 @@ import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 import Habit from "@/component/Detail/habit.vue";
+import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
 import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
@@ -184,6 +193,7 @@ export default defineComponent({
     components: {
         VerificationCodeInput,
 		Habit,
+		UpgradePlan,
     },
 	setup(){
         const store = useStore();
@@ -255,7 +265,10 @@ export default defineComponent({
             let noRefresh = name === "home" ? true : false;
             this.$router.push({ name: name, params: { noRefresh: noRefresh } });
         },
-
+		UpgradePlan(){
+			let UpgradePlan = this.$refs.UpgradePlan
+			UpgradePlan.init()
+		},
         //点击下拉图标出现操作
         changeShowOperateContent() {
             this.isShowOperate = !this.isShowOperate;

src/component/HomePage/UpgradePlan.vue

@@ -0,0 +1,512 @@
+<template>
+   <a-modal class="modal_component UpgradePlan_modal" 
+            v-model:visible="showUpgradePlan" 
+            :footer="null" 
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+			:closable="false"
+			:keyboard="false"
+        >
+        <div class="UpgradePlan_closeIcon">
+				
+			<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+		</div>
+		<div class="UpgradePlan_content">
+			<div>Upgrade your Account Subscription Plan</div>
+		</div>
+		<div v-show="stepNum == 0" class="UpgradePlan_nav">
+			<div class="UpgradePlan_nav_content">
+				<div :class="[planNum == 0 ? 'active':'']" @click="setPlan(0)">Monthly</div>
+				<div :class="[planNum == 1 ? 'active':'']" @click="setPlan(1)">Annual(save 20%)</div>
+				<div :class="[planNum == 2 ? 'active':'']" @click="setPlan(2)">Buy Credits</div>
+			</div>
+		</div>
+		<div v-show="stepNum == 0" class="UpgradePlan_payList">
+			<div v-show="planNum == 0" class="UpgradePlan_payList0">
+				<div class="UpgradePlan_payList-item" v-for="item in productList">
+					<div class="UpgradePlan_payList-item-price">$99/month</div>
+					<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
+					<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
+					<ul class="UpgradePlan_payList-item-content">
+						<li>
+							<i class="fi fi-rr-cross-small"></i>
+							<span>22500 Images per month</span>
+						</li>
+					</ul>
+					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
+				</div>
+			</div>
+			<div v-show="planNum == 1" class="UpgradePlan_payList1">
+				<div class="UpgradePlan_payList-item" v-for="item in productList">
+					<div class="UpgradePlan_payList-item-price">$99/month</div>
+					<div class="UpgradePlan_payList-item-plan">Pro Plus Plan</div>
+					<div class="UpgradePlan_payList-item-integral">500 Credits per month</div>
+					<ul class="UpgradePlan_payList-item-content">
+						<li>
+							<i class="fi fi-rr-cross-small"></i>
+							<span>22500 Images per month</span>
+						</li>
+					</ul>
+					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade(item.id)">UPGRADE NOW</div>
+				</div>
+			</div>
+			<div v-show="planNum == 2" class="UpgradePlan_payList2">
+				<div class="UpgradePlan_payList-item">
+					<div class="UpgradePlan_payList2_img">
+						<img src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_premium_thumb-300x300.jpg" alt="">
+					</div>
+					<div class="UpgradePlan_payList2_name">{{ price.credits * price.num }} credits</div>
+					<div class="UpgradePlan_payList2_unitPrice">${{ price.price * price.num }} <span @click="setUnit">USD</span></div>
+					<div class="UpgradePlan_payList2_input">
+						<div class="UpgradePlan_payList2_input_add" @click="addPriceNum">+</div>
+						<input type="number" v-model="price.num">
+						<div class="UpgradePlan_payList2_input_remo"  @click="removePriceNum">-</div>
+					</div>
+					<div class="UpgradePlan_payList2_describe">All credits are shared within the {{  }} name organization</div>
+					<div class="UpgradePlan_payList-item-upgrade subitOkPreviewBtn" @click="upgrade">UPGRADE NOW</div>
+				</div>
+			</div>
+		</div>
+		<div v-show="stepNum == 1" class="UpgradePlan_payAffirm">
+			<div class="UpgradePlan_payAffirm_title">Select payment method</div>
+			<div class="UpgradePlan_payAffirm_content">
+				<label>
+					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
+					<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
+					PayPal
+				</label>
+				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'alipay'?'active':'']">
+
+				</div>
+				<label>
+					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
+					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
+					支付宝
+				</label>
+				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
+
+				</div>
+			</div>
+			<div class="UpgradePlan_payAffirm_clause">
+				<label>
+					<input type="checkbox" v-model="clause">
+					<span>I acknowledge that I have read, understand, and agree with the <a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">Terms and Conditions</a> (including the Scope of service) and the <a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">Subscription Agreement</a>. *</span>
+				</label>
+			</div>
+			<div class="UpgradePlan_payList_item_upgrade_btn">
+				<div class="UpgradePlan_payList_item_upgrade1 subitOkPreviewBtn" @click="cancel">Cancel</div>
+				<div class="UpgradePlan_payList_item_upgrade2 subitOkPreviewBtn" @click="payment">Payment</div>
+			</div>
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<div>Has it been paid?</div>
+			<div>
+				<div @click="getTradeQuery">Yes</div>
+				<div @click="getTradeQuery">No</div>
+			</div>
+		</div>
+	</a-modal>
+</template>
+<script lang="ts">
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { message, Upload } from "ant-design-vue";
+import { defineComponent, computed, h, ref, nextTick, inject } from "vue";
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import GO from "@/tool/GO";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl } from "@/tool/util";
+// import { forEach } from "jszip";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+	components: {
+		scaleImage,	
+	},
+    props: ["msg",'sketchCatecoryList'],
+    setup() {
+        // console.log(prop.msg);
+        let showUpgradePlan = ref(false)
+		let planNum = ref(0)
+		let stepNum = ref(0)
+		let price = ref({
+			num:1,
+			price:15,
+			credits:115,
+		})
+		let modeOfPayment = ref('alipay')
+		let clause = ref(false)//同意条款
+		let productList = ref([])
+		let payIndex = ref(0)
+		let isShowMark = ref(false)
+        return {
+			showUpgradePlan,
+			planNum,
+			stepNum,
+			price,
+			modeOfPayment,
+			clause,
+			productList,
+			payIndex,
+			isShowMark,
+        };
+    },
+    data(prop) {
+        return {
+		}
+    },
+	
+    mounted() {
+		this.getProductList()
+    },
+	watch:{
+		// driver__:{
+		// 	handler(newVal,oldVal){
+		// 		if(this.type_.type2 == 'Printboard'){
+		// 			if(newVal.index >= 14 && newVal.index < 15){
+		// 				this.setKeyword(newVal.index-14)
+		// 			}else{
+		// 			}
+		// 		}else if(this.type_.type2 == 'Sketchboard'){
+					
+		// 		}
+				
+		// 	}
+		// },
+		
+	},
+    methods: {
+        init(){
+			this.showUpgradePlan = true
+		},
+		setPlan(num:any){
+			this.planNum = num
+		},
+		upgrade(index:any){
+			this.stepNum = 1
+			this.payIndex = index
+		},
+		getProductList(){
+			Https.axiosGet(Https.httpUrls.productList).then((rv) => {
+				if (rv) {
+					this.productList = rv
+					// this.disignTypeList = rv
+				}
+			})
+		},
+		addPriceNum(){//数量减减
+			this.price.num++
+		},
+		removePriceNum(){//数量加加
+			if(this.price.num > 1){
+				this.price.num--
+			}
+		},
+		payment(){//付款
+			console.log(this.modeOfPayment,'alipay','paypal');
+			if(!this.clause){
+				return
+			}
+			let url = window.location.href 
+			url = url.replace(/\/[^/]+$/, '') + '/paySucceed';
+			Https.axiosPost(Https.httpUrls.pagePay+`/${this.payIndex}?returnUrl=${url}`, {returnUrl:url}).then(
+                (rv: any) => {
+					// var newWindow:any = window.open();
+					// newWindow.document.write(rv);
+					document.write(rv);
+					// this.isShowMark = true
+                }
+            ).catch(res=>{
+            });
+		},
+		//查询是否支付
+		// getTradeQuery(){
+		// 	let params = 1
+		// 	Https.axiosGet(Https.httpUrls.tradeQuery,{params:{enumName:params}}).then((rv) => {
+		// 		if (rv) {
+		// 			console.log(rv);
+					
+		// 		}
+		// 	})
+		// },
+		cancel(){//取消
+			this.stepNum = 0
+			this.modeOfPayment = 'alipay'
+			this.clause = false
+		},
+		//设置单位
+		setUnit(){
+
+		},
+		cancelDsign(){
+			this.showUpgradePlan = false
+		},
+    },
+});
+</script>
+<style lang="less" scoped>
+.UpgradePlan_modal {
+	flex: 1;
+    // height: 30rem;
+    // overflow-x: hidden;
+	display: flex;
+    flex-direction: column;
+    border-right: 1px solid #e5e5e5;
+	position: relative;
+	.UpgradePlan_content{
+		font-size: var(--aida-fsize2);
+		font-weight: 900;
+		color: rgba(0, 0, 0, 0.65);
+	}
+	.UpgradePlan_nav{
+		font-size: 2rem;
+		display: flex;
+		justify-content: center;
+		font-weight: 600;
+		.UpgradePlan_nav_content{
+			background: #eaecf0;
+			display: flex;
+			padding: .5rem 2rem;
+			border-radius: 5rem;
+			margin: 2rem 0;
+			div{
+				border-radius: 2rem;
+				padding: .5rem 2rem;
+				margin: 0 1rem;
+				cursor: pointer;
+				&.active{
+					background: #fff;
+				}
+			}
+			div:hover{
+				background: #fff;
+			}
+		}
+	}
+	.UpgradePlan_payList{
+		flex: 1;
+		.UpgradePlan_payList0,.UpgradePlan_payList1,.UpgradePlan_payList2{
+			overflow-y: hidden;
+			height: 100%;
+			display: flex;
+			.UpgradePlan_payList-item{
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+			}
+		}
+		.UpgradePlan_payList0,.UpgradePlan_payList1{
+			.UpgradePlan_payList-item{
+				width: 35rem;
+				padding: 3rem;
+				border: .5rem solid #edeff2;
+				border-radius: 2rem;
+				margin-right: 2rem;
+				&.UpgradePlan_payList-item:last-child{
+					margin-right: 0;
+				}
+				.UpgradePlan_payList-item-price{
+					font-weight: 600;
+					font-size: var(--aida-fsize2);
+					margin-bottom: 1rem;
+					line-height: 1;
+				}
+				
+				.UpgradePlan_payList-item-plan{
+					font-size: 1.8rem;
+					font-weight: 600;
+				}
+				.UpgradePlan_payList-item-content{
+					margin-top: 1.2rem;
+					flex: 1;
+					overflow-x: hidden;
+				}
+				.UpgradePlan_payList-item-upgrade{
+					position: relative;
+					text-align: center;
+					padding: 1rem 2rem;
+				}
+				
+			}
+			
+		}
+		.UpgradePlan_payList2{
+			text-align: center;
+			flex-direction: column;
+			.UpgradePlan_payList-item{
+				justify-content: space-between;
+				padding: 3rem;
+				align-items: center;
+				margin-top: 5rem;
+				.UpgradePlan_payList2_img{
+					img{
+						border-radius: 50%;
+						width: 10rem;
+						height: 10rem;
+					}
+				}
+				.UpgradePlan_payList2_name,.UpgradePlan_payList2_unitPrice{
+					font-size: 1.8rem;
+					font-weight: 600;
+				}
+				.UpgradePlan_payList2_name{
+					font-weight: 900;
+				}
+				.UpgradePlan_payList2_input{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					div{
+						font-size: 4rem;
+						font-weight: 600;
+						cursor: pointer;
+					}
+					input{
+						width: 5rem;
+						height: 5rem;
+						border: .2rem solid #f4f4f7;
+						margin: 0 2rem;
+						text-align: center;
+						background: #fff;
+						border-radius: 1rem;
+					}
+					input::-webkit-outer-spin-button,
+					input::-webkit-inner-spin-button {
+						-webkit-appearance: none;
+						margin: 0;
+					}
+					input {
+						-moz-appearance: textfield;
+					}
+				}
+				.UpgradePlan_payList2_describe{
+					background: #f2f2f4;
+					padding: 1rem 3rem;
+					border-radius: 2rem;
+				}
+				.UpgradePlan_payList-item-upgrade{
+					position: initial;
+					transform: translate(0,0);
+					padding: 1rem 2rem;
+				}
+			}
+			
+		}
+	}
+	.UpgradePlan_payAffirm{
+		width: 50rem;
+		margin: 0 auto;
+		margin-top: 5rem;
+		.UpgradePlan_payAffirm_title{
+			font-size: 2rem;
+			font-weight: 600;
+		}
+	}
+	.UpgradePlan_payAffirm_content{
+		display: flex;
+		flex-direction: column;
+		margin: 3rem 0;
+		label{
+			display: flex;
+			align-items: center;
+			padding: 1rem;
+			margin: 1rem 0;
+			cursor: pointer;
+			border: .5rem solid #efefef;
+			border-radius: 2rem;
+			img{
+				margin: 0rem 2rem;
+				max-width: 4rem;
+			}
+		}
+	}
+	.UpgradePlan_payAffirm_clause{
+		margin-bottom: 1.5rem;
+		label{
+			cursor: pointer;
+			input{
+				margin-right: 1rem;
+				cursor: pointer;
+			}
+			span{
+				vertical-align: top;
+				a{
+					color: #000;
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+	.UpgradePlan_payList_item_upgrade_btn{
+		display: flex;
+		display: flex;
+		justify-content: space-around;
+		>div{
+			position: relative;
+			left: 0;
+			transform: none;
+			line-height: 1;
+			display: flex;
+			align-items: center;
+		}
+		.UpgradePlan_payList_item_upgrade1{
+			background: rgba(0, 0, 0, 0);
+			border: 2px solid;
+			color: #000;
+		}
+	}
+    .UpgradePlan_closeIcon{
+		top: calc(2rem*1.2);
+		right: calc(2rem*1.2);
+        cursor: pointer;
+		width: calc(4rem*1.2);
+		height: calc(4rem*1.2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		.fi-rr-cross-small::before{
+			padding: calc(.2rem*1.2);
+			border-radius: 5px;
+			border: solid 2px rgba(0, 0, 0, 0.25);
+			transition: 1s all;
+			color: rgba(0, 0, 0, 0.55);
+		}
+		&.UpgradePlan_closeIcon:hover .fi-rr-cross-small::before{
+			border: solid 2px rgba(0, 0, 0, 0.55);
+			color: rgba(0, 0, 0, 1);
+		}
+	}
+}
+	
+
+</style>
+<style lang="less">
+.UpgradePlan_modal,.layout_modal{
+	.ant-modal-content{
+		border-radius: calc(1rem*1.2);
+		overflow: hidden;
+		.ant-modal-header{
+			background-color: #fff;
+			border-bottom: none;
+		}
+		.ant-modal-body{
+			display: flex;
+			flex-direction: column;
+			padding: calc(5rem*1.2) calc(5rem*1.2) !important;
+			// height: calc(65vh - 6.4rem);
+			height: calc(65rem*1.2);
+		}
+		//进度完成字体颜色
+		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
+			color: #000;
+		}
+		.ant-progress-circle .ant-progress-text{
+			color:rgba(0, 0, 0, 0.55);
+			font-size: calc(1.6rem*1.2);
+		}
+	}
+}
+</style>

src/component/HomePage/collectionModal.vue

@@ -27,7 +27,7 @@
 				</div>
          
             </div>
-			<div class="collection_closeIcon" :class="[driver__.driver?'hideEvents':'']">
+			<div class="collection_closeIcon closeIcon" :class="[driver__.driver?'hideEvents':'']">
 				<!-- <div class="header_right_block" @click.stop="">
 					<div class="header_cancel_button" >Cancel</div>
 				</div> -->
@@ -338,26 +338,7 @@ export default defineComponent({
 		
 	}
 	.collection_closeIcon{
-		top: calc(2rem*1.2);
-		right: calc(2rem*1.2);
-        cursor: pointer;
-		width: calc(4rem*1.2);
-		height: calc(4rem*1.2);
-		display: flex;
-		align-items: center;
-		justify-content: center;
 		
-		.fi-rr-cross-small::before{
-			padding: calc(.2rem*1.2);
-			border-radius: 5px;
-			border: solid 2px rgba(0, 0, 0, 0.25);
-			transition: 1s all;
-			color: rgba(0, 0, 0, 0.55);
-		}
-		&.collection_closeIcon:hover .fi-rr-cross-small::before{
-			border: solid 2px rgba(0, 0, 0, 0.55);
-			color: rgba(0, 0, 0, 1);
-		}
 	}
 	.collection_page{
 		left: 50%;
@@ -427,7 +408,7 @@ export default defineComponent({
 }
 </style>
 <style lang="less">
-.collection_modal,.layout_modal{
+.collection_modal,.layout_modal,{
 	// max-width: 1200px ;
 	// max-width: 1150px ;
 	.ant-modal-content{
@@ -453,8 +434,4 @@ export default defineComponent({
 		}
 	}
 }
-// .ant-progress-circle .ant-progress-inner{
-// 	width: 8rem !important;
-// 	height: 8rem !important;
-// }
 </style>

src/component/Pay/payOrder.vue

@@ -0,0 +1,516 @@
+<template>
+    <a-modal
+        class="modal_component payOrder_modal"
+        v-model:visible="showPayOrder"
+        :footer="null"
+        width="78%"
+        :maskClosable="false"
+        :centered="true"
+        :closable="false"
+        wrapClassName="#app"
+        :keyboard="false"
+    >
+        <div class="closeIcon">
+            <!-- <div class="header_right_block" @click.stop="">
+			<div class="header_cancel_button" >Cancel</div>
+		</div> -->
+            <i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
+        </div>
+        <div class="history_page">
+            <div class="page_content">
+                <div class="page_content_body">
+                    <div class="history_page_body">
+                        <div class="history_table_search">
+                            <!-- <a-range-picker
+                                class="range_picker"
+                                v-model:value="rangePickerValue"
+                                :placeholder="[
+                                    $t('HistoryPage.StartDate'),
+                                    $t('HistoryPage.EndDate'),
+                                ]"
+                                valueFormat="YYYY-MM-DD"
+                            >
+                                <template #suffixIcon>
+                                    <span
+                                        class="icon iconfont range_picker_icon icon-rili"
+                                    ></span>
+                                </template>
+                            </a-range-picker> -->
+                            <div class="content_search_block">
+                                <input
+                                    class="search_input"
+                                    :placeholder="
+                                        $t('HistoryPage.inputContent1')
+                                    "
+                                    v-model="searchCollectionName"
+                                    @keydown.enter="searchHistoryList()"
+                                />
+                                <div
+                                    class="search_icon_block"
+                                    @click="searchHistoryList()"
+                                >
+                                    <span
+                                        class="icon iconfont icon-sousuo"
+                                    ></span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="history_table_content" ref="historyTable">
+                            <a-table
+                                :columns="columns"
+                                :data-source="collectionList"
+                                :scroll="{ y: historyTableHeight }"
+                                @change="changePage"
+                                :pagination="{
+                                    showSizeChanger: true,
+                                    current: currentPage,
+                                    pageSize: pageSize,
+                                    total: total,
+                                    showQuickJumper: true,
+                                    bordered: false,
+                                }"
+                            >
+                                <template
+                                    #bodyCell="{ column, text, record, index }"
+                                >
+                                    <div
+                                        class="operate_list"
+                                        v-if="column?.Operations"
+                                    >
+                                        <div
+                                            class="operate_item"
+                                            @click="refund(record)"
+                                        >
+                                            refund
+                                        </div>
+                                        <!-- <div class="operate_item" @click="deleteGroup(record, index)">{{ $t('HistoryPage.Delete') }}</div> -->
+                                    </div>
+                                </template>
+                            </a-table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+		<a-modal
+			class="modal_component refund_reason"
+			v-model:visible="showRefundReason"
+			:footer="null"
+			width="30%"
+			:maskClosable="false"
+			:centered="true"
+			:closable="false"
+			wrapClassName="#app"
+			:keyboard="false"
+		>
+			<div class="closeIcon">
+				<!-- <div class="header_right_block" @click.stop="">
+				<div class="header_cancel_button" >Cancel</div>
+			</div> -->
+				<i class="fi fi-rr-cross-small" @click.stop="cancelRefundreason()"></i>
+			</div>
+		</a-modal>
+    </a-modal>
+</template>
+<script lang="ts">
+import { defineComponent, ref, createVNode, computed, nextTick } from "vue";
+import HeaderComponent from "@/component/HomePage/Header.vue";
+import HistoryDetail from "@/component/Detail/HistoryDetail.vue";
+import { Https } from "@/tool/https";
+import { formatTime } from "@/tool/util";
+import { Modal, message } from "ant-design-vue";
+import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: {
+        HeaderComponent,
+        HistoryDetail,
+        RobotAssist,
+    },
+    setup() {
+        let rangePickerValue: any = ref([]);
+        let renameData: any = ref({}); //修改名字选中的数据
+        const columns: any = computed(() => {
+            return [
+                {
+                    title: "Serial",
+                    align: "center",
+                    ellipsis: true,
+                    width: 90,
+                    dataIndex: "orderNo",
+                    key: " ",
+                },
+                {
+                    title: "Title",
+                    align: "center",
+                    ellipsis: true,
+                    width: 90,
+                    dataIndex: "title",
+                    key: "sketchCounts",
+                },
+                // { title: useI18n().t('HistoryPage.UptateTime'), align:'center', ellipsis: true,width: 90, dataIndex: 'updateDate', key: 'updateTime',customRender:(record:any)=>{
+                // 	// let time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+                // 	return record.record.updateTime
+                // }},
+                {
+                    title: "Money",
+                    align: "center",
+                    ellipsis: true,
+                    width: 90,
+                    dataIndex: "totalFee",
+                    key: "sketchCounts",
+                },
+                {
+                    title: "Payment",
+                    align: "center",
+                    ellipsis: true,
+                    width: 90,
+                    dataIndex: "paymentType",
+                    key: "sketchCounts",
+                },
+                {
+                    title: "State",
+                    align: "center",
+                    ellipsis: true,
+                    width: 90,
+                    dataIndex: "orderStatus",
+                    key: "sketchCounts",
+                },
+
+                {
+                    title: useI18n().t("HistoryPage.Operations"),
+                    key: "operation",
+                    align: "center",
+                    fixed: "right",
+                    width: 90,
+                    // slots:{customRender:'action'}
+                    Operations: true,
+                },
+            ];
+        });
+        let showPayOrder: any = ref(false);
+        let showRefundReason: any = ref(false);
+        let collectionList: any = ref([]);
+        let { t } = useI18n();
+        return {
+            rangePickerValue,
+            columns,
+            collectionList,
+            showPayOrder,
+			showRefundReason,
+            renameData,
+            t,
+        };
+    },
+    data() {
+        return {
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            historyTableHeight: 0,
+            newCollectionName: "",
+            groupDetails: {}, //每个collection的详情
+            collectionName: "", //选中的名字
+            searchCollectionName: "",
+        };
+    },
+    mounted() {},
+    methods: {
+        init() {
+            console.log(123123);
+            this.showPayOrder = true;
+            this.getHistoryList();
+            nextTick().then(() => {
+                let history_table_content = document.getElementsByClassName(
+                    "history_table_content"
+                )[0];
+                console.log(history_table_content);
+                this.historyTableHeight =
+                    history_table_content.scrollHeight - 130;
+            });
+        },
+        cancelDsign() {//关闭订单页面
+            this.showPayOrder = false;
+        },
+		cancelRefundreason(){//关闭退款页面
+            this.showRefundReason = false;
+		},
+        //改变页码
+        changePage(e: any) {
+            this.currentPage = e.current;
+            this.pageSize = e.pageSize;
+            this.getHistoryList();
+        },
+
+        //查询列表
+        searchHistoryList() {
+            this.currentPage = 1;
+            this.getHistoryList();
+        },
+
+        getHistoryList() {
+            let startDate: any = this.rangePickerValue
+                ? new Date(this.rangePickerValue[0]).getTime()
+                : "";
+            let endDate: any = this.rangePickerValue
+                ? new Date(this.rangePickerValue[1]).getTime()
+                : "";
+            let data = {
+                page: this.currentPage,
+                size: this.pageSize,
+                collectionName: this.searchCollectionName,
+                startDate: startDate,
+                endDate: endDate,
+            };
+
+            Https.axiosGet(Https.httpUrls.orderInfoList).then((rv: any) => {
+                console.log(rv);
+                this.total = rv.length;
+                console.log(this.total);
+                this.collectionList = rv.slice(
+                    (this.currentPage - 1) * this.pageSize,
+                    (this.currentPage - 1) * this.pageSize + this.pageSize
+                );
+            });
+            // Https.axiosPost( Https.httpUrls.queryUserGroup, data).then(
+            //     (rv: any) => {
+            //         this.collectionList = rv.content
+            //         this.total = rv.total
+            //     }
+            // );
+        },
+
+        //删除分组
+        // deleteGroup(record:any,index:number){
+        //     let deleteGroupFun = (id:any,index:number) =>{
+        //         let data = {
+        //             userGroupId:id
+        //         }
+        //         Https.axiosPost(Https.httpUrls.deleteUserGroup,data).then(
+        //             (rv: any) => {
+        //                 message.success(this.t('HistoryPage.jsContent1'))
+        //                 this.collectionList.splice(index,1)
+        //             }
+        //         );
+        //     }
+        //     Modal.confirm({
+        //         title: this.t('HistoryPage.jsContent2'),
+        //         icon: createVNode(ExclamationCircleOutlined),
+        //         okText: 'Yes',
+        //         cancelText: 'No',
+        //         centered:true,
+        // 		mask:false,
+        //         onOk() {
+        //             deleteGroupFun(record.id,index)
+        //         }
+        //     });
+        // },
+
+        refund(record: any) {
+            // this.$router.push({name:'home',params: {id:record.id}})
+            console.log(record);
+			this.showRefundReason = true
+            // Https.axiosPost(
+            //     Https.httpUrls.tradeRefund + `/${record.orderNo}/${"123"}`,
+            //     {}
+            // ).then((rv: any) => {
+			// 	console.log(rv);
+			// })
+			// .catch((res) => {});
+        },
+    },
+});
+</script>
+<style lang="less">
+.payOrder_modal ,.refund_reason{
+    // max-width: 1200px ;
+    // max-width: 1150px ;
+    .ant-modal-content {
+        border-radius: calc(1rem * 1.2);
+        overflow: hidden;
+        .ant-modal-header {
+            background-color: #fff;
+            border-bottom: none;
+        }
+        .ant-modal-body {
+            // height: calc(65vh - 6.4rem);
+            height: calc(65rem * 1.2);
+        }
+        //进度完成字体颜色
+
+        .ant-progress-circle.ant-progress-status-success .ant-progress-text {
+            color: #000;
+        }
+        .ant-progress-circle .ant-progress-text {
+            color: rgba(0, 0, 0, 0.55);
+            font-size: calc(1.6rem * 1.2);
+        }
+    }
+}
+.refund_reason{
+    .ant-modal-content {
+		.ant-modal-body {
+			// height: calc(65vh - 6.4rem);
+			height: calc(30rem * 1.2);
+		}
+	}
+	
+}
+</style>
+<style lang="less">
+.payOrder_modal {
+    .closeIcon {
+        z-index: 2;
+    }
+    .history_page {
+        width: 100%;
+        height: 100%;
+        padding: 9rem;
+        overflow: hidden;
+        // min-width: 1440px;
+        position: relative;
+
+        .page_content {
+            position: relative;
+
+            .page_content_bg {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+            }
+
+            .page_content_body {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+
+                .history_page_body {
+                    width: 100%;
+                    // height: calc(100% - 7rem);
+                    height: 100%;
+                    box-sizing: border-box;
+
+                    .history_header {
+                        font-size: 1.8rem;
+                        height: 6.3rem;
+                        line-height: 6.3rem;
+                        font-weight: 500;
+                        color: #333333;
+                    }
+
+                    .history_table_search {
+                        display: flex;
+                        align-items: center;
+
+                        .range_picker {
+                            width: 36rem;
+                            height: 4.8rem;
+
+                            .ant-picker-input > input {
+                                font-size: 1.6rem;
+                            }
+
+                            .range_picker_icon {
+                                font-size: 2.2rem;
+                            }
+                        }
+
+                        .content_search_block {
+                            margin-left: 4rem;
+                            display: flex;
+
+                            .search_input {
+                                width: 32.8rem;
+                                padding-left: 1.5rem;
+                                height: 4.8rem;
+                                line-height: 4.6rem;
+                                background: #ffffff;
+                                border: 0.1rem solid #f1f1f1;
+                                font-size: 1.6rem;
+                                font-weight: 400;
+
+                                &::placeholder {
+                                    color: #c2c2c2;
+                                }
+                            }
+
+                            .search_icon_block {
+                                width: 7.2rem;
+                                height: 4.8rem;
+                                line-height: 4.8rem;
+                                text-align: center;
+                                background: #343579;
+                                cursor: pointer;
+
+                                .icon-sousuo {
+                                    font-size: 2rem;
+                                    color: #ffffff;
+                                }
+                            }
+                        }
+                    }
+
+                    .history_table_content {
+                        margin-top: 2.6rem;
+                        width: 100%;
+                        // height: calc(100% - 13.7rem);
+                        height: 100%;
+                        background: rgba(255, 255, 255, 0.6);
+                        padding-bottom: 3rem;
+                        .ant-table {
+                            background: transparent;
+                        }
+
+                        .ant-table-body {
+                            overflow-y: auto !important;
+                            -ms-overflow-style: none;
+                            overflow: -moz-scrollbars-none;
+
+                            &::-webkit-scrollbar {
+                                width: 0 !important;
+                            }
+                        }
+
+                        .ant-table-thead > tr > th {
+                            background: #ffffff;
+                        }
+
+                        .ant-table-tbody > tr > td {
+                            border: none;
+                            background: transparent;
+                        }
+
+                        .ant-table-tbody > tr {
+                            &:hover > td {
+                                background: #ffffff;
+                            }
+                        }
+
+                        .ant-table-pagination-right {
+                            padding-right: 3.5rem;
+                        }
+
+                        .operate_list {
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            padding: 0 1rem;
+
+                            .operate_item {
+                                font-size: 1.4rem;
+                                font-family: Roboto;
+                                font-weight: 400;
+                                color: #343579;
+                                cursor: pointer;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/router/index.ts

@@ -36,6 +36,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'history',
 		component: _import('HistoryPage')
 	},
+	{
+		path: '/paySucceed',
+		name: 'paySucceed',
+		component: _import('paySucceed')
+	},
 	{
 		path: '/oldHistory',
 		name: 'oldHistory',

src/tool/https.js

@@ -25,11 +25,12 @@ import { message } from 'ant-design-vue';
 // }else{
 // 	httpIp = ''
 // }
-// let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
+let httpIp = process.env.NODE_ENV == 'development' ? "" : "";
-let httpIp = process.env.NODE_ENV == 'development' ? "http://192.168.1.7/:10086" : "";
+// let httpIp = process.env.NODE_ENV == 'development' ? "https://192.168.0.102:10086" : "";
 // console.log(httpIp,process.env.VUE_APP_BASE_URL);
 
-axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
+axios.defaults.baseURL = httpIp;   //配置接口地址
+// axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 
 // console.log(process.env.VUE_APP_BASE_URL);
 //POST传参序列化(添加请求拦截器)
@@ -126,12 +127,19 @@ export const Https = {
         elementSavePrint:'/api/element/savePrint',//保存印花
         getRgbByTcx:'/api/element/getRgbByTcx', // 通过hsv值获取潘通信息
         getRgbByHsv:'/api/element/getRgbByHsv', //通过hsv值获取潘通信息
-        designCollection:`/api/design/designCollection`, //设计 Conllection
+        designCollection:`/robot/design/designCollection`, //设计 Conllection
         reDesignCollection:`/api/design/reDesignCollection`,//重新设计 Conllection
         countDesignProcess:'/api/design/countDesignProcess', //统计design进度
         designProcess:`/api/design/designProcess`, //统计design进度
         designGetModel:`/api/design/getModel`, //导出获取模特链接
 
+		//充值相关
+        productList:`/api/product/list`, //获取商品列表
+        pagePay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
+        orderInfoList:`/api/order-info/list`, //查询订单列表
+        tradeRefund:`/api/ali-pay/trade/refund`, //查询订单列表
+        tradeQuery:`/api/ali-pay/trade/query/{orderNo}`, //查询订单状态
+		
         getRgbByHsvBatch:`/api/element/getRgbByHsvBatch`, //通过hsv值数组批量获取潘通信息
         designLike:`/api/design/like`, //Design Like
         designDislike: `/api/design/dislike`, //Design Dislike

src/views/paySucceed.vue

@@ -0,0 +1,108 @@
+<template>
+     <div class="paySucceed_page">
+		<HeaderComponent></HeaderComponent>
+		<div class="paySucceed_centent">
+			<div class="paySucceed_centent_title"><i class="fi fi-ss-check-circle"></i>支付成功</div>
+			<div class="paySucceed_centent_btn">
+				<div class=" button_second" @click="turnToPage('home')">返回首页</div>
+				<div class=" button_second" @click="turnToPage('order')">查看订单</div>
+			</div>
+		</div>
+		<payOrder ref="payOrder"></payOrder>
+		<RobotAssist></RobotAssist>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,ref,createVNode,computed} from 'vue'
+import HeaderComponent from "@/component/HomePage/Header.vue";
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import payOrder from "@/component/Pay/payOrder.vue";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useI18n } from 'vue-i18n';
+export default defineComponent({
+    components: {
+        HeaderComponent,
+		RobotAssist,
+		payOrder,
+    },
+    setup() {
+      
+		let {t} = useI18n()
+        return {
+           
+			t,
+        }
+    },
+    data(){
+        return{
+         
+        }
+    },
+    mounted(){
+		
+    },
+    methods:{
+		turnToPage(name:any) {
+			if(name == 'order'){
+				let payOrder:any = this.$refs.payOrder
+				payOrder.init()
+			}else {
+				let noRefresh:any = name === "home" ? true : false;
+				this.$router.push({ name: name, params: { noRefresh: noRefresh } });
+			}
+        },
+        //确定修改名字
+        // confrimRename(){
+        //     let data = {
+        //         timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+        //         userGroupId: this.renameData.id,
+        //         userGroupName: this.newCollectionName
+        //     }
+        //     Https.axiosPost(Https.httpUrls.updateUserGroupName,data).then(
+        //         (rv: any) => {
+        //             message.success(this.t('HistoryPage.jsContent3'))
+        //             this.collectionList[this.renameData.index].name = this.newCollectionName
+        //             this.collectionList[this.renameData.index].updateDate = rv.updateDate
+        //             this.renameVisivle = false
+        //             this.newCollectionName = ''
+        //             this.renameData = {}
+        //         }
+        //     );
+        // },
+    }
+})
+</script>
+<style lang="less">
+.paySucceed_page {
+    width: 100%;
+    height: 100%;
+	padding: 0 9rem;
+	overflow: hidden;
+	// min-width: 1440px;
+	position: relative;
+    .paySucceed_centent{
+		margin-top: 20rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		.paySucceed_centent_title{
+			font-size: 1.8rem;
+			font-weight: 900;
+			i{
+				color: green;
+				margin-right: 1rem;
+			}
+		}
+		.paySucceed_centent_btn{
+			display: flex;
+			margin-top: 10rem;
+			.button_second{
+				margin: 0 2.5rem;
+			}
+		}
+	}
+}
+</style>

vue.config.js

@@ -23,7 +23,7 @@ module.exports = defineConfig({
 			changeOrigin:true,
 		},
 		'/robot':{
-			target:'http://18.167.251.121:9991',
+			target:'http://18.167.251.121:17088',
 			changeOrigin:true,
 			pathRewrite:{
 			'^/robot': 'api', // api替换成api