注册页面新增语言切换

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 = ()=>{