123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <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>
|