utel_h5/src/utils/card/card3.js

function genCard(vcard) {
  // 名片預覽
  let vcardLink;
  if (vcard.url.trim().length > 0) {
    if (vcard.nc_func.indexOf("nourl") !== -1) {
      vcardLink = `{
        "type": "text",
        "text": "${vcard.url}",
        "color": "#ffffff",
        "size": "sm"
      },
      `;
    } else {
      vcardLink = `
      {
        "type": "text",
        "text": "${vcard.url}",
        "color": "#ffffff",
        "size": "sm",
        "action": {
            "type": "uri",
            "label": "action",
            "uri": "${vcard.url}"
        }
      },
      `;
    }
  } else {
    vcardLink = "";
  }

  let vcardAvatar;
  if (vcard.avatar.trim().length > 0) {
    vcardAvatar = `
    {
      "type": "image",
      "url": "${vcard.avatar}",
      "size": "full",
      "aspectRatio": "1:1",
      "aspectMode": "cover",
      "action": {
        "type": "uri",
        "label": "action",
        "uri": "${vcard.nfcurl}&cardid=1"
      }    
    }
    `;
  } else {
    vcardAvatar = "";
  }

  let vcardAddr;
  if (vcard.address.trim().length > 0) {
    vcardAddr = `
      {
        "type": "text",
        "text": "${vcard.address}",
        "color": "#ffffff",
        "size": "sm",
        "margin": "sm",
        "wrap": true,
        "action": {
            "type": "uri",
            "label": "action",
            "uri": "https://www.google.com.tw/maps/place/${encodeURIComponent(
              vcard.address
            )}"
        }
      },      
      `;
  } else {
    vcardAddr = "";
  }

  let vcardTel;
  if (vcard.tel.trim().length > 0) {
    vcardTel = `
    {
      "type": "text",
      "text": "${vcard.tel}",
      "color": "#ffffff",
      "size": "lg",
      "wrap": true,
      "action": {
          "type": "uri",
          "label": "action",
          "uri": "tel:${vcard.tel}"
      }
    },
    `;
  } else {
    vcardTel = "";
  }

  let vcardPhone;
  if (vcard.phone.trim().length > 0) {
    vcardPhone = `
    {
      "type": "text",
      "text": "${vcard.phone}",
      "size": "lg",
      "margin": "sm",
      "action": {
        "type": "uri",
        "label": "action",
        "uri": "tel:${vcard.phone}"
      }
    }
    `;
  } else {
    vcardPhone = "";
  }

  let vcardEmail;
  if (vcard.email.trim().length > 0) {
    vcardEmail = `
    {
      "type": "text",
      "text": "${vcard.email}",
      "color": "#ffffff",
      "size": "sm",
      "margin": "sm",
      "action": {
        "type": "uri",
        "label": "action",
        "uri": "mailto:${vcard.email}"
      }
    },
    `;
  } else {
    vcardEmail = "";
  }

  // 名片發送

  let card = `
    {
      "altText": "UTel電子名片",
      "type": "flex",
      "contents": 
      {
        "type": "bubble",
        "size": "giga",
        "body": {
          "type": "box",
          "layout": "horizontal",
          "height": "290px",
          "paddingAll": "0px",
          "backgroundColor": "#353e45",
          "action": {
            "type": "uri",
            "label": "action",
            "uri": "${vcard.nfcurl}"
          },
          "contents": [
            {
              "position": "absolute",
              "type": "box",
              "layout": "vertical",
              "width": "67%",
              "height": "100%",
              "justifyContent": "flex-start",
              "offsetEnd": "none",              
              "contents": [
                {
                  "position": "relative",
                  "type": "image",
                  "url": "https://369cycle.zltest.com.tw/tggo/template/bg-01s.png",
                  "size": "full",
                  "aspectRatio": "3:1",
                  "offsetTop": "15%"
                }
              ]             
            },
            {
              "position": "relative",
              "type": "box",
              "layout": "vertical",
              "width": "35%",
              "height": "100%",
              "paddingAll": "14px",
              "justifyContent": "space-between",
              "alignItems": "center",
              "backgroundColor": "#ffffff",
              "contents": [
                {
                  "type": "box",
                  "layout": "vertical",
                  "contents": [
                    {
                      "type": "box",
                      "layout": "vertical",
                      "width": "80%",
                      "margin": "none",
                      "borderWidth": "bold",
                      "borderColor": "#f5c520",
                      "cornerRadius": "150px",
                      "contents": [${vcardAvatar}]
                    },
                    {
                      "type": "text",
                      "text": "${vcard.name}",
                      "size": "xl",
                      "weight": "bold",
                      "margin": "md"
                    },
                    {
                      "type": "text",
                      "text": "${vcard.title}",
                      "size": "md",
                      "weight": "regular",
                      "color": "#666666"
                    },                
                    ${vcardPhone}                    
                  ]
                },
                {
                  "type": "box",
                  "layout": "vertical",
                  "contents": [
                    {
                      "type": "text",
                      "text": "收藏名片"
                    }
                  ],
                  "position": "relative",
                  "height": "40px",
                  "borderWidth": "light",
                  "borderColor": "#333333",
                  "cornerRadius": "lg",
                  "justifyContent": "center",
                  "alignItems": "center",
                  "width": "100%",
                  "action": {
                    "type": "uri",
                    "label": "action",
                    "uri": "${import.meta.env.VITE_APP_BASE_URL}/home/address?act=add&cardid=${vcard.user_id}"
                  }
                }
              ]              
            },
            {
              "position": "relative",
              "type": "box",
              "layout": "vertical",
              "width": "66%",
              "height": "100%",
              "justifyContent": "space-between",
              "paddingAll": "14px",              
              "contents": [
                {
                  "type": "box",
                  "layout": "vertical",
                  "contents": [
                    ${vcardTel}
                    {
                      "type": "text",
                      "text": "${vcard.company}",
                      "color": "#ffffff",
                      "size": "xl",
                      "weight": "bold"
                    }
                  ]
                },
                {
                  "type": "box",
                  "layout": "vertical",                  
                  "contents": [                    
                    ${vcardLink}
                    ${vcardEmail}
                    ${vcardAddr}                    
                    {
                      "type": "box",
                      "layout": "horizontal",
                      "justifyContent": "space-between",
                      "margin": "md",
                      "contents": [
                        {
                          "type": "box",
                          "layout": "vertical",
                          "width": "48%",
                          "height": "40px",
                          "justifyContent": "center",
                          "alignItems": "center",
                          "borderWidth": "light",
                          "borderColor": "#dddddd",
                          "cornerRadius": "lg",                          
                          "contents": [
                              {
                                  "type": "text",
                                  "text": "加入好友",
                                  "color": "#dddddd"
                              }
                          ],
                          "action": {
                              "type": "uri",
                              "label": "action",
                              "uri": "https://line.naver.jp/ti/p/~${vcard.line}"
                            }                     
                        },
                        {
                          "type": "box",
                          "layout": "vertical",                          
                          "width": "48%",
                          "height": "40px",
                          "justifyContent": "center",
                          "alignItems": "center",
                          "borderWidth": "light",
                          "borderColor": "#dddddd",
                          "cornerRadius": "lg",                          
                          "contents": [
                              {
                                  "type": "text",
                                  "text": "分享名片",
                                  "color": "#dddddd"
                              }
                          ],
                          "action": {
                            "type": "uri",
                            "label": "action",
                            "uri": "${import.meta.env.VITE_APP_SEND_URL}/?userid=${vcard.user_id}&cardid=1&tpl=3"
                          }
                        }
                      ]                      
                    }
                  ]
                }
              ]              
            }            
          ]
        }
      }
    }
    `;
  return { card };
}

export { genCard };