feat: 社区新增有偿悬赏功能

Yi.Bbs.Vue3/src/components/DiscussTypeLable.vue

@@ -0,0 +1,24 @@
+
+<script setup>
+import {computed} from "vue";
+
+const model = defineModel();
+const items=[
+  { type: 'primary', label: '主题',key:"Article" },
+  { type: 'primary', label: '悬赏',key:"Reward"  }
+];
+const currentValue=computed(()=>{
+  return items.filter(item=>item.key===model.value)[0];
+})
+</script>
+
+
+<template>
+  <el-tag
+      v-if="currentValue"
+      :type="currentValue?.type"
+      effect="light"
+  >
+    {{ currentValue?.label }}
+  </el-tag>
+</template>

Yi.Bbs.Vue3/src/components/DisscussCard.vue

@@ -1,13 +1,15 @@
 <template>
   <el-badge class="box-card">
     <el-card shadow="never" :style="{ 'border-color': discuss.color }"
+             class="discuss-subscript"
     >
+      <span class="recommend" v-if="discuss.discussType==='Reward'"> </span>
       <div class="card-header">
         <AvatarInfo :userInfo="discuss.user" />
       </div>
       
       <div style="display: flex;
-    justify-content: space-between;">
+        justify-content: space-between;">
         <div>
       <div v-if="discuss.isBan" class="item item-title">
         <el-link size="100" :underline="false" style="color: #f56c6c">{{
@@ -42,10 +44,11 @@
       <div class="item item-bottom">
         <div class="tag-list">
           
-          <el-tag v-for="item in discuss.permissionRoleCodes"  effect="dark" type="danger" :key="item">{{item}}</el-tag>
+          <el-tag v-if="discuss.permissionRoleCodes.length>0" v-for="item in discuss.permissionRoleCodes"  effect="dark" type="danger" :key="item">{{item}}</el-tag>
           
-          <el-tag v-if="discuss.lables.length===0">暂无标签</el-tag>
-          <el-tag v-for="item in discuss.lables" :key="item.id">{{item.name}}</el-tag>
+          <el-tag v-if="discuss.title!=''&& discuss.lables.length===0">暂无标签</el-tag>
+          
+          <el-tag  v-if="discuss.lables.length>0" v-for="item in discuss.lables" :key="item.id">{{item.name}}</el-tag>
         </div>
         <el-space :size="10" :spacer="spacer">
           <div class="item-description">
@@ -86,7 +89,9 @@ const discuss = reactive({
   isAgree: false,
   cover: "",
   isBan: false,
-  lables:[]
+  lables:[],
+  permissionRoleCodes:[],
+  discussType:""
 });
 const router = useRouter();
 const spacer = h(ElDivider, { direction: "vertical" });
@@ -132,6 +137,7 @@ onMounted(() => {
   discuss.cover = props.discuss.cover;
   discuss.lables=props.discuss.lables;
   discuss.permissionRoleCodes=props.discuss.permissionRoleCodes;
+  discuss.discussType=props.discuss.discussType;
 });
 </script>
 <style scoped lang="scss">
@@ -207,4 +213,41 @@ onMounted(() => {
 :deep(.el-card__body) {
   padding: 10px 20px;
 }
+
+.discuss-subscript{
+  position: relative;
+  .recommend:before {
+    cursor: pointer;
+    content: "悬赏";
+    position: absolute;
+    top: -8px;
+    right: -26px;
+    z-index: 1;
+    padding: 14px 22px 2px;
+    background-color: #ff9900;
+    transform: rotate(45deg);
+    font-size: 12px;
+    color: #ffffff;
+  }
+  .recommend:hover::after {
+    width: 100px;
+    content: "选择悬赏主题，帮助他人解决问题，赚取小费"; /* 鼠标悬浮时显示的文字 */
+    position: absolute;
+    top: 30px; /* 距离盒子顶部的距离 */
+    left: 70%; /* 盒子中央位置 */
+    transform: translateX(-50%); /* 水平居中 */
+    padding: 5px 10px;
+    background-color: #ff9900;
+    color: #ffffff;
+    font-size: 12px;
+    border-radius: 5px;
+    z-index: 9999;
+    opacity: 0; /* 初始状态不透明 */
+    transition: opacity 0.5s; /* 添加过渡效果 */
+  }
+
+  .recommend:hover::after {
+    opacity: 1; /* 鼠标悬浮时完全显示 */
+  }
+}
 </style>