@uxda/appkit 4.2.75 → 4.2.76

package/src/scenarios/components/share-poster.md

@@ -0,0 +1,273 @@
+##### 组件说明：
+
+该组件是一个海报分享组件，调用者传入图片数据
+
+数据示例：
+
+[
+
+{
+
+    id:"10",
+
+    back:"https://cdn.ddjf.com/static/images/approve_qmx/qmx-dist-post-bg-3.png",
+
+    qr: "https://cdn.ddjf.com/static/images/fnfundkit/orderNums-userInfo.png",
+
+    qrH: 150,
+
+    qrW: 150,
+
+    qrX: 110,
+
+    qrY: 310,
+
+},
+
+{
+
+    id:"11",
+
+    back:"https://cdn.ddjf.com/static/images/approve_qmx/qmx-dist-post-bg-1.png",
+
+    qr: "https://cdn.ddjf.com/static/images/fnfundkit/orderNums-userInfo.png",
+
+    qrH: 150,
+
+    qrW: 150,
+
+    qrX: 110,
+
+    qrY: 310,
+
+},
+
+{
+
+    id:"12",
+
+    back:"https://cdn.ddjf.com/static/images/approve_qmx/qmx-dist-post-bg-2.png",
+
+    qr: "https://cdn.ddjf.com/static/images/fnfundkit/orderNums-userInfo.png",
+
+    qrH: 150,
+
+    qrW: 150,
+
+    qrX: 110,
+
+    qrY: 310,
+
+},
+
+{
+
+    id:"10",
+
+    back:"https://cdn.ddjf.com/static/images/approve_qmx/qmx-dist-post-bg-3.png",
+
+    qr: "https://cdn.ddjf.com/static/images/fnfundkit/orderNums-userInfo.png",
+
+    qrH: 150,
+
+    qrW: 150,
+
+    qrX: 110,
+
+    qrY: 310,
+
+},
+
+{
+
+    id:"11",
+
+    back:"https://cdn.ddjf.com/static/images/approve_qmx/qmx-dist-post-bg-1.png",
+
+    qr: "https://cdn.ddjf.com/static/images/fnfundkit/orderNums-userInfo.png",
+
+    qrH: 150,
+
+    qrW: 150,
+
+    qrX: 110,
+
+    qrY: 310,
+
+},
+
+{
+
+    id:"12",
+
+    back:"https://cdn.ddjf.com/static/images/approve_qmx/qmx-dist-post-bg-2.png",
+
+    qr: "https://cdn.ddjf.com/static/images/fnfundkit/orderNums-userInfo.png",
+
+    qrH: 150,
+
+    qrW: 150,
+
+    qrX: 110,
+
+    qrY: 310,
+
+}]
+
+注意的是， 获取数据后需要 2 倍传入。
+
+##### 属性和方法
+
+![1752718942546](image/share-poster/1752718942546.png)
+
+海报数据如上格式。（back 是海报， qr 是二维码， qrH、qrw 是宽高， qrX、qrY 是二维码坐标位置）
+
+方法 share 是点击确认的回调。
+
+通过 ref 拉起内容 shareRef.value?.openShareDialog()
+
+##### h5 项目中，分享不能够直接弹出分享框，需要先上传到己方服务器，再根据线上的图片地址去分享，示例代码如下：
+
+// h5 分享图片
+
+lettempFilePath=''
+
+lettempFilePath1=''
+
+exportasyncfunctiondownloadImage(filePath:string, showTips1=false) {
+
+if (!tempFilePath||tempFilePath1!==filePath) {
+
+    constloginStore=useLoginStore()
+
+    constsession=loginStore.getLoginSession()
+
+    constupRes=awaitTaro.uploadFile({
+
+    url: BASISAPIS.file_uploadImg,
+
+    filePath: filePath,
+
+    name: 'file',
+
+    formData: {
+
+    objectNo:`H5${USER_TYPE}${Date.now()}`
+
+    },
+
+    header: {
+
+    traceId: generateUniqueId('portal-weapp'),
+
+    token: session||''
+
+    }
+
+    })
+
+    constres=JSON.parse(upRes.data)
+
+    if (res.success) {
+
+    tempFilePath=res.result
+
+    createImage(tempFilePath, showTips1)
+
+    setTimeout(() => {
+
+    tempFilePath=''
+
+    tempFilePath1=''
+
+    }, 10000);
+
+    } else {
+
+    Taro.showToast({
+
+    title: '海报生成失败',
+
+    icon: 'none'
+
+    })
+
+    }
+
+} else {
+
+    createImage(tempFilePath, showTips1)
+
+}
+
+tempFilePath1=filePath
+
+// 创建图片预览弹窗
+
+functioncreateImage(path:string, showTips1=false) {
+
+    constpreviewImage=document.createElement('div')
+
+    previewImage.style.cssText=`
+
+    position: fixed;
+
+    top: 0;
+
+    left: 0;
+
+    width: 100%;
+
+    height: 100%;
+
+    background: rgba(0,0,0,0.7);
+
+    z-index: 9999;
+
+    display: flex;
+
+    flex-direction: column;
+
+    align-items: center;
+
+    justify-content: center;
+
+    `
+
+    constimg=document.createElement('img')
+
+    img.src=path
+
+    img.style.cssText='max-width: 90%; max-height: 80%;'
+
+    consttips=document.createElement('div')
+
+    tips.innerText='长按转发或保存图片'
+
+    tips.style.cssText='color: #fff; margin-top: 15px; font-size: 16px;'
+
+    consttips1=document.createElement('div')
+
+    tips1.innerText='二维码 30 天有效'
+
+    tips1.style.cssText='color: #fff; margin-top: 5px; font-size: 12px;'
+
+    previewImage.appendChild(img)
+
+    previewImage.appendChild(tips)
+
+    showTips1&&previewImage.appendChild(tips1)
+
+    document.body.appendChild(previewImage)
+
+    // 点击空白处关闭
+
+    previewImage.onclick= () => {
+
+    document.body.removeChild(previewImage)
+
+    }
+
+}
+
+}

package/src/scenarios/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/utils/utils.ts

@@ -0,0 +1,28 @@
+import Taro from "@tarojs/taro"
+
+// 工具函数：DataURL转Blob
+export function dataURItoBlob(dataURI) {
+  const byteString = atob(dataURI.split(',')[1])
+  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
+  const ab = new ArrayBuffer(byteString.length)
+  const ia = new Uint8Array(ab)
+  for (let i = 0; i < byteString.length; i++) {
+    ia[i] = byteString.charCodeAt(i)
+  }
+  return new Blob([ab], { type: mimeString })
+}
+
+// 是否H5页面
+export function isWeb() {
+  const env = process.env.TARO_ENV || ''
+  return env === 'h5' || Taro.getEnv() === 'WEB'
+}
+
+
+// 使用时间戳生成唯一标识
+export function generateUniqueId(pre?: string, delimiter = '-') {
+  return `${pre ? pre + delimiter : ''}${Date.now().toString(16)}${delimiter}${Math.random()
+    .toString(36)
+    .substr(2)}`
+}
+