designer-hub/packages/app/src/pages/publish/moment/index.vue

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "个人动态",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { createCircle, getByDictType } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { useToast } from 'wot-design-uni'
import { CircleType, DictType } from '../../../core/models/moment'
import DataForm from '@/components/data-form.vue'
import { zipToObject } from 'radash'
import { useRouter } from '../../../core/utils/router'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { error } = useToast()
const circleType = ref<CircleType>()
const content = ref('')
const fileList = ref([])
const action = ref(`${import.meta.env.VITE_SERVER_BASEURL}/app-api/infra/file/upload`)
const schema = ref({
  spaceType: { label: '空间类型', type: 'Select', props: { columns: [] } },
  designStyle: { label: '设计风格', type: 'Select', props: { columns: [] } },
  spaceAddr: { label: '空间位置', type: 'TextField' },
  customerDemand: { label: '客户需求', type: 'TextField' },
})
const formData = ref({})
const formInited = ref(false)
const tagName = ref('')
const handleChange = ({ fileList: files }) => {
  fileList.value = files
  console.log(fileList.value)
}
const handleSubmit = async () => {
  const { code, msg } = await createCircle({
    stylistId: userInfo.value.userId,
    stylistName: userInfo.value.nickname,
    bannerUrls: fileList.value.map(({ response }) => JSON.parse(response).data),
    tagName: tagName.value,
    headUrl: userInfo.value.avatar,
    circleDesc: content.value,
    circleType: circleType.value,
    ...formData.value,
  })
  if (code !== 0) {
    error(msg)
  }
  uni.showToast({
    title: '发布成功',
  })
  router.back()
}
const updateTagName = (tagNames: string[]) => {
  if (tagNames.length === 0) {
    tagName.value = ''
    return
  }
  tagName.value = tagNames.join(',')
}
onMounted(() => {
  uni.$on('updateTagName', updateTagName)
})
onUnmounted(() => {
  uni.$off('updateTagName', updateTagName)
})
onLoad(async (query: { circleType: '1' | '2' }) => {
  circleType.value = query.circleType as CircleType
  uni.setNavigationBarTitle({ title: { '1': '个人动态', '2': '设计案例' }[circleType.value] })
  const optionsSchema = {
    designStyle: getByDictType(DictType.memberDesignStyle).then(({ data }) => data),
    spaceType: getByDictType(DictType.memberSpatialExpertiseType).then(({ data }) => data),
  }
  const res = await zipToObject(
    Object.keys(optionsSchema),
    await Promise.all(Object.values(optionsSchema)),
  )
  schema.value.designStyle.props.columns = res.designStyle
  schema.value.spaceType.props.columns = res.spaceType
  formInited.value = true
})
</script>
<template>
  <div class="flex-grow bg-white p-3.5 flex flex-col">
    <template v-if="circleType === CircleType.case && formInited">
      <DataForm v-model="formData" :schema="schema" direction="horizontal"></DataForm>
    </template>
    <template v-if="circleType === CircleType.moment">
      <wd-textarea v-model="content" placeholder="分享你此刻的想法" />
    </template>

    <!-- <div class="flex items-center">
      <img
        class="w-[100px] h-[100px] rounded-lg overflow-hidden"
        src="https://via.placeholder.com/100x100"
      />
      <div class="w-[100px] h-[100px] bg-[#f3f3f3] justify-center items-center inline-flex">
        <div class="w-7 h-7 relative flex-col justify-start items-start flex"></div>
      </div>
    </div> -->
    <wd-upload
      :file-list="fileList"
      image-mode="aspectFill"
      :action="action"
      @change="handleChange"
    ></wd-upload>
    <SectionHeading
      title="标签"
      custom-class="my-6"
      :path="`/pages/publish/tags/index?tagName=${tagName}`"
      size="base"
    >
      <template #start>
        <div class="flex gap-2.5">
          <template v-if="tagName !== ''">
            <template v-for="it of tagName.split(',')" :key="it">
              <div
                class="h-6 px-2 py-0.5 bg-[#f3f3f3] rounded-[3px] justify-center items-center gap-2 inline-flex"
              >
                <div
                  class="text-center text-black/90 text-xs font-normal font-['PingFang_SC'] leading-tight"
                >
                  #{{ it }}
                </div>
              </div>
            </template>
          </template>
        </div>
      </template>
    </SectionHeading>
    <div class="flex-1"></div>
    <div class="w-full">
      <wd-button type="primary" :round="false" block @click="handleSubmit">发布</wd-button>
    </div>
  </div>
</template>