注册页面新增语言切换

src/component/mainPage/signUp/index.vue

@@ -1,20 +1,20 @@
 <template>
 	<div class="signUp">
 		<div class="selectSignUp" v-show="!isSelectSignUp">
-			<div class="title">Our Advantages</div>
+			<div class="title">{{ productList[0].Advantages }}</div>
 			<!-- <div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div> -->
 			<div class="gallery_list product_list">
 				<div class="gallery_item" v-for="item in productList" :key="item">
 					<div class="product_signUp_box">
-						<div class="title">{{ item.title }}</div>
-						<div class="info">{{ item.info }}</div>
-						<div class="detail">{{ item.detail }}</div>
-						<div class="highlight" v-if="item.highlight">{{ item.highlight }}</div>
-						<div class="gallery_btn gallery_btn_radius" v-if="item.info != '/'" @click="createAccount">Create account</div>
+						<div class="title">{{ item?.title }}</div>
+						<div class="info">{{ item?.info }}</div>
+						<div class="detail">{{ item?.detail }}</div>
+						<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
+						<div class="gallery_btn gallery_btn_radius" v-if="item?.info != '/'" @click="createAccount">{{ item?.btn }}</div>
 						<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">Contact us</a>
 					</div>
 					<ul class="product_detail">
-						<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
+						<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
 					</ul>
 				</div>
 			</div>
@@ -45,27 +45,49 @@
 		    registerModel,
 		},
         name: "login",
-		emits: ['close'],
+		props: ['isSelectSuccessively'],
+		// emits: ['close'],
 		setup(props, { emit }) {
 			let dom = reactive({
 				registerModel:null
 			})
 			let data = reactive({
 				isSelectSignUp:false,
-				productList:[
+				productList:[],
+				productListCn:[
 					{
+						Advantages:'我们的优势',
+						title:"个人版",
+						info:"试用五天(注册后开始免费试用)",
+						detail:"时尚设计助理",
+						highlight:"免费试用五天",
+						detailList:[
+							'时尚设计助理',
+							// 'Basic 3D service functions',
+							'个人信用额度供独立使用',
+							'作品可以在作品广场中共享',
+							'支持按 月/年 支付方式',
+							'适合个人创作者和自由设计师试用'
+						],
+						btn:'创建账号',
+					},
+				],
+				productListEn:[
+					{
+						Advantages:'Our Advantages',
 						title:"Personal version",
-						info:"Try for 5 days",
+						info:"Try for 5 days(Free trail starts upon registration)",
 						detail:"AI Fashion Design Assistant",
 						highlight:"Free 5-day trial",
 						detailList:[
 							'AI Fashion Design Assistant',
-							'Basic 3D service functions',
+							// 'Basic 3D service functions',
 							'Individual Credit Limit for Independent Use',
 							'Works can be shared in public galleries',
 							'Support monthly/annual payment options',
 							'Suitable for individual creators and freelance designers to use'
-						]
+						],
+						btn:'Create account',
 					},
 					// {
 					// 	title:"Education Edition",
@@ -123,6 +145,13 @@
 					},
 				]
 			})
+			watch(()=>props.isSelectSuccessively,(newVal)=>{
+				if(newVal){
+				    data.productList = data.productListCn
+				}else{
+				    data.productList = data.productListEn
+				}
+			},{immediate: true})
 			const close = ()=>{
 			}
 			const createAccount = ()=>{

src/views/Register.vue

@@ -31,10 +31,17 @@
 				<div class="gallery_btn white" v-if="userDetail.systemUser != -1" @click="logout">log off</div>
 			</div>
 			<div class="homeRecommend_right" v-if="userDetail.systemUser == -1">
+				<div class="cutLangue">
+					<div @click="()=>isSelectSuccessively = !isSelectSuccessively">
+						<i class="fi fi-rr-globe"></i>
+						<!-- <a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="EN" un-checked-children="CN"/> -->
+						{{ isSelectSuccessively? 'CN':'EN'}}
+					</div>
+				</div>
 				<div class="gallery_btn" @click="setLogin">Login</div>
 			</div>
         </header>
-		<signUp ref="signUp" @close="signUpClose"></signUp>
+		<signUp ref="signUp" :isSelectSuccessively="isSelectSuccessively"></signUp>
     </div>
 	
 </template>
@@ -54,7 +61,8 @@ export default defineComponent({
 		const router = useRouter();
 		let data = reactive({
 			homeRecommendMax:null,
-			signUp:null
+			signUp:null,
+			isSelectSuccessively:false,
 		})
 		let isMoblie = ref(false)
 		let userDetail = computed(()=>{
@@ -94,6 +102,7 @@ export default defineComponent({
 		})
 		onBeforeUnmount(() => {
 			window.removeEventListener('resize', updataIsMoblie);
+			
 		});
 		return {
 			...toRefs(data),
@@ -181,6 +190,31 @@ export default defineComponent({
 			    margin-right: 3rem;
 			}
 		}
+		> .cutLangue{
+			display: flex;
+			align-items: center;
+			margin-right: 4rem;
+			> i{
+				font-size: 5rem;
+			}
+			> div{
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				> i{
+					font-size: 3.5rem;
+					display: flex;
+					margin-right: 1rem;
+				}
+			}
+			> button{
+				height: 4rem;
+				min-width: 8rem;
+			}
+			> .text{
+				margin-right: 1rem;
+			}
+		}
 	}
     .homeRecommend_logo {
         width: 14.4rem;
@@ -189,7 +223,9 @@ export default defineComponent({
     }
 	.login_footer_item_text{
 		margin-left: 5rem;
+		text-decoration: underline;
 		display: none;
+		cursor: pointer;
 	}
     .homeRecommend_right_content {
         top: 0;