From 034d7676479a9b9081fcf5a199831b56d4f84d1b Mon Sep 17 00:00:00 2001
From: callmeyan <yaclty2@gmail.com>
Date: Sat, 25 May 2024 22:22:42 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=B7=BB=E5=8A=A0=E7=A9=BA?=
 =?UTF-8?q?=E7=99=BD=E4=BA=8C=E7=BB=B4=E7=A0=81;=E4=BA=8C=E7=BB=B4?=
 =?UTF-8?q?=E7=A0=81=E7=94=9F=E6=88=90=E5=9C=B0=E5=9D=80=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=88=B0docker=E8=BF=90=E8=A1=8C=E7=8E=AF=E5=A2=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile                              |   3 ++-
 index.html                              |   1 +
 src/assets/images/pay/blank-qr-code.png | Bin 0 -> 4238 bytes
 src/components/bill/qr-code.tsx         |  15 ++++++++++++++-
 src/pages/manual/index.tsx              |   4 +++-
 src/vite-env.d.ts                       |  10 +++++-----
 vite.config.ts                          |  10 ++++++----
 7 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/images/pay/blank-qr-code.png

diff --git a/Dockerfile b/Dockerfile
index 2efe614..715ff42 100644
--- a/Dockerfile
+++ b/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服务
diff --git a/index.html b/index.html
index 7a1d1bd..6638445 100644
--- a/index.html
+++ b/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)}
diff --git a/src/assets/images/pay/blank-qr-code.png b/src/assets/images/pay/blank-qr-code.png
new file mode 100644
index 0000000000000000000000000000000000000000..19a01d85ab2c11811a611638fcef7fc9c65410d5
GIT binary patch
literal 4238
zcma)<cT`i$_QyfGNEcM3NTdh|3V|RXJ@h6hC4mG%gn-o0qy(gwD7*+rFM^>PklsOh
zCv*ekqR)FV5Q<8I5CLDjfBt^!zV&9UbLPy<o^#gOGkZSYoqEs8nCraoc?JdsE>jb*
zExo4wzSvpm_mmx|7QJE&vNhIcz|Dwk(HqP``lb)q=_QKYJ%xdR_l_x8@4?f;T_VhW
z%|wXpYoyd>@R<3V${}^H2K(C$aUgk<#<*NTX8UIlJ(6HT-8FZX!1`-b=gpMVmF}8G
zd*uSN_U<~qk%;wkTS~5@{elP8)jT|fVKZvXndzVVp9@#RKDTpag<(kw4ZP@*S{BmR
z^R0G%sm@K#bV2Df<NHl>^9@udI$wxsAj}91&atEBC797}y;!3Zh4Xag3!R#fSPW0n
zQbAEaDzRn&jpgi<VlB&zsIa6Igt9`?&`Dtm{AkY{{UR?s>e!RowU3YF{5>uEMuZgL
zx(mwDwnK<86S4Kd_;X1A4}|tX+)vrO<9^SNJ<KqaEa=~Y(bjh$`IpH-;al57HZ>;y
zwu?5u{Jvm}itU~%#*X5yhKf;UUC^TGM=!{snsO@uC&;a7Ur<?vp^nFy$&o8aUycBa
z$ro$)S@6R1A?53mL?zk=Lp~I-^c3S_kW27~NR(nhMddd$LDS|5@xaVQZj@{RuHqX8
zZImVVl9n&BLmI7}E8dD9shtzk_p|OE*e4rLEUR<SCI(5WuG^k@JGpng7IWO<O+qb1
zdHj~>PIOQdZWIf~rh%Ddo^uAe`#s2T2)H%O!gr<P^3q$j9<gbGwOt0j)C-n{DrSNl
zd|bjm*!HCOe`ef#%LW6pwyr(v8)7{te5yaVsTCWE{y?J;z41!QPy45>h0~8ZQgQvK
zx95^}x4MXYr<W4enFPYd11pI=z0>h)TpFKO=^ZgaQT}^WU$J#>{5zky4Cw`3huM%%
z(rXaNyYK+7BYCW$vH=Vtr(|5Or9HT(cHDq-&&h?p%UXU{>yYR)?u{>K>~SoAYc=D6
zP1%RvOsT%`E%N@tK-i_TSD9*`8TxNAi(X@3*U)9)4SvROjl{sHi)TFdtdxnFL641{
zA&#4u;r|*SsN1S5S#talx*RZtrNsxfBAecIkCAWJ53>sut0=Jd&6aUIG&{m(L`n1e
z7cq6eG%^<&B{#3b>|*dNqMw+*n_HrzEmW!|K|G{Z(LnoD>B_&leFE)HKh@HFoS3f$
zt18d}FYaQ-zKSJQ^YdRBnKFQ4)nq(@^-=)_p-9l007io7AOAcy<${|>e&MUno$JAV
zE%6G1f2z{P2|l+x>{WDJqwN8J@~7F^^xZxPi`T63QpzoSWd=5C{-Ag#J{MwX<*6rB
z!7fMghEilI{~D#ad&#Bd=|rDFOV7V}Oyy~MorY@!sw?O$J7L(a=a$ObNm9p^Z-+al
zA5D)Frk=(c<knVhUmr{s9jZN%ee>dWJV!+L#QymFt4@IOz?k13U+Ra`6aVG1H9F<5
zAlelY#~y)#ff@*`#wXHm_y#~!?1zsjzOz}Zuct;d#3|uN>pn#y^X#rpu<0dQNOP@s
zMQ?~UDSc2a*8=@|@KB>VI$tSZsdyZ@;JdU{+NJH9l9F)TGI`i}!-IVPu;4;=fnSpq
z8%ioII*3?-p2&r5)}E_J3;(4ZqCx8QZYrp<5tDOiA#}mzI-B%<KnsexQ1c&#0xAC1
zmOPy&{Fa{a@Ou3NY?I9M5CF>G_otR;-L@ZIVWr?q)3SCfY3g8O#&gX+M4iNN&jA10
z_e9}zNo=jPZc=X+r8*_H1`pi<l9b|lgSWX@@1g>ub}EUAUk}^Jlvl1rToJxI<u(dS
zY~s72v2A^#2bi2t(XCLtVN{`t6pYu1!g9R2X6djbuDu$9UC>)O;L{3Qy#WMe_@o`<
z1JQq*JkF-h7ZQtAu(%pj@@~jWa-RfHJot39V?j>_K%;&uM<G>efCqXx{-pMo)cN&K
zRdDzj<aDn}!Cyl>7ywXc+%3(!n;<YEc<R|=&K+IaGB%0J*aXKiYmu>!Jj5VAWs3kO
ziNf1BcL>xQqtJLcwAx)QYk*sixd@@1*mm*I*=0hgVrTPlkIG8U_m?-jdEQTzQ!BS(
zw?4Pp-PV)IPlm}6q=ICuaE7gop0Z+<ke6EK87*VdS40Tdmqgkhmbc^1Yw*p{7AU&(
zH>slXl8*0{OiCLee>TGN$w7oVPj}1cH=|HVPA|zmerJ5@X8F)+rh9EKtH`g#<UF1h
zlh(tdIS_7~INsQN^81e!8X+5)z8@R#lyp<~$X!$Z9Vz<;L!s2(o<vpq8j~^?#29^j
z`L|r01Yk3lAYb3T+BUeM=C@kMz1?a%tf*D`BDeetxG@kV8rf4-C5hq5M~Ha0*K=x+
z9JVp)?OW^0wS7%W;n3LzpSZ$KrUcf1IuHKqf$;%WAvfLXW4qvnsFE=^1k>T-Y7=<z
zw4x$$->+RJi}&Z=5V4N6D9;QttRoKWQ(d{*p2Mk8vBX+(>38JcCqjg|4B%Vd9u?Qy
znlwWC>S|^|89Z%I8q3eOj(#t9>&lMtbt(VyDuZW(k0~Zd;$mvB)!J!+6PL!JV^Buk
zC~JCbX_wvnuO03*#l6n3PP4~rq?(A8qszinqNrvoYTR9i6z!drJYnK{xZ@Q8Zr?!~
zIk@$Blu%3Ssq+Q{rk@kWzxSn2S|;DDk8ym9JQ#Rxa_=wyyGqcrHf?*q?WX~n#@W$C
z<{q)7z_)%FA%bdnQO;wpRB;4(1n1|d8OdT_G6`}`Xo$-*CY+2eR<*z*5FP8mV{};E
zf~js&uv+x<PU*n7(_WiR*iG9x@?>nA;*SJHnga|9e3?Dqi7T$vH!9Ik`bK$zQRx1c
zD=RR=C%G^MvHPvu_xaAq9UgT|^3oGJENg=Z0JlXACub|bn&OkFm28W)acAFShHtU;
zwrlW}wW?dgM%@GcDTt3v;^vZ`n}d@&wHv6OOxy!Z-QDMK^cXjvls2s)IF~2HZue*1
z_G(&U$i{?_F`fJ%b{V{ye(==PDAYmR`L2J@Eo@qX7~V+4upaE*-@cE8nI7ct?62Ck
zb_nYAy~r0rou~decMw*R<13X%Z_Q`j6WQSj`6KBb(?1KE_PN8yHF{2mQW@qyMB(=c
z?p^`qzx)SVf29&>q#tkSLO@!W_dtGNL}0_h%KYUqPWchcZl5#|y;W>D9mbgk=NnJr
zrRD@)KYyy*nu6#a^CZ8pUMllFFc9Ozw7h-a%?hKVN5nAlgDb_)V)2)KP*nCrW)mTH
z_U#+o{e`kV<qcO46EF%OQ6^+9z_b|^WKwnv0%tA|3UVP5f9go_VQji5%q-EbXVWbz
zhHrbE-2hyN4$Nt)%otPp4nuQ#$*r1_sd*d4h11KhJ!bQSp5vVC1wK)kR0u#hzi|4G
zPH$_J0{r7oC##t_y4OESzSDJoN=I4~af(h1E0J%J13%ib3R$$^!=`TNl;_ey^@OG7
z%K=0FKBD3~LHu+!vL*nyLY4Mq?JmdMgt++isG*z#CQb2=JUmx0jO2RyIu>XnP#uXs
zgkKd>OKa<gIR~<c97-oujlGBa1$U*7T(wAnLnFpl+VA(Bx%ygE1FFfjdTfqd5vb{Q
z*CwuZ+4S-+(&_hISRYRO!53;wiLogOXuKl@Fp73m$`3;mOGhtH!yYjKt7x(u(WRP0
z-uUb9$Nz1xFzO?3Ln)~4)zx%FtrV3bPQ48m^h-R&^2pQQc`=Nt;rkyMrBv$Yh;L3S
zkZxi?8^4c^ekp(Uc0EKB4HYa*;|nv%ELVL4kszR8YvLk#yx`6}po@?xsWvZxs1v+u
zt=pxtu2Q!6rIDCK{r>e5v#1}U`&8h-=9LtC_~cW<({oS@wXRsXPFhAa?wLBf#`;Ay
z&WK_31~YTy|156$%Y-^@T94KFq>#SU<tQyx@h8>V%^f~U{Tmz_q)acRi<>JO{(Tf8
zbVnO=!EI9%ibWzpn)7xoC3Nn<tQqq;klVNl!x$tqT5_{Zr(+aqyCU~17zt{!y~5I;
z^fB)2_{lo~puD#|V7tcZxN?Nt#wbD;A~K#$T7$#qekvWvP_g}fZFukZ%%=w{ZpL6E
zA?~6f`4h40n#~Yiy|8<SZQ{U~Ayv(0yD$5lbYYS{ad!AQdG0D;H56~(AUsVMVa>-+
z9|-&SDs<*w*_q&>3ykdKxhH&q!1=TbOU?b|YUbO}UGKTszvCiXVTincw<*v^Ktn6!
zhYg=fdYM+vF5|j!WxN#+iKPQ4;n8lS{*0rDJ7T9g$r1L3w^UU_G?+j9Q#m1bdhrI^
zZETZX{r*fu#QNh3x}hwc_zP**E!n-%29v>RBrf@Mm4s4*TKXfySIeCE;-B8RTCH3G
z1$(Tg1CQS6Y_2=4F|?6<@Z_-kQSDWut%rz$8P=i{6S?D$<;3m2U{X2kSy!+INpJy^
z>@oU5mw&ZlL2ov~%W5iFacvP`Z*R<~GPhMKz_(R{ywV-GY(C1p#?+oO!$xPjIxs^-
z#ctc25Q69Kw<bs7Q&XZ*Cy0`p8?iZNhfSVa@1{WvLV{p=fAbg!5`js~GbURvFkKyG
zy)BVj>Pg4_mqybh<4_N=B_Qjw<@3@c@Iek@xmeN(?Bhn6ZW$BO=bpS)Rq6tX{El!y
zyElIz6$1|tyQVKcacka0&+MOz%!yc;QJ}}|@90RmK-yEbJXrBE)JBvA9!icADg6D<
zAI3*x#j;1i&Gip3cqTIvl;94Sc!vU>WJbtuw{eQ={z-)1(o$I|FQ5zS5Nd6$lxv>s
zO^*f=n|j*FX6Lu^YxQ%C`tkowwErWd>lE)lE^`)+ibg^~$4B%09N+u6gdn1Gw`#YW
zrauqvHrTL6%^oglwM9i8@oo3M=i#O7>G5$K#V-B!&ZWYqR>yLJT)Q5>aFJ5`b#06r
zr6A4qkqErj(hVL#@20`Gb!<de)rF6*^X1ov$2o!Yv@<>6(TuXTuBt;jI`eNA=X{?x
zbdumNdxV0&W))c<C&)JtnkbHP777Yu@|c`<P;%dA3hW16Z!r$|J)ldhuhJqX0$<S3
z<&p|Enk|T9Wyex<D~JFd`=s4n2cM*8lQd@#x$9dl@~p5B+`3XMnTs3j33sZ<f9!Qk
z{%rh{=G>_9^^pq-!fzbX4=k`#dtK1&aR03_7S$=|bi&D%A`77>&>fK8J0kj0z-;Pv
zU$^4!PEy6ov*BdU7`UX`a?U>No+;0z{WUD^>`{Z7T1$ujKZEW6kKh-7F^cJ|nS`2e
QasM7QHM9cb^dH9k2ajy%0{{R3

literal 0
HcmV?d00001

diff --git a/src/components/bill/qr-code.tsx b/src/components/bill/qr-code.tsx
index 59b6ecf..a119d9e 100644
--- a/src/components/bill/qr-code.tsx
+++ b/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;
diff --git a/src/pages/manual/index.tsx b/src/pages/manual/index.tsx
index d7386c5..5bc559a 100644
--- a/src/pages/manual/index.tsx
+++ b/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>
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index c7905e2..4b34e00 100644
--- a/src/vite-env.d.ts
+++ b/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;
-
-interface ImportMetaEnv {
-    // 系统部署运行地址(主要用于支付二维码生成)
-    readonly VITE_APP_SITE_URL: string
-}
+declare const APP_SITE_URL:string;
+declare const AppConfig:{
+// 系统部署运行地址(主要用于支付二维码生成)
+    SITE_URL:string
+};
 
 declare type BasicComponentProps = {
     children?: React.ReactNode;
diff --git a/vite.config.ts b/vite.config.ts
index 52c4d10..1520047 100644
--- a/vite.config.ts
+++ b/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('/'),
-            APP_SITE_URL: JSON.stringify(process.env.VITE_APP_SITE_URL)
+            AppConfig: JSON.stringify({
+                SITE_URL: process.env.APP_SITE_URL || null,
+            }),
         },
         resolve: {
             alias: {
                 '@': resolve(__dirname, './src')
             }
         },
-        server:{
-            proxy:{
+        server: {
+            proxy: {
                 '/api': {
                     target: 'http://43.136.175.109:50000',
                     changeOrigin: true,