Bläddra i källkod

feat: "Airwallex收单结算页面调整"

Ritchie 1 år sedan
förälder
incheckning
d7b3dba349
4 ändrade filer med 232 tillägg och 137 borttagningar
  1. 7 1
      src/assets/language/en.json
  2. 7 1
      src/assets/language/zh.json
  3. 1 1
      src/router/index.js
  4. 217 134
      src/views/Hpp.vue

+ 7 - 1
src/assets/language/en.json

@@ -625,13 +625,19 @@
   },
   "airwallex": {
     "sunzee": "Sunzee",
+    "checkout": "Checkout",
     "airwallex": "Airwallex",
     "wallet": "Airwallex wallet",
     "amount": "Airwallex amount",
     "payment": "New transfer",
     "paymentDetail": "Payment details",
     "payout": "Payout",
-    "beneficiary": "Beneficiary"
+    "beneficiary": "Beneficiary",
+    "payForIt": "Pay For This",
+    "cancelOrder": "Cancel Order",
+    "productName": "Product Name",
+    "productsNum": "Products Number",
+    "totalPrice": "Total Price"
   },
   "joinpayMch": {
     "withdrawalAccountNo": "Withdrawal account No",

+ 7 - 1
src/assets/language/zh.json

@@ -626,13 +626,19 @@
   },
   "airwallex": {
     "sunzee": "申泽智能",
+    "checkout": "结算",
     "airwallex": "空中云汇",
     "wallet": "空中云汇钱包",
     "amount": "钱包金额",
     "payment": "付款转账",
     "paymentDetail": "付款详情",
     "payout": "付款单",
-    "beneficiary": "收款人"
+    "beneficiary": "收款人",
+    "payForIt": "立即支付",
+    "cancelOrder": "取消订单",
+    "productName": "商品名称",
+    "productsNum": "商品数量",
+    "totalPrice": "合计金额"
   },
   "joinpayMch": {
     "withdrawalAccountNo": "提现账号",

+ 1 - 1
src/router/index.js

@@ -469,7 +469,7 @@ const router = createRouter({
       component: () => import("@/views/device/editAdRule/index"),
       meta: { index: 1 },
     },
-    // 跳转空中云汇
+    // 跳转空中云汇收单-消费者付款
     {
       path: "/hpp",
       name: "Hpp",

+ 217 - 134
src/views/Hpp.vue

@@ -1,94 +1,162 @@
 <template>
-  <div>
-	<s-header :name="$t('airwallex.sunzee')" :noback="false"></s-header>
-    <h2>申泽智能</h2>
-    <button @click="redirectHpp()">去付款Redirect to HPP</button>
-  </div>
+	<div>
+		<s-header :name="$t('airwallex.checkout')" :noback="true"></s-header>
+		<div>
+			<!-- <h2 style="text-align: center;">{{ $t('airwallex.sunzee') }}</h2> -->
+
+			<!-- 这里展示商品名称 * 商品数量  价格 -->
+			<div class="checkout">
+				<br>
+				<br>
+				<span style="text-align: center; display: block; font-size: medium; font-weight: bold;"> Sunzee 棉花糖购物凭证
+				</span>
+				<br>
+				<br>
+				<!-- 商品图片 -->
+				<!-- <span style="text-align: center; display: block;">
+					<van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+				</span> -->
+				<!-- 订单号  订单状态   订单金额 商品名称  数量 -->
+				<van-cell-group inset>
+					<van-cell :title="$t('airwallex.productName')" :value="productsName" />
+					<van-cell :title="$t('airwallex.productsNum')" :value="productsNum" />
+					<van-cell :title="$t('airwallex.totalPrice')" :value="totalPrice" />
+				</van-cell-group>
+
+				<br>
+				<br>
+				<br>
+				<div class="button-container">
+					<!-- 取消按钮 -->
+					<van-button color="#ee0a24" plain @click="cancelOrder()">{{ $t('airwallex.cancelOrder') }}</van-button>
+					<!-- 支付按钮 -->
+					<van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="redirectHpp()">{{
+						$t('airwallex.payForIt') }}</van-button>
+				</div>
+			</div>
+
+			<!-- <div>
+				<van-cell-group inset>
+					<van-cell title="单元格" value="内容" />
+					<van-cell title="单元格" value="内容" label="描述信息" />
+				</van-cell-group>
+			</div> -->
+
+			<!-- <div>
+				<van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" />
+			</div> -->
+
+			<!-- <div>
+				<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
+			</div> -->
+
+			<!-- <van-card num="2" price="2.00" desc="描述信息" title="商品标题" /> -->
+			
+		</div>
+	</div>
 </template>
 
 <script>
 import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements';
 import { useRoute } from "vue-router";
+import { ref } from 'vue';
+import sHeader from "@/components/SimpleHeader";
 
 export default {
-  name: 'Hpp',
-  
-  setup() {
-	const mode = 'payment';
-	const route = useRoute();
-	// const router = useRouter();
-	console.log(route.query.intent_id)
-  	const redirectHppForCheckout = () => {
-  	  redirectToCheckout({
-  	    env: 'demo',
-  	    mode,
-  	    currency: route.query.currency,
-  	    intent_id: route.query.intent_id,
-  	    client_secret: route.query.client_secret,
-  		//主题
-  	    theme: {
-  	      fonts: [
-  	        {
-  	          src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
-  	          family: 'AxLLCircular',
-  	          weight: 400,
-  	        },
-  	      ],
-  	    },
-  	    // successUrl: 'https://www.baidu.com', // 支付成功跳转页面
-  	    // failUrl: 'https://www.baidu.com', // 支付失败跳转页面
-  		logoUrl: '', //支付页面展示商户LOGO
-  	  });
-  	};
-  	const redirectHppForRecurring = () => {
-  	  redirectToCheckout({
-  	    env: 'demo',
-  	    // mode,
-  	    // currency,
-  	    // client_secret,
-  	    recurringOptions: {
-  	      card: {
-  	        next_triggered_by: 'customer',
-  	        merchant_trigger_reason: 'scheduled',
-  	        // currency,
-  	      },
-  	    },
-  	    theme: {
-  	      fonts: [
-  	        {
-  	          src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
-  	          family: 'AxLLCircular',
-  	          weight: 400,
-  	        },
-  	      ],
-  	    },
-  	    // successUrl: 'https://www.google.com',
-  	    // failUrl: 'https://www.google.com',
-  	  });
-  	};
-  	loadAirwallex({
-  	  env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
-  	});
-  	const redirectHpp = async () => {
-  	  try {
-  	    await loadAirwallex({
-  	      env: 'demo', 
-  	    });
-  	    if (mode === 'payment') {
-  	      redirectHppForCheckout();
-  	    } else if (mode === 'recurring') {
-  	      redirectHppForRecurring();
-  	    }
-  	  } catch (error) {
-  	    window.alert('There was an error with HPP redirection', error);
-  	  }
-  	};
-	return {
-	  redirectHpp,
-	  redirectHppForCheckout,
-	  redirectHppForRecurring
-	};
-  }
+	name: 'Hpp',
+	components: { sHeader },
+
+	setup() {
+
+		const productsName = ref('棉花糖');
+		const productsNum = ref('3');
+		const totalPrice = ref('2.00');
+
+		const mode = 'payment';
+		const route = useRoute();
+		// const router = useRouter();
+		console.log(route.query.intent_id)
+		const redirectHppForCheckout = () => {
+			redirectToCheckout({
+				env: 'demo',
+				mode,
+				currency: route.query.currency,
+				intent_id: route.query.intent_id,
+				client_secret: route.query.client_secret,
+				//主题
+				theme: {
+					fonts: [
+						{
+							src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
+							family: 'AxLLCircular',
+							weight: 400,
+						},
+					],
+				},
+				// successUrl: 'https://www.baidu.com', // 支付成功跳转页面
+				// failUrl: 'https://www.baidu.com', // 支付失败跳转页面
+				logoUrl: '', //支付页面展示商户LOGO
+			});
+		};
+		const redirectHppForRecurring = () => {
+			redirectToCheckout({
+				env: 'demo',
+				// mode,
+				// currency,
+				// client_secret,
+				recurringOptions: {
+					card: {
+						next_triggered_by: 'customer',
+						merchant_trigger_reason: 'scheduled',
+						// currency,
+					},
+				},
+				theme: {
+					fonts: [
+						{
+							src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
+							family: 'AxLLCircular',
+							weight: 400,
+						},
+					],
+				},
+				// successUrl: 'https://www.google.com',
+				// failUrl: 'https://www.google.com',
+			});
+		};
+		loadAirwallex({
+			env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
+		});
+		const redirectHpp = async () => {
+			try {
+				await loadAirwallex({
+					env: 'demo',
+				});
+				if (mode === 'payment') {
+					redirectHppForCheckout();
+				} else if (mode === 'recurring') {
+					redirectHppForRecurring();
+				}
+			} catch (error) {
+				window.alert('There was an error with HPP redirection', error);
+			}
+		};
+
+		const cancelOrder = async () => {
+			// 返回浏览器历史记录上一页
+			window.history.back();
+		}
+
+		return {
+			redirectHpp,
+			redirectHppForCheckout,
+			redirectHppForRecurring,
+			productsName,
+			productsNum,
+			totalPrice,
+			cancelOrder,
+		};
+	}
 };
 
 /* const intent_id = this.$route.query.intent_id;
@@ -98,50 +166,50 @@ const mode = 'payment';
 // console.log(this.intent_id);
 const redirectHppForCheckout = () => {
   redirectToCheckout({
-    env: 'demo',
-    mode,
-    currency,
-    intent_id,
-    client_secret,
+	env: 'demo',
+	mode,
+	currency,
+	intent_id,
+	client_secret,
 	//主题
-    theme: {
-      fonts: [
-        {
-          src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
-          family: 'AxLLCircular',
-          weight: 400,
-        },
-      ],
-    },
-    successUrl: 'https://www.baidu.com', // 支付成功跳转页面
-    failUrl: 'https://www.baidu.com', // 支付失败跳转页面
+	theme: {
+	  fonts: [
+		{
+		  src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
+		  family: 'AxLLCircular',
+		  weight: 400,
+		},
+	  ],
+	},
+	successUrl: 'https://www.baidu.com', // 支付成功跳转页面
+	failUrl: 'https://www.baidu.com', // 支付失败跳转页面
 	logoUrl: '', //支付页面展示商户LOGO
   });
 };
 const redirectHppForRecurring = () => {
   redirectToCheckout({
-    env: 'demo',
-    mode,
-    currency,
-    client_secret,
-    recurringOptions: {
-      card: {
-        next_triggered_by: 'customer',
-        merchant_trigger_reason: 'scheduled',
-        currency,
-      },
-    },
-    theme: {
-      fonts: [
-        {
-          src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
-          family: 'AxLLCircular',
-          weight: 400,
-        },
-      ],
-    },
-    successUrl: 'https://www.google.com',
-    failUrl: 'https://www.google.com',
+	env: 'demo',
+	mode,
+	currency,
+	client_secret,
+	recurringOptions: {
+	  card: {
+		next_triggered_by: 'customer',
+		merchant_trigger_reason: 'scheduled',
+		currency,
+	  },
+	},
+	theme: {
+	  fonts: [
+		{
+		  src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
+		  family: 'AxLLCircular',
+		  weight: 400,
+		},
+	  ],
+	},
+	successUrl: 'https://www.google.com',
+	failUrl: 'https://www.google.com',
   });
 };
 loadAirwallex({
@@ -149,28 +217,43 @@ loadAirwallex({
 });
 const redirectHpp = async () => {
   try {
-    await loadAirwallex({
-      env: 'demo', 
-    });
-    if (mode === 'payment') {
-      redirectHppForCheckout();
-    } else if (mode === 'recurring') {
-      redirectHppForRecurring();
-    }
+	await loadAirwallex({
+	  env: 'demo', 
+	});
+	if (mode === 'payment') {
+	  redirectHppForCheckout();
+	} else if (mode === 'recurring') {
+	  redirectHppForRecurring();
+	}
   } catch (error) {
-    window.alert('There was an error with HPP redirection', error);
+	window.alert('There was an error with HPP redirection', error);
   }
 };
 export default {
   name: 'Hpp',
   data() {
-    return {
-      redirectHpp,
+	return {
+	  redirectHpp,
 	  msg: this.$route.query.intent_id,
 	  intent_id: this.$route.query.intent_id,
 	  client_secret: this.$route.query.client_secret,
 	  currency: this.$route.query.currency
-    };
+	};
   },
 }; */
-</script>
+</script>
+<style>
+.button-container {
+	display: flex;
+	justify-content: space-between;
+}
+
+.button-container button {
+	margin: 0 30px;
+	/* 根据需要调整按钮与容器边缘的距离 */
+}
+
+body {
+  background-color: #f7ece2; /* 设置背景颜色 */
+}
+</style>