ali_ai_learn_web/src/pages/WorkflowDetail.vue

<template>
  <div class="workflow-detail container-height">
    <Breadcrumb />
    <div class="flex-between mt10">
      <div class="flex_1 mr20">
        <div class="padding16 bg_color_fff border_radius_16">
          <div class="bold font_size30">{{ruleForm.workflowTitle || ''}}</div>
          <div class="gap20 mt10">
            <div class="gap5">
              <img :src="yuangong" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">{{ruleForm.nickName || ''}}</span>
            </div>
            <div class="gap5">
              <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">{{ruleForm.createTime || ''}}</span>
            </div>
            <div class="gap5">
              <img :src="shiyongIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">{{ruleForm.downCount ?? ''}} 使用</span>
            </div>
            <div class="gap5">
              <img :src="yunIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">{{ruleForm.categoryName1 || ''}}</span>
            </div>
            <div class="gap5">
              <img :src="biaoqianIcon" alt="员工" style="width: 16px; height: 16px;">
              <span class="font_size14">{{ruleForm.categoryName2 || ''}}-{{ruleForm.categoryName3 || ''}}</span>
            </div>
          </div>
          <div class="font_size16 gray mt10">{{ruleForm.description || ''}}</div>
          
        </div>
        <!-- 工作流预览 -->
        <div class="padding16 bg_color_fff border_radius_10 mt10">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">工作流预览</div>
          </div>
          <div class="mt20">
            <img :src="item || ''" alt="工作流预览" v-for="(item, index) in coverImage" :key="index"
            style="width: 100%; height: auto;" />
          </div>
        </div>
        <!-- 工作流预览 -->
        <div class="padding16 bg_color_fff border_radius_10 mt10">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">详情</div>
          </div>
          <BlockNoteEditor v-model="editorContent" :editable="false" class="mt20"/>
        </div>
      </div>
      <!-- 详情右侧 -->
      <div class="detail_right">
        <div class="detail_right_content detail_right">
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
            <div class="flex-center-between">
              <div class="flex-column">
                <div class="font_size16">当前及格</div>
                <div class="color_price">
                  <span class="font_size32">{{ruleForm.workflowPrice || 0}}</span> 
                  <span>{{$t('common.mibi')}}</span>
                </div>
              </div>
              <el-button type="success" plain size="mini" v-if="ruleForm.workflowPrice === 0">免费</el-button>
            </div>
            <div class="mt20">
              <el-button type="primary" class="font_size16" size="large" style="width: 100%;">
                <img :src="useNowIcon" alt="员工" style="width: 30px; height: 30px;">
                <span class="font_size18">立即使用</span>
              </el-button>
            </div>
            <div class="mt20">
              <el-button type="primary" size="large" plain style="width: 100%;" @click="downloadFile(ruleForm.workflowFile)">
                <img :src="downIcon" alt="员工" style="width: 30px; height: 30px;">
                <span class="font_size18">下载工作流</span>
              </el-button>
            </div>
          </div>
          <!-- 工作流作者 -->
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
            <div class="flex-center-between">
              <div class="flex-between flex_1">
                <el-avatar :size="50" :src=" ruleForm.userAvatar || appStore.avatarDefault " />
                <div class="ml10 flex_1">
                  <div class="font_size18 bold">{{ruleForm.nickName || ''}}</div>
                  <div class="gap5 mt5">
                    <el-tag type="primary" v-for="item in 5" :key="item" >技能标签</el-tag>
                  </div>
                </div>
              </div>
              <div>
                <!-- <div class="weiguanzhu cursor-pointer gap5" v-if="true">
                  <img :src="weiguanzhuIcon" alt="" style="width: 16px; height: 16px;">
                  <span class="font_size14">关注</span>
                </div>
                <div class="yiguanzhu cursor-pointer gap5 contactInfo_bg" v-else>
                  <img :src="yiguanzhuIcon" alt="" style="width: 16px; height: 16px;">
                  <span class="font_size14">已关注</span>
                </div> -->
              </div>
            </div>
          </div>
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
            <div class="gap10">
              <div class="line_vertical"></div>
              <div class="font_size20 bold">文件信息</div>
            </div>
            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
              <div class="gap5">
                <img :src="geshiIcon" alt="" style="width: 17.5px; height: 17.5px;">
                <span class="font_size16">格式</span>
              </div>
              <span class="font_size16 bold">.josn</span>
            </div>
            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
              <div class="gap5">
                <img :src="neicunIcon" alt="" style="width: 17.5px; height: 17.5px;">
                <span class="font_size16">大小</span>
              </div>
              <span class="font_size16 bold">24kb</span>
            </div>
            <div class="contactInfo_bg border_radius_8 padding8 mt10 flex-center-between">
              <div class="gap5">
                <img :src="banbenIcon" alt="" style="width: 17.5px; height: 17.5px;">
                <span class="font_size16">版本</span>
              </div>
              <span class="font_size16 bold">v1.0.2</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import yuangong from '@/assets/imgs/yuangong.png'
import riliIcon from '@/assets/imgs/rili.png'
import shiyongIcon from '@/assets/imgs/shiyong.png'
import yunIcon from '@/assets/imgs/yun.png'
import biaoqianIcon from '@/assets/imgs/biaoqian.png'
import useNowIcon from '@/assets/imgs/useNow.png'
import downIcon from '@/assets/imgs/down.png'
import weiguanzhuIcon from '@/assets/imgs/weiguanzhu.png'
import yiguanzhuIcon from '@/assets/imgs/yiguanzhu.png'
import geshiIcon from '@/assets/imgs/geshi.png'
import neicunIcon from '@/assets/imgs/neicun.png'
import banbenIcon from '@/assets/imgs/banben.png'
import { downloadFile } from '@/utils/util'

import { getPublishDetail } from '@/api/publish.js'

import BlockNoteEditor from '@/components/BlockNoteEditor.vue';
import { useRoute } from 'vue-router'
const route = useRoute()
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
import { ref, onMounted, nextTick } from 'vue'
//获取参数
const query = route.query
const publishId = ref(query.publishId || '');
// 详情内容
const editorContent = ref(null);
const coverImage = ref([]);
// 表单数据
const ruleForm = ref({
  workflowTitle: '',
  categoryId1: '',
  categoryId2: '',
  categoryId3: '',
  workflowFile: '',
  workflowPrice: '',
  description: '',
  previewImage: '',
  coverImage: '',
  workflowContent: '',
})

onMounted(() => {
  getPublishDetail({id:publishId.value}).then(res => {
    console.log(res)
    ruleForm.value = res.data || {};
    nextTick(() => {
      if(ruleForm.value.coverImage){
        coverImage.value = ruleForm.value.coverImage.split(',');
      };
      setTimeout(() => {
        if(ruleForm.value.workflowContent){
          editorContent.value = JSON.parse(ruleForm.value.workflowContent);
        }
      }, 500);
    });
  })
});
</script>

<style scoped lang="scss">
.workflow-detail {
  .weiguanzhu{
    padding: 8px 12px;
    background: #FCEBEB;
    border-radius: 8px 8px 8px 8px;
    color: #E43434 ;
    font-weight: bold;
    font-size: 14px;
  }
  .yiguanzhu{
    padding: 8px 12px;
    border-radius: 8px 8px 8px 8px;
    font-weight: bold;
    font-size: 14px;
  }
  
}
</style>