付款页面新增按钮

src/component/HomePage/renew.vue

@@ -31,11 +31,11 @@
 				{{ $t('Renew.title') }}
 			</div>
 			<div class="renew_detail">
-				<div class="name generalModelTitle">{{ current.title }}</div>
+				<div class="name generalModelTitle">{{ current?.title }}</div>
 				<div class="price_box">
 					<div class="price">
 						<sub>$</sub>
-						{{ current.price[current.type] }} <span>{{ current.unit[current.type] }}</span>
+						{{ current?.price[current?.type] }} <span>{{ current?.unit[current?.type] }}</span>
 					</div>
 					<div class="type" v-if="current.typeList.length > 1">
 						<label>
@@ -47,7 +47,13 @@
 							{{ $t('Renew.Yearly') }}
 						</label>
 					</div>
-					<div class="info">{{ current.info }}</div>
+					<div class="autoRenewal">
+						<label>
+							{{ current.autoRenewal.text }} : 
+							<a-switch v-model:checked="current.autoRenewal.value" />
+						</label>
+					</div>
+					<div class="info">{{ current?.info }}</div>
 				</div>
 				<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
 			</div>
@@ -73,7 +79,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent,computed,reactive,toRefs ,onMounted} from "vue";
 import { message } from "ant-design-vue";
 import payMethod from "@/component/Pay/payMethod.vue";
 import { useStore } from "vuex";
@@ -92,22 +98,47 @@ export default defineComponent({
 			pageWidth:'50%'
 		})
 		let renewData = reactive({
-			personage:{
-				title:t('Renew.PersonalVersion'),
-				price:{
-					monthly:'500',
-					year:'5,000',
-				},
-				unit:{
-					monthly:t('Renew.HKDMonth'),
-					year:t('Renew.HKDYear'),
-				},
-				type:'monthly',
-				typeList:['monthly','year'],
-				info:'Tax, VAT not included.',
-			},
-			firm:{
-				title:'Education Edition',
+			personage:computed(()=>{
+			    return {
+					title:t('Renew.PersonalVersion'),
+					price:{
+						monthly:'500',
+						year:'5,000',
+					},
+					unit:{
+						monthly:t('Renew.HKDMonth'),
+						year:t('Renew.HKDYear'),
+					},
+					type:'monthly',
+					autoRenewal:{
+						text:t('Renew.automatically'),
+						value:true,
+					},
+					typeList:['monthly','year'],
+					info:'Tax, VAT not included.',
+				}
+			}),
+			firm:computed(()=>{
+			    return {
+					title:'Education Edition',
+					price:{
+						year:'500',
+					},
+					unit:{
+						year:'HKD / Year',
+					},
+					type:'year',
+					autoRenewal:{
+						text:t('Renew.automatically'),
+						value:true,
+					},
+					typeList:['year'],
+					info:'Customised plan',
+				}
+			}),
+			education:computed(()=>{
+			    return {
+					title:'Enterprise Edition',
 				price:{
 					year:'500',
 				},
@@ -115,21 +146,14 @@ export default defineComponent({
 					year:'HKD / Year',
 				},
 				type:'year',
+				autoRenewal:{
+					text:t('Renew.automatically'),
+					value:true,
+				},
 				typeList:['year'],
 				info:'Customised plan',
-			},
-			education:{
-				title:'Enterprise Edition',
-				price:{
-					year:'500',
-				},
-				unit:{
-					year:'HKD / Year',
-				},
-				type:'year',
-				typeList:['year'],
-				info:'Customised plan',
-			},
+				}
+			}),
 			current:{
 
 			} as any,	
@@ -149,10 +173,12 @@ export default defineComponent({
 			let subscribeType = 'Year'
 			if(renewData.current.type == 'monthly')subscribeType= 'Month'
 			let data = {
-				autoRenewal:true,//one_time为不自动续费
+				autoRenewal:renewData.current.autoRenewal.value,//one_time为不自动续费
+				// autoRenewal:true,//one_time为不自动续费
 				productName:'Subscription',
 				subscribeType,//yearly为年费，monthly为月费
 			}
+			
 			renewData.payMethod.init(data)
 		}
         return{