MoeNovaClient/components/dialogs/CraftingDialog.vue

<template>
  <view class="crafting-dialog" v-if="visible" @click.stop>
    <view class="dialog-mask" @click="onClose"></view>
    <view class="dialog-content" :class="{ 'slide-up': visible }">
      <!-- 顶部标题栏 -->
      <view class="dialog-header">
        <text class="title">初级工具台</text>
        <!-- <view class="close-btn" @click="onClose">×</view> -->
      </view>
      
      <!-- 制造台内容 -->
      <view class="dialog-body">
        <view class="crafting-content">
          <!-- 工具格子列表 -->
          <scroll-view 
            class="tools-scroll" 
            scroll-x="true" 
            :scroll-left="scrollLeft"
            @scroll="onScroll"
            @touchstart.native="onTouchStart"
            @touchmove.native="onTouchMove"
            @touchend.native="onTouchEnd"
            :scroll-with-animation="true"
            :enhanced="true"
            :show-scrollbar="false"
            :bounces="false"
          >
            <view class="tools-grid" @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" @touchend.stop="onTouchEnd">
              <view 
                v-for="(tool, index) in tools" 
                :key="index"
                class="tool-item"
                :class="{ 'selected': selectedToolIndex === index }"
                @click="selectTool(index)"
              >
                <image :src="tool.image" mode="aspectFit" class="tool-image"></image>
                <text class="tool-name">{{ tool.name }}</text>
              </view>
            </view>
          </scroll-view>
          
          <!-- 选中工具的详情 -->
          <view class="tool-details" v-if="selectedTool">
            <text class="tool-description">{{ selectedTool.description }}</text>
            <view class="materials-row">
              <view class="materials">
                <view v-for="(cost, index) in selectedTool.costs" :key="index" class="material-item">
                  <image :src="index === 0 ? '/static/island/items/item_wood1.png' : index === 1 ? '/static/island/items/item_mine1.png' : '/static/island/UI/wd_icon_xingyuan.png'" mode="aspectFit" class="material-icon"></image>
                  <text class="material-count">{{ cost }}</text>
                </view>
              </view>
              <view class="craft-btn" @click="onCraft">打造</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CraftingDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedToolIndex: 0,
      scrollLeft: 0,
      startX: 0,
      lastX: 0,
      isDragging: false,
      tools: [
        {
          name: '捕虫网',
          image: '/static/island/items/item_bugnet1.png',
          description: '可以让你用来捕捉大虫',
          costs: [2000, 800, 920]
        },
        {
          name: '石镐',
          image: '/static/island/items/item_stonepickaxe1.png',
          description: '用来挖掘矿石',
          costs: [2000, 8000, 1300]
        },
        {
          name: '铲子',
          image: '/static/island/items/item_shovel1.png',
          description: '用来挖掘地面',
          costs: [3000, 7200, 2600]
        },
        {
          name: '斧子',
          image: '/static/island/items/item_axe1.png',
          description: '用来砍伐树木',
          costs: [5500, 10000, 5800]
        }
      ]
    }
  },
  computed: {
    selectedTool() {
      return this.tools[this.selectedToolIndex]
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    selectTool(index) {
      this.selectedToolIndex = index
    },
    onCraft() {
      // TODO: 实现制造逻辑
      uni.showToast({
        title: `正在制造${this.selectedTool.name}`,
        icon: 'none'
      })
    },
    onScroll(e) {
      console.log('滚动事件:', {
        scrollLeft: e.detail.scrollLeft
      });
      this.scrollLeft = e.detail.scrollLeft;
    },
    onTouchStart(e) {
      console.log('触摸开始:', {
        clientX: e.touches[0].clientX,
        pageX: e.touches[0].pageX,
        screenX: e.touches[0].screenX,
        target: e.target
      });
      this.startX = e.touches[0].clientX;
      this.isDragging = true;
      e.preventDefault && e.preventDefault();
    },
    onTouchMove(e) {
      if (!this.isDragging) return;
      const currentX = e.touches[0].clientX;
      const deltaX = this.startX - currentX;
      console.log('触摸移动:', {
        currentX,
        startX: this.startX,
        deltaX,
        scrollLeft: this.scrollLeft,
        target: e.target
      });
      this.scrollLeft += deltaX;
      this.startX = currentX;
      e.preventDefault && e.preventDefault();
    },
    onTouchEnd(e) {
      console.log('触摸结束:', {
        finalScrollLeft: this.scrollLeft,
        target: e.target
      });
      this.isDragging = false;
      e.preventDefault && e.preventDefault();
    }
  }
}
</script>

<style lang="scss" scoped>
.crafting-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  
  .dialog-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  
  .dialog-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #E79D5E;
    box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(255,190,134,0.3);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    
    &.slide-up {
      transform: translateY(0);
    }
  }
  
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    height: 72rpx;
    width: 220rpx;
    background: #FDDEC1;
    box-shadow: inset 0rpx 4rpx 4rpx 0rpx rgba(255,190,134,0.3);
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      padding-left: 20rpx;
      color: #A95F3C;
    }
    
    .close-btn {
      font-size: 48rpx;
      color: #999;
      padding: 0 20rpx;
    }
  }
  
  .dialog-body {
    background: #FDDEC1;
    margin-top: -32rpx;
  }
  
  .crafting-content {
    padding-bottom: 32rpx;
    .tools-scroll {
      width: 100%;
      white-space: nowrap;
      // margin-bottom: 32rpx;
      
      .tools-grid {
        display: flex;
        width: max-content;
        padding: 20rpx;
        
        .tool-item {
          width: 180rpx;
          height: 180rpx;
          flex-shrink: 0;
          margin-right: 20rpx;
          background: #FFF1E4;
          border-radius: 20rpx 20rpx 20rpx 20rpx;
          padding: 5rpx;
          text-align: center;
          border: 2rpx solid #DEB691;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          
          &:last-child {
            margin-right: 20rpx;
          }
          
          &.selected {
            border: 4rpx solid #84B654;
            background: #E8F5E9;
          }
          
          .tool-image {
            width: 178rpx;
            height: 178rpx;
            // margin: 2rpx;
            background: #FBD6A9;
            border-radius: 16rpx;
            // padding: 10rpx;
            box-sizing: border-box;
          }
          
          .tool-name {
            font-size: 28rpx;
            font-weight: bold;
            color:#A95F3C;
            white-space: normal;
            line-height: 1.2;
            width: 100%;
            padding: 12rpx 0;
            background: rgba(255, 255, 255, 0.8);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 0 0 20rpx 20rpx;
          }
        }
      }
    }
    
    .tool-details {
      width: 694rpx;
      height: 170rpx;
      background: #FFF1E4;
      box-shadow: inset 0rpx 6rpx 0rpx 0rpx rgba(255,255,255,0.3), inset 0rpx -6rpx 0rpx 0rpx #F6E0CB, 0rpx 4rpx 4rpx 0rpx #F3D2B2;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      border: 2rpx solid #DEB691;
      margin: 0 auto;
      padding: 20rpx 30rpx;
      box-sizing: border-box;
      
      .tool-description {
        font-size: 28rpx;
        font-weight: bold;
        color: #A95F3C;
        margin-bottom: 16rpx;
        line-height: 1.4;
      }
      
      .materials-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32rpx;
      }
      
      .materials {
        display: flex;
        gap: 32rpx;
        
        .material-item {
          display: flex;
          align-items: center;
          gap: 8rpx;
          
          .material-icon {
            width: 40rpx;
            height: 40rpx;
          }
          
          .material-count {
            font-size: 28rpx;
            color: #A95F3C;
          }
        }
      }
      
      .craft-btn {
        width: 144rpx;
        height: 53rpx;
        background: url('/static/island/UI/btn_green.png') no-repeat;
        background-size: 100% 100%;
        color: white;
        font-size: 28rpx;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:active {
          opacity: 0.9;
        }
      }
    }
  }
}
</style>