<script setup> import { ref } from "vue"; import { addToCartAPI, loadProductByIdAPI } from "../servers/product"; import { useRoute, useRouter } from "vue-router"; const router = useRouter(); const route = useRoute(); const pro = ref({}); //列表跳详情 详情跳购物车 //回到首页 const todoHome = () => { router.push({ name: "Home" }); }; //去到购物车 const todoCart = () => { router.push({ name: "Cart" }); }; //定义一个函数 接受id过来的数据 const created = () => { const res = loadProductByIdAPI(route.params.id).then((res) => { console.log(res); pro.value = res.data; }); }; //调用这个函数 created(); //点击购物车 调接口 const addCart = () => { const ress = addToCartAPI(.pro.id, 1).then((res) => { console.log(res); alert("加入购物车成功"); }); }; </script> <template> <div class="conter"> <div class="top"> <img src="https://img0.baidu.com/it/u=3134336662,3253223544&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="" /> </div> <div class="bottom"> <!-- <h1>我是详情页</h1> --> <h3>{{ pro.name }}</h3> <h3>￥{{ pro.price }}</h3> <img :src="pro.coverImg" alt="" /> <van-action-bar> <van-action-bar-icon icon="chat-o" text="客服" dot /> <van-action-bar-icon icon="cart-o" text="购物车" badge="5" @click="todoCart" /> <van-action-bar-icon icon="shop-o" text="店铺" badge="12" @click="todoHome" /> <van-action-bar-button type="warning" text="加入购物车" @click="addCart" /> <van-action-bar-button type="danger" text="立即购买" /> </van-action-bar> </div> </div> </template> <style scoped> .top img { height: 100vh; width: 100vw; opacity: 0.9; } .bottom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.9; height: 400px; width: 500px; } img { height: 200px; width: 500px; } </style> 完善代码

根据您给出的代码，似乎有一些错误，我会帮您进行修正和完善。

<template>
  <div class="conter">
    <div class="top">
      <img
        src="https://img0.baidu.com/it/u=3134336662,3253223544&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        alt=""
      />
    </div>

    <div class="bottom">
      <h3>{{ pro.name }}</h3>
      <h3>￥{{ pro.price }}</h3>
      <img :src="pro.coverImg" alt="" />

      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" dot />
        <van-action-bar-icon
          icon="cart-o"
          text="购物车"
          badge="5"
          @click="todoCart"
        />
        <van-action-bar-icon
          icon="shop-o"
          text="店铺"
          badge="12"
          @click="todoHome"
        />
        <van-action-bar-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { addToCartAPI, loadProductByIdAPI } from "../servers/product";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();
const pro = ref({});

// 列表跳转详情, 详情跳转购物车

// 回到首页
const todoHome = () => {
  router.push({ name: "Home" });
};

// 去到购物车
const todoCart = () => {
  router.push({ name: "Cart" });
};

// 定义一个函数接受id传递的数据
const created = async () => {
  const res = await loadProductByIdAPI(route.params.id);
  console.log(res);
  pro.value = res.data;
};

// 点击加入购物车调用接口
const addCart = () => {
  addToCartAPI(pro.value.id, 1)
    .then((res) => {
      console.log(res);
      alert("加入购物车成功");
    })
    .catch((error) => {
      console.error(error);
      alert("加入购物车失败");
    });
};

onMounted(() => {
  created();
});
</script>

<style scoped>
.top img {
  height: 100vh;
  width: 100vw;
  opacity: 0.9;
}

.bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
  height: 400px;
  width: 500px;
}

img {
  height: 200px;
  width: 500px;
}
</style>

修正后的代码中，主要做了以下几个改动：

- 将`created`函数改为`async/await`形式，以确保在获取到数据后再进行赋值操作。
- 在`addCart`函数中，修改了调用接口的参数，使用`pro.value.id`而不是`.pro.id`。
- 使用`onMounted`钩子函数来在组件挂载后调用`created`函数，以获取数据。

请注意，代码中仍然存在一些假设，例如`loadProductByIdAPI`和`addToCartAPI`这两个函数的实现以及路由配置。请根据实际情况修改和完善这些部分。