xiabin

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

@@ -1,4 +1,46 @@
 <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">{{ diodescription }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">选择服务：</span>
+        <span class="value">{{ diotext }}</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>
   <!--  <page-layout :menus="state.menus"> </page-layout>-->
   <section>
     <common>
@@ -72,7 +114,7 @@
                     <span class="price-label">报价</span>
                     <span class="price-amount">¥{{ item.price }}/m</span>
                   </div>
-                  <el-button type="success" class="contact-btn">
+                  <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>
@@ -147,19 +189,145 @@ const state = reactive({
 const currentTab1 = ref(0);
 const currentTab2 = ref(0);
 const currentTab3 = ref(0);
+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;
+    }
+  });
+};
 
 const currentChange = (current) => {
   state.query.current = current;
 };
 
 const toLink = (row) => {
-  router.push({
+  // router.push({
-    path: '/sub-operation-service/warehouse-detail',
+  //   path: '/sub-operation-service/warehouse-detail',
-    query: { id: row?.id ?? '100' },
+  //   query: { id: row?.id ?? '100' },
-  });
+  // });
 };
 </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%);
+    }
+  }
+}
 .tabs {
   height: 160px;
   line-height: 50px;

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

@@ -1,4 +1,46 @@
 <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">{{ diodescription }}</span>
+      </div>
+      <div class="info-item">
+        <span class="label">选择服务：</span>
+        <span class="value">{{ diotext }}</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>
   <!--  <page-layout :menus="state.menus"> </page-layout>-->
   <section>
     <common>
@@ -72,7 +114,7 @@
                     <span class="price-label">报价</span>
                     <span class="price-amount">¥{{ item.price }}/kg</span>
                   </div>
-                  <el-button type="success" class="contact-btn">
+                  <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>
@@ -155,19 +197,145 @@ const state = reactive({
 const currentTab1 = ref(0);
 const currentTab2 = ref(0);
 const currentTab3 = ref(0);
+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;
+    }
+  });
+};
 
 const currentChange = (current) => {
   state.query.current = current;
 };
 
 const toLink = (row) => {
-  router.push({
+  // router.push({
-    path: '/sub-operation-service/warehouse-detail',
+  //   path: '/sub-operation-service/warehouse-detail',
-    query: { id: row?.id ?? '100' },
+  //   query: { id: row?.id ?? '100' },
-  });
+  // });
 };
 </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%);
+    }
+  }
+}
 .tabs {
   height: 160px;
   line-height: 50px;