daimp-front/sub-operation-service/src/views/packaging/details.vue

<template>
  <el-dialog v-model="dialogVisible" :close-on-click-modal="false" custom-class="custom-inquiry-dialog" width="450px">
    <div class="info-section">
      <div class="info-item">
        <span class="label">首选商家：</span>
        <span class="value">{{ route.description }}</span>
      </div>
      <div class="info-item">
        <span class="label">选择服务：</span>
        <span class="value">{{ route.title }}</span>
      </div>
    </div>

    <el-form ref="formRef" :model="form" label-position="top">
      <el-form-item label="需求量：" prop="quantity" :rules="[{ required: true, message: '请输入重量' }]">
        <el-input v-model="form.quantity" placeholder="请输入重量（kg）">
          <template #suffix>kg</template>
        </el-input>
      </el-form-item>

      <el-form-item label="您的称呼：" prop="name" :rules="[{ required: true, message: '请输入您的称呼' }]">
        <el-input v-model="form.name" placeholder="请输入您的称呼" />
      </el-form-item>

      <el-form-item
        label="您的电话："
        prop="phone"
        :rules="[
          { required: true, message: '请输入电话' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' },
        ]"
      >
        <el-input v-model="form.phone" placeholder="请输入电话号码" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
        <el-button class="submit-btn" type="primary" @click="handleSubmit">发送询价</el-button>
      </div>
    </template>
  </el-dialog>
  <Common>
    <template #main>
      <div class="max-w-7xl mx-auto p-4">
        <div class="flex items-center mb-4">
          <h2 class="text-green-500 text-lg font-bold">包装 · 查看详情</h2>
        </div>
        <div class="flex items-center mb-8">
          <div class="flex items-center mr-4">
            <!-- 占位符图片，实际使用时替换为真实图片 -->
            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
          </div>
          <div class="flex-1">
            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
            <p class="text-gray-600 mb-2">{{ route.description }}</p>
            <div class="flex items-center space-x-2 text-green-500 text-sm">
              <div class="bac">{{ route.data[0] }}</div>
              <div class="bac">{{ route.data[1] }}</div>
              <div class="bac">{{ route.data[2] }}</div>
            </div>
            <p class="mt-2 text-gray-700">联系人：李涛</p>
            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
            <p class="mt-2 text-gray-700">
              <el-icon><Location /></el-icon> {{ route.location }}
            </p>
          </div>
          <div class="text-gray-500 text-sm flex items-center">
            <div>
              <span style="color: #999999">报价：</span>
              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
            </div>
            <div>
              <el-button size="large" type="primary" @click="goDei"
                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
                留下信息
              </el-button>
            </div>
          </div>
        </div>
        <div class="mt-6">
          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
          <div class="bg-white p-4 rounded-lg shadow-sm">
            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
          </div>
        </div>
      </div>
    </template>
  </Common>
</template>

<script setup>
import Common from './components/common.vue';
import { getAssetsFile } from '@/utils';
import { ref, reactive, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute().query;
const dialogVisible = ref(false);
const formRef = ref(null);

const form = reactive({
  quantity: '',
  title: '',
  phone: '',
  name: '',
});

const diotext = ref('');
const diodescription = ref('');

const goDei = (data) => {
  //   diodescription.value = data.description;
  //   diotext.value = data.title;
  dialogVisible.value = true;
};

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('提交数据:', form);
      dialogVisible.value = false;
    }
  });
};
</script>

<style lang="scss" scoped>
/* 根据需要添加样式，这里仅提供基础样式 */
// 基础颜色配置
$primary-color: #25bf82; // 主色调
$text-dark: #25bf82; // 深色文字
$text-regular: #606266; // 常规文字
$border-color: #dcdfe6; // 边框颜色

// 弹窗整体样式
:deep(.custom-inquiry-dialog) {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #f2f6fc;
    .el-dialog__title {
      font-size: 18px;
      color: $text-dark;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 20px 28px;
  }

  .el-form-item__label {
    color: $text-regular;
    font-size: 14px;
    padding-bottom: 6px;
  }
}

.info-section {
  padding: 0px 50px;
  margin-bottom: 24px;
  .info-item {
    margin-bottom: 12px;
    .label {
      color: $text-regular;
      margin-right: 8px;
      font-size: 20px;
    }
    .value {
      color: $text-dark;
      font-weight: 500;
      font-size: 20px;
    }
  }
}

// 输入框样式覆盖
:deep(.el-input) {
  .el-input__inner {
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    &:focus {
      border-color: $primary-color;
    }
  }
  .el-input__suffix {
    color: $text-regular;
    right: 12px;
  }
}

// 下拉菜单样式
:deep(.custom-select-dropdown) {
  .el-select-dropdown__item {
    color: $text-regular;
    &.selected {
      color: $primary-color;
    }
  }
}

// 按钮组样式
.dialog-footer {
  text-align: right;
  .el-button {
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
  }
  .cancel-btn {
    color: $text-regular;
    &:hover {
      color: $primary-color;
      border-color: $primary-color;
    }
  }
  .submit-btn {
    color: #fff;
    background: $primary-color;
    &:hover {
      background: mix($primary-color, #fff, 85%);
    }
  }
}
.bac {
  background: rgba(37, 191, 130, 0.1);
  border: 1px solid rgba(37, 191, 130, 0.5);
  border-radius: 8px;
  padding: 2px 5px;
}

.image-box {
  width: 300px;
  height: 300px;
}

.text-gray-500 {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start !important;
  font-size: 20px !important;
  color: #000000 !important;
  padding-top: 30px;
}

.text-gray-600 {
  font-size: 20px;
  color: #000000 !important;
}

.flex-1 {
  width: 47%;
  height: 300px;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
}

.max-w-7xl {
  max-width: 80rem;
  background-color: #fff;
  border-radius: 10px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.p-4 {
  padding: 1rem;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mr-4 {
  margin-right: 1rem;
}

.text-green-500 {
  color: #25bf82;
}

.text-lg {
  font-size: 1.125rem;
  text-align: left;
}

.font-bold {
  font-weight: 700;
}

.rounded-lg {
  border-radius: 0.5rem;
  background-color: #f5f5f5;
}

.shadow {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.text-xl {
  font-size: 24px;
}

.text-gray-600 {
  color: #757575;
}

.text-gray-700 {
  color: #000000;
  font-size: 18px;
}

.text-sm {
  font-size: 0.875rem;
}

.space-x-2 {
  gap: 0.5rem;
}

.bg-green-500 {
  background-color: #4caf50;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mt-4 {
  margin-top: 1rem;
}
</style>