✨ 添加空白二维码;二维码生成地址添加到docker运行环境

Dockerfile

@@ -25,6 +25,7 @@ WORKDIR /app
 
 # envs 配置
 ENV APP_API_URL https://baidu.com
+ENV APP_SITE_URL https://pay.wm-app.xyz
 
 # nginx配置文件
 COPY nginx.conf /etc/nginx/conf.d/default.conf.template
@@ -32,7 +33,7 @@ COPY nginx.conf /etc/nginx/conf.d/default.conf.template
 COPY --from=builder /app/dist ./
 # RUN /bin/sh envsubst /etc/nginx/templates/*.template /etc/nginx/conf.d
 WORKDIR /etc/nginx/conf.d/
-ENTRYPOINT  envsubst '$APP_API_URL' < default.conf.template > default.conf && cat default.conf && nginx -g 'daemon off;'
+ENTRYPOINT  sed -i "s~<!--app_url-->~<script>const APP_SITE_URL='${APP_SITE_URL}';</script>~" /app/index.html && envsubst '$APP_API_URL' < default.conf.template > default.conf && cat default.conf && nginx -g 'daemon off;'
 # 暴露80端口
 EXPOSE 80
 # 启动Nginx服务

index.html

@@ -5,6 +5,7 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Payment System</title>
+    <!--app_url-->
     <style>
       @keyframes before{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}
         35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}

src/components/bill/qr-code.tsx

@@ -2,18 +2,31 @@ import React, {CSSProperties, useRef} from "react";
 import QRCodeSvg from "qrcode.react";
 import {saveAs} from "file-saver"
 
+import BlankQRCode from "@/assets/images/pay/blank-qr-code.png"
+
 export type BillQrcodeProps = {
     size?: number;
     bill?: BillModel;
     className?: string;
     style?: CSSProperties;
 }
+
+// get bill payment url
+function getPayUrl(billId?: string | number) {
+    const {host, protocol} = location //AppConfig.SITE_URL
+
+    const rootUrl = (typeof (APP_SITE_URL) == "string" ? APP_SITE_URL : undefined) || `${protocol}//${host}`
+    return `${rootUrl}/pay?bill=${billId || 0}&from=qrcode`
+}
+
 const useBillQRCode = () => {
     const qrCodeRef = useRef<HTMLDivElement>(null)
     const QRCode: React.FC<BillQrcodeProps> = (props) => (
         <div style={props.style} className={props.className} ref={qrCodeRef} data-bill-id={props.bill?.id}>
-            <QRCodeSvg size={props.size} value={'http://localhost:5173/pay?bill=123123123&from=qrcode'}/>
+            {props.bill ? <QRCodeSvg size={props.size} value={getPayUrl(props.bill?.id)}/> : <img src={BlankQRCode}/>}
         </div>);
+
+    // download qr code
     const exportQRCode = () => {
         const canvas = qrCodeRef.current?.querySelector('canvas');
         if (!canvas) return;

src/pages/manual/index.tsx

@@ -12,6 +12,7 @@ import {createManualBill, getBillDetail} from "@/service/api/bill.ts";
 import {useSetState} from "ahooks";
 import {BizError} from "@/service/types.ts";
 import {IconAlertTriangle} from "@douyinfe/semi-icons";
+import dayjs from "dayjs";
 
 const BillDetailItem = (item: { title: string; value: ReactNode }) => {
     return <div className={styles.billDetailItem}>
@@ -101,7 +102,8 @@ export default function Index() {
                     <div className={styles.QRCodeContainer}>
                         <QRCode className={styles.qrCode} bill={billInfo}/>
                     </div>
-                    <div className={styles.billExpTime}> {t('manual.exp_time')} {'12:00'} </div>
+                    {billInfo && <div
+                        className={styles.billExpTime}> {t('manual.exp_time')} {dayjs(billInfo.expiration_time).format('HH:mm')} </div>}
                 </div>
             </Space>
         </div>

src/vite-env.d.ts

@@ -4,11 +4,11 @@
 declare type decimal = number;
 declare type int = number;
 declare type AllType = string | number | object | undefined | null;
-
+declare const APP_SITE_URL:string;
-interface ImportMetaEnv {
+declare const AppConfig:{
-    // 系统部署运行地址(主要用于支付二维码生成)
+// 系统部署运行地址(主要用于支付二维码生成)
-    readonly VITE_APP_SITE_URL: string
+    SITE_URL:string
-}
+};
 
 declare type BasicComponentProps = {
     children?: React.ReactNode;

vite.config.ts

@@ -4,20 +4,22 @@ import {resolve} from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig(({mode}) => {
+
     return {
         plugins: [react()],
         base: mode == 'test' ? './' : '/',
         define: {
-            APP_DEFAULT_PATH: JSON.stringify('/'),
+            AppConfig: JSON.stringify({
-            APP_SITE_URL: JSON.stringify(process.env.VITE_APP_SITE_URL)
+                SITE_URL: process.env.APP_SITE_URL || null,
+            }),
         },
         resolve: {
             alias: {
                 '@': resolve(__dirname, './src')
             }
         },
-        server:{
+        server: {
-            proxy:{
+            proxy: {
                 '/api': {
                     target: 'http://43.136.175.109:50000',
                     changeOrigin: true,