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 ?? ''}} {{t('common.use')}}</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">{{$t('common.workflowPreview')}}</div>
          </div>
          <div class="mt20">
            <img :src="item || ''" alt="" v-for="(item, index) in previewImage" :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">{{$t('common.Detail')}}</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">{{$t('common.currentPrice')}}</div>
                <div class="color_price">
                  <span class="font_size32">{{ruleForm.workflowPrice || 0}}</span> 
                  <span>{{$t('common.baomibi')}}</span>
                </div>
              </div>
              <el-button type="success" plain size="mini" v-if="ruleForm.workflowPrice === 0">{{$t('common.free')}}</el-button>
            </div>
            <div class="mt20">
              <el-button type="primary" class="font_size16 gradient" size="large" style="width: 100%;height: 50px;" @click="startUsing()">
                <img :src="useNowIcon" alt="员工" style="width: 30px; height: 30px;">
                <span class="font_size18"> {{$t('common.startUsing')}}</span>
              </el-button>
            </div>
            <div class="mt20">
              <el-tag type="primary" size="large" style="width: 100%;height: auto;" class="cursor-pointer" @click="downloadWorkflow()">
                <div class="gap10" style="padding:8px 0;">
                  <img :src="downIcon" alt="员工" style="width: 30px; height: 30px;">
                  <span class="font_size18"> {{$t('common.downloadWorkflow')}}</span>
                </div>
              </el-tag>
            </div>
          </div>
          <!-- 工作流作者 -->
          <div class="padding16 bg_color_fff border_radius_16 box_shadow_card mt20">
            <div class="flex-center-between">
              <div class="flex-center-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 skillTags" :key="item" >{{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, confirmBuy, openNewTab } from '@/utils/util'

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

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

//计算属性skillTags
const skillTags = computed(() => {
  if(ruleForm.value.skillTags){
    return ruleForm.value.skillTags.split(',');
  }
  return [];
});

onMounted(() => {
  getPublishDetail({id:publishId.value}).then(res => {
    ruleForm.value = res.data || {};
    nextTick(() => {
      if(ruleForm.value.previewImage){
        previewImage.value = ruleForm.value.previewImage.split(',');
      };
      setTimeout(() => {
        if(ruleForm.value.workflowContent){
          editorContent.value = JSON.parse(ruleForm.value.workflowContent);
        }
      }, 500);
    });
  })
});
// 下载工作流
const downloadWorkflow = () => {
  //如果是本人发布的，是有下载地址的，直接下载
  if(ruleForm.value.workflowFile){
    downloadFile({url:ruleForm.value.workflowFile,t});
    return;
  }
  //如果不是本人发布的，需要购买
  purchase({
    buyType: 1,
    publishId: publishId.value,
  }).then(res => {
    if(res.code === 200){
      if(res.data?.buyFlag == 1){
        if(res.data?.workflowFile){
          downloadFile({url:res.data?.workflowFile,t});
        }
      }else{
        confirmBuy({
          callback:downloadWorkflow,
          appStore,
          router,
          price:ruleForm.value.workflowPrice,
          t,
          productId:publishId.value,
          orderType:'workflow_purchase',
          payMethod:'BMI'
        })
      }
    }
  })
};
// 立即使用
const startUsing = () => {
  openNewTab(ruleForm.value.categoryUrl);
};
</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>