daimp-front/sub-operation-service/src/views/ecommerce/agriculturalDetail.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">保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;障：破损包赔 · 七天无理由退货</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>