465 lines
17 KiB
Vue
465 lines
17 KiB
Vue
<template>
|
|
<div class="source-code-detail-warp">
|
|
<common current-name="agricultural">
|
|
<template #main>
|
|
<div class="source-code-detail-info">
|
|
<div class="top-warp-b">
|
|
<div class="top-title">
|
|
<div class="father-title" @click="toBack(-2)">农资交易</div>
|
|
<div class="father-title father-after" @click="toBack(-1)">查看详情</div>
|
|
<div class="current-title">溯源详情</div>
|
|
</div>
|
|
<div class="top-img-txt">
|
|
<el-image :src="getAssetsFile('images/ecommerce/' + 'tracetxt.png')?.href ?? ''" fit="cover" />
|
|
</div>
|
|
<div class="top-bottom-warp">
|
|
<div v-for="(b, indexb) in bottomList" :key="indexb" class="top-bottom-item">
|
|
<div class="bottom-item-img">
|
|
<el-image :src="getAssetsFile('images/ecommerce/' + b.img)?.href ?? ''" fit="cover" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-image :src="getAssetsFile('images/ecommerce/' + 'traceb.png')?.href ?? ''" fit="cover" />
|
|
</div>
|
|
<div class="tab-content-warp">
|
|
<el-tabs v-model="activeCurrent" class="demo-tabs">
|
|
<el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name">
|
|
<div v-if="activeCurrent == 'baseInfo'" class="baseInfo-content">
|
|
<el-row :gutter="16">
|
|
<el-col :span="6">
|
|
<banner name="codeinfo" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">产品名称：</span>
|
|
<span class="val">有机沙瓤西红柿</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">追溯次数：</span>
|
|
<span class="val">30次</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">生产经营主体：</span>
|
|
<span class="val">北大荒农业技术有限公司</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">原产地：</span>
|
|
<span class="val">云南省耿马县孟定镇下坝村</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">储存仓库：</span>
|
|
<span class="val">耿马县农产品1号仓库</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">种植土地：</span>
|
|
<span class="val">XBC00001</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">采收日期：</span>
|
|
<span class="val">2025年1月1日</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">溯源码：</span>
|
|
<span class="val">SY100000202501010001</span>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div v-if="activeCurrent == 'report'" class="report-content">
|
|
<el-row :gutter="16">
|
|
<el-col :span="6">
|
|
<banner name="report" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">农药残留检测：</span>
|
|
<span class="val text-main">合格</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">重金属污染检测：</span>
|
|
<span class="val text-main">合格</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">微生物检测：</span>
|
|
<span class="val text-main">合格</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">添加剂与防腐剂：</span>
|
|
<span class="val text-error">不合格</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">转基因成分检测：</span>
|
|
<span class="val text-main">合格</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">有机认证：</span>
|
|
<span class="val text-main">合格</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">国家标准：</span>
|
|
<span class="val text-main">GB-2762</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">行业标准：</span>
|
|
<span class="val text-main">NY-3548</span>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div v-if="activeCurrent == 'business'" class="business-content">
|
|
<el-row :gutter="16">
|
|
<el-col :span="6">
|
|
<banner name="business" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
|
|
</el-col>
|
|
<el-col :span="18">
|
|
<el-row :gutter="16">
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">经营主体：</span>
|
|
<span class="val">北大荒农业技术有限公司</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">证书编号：</span>
|
|
<span class="val">JY23101010004682</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">经营范围：</span>
|
|
<span class="val">全品类农产品经营</span>
|
|
</el-col>
|
|
<el-col :span="12" class="des-item">
|
|
<span class="label">法人：</span>
|
|
<span class="val">张三</span>
|
|
</el-col>
|
|
<el-col :span="24" class="des-item">
|
|
<span class="label">公司地址：</span>
|
|
<span class="val">云南省昆明市呈贡区银河科技园K栋4楼</span>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div v-if="activeCurrent == 'farming'" class="farming-content">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-table :data="tableData" style="width: 100%" height="280" @row-click="rowClick">
|
|
<el-table-column prop="id" label="编号" />
|
|
<el-table-column prop="title" label="活动名称" />
|
|
<el-table-column prop="inputs" label="投入品" />
|
|
<el-table-column prop="operator" label="作业人" />
|
|
<el-table-column prop="time" label="日期" width="180px" />
|
|
</el-table>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div v-if="activeCurrent == 'link'" class="link-content">
|
|
<div class="link-content-pos">
|
|
<div class="report">
|
|
<!-- <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="none" /> -->
|
|
<costomImg
|
|
:url="'images/ecommerce/' + 'pic.png'"
|
|
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
|
|
:is-view="true"
|
|
></costomImg>
|
|
<span class="img-tips">溯源证书</span>
|
|
</div>
|
|
<div class="qr-code">
|
|
<!-- <el-image :src="qrImg" fit="cover" /> -->
|
|
<costomImg :url="qrImg" :preview-list="[qrImg]" :is-view="true" :is-montage="false" :fit="'cover'"></costomImg>
|
|
<span class="img-tips">溯源码</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</common>
|
|
</div>
|
|
</template>
|
|
<script setup name="ecommerce">
|
|
import common from './components/common.vue';
|
|
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import banner from './components/banner.vue';
|
|
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import costomImg from '@/components/costomImg.vue';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
let bottomList = reactive([
|
|
{ title: '基本信息', img: 'trace01.png', name: 'baseInfo' },
|
|
{ title: '检测报告', img: 'trace02.png', name: 'report' },
|
|
{ title: '经营主体', img: 'trace03.png', name: 'business' },
|
|
{ title: '农事服务', img: 'trace05.png', name: 'farming' },
|
|
{ title: '上链信息', img: 'trace06.png', name: 'link' },
|
|
]);
|
|
|
|
let activeCurrent = ref('baseInfo');
|
|
|
|
let bannerList = reactive(['images/ecommerce/' + 'pic.png', 'images/ecommerce/' + 'pic.png']);
|
|
|
|
let tableData = reactive([
|
|
{ id: 'NS10000111', title: '施肥', inputs: '氮肥', operator: '张三', time: '2025-04-02 12:25:36' },
|
|
{ id: 'NS10000112', title: '灌溉', inputs: '矿物质', operator: '李四', time: '2025-04-01 12:25:36' },
|
|
{ id: 'NS10000113', title: '喷洒农药', inputs: '杀虫剂', operator: '王五', time: '2025-04-02 13:25:36' },
|
|
{ id: 'NS10000114', title: '施肥', inputs: '有机肥', operator: '张三', time: '2025-04-02 12:25:36' },
|
|
{ id: 'NS10000115', title: '灌溉', inputs: '白糖水', operator: '李四', time: '2025-03-31 12:25:36' },
|
|
{ id: 'NS10000116', title: '喷洒农药', inputs: '除草剂', operator: '王五', time: '2025-04-02 12:25:36' },
|
|
{ id: 'NS10000117', title: '施肥', inputs: '钾肥', operator: '张三', time: '2025-04-02 12:25:36' },
|
|
{ id: 'NS10000118', title: '灌溉', inputs: '尿素水', operator: '李四', time: '2025-04-02 12:25:36' },
|
|
]);
|
|
|
|
const toBack = (level) => {
|
|
router.go(level);
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.source-code-detail-warp {
|
|
.source-code-detail-info {
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
background: $color-fff;
|
|
.top-warp-b {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 488px;
|
|
}
|
|
.top-img-txt {
|
|
position: absolute;
|
|
bottom: 42%;
|
|
left: 50%;
|
|
z-index: 1;
|
|
transform: translateX(-50%);
|
|
}
|
|
.top-bottom-warp {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
left: 0;
|
|
z-index: 1;
|
|
display: inline-flex;
|
|
justify-content: flex-start;
|
|
padding: 0 32px;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
gap: 32px;
|
|
.top-bottom-item {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: calc(100% / 5 - 28px);
|
|
height: 80px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, #ffbe4d, #ffffff);
|
|
.bottom-item-img {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
.top-title {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
padding: 16px;
|
|
width: 100%;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
.father-title,
|
|
.current-title {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
.father-title {
|
|
font-size: 18px;
|
|
color: $color-fff;
|
|
}
|
|
.father-after {
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
.father-after::after {
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 4px;
|
|
content: '.';
|
|
transform: translateY(-50%);
|
|
}
|
|
.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%);
|
|
}
|
|
}
|
|
.tab-content-warp {
|
|
padding: 0 32px 32px;
|
|
width: 100%;
|
|
.text-main {
|
|
color: $color-main !important;
|
|
}
|
|
.text-error {
|
|
color: $color-danger !important;
|
|
}
|
|
.des-item {
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
margin: 3px 0;
|
|
width: 100%;
|
|
.label,
|
|
.val {
|
|
vertical-align: top;
|
|
font-size: 18px;
|
|
}
|
|
.label {
|
|
width: 150px;
|
|
text-align: left;
|
|
color: $color-999;
|
|
}
|
|
.val {
|
|
width: calc(100% - 150px);
|
|
text-align: right;
|
|
color: $color-333;
|
|
}
|
|
}
|
|
.farming-content {
|
|
::v-deep() {
|
|
thead {
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
}
|
|
thead th {
|
|
padding: 10px 0;
|
|
font-size: 16px !important;
|
|
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 {
|
|
font-size: 16px !important;
|
|
border: none !important;
|
|
}
|
|
.el-table__inner-wrapper::before {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
.link-content {
|
|
width: 100%;
|
|
text-align: center;
|
|
.link-content-pos {
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
margin: 64px auto;
|
|
gap: 120px;
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.img-tips {
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 32px;
|
|
}
|
|
.report,
|
|
.qr-code {
|
|
display: inline-block;
|
|
}
|
|
.report {
|
|
width: 120px;
|
|
height: 160px;
|
|
}
|
|
.qr-code {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep() {
|
|
.el-tabs__nav {
|
|
width: 100% !important;
|
|
}
|
|
.el-tabs__nav-wrap::after {
|
|
background: transparent !important;
|
|
}
|
|
.el-tabs__item {
|
|
padding: 0 !important;
|
|
width: 20% !important;
|
|
font-size: 20px !important;
|
|
}
|
|
.el-tabs__active-bar {
|
|
left: 7% !important;
|
|
width: 40px !important;
|
|
height: 5px !important;
|
|
border-radius: 4px;
|
|
}
|
|
.el-descriptions__label,
|
|
.el-descriptions__content {
|
|
font-size: 16px !important;
|
|
}
|
|
.cell-item {
|
|
display: inline-flex;
|
|
}
|
|
.el-descriptions__label {
|
|
color: $color-999;
|
|
}
|
|
.el-descriptions__content {
|
|
color: $color-333;
|
|
}
|
|
}
|
|
::v-deep() {
|
|
.ecommerce-banner {
|
|
position: relative;
|
|
padding: 0 48px !important;
|
|
}
|
|
.el-carousel {
|
|
position: unset !important;
|
|
}
|
|
.el-carousel__arrow--left {
|
|
left: 0 !important;
|
|
}
|
|
.el-carousel__arrow--right {
|
|
right: 0 !important;
|
|
}
|
|
.el-carousel__container {
|
|
height: 160px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|