lilishop-ui/buyer/src/pages/ShoppingCart.vue

<template>
  <div>
    <TopBar></TopBar>
    <SearchHeader></SearchHeader>

    <!-- 添加成功提示 -->
    <div class="add-info-box-container">
      <div class="add-info-box">
        <div class="add-info-detail">
          <div class="add-info-title">
            <p>
              <i class="fa fa-check-circle"></i> 商品已成功加入购物车！</p>
          </div>
          <div class="add-info-box-row">
            <div class="add-info-img">
              <img :src="detail.thumbnail" loading="lazy" decoding="async" alt="">
            </div>
            <div class="add-info-intro">
              <p>{{detail.goodsName}}</p>
              <p class="add-info-intro-detail">数量：{{$route.query.count}}</p>
            </div>
          </div>
        </div>
        <div class="car-btn-group">
          <div></div>
          <div class="car-btn-row">
            <router-link :to="{ path: '/goodsDetail', query: { skuId: detail.skuId, goodsId: detail.goodsId } }">
              <button class="btn-car hover-pointer btn-car-to-detail">查看商品详情</button>
            </router-link>
            <router-link to="/cart">
              <button class="btn-car hover-pointer btn-car-to-pay">去购物车结算></button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <BaseFooter></BaseFooter>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import TopBar from '@/components/indexDecorate/components/TopBar.vue';
import SearchHeader from '@/components/indexDecorate/components/SearchHeader.vue';
import { useRoute } from "vue-router";

const route = useRoute();

const detail = ref({}); // 商品详情

onMounted(() => {
  const { skuId, goodsId, thumbnail, goodsName } = route.query;
  detail.value = {
    skuId,
    goodsId,
    thumbnail,
    goodsName
  };
});
</script>

<style scoped lang="scss">
/****************************加入购物车页面开始*****************************/
.add-info-box-container{
  width: 100%;
  background-color: #F5F5F5;
}
.add-info-box{
  width: 1200px;
  margin: 0px auto;
  padding: 15px 0px;
  display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.add-info-detail{
  display: flex;
    flex-direction: column;
}
.add-info-title{
  font-size: 25px;
  color: #71b247;
}
.add-info-box-row{
  display: flex;
    flex-direction: row;
    margin-top: 15px;
}
.add-info-img{
  width: 56px;
  height: 56px;
  margin-right: 15px;
}
.add-info-img img{
  width: 100%;
}
.add-info-intro{
  display: flex;
    flex-direction: column;
    justify-content: center;
}
.add-info-intro-detail{
  font-size: 12px;
  color: #999999;
}
.car-btn-group{
  display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/*按钮*/
.btn-car{
  padding: 8px 10px;
  font-size: 16px;
  border-radius: 0px;
  border:none;
  margin-right: 15px;
}
.btn-car-to-detail{
  background-color: #fff;
  color: $theme_color;
  border:1px solid #fff;
}
.btn-car-to-detail:hover{
border:1px solid $theme_color;
}
.btn-car-to-pay{
  background-color: $theme_color;
  color: #fff;
  border:1px solid $theme_color;
}
.btn-car-to-pay:hover{
  background-color: $theme_color;
  border:1px solid $theme_color;
}
/*其他用户购买*/
.other-user-buy-box{
  width: 90%;
  margin: 0px auto;
  display: flex;
    flex-direction: column;
}
.other-user-buy-title{
  margin-top: 25px;
  font-size: 14px;
  color: #666;
  font-weight: bold;
}
.other-user-buy-row{
  margin-top: 25px;
  display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.other-user-buy-item-box{
  display: flex;
    flex-direction: row;
}
.other-user-buy-item-img{
  width: 96px;
  height: 96px;
}
.other-user-buy-item-img img{
  width: 100%;
}
.other-buy-detail-box{
  width: 160px;
  margin-left: 15px;
  display: flex;
    flex-direction: column;
}
.other-buy-title{
  font-size: 12px;
}
.other-buy-title a{
  color: #2c2c2c;
  text-decoration: none;
}
.other-buy-price{
  font-size: 12px;
  font-weight: bold;
  color: $theme_color;
}
.other-buy-btn{
  padding: 3px 10px;
  color: $theme_color;
  font-size: 12px;
  border: 1px solid $theme_color;
  border-radius: 0px;
  background-color: #fff;
}
.other-buy-btn:hover{
  color: $theme_color;
  border: 1px solid $theme_color;
}
/****************************加入购物车页面结束*****************************/
</style>