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)">
              <el-icon><ArrowLeftBold /></el-icon>商品信息
            </div>
            <div class="current-title">查看详情</div>
          </div>

          <div class="top-info">
            <el-row :gutter="16">
              <el-col :span="12">
                <banner
                  v-if="currentGood.goodUrls.length > 0"
                  name="landdetail"
                  :imglist="currentGood.goodUrls"
                  :is-montage="false"
                  indicator-pos="none"
                  arrow="always"
                  height="340px"
                  :is-view="true"
                >
                </banner>
              </el-col>
              <el-col :span="12" class="top-info-txt">
                <h1 class="title">{{ currentGood.goodName }}</h1>
                <div class="price-sold">
                  <span class="price">{{ currentPrice }}</span>
                  <span class="sold">{{ currentGood.salesVolume }}</span>
                </div>
                <div class="tips-list">
                  <el-row :gutter="16">
                    <el-col :span="24">发货地址：{{ currentGood.detailAddress }}</el-col>
                    <el-col :span="24"
                      >保&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;障：{{
                        currentGood.safeguard ? currentGood.safeguard.options[0].text : ''
                      }}</el-col
                    >
                  </el-row>
                </div>
                <div class="spu-sku-list">
                  <div class="spu-title">规格：</div>
                  <div class="spu-sku-warp">
                    <div
                      v-for="(item, index) in currentGood.netWeight"
                      :key="index"
                      class="spu-sku-item"
                      :class="[index === currentWeight ? 'act' : 'normal']"
                      @click="currentWeight = index"
                    >
                      {{ item.goodSpecs }}{{ item.unit }}
                    </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 v-if="currentStock !== 0" class="is-have">有货: {{ currentStock }}</span>
                      <span v-else 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">
                  <div v-if="showDetail" style="display: flex; justify-content: center">
                    <el-descriptions class="detail-des" title=" " :column="2" size="large" border>
                      <el-descriptions-item v-for="item in currentGood.attribute" :key="item.key">
                        <template #label>
                          <div class="cell-item">{{ item.value.name }}</div>
                        </template>
                        <span>{{ item.value.value }}</span>
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                  <div style="display: flex; justify-content: center; flex-wrap: wrap">
                    <el-image
                      v-for="(item, index) in currentGood.detailUrl"
                      :key="index"
                      :src="item"
                      style="width: 90%; margin: 5px 0"
                      fit="contain"
                    />
                  </div>
                </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" :good-url="currentGood.goodUrls[0]"></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 { onMounted, reactive, ref, computed } from 'vue';
import { getAssetsFile } from '@/utils';
import { qrImg } from '@/layouts/component/Header/base64img.js';
import evaluate from './components/evaluate.vue';
import { useRoute, useRouter } from 'vue-router';
import { getGoodDetail } from '@/apis/agricultural.js';

const route = useRoute();
const router = useRouter();
const goodId = route.query.id; // 获取参数
const pId = route.query.pid;
const currentWeight = ref(0);

let bannerList = reactive(['images/ecommerce/' + 'banner.png', 'images/ecommerce/' + 'banner.png']);
const tabList = reactive([
  { label: '详情介绍', value: 'detail' },
  { label: '溯源码', value: 'sourceCode' },
  { label: '评价', value: 'evaluate' },
]);

const currentIndex = ref(0);
const showDetail = ref(true);

const currentGood = ref({
  showPic: false,
  goodUrls: [],
  attribute: [],
});

const currentPrice = computed(() => {
  return currentGood.value?.netWeight?.[currentWeight.value]?.goodPrice ?? 0;
});

const currentStock = computed(() => {
  return currentGood.value?.netWeight?.[currentWeight.value]?.goodStock ?? 0;
});

const mockData = [
  {
    goodName: '甜糯玉米种子',
    sold: 1200,
    price: 25,
    sendAddress: '河南信阳',
    safeguard: '七天保价',
    weight: ['100g', '200g'],
    goodUrl: ['images/mockPic/cornTop.png'],
    detailUrl: ['cornBottom1.png', 'cornBottom2.png', 'cornBottom3.png', 'cornBottom4.png'],
  },
  {
    goodName: '张塘王豇豆种子种籽',
    sold: 1200,
    price: 4.35,
    sendAddress: '山东潍坊',
    safeguard: '七天保价',
    weight: ['100粒', '200粒'],
    goodUrl: ['images/mockPic/beanTop.png'],
    detailUrl: ['beanBottom1.png', 'beanBottom2.png', 'beanBottom3.png', 'beanBottom4.png'],
  },
  {
    goodName: '茄子种子种籽',
    sold: 1200,
    price: 3.92,
    sendAddress: '山东潍坊',
    safeguard: '七天保价',
    weight: ['100粒', '200粒'],
    goodUrl: ['images/mockPic/eggplantTop.png'],
    detailUrl: ['eggplantBottom1.png', 'eggplantBottom2.png', 'eggplantBottom3.png', 'eggplantBottom4.png'],
  },
  {
    goodName: '正宗绿贝贝南瓜种籽',
    sold: 1200,
    price: 6.8,
    sendAddress: '安徽马鞍山',
    safeguard: '七天保价',
    weight: ['10粒', '20粒'],
    goodUrl: ['images/mockPic/pumpkinTop.png'],
    detailUrl: ['pumpkinBottom1.png', 'pumpkinBottom2.png', 'pumpkinBottom3.png', 'pumpkinBottom4.png'],
  },
  {
    goodName: '复合肥料18-5-7',
    sold: 1200,
    price: 154,
    sendAddress: '浙江金华',
    safeguard: '七天保价',
    weight: ['25kg', '50kg'],
    goodUrl: ['images/mockPic/fertilizerTop.png'],
    detailUrl: ['fertilizerBottom1.png', 'fertilizerBottom2.png'],
  },
  {
    goodName: '正宗硫酸钾 农用钾肥',
    sold: 1200,
    price: 13.5,
    sendAddress: '内蒙古',
    safeguard: '七天保价',
    weight: ['5斤', '10斤'],
    goodUrl: ['images/mockPic/KSO4Top.png'],
    detailUrl: ['KSO4Bottom1.png', 'KSO4Bottom2.png', 'KSO4Bottom3.png', 'KSO4Bottom4.png'],
  },
  {
    goodName: '噻虫嗪农药',
    sold: 1200,
    price: 8.6,
    sendAddress: '内蒙古',
    safeguard: '七天保价',
    weight: ['500g'],
    goodUrl: ['images/mockPic/pesticideTop.png'],
    detailUrl: ['pesticideBottom1.png', 'pesticideBottom2.png', 'pesticideBottom3.png', 'pesticideBottom4.png', 'pesticideBottom5.png'],
  },
  {
    goodName: '11.6%甲维氯笨氣虫苯甲铣胺酰胺笨甲先胺水稻钻心虫农药杀虫剂',
    sold: 1200,
    price: 35.6,
    sendAddress: '山东烟台',
    safeguard: '七天保价',
    weight: ['500g', '1000g'],
    goodUrl: ['images/mockPic/nyTop.png'],
    detailUrl: ['nyBottom1.png', 'nyBottom2.png', 'nyBottom3.png', 'nyBottom4.png'],
  },
  {
    goodName: '铁皮石斛种子',
    sold: 13,
    price: '80/g',
    sendAddress: '耿马县',
    safeguard: '七天保价',
    weight: ['1g', '2g', '5g', '10g'],
    goodUrl: ['images/mockPic/shihuTop.png'],
    detailUrl: ['shihuBottom0.png', 'shihuBottom1.png', 'shihuBottom2.png', 'shihuBottom3.png'],
  },
  {
    goodName: '黑皮甘蔗苗',
    sold: 1400,
    price: '0.7/株',
    sendAddress: '耿马县',
    safeguard: '七天保价',
    weight: ['10株', '50株', '200株', '500株'],
    goodUrl: ['images/mockPic/ganzheTop.png'],
    detailUrl: ['ganzheBottom0.png', 'ganzheBottom1.png', 'ganzheBottom2.png', 'ganzheBottom3.png'],
  },
  {
    goodName: '美人椒种子 -辣椒种子',
    sold: 548,
    price: '43/斤',
    sendAddress: '耿马县',
    safeguard: '七天保价',
    weight: ['1斤', '2斤'],
    goodUrl: ['images/mockPic/chiliTop.png'],
    detailUrl: ['chiliBottom0.png', 'chiliBottom1.png', 'chiliBottom2.png', 'chiliBottom3.png'],
  },
  {
    goodName: '四季青种子',
    sold: 548,
    price: '19.5/包',
    sendAddress: '耿马县',
    safeguard: '七天保价',
    weight: ['1包（500-2000粒）', '2包', '4包'],
    goodUrl: ['images/mockPic/leafyTop.png'],
    detailUrl: ['leafyBottom0.png', 'leafyBottom1.png', 'leafyBottom2.png'],
  },
  {
    goodName: '青花菜种子',
    sold: 548,
    price: '10/包',
    sendAddress: '耿马县',
    safeguard: '七天保价',
    weight: ['1包（300-800粒）', '2包', '4包'],
    goodUrl: ['images/mockPic/broccoliTop.png'],
    detailUrl: ['broccoliBottom2.png', 'broccoliBottom1.png', 'broccoliBottom0.png'],
  },
  {
    goodName: '黑叶小白菜种子',
    sold: 82,
    price: '60/公斤',
    sendAddress: '耿马县',
    safeguard: '七天保价',
    weight: ['1公斤', '2公斤', '5公斤'],
    goodUrl: ['images/mockPic/choyTop.png'],
    detailUrl: ['choyBottom0.png', 'choyBottom1.png', 'choyBottom2.png', 'choyBottom3.png'],
  },
];

let tabVal = ref('detail');

let saveInfo = reactive({
  num: 0,
});

onMounted(() => {
  showDetail.value = false;
  // const num = Number(pId);
  getGoodDetail(goodId).then(async (res) => {
    currentGood.value = res.data;
    // 数据转义
    await formattedData(res.data);
    showDetail.value = true;
  });
  // if (num === 55) {
  //   // 1. 获取前四个元素的索引（0, 1, 2, 3）
  //   const allIndices = [0, 1, 2, 3];
  //   // 2. 随机打乱索引顺序
  //   const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
  //   // 3. 选择第一个
  //   currentIndex.value = shuffledIndices.slice(0, 1)[0];
  // } else if (num === 61) {
  //   // 1. 获取前四个元素的索引（0, 1, 2, 3）
  //   const allIndices = [4, 5];
  //   // 2. 随机打乱索引顺序
  //   const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
  //   // 3. 选择第一个
  //   currentIndex.value = shuffledIndices.slice(0, 1)[0];
  // } else if (num === 65) {
  //   // 1. 获取前四个元素的索引（0, 1, 2, 3）
  //   const allIndices = [6, 7];
  //   // 2. 随机打乱索引顺序
  //   const shuffledIndices = [...allIndices].sort(() => Math.random() - 0.5);
  //   // 3. 选择第一个
  //   currentIndex.value = shuffledIndices.slice(0, 1)[0];
  // }
  // if (Number(goodId) === 2140012566 || Number(goodId) === 2140012569) {
  //   getGoodDetail(Number(goodId)).then(async (res) => {
  //     currentGood = res.data;
  //     // 数据转义
  //     await formattedData(res.data);
  //     showDetail.value = true;
  //   });
  //   currentIndex.value = 8;
  // } else if (Number(goodId) === 2140012546 || Number(goodId) === 2140012547) {
  //   currentIndex.value = 9;
  // } else if (Number(goodId) === 2140012562) {
  //   currentIndex.value = 2;
  // } else if (Number(goodId) === 2140012563) {
  //   currentIndex.value = 10;
  // } else if (Number(goodId) === 2140012586) {
  //   currentIndex.value = 11;
  // } else if (Number(goodId) === 2140012587) {
  //   currentIndex.value = 12;
  // } else if (Number(goodId) === 2140012588) {
  //   currentIndex.value = 13;
  // }
});

// 转义数据格式
const formattedData = (data) => {
  if (currentGood.value.attribute) {
    currentGood.value.attribute = Object.entries(data.attribute).map(([key, value]) => ({ key, value }));
  }
  if (currentGood.value.detailUrl) {
    currentGood.value.detailUrl = currentGood.value.detailUrl.replace(/'/g, '"');
    currentGood.value.detailUrl = JSON.parse(currentGood.value.detailUrl);
  }
  currentGood.value.goodUrls = data.goodUrl.split(',');
  console.log(currentGood.value);
};

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;
              width: 90%;
            }
          }
          .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>