template-10559/src/dealer/wechat/index.tsx

import {useEffect, useState} from 'react'
import {View, Text, Image} from '@tarojs/components'
import {Tabs} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import './index.scss'
import {listCmsWebsiteField} from "@/api/cms/cmsWebsiteField";
import {CmsWebsiteField} from "@/api/cms/cmsWebsiteField/model";

const WechatService = () => {
  const [activeTab, setActiveTab] = useState('0')
  const [codes, setCodes] = useState<CmsWebsiteField[]>([])

  // 长按保存二维码到相册
  const saveQRCodeToAlbum = (imageUrl: string) => {
    // 首先下载图片到本地
    Taro.downloadFile({
      url: imageUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          // 保存图片到相册
          Taro.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              Taro.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
              })
            },
            fail: (error) => {
              console.error('保存失败:', error)
              if (error.errMsg.includes('auth deny')) {
                Taro.showModal({
                  title: '提示',
                  content: '需要您授权保存图片到相册',
                  showCancel: true,
                  cancelText: '取消',
                  confirmText: '去设置',
                  success: (modalRes) => {
                    if (modalRes.confirm) {
                      Taro.openSetting()
                    }
                  }
                })
              } else {
                Taro.showToast({
                  title: '保存失败',
                  icon: 'error',
                  duration: 2000
                })
              }
            }
          })
        } else {
          Taro.showToast({
            title: '图片下载失败',
            icon: 'error',
            duration: 2000
          })
        }
      },
      fail: () => {
        Taro.showToast({
          title: '图片下载失败',
          icon: 'error',
          duration: 2000
        })
      }
    })
  }

  const renderQRCode = (data: typeof codes[0]) => (
    <View className="qr-container">
      <View className="qr-content">
        <View className="qr-code-wrapper">
          <Image
            src={`${data.value}`}
            className="qr-code-image"
            mode="aspectFit"
            onLongPress={() => saveQRCodeToAlbum(`${data.value}`)}
          />
          {data.style && <Text className="wechat-id">联系电话：{data.style}</Text>}
        </View>

        <View className="qr-tips">
          <Text className="tip-title">使用说明：</Text>
          <Text className="tip-item">1. 长按二维码保存到相册</Text>
          <Text className="tip-item">2. 打开微信扫一扫</Text>
          <Text className="tip-item">3. 选择相册中的二维码图片</Text>
          <Text className="tip-item">4. 添加好友并发送验证消息</Text>
        </View>
      </View>
    </View>
  )

  useEffect(() => {
    listCmsWebsiteField({name: 'kefu'}).then(data => {
      if (data) {
        setCodes(data)
      }
    })
  }, []);

  return (
    <View className="wechat-service-page">
      <Tabs
        value={activeTab}
        onChange={(value) => setActiveTab(`${value}`)}
        className="service-tabs"
      >
        {codes.map((item) => (
          <Tabs.TabPane key={item.id} title={item.comments} value={item.id}>
            {renderQRCode(item)}
          </Tabs.TabPane>
        ))}
      </Tabs>
    </View>
  )
}

export default WechatService