更新支付页面

src/component/HomePage/ExportModel.vue

@@ -80,7 +80,7 @@
 								:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
 								draggable
 								@dragstart="onDragstart(key,imgItem)"
-								@click.stop="isMoible?setDragstart(key,imgItem):''"
+								@click.stop="setDragstart(key,imgItem)"
 							>
 								<div class="exportCanvasBox_img">
 									<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />

src/component/HomePage/renew.vue

@@ -35,8 +35,7 @@
 				<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>
@@ -48,6 +47,18 @@
 							{{ $t('Renew.Yearly') }}
 						</label>
 					</div>
+					<div class="type promotion">
+						<div class="text">{{ $t('Renew.promotionCode') }}:</div>
+						<div class="succeed" v-show="promotionData.error == 'true'">
+							{{promotionData.code}}
+							<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
+						</div>
+						<div class="input" v-show="!promotionData.error || promotionData.error == 'false'">
+							<input type="text" v-model="promotionData.code">
+							<div style="cursor: pointer;" @click="examine">{{ $t('Renew.use') }}</div>
+						</div>
+						<div class="error" v-show="promotionData.error == 'false'">{{promotionData.str}}</div>
+					</div>
 					<div class="type payment">
 						<div class="text">{{ $t('Renew.Payment') }}:</div>
 						<label>
@@ -73,7 +84,6 @@
 						</label>
 					</div>
 				</div>
-				<!-- <div class="activity">{{ $t('Renew.activity1') }}</div> -->
 				<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
 			</div>
 			<div
@@ -136,6 +146,12 @@ export default defineComponent({
 			isShowMark_:false,
 		})
 		let renewData = reactive({
+			promotionData:{
+				code:'',
+				error:'',
+				str:'',
+				oldPrice:'',
+			},
 			personage:computed(()=>{
 			    return {
 					title:t('Renew.PersonalVersion'),
@@ -163,6 +179,10 @@ export default defineComponent({
 						year:'HKD / Year',
 					},
 					type:'year',
+					autoRenewal:{
+						text:t('Renew.automatically'),
+						value:true,
+					},
 					typeList:['year'],
 					info:'Customised plan',
 				}
@@ -177,6 +197,10 @@ export default defineComponent({
 					year:'HKD / Year',
 				},
 				type:'year',
+				autoRenewal:{
+					text:t('Renew.automatically'),
+					value:true,
+				},
 				typeList:['year'],
 				info:'Customised plan',
 				}
@@ -227,6 +251,7 @@ export default defineComponent({
 				returnUrl:url,
 				subscribeType:subscribeType,//yearly为年费，monthly为月费
 				wallet:'ALIPAYHK',
+				promotionCode:renewData.promotionData.code,				
 			}
 			let httpsUrl = Https.httpUrls.payStripe
 			payMethodData.isShowMark_ = true
@@ -263,6 +288,38 @@ export default defineComponent({
 			renew.renewModel = false
 			setPaidBack()
 		}
+		const examine = ()=>{
+			// renewData.promotionData.error
+			let price = renewData.current?.price[renewData.current?.type]
+			const normalNumber = Number(price.replace(/,/g, ''));
+			if(!renewData.promotionData.code){
+				return
+			}
+			let data = {
+				promotionCode:renewData.promotionData.code,
+				price:normalNumber,
+			}
+			Https.axiosGet(Https.httpUrls.checkCoupon,{params:data}).then((rv:any)=>{
+				if(rv){
+					if(rv.status == "valid"){
+						renewData.promotionData.error = 'true'
+						renewData.promotionData.oldPrice = renewData.current?.price[renewData.current?.type]
+						renewData.current.price[renewData.current.type] = (Number(rv.discountedPrice)).toLocaleString()
+
+					}else{
+						renewData.promotionData.error = 'false'
+						renewData.promotionData.str = rv.message
+					}
+				}else{
+				}
+			})
+		}
+		const clearPromotionCode = ()=>{
+			renewData.promotionData.error = '';
+			renewData.promotionData.code = ''
+			renewData.current.price[renewData.current.type] = renewData.promotionData.oldPrice
+			renewData.promotionData.oldPrice = ''
+		}
         return{
 			store,
 			...toRefs(renew),
@@ -275,6 +332,8 @@ export default defineComponent({
 			payment,
 			setPaidBack,
 			completePayment,
+			examine,
+			clearPromotionCode,
         }
     },
     data() {
@@ -315,17 +374,6 @@ export default defineComponent({
 				flex: 1;
 				justify-content: space-between;
 				margin-bottom: 3rem;
-				position: relative;
-			}
-			.activity{
-				position: absolute;
-				top: 0;
-				background: linear-gradient(88.13deg, #fbd2ff .91%, #e6d3ff 52.5%, #b694ff 101.09%);
-				border-radius: 0 2.8rem 0 1rem;
-				font-size: 2.4rem;
-				font-weight: 600;
-				padding: 1.5rem 2rem;
-				right: 0;
 			}
 			.price{
 				font-size: 6rem;
@@ -339,6 +387,41 @@ export default defineComponent({
 			}
 			.type{
 				display: flex;
+				&.promotion{
+					flex-wrap: wrap;
+					justify-content: center;
+					align-items: center;
+					> .succeed{
+						padding: 1rem;
+						display: flex;
+						align-items: center;
+						border-radius: 1rem;
+						background: #eee;
+						> i{
+							display: flex;
+							margin-left: 1rem;
+							cursor: pointer;
+						}
+					}
+					> .input{
+						display: flex;
+						align-items: center;
+						border-radius: 2rem;
+						border: 2px solid #000;
+						overflow: hidden;
+						padding: 0 1rem;
+						input{
+							border: none;
+							height: 3rem;
+						}
+					}
+					> .error{
+						color: red;
+						width: 100%;
+						text-align: center;
+						font-size: 1.2rem;
+					}
+				}
 				> .text{
 					margin-right: 2rem;
 					// font-weight: 600;