lift-drawing-wechat/pages/index/index1.vue

<template>
  <view class="container">
    <!-- 顶部图片和标题 -->
    <view class="header-section">
      <image
        class="header-image"
        src="/static/imgs/indexImg.png"
        mode="aspectFill"
      ></image>
      <view class="header-overlay">
        <view class="header-title">生成电梯图纸</view>
        <view class="header-subtitle">
          选择模板并设置参数，快速生成专业电梯施工图
        </view>
      </view>
    </view>

    <!-- 选择图纸模板 -->
    <view class="section">
      <view class="section-title">选择图纸模板</view>
      <view class="template-grid">
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'passenger' }"
          @click="selectTemplate('passenger')"
        >
          <u-icon name="edit-pen" color="#4285f4" size="24"></u-icon>
          <view class="template-name">乘客电梯标准图纸</view>
          <view class="template-desc">适用于住宅、商业建筑</view>
        </view>
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'freight' }"
          @click="selectTemplate('freight')"
        >
          <u-icon name="car" color="#4285f4" size="24"></u-icon>
          <view class="template-name">货运电梯专用图纸</view>
          <view class="template-desc">适用于仓库、工厂</view>
        </view>
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'medical' }"
          @click="selectTemplate('medical')"
        >
          <u-icon name="plus-circle" color="#4285f4" size="24"></u-icon>
          <view class="template-name">医用电梯专业图纸</view>
          <view class="template-desc">适用于医院、医疗场所</view>
        </view>
        <view
          class="template-item"
          :class="{ active: selectedTemplate === 'sightseeing' }"
          @click="selectTemplate('sightseeing')"
        >
          <u-icon name="eye" color="#4285f4" size="24"></u-icon>
          <view class="template-name">观光电梯定制图纸</view>
          <view class="template-desc">适用于商场、酒店</view>
        </view>
      </view>
    </view>

    <!-- 设置参数 -->
    <view class="section">
      <view class="section-title">设置参数</view>

      <!-- 电梯类型 -->
      <view class="param-item">
        <view class="param-label">电梯类型</view>
        <u-picker
          :show="showTypePicker"
          :columns="elevatorTypes"
          @confirm="onTypeConfirm"
          @cancel="showTypePicker = false"
        ></u-picker>
        <view class="param-value" @click="showTypePicker = true">
          {{ selectedType }}
          <u-icon name="arrow-down" size="16"></u-icon>
        </view>
      </view>

      <!-- 载重 -->
      <view class="param-item">
        <view class="param-label">载重(kg)</view>
        <view class="param-control">
          <u-icon
            name="minus-circle"
            @click="decreaseWeight"
            color="#999"
          ></u-icon>
          <input class="param-input" v-model="weight" type="number" />
          <u-icon
            name="plus-circle"
            @click="increaseWeight"
            color="#4285f4"
          ></u-icon>
        </view>
      </view>

      <!-- 井道宽度 -->
      <view class="param-item">
        <view class="param-label">井道宽度(mm)</view>
        <view class="param-control">
          <u-icon
            name="minus-circle"
            @click="decreaseWidth"
            color="#999"
          ></u-icon>
          <input class="param-input" v-model="shaftWidth" type="number" />
          <u-icon
            name="plus-circle"
            @click="increaseWidth"
            color="#4285f4"
          ></u-icon>
        </view>
      </view>

      <!-- 井道深度 -->
      <view class="param-item">
        <view class="param-label">井道深度(mm)</view>
        <view class="param-control">
          <u-icon
            name="minus-circle"
            @click="decreaseDepth"
            color="#999"
          ></u-icon>
          <input class="param-input" v-model="shaftDepth" type="number" />
          <u-icon
            name="plus-circle"
            @click="increaseDepth"
            color="#4285f4"
          ></u-icon>
        </view>
      </view>

      <!-- 顶层高度 -->
      <view class="param-item">
        <view class="param-label">顶层高度(mm)</view>
        <view class="param-control">
          <u-icon
            name="minus-circle"
            @click="decreaseTopHeight"
            color="#999"
          ></u-icon>
          <input class="param-input" v-model="topHeight" type="number" />
          <u-icon
            name="plus-circle"
            @click="increaseTopHeight"
            color="#4285f4"
          ></u-icon>
        </view>
      </view>

      <!-- 底坑深度 -->
      <view class="param-item">
        <view class="param-label">底坑深度(mm)</view>
        <view class="param-control">
          <u-icon
            name="minus-circle"
            @click="decreasePitDepth"
            color="#999"
          ></u-icon>
          <input class="param-input" v-model="pitDepth" type="number" />
          <u-icon
            name="plus-circle"
            @click="increasePitDepth"
            color="#4285f4"
          ></u-icon>
        </view>
      </view>
    </view>

    <!-- 备注说明 -->
    <view class="section">
      <view class="section-title">备注说明</view>
      <u-textarea
        v-model="remarks"
        placeholder="如有特殊需要请备注"
        :maxlength="200"
        count
        height="120"
      ></u-textarea>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <u-button
        type="primary"
        size="large"
        @click="generateDrawing"
        :loading="generating"
      >
        生成图纸
      </u-button>
      <u-button type="default" size="large" @click="viewHistory" plain>
        查看记录
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  onShow,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onReachBottom,
} from "@dcloudio/uni-app";
import { useAuthStore, useUserStore } from "@/store";
import RPC from "@/utils/request";

const authStore = useAuthStore();
const userStore = useUserStore();

// 响应式数据
const selectedTemplate = ref("passenger");
const showTypePicker = ref(false);
const selectedType = ref("曳引式电梯");
const weight = ref(1000);
const shaftWidth = ref(2100);
const shaftDepth = ref(2100);
const topHeight = ref(4500);
const pitDepth = ref(4500);
const remarks = ref("");
const generating = ref(false);

// 电梯类型选项
const elevatorTypes = ref([["曳引式电梯", "液压式电梯", "螺杆式电梯"]]);

// 选择模板
const selectTemplate = (template) => {
  selectedTemplate.value = template;
};

// 电梯类型选择确认
const onTypeConfirm = (e) => {
  selectedType.value = e.value[0];
  showTypePicker.value = false;
};

// 载重控制
const decreaseWeight = () => {
  if (weight.value > 100) {
    weight.value -= 100;
  }
};
const increaseWeight = () => {
  weight.value += 100;
};

// 井道宽度控制
const decreaseWidth = () => {
  if (shaftWidth.value > 100) {
    shaftWidth.value -= 100;
  }
};
const increaseWidth = () => {
  shaftWidth.value += 100;
};

// 井道深度控制
const decreaseDepth = () => {
  if (shaftDepth.value > 100) {
    shaftDepth.value -= 100;
  }
};
const increaseDepth = () => {
  shaftDepth.value += 100;
};

// 顶层高度控制
const decreaseTopHeight = () => {
  if (topHeight.value > 100) {
    topHeight.value -= 100;
  }
};
const increaseTopHeight = () => {
  topHeight.value += 100;
};

// 底坑深度控制
const decreasePitDepth = () => {
  if (pitDepth.value > 100) {
    pitDepth.value -= 100;
  }
};
const increasePitDepth = () => {
  pitDepth.value += 100;
};

// 生成图纸
const generateDrawing = async () => {
  if (!selectedTemplate.value) {
    uni.showToast({
      title: "请选择图纸模板",
      icon: "none",
    });
    return;
  }

  generating.value = true;
  try {
    const params = {
      template: selectedTemplate.value,
      type: selectedType.value,
      weight: weight.value,
      shaftWidth: shaftWidth.value,
      shaftDepth: shaftDepth.value,
      topHeight: topHeight.value,
      pitDepth: pitDepth.value,
      remarks: remarks.value,
    };

    // 这里调用生成图纸的API
    // const result = await RPC.post('/api/generate-drawing', params)

    uni.showToast({
      title: "图纸生成中...",
      icon: "loading",
      duration: 2000,
    });

    // 模拟生成过程
    setTimeout(() => {
      uni.showToast({
        title: "图纸生成成功",
        icon: "success",
      });
      generating.value = false;
    }, 2000);
  } catch (error) {
    console.error("生成图纸失败:", error);
    uni.showToast({
      title: "生成失败，请重试",
      icon: "none",
    });
    generating.value = false;
  }
};

// 查看历史记录
const viewHistory = () => {
  uni.navigateTo({
    url: "/pagesA/generate-record/generate-record",
  });
};

// 分享给朋友
onShareAppMessage((data) => {
  console.log("🚀 ~ onShareAppMessage ~ data:", data);
  return {
    title: "电梯图纸生成平台",
    path: "/pages/index/index",
  };
});

// 分享到朋友圈
onShareTimeline((data) => {
  console.log("🚀 ~ onShareTimeline ~ data:", data);
  return {
    title: "电梯图纸生成平台",
    query: "a=1&b=2",
  };
});

onLoad(() => {
  console.log("index-onLoad");
});
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120px;
}

.header-section {
  position: relative;
  height: 200px;
  overflow: hidden;

  .header-image {
    width: 100%;
    height: 100%;
  }

  .header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;

    .header-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .header-subtitle {
      font-size: 14px;
      opacity: 0.9;
      text-align: center;
      padding: 0 20px;
    }
  }
}

.section {
  margin: 16px;
  background: white;
  border-radius: 12px;
  padding: 16px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 16px;
  }
}

.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;

  .template-item {
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.3s;

    &.active {
      border-color: #4285f4;
      background-color: #f0f7ff;
    }

    .template-name {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      margin: 8px 0 4px;
    }

    .template-desc {
      font-size: 12px;
      color: #999;
    }
  }
}

.param-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;

  &:last-child {
    margin-bottom: 0;
  }

  .param-label {
    font-size: 14px;
    color: #333;
    flex-shrink: 0;
  }

  .param-value {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    gap: 4px;
  }

  .param-control {
    display: flex;
    align-items: center;
    gap: 12px;

    .param-input {
      width: 80px;
      text-align: center;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      padding: 6px 8px;
      font-size: 14px;
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  gap: 12px;

  .u-button {
    flex: 1;
  }
}
</style>