designer-hub/packages/app/src/pages-sub/mine/invite/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "邀请设计师",
    "navigationBarBackgroundColor": "#fff",
    "navigationStyle": "custom"
  }
}
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { getDesignerInfo, updateDesignerInfo } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { pick } from 'radash'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useMessage } from 'wot-design-uni'
import { NetImages } from '../../../core/libs/net-images'
import NavbarEvo from '@/components/navbar-evo.vue'
import ImageEvo from '@/components/image-evo.vue'
import { Canvas } from '../../../core/utils/canvas'

const { alert } = useMessage()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const form = ref<{
  userId?: number
  videoNumber?: string
}>()
const windowInfo  = ref<{}>
const { data, run: setData } = useRequest(() => getDesignerInfo(userInfo.value.userId))
const { loading, run: submiting } = useRequest(() => updateDesignerInfo(form.value))
const posterUrl = ref()
const canvasHidden = ref(false)
const createPoster = () => {
  return new Promise((resolve, reject) => {
    ;(async () => {
      uni.showLoading({ title: '生成中' })
      const [path, bgPath, qrcode, logoPath, avatarPath, icon1, icon2, icon3, icon4] = await Promise.all(
        [
          data.value.sharePageUrl,
          NetImages.InviteBg,
		  data.value.qrcodeUrl,
          NetImages.Logo,
          data.value.headImgUrl || userInfo.value?.avatar || NetImages.DefaultAvatar,
          'https://image.zhuchaohui.com/zhucaohui/315c5ca680bc6b47a5344dbff701cf1e6802d8a240754e25ef3d4308bc1deef6.png',
          'https://image.zhuchaohui.com/zhucaohui/ee83d30d553feb1482920e49c28824d73bb33838d996ec2f6c646ae6deab0330.png',
          'https://image.zhuchaohui.com/zhucaohui/9f89604f285c33200b7e6fda9acc82e130f34c2f5687cfeb78f3541e1fabcc28.png',
          'https://image.zhuchaohui.com/zhucaohui/2467be55426018856150bd94bbd21865df3d73ce982bc1c82b7585cf26c822f0.png',
        ].map((it) => uni.getImageInfo({ src: it }).then(({ path }) => path)),
      )
      const ctx = uni.createCanvasContext('firstCanvas')
      const getPx = (width, designPx) => {
        return (width / 319) * designPx
      }
      uni
        .createSelectorQuery()
        .select('#firstCanvas')
        .fields({ size: true }, async ({ width: w, height: h }: any) => {
          const canvas = new Canvas(ctx, { width: w, height: h }, { width: 319 })
          canvas.FillImage(bgPath)
          ctx.drawImage(path, 0, 0, w, w / 1.56)
          canvas.CircleImage(avatarPath, 17, 21, 14)
          canvas.Image(logoPath, 17, 230, 24, 24)
		  canvas.Image(qrcode, 200, 350, 100, 100)
          canvas.FillText(userInfo.value?.nickname, '#ffffff', 14, 53, 40)
          canvas.FillText('筑巢荟—助力设计师成长平台', '#ffffff', 18, 53, 248)
          canvas.FillText('国内外设计游学', '#ffffff', 12, 62, 303)
          canvas.FillText('设计赋能项目', '#ffffff', 12, 207, 303)
          canvas.FillText('线上获客工具', '#ffffff', 12, 62, 339)
          canvas.FillText('丰富线下活动', '#ffffff', 12, 207, 339)

          canvas.Image(icon1, 41, 290, 18, 18)
          canvas.Image(icon2, 189, 290, 18, 18)
          canvas.Image(icon3, 41, 325, 18, 18)
          canvas.Image(icon4, 189, 325, 18, 18)

          ctx.draw(true, () => {
            uni.canvasToTempFilePath({
              canvasId: 'firstCanvas',
              width: 300,
              height: 460,
			  fileType: "jpg",
			  quality: 1,
              success: (res) => {
                // console.log('生成海报', res)
                uni.hideLoading()
                resolve(res.tempFilePath)
              },
              fail: (err) => {
                // uni.hideLoading()
                reject(err)
              },
            })
          })
        })
        .exec()
    })()
  })
}
const save = async () => {
  await uni.saveImageToPhotosAlbum({ filePath: posterUrl.value })
  uni.showToast({ title: '已保存相册', icon: 'none' })
}
const share = () => {
  // uni.share({
  //   provider: 'weixin',
  //   scene: 'WXSceneSession',
  //   type: 2,
  //   // title: '你好呀',
  //   // href: 'https://www.baidu.com/',
  //   // summary: '我是图文描述',
  //   imageUrl: posterUrl.value,
  //   success: function (res) {
  //     console.log('success:' + JSON.stringify(res))
  //   },
  //   fail: function (err) {
  //     console.log('fail:' + JSON.stringify(err))
  //   },
  // })
}
onMounted(async () => {
  await setData()
  form.value = pick(data.value, ['id', 'userId', 'videoNumber'])
  uni.getWindowInfo()
  posterUrl.value = await createPoster()
})
// onAppShare(() => {})
</script>
<template>
  <div
    class="flex-grow flex flex-col justify-center gap-5 px-3.5 py-6 bg-black bg-[length:100%_100%]"
    :style="{ backgroundImage: `url(${NetImages.InviteBg})` }"
  >
    <NavbarEvo fixed transparent dark></NavbarEvo>
    <div class="block aspect-[0.69/1]">
      <div class="mx-7 aspect-[0.69/1] relative rounded-2xl overflow-hidden">
        <canvas
          class="w-full h-full absolute top--1000"
          canvas-id="firstCanvas"
          id="firstCanvas"
        ></canvas>
        <!-- <wd-img width="100%" height="100%" :src="posterUrl"></wd-img> -->
        <ImageEvo
          class="w-full h-full"
          :src="posterUrl"
          @displayed="canvasHidden = true"
        ></ImageEvo>
        <div class="absolute bottom-5.5 left-5.5 flex justify-between" v-if="canvasHidden">
          <!-- <cover-view> -->
          <wd-button custom-class="bg-white/10!" @click="save">保存到相册</wd-button>
		  <!-- <div style="margin-left: 100rpx;">
			  <wd-img :width="50" :height="50" :src="data.qrcodeUrl"></wd-img>
		  </div> -->
          <!-- </cover-view> -->
          <!-- <wd-button @click="share">微信</wd-button>
        <wd-button @click="share">朋友圈</wd-button> -->
        </div>
      </div>
    </div>
    <!-- <SectionHeading title="如何关联视频号？" size="sm"></SectionHeading>
    <img class="w-[347px] h-[186px] rounded-2xl" src="https://via.placeholder.com/347x186" />
    <SectionHeading title="视频号ID" size="sm"></SectionHeading>
    <div class="bg-[#f6f6f6] rounded-lg px-3.5 py-2.5">
      <wd-input
        v-model="form.videoNumber"
        placeholder="请输入视频号ID"
        no-border
        custom-class="bg-[#f6f6f6]!"
      ></wd-input>
    </div>
    <BottomAppBar fixed :border="false">
      <div>
        <div class="text-center mb-5.5">
          <span class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-tight">
            点击确认关联即表示同意
          </span>
          <span class="text-[#0cbe7c] text-xs font-normal font-['PingFang_SC'] leading-tight">
            《个人微信视频号授权使用协议》
          </span>
        </div>
        <wd-button :round="false" block :loading="loading" @click="handleSubmit">
          确定关联
        </wd-button>
      </div>
    </BottomAppBar> -->
  </div>
</template>