504 lines
16 KiB
Vue
504 lines
16 KiB
Vue
<template>
|
||
<div class="agricultural-detail-warp">
|
||
<common current-name="agricultural">
|
||
<template #main>
|
||
<div class="agricultural-detail-info">
|
||
<div class="top-title">
|
||
<div class="father-title" @click="toBack(-1)">农资交易</div>
|
||
<div class="current-title">查看详情</div>
|
||
</div>
|
||
|
||
<div class="top-info">
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px" :is-view="true"> </banner>
|
||
</el-col>
|
||
<el-col :span="12" class="top-info-txt">
|
||
<h1 class="title">耿马县勐简乡有机沙瓤西红柿</h1>
|
||
<div class="price-sold">
|
||
<span class="price">2000.0</span>
|
||
<span class="sold">999</span>
|
||
</div>
|
||
<div class="tips-list">
|
||
<el-row :gutter="16">
|
||
<el-col :span="24">发货地址：云南省昆明市呈贡区彩云南路100号地</el-col>
|
||
<el-col :span="24">保 障：破损包赔 · 七天无理由退货</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="spu-sku-list">
|
||
<div class="spu-title">规格：</div>
|
||
<div class="spu-sku-warp">
|
||
<div class="spu-sku-item act">1kg/份</div>
|
||
<div class="spu-sku-item normal">2.5kg/份</div>
|
||
<div class="spu-sku-item normal">5kg/份</div>
|
||
</div>
|
||
<div class="goods-num">
|
||
<div class="num-title">数量：</div>
|
||
<div class="num-warp">
|
||
<el-input-number v-model="saveInfo.num" :min="1" :max="10" />
|
||
<span class="is-have">有货</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-btn">
|
||
<div class="item-btn sign">
|
||
<span>立即购买</span>
|
||
</div>
|
||
<div class="item-btn reservation">
|
||
<span>加入购物车</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<signProcess></signProcess>
|
||
</div>
|
||
|
||
<div class="agricultural-detail-content">
|
||
<div class="detail-content">
|
||
<div class="tab-top">
|
||
<el-radio-group v-model="tabVal">
|
||
<el-radio-button v-for="(t, indext) in tabList" :key="t.name" :value="t.value">{{ t.label }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
<div class="tab-content">
|
||
<div v-if="tabVal == 'detail'" class="content-detail">
|
||
<el-descriptions class="detail-des" title=" " :column="2" size="Large" border>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">品牌</div>
|
||
</template>
|
||
<span>遇合堂</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">系列</div>
|
||
</template>
|
||
<span>农用百货</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">型号</div>
|
||
</template>
|
||
<span>禽畜药</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">产地</div>
|
||
</template>
|
||
<span>中国大陆</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">省份</div>
|
||
</template>
|
||
<span>云南省</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">城市</div>
|
||
</template>
|
||
<span>昆明市</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">储存条件</div>
|
||
</template>
|
||
<span>常温</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">包装方式</div>
|
||
</template>
|
||
<span>盒装</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">净含量</div>
|
||
</template>
|
||
<span>250ml、500ml、750ml、1000ml</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">使用方式</div>
|
||
</template>
|
||
<span>饲喂</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">厂名</div>
|
||
</template>
|
||
<span>遇合堂禽畜药品有限公司</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">厂址</div>
|
||
</template>
|
||
<span>云南省昆明市呈贡区彩云南路100号</span>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>
|
||
<div class="cell-item">保质期</div>
|
||
</template>
|
||
<span>7天</span>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-image :src="getAssetsFile('images/ecommerce/' + 'goods.png')?.href ?? ''" fit="cover" />
|
||
</div>
|
||
<div v-if="tabVal == 'sourceCode'" class="content-source-code">
|
||
<div class="code-warp">
|
||
<div class="code-img">
|
||
<el-image :src="qrImg" fit="cover" />
|
||
</div>
|
||
<div class="code-down">
|
||
<el-icon><Download /></el-icon>
|
||
<a>下载溯源码</a>
|
||
</div>
|
||
<div class="code-copy">
|
||
<div class="code-txt">
|
||
<span class="txt-ellipsis clamp1" style="width: 100%">10.5488754215478XE254.10405488754215478XE254201</span>
|
||
</div>
|
||
<div class="do-copy">
|
||
<el-button type="primary" @click="toCopy">复制</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="code-to-detail">
|
||
<el-button type="primary" @click="toCodeDetail">点击查看溯源详情</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="tabVal == 'evaluate'" class="content-evaluate">
|
||
<evaluate :good-id="goodId"></evaluate>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
</div>
|
||
</template>
|
||
<script setup name="ecommerce">
|
||
import common from './components/common.vue';
|
||
import banner from './components/banner.vue';
|
||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||
import { isEmpty, getAssetsFile } from '@/utils';
|
||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||
import evaluate from './components/evaluate.vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const goodId = route.params.id; // 获取参数
|
||
|
||
let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
|
||
const tabList = reactive([
|
||
{ label: '详情介绍', value: 'detail' },
|
||
{ label: '溯源码', value: 'sourceCode' },
|
||
{ label: '评价', value: 'evaluate' },
|
||
]);
|
||
|
||
let tabVal = ref('detail');
|
||
|
||
let saveInfo = reactive({
|
||
num: 0,
|
||
});
|
||
|
||
const toCodeDetail = () => {
|
||
let id = '01';
|
||
router.push('/sub-operation-service/ecommerce-sourceCodeDetail?id=' + id);
|
||
};
|
||
|
||
const toBack = (level) => {
|
||
router.go(level);
|
||
};
|
||
|
||
const toCopy = () => {};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.agricultural-detail-warp {
|
||
width: 100%;
|
||
.agricultural-detail-info {
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
padding: 10px 24px;
|
||
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;
|
||
cursor: pointer;
|
||
}
|
||
.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%);
|
||
}
|
||
}
|
||
.top-info {
|
||
margin: 16px 0;
|
||
text-align: left;
|
||
::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;
|
||
}
|
||
}
|
||
}
|
||
.price-sold {
|
||
margin: 16px 0;
|
||
.price {
|
||
position: relative;
|
||
padding: 0 16px;
|
||
font-size: 32px;
|
||
color: $color-main;
|
||
}
|
||
.price::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
font-size: 16px;
|
||
content: '￥';
|
||
transform: translateY(-50%);
|
||
}
|
||
.sold {
|
||
font-size: 16px;
|
||
color: $color-999;
|
||
}
|
||
.sold::before {
|
||
content: '已售';
|
||
}
|
||
}
|
||
.tag-list {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
color: $color-999;
|
||
gap: 10px;
|
||
.tag-item {
|
||
position: relative;
|
||
padding-left: 32px;
|
||
.iconfont {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
&.icon-see {
|
||
font-size: 24px;
|
||
}
|
||
&.icon-ci {
|
||
font-size: 20px;
|
||
}
|
||
&.icon-time {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
.tips-list {
|
||
margin: 16px 0;
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
.spu-sku-list {
|
||
width: 100%;
|
||
.spu-title {
|
||
font-size: 16px;
|
||
}
|
||
.spu-sku-warp {
|
||
display: inline-flex;
|
||
justify-content: space-around;
|
||
margin-top: 16px;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
.spu-sku-item {
|
||
width: calc((100% - 16px) / 2);
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
cursor: pointer;
|
||
&.normal {
|
||
border: 1px solid $color-da;
|
||
color: $color-999;
|
||
}
|
||
&.act {
|
||
border: 1px solid $color-main;
|
||
color: $color-main;
|
||
}
|
||
}
|
||
}
|
||
.spu-sku-warp::after {
|
||
content: '';
|
||
flex: auto;
|
||
}
|
||
}
|
||
.goods-num {
|
||
margin: 16px 0;
|
||
.num-warp,
|
||
.num-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.num-title {
|
||
font-size: 16px;
|
||
}
|
||
.num-warp {
|
||
.is-have {
|
||
display: inline-block;
|
||
padding-left: 8px;
|
||
font-size: 12px;
|
||
color: $color-999;
|
||
}
|
||
}
|
||
}
|
||
.top-btn {
|
||
.item-btn {
|
||
display: inline-block;
|
||
margin: 8px 24px 8px 0;
|
||
margin-top: 16px;
|
||
padding: 0 24px;
|
||
font-size: 20px;
|
||
border-radius: 12px;
|
||
color: $color-fff;
|
||
line-height: 42px;
|
||
&.sign {
|
||
background: $color-main;
|
||
}
|
||
&.reservation {
|
||
background: $color-warning;
|
||
}
|
||
}
|
||
}
|
||
.agricultural-detail-content {
|
||
width: 100%;
|
||
text-align: left;
|
||
.detail-content {
|
||
.tab-top {
|
||
margin: 42px 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
::v-deep() {
|
||
.el-radio-button:first-child .el-radio-button__inner {
|
||
border-radius: 16px 0 0 16px;
|
||
}
|
||
.el-radio-button:last-child .el-radio-button__inner {
|
||
border-radius: 0 16px 16px 0;
|
||
}
|
||
.el-radio-button__inner {
|
||
padding-right: 48px !important;
|
||
padding-left: 48px !important;
|
||
font-size: 20px;
|
||
line-height: 32px !important;
|
||
}
|
||
}
|
||
}
|
||
.tab-content {
|
||
margin: 24px 0;
|
||
width: 100%;
|
||
.content-detail,
|
||
.content-source-code,
|
||
.content-evaluate {
|
||
width: 100%;
|
||
}
|
||
.content-detail {
|
||
.detail-des {
|
||
margin-bottom: 24px;
|
||
}
|
||
}
|
||
.content-source-code {
|
||
.code-warp {
|
||
width: 100%;
|
||
text-align: center;
|
||
.code-img {
|
||
margin: auto;
|
||
width: 230px;
|
||
height: 230px;
|
||
}
|
||
.code-down {
|
||
margin: 16px 0;
|
||
color: $color-main;
|
||
.el-icon,
|
||
a {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.el-icon {
|
||
font-size: 22px;
|
||
}
|
||
a {
|
||
font-size: 16px;
|
||
color: $color-main;
|
||
}
|
||
}
|
||
.code-copy {
|
||
.code-txt {
|
||
display: inline-block;
|
||
padding: 12px 8px;
|
||
width: 200px;
|
||
border-radius: 16px 0 0 16px;
|
||
background: $color-main-table-header;
|
||
vertical-align: middle;
|
||
}
|
||
.do-copy {
|
||
vertical-align: middle;
|
||
display: inline-block;
|
||
margin-left: -6px;
|
||
.el-button {
|
||
padding: 21px 16px;
|
||
font-size: 16px;
|
||
border-radius: 12px;
|
||
}
|
||
}
|
||
}
|
||
.code-to-detail {
|
||
margin: 24px 0;
|
||
.el-button {
|
||
padding: 16px 116px;
|
||
height: 48px;
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
border-radius: 24px;
|
||
line-height: 48px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|