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

<route lang="json">
{ "style": { "navigationBarTitleText": "关联视频号", "navigationBarBackgroundColor": "#fff" } }
</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 { toContentHtml, validate } from '../../../../core/utils/common'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useMessage } from 'wot-design-uni'
import { NetImages } from '../../../../core/libs/net-images'
import { useRouter } from '@/core/utils/router'
import { AgreementType } from '@/core/libs/enums'

const { alert, confirm } = useMessage('wd-message-box-slot')
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { back } = useRouter()
const form = ref<{
  userId?: number
  videoNumber?: string
}>()
const { data, run: setData } = useRequest(() => getDesignerInfo(userInfo.value.userId))
const { loading, run: submiting } = useRequest(() => updateDesignerInfo(form.value))
const handleSubmit = async () => {
  if (!validate(form.value, { videoNumber: [{ required: true, message: '请输入视频号ID' }] }))
    return
  const { action } = await confirm({
    title: '温馨提示',
    confirmButtonText: '同意并关联',
    cancelButtonText: '不同意',
  })
  console.log(action)
  if (action === 'confirm') {
    await submiting()
    uni.showToast({
      title: '视频号关联成功',
      icon: 'none',
      duration: 2000,
      success: () => {
        back()
      },
    })
    await setData()
  }
  // await alert({ title: '关联成功', confirmButtonText: '我知道了' })
}
onMounted(async () => {
  await setData()
  form.value = pick(data.value, ['id', 'userId', 'videoNumber'])
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-5 px-3.5 py-6 bg-white">
    <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>
    <SectionHeading title="如何关联视频号？" size="sm"></SectionHeading>
    <wd-img class="rounded-2xl" width="100%" mode="widthFix" :src="NetImages.WechatChannelsGuide" />
    <SectionHeading title="视频教程" size="sm"></SectionHeading>
    <div class="aspect-[1.87/1] rounded-2xl overflow-hidden">
      <video class="w-full h-full" :src="NetImages.VideoTutorial"></video>
    </div>
    <BottomAppBar fixed placeholder :border="false" v-if="(data.videoNumber ?? '') === ''">
      <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>

    <wd-message-box selector="wd-message-box-slot">
      <div class="">
        <span class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed">
          关联后，小程序开发者将获取您的视频号相关信息，并为您提供相关服务，请您充分阅读
        </span>
        <span
          class="text-[#3f598f] text-base font-normal font-['PingFang_SC'] leading-relaxed"
          @click="
            toContentHtml({
              title: '个人微信视频号授权使用协议',
              type: AgreementType.PersonalWeChatVideoAuthorization,
            })
          "
        >
          《个人微信视频号授权使用协议》
        </span>
      </div>
    </wd-message-box>
  </div>
</template>