yoe-shop-web/src/views/item/index.vue

<template>
  <div class="shop-pages">
    <div class="shop-head flex-row-start">
      <div class="head-left">
        <div class="left-carousel" v-if="carousel && carousel.length > 0">
          <div v-for="(item, index) in carousel" :key="index" class="carousel-item" :class="carouselIndex == index ? 'hig' : ''">
            <img :src="item" alt="" @click="onCarousel(1, index)" />
          </div>
        </div>
        <div class="left-next flex-row-center" @click="onCarousel(2)">
          <el-icon color="#6A7282" size="15">
            <ArrowDown />
          </el-icon>
        </div>
      </div>
      <img v-if="carousel && carousel.length > 0" :src="carousel[carouselIndex]" alt="" class="carousel-img" />
      <div class="head-right flex-column-between">
        <div>
          <div class="right-title">{{ dataInfo.itemName || '' }}</div>
          <div class="right-num">商品库存 {{ dataInfo.stock || 0 }}套</div>
          <div class="right-price flex-row-between">
            <div class="flex-row-start">
              <div class="price1">
                <span>¥</span>
                <span style="font-size: 24px">{{ dataInfo.standardPrice || 0 }}</span>
              </div>
              <div class="price2">平台价</div>
              <div class="price3">
                <span>¥</span>
                <span style="font-size: 16px">{{ dataInfo.midRangePrice || 0 }}</span>
              </div>
            </div>
            <div class="right-collect flex-row-start" @click="editCollection">
              <el-icon v-if="collection" :size="16" color="#e7000b"><StarFilled /></el-icon>
              <el-icon v-else class="icon-star" :size="16"><Star /></el-icon>
              <!-- <img src="@/assets/images/dark.svg" alt="" /> -->
              <span>{{ collection ? '已收藏' : '收藏' }}</span>
            </div>
          </div>
          <div class="address flex-row-start">
            <img class="address-img" src="@/assets/images/item1.png" alt="" />
            <div style="margin-right: 10px">配送至</div>
            <el-cascader v-model="regionCodes" :options="regionData as any" :placeholder="'请选择省/市/区'" style="width: 260px" />
            <!-- <el-icon color="#000000" size="15">
              <ArrowDown />
            </el-icon> -->
          </div>
          <div class="specs-bos">
            <div class="specs-list">
              <div>商品编号</div>
              <div class="specs-item hig">
                {{ dataInfo.productNo }}
              </div>
              <div class="specs-box"></div>
            </div>
            <div class="specs-list">
              <div>单位</div>
              <div class="specs-item hig">
                {{ dataInfo.unitName }}
              </div>
              <div class="specs-box"></div>
            </div>
            <div class="specs-list">
              <div>规格型号</div>
              <div class="specs-item hig">
                {{ dataInfo.specification }}
              </div>
              <div class="specs-box"></div>
            </div>
            <div class="specs-list">
              <div>UPC(69)条码</div>
              <div class="specs-item hig">
                {{ dataInfo.upcBarcode }}
              </div>
              <div class="specs-box"></div>
            </div>
          </div>
          <div class="number-bos">
            <div>数量</div>
            <div class="flex-row-start number-box">
              <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
              <div style="margin-left: 10px">本产品限购2件</div>
            </div>
          </div>
        </div>
        <div class="bnt-bos flex-row-start">
          <div @click="onCart">加入购物车</div>
          <!-- <div>立即购买</div> -->
        </div>
      </div>
    </div>
    <div class="nav-bos flex-row-start">
      <div @click="onNav(index)" v-for="(item, index) in navList" :key="index" :class="navIndex == index ? 'hig' : ''">{{ item.title }}</div>
    </div>
    <div class="pcDetail" v-if="navIndex == 0" v-html="dataInfo.pcDetail"></div>
    <div class="service" v-if="navIndex == 1">
      <div class="service1">原厂正品保证承诺：</div>
      <div>(1)所有商品均为符合国家有关商品质量的技术标准、服务标准、环保标准的原厂正品。</div>
      <div>(2)所有商品保证是全新的货物，且来源于中华人民共和国或与中华人民共和国有正常贸易往来的国家或地区。</div>
      <div>(3)所有商品均为自营，不涉及任何第三方店铺，充分保证产品来源，保证质量。</div>
      <div>(4)所有商品均为原厂正品，如有假货，假一罚十。</div>
      <div>(5)所有产品均严格按照国家三包标准执行。</div>
      <div>(6)保证所售商品开具机打发票或电子发票。</div>
      <div class="service1">厂家服务：</div>
      <div>
        本商品质保周期均为厂商对外公布的质保期或优易365对客户承诺的质保期为准。在此时间范围内可提交维修申请，具体请以厂家服务为准。
        如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
      </div>
      <div>全国统一售后及服务电话：400-111-0027</div>
      <div>(注:如优易365在商品介绍中有售后保障的说明,则此商品按照说明执行售后保障服务。)</div>
      <div class="service1">服务承诺：</div>
      <div>平台销售并发货的商品，均由平台提供发票和相应的售后服务。请您放心购买！</div>
      <div>优易365确保客户收到的货物与商城图片、产地、附件说明完全一致。均为原厂正货！并且保证与当时市场上同样主流新品一致。</div>
      <div class="service1">无忧退货：</div>
      <div>客户购买商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）</div>
      <div>• 购买运费如何收取？</div>
      <div class="service2">
        单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
      </div>
      <div>• 使用什么快递发货?</div>
      <div class="service2">默认使用顺丰快递发货(个别商品使用其他快递）</div>
      <div class="service2">配送范围覆盖全国大部分地区(港澳台地区除外）。</div>
      <div>• 如何申请退货?</div>
      <div class="service2">1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</div>
      <div class="service2">2.内裤和食品等特殊商品无质量问题不支持退货；</div>
      <div>3.退货流程：</div>
      <div class="service2">确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；</div>
      <div>
        4.因优品汇产生的退货，如质量问题，退货邮费由优品汇承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
      </div>
    </div>
    <!-- <img class="shop-img" src="@/assets/images/login-background.jpg" alt="" /> -->
    <div class="shop-more flex-row-between">
      <div class="flex-row-start">
        <div class="more1">更多推荐</div>
        <div class="more2">甄选大牌,优质好品</div>
      </div>
      <div class="flex-row-start">
        <div class="more3">查看更多</div>
        <el-icon color="#364153" size="14">
          <ArrowRight />
        </el-icon>
      </div>
    </div>
    <div class="data-bos">
      <div v-for="(item, index) in 3" :key="index" class="data-list">
        <img class="data-img" src="@/assets/images/login-background.jpg" alt="" />
        <div class="data-title">格力KFR-72LW/定频冷暖空调柜机3P</div>
        <div class="money">
          <span class="money1">¥1,299</span>
          <span class="money2">¥1,899</span>
        </div>
      </div>
    </div>
    <!-- 取消收藏 -->
    <el-dialog
      v-model="dialogVisible"
      title="选择取消的收藏夹"
      width="500"
      :before-close="
        () => {
          dialogVisible = false;
        }
      "
    >
      <div>
        <el-radio-group v-model="radio">
          <el-radio v-for="(item, index) in favorites" :key="index" :value="item.id">{{ item.title }}</el-radio>
        </el-radio-group>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onCancel"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getToken } from '@/utils/auth';
import { regionData } from 'element-china-area-data';
import {
  getProductDetail,
  addProductShoppingCart,
  isProductInDefaultCollect,
  addProductBrowsingHistory,
  addProductCollect,
  favoritesList,
  cancelProductCollect
} from '@/api/goods/index';

const route = useRoute();
const id = ref<any>(null);
const dataInfo = ref<any>({});
const carousel = ref<any>([]);
const regionCodes = ref<any>([]);
const radio = ref<any>(null);
const favorites = ref<any>([]);
const collection = ref<any>(null);
const dialogVisible = ref<any>(false);
const navList = ref<any>([{ title: '商品详情' }, { title: '售后服务说明' }, { title: '品牌信息' }, { title: '商品评价' }]);
const navIndex = ref<any>(0);
onMounted(() => {
  id.value = route.query.id;
  getInfo();

  if (getToken()) {
    getCollection();
    // 浏览记录
    addProductBrowsingHistory(id.value).then((res) => {});
  }
});

// 商品详情
const getInfo = () => {
  getProductDetail(id.value).then((res) => {
    if (res.code == 200) {
      carousel.value = [];
      if (res.data.imageUrl) {
        carousel.value = res.data.imageUrl.split(',');
        if(carousel.value.length>5){
          carousel.value = carousel.value.slice(0, 5)
        }
      }
      dataInfo.value = res.data;
    }
  });
};

// 收藏
const getCollection = () => {
  isProductInDefaultCollect(id.value).then((res) => {
    if (res.code == 200) {
      collection.value = res.data;
    }
  });
};

//修改收藏
const editCollection = () => {
  if (collection.value) {
    dialogVisible.value = true;
    favoritesList(id.value).then((res) => {
      if (res.code == 200) {
        if (res.rows.length > 0) {
          radio.value = res.rows[0].id;
        }
        favorites.value = res.rows;
      }
    });
  } else {
    // 添加
    addProductCollect({ productId: id.value }).then((res) => {
      if (res.code == 200) {
        getCollection();
      }
    });
  }
};

// 取消收藏
const onCancel = () => {
  cancelProductCollect({ productId: id.value, favoritesId: radio.value }).then((res) => {
    if (res.code == 200) {
      getCollection();
      dialogVisible.value = false;
    }
  });
};

// 切换
const onNav = (index: any) => {
  navIndex.value = index;
};

const num = ref<any>(1);

const carouselIndex = ref<any>(0);

const onCarousel = (type: number, index?: any) => {
  if (type == 1) {
    carouselIndex.value = index;
  } else {
    carouselIndex.value++;
    if (carouselIndex.value > carousel.value.length - 1) {
      carouselIndex.value = 0;
    }
  }
};

const handleChange = (val: any) => {
  // num.value = val;
};

const onCart = () => {
  addProductShoppingCart({
    productId: id.value,
    productNum: num.value
  }).then((res) => {
    if (res.code == 200) {
      ElMessage.success('加入购物车成功');
    }
  });
};
</script>

<style lang="scss" scoped>
.shop-pages {
  width: 1200px;
  margin: 0 auto;

  .shop-head {
    width: 1200px;

    .head-left {
      width: 106px;

      .left-carousel {
        height: 540px;
        overflow-y: auto;

        .carousel-item {
          width: 100px;
          height: 100px;
          border-radius: 6px;
          overflow: hidden;
          margin-top: 10px;
          cursor: pointer;

          &:nth-of-type(1) {
            margin-top: 0px;
          }

          &.hig {
            border: 1.5px solid #e7000b;
          }

          img {
            width: 100px;
            height: 100px;
          }
        }
      }

      .left-next {
        width: 100px;
        height: 36px;
        background: #ffffff;
        border-radius: 6px 6px 6px 6px;
        margin-top: 10px;
        cursor: pointer;
      }
    }

    .carousel-img {
      width: 586px;
      height: 586px;
      border-radius: 10px;
      margin-left: 4px;
      margin-right: 10px;
    }

    .head-right {
      width: 494px;
      height: 586px;
      background: #ffffff;
      border-radius: 10px 10px 10px 10px;
      padding: 20px 20px 30px 20px;

      .right-title {
        height: 56px;
        font-weight: 600;
        font-size: 20px;
        color: #101828;
      }

      .right-num {
        font-size: 14px;
        color: #6a7282;
      }

      .right-price {
        margin-top: 10px;

        .price1 {
          font-size: 12px;
          color: #e7000b;
        }

        .price2 {
          width: 52px;
          height: 21px;
          background: #e7000b;
          border-radius: 2px;
          font-size: 12px;
          color: #ffffff;
          line-height: 21px;
          text-align: center;
          margin: 0 16px 0 8px;
        }

        .price3 {
          font-size: 12px;
          color: #6a7282;
          text-decoration: line-through;
        }

        .right-collect {
          font-size: 14px;
          color: #6a7282;
          cursor: pointer;
          .icon-star {
            margin-right: 4px;
          }

          img {
            width: 12px;
            height: 12px;
            margin-right: 6px;
          }
        }
      }

      .address {
        height: 44px;
        width: 100%;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
        margin-top: 20px;
        font-size: 14px;
        color: #000000;

        .address-img {
          width: 16px;
          height: 16px;
          margin-right: 10px;
          margin-top: 2px;
        }

        .address-text {
          margin-left: 10px;
          width: 138px;
        }
      }

      .specs-bos {
        .specs-list {
          margin-top: 15px;
          font-size: 14px;
          color: #364153;
          display: flex;
          align-items: center;
          .specs-item {
            color: #6a7282;
            margin-left: 10px;
          }
        }
      }

      .number-bos {
        margin-top: 20px;
        font-size: 14px;
        color: #364153;

        .number-box {
          font-size: 14px;
          color: #6a7282;
          margin-top: 8px;
        }
      }

      .bnt-bos {
        width: 428px;
        height: 44px;
        border-radius: 10px;
        overflow: hidden;

        div {
          width: 428px;
          // width: 214px;
          height: 44px;
          line-height: 44px;
          text-align: center;
          cursor: pointer;

          &:nth-of-type(1) {
            background: #fcecf1;
            color: #e7000b;
          }

          &:nth-of-type(2) {
            background: #e7000b;
            color: #ffffff;
          }
        }
      }
    }
  }

  .nav-bos {
    width: 696px;
    height: 48px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    margin-top: 20px;
    gap: 0 32px;
    padding-left: 32px;
    font-size: 16px;
    color: #364153;

    div {
      cursor: pointer;
    }

    .hig {
      color: #101828;
      font-weight: 600;
    }
  }

  .pcDetail {
    width: 696px;
    margin-top: 20px;
  }

  .service {
    width: 696px;
    margin-top: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    div {
      margin-bottom: 20px;
      font-size: 14px;
    }
    .service1 {
      font-weight: 600;
    }
    .service2 {
      color: #999999;
    }
  }

  .shop-img {
    width: 696px;
    height: 752px;
    margin-top: 20px;
  }

  .shop-more {
    width: 696px;
    margin-top: 34px;

    .more1 {
      font-weight: 600;
      font-size: 20px;
      color: #101828;
    }

    .more2 {
      font-size: 14px;
      color: #364153;
      margin-left: 10px;
    }

    .more3 {
      font-size: 14px;
      color: #364153;
      margin-right: 6px;
      cursor: pointer;
    }
  }

  //数据
  .data-bos {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    margin-top: 24px;

    .data-list {
      width: 224px;
      background: #ffffff;
      border-radius: 10px;
      padding: 20px 20px 22px 20px;
      cursor: pointer;

      .data-img {
        width: 184px;
        height: 184px;
        border-radius: 10px;
      }

      .data-title {
        margin-top: 4px;
        font-size: 14px;
        color: #101828;
        height: 40px;
      }

      .money {
        margin-top: 4px;

        .money1 {
          font-size: 16px;
          color: #e7000b;
        }

        .money2 {
          font-size: 12px;
          color: #99a1af;
          text-decoration: line-through;
          padding-left: 6px;
        }
      }

      .data-cat {
        width: 86px;
        height: 26px;
        background: #e7000b;
        border-radius: 2px;
        font-size: 14px;
        color: #ffffff;
        line-height: 26px;
        text-align: center;
        margin-top: 16px;
      }
    }
  }
}
</style>