MoeNovaClient/pages/makedetail/makeMusicDetail.vue

<template>
  <view class="make-music-detail">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="back-icon">
        <text class="iconfont icon-left"></text>
      </view>
      <view class="right-info">
        <view class="coin-box">
          <image src="/static/images/coin.png" mode="aspectFit" class="coin-icon" />
          <text>999</text>
        </view>
        <view class="diamond-box">
          <image src="/static/images/diamond.png" mode="aspectFit" class="diamond-icon" />
          <text>2</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区 -->
    <view class="content">
      <!-- 歌曲名称输入 -->
      <view class="input-section">
        <text class="label">歌曲名称</text>
        <input type="text" placeholder="请输入名称..." class="input-field" maxlength="30" v-model="songName" />
        <text class="count">{{songName.length}}/30</text>
      </view>

      <!-- 创作歌词输入 -->
      <view class="input-section">
        <text class="label">创作歌词</text>
        <textarea 
          placeholder="请在此处输入您想要进行联想的内容或者歌词" 
          class="textarea-field"
          maxlength="800"
          v-model="lyrics"
          :style="{height: textareaHeight + 'px'}"
          @input="onTextareaInput"
        />
        <view class="textarea-footer">
          <text class="count">{{lyrics.length}}/800</text>
          <text class="ai-btn">AI润词</text>
        </view>
      </view>

      <!-- 音乐风格选择 -->
      <view class="style-section">
        <text class="label">音乐风格</text>
        <view class="tabs">
          <text :class="{'active': selectedTab === 'emotion'}" @click="selectTab('emotion')">情感</text>
          <text :class="{'active': selectedTab === 'genre'}" @click="selectTab('genre')">流派</text>
          <text :class="{'active': selectedTab === 'era'}" @click="selectTab('era')">年代</text>
          <text :class="{'active': selectedTab === 'instrument'}" @click="selectTab('instrument')">乐器</text>
        </view>
        <view class="tags">
          <text 
            v-for="(tag, index) in currentTags" 
            :key="index"
            :class="['tag', { active: selectedTags.includes(tag) }]"
            @click="toggleTag(tag)"
          >
            {{tag}}
          </text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-section">
      <button class="submit-btn">立即生成<text class="small">(需消耗10枚豆)</text></button>
      <view class="promotion-text">
        <text class="link-text">>即刻开通订阅，我取各种福利<</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MakeMusicDetail',
  data() {
    return {
      songName: '',
      lyrics: '',
      selectedTags: [],
      textareaHeight: 120,
      minHeight: 120,
      selectedTab: 'emotion',
      tagOptions: {
        emotion: ['欢快', '悲伤', '积极', '浪漫', '忧郁', '华丽', '闪耀', '神秘', '惊怒', '紧张', '恐怖', '平静'],
        genre: ['流行', '摇滚', '民谣', '电子', 'R&B', '嘻哈', '古典', '爵士'],
        era: ['80年代', '90年代', '00年代', '10年代', '20年代'],
        instrument: ['钢琴', '吉他', '贝斯', '鼓', '小提琴', '萨克斯', '电子合成器']
      }
    }
  },
  computed: {
    currentTags() {
      return this.selectedTab ? this.tagOptions[this.selectedTab] : [];
    }
  },
  methods: {
    onTextareaInput(e) {
      const lineHeight = 20; // 假设每行高度为20px
      const padding = 30; // 上下padding各15px
      const value = e.detail.value;
      const lines = value.split('\n').length;
      // 计算每行的平均字符数
      const avgCharsPerLine = 30; // 根据实际输入框宽度调整
      const textLines = Math.ceil(value.length / avgCharsPerLine);
      
      // 取行数的最大值，确保有足够空间显示
      const totalLines = Math.max(lines, textLines);
      const newHeight = Math.max(totalLines * lineHeight + padding, this.minHeight);
      
      this.textareaHeight = newHeight;
    },
    selectTab(tab) {
      if (this.selectedTab === tab) {
        this.selectedTab = '';
      } else {
        this.selectedTab = tab;
      }
      // 切换标签时清空已选择的标签
      this.selectedTags = [];
    },
    toggleTag(tag) {
      if (this.selectedTags.includes(tag)) {
        this.selectedTags = this.selectedTags.filter(t => t !== tag);
      } else {
        this.selectedTags.push(tag);
      }
    }
  }
}
</script>

<style lang="scss">
@import './makeMusicDetail.scss';
</style>