first commit

src/static/app/js/updateView.ts

@@ -0,0 +1,352 @@
+import {installApp} from '@/utils/update'
+import {useConfigStore} from '@/store'
+import Config from "@/config";
+import {i18n} from "@/locale";
+
+type UpdateView = {
+    mask: PlusNativeObjView | null
+    view: PlusNativeObjView | null
+    viewHotFixInit: () => void
+    viewHotFixUpdate: (progress: number) => void
+    viewHotFixHide: () => void
+}
+
+type TipView = {
+    mask: PlusNativeObjView | null
+    view: PlusNativeObjView | null
+    viewHotFixInit: (versionInfo: any, platform: any) => void
+    viewHotFixHide: () => void
+}
+
+const updateView: UpdateView = {
+    mask: null,
+    view: null,
+    viewHotFixInit() {
+        if (!this.mask && plus.nativeObj.View) {
+            this.mask = new plus.nativeObj.View('viewHotFixMask', {
+                bottom: '0px',
+                left: '0px',
+                top: '0px',
+                width: '100%',
+                // position: 'dock'
+            })
+        }
+
+        this.mask?.drawRect({
+            color: 'rgba(0, 0, 0, 0.4)',
+            // color: 'rgba(255, 255, 255, 0.0)'// 有颜色
+        })
+        this.mask?.addEventListener(
+            'click',
+            () => {
+                console.log('--------------->view touchend')
+            },
+            false,
+        )
+        this.mask?.show()
+
+        if (!this.view && plus.nativeObj.View) {
+            this.view = new plus.nativeObj.View(
+                'viewHotFixView',
+                {
+                    top: '45%',
+                    left: '5%',
+                    width: '90%',
+                    height: '80px',
+                    position: 'dock',
+                },
+                [
+                    {
+                        tag: 'rect',
+                        id: 'processGB',
+                        position: {
+                            bottom: '35px',
+                            left: '5%',
+                            width: '90%',
+                            height: '9px',
+                        },
+                        rectStyles: {
+                            color: '#E5E5E5',
+                            radius: '12px',
+                        },
+                    },
+                    {
+                        tag: 'rect',
+                        id: 'processFR',
+                        position: {
+                            bottom: '35px',
+                            left: '5%',
+                            width: '0',
+                            height: '9px',
+                        },
+                        rectStyles: {
+                            color: '#2D2D2D',
+                            radius: '12px',
+                        },
+                    },
+                    {
+                        tag: 'font',
+                        id: 'process',
+                        text: '0%',
+                        position: {
+                            bottom: '50px',
+                            left: '0px',
+                            width: '100%',
+                            height: '30px',
+                        },
+                        textStyles: {
+                            align: 'center',
+                            color: '#fff',
+                            size: '15px',
+                        },
+                    },
+                ],
+            )
+        }
+        this.view?.show()
+    },
+    viewHotFixUpdate(progress) {
+        this.view?.drawText(
+            `${progress}%`,
+            {
+                bottom: '50px',
+                left: '0px',
+                width: '100%',
+                height: '30px',
+            },
+            {
+                align: 'center',
+                color: '#fff',
+                size: '15px',
+            },
+            'process',
+        )
+
+        this.view?.drawRect(
+            {
+                color: '#333',
+                radius: '12px',
+            },
+            {
+                bottom: '35px',
+                left: '5%',
+                width: progress * 0.9 + '%',
+                height: '9px',
+            },
+            'processFR',
+        )
+    },
+    viewHotFixHide() {
+        this.view && this.view.hide()
+        this.mask && this.mask.hide()
+    },
+}
+
+const tipView: TipView = {
+    mask: null,
+    view: null,
+    viewHotFixInit(versionInfo, platform) {
+        const configStore = useConfigStore()
+        if (!this.mask && plus.nativeObj.View) {
+            this.mask = new plus.nativeObj.View('viewHotTipFixMask', {
+                bottom: '0px',
+                left: '0px',
+                top: '0px',
+                width: '100%',
+                // position: 'dock'
+            })
+        }
+
+        this.mask?.drawRect({
+            color: 'rgba(0, 0, 0, 0.4)',
+        })
+        if (this.mask?.isVisible()) {
+            this.mask?.hide()
+        }
+        this.mask?.show()
+        const screenWidth = configStore.screenWidth
+
+        const maskWidth = screenWidth * 0.9
+        console.log('maskWidth', maskWidth)
+        if (!this.view && plus.nativeObj.View) {
+            this.view = new plus.nativeObj.View(
+                'viewHotTipView',
+                {
+                    top: '36%',
+                    left: '5%',
+                    width: maskWidth + 'px',
+                    height: '200px',
+                    position: 'dock',
+                },
+
+                [
+                    {
+                        tag: 'rect',
+                        id: 'container',
+                        position: {
+                            bottom: '0',
+                            left: '0',
+                            width: '100%',
+                            height: '100%',
+                        },
+                        rectStyles: {
+                            color: '#f5f5f5',
+                            radius: '14px',
+                        },
+                    },
+                    {
+                        tag: 'font',
+                        id: 'icon',
+                        text: versionInfo.versionNo + ' ' + versionInfo.title,
+                        position: {
+                            top: '16px',
+                            left: '0',
+                            width: '100%',
+                            height: '16px',
+                        },
+                        textStyles: {
+                            align: 'center',
+                            color: '#2D2D2D',
+                            size: '15px',
+                            weight: 'bold',
+                        },
+                    },
+
+                    {
+                        tag: 'font',
+                        id: 'content',
+                        text: versionInfo.content,
+                        position: {
+                            top: '42px',
+                            left: '20px',
+                            width: maskWidth - 40 + 'px',
+                            height: '102px',
+                        },
+                        textStyles: {
+                            align: 'left',
+                            color: '#2D2D2D',
+                            size: '13px',
+                            whiteSpace: 'normal',
+                            // @ts-ignore
+                            overflow: 'ellipsis',
+                        },
+                    },
+
+                    {
+                        tag: 'rect',
+                        id: 'btnLeft',
+                        position: {
+                            bottom: '15px',
+                            left: '36px',
+                            width: '84px',
+                            height: '25px',
+                        },
+                        rectStyles: {
+                            color: '#E5E5E5',
+                            radius: '14px',
+                        },
+                    },
+                    {
+                        tag: 'font',
+                        id: 'btnLeftText',
+                        text: i18n.global.t('common.cancel'),
+                        position: {
+                            bottom: '15px',
+                            left: '36px',
+                            width: '84px',
+                            height: '25px',
+                        },
+                        textStyles: {
+                            align: 'center',
+                            color: '#2D2D2D',
+                            size: '14px',
+                        },
+                    },
+                    {
+                        tag: 'rect',
+                        id: 'btnRight',
+                        position: {
+                            bottom: '15px',
+                            left: maskWidth - 120 + 'px',
+                            width: '84px',
+                            height: '25px',
+                        },
+                        rectStyles: {
+                            color: '#333',
+                            radius: '14px',
+                        },
+                    },
+                    {
+                        tag: 'font',
+                        id: 'btnRightText',
+                        text: i18n.global.t('common.confirm'),
+                        position: {
+                            bottom: '15px',
+                            left: maskWidth - 120 + 'px',
+                            width: '84px',
+                            height: '25px',
+                        },
+                        textStyles: {
+                            align: 'center',
+                            color: '#fff',
+                            size: '14px',
+                        },
+                    },
+                ],
+            )
+        }
+        if (this.view?.isVisible()) {
+            this.view?.hide()
+        }
+        this.view?.show()
+
+        this.view?.setTouchEventRect([
+            {
+                top: '155px',
+                left: '36px',
+                width: '84px',
+                height: '25px',
+            },
+            {
+                top: '155px',
+                left: maskWidth - 120 + 'px',
+                width: '84px',
+                height: '25px',
+            },
+        ])
+
+        this.view?.addEventListener('click', (event) => {
+            console.log('=>(updateView.js:326) cancelBtn', event)
+            const {screenY, clientY, clientX} = event
+            if (screenY - clientX - clientY > 50) {
+                this.viewHotFixHide()
+            }
+        })
+
+        this.view?.addEventListener('click', (event) => {
+            console.log('=>(updateView.js:326) confirmBtn', event)
+            const {screenY, clientY, clientX} = event
+            if (screenY - clientX - clientY < 120) {
+                this.viewHotFixHide()
+                installApp(versionInfo.url)
+                // if (platform === 'Android') {
+                // } else {
+                //     plus.runtime.launchApplication(
+                //         {
+                //             action: `itms-apps://itunes.apple.com/cn/app/id${Config.iosId}?mt=8`,
+                //         },
+                //         function (e) {
+                //             console.log('e', e)
+                //         },
+                //     )
+                // }
+            }
+        })
+    },
+    viewHotFixHide() {
+        this.view && this.view.hide()
+        this.mask && this.mask.hide()
+    },
+}
+
+export {updateView, tipView}

src/static/images/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="38" viewBox="0 0 22 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M16.3552 19.3281L0.692377 34.6982C-0.230792 35.6057 -0.230792 37.0743 0.692377 37.9789C1.6155 38.8849 3.11323 38.8849 4.03635 37.9789L21.3699 20.9681C22.2917 20.0621 22.2917 18.5927 21.3699 17.6896L4.03635 0.679498C3.57336 0.226468 2.96822 0 2.36298 0C1.7577 0 1.15256 0.226515 0.692377 0.680947C-0.230792 1.58696 -0.230792 3.05351 0.692377 3.95952L16.3552 19.3281Z" fill="#3D3D3D"/>
+</svg>