daimp-front/sub-operation-service/src/views/brand/components/ApplyDetail.vue

<template>
  <div class="container">
    <el-breadcrumb separator="·">
      <el-breadcrumb-item style="cursor: pointer" @click="backToList">使用申请</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">我要申请</a></el-breadcrumb-item>
    </el-breadcrumb>

    <img :src="getAssetsFile('images/brand/11.png')" alt="" class="img" />

    <el-form label-width="120px" class="form">
      <h1 style="margin: 20px 0 20px 50px">请选择溯源农产品申请</h1>
      <el-form-item label="检查批次">
        <el-select v-model="batch" placeholder="请选择农产品批次" :width="200">
          <el-option label="批次A" value="A" />
          <el-option label="批次B" value="B" />
        </el-select>
      </el-form-item>

      <el-form-item label="溯源码">
        <el-button type="primary" @click="uploadTraceCode">
          <template #icon>
            <i class="el-icon-upload"></i>
          </template>
          点击上传
        </el-button>
      </el-form-item>

      <el-form-item label="产品名称">
        <el-input v-model="productName" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item label="检测时间">
        <el-input v-model="detectTime" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item label="检测站">
        <el-input v-model="station" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item label="产地信息">
        <el-input v-model="origin" placeholder="自动获取..." disabled />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="border-radius: 8px" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getAssetsFile } from '@/utils/index.js';

const router = useRouter();
const route = useRoute();

const productId = route.params.id;
const product = ref({ name: '加载中...', id: productId });

onMounted(() => {
  // 模拟加载产品数据
  product.value = {
    id: productId,
    name: productId == 1 ? '有机苹果' : '绿色蔬菜',
  };
});

const batch = ref('');
const productName = ref('');
const detectTime = ref('');
const station = ref('');
const origin = ref('');

function backToList() {
  router.push(`/sub-operation-service/brand/apply`);
}

function uploadTraceCode() {
  console.log('上传溯源码');
}

function submit() {
  console.log('提交申请：', {
    product: product.value,
    batch: batch.value,
    detectTime: detectTime.value,
    station: station.value,
    origin: origin.value,
  });
  ElMessage.success('提交成功！');
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  background-color: #fff;
  position: relative;
  height: 100%;

  :deep(.el-breadcrumb__inner a) {
    color: #25bf82;
  }
}
.img {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 60px;
  left: 20px;
}

.form {
  margin-top: 20px;
  width: 60%;
  margin: 0 auto;
}
:deep(.form .el-form-item__content) {
  max-width: 300px;
}

:deep(.form .el-input, .form .el-select) {
  width: 100%;
  max-width: 300px;
}
</style>