优化收银台

src/views/cashier.vue

@@ -3,34 +3,29 @@
     <div class="payment-view">
       <div>
         <div class="info-wrap">
-          <el-input
-              v-model="amount"
-              style="width: 100%"
-              placeholder="Please input"
-              class="input-with-select"
-          >
+          <el-input v-model="amount" style="width: 100%" placeholder="Please input" class="input-with-select">
             <template #append>
               <el-select v-model="currency" placeholder="Select" style="width: 115px">
-                <el-option label="CNY" value="CNY"/>
-                <el-option label="USD" value="USD"/>
-                <el-option label="USDM" value="USDM"/>
+                <el-option label="CNY" value="CNY" />
+                <el-option label="USD" value="USD" />
+                <el-option label="USDM" value="USDM" />
               </el-select>
             </template>
           </el-input>
           <el-col style="text-align: right; margin-top: 12px" :span="24" v-loading="ARS_amount_loading">
-            汇率: 1.00{{currency}} ≈ <span style="font-size: 12px">{{ARS_amount}}ARS</span>
+            汇率: 1.00{{ currency }} ≈ <span style="font-size: 12px">{{ ARS_amount }}ARS</span>
           </el-col>
           <el-col style="text-align: right; margin-top: 12px">
-            <el-button type="primary" @click="createOrderFn">生成收款码</el-button>
+            <el-button v-if="showCreateOrder" type="primary" @click="createOrderFn">生成收款码</el-button>
           </el-col>
         </div>
         <br>
         <div v-if="order.payUrl">
           <div class="info-wrap">
             <div class="trans-no">
-                <span style="vertical-align: inherit;">
-                    <span style="vertical-align: inherit;">{{ order.orderNo }}</span>
-                </span>
+              <span style="vertical-align: inherit;">
+                <span style="vertical-align: inherit;">{{ order.orderNo }}</span>
+              </span>
             </div>
             <div class="van-divider"></div>
             <div class="info-box">
@@ -41,7 +36,7 @@
               </div>
               <div class="val">
                 <span style="vertical-align: inherit;">
-                  <span style="vertical-align: inherit;">{{order.amount}} ARS</span>
+                  <span style="vertical-align: inherit;">{{ order.arsAmount }} ARS</span>
                 </span>
               </div>
             </div>
@@ -70,7 +65,10 @@
             </div>
             <div class="amount-box">
               <div>{{ order.outOrderNo }}</div>
-              <div><span>{{ order.amount }}</span>ARS≈<span>{{ amount }}</span>{{currency}} , 实际支付<span>{{ amount }}</span>{{currency === 'CNY'? '人民币': currency}}</div>
+              <div><span>{{ order.arsAmount }}</span>ARS≈<span>{{ order.amount }}</span>{{ order.currency }} ,
+                实际支付<span><b >{{
+                  order.amount
+                  }}</b></span>{{ order.currency === 'CNY' ? '人民币' : order.currency }}</div>
             </div>
           </div>
         </div>
@@ -80,12 +78,12 @@
 </template>
 
 <script setup>
-import {ref, onMounted, computed, watch} from 'vue'
-import {createOrder, getOrder, getConversionFactors} from '@/api'
-import {useRoute} from 'vue-router';
+import { ref, onMounted, computed, watch } from 'vue'
+import { createOrder, getOrder, getConversionFactors } from '@/api'
+import { useRoute } from 'vue-router';
 import _ from 'lodash'
 import md5 from "md5";
-
+import { ElMessage } from 'element-plus';
 import dayjs from "dayjs";
 
 function getNewOutOrderNo() {
@@ -95,12 +93,19 @@ function getNewOutOrderNo() {
 const loading = ref(false);
 const route = useRoute()
 const orderNo = route.query.t || ''
-const mchId = route.query.mchId || ''
+const showCreateOrder = ref(true)
+let mchId = route.query.mchId
+let key = route.query.key
+if (!mchId || !key) {
+  showCreateOrder.value = false;
+  mchId = 'TEZT'
+  key = '32394ae8b550485c53326f10764f8492'
+}
+
 const amount = ref(0)
 const ARS_amount = ref(0)
 const currency = ref('');
-const  ARS_amount_loading = ref(false);
-import {ElMessage} from 'element-plus';
+const ARS_amount_loading = ref(false);
 
 
 const basePre = 'data:image/png;base64,';
@@ -109,26 +114,28 @@ const order = ref({
   amount: 0,
   payUrl: '',
   returnUrl: '',
-  status: 0
+  status: 0,
+  currency: "ARS",
+  arsAmount: 0
 })
 
-
 const getOrderInfo = async function () {
-  if(!orderNo) return
+  if (!orderNo) return
   const data = await getOrder({
     orderNo
   });
-  console.log(data)
   order.value.orderNo = data.orderNo;
   order.value.amount = data.amount;
   order.value.returnUrl = data.returnUrl;
   order.value.status = data.status;
   order.value.payUrl = basePre + data.payUrl;
+  order.value.currency = data.currency
+  order.value.arsAmount = convertStringToNumberWithTwoDecimals(await getAmount(data.currency, data.amount));
   if (+order.value.status === 0) {
     return;
   }
   if (+order.value.status === 1) {
-    ElMessage({message: '订单已支付，并将跳转到商家页面。', type: 'success'})
+    ElMessage({ message: '订单已支付，并将跳转到商家页面。', type: 'success' })
   }
   if (+order.value.status === 2 || +order.status === 3) {
     ElMessage({
@@ -155,13 +162,13 @@ function convertStringToNumberWithTwoDecimals(input) {
 }
 
 
-const getAmount = async () => {
-  // if(currency.value === 'CNY')  {
-  //   return amount.value * 144.38
-  // }
-  const  res = await getConversionFactors({
-    currency: currency.value,
-    amount: Number(amount.value).toFixed(2)
+const getAmount = async (currency, amount) => {
+  if (currency === 'ARS') {
+    return amount;
+  }
+  const res = await getConversionFactors({
+    currency: currency,
+    amount: Number(amount).toFixed(2)
   })
   return res.amount
 }
@@ -169,7 +176,7 @@ const getAmount = async () => {
 watch(currency, async () => {
   // if(currency.value === 'CNY')  return
   ARS_amount_loading.value = true
-  const  res = await getConversionFactors({
+  const res = await getConversionFactors({
     currency: currency.value,
     amount: '1.00'
   })
@@ -179,38 +186,42 @@ watch(currency, async () => {
 
 const createOrderFn = async () => {
   loading.value = true
-  if(_.isNumber(amount.value) && amount.value < 1) {
+  if (_.isNumber(amount.value) && amount.value < 1) {
     loading.value = false
-    ElMessage({message: '请输入有效金额', type: 'warning'})
+    ElMessage({ message: '请输入有效金额', type: 'warning' })
     return
   }
   const formDate = {
-    mchId: "TEST",
+    mchId: mchId,
     outOrderNo: getNewOutOrderNo(),
-    notifyUrl: "http://157.175.73.225/api/admin/dj/open/notifyTest",
+    notifyUrl: "https://padmin.pvsargentina.com/api/admin/dj/open/notifyTest",
     returnUrl: "https://www.baidu.com",
-    amount: convertStringToNumberWithTwoDecimals(await getAmount()),
+    amount: convertStringToNumberWithTwoDecimals(await getAmount(currency.value, amount.value)),
     payType: "QRCODE",
     userIp: "127.0.0.1",
     userId: "test",
     currency: 'ARS',
   }
-  if(formDate.amount > 99999999) {
+  if (formDate.amount > 99999999) {
     loading.value = false
-    ElMessage({message: '您输入的金额过大，无法创建支付订单。', type: 'warning'})
+    ElMessage({ message: '您输入的金额过大，无法创建支付订单。', type: 'warning' })
     return
   }
   // return
-  const signStr = md5(signSort(formDate) + `&key=${key.value}`)
+  const signStr = md5(signSort(formDate) + `&key=${key}`)
   try {
     const res = await createOrder({
       ...formDate,
       sign: signStr
     });
     order.value = {
-      ...res,
-      amount: formDate.amount,
-      payUrl: `data:image/png;base64, ${res.hasOwnProperty('qrImage') ? res.qrImage :  res?.payUrl}`
+      orderNo: res.orderNo,
+      amount: amount.value,
+      payUrl: basePre + res.qrImage,
+      returnUrl: formDate.returnUrl,
+      status: 0,
+      currency: currency.value,
+      arsAmount: formDate.amount,
     }
   } catch (err) {
     console.log(192, err);
@@ -219,23 +230,6 @@ const createOrderFn = async () => {
     loading.value = false
   }
 }
-const key = ref("32394ae8b550485c53326f10764f8492");
-
-const defaultForm = {
-  mchId: "TEST",
-  outOrderNo: getNewOutOrderNo(),
-  notifyUrl: "http://157.175.73.225/api/admin/dj/open/notifyTest",
-  returnUrl: "https://www.baidu.com",
-  amount: 100,
-  payType: "",
-  userIp: "127.0.0.1",
-  userId: "test",
-  currency: 'USD'
-};
-
-const sign = computed(() => {
-  return md5(signSort(form.value) + `&key=${key.value}`);
-});
 
 function signSort(args) {
   var keys = Object.keys(args);
@@ -254,9 +248,6 @@ function signSort(args) {
   return string;
 }
 
-// http://localhost:8001/admin/dj/open/pvs/conversion-factors?currency=USDM&amount=100.00
-
-
 onMounted(() => {
   getOrderInfo()
   currency.value = "CNY"
@@ -331,6 +322,7 @@ onMounted(() => {
   width: 244px;
   height: 244px;
   margin-top: 15px;
+
   .logo-box {
     display: flex;
     width: 70%;
@@ -339,23 +331,26 @@ onMounted(() => {
     position: relative;
     justify-content: space-between;
     height: 40px;
+
     img {
       display: inline-block;
       // width: 100px;
     }
   }
 }
+
 .amount-box {
-    position: relative;
-    z-index: 2;
-    margin: -10px auto 0;
-    font-size: 12px;
-    width: 300px;
-    text-align: center;
-    span{
-      font-size: 15px;
-    }
+  position: relative;
+  z-index: 2;
+  margin: -10px auto 0;
+  font-size: 12px;
+  width: 350;
+  text-align: center;
+
+  span {
+    font-size: 15px;
   }
+}
 
 .vaImg {
   width: 240px;