Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
2090205686@qq.com
commit
d45242af68
@ -236,6 +236,12 @@ export const constantRoutes = [
|
||||
name: 'packagingMain',
|
||||
meta: { title: '包装首页' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
component: () => import('@/views/packaging/details.vue'),
|
||||
name: 'detailsMain',
|
||||
meta: { title: '详情页' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
359
sub-operation-service/src/views/packaging/details.vue
Normal file
359
sub-operation-service/src/views/packaging/details.vue
Normal file
@ -0,0 +1,359 @@
|
||||
<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">{{ route.data[2] == '绿色' ? '分拣' : '包装' }} · 查看详情</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>
|
||||
@ -222,10 +222,11 @@ const currentChange = (current) => {
|
||||
};
|
||||
|
||||
const toLink = (row) => {
|
||||
// router.push({
|
||||
// path: '/sub-operation-service/warehouse-detail',
|
||||
// query: { id: row?.id ?? '100' },
|
||||
// });
|
||||
row.data = ['高品质', '食品级', '塑料'];
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
query: row,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -230,10 +230,11 @@ const currentChange = (current) => {
|
||||
};
|
||||
|
||||
const toLink = (row) => {
|
||||
// router.push({
|
||||
// path: '/sub-operation-service/warehouse-detail',
|
||||
// query: { id: row?.id ?? '100' },
|
||||
// });
|
||||
row.data = ['高品质', '杀菌灭毒', '绿色'];
|
||||
router.push({
|
||||
path: '/sub-operation-service/packaging/details',
|
||||
query: row,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user