478 lines
14 KiB
Vue
478 lines
14 KiB
Vue
<template>
|
||
<div class="purchaser-detail-warp">
|
||
<common current-name="purchaser">
|
||
<template #main>
|
||
<div class="purchaser-detail-top">
|
||
<div class="top-title">
|
||
<div class="father-title">采购商服务</div>
|
||
<div class="current-title">采购详情</div>
|
||
</div>
|
||
<div class="purchaser-info">
|
||
<el-row :gutter="16">
|
||
<el-col :span="16">
|
||
<div class="purchaser-info-l">
|
||
<div class="img">
|
||
<el-image :src="getAssetsFile('images/ecommerce/' + 'test01.png')?.href ?? ''" fit="cover" />
|
||
</div>
|
||
<div class="content">
|
||
<div class="title-warp">
|
||
<div class="txt txt-ellipsis clamp2">耿马县勐简乡飘云生态农业耿马县勐简乡飘云生态农业</div>
|
||
<div class="icon-warp">
|
||
<div class="iconfont icon-level"></div>
|
||
<div class="iconfont icon-auth"></div>
|
||
</div>
|
||
</div>
|
||
<div class="is-auth">
|
||
<span>已实名认证</span>
|
||
</div>
|
||
<div class="settled-time">
|
||
<span>入驻时间：37天</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="purchaser-info-r">
|
||
<div class="addr">
|
||
{{ '南省临沧市耿马傣族佤族自治县耿马县勐简乡' }}
|
||
<div class="iconfont icon-location"></div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="56" class="purchase-info-total">
|
||
<el-col :span="12">
|
||
<div class="info-total-item">
|
||
<div class="label">采购品种：</div>
|
||
<div class="val">西红柿</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="info-total-item">
|
||
<div class="label">采购数量：</div>
|
||
<div class="val">5000kg</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="info-total-item">
|
||
<div class="label">期望货源地：</div>
|
||
<div class="val">耿马县·贺派乡</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="info-total-item">
|
||
<div class="label">浏览次数：</div>
|
||
<div class="val">188次</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="info-total-item">
|
||
<div class="label">期望货源地：</div>
|
||
<div class="val">耿马县·贺派乡</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="info-total-item">
|
||
<div class="label">更新时间：</div>
|
||
<div class="val">2025.01.01 12:15:18</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row class="contant-wrap">
|
||
<el-col :span="24">
|
||
<div class="contant-btn">
|
||
<div class="iconfont icon-bg-chat"></div>
|
||
<span>在线联系</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="hot-list-warp">
|
||
<div class="block-title">热门采购</div>
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-table :data="tableData" style="width: 100%" height="320">
|
||
<el-table-column prop="title" label="采购品种" />
|
||
<el-table-column prop="region" label="收货地" />
|
||
<el-table-column prop="buyer" label="采购方" />
|
||
<el-table-column prop="buyNum" label="采购量(kg)" />
|
||
<el-table-column prop="buyer" label="采购时间" />
|
||
<el-table-column fixed="right" label="操作">
|
||
<template #default>
|
||
<el-button link type="primary" size="small" @click.stop="handleClick"> 去报价 </el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
|
||
<purchaserPopup ref="popupQuote" :list="treeList"></purchaserPopup>
|
||
</div>
|
||
</template>
|
||
<script setup name="ecommerce">
|
||
import common from './components/common.vue';
|
||
import purchaserPopup from './components/purchaserPopup.vue';
|
||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||
import { isEmpty, getAssetsFile } from '@/utils';
|
||
|
||
let popupQuote = ref(null);
|
||
let treeList = reactive([
|
||
{
|
||
id: '01',
|
||
title: '农产品',
|
||
children: [
|
||
{
|
||
pId: '01',
|
||
id: '0101',
|
||
title: '植物性农产品',
|
||
children: [
|
||
{ pId: '0101', id: '010101', title: '谷物' },
|
||
{ pId: '0101', id: '010102', title: '蔬菜' },
|
||
{ pId: '0101', id: '010103', title: '水果' },
|
||
{ pId: '0101', id: '010104', title: '坚果与油料作物' },
|
||
{ pId: '0101', id: '010105', title: '糖料作物' },
|
||
{ pId: '0101', id: '010106', title: '纤维作物' },
|
||
{ pId: '0101', id: '010107', title: '茶叶' },
|
||
{ pId: '0101', id: '010108', title: '咖啡' },
|
||
{ pId: '0101', id: '010109', title: '香料' },
|
||
],
|
||
},
|
||
{
|
||
pId: '01',
|
||
id: '0102',
|
||
title: '动物性农产品',
|
||
children: [
|
||
{ pId: '0102', id: '010201', title: '肉类' },
|
||
{ pId: '0102', id: '010202', title: '奶制品' },
|
||
{ pId: '0102', id: '010203', title: '蛋类' },
|
||
{ pId: '0102', id: '010204', title: '蜂蜜' },
|
||
{ pId: '0102', id: '010205', title: '水产品' },
|
||
],
|
||
},
|
||
{
|
||
pId: '01',
|
||
id: '0103',
|
||
title: '特殊农产品',
|
||
children: [
|
||
{ pId: '0103', id: '010301', title: '花卉与苗木' },
|
||
{ pId: '0103', id: '010302', title: '药材' },
|
||
{ pId: '0103', id: '010303', title: '菌类' },
|
||
],
|
||
},
|
||
{
|
||
pId: '01',
|
||
id: '0104',
|
||
title: '其他',
|
||
children: [{ pId: '0104', id: '010401', title: '饲料' }],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: '02',
|
||
title: '种子种苗',
|
||
children: [
|
||
{
|
||
pId: '02',
|
||
id: '0101',
|
||
title: '花卉种子种苗',
|
||
children: [
|
||
{ pId: '0101', id: '010101', title: '草本花卉' },
|
||
{ pId: '0101', id: '010102', title: '木本花卉' },
|
||
{ pId: '0101', id: '010103', title: '野生花卉' },
|
||
],
|
||
},
|
||
{
|
||
pId: '02',
|
||
id: '0102',
|
||
title: '蔬菜种子种苗',
|
||
children: [
|
||
{ pId: '0102', id: '010201', title: '叶菜类' },
|
||
{ pId: '0102', id: '010202', title: '根茎类' },
|
||
{ pId: '0102', id: '010203', title: '果实类' },
|
||
{ pId: '0102', id: '010204', title: '豆类' },
|
||
{ pId: '0102', id: '010205', title: '瓜类' },
|
||
],
|
||
},
|
||
{
|
||
pId: '02',
|
||
id: '0103',
|
||
title: '果树种苗',
|
||
children: [
|
||
{ pId: '0103', id: '010301', title: '柑橘类' },
|
||
{ pId: '0103', id: '010302', title: '仁果类' },
|
||
{ pId: '0103', id: '010303', title: '核果类' },
|
||
{ pId: '0103', id: '010304', title: '浆果类' },
|
||
],
|
||
},
|
||
{
|
||
pId: '02',
|
||
id: '0104',
|
||
title: '药材种子与种苗',
|
||
children: [
|
||
{ pId: '0104', id: '010401', title: '寒地龙药' },
|
||
{ pId: '0104', id: '010402', title: '常见中药材' },
|
||
],
|
||
},
|
||
{
|
||
pId: '02',
|
||
id: '0105',
|
||
title: '其他作物',
|
||
children: [
|
||
{ pId: '0105', id: '010501', title: '牧草' },
|
||
{ pId: '0105', id: '010502', title: '经济作物' },
|
||
{ pId: '0105', id: '010503', title: '观赏树木' },
|
||
],
|
||
},
|
||
],
|
||
},
|
||
]);
|
||
|
||
let tableData = reactive([
|
||
{ title: '西红柿', region: '耿马镇', buyer: '盛源农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||
{ title: '白菜', region: '孟定镇', buyer: '星悦农业', buyNum: 6000, time: '2025-04-01 12:25:36' },
|
||
{ title: '西蓝花', region: '孟勇镇', buyer: '盛源农业', buyNum: 7000, time: '2025-04-02 13:25:36' },
|
||
{ title: '鸡蛋', region: '勐简乡', buyer: '上好佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||
// { title: '牛肉', region: '四排山乡', buyer: '尚嘉农业', buyNum: 5000, time: '2025-03-31 12:25:36' },
|
||
// { title: '氮肥', region: '大兴乡', buyer: '信誉农资', buyNum: 6000, time: '2025-04-02 12:25:36' },
|
||
// { title: '白菜种子', region: '贺派乡', buyer: '佳佳农业', buyNum: 5000, time: '2025-04-02 12:25:36' },
|
||
// { title: '西红柿种子', region: '勐撒镇', buyer: '佳佳农业', buyNum: 8000, time: '2025-04-02 12:25:36' },
|
||
]);
|
||
|
||
const handleClick = () => {
|
||
popupQuote.value && popupQuote.value.doShow();
|
||
};
|
||
|
||
onMounted(() => {
|
||
console.info('onMounted');
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.purchaser-detail-warp {
|
||
width: 100%;
|
||
.block-title {
|
||
padding: 8px 0;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
text-align: left;
|
||
}
|
||
.purchaser-detail-top {
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
padding: 10px;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
background: $color-fff;
|
||
.top-title {
|
||
width: 100%;
|
||
text-align: left;
|
||
.father-title,
|
||
.current-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-weight: 700;
|
||
}
|
||
.father-title {
|
||
font-size: 18px;
|
||
}
|
||
.current-title {
|
||
position: relative;
|
||
margin-left: 8px;
|
||
padding: 0 8px;
|
||
font-size: 16px;
|
||
color: $color-main;
|
||
}
|
||
.current-title::before {
|
||
position: absolute;
|
||
top: 30%;
|
||
left: 0;
|
||
content: '.';
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.purchaser-info {
|
||
margin: 16px 0;
|
||
.purchaser-info-l {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
text-align: left;
|
||
.img,
|
||
.content {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
.img {
|
||
overflow: hidden;
|
||
width: 160px;
|
||
height: 160px;
|
||
border-radius: 8px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.content {
|
||
padding-left: 16px;
|
||
width: calc(100% - 160px);
|
||
.title-warp {
|
||
width: 100%;
|
||
.txt,
|
||
.icon-warp {
|
||
vertical-align: top;
|
||
}
|
||
.txt {
|
||
width: calc(100% - 80px);
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
}
|
||
.icon-warp {
|
||
display: inline-block;
|
||
width: 80px;
|
||
.iconfont {
|
||
display: inline-block;
|
||
margin-top: 6px;
|
||
&.icon-level {
|
||
font-size: 26px;
|
||
color: $color-main;
|
||
}
|
||
&.icon-auth {
|
||
font-size: 28px;
|
||
color: $color-warning;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.is-auth {
|
||
margin: 16px 0;
|
||
width: 100%;
|
||
span {
|
||
display: inline-block;
|
||
padding: 0 16px;
|
||
height: 32px;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
border: 1px solid $color-main-border;
|
||
border-radius: 8px;
|
||
color: $color-main;
|
||
background: $color-main-table-header;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
.settled-time {
|
||
width: 100%;
|
||
span {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: $color-999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.purchaser-info-r {
|
||
.addr {
|
||
width: 100%;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
color: $color-666;
|
||
.iconfont {
|
||
display: inline-block;
|
||
font-size: 26px;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
.purchase-info-total {
|
||
.info-total-item {
|
||
display: inline-flex;
|
||
justify-content: space-between;
|
||
margin: 8px 0;
|
||
width: 100%;
|
||
.label,
|
||
.val {
|
||
display: -webkit-inline-box;
|
||
vertical-align: top;
|
||
}
|
||
.label {
|
||
max-width: 180px;
|
||
font-size: 18px;
|
||
color: $color-999;
|
||
}
|
||
.val {
|
||
max-width: calc(100% - 180px);
|
||
font-size: 20px;
|
||
text-align: right;
|
||
color: $color-666;
|
||
}
|
||
}
|
||
}
|
||
.contant-wrap {
|
||
margin-top: 16px;
|
||
width: 100%;
|
||
text-align: center;
|
||
.contant-btn {
|
||
display: inline-block;
|
||
padding: 0 16px;
|
||
height: 48px;
|
||
border-radius: 16px;
|
||
color: $color-fff;
|
||
background: $color-main;
|
||
line-height: 48px;
|
||
.iconfont,
|
||
span {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.iconfont {
|
||
font-size: 26px;
|
||
}
|
||
span {
|
||
padding-left: 8px;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.hot-list-warp {
|
||
margin: 16px 0;
|
||
padding: 16px;
|
||
border-radius: 16px;
|
||
background: $color-fff;
|
||
::v-deep() {
|
||
thead {
|
||
overflow: hidden;
|
||
border-radius: 16px;
|
||
}
|
||
thead th {
|
||
padding: 16px 0;
|
||
border: none !important;
|
||
color: $color-999 !important;
|
||
background: $color-main-table-header;
|
||
}
|
||
thead th:first-child {
|
||
border-top-left-radius: 16px;
|
||
border-bottom-left-radius: 16px;
|
||
}
|
||
thead th:last-child {
|
||
border-top-right-radius: 16px;
|
||
border-bottom-right-radius: 16px;
|
||
}
|
||
table {
|
||
margin-top: 16px !important;
|
||
}
|
||
tbody td {
|
||
border: none !important;
|
||
}
|
||
.el-table__inner-wrapper::before {
|
||
display: none !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|