分拣包装

sub-operation-service/src/views/packaging/apply.vue

@@ -3,48 +3,79 @@
     <template #main>
       <div class="max-w-7xl mx-auto p-4">
         <div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">申请分拣</span></div>
-        <img src="@/assets/images/warehouseLogistics/img25.png" fit="cover" class="storage-image" @click="toLink" />
+        <h1 style="margin-bottom: 20px">填写需求表</h1>
-        <!-- <div class="flex items-center mb-4">
+        <el-form :model="form" label-width="auto" :rules="rules">
-          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
+          <el-form-item label="您的称呼" prop="name">
+            <el-input v-model="form.name" style="width: 400px" />
+          </el-form-item>
+          <el-form-item label="您的电话" prop="phone">
+            <el-input v-model="form.phone" style="width: 400px" />
+          </el-form-item>
+          <!-- <el-form-item label="详细地址" prop="address1">
+            <el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
+              <el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <span style="width: 2%"></span>
+            <el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
+              <el-input v-model="form.address2" />
+            </el-form-item>
+          </el-form-item> -->
+          <el-form-item label="详细地址" required>
+            <div style="display: flex; gap: 16px">
+              <el-form-item prop="selectedAddress">
+                <el-cascader
+                  v-model="form.selectedAddress"
+                  :options="addressOptions"
+                  :props="cascaderProps"
+                  placeholder="请选择地址"
+                  :style="{ width: unifiedWidth }"
+                />
+              </el-form-item>
+              <el-form-item prop="detailAddress">
+                <el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
+              </el-form-item>
             </div>
-        <div class="flex items-center mb-8">
+          </el-form-item>
-          <div class="flex items-center mr-4">
+          <!-- 分拣物品 -->
-            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+          <el-form-item label="分拣物品" prop="goods">
-          </div>
+            <!-- <el-input v-model="form.goods" style="width: 44%" /> -->
-          <div class="flex-1">
+            <el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
-            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            </el-select>
-            <div class="flex items-center space-x-2 text-green-500 text-sm">
+          </el-form-item>
-              <div class="bac">{{ route.data[0] }}</div>
+          <!-- 分拣数量 -->
-              <div class="bac">{{ route.data[1] }}</div>
+          <el-form-item label="分拣数量" prop="num">
-              <div class="bac">{{ route.data[2] }}</div>
+            <!-- <el-input v-model="form.num" style="width: 44%" /> -->
-            </div>
+            <el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
-            <p class="mt-2 text-gray-700">联系人：李涛</p>
+              <template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
-            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
+              ><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            <p class="mt-2 text-gray-700">
+            </el-select>
-              <el-icon><Location /></el-icon> {{ route.location }}
+          </el-form-item>
-            </p>
+          <!-- 分拣类型 -->
-          </div>
+          <el-form-item label="分拣类型" prop="type">
-          <div class="text-gray-500 text-sm flex items-center">
+            <!-- <el-input v-model="form.type" style="width: 44%" /> -->
-            <div>
+            <el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
-              <span style="color: #999999">报价：</span>
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
+            </el-select>
+          </el-form-item>
+          <!-- 截至日期 -->
+          <el-form-item label="截至日期" prop="date">
+            <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 400px" />
+          </el-form-item>
+          <el-form-item label="分拣要求" prop="desc">
+            <el-input v-model="form.desc" type="textarea" style="width: 400px" />
+          </el-form-item>
+        </el-form>
+        <div style="text-align: left; font-size: 22px; margin-bottom: 10px">
+          <span>合计：</span>
+          <span style="color: rgb(37, 191, 130)">...</span>
+          <span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
         </div>
         <div>
-              <el-button size="large" type="primary" @click="goDei"
+          <el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
-                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+          <el-button style="width: 150px">取消</el-button>
-                留下信息
-              </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>
@@ -52,41 +83,122 @@
 <script setup>
 import Common from './components/common.vue';
 import { getAssetsFile } from '@/utils';
-import { ref, reactive, watch } from 'vue';
+import { ref, reactive, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { getRegion } from '@/apis/common';
 const route = useRoute();
 const router = useRouter();
 const dialogVisible = ref(false);
 const formRef = ref(null);
 
+const unifiedWidth = '400px';
+const formSize = 'large';
 const form = reactive({
-  quantity: '',
-  title: '',
-  phone: '',
   name: '',
+  phone: '',
+  address1: '',
+  address2: '',
+  selectedAddress: [], //选中的区域编码数组
+  areaAddress: '', //区域地址
+  detailAddress: '', //详细地址
+  goods: '',
+  num: '',
+  type: '',
+  date: '',
+  desc: '',
 });
+const rules = reactive({
+  name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
+  phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
+  address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
+  address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
+  goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
+  num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
+  type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
+  date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
+  desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
+});
+const options = [
+  {
+    value: '1',
+    label: '西红柿',
+  },
+  {
+    value: '2',
+    label: '茄子',
+  },
+  {
+    value: '3',
+    label: '辣椒',
+  },
+];
+const options1 = [
+  {
+    value: '1',
+    label: '100',
+  },
+  {
+    value: '2',
+    label: '200',
+  },
+  {
+    value: '3',
+    label: '300',
+  },
+  {
+    value: '3',
+    label: '400',
+  },
+  {
+    value: '3',
+    label: '500',
+  },
+];
+const options2 = [
+  {
+    value: '1',
+    label: '人工分拣',
+  },
+  {
+    value: '2',
+    label: '自动化分拣',
+  },
+];
+
+// const addressOptions = [
+//   // 下拉框的选项数据
+//   { value: 'beijing', label: '北京市' },
+//   { value: 'shanghai', label: '上海市' },
+//   { value: 'guangzhou', label: '广州市' },
+//   // 可以继续添加更多选项
+// ];
+
+// 级联选择器配置
+const cascaderProps = ref({
+  label: 'areaName', // 选项标签字段名
+  value: 'areaCode', // 选项值字段名
+  children: 'areaChildVOS', // 子选项字段名
+  emitPath: true,
+  expandTrigger: 'hover',
+});
+// 省市区数据（示例）
+const addressOptions = ref([]);
+const getArea = async () => {
+  const res = await getRegion();
+  if (res.code === 200) {
+    addressOptions.value = res.data;
+  } else {
+    ElMessage.error(res.message);
+  }
+};
 
 const toBack = (level) => {
   router.go(level);
 };
-
+onMounted(() => {
-const diotext = ref('');
+  getArea();
-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>
@@ -97,136 +209,6 @@ $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;
@@ -247,83 +229,4 @@ $border-color: #dcdfe6; // 边框颜色
 .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>

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

@@ -3,32 +3,37 @@
     <template #main>
       <div class="max-w-7xl mx-auto p-4">
         <div class="title" @click="toBack(-1)">分拣 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
-        <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" />
+        <!-- <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
         <!-- <div class="flex items-center mb-4">
           <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
-        </div>
+        </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" />
+            <img :src="getAssetsFile(`${data.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>
+            <h3 class="text-xl font-bold mb-2">{{ data.title }}</h3>
-            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            <!-- <p class="text-gray-600 mb-2">{{ data.description }}</p> -->
-            <div class="flex items-center space-x-2 text-green-500 text-sm">
+            <!-- <div class="flex items-center space-x-2 text-green-500 text-sm">
-              <div class="bac">{{ route.data[0] }}</div>
+              <div class="bac">{{ data.data[0] }}</div>
-              <div class="bac">{{ route.data[1] }}</div>
+              <div class="bac">{{ data.data[1] }}</div>
-              <div class="bac">{{ route.data[2] }}</div>
+              <div class="bac">{{ data.data[2] }}</div>
+            </div> -->
+            <p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
+            <p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
+            <p class="mt-2 text-gray-700">所在地：{{ data.location }}</p>
+            <p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
+            <p class="mt-2 text-gray-700">联系电话：{{ data.phone }}</p>
+            <div>
+              <el-button style="width: 100px" size="large" type="primary" @click="goDei"> 立即预约 </el-button>
+              <el-button style="width: 100px" size="large"> 收藏 </el-button>
+              <el-button style="width: 100px" size="large"> 分享 </el-button>
             </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 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>
+              <span class="ml-2 text-green-500 font-bold">￥{{ data.price }}/m</span>
             </div>
             <div>
               <el-button size="large" type="primary" @click="goDei"
@@ -36,14 +41,30 @@
                 留下信息
               </el-button>
             </div>
+          </div> -->
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
+            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/product.png" alt="" />
+            基本信息
+          </h3>
+          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ data.introduce ? data.introduce : ' 目前暂无介绍哦~' }}</p>
           </div>
         </div>
         <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
-          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
-            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
+            地理位置
+          </h3>
+          <img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
+            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
+          </h3>
+          <img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
         </div>
-        </div> -->
       </div>
     </template>
   </Common>
@@ -66,6 +87,9 @@ const form = reactive({
   name: '',
 });
 
+console.log(route);
+let data = route.query;
+
 const toBack = (level) => {
   router.go(level);
 };
@@ -201,6 +225,10 @@ $border-color: #dcdfe6; // 边框颜色
   width: 300px;
   height: 300px;
 }
+.breadth {
+  width: 100%;
+  height: 100%;
+}
 
 .text-gray-500 {
   height: 300px;
@@ -254,6 +282,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .items-center {
   align-items: center;
+  margin-top: 10px;
 }
 
 .mb-4 {
@@ -263,6 +292,9 @@ $border-color: #dcdfe6; // 边框颜色
 .mr-4 {
   margin-right: 1rem;
 }
+.mt-6 {
+  text-align: left;
+}
 
 .text-green-500 {
   color: #25bf82;
@@ -271,6 +303,8 @@ $border-color: #dcdfe6; // 边框颜色
 .text-lg {
   font-size: 1.125rem;
   text-align: left;
+  display: flex;
+  align-items: center;
 }
 
 .font-bold {
@@ -298,7 +332,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .text-gray-700 {
   color: #000000;
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .text-sm {

sub-operation-service/src/views/packaging/details1.vue

@@ -3,32 +3,37 @@
     <template #main>
       <div class="max-w-7xl mx-auto p-4">
         <div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">查看详情</span></div>
-        <img src="@/assets/images/warehouseLogistics/img26.png" fit="cover" class="storage-image" @click="toLink" />
+        <!-- <img src="@/assets/images/warehouseLogistics/img24.png" fit="cover" class="storage-image" @click="toLink" /> -->
         <!-- <div class="flex items-center mb-4">
           <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
-        </div>
+        </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" />
+            <img :src="getAssetsFile(`${data.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>
+            <h3 class="text-xl font-bold mb-2">{{ data.title }}</h3>
-            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            <!-- <p class="text-gray-600 mb-2">{{ data.description }}</p> -->
-            <div class="flex items-center space-x-2 text-green-500 text-sm">
+            <!-- <div class="flex items-center space-x-2 text-green-500 text-sm">
-              <div class="bac">{{ route.data[0] }}</div>
+              <div class="bac">{{ data.data[0] }}</div>
-              <div class="bac">{{ route.data[1] }}</div>
+              <div class="bac">{{ data.data[1] }}</div>
-              <div class="bac">{{ route.data[2] }}</div>
+              <div class="bac">{{ data.data[2] }}</div>
+            </div> -->
+            <p class="mt-2 text-gray-700">报价：{{ data.price }}元/吨</p>
+            <p class="mt-2 text-gray-700">关键词：{{ data.type }}</p>
+            <p class="mt-2 text-gray-700">所在地：{{ data.location }}</p>
+            <p class="mt-2 text-gray-700">联系人：{{ data.contact }}</p>
+            <p class="mt-2 text-gray-700">联系电话：{{ data.phone }}</p>
+            <div>
+              <el-button style="width: 100px" size="large" type="primary" @click="goDei"> 立即预约 </el-button>
+              <el-button style="width: 100px" size="large"> 收藏 </el-button>
+              <el-button style="width: 100px" size="large"> 分享 </el-button>
             </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 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>
+              <span class="ml-2 text-green-500 font-bold">￥{{ data.price }}/m</span>
             </div>
             <div>
               <el-button size="large" type="primary" @click="goDei"
@@ -36,14 +41,30 @@
                 留下信息
               </el-button>
             </div>
+          </div> -->
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
+            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/product.png" alt="" />
+            基本信息
+          </h3>
+          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <p style="text-align: left" class="mb-4 text-gray-700">{{ data.introduce ? data.introduce : ' 目前暂无介绍哦~' }}</p>
           </div>
         </div>
         <div class="mt-6">
-          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">产品详细介绍</h3>
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
-          <div class="bg-white p-4 rounded-lg shadow-sm">
+            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/location.png" alt="" />
-            <p style="text-align: left" class="mb-4 text-gray-700">{{ route.description }} 目前暂无介绍哦~</p>
+            地理位置
+          </h3>
+          <img :src="getAssetsFile(`${data.locationUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
+        </div>
+        <div class="mt-6">
+          <h3 class="text-lg font-bold mb-4" style="margin-top: 30px">
+            <img style="width: 30px; margin-right: 10px" src="@/assets/images/warehouseLogistics/image.png" alt="" />图片
+          </h3>
+          <img :src="getAssetsFile(`${data.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box breadth" />
         </div>
-        </div> -->
       </div>
     </template>
   </Common>
@@ -66,6 +87,9 @@ const form = reactive({
   name: '',
 });
 
+console.log(route);
+let data = route.query;
+
 const toBack = (level) => {
   router.go(level);
 };
@@ -201,6 +225,10 @@ $border-color: #dcdfe6; // 边框颜色
   width: 300px;
   height: 300px;
 }
+.breadth {
+  width: 100%;
+  height: 100%;
+}
 
 .text-gray-500 {
   height: 300px;
@@ -254,6 +282,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .items-center {
   align-items: center;
+  margin-top: 10px;
 }
 
 .mb-4 {
@@ -263,6 +292,9 @@ $border-color: #dcdfe6; // 边框颜色
 .mr-4 {
   margin-right: 1rem;
 }
+.mt-6 {
+  text-align: left;
+}
 
 .text-green-500 {
   color: #25bf82;
@@ -271,6 +303,8 @@ $border-color: #dcdfe6; // 边框颜色
 .text-lg {
   font-size: 1.125rem;
   text-align: left;
+  display: flex;
+  align-items: center;
 }
 
 .font-bold {
@@ -298,7 +332,7 @@ $border-color: #dcdfe6; // 边框颜色
 
 .text-gray-700 {
   color: #000000;
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .text-sm {

sub-operation-service/src/views/packaging/details2.vue

@@ -3,48 +3,83 @@
     <template #main>
       <div class="max-w-7xl mx-auto p-4">
         <div class="title" @click="toBack(-1)">包装 > <span style="color: rgba(37, 191, 130, 1)">申请包装</span></div>
-        <img src="@/assets/images/warehouseLogistics/img27.png" fit="cover" class="storage-image" @click="toLink" />
+        <h1 style="margin-bottom: 20px">填写需求表</h1>
-        <!-- <div class="flex items-center mb-4">
+        <el-form :model="form" label-width="auto" :rules="rules">
-          <h2 class="text-green-500 text-lg font-bold">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</h2>
+          <el-form-item label="您的称呼" prop="name">
+            <el-input v-model="form.name" style="width: 400px" />
+          </el-form-item>
+          <el-form-item label="您的电话" prop="phone">
+            <el-input v-model="form.phone" style="width: 400px" />
+          </el-form-item>
+          <!-- <el-form-item label="详细地址" prop="address1">
+            <el-select v-model="form.address1" placeholder="请选择地址" style="width: 44%">
+              <el-option v-for="item in addressOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+            <span style="width: 2%"></span>
+            <el-form-item prop="address2" style="display: inline-block; width: 44%; margin-bottom: 0">
+              <el-input v-model="form.address2" />
+            </el-form-item>
+          </el-form-item> -->
+          <el-form-item label="详细地址" required>
+            <div style="display: flex; gap: 16px">
+              <el-form-item prop="selectedAddress">
+                <el-cascader
+                  v-model="form.selectedAddress"
+                  :options="addressOptions"
+                  :props="cascaderProps"
+                  placeholder="请选择地址"
+                  :style="{ width: unifiedWidth }"
+                />
+              </el-form-item>
+              <el-form-item prop="detailAddress">
+                <el-input v-model="form.detailAddress" placeholder="详细地址（如街道、门牌号等）" :style="{ width: unifiedWidth }" />
+              </el-form-item>
             </div>
-        <div class="flex items-center mb-8">
+          </el-form-item>
-          <div class="flex items-center mr-4">
+          <!-- 分拣物品 -->
-            <img :src="getAssetsFile(`${route.imageUrl}`)" fit="cover" class="rounded-lg shadow image-box" />
+          <el-form-item label="包装物品" prop="goods">
-          </div>
+            <!-- <el-input v-model="form.goods" style="width: 44%" /> -->
-          <div class="flex-1">
+            <el-select v-model="form.goods" placeholder="请选择分拣物品" style="width: 400px">
-            <h3 class="text-xl font-bold mb-2">{{ route.title }}</h3>
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-            <p class="text-gray-600 mb-2">{{ route.description }}</p>
+            </el-select>
-            <div class="flex items-center space-x-2 text-green-500 text-sm">
+          </el-form-item>
-              <div class="bac">{{ route.data[0] }}</div>
+          <!-- 分拣数量 -->
-              <div class="bac">{{ route.data[1] }}</div>
+          <el-form-item label="包装数量" prop="num">
-              <div class="bac">{{ route.data[2] }}</div>
+            <!-- <el-input v-model="form.num" style="width: 44%" /> -->
-            </div>
+            <el-select v-model="form.num" placeholder="请选择分拣数量" style="width: 400px">
-            <p class="mt-2 text-gray-700">联系人：李涛</p>
+              <template #prefix> <span style="position: absolute; right: 40px"> | 吨</span> </template
-            <p class="mt-2 text-gray-700">联系电话：13888569833</p>
+              ><el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            <p class="mt-2 text-gray-700">
+            </el-select>
-              <el-icon><Location /></el-icon> {{ route.location }}
+          </el-form-item>
-            </p>
+          <!-- 分拣类型 -->
-          </div>
+          <el-form-item label="容器类型" prop="type">
-          <div class="text-gray-500 text-sm flex items-center">
+            <!-- <el-input v-model="form.type" style="width: 44%" /> -->
-            <div>
+            <el-select v-model="form.type" placeholder="请选择分拣类型" style="width: 400px">
-              <span style="color: #999999">报价：</span>
+              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
-              <span class="ml-2 text-green-500 font-bold">￥{{ route.price }}/m</span>
+            </el-select>
+          </el-form-item>
+          <!-- 开始日期 -->
+          <el-form-item label="开始日期" prop="date">
+            <el-date-picker v-model="form.startDate" type="date" placeholder="选择日期" style="width: 400px" />
+          </el-form-item>
+          <!-- 截至日期 -->
+          <el-form-item label="截至日期" prop="date">
+            <el-date-picker v-model="form.endDate" type="date" placeholder="选择日期" style="width: 400px" />
+          </el-form-item>
+          <el-form-item label="包装要求" prop="desc">
+            <el-input v-model="form.desc" type="textarea" style="width: 400px" />
+          </el-form-item>
+        </el-form>
+        <div style="text-align: left; font-size: 22px; margin-bottom: 10px">
+          <span>合计：</span>
+          <span style="color: rgb(37, 191, 130)">...</span>
+          <span style="font-size: 16px; color: rgb(37, 191, 130)">元</span>
         </div>
         <div>
-              <el-button size="large" type="primary" @click="goDei"
+          <el-button type="primary" style="width: 150px" @click="onSubmit">提交</el-button>
-                ><el-icon class="el-icon--right"><ChatLineRound /></el-icon>
+          <el-button style="width: 150px">取消</el-button>
-                留下信息
-              </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>
@@ -52,41 +87,123 @@
 <script setup>
 import Common from './components/common.vue';
 import { getAssetsFile } from '@/utils';
-import { ref, reactive, watch } from 'vue';
+import { ref, reactive, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { getRegion } from '@/apis/common';
 const route = useRoute();
 const router = useRouter();
 const dialogVisible = ref(false);
 const formRef = ref(null);
 
+const unifiedWidth = '400px';
+const formSize = 'large';
 const form = reactive({
-  quantity: '',
-  title: '',
-  phone: '',
   name: '',
+  phone: '',
+  address1: '',
+  address2: '',
+  selectedAddress: [], //选中的区域编码数组
+  areaAddress: '', //区域地址
+  detailAddress: '', //详细地址
+  goods: '',
+  num: '',
+  type: '',
+  startDate: '',
+  endDate: '',
+  desc: '',
 });
+const rules = reactive({
+  name: [{ required: true, message: '请输入您的称呼', trigger: 'blur' }],
+  phone: [{ required: true, message: '请输入您的电话', trigger: 'blur' }],
+  address1: [{ required: true, message: '请选择地址', trigger: 'change' }],
+  address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
+  goods: [{ required: true, message: '请输入分拣物品', trigger: 'blur' }],
+  num: [{ required: true, message: '请输入分拣数量', trigger: 'blur' }],
+  type: [{ required: true, message: '请输入分拣类型', trigger: 'blur' }],
+  date: [{ required: true, message: '请选择截至日期', trigger: 'blur' }],
+  desc: [{ required: true, message: '请输入分拣要求', trigger: 'blur' }],
+});
+const options = [
+  {
+    value: '1',
+    label: '西红柿',
+  },
+  {
+    value: '2',
+    label: '茄子',
+  },
+  {
+    value: '3',
+    label: '辣椒',
+  },
+];
+const options1 = [
+  {
+    value: '1',
+    label: '100',
+  },
+  {
+    value: '2',
+    label: '200',
+  },
+  {
+    value: '3',
+    label: '300',
+  },
+  {
+    value: '3',
+    label: '400',
+  },
+  {
+    value: '3',
+    label: '500',
+  },
+];
+const options2 = [
+  {
+    value: '1',
+    label: '人工分拣',
+  },
+  {
+    value: '2',
+    label: '自动化分拣',
+  },
+];
+
+// const addressOptions = [
+//   // 下拉框的选项数据
+//   { value: 'beijing', label: '北京市' },
+//   { value: 'shanghai', label: '上海市' },
+//   { value: 'guangzhou', label: '广州市' },
+//   // 可以继续添加更多选项
+// ];
+
+// 级联选择器配置
+const cascaderProps = ref({
+  label: 'areaName', // 选项标签字段名
+  value: 'areaCode', // 选项值字段名
+  children: 'areaChildVOS', // 子选项字段名
+  emitPath: true,
+  expandTrigger: 'hover',
+});
+// 省市区数据（示例）
+const addressOptions = ref([]);
+const getArea = async () => {
+  const res = await getRegion();
+  if (res.code === 200) {
+    addressOptions.value = res.data;
+  } else {
+    ElMessage.error(res.message);
+  }
+};
 
 const toBack = (level) => {
   router.go(level);
 };
-
+onMounted(() => {
-const diotext = ref('');
+  getArea();
-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>
@@ -97,136 +214,6 @@ $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;
@@ -247,83 +234,4 @@ $border-color: #dcdfe6; // 边框颜色
 .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>

sub-operation-service/src/views/packaging/index.vue

@@ -46,7 +46,7 @@
     <section>
       <common>
         <template #main>
-          <el-card shadow="none" style="border-radius: 14px">
+          <el-card shadow="none" style="border-radius: 14px; position: relative">
             <div class="tabs tabs0">
               <div class="tab cursor">
                 <div
@@ -91,18 +91,12 @@
                 </div>
               </div>
             </div>
-          </el-card>
+            <div style="position: absolute; right: 3%; top: 27%">
-          <el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
+              <el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
-            <el-col :span="24">
-              <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                <div class="storage-content">
-                  <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img4.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
-                  </div>
             </div>
           </el-card>
-            </el-col>
+          <el-row :gutter="20" style="margin-top: 10px">
-            <!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
+            <el-col v-for="(item, index) in state.data" :key="index" :span="24">
               <el-card class="storage-card" shadow="hover">
                 <div class="storage-content">
                   <div class="storage-content-top" @click="toLink(item)">
@@ -110,59 +104,20 @@
                     <div class="storage-info">
                       <h3 class="storage-title">{{ item.title }}</h3>
                       <div class="storage-desc">
-                        <span>{{ item.description }}</span>
+                        <span>{{ item.type }} | </span><span>{{ item.description }}</span>
-                        <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
-                        <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
                       </div>
-                      <div class="storage-tags">
+                      <p class="storage-location storage-location1">{{ item.introduce }}</p>
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
                     </div>
-                      <div class="storage-location">
-                        <el-icon><Location /></el-icon>
-                        {{ item.location }}
-                      </div>
-                    </div>
-                  </div>
-                  <div class="storage-price">
-                    <div class="storage-price-left">
-                      <span class="price-label">报价</span>
-                      <span class="price-amount">¥{{ item.price }}/kg</span>
-                    </div>
-                    <el-button type="success" class="contact-btn" @click="goDei(item)">
-                      <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
-                      <span>联系卖家</span>
-                    </el-button>
                   </div>
                   <div v-if="item.rank" class="rank-badge">
-                    <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
+                    <p style="text-align: right; font-size: 22px; color: #25bf82">￥{{ item.price }}/个</p>
-                  </div>
+                    <el-button style="padding: 5px 50px; margin-top: 50px" type="primary" @click="handleClick">购买</el-button>
-                </div>
-              </el-card>
-            </el-col> -->
-          </el-row>
-          <el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
-            <el-col :span="24">
-              <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                <div class="storage-content">
-                  <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img5.png" fit="cover" class="storage-image storage-image1" />
-                  </div>
-                </div>
-              </el-card>
-              <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                <div class="storage-content">
-                  <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img6.png" fit="cover" class="storage-image storage-image1" />
                   </div>
                 </div>
               </el-card>
             </el-col>
           </el-row>
-          <div style="position: fixed; left: 50%; bottom: 7%">
+
-            <el-button style="padding: 10px 50px" size="large" type="primary" @click="applicationPackaging">发布需求</el-button>
-          </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
       </common>
@@ -191,44 +146,76 @@ const state = reactive({
   },
   data: [
     {
-      title: '蔬菜分拣服务',
+      title: '5L堆码桶',
-      description: '绿鲜甄选蔬菜分拣中心 ',
+      description: '5L 7元/个',
-      location: '临沧市-耿马县',
+      introduce:
-      price: '150',
+        '5L堆码桶是一种专为液体包装设计的塑料容器，容量为5升，具备堆码功能，可节省存储和运输空间。其材质通常采用高密度聚乙烯（HDPE），具有耐酸碱、抗腐蚀、耐冲击、耐高低温等特性，符合食品级和化工级标准，广泛应用于化工、涂料、润滑油、食品、医药等行业。',
+      price: '7.00',
+      //地址
+      address: '临沧市耿马县孟定镇100号',
+      locationUrl: 'images/dz.png',
+      //联系人
+      contact: '刘冬冬',
+      type: '塑料容器',
+      //电话
+      phone: '15678459087',
+
       rank: '1',
-      imageUrl: 'images/vegetable.png',
+      imageUrl: 'images/11.jpg',
     },
     {
-      title: '水果分拣服务',
+      title: '二手吨桶,八九成新两百升蓝桶',
-      description: '果韵鲜享分拣站',
+      description: '100 380元/个',
-      location: '临沧市-耿马县',
+      introduce:
-      price: '150',
+        '材质与结构内容器：采用进口高密度聚乙烯（HDPE）或线性低密度聚乙烯（LLDPE），耐酸碱、抗腐蚀，符合食品级标准。外框架：镀锌钢管焊接网格，底盘为四向进叉型全钢托盘，结构稳固，可用铲车直接装卸。工艺：旋转滚塑一次成型，无缝焊接，壁厚≥5mm，强度高，使用寿命长。性能参数容量：标称1000L（实际灌装密度1.5时容积约1060L）。尺寸：外型尺寸约1200×1000×1160mm，净重60±1KG。压力测试：液压试验压力120kPa，渗漏试验压力22kPa，跌落试验高度2m。堆码能力：灌装密度≤1.5时可堆码2层，密度＞1.5时堆码1层，满载静态堆码高度可达4层。',
-      rank: '2',
+      price: '380.00',
-      imageUrl: 'images/fruit.png',
+      //地址
+      address: '临沧市耿马县孟定镇100号',
+      locationUrl: 'images/dz.png',
+      //联系人
+      contact: '李伟',
+      type: '塑料容器',
+      //电话
+      phone: '15678459087',
+
+      rank: '1',
+      imageUrl: 'images/22.jpg',
     },
     {
-      title: '水果分拣服务',
+      title: '快递水果纸箱,苹果橙子纸箱定做印刷纸箱',
-      description: '好果分拣站 ',
+      description: '4号箱 1.4元/件',
-      location: '临沧市-耿马县',
+      introduce:
-      price: '150',
+        '基础材质瓦楞纸板：主流采用三层或五层结构，由面纸、瓦楞芯纸和里纸复合而成。五层纸板（如“B楞+C楞”组合）抗压强度提升40%，适合长途运输或堆码存储。环保材料：部分厂家使用再生纸浆或FSC认证纸板，符合欧盟环保标准，可降解率达90%以上。结构优化加强设计：针对苹果、橙子等重果，箱体四角增加L型护角或内置十字隔板，抗压强度从500kg提升至800kg。防潮处理：外层涂布防水膜或使用PE淋膜纸板，防潮性能提升3倍，适应冷链运输环境。',
-      rank: '3',
+      price: '1.40',
-      imageUrl: 'images/fruit.png',
+      //地址
+      address: '临沧市耿马县孟定镇100号',
+      locationUrl: 'images/dz.png',
+      //联系人
+      contact: '张可然',
+      type: '纸箱',
+      //电话
+      phone: '15678459087',
+
+      rank: '1',
+      imageUrl: 'images/33.jpg',
     },
     {
-      title: '水果分拣服务',
+      title: '纸箱包装盒,物流箱包装箱',
-      description: '果美分拣站 ',
+      description: '通货 0.5元/个',
-      location: '临沧市-耿马县',
+      introduce:
-      price: '150',
+        '材质与结构基础材料：以瓦楞纸板为主，分为三层（单瓦楞）、五层（双瓦楞）和七层结构。三层瓦楞：面纸+瓦楞芯纸+里纸，成本低，适用于轻量商品（如日用品、电子产品配件）。五层瓦楞：增加一层芯纸和面纸，抗压强度提升50%-80%，常用于家电、家具等重物包装。七层瓦楞：超强承重设计，适用于工业设备、大型机械等极端承重需求。环保升级：部分采用再生纸浆或FSC认证材料，可降解率达90%以上，符合欧盟ROHS标准。',
-      rank: '',
+      price: '0.50',
-      imageUrl: 'images/fruit.png',
+      //地址
-    },
+      address: '临沧市耿马县孟定镇100号',
-    {
+      locationUrl: 'images/dz.png',
-      title: '水果分拣服务',
+      //联系人
-      description: '好果存分拣站 ',
+      contact: '张可然',
-      location: '临沧市-耿马县',
+      type: '纸箱',
-      price: '150',
+      //电话
-      rank: '',
+      phone: '15678459087',
-      imageUrl: 'images/fruit.png',
+
+      rank: '1',
+      imageUrl: 'images/44.jpg',
     },
   ],
 });
@@ -273,7 +260,7 @@ const toLink = (row) => {
   row.data = ['高品质', '杀菌灭毒', '绿色'];
   router.push({
     path: '/sub-operation-service/packaging/details1',
-    // query: row,
+    query: row,
   });
 };
 const applicationPackaging = () => {
@@ -474,9 +461,8 @@ $border-color: #dcdfe6; // 边框颜色
 .storage-desc,
 .storage-tags,
 .storage-location {
-  overflow: hidden;
   margin: 10px 0;
-  width: 100%;
+  width: 70%;
   text-align: left;
 }
 .storage-title {
@@ -487,7 +473,7 @@ $border-color: #dcdfe6; // 边框颜色
 }
 .storage-desc {
   font-size: 16px;
-  color: #999999;
+  color: #000000;
   @include ellipsis;
   i {
     display: inline-block;
@@ -507,6 +493,15 @@ $border-color: #dcdfe6; // 边框颜色
   font-weight: 400;
   color: #000000;
 }
+.storage-location1 {
+  color: #adadad;
+  //超出两行省略
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .storage-price {
   display: flex;
   justify-content: space-between;
@@ -537,9 +532,9 @@ $border-color: #dcdfe6; // 边框颜色
 }
 .rank-badge {
   position: absolute;
-  top: 0;
+  top: 30px;
   right: 20px;
-  width: 80px;
+  // width: 80px;
-  height: 80px;
+  // height: 80px;
 }
 </style>

sub-operation-service/src/views/packaging/sorting.vue

@@ -46,7 +46,7 @@
     <section>
       <common>
         <template #main>
-          <el-card shadow="none" style="border-radius: 14px">
+          <el-card shadow="none" style="border-radius: 14px; position: relative">
             <div class="tabs tabs0">
               <div class="tab cursor">
                 <div
@@ -72,7 +72,7 @@
                   :key="index"
                   class="tab_list_li"
                   :class="{ active: currentTab1 === index }"
-                  @click.stop="currentTab1 = index"
+                  @click.stop="switchTab(item, index)"
                 >
                   {{ item }}
                 </div>
@@ -91,42 +91,30 @@
                 </div>
               </div>
             </div>
+            <div style="position: absolute; right: 3%; top: 27%">
+              <el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
+            </div>
           </el-card>
           <el-row v-if="currentTab0 === 0" :gutter="20" style="margin-top: 10px">
-            <el-col :span="12">
+            <el-col v-for="(item, index) in state.data0" :key="index" :span="12">
-              <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                <div class="storage-content">
-                  <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img1.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
-                  </div>
-                </div>
-              </el-card>
-            </el-col>
-            <el-col :span="12">
-              <el-card class="storage-card" shadow="hover" body-style="padding: 0">
-                <div class="storage-content">
-                  <div class="storage-content-top">
-                    <img src="@/assets/images/warehouseLogistics/img2.png" fit="cover" class="storage-image storage-image1" @click="toLink" />
-                  </div>
-                </div>
-              </el-card>
-            </el-col>
-            <!-- <el-col v-for="(item, index) in state.data" :key="index" :span="12">
               <el-card class="storage-card" shadow="hover">
                 <div class="storage-content">
                   <div class="storage-content-top" @click="toLink(item)">
                     <img :src="getAssetsFile(`${item.imageUrl}`)" fit="cover" class="storage-image" />
                     <div class="storage-info">
-                      <h3 class="storage-title">{{ item.title }}</h3>
+                      <h2 class="storage-title">
+                        <span class="span">{{ item.title }}</span>
+                        <span><img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" /></span>
+                      </h2>
                       <div class="storage-desc">
                         <span>{{ item.description }}</span>
-                        <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
+                        <!-- <img :src="getAssetsFile('images/warehouseLogistics/认证.png')" alt="" style="width: 20px" />
-                        <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" />
+                        <img :src="getAssetsFile('images/warehouseLogistics/优先级.png')" alt="" style="width: 20px" /> -->
                       </div>
                       <div class="storage-tags">
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">高品质</el-tag>
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">{{ item.type }}</el-tag>
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">杀菌灭毒</el-tag>
+                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">{{ item.monitor }}</el-tag>
-                        <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag>
+                        <!-- <el-tag effect="plain" round style="background-color: rgba(37, 191, 130, 0.2); color: #25bf82">绿色</el-tag> -->
                       </div>
                       <div class="storage-location">
                         <el-icon><Location /></el-icon>
@@ -136,20 +124,20 @@
                   </div>
                   <div class="storage-price">
                     <div class="storage-price-left">
-                      <span class="price-label">报价</span>
+                      <!-- <span class="price-label">报价</span> -->
                       <span class="price-amount">¥{{ item.price }}/kg</span>
                     </div>
                     <el-button type="success" class="contact-btn" @click="goDei(item)">
-                      <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" />
+                      <!-- <img :src="getAssetsFile('images/warehouseLogistics/messageBox.png')" alt="" style="height: 30px; margin-right: 5px" /> -->
-                      <span>联系卖家</span>
+                      <span>预约</span>
                     </el-button>
                   </div>
-                  <div v-if="item.rank" class="rank-badge">
+                  <!-- <div v-if="item.rank" class="rank-badge">
                     <img :src="getAssetsFile('images/warehouseLogistics/top' + item.rank + '.png')" alt="" style="width: 80px" />
-                  </div>
+                  </div> -->
                 </div>
               </el-card>
-            </el-col> -->
+            </el-col>
           </el-row>
           <el-row v-if="currentTab0 === 1" :gutter="20" style="margin-top: 10px">
             <el-col :span="24">
@@ -162,9 +150,7 @@
               </el-card>
             </el-col>
           </el-row>
-          <div style="position: fixed; left: 50%; bottom: 7%">
+
-            <el-button style="padding: 10px 50px" size="large" type="primary" @click="handleApply">发布需求</el-button>
-          </div>
           <page-pagination :total="5" @current-change="currentChange" />
         </template>
       </common>
@@ -172,7 +158,7 @@
   </div>
 </template>
 <script setup name="page-menu">
-import { ref, reactive, watch } from 'vue';
+import { onMounted, ref, reactive, watch } from 'vue';
 import { getAssetsFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
@@ -191,46 +177,81 @@ const state = reactive({
   query: {
     current: 1,
   },
+  data0: [],
   data: [
     {
-      title: '蔬菜分拣服务',
+      title: '云南绿源生态农业有限公司',
-      description: '绿鲜甄选蔬菜分拣中心 ',
+      description: '根茎类 ',
-      location: '临沧市-耿马县',
+      location: '临沧市·耿马县',
-      price: '150',
+      locationUrl: 'images/dz.png',
+      //分拣
+      type: '自动化分拣',
+      //监控方式
+      monitor: '全程实时监控',
+      price: '3.00~5.00',
       rank: '1',
-      imageUrl: 'images/vegetable.png',
+      imageUrl: 'images/1.png',
+      //联系人
+      contact: '李志强',
+      phone: '13988324687',
+      //介绍
+      introduce:
+        '云南绿源生态农业有限公司专注耿马高原根茎类作物，拥有5000㎡无尘车间，自动滚轴分选线可精准区分大小、糖度；全程冷链+云端监控，客户手机即可查看货位温湿度；3-5元/kg为当季地头价，量大可议价，支持京东冷链直发、边贸自提。',
     },
     {
-      title: '水果分拣服务',
+      title: '云南丰瑞农业发展有限公司',
-      description: '果韵鲜享分拣站',
+      description: '豆类 ',
-      location: '临沧市-耿马县',
+      location: '临沧市·耿马县',
-      price: '150',
+      locationUrl: 'images/dz.png',
-      rank: '2',
+      //分拣
-      imageUrl: 'images/fruit.png',
+      type: '人工分拣',
+      //监控方式
+      monitor: '全程实时监控',
+      price: '2.50~4.00',
+      rank: '1',
+      imageUrl: 'images/2.png',
+      //联系人
+      contact: '张 莉',
+      phone: '13888013256',
+      //介绍
+      introduce:
+        '云南丰瑞农业发展主打滇西蚕豆、芸豆，人工手选保证完整无破损，200㎡恒温库+24h摄像监控，价格2.5-4元/kg含简易真空小袋；可提供出口级质检报告，孟定口岸当天装车，适合电商小包及边贸批量。',
     },
     {
-      title: '水果分拣服务',
+      title: '云南田园牧歌农业科技有限公司',
-      description: '好果分拣站 ',
+      description: '菌菇类 ',
-      location: '临沧市-耿马县',
+      location: '临沧市·耿马县',
-      price: '150',
+      locationUrl: 'images/dz.png',
-      rank: '3',
+      //分拣
-      imageUrl: 'images/fruit.png',
+      type: '自动化分拣',
+      //监控方式
+      monitor: '全程实时监控',
+      price: '4.00~6.00',
+      rank: '1',
+      imageUrl: 'images/3.png',
+      contact: '王 磊',
+      phone: '15987925518',
+      //介绍
+      introduce:
+        '云南田园牧歌农业科技依托耿马原始松林，年产野生菌鲜货800吨；自动光学分拣机剔除虫蛀、畸形，4-6元/kg为产地批发价，全程-2℃冷藏车直达昆明机场；支持顺丰冷运、泡沫箱+冰袋包装，24小时温湿度云端可查。',
     },
     {
-      title: '水果分拣服务',
+      title: '云南金土地农业有限公司',
-      description: '果美分拣站 ',
+      description: '坚果类 ',
-      location: '临沧市-耿马县',
+      location: '临沧市·耿马县',
-      price: '150',
+      locationUrl: 'images/dz.png',
-      rank: '',
+      //分拣
-      imageUrl: 'images/fruit.png',
+      type: '人工分拣',
-    },
+      //监控方式
-    {
+      monitor: '全程实时监控',
-      title: '水果分拣服务',
+      price: '5.00~7.00',
-      description: '好果存分拣站 ',
+      rank: '1',
-      location: '临沧市-耿马县',
+      imageUrl: 'images/4.png',
-      price: '150',
+      contact: '陈 刚',
-      rank: '',
+      phone: '13759347102',
-      imageUrl: 'images/fruit.png',
+      //介绍
+      introduce:
+        '云南金土地农业专注澳洲坚果、薄壳核桃，人工色选+比重筛选，碎仁率＜2%；500㎡充氮保鲜库全程可视监控，5-7元/kg含麻袋或礼盒包装；提供有机认证，可代发全国，边贸客户可孟定口岸自提，散称或整柜均可。',
     },
   ],
 });
@@ -252,10 +273,24 @@ const form = reactive({
 const diotext = ref('');
 const diodescription = ref('');
 
+//切换
+const switchTab = (item, index) => {
+  console.log(item);
+  if (item === '全部') {
+    state.data0 = state.data;
+  } else if (item === '人工分拣') {
+    state.data0 = state.data.filter((item) => item.type === '人工分拣');
+  } else {
+    state.data0 = state.data.filter((item) => item.type === '自动化分拣');
+  }
+
+  currentTab1.value = index;
+};
+
 const goDei = (data) => {
-  diodescription.value = data.description;
+  // diodescription.value = data.description;
-  diotext.value = data.title;
+  // diotext.value = data.title;
-  dialogVisible.value = true;
+  // dialogVisible.value = true;
 };
 
 const handleSubmit = () => {
@@ -283,6 +318,10 @@ const handleApply = () => {
     path: '/sub-operation-service/packaging/apply',
   });
 };
+onMounted(() => {
+  console.log('state.data', state.data);
+  state.data0 = state.data;
+});
 </script>
 <style lang="scss" scoped>
 // 基础颜色配置
@@ -443,7 +482,7 @@ $border-color: #dcdfe6; // 边框颜色
   border-radius: 16px;
 }
 .storage-content {
-  @include flex-column;
+  // @include flex-column;
 
   gap: 16px;
   &-top {
@@ -468,7 +507,7 @@ $border-color: #dcdfe6; // 边框颜色
   cursor: pointer;
 }
 .storage-info {
-  padding-right: 50px;
+  // padding-right: 50px;
   flex: 1;
   cursor: pointer;
 }
@@ -480,12 +519,21 @@ $border-color: #dcdfe6; // 边框颜色
   margin: 10px 0;
   width: 100%;
   text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 .storage-title {
-  font-size: 20px;
+  margin-top: 0 !important;
   font-weight: 700;
   color: #000000;
   @include ellipsis;
+  .span {
+    width: 250px;
+    //超出宽度显示省略号
+    @include ellipsis;
+    margin-right: 10px;
+  }
 }
 .storage-desc {
   font-size: 16px;