【three.js沉浸式商城】产品展示界面的实现

最新推荐文章于 2023-12-07 00:23:24 发布

EVELESLIE

最新推荐文章于 2023-12-07 00:23:24 发布

阅读量339

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/EVELESLIE/article/details/129322988

版权

文章介绍了如何在Vue项目中利用axios库创建API请求，设置响应拦截器处理后端响应。通过配置接口获取产品信息，并在模板中实现产品和场景的切换功能。changeMode和changeHdr函数分别用于切换产品和场景。

摘要由CSDN通过智能技术生成

1. 切换产品

产品信息获取：

通过axios来请求外部api数据，新建api.js
在这里插入图片描述
导入axios，创建配置的路径


   import axios from "axios";

   const request = axios.create({

    // 配置接口请求的基准路径

    baseURL: "http://api.cpengx.cn/metashop/api",

   });

接着设置响应拦截器，对后端响应进行处理



// 响应拦截器
request.interceptors.response.use(
  (response) => {
    if (response.status == 200) {
      return response.data;
    } else {
      return response;
    }
  },
  function (error) {
    return Promise.reject(error);
  }
);

配置接口的具体请求，因为我们是在产品页中使用后端信息，所以url填写产品页的地址

export const getProducts = () => {
  return request({
    method: "GET",
    url: "/products",
  });
};

在template中定义产品，并绑定changeMode点击函数

  <div class="product" v-show="!data.isLoading" id="product">
    <!-- v-if判断初始值存不存在，避免一开始没有初始值报错
        v-for循环渲染-->
    <div class="desc"
    :class="{ active: data.descIndex == i }"
    v-if="data.products[data.pIndex]"
      v-for="(desc, i) in data.products[data.pIndex].desc">
      <h1 class="title">{{desc.title}}</h1>
      <p class="content">{{desc.content}}</p>
    </div>
    <div class="prod-list" :class="{hidden:store.state.isFullscreen}">
      <!-- 两边白色展示栏 -->
      <h1><SketchOutlined></SketchOutlined>产品推荐</h1>
      <div class="products">
        <div class="prod-item" 
        :class="{active:pI == data.pIndex}"
        v-for="(prod,pI) in data.products" @click="changeMode(prod,pI)">
          <div class="prod-title">
            {{prod.title}}
          </div>
          <div class="img">
            <img :src="prod.imgsrc" :alt="prod.title">
          </div>
          <!-- 阻止向上传递 -->
          <a-button type="primary" block @click.stop="addBuycart(prod)">
            <template #icon>
              <ShoppingCartOutlined></ShoppingCartOutlined>
            </template>
            加入购物车
          </a-button>
 
        </div>
      </div>
    </div>
    <div class="scene-list " :class="{hidden:store.state.isFullscreen}">
      <h3><RadarChartOutlined></RadarChartOutlined>切换使用场景</h3>

      <div class="scenes">
        <div class="scene-item" 
        :class="{active:index == data.sceneIndex}"
        v-for="(scene,index) in data.scenes" @click="changeHdr(scene,index)">
          <img :src="`./files/hdr/${scene}.jpg`" :alt="scene">
        </div>
      </div>
    </div>
  </div>

结果：
在这里插入图片描述

2. 切换使用场景

changeMode的作用是点击切换产品，changeHdr的作用是点击切换场景

function changeMode(prod,pI){
  data.pIndex = pI;
  console.log('PI:',pI);
  data.base3d.setModel(prod.modelName);

}
function changeHdr(scene,index){
  data.sceneIndex = index;
  data.base3d.setEnvMap(scene);
}