添加更多颜色

2025-02-07 10:10:19 +08:00 · 2019-05-26 18:08:32 +08:00 · 2019-05-26 18:08:32 +08:00 · aa48565672
commit aa48565672
parent 2999b83ae8
3 changed files with 71 additions and 65 deletions
--- a/frontend/src/components/PaidMessage.vue
+++ b/frontend/src/components/PaidMessage.vue
@ -4,7 +4,7 @@
      <div id="author-photo" :style="`background-image: url(${avatarUrl})`"></div>
      <div id="header-content">
        <div id="author-name">{{authorName}}</div>
-        <div id="purchase-amount">{{title}}</div>
+        <div id="purchase-amount">CN¥{{price}}</div>
      </div>
    </div>
    <div id="content" :style="'background-color: ' + contentColor">
@ -14,41 +14,54 @@
 </template>

 <script>
-let LEVEL_TO_HEADER_COLOR = [
+const LEVEL_TO_HEADER_COLOR = [
+  'rgba(21,101,192,1)', //$1蓝
  'rgba(0,184,212,1)', // $2浅蓝
-  'rgba(255,176,0,1)', // $10黄
-  'rgba(245,91,0,1)', // $20橙
+  'rgba(0,191,165,1)', // $5绿
+  'rgba(255,179,0,1)', // $10黄
+  'rgba(230,81,0,1)', // $20橙
+  'rgba(194,24,91,1)', // $50品红
  'rgba(208,0,0,1)' // $100红
 ]
-let LEVEL_TO_CONTENT_COLOR = [
+const LEVEL_TO_CONTENT_COLOR = [
+  'rgba(30,136,229,1)', //$1蓝
  'rgba(0,229,255,1)', // $2浅蓝
-  'rgba(236,182,29,1)', // $10黄
-  'rgba(255,127,0,1)', // $20橙
+  'rgba(29,233,182,1)', // $5绿
+  'rgba(255,202,40,1)', // $10黄
+  'rgba(245,124,0,1)', // $20橙
+  'rgba(233,30,99,1)', // $50品红
  'rgba(230,33,23,1)' // $100红
 ]

 export default {
  name: 'PaidMessage',
  props: {
-    level: Number, // 高亮等级，决定颜色
+    price: Number, // 价格，人民币
    avatarUrl: String,
    authorName: String,
-    title: String,
    content: String
  },
  computed: {
+    level() {
+      if (this.price < 9.9) // 0~9.9，丢人
+        return 0
+      else if (this.price < 28) // 9.9~28，B坷垃
+        return 1
+      else if (this.price < 52) // 28~52，礼花
+        return 2
+      else if (this.price < 100) // 52~100，疯狂打call
+        return 3
+      else if (this.price < 450) // 100~450，节奏风暴、天空之翼
+        return 4
+      else if (this.price < 1245) // 450~1245，摩天大楼
+        return 5
+      else // 1245，小电视飞船
+        return 6
+    },
    headerColor() {
-      if (this.level < 0)
-        return LEVEL_TO_HEADER_COLOR[0]
-      if (this.level >= LEVEL_TO_HEADER_COLOR.length)
-        return LEVEL_TO_HEADER_COLOR[LEVEL_TO_HEADER_COLOR.length - 1]
      return LEVEL_TO_HEADER_COLOR[this.level]
    },
    contentColor() {
-      if (this.level < 0)
-        return LEVEL_TO_CONTENT_COLOR[0]
-      if (this.level >= LEVEL_TO_CONTENT_COLOR.length)
-        return LEVEL_TO_CONTENT_COLOR[LEVEL_TO_CONTENT_COLOR.length - 1]
      return LEVEL_TO_CONTENT_COLOR[this.level]
    }
  }
--- a/frontend/src/components/Room.vue
+++ b/frontend/src/components/Room.vue
@ -24,8 +24,8 @@
          :avatarUrl="message.avatarUrl" :title="message.title" :content="message.content"
        ></legacy-paid-message>
        <paid-message :key="message.id" v-else
-          :level="message.level" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
-          :title="message.title" :content="message.content"
+          :price="message.price" :avatarUrl="message.avatarUrl" :authorName="message.authorName"
+          :content="message.content"
        ></paid-message>
      </template>
    </yt-live-chat-item-list-renderer>
@ -37,6 +37,11 @@ import TextMessage from './TextMessage.vue'
 import LegacyPaidMessage from './LegacyPaidMessage.vue'
 import PaidMessage from './PaidMessage.vue'

+const COMMAND_JOIN_ROOM = 0
+const COMMAND_ADD_TEXT = 1
+const COMMAND_ADD_GIFT = 2
+const COMMAND_ADD_VIP = 3
+
 export default {
  name: 'Room',
  components: {
@ -56,7 +61,7 @@ export default {
    // 测试用
    // this.websocket = new WebSocket('ws://localhost/chat')
    this.websocket.onopen = () => this.websocket.send(JSON.stringify({
-      cmd: 0, // JOIN_ROOM
+      cmd: COMMAND_JOIN_ROOM,
      data: {
        roomId: parseInt(this.$route.params.roomId)
      }
@ -64,51 +69,39 @@ export default {
    this.websocket.onmessage = (event) => {
      let body = JSON.parse(event.data)
      let message = null
-      let time, price, level
+      let time
      switch(body.cmd) {
-        case 1: // ADD_TEXT
-          time = new Date(body.data.timestamp * 1000)
-          message = {
-            id: this.nextId++,
-            type: 0, // TextMessage
-            avatarUrl: body.data.avatarUrl,
-            time: `${time.getHours()}:${time.getMinutes()}`,
-            authorName: body.data.authorName,
-            authorType: body.data.authorType,
-            content: body.data.content
-          }
-          break;
-        case 2: // ADD_GIFT
-          price = body.data.totalCoin / 1000
-          if (price < 9.9) // 丢人
-            break
-          else if (price < 100) // B坷垃~打call
-            level = 0
-          else if (price < 300) // 节奏风暴、天空之翼
-            level = 1
-          else if (price < 500) // 摩天大楼
-            level = 2
-          else // 小电视飞船
-            level = 3
-          message = {
-            id: this.nextId++,
-            type: 2, // PaidMessage
-            level: level,
-            avatarUrl: body.data.avatarUrl,
-            authorName: body.data.authorName,
-            title: `CNY${price}`,
-            content: `Sent ${body.data.giftName}x${body.data.giftNum}`
-          }
-          break;
-        case 3: // ADD_VIP
-          message = {
-            id: this.nextId++,
-            type: 1, // LegacyPaidMessage
-            avatarUrl: body.data.avatarUrl,
-            title: `NEW MEMBER!`,
-            content: `Welcome ${body.data.authorName}`
-          }
-          break;
+      case COMMAND_ADD_TEXT:
+        time = new Date(body.data.timestamp * 1000)
+        message = {
+          id: this.nextId++,
+          type: 0, // TextMessage
+          avatarUrl: body.data.avatarUrl,
+          time: `${time.getHours()}:${time.getMinutes()}`,
+          authorName: body.data.authorName,
+          authorType: body.data.authorType,
+          content: body.data.content
+        }
+        break;
+      case COMMAND_ADD_GIFT:
+        message = {
+          id: this.nextId++,
+          type: 2, // PaidMessage
+          price: body.data.totalCoin / 1000,
+          avatarUrl: body.data.avatarUrl,
+          authorName: body.data.authorName,
+          content: `Sent ${body.data.giftName}x${body.data.giftNum}`
+        }
+        break;
+      case COMMAND_ADD_VIP:
+        message = {
+          id: this.nextId++,
+          type: 1, // LegacyPaidMessage
+          avatarUrl: body.data.avatarUrl,
+          title: 'NEW MEMBER!',
+          content: `Welcome ${body.data.authorName}`
+        }
+        break;
      }
      if (message) {
        this.messages.push(message)
--- a/frontend/src/components/TextMessage.vue
+++ b/frontend/src/components/TextMessage.vue
@ -10,7 +10,7 @@
 </template>

 <script>
-let AUTHOR_TYPE_TO_TEXT = [
+const AUTHOR_TYPE_TO_TEXT = [
  '',
  'member', // 舰队
  'moderator', // 房管