MoeNovaClient/pages/makedetail/makeImgDetail.vue

<template>
  <view class="makedetail-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <text class="iconfont icon-left">&#xe8ef;</text>
      </view>
      <view class="right-info">
        <view class="coin">
          <image src="/static/coin.png" mode="aspectFit"></image>
          <text>999</text>
        </view>
        <view class="diamond">
          <image src="/static/diamond.png" mode="aspectFit"></image>
          <text>2</text>
        </view>
      </view>
    </view>

    <!-- 创作预览区域 -->
    <view class="preview-section">
      <view class="preview-title">创作预览</view>
      <view class="preview-card">
        <image class="loading-icon" src="/static/loading.png" mode="aspectFit"></image>
        <text class="loading-text">生成中 0%</text>
        <text class="sub-text">请耐心等待制作完成</text>
      </view>
    </view>

    <!-- 创作描述输入区 -->
    <view class="description-section">
      <view class="section-header">
        <text class="section-title">创作描述<text class="required">*</text></text>
        <view class="clear-text" @click="clearDescription">
          <image src="/static/clear.png" mode="aspectFit"></image>
          <text>清空文本</text>
        </view>
      </view>
      <textarea 
        class="input-area" 
        v-model="description"
        placeholder="请输入描述语,例如:穿着白色运动服,外表俊朗..."
        maxlength="1000"
        @input="onDescriptionInput"
      ></textarea>
      <view class="word-count">{{descriptionLength}}/1000</view>
    </view>

    <!-- 行为动作选择区 -->
    <view class="action-section">
      <view class="section-title">行为动作</view>
      <input 
        class="input-box" 
        v-model="action"
        placeholder="可输入也可点击推荐词" 
      />
      <view class="tag-group">
        <text 
          class="tag" 
          v-for="(item, index) in actionTags" 
          :key="index"
          @click="selectAction(item)"
        >{{item}}</text>
      </view>
    </view>

    <!-- 主体环境选择区 -->
    <view class="environment-section">
      <view class="section-title">主体环境</view>
      <input 
        class="input-box" 
        v-model="environment"
        placeholder="可输入也可点击推荐词" 
      />
      <view class="tag-group">
        <text 
          class="tag" 
          v-for="(item, index) in environmentTags" 
          :key="index"
          @click="selectEnvironment(item)"
        >{{item}}</text>
      </view>
    </view>

    <!-- 主体形象选择区 -->
    <view class="image-section">
      <view class="section-title">主体形象</view>
      <input 
        class="input-box" 
        v-model="image"
        placeholder="可输入也可点击推荐词" 
      />
      <view class="tag-group">
        <text 
          class="tag" 
          v-for="(item, index) in imageTags" 
          :key="index"
          @click="selectImage(item)"
        >{{item}}</text>
      </view>
    </view>

    <!-- 参考风格选择区 -->
    <view class="style-section">
      <view class="section-title">选择参考风格<text class="required">*</text></view>
      <scroll-view class="style-scroll" scroll-x>
        <view 
          class="style-item" 
          v-for="(item, index) in styleList" 
          :key="index"
          :class="{'active': selectedStyle === index}"
          @click="selectStyle(index)"
        >
          <image :src="item.image" mode="aspectFill"></image>
          <text>{{item.name}}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-button">
      <button class="generate-btn" @click="generateImage">立即生成(消耗10贡献)</button>
      <view class="promotion-link">
        <text>> 即刻开通订阅，获取各种福利! <</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      description: '',
      descriptionLength: 0,
      action: '',
      environment: '',
      image: '',
      selectedStyle: -1,
      actionTags: ['跳舞', '开枪', '喝咖啡', '看书', '运动'],
      environmentTags: ['都市大道', '大树底下', '办公室', '厨房'],
      imageTags: ['戴着墨镜', '戴着耳机', '戴着帽子', '手持冲浪板'],
      styleList: [
        { name: '自然共生', image: '/static/style1.png' },
        { name: '国风新锋', image: '/static/style2.png' },
        { name: '萌系治愈', image: '/static/style3.png' }
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    clearDescription() {
      this.description = ''
      this.descriptionLength = 0
    },
    onDescriptionInput(e) {
      this.descriptionLength = e.detail.value.length
    },
    selectAction(tag) {
      this.action = tag
    },
    selectEnvironment(tag) {
      this.environment = tag
    },
    selectImage(tag) {
      this.image = tag
    },
    selectStyle(index) {
      this.selectedStyle = index
    },
    generateImage() {
      if (!this.description) {
        uni.showToast({
          title: '请输入创作描述',
          icon: 'none'
        })
        return
      }
      if (this.selectedStyle === -1) {
        uni.showToast({
          title: '请选择参考风格',
          icon: 'none'
        })
        return
      }
      // TODO: 调用生成接口
    }
  }
}
</script>

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