MiniProjectX/vue3-vuetify3-typescript-blog-system/ProductDetail.vue

<script setup>
import { reactive,ref } from 'vue';
import { stringifyQuery } from 'vue-router';
import img from '@/assets/test.png'
// let getProduct = reactive({
//   id:Number,
//   isStock:Boolean,
//   name:String,
//   description:String,
//   rating:Number,
//   salePrice:Number,
//   offerPrice:Number,
//   colors:String,
//   qty:String,
// })

let getProduct = reactive({
  id:Number,
  isStock:true,
  name:'产品名称',
  description:"Landsat 8 是美国陆地卫星计划（Landsat）的第八颗卫星，于2013年2月11号在加利福尼亚范登堡空军基地由Atlas-V火箭搭载发射成功，最初称为“陆地卫星数据连续性任务”（Landsat Data Continuity Mission，LDCM）。",
  rating:4,
  salePrice:15,
  offerPrice:12,
  inventory:300,
  state:'良好',
  category:'标准产品',
  qty:String,
}) 

let tab = ref()

let text = ref( )

</script>

<template>
<div>
  <v-row>
    <v-col lg="5" sm="12">
      <v-card id="my_card" >
       <v-img class="mx-auto"
       height="100%"
       width="100%"
       cover
    :src="img"
  ></v-img>
  </v-card>
      </v-col>
      <v-col lg="7" sm="12">
        <v-row>
        <div class="d-flex align-top">
          <div>
            <v-chip color="success" v-if="getProduct.isStock"> In Stock </v-chip>
            <v-chip color="error" v-else> Out of Stock </v-chip>
            <h3 class="text-h3 my-2 mb-3 ms-3">{{ getProduct.name }} <v-chip color="info" variant="outlined" size="small"> New</v-chip></h3>
          </div>
        </div>
       </v-row>
       <v-row>

       </v-row>                    
        <v-divider class="my-3"></v-divider>

        <v-row>
          <v-col lg="12">
            <div class="d-flex align-center gap-2">
          <h2 class="text-h2 text-primary">${{ getProduct.salePrice }}</h2>
          <v-chip  color="secondary" size="x-large">
            <p>折扣后</p><p class="text-decoration-line-through text-medium-emphasis">${{ getProduct.offerPrice }}</p>
          </v-chip>
        </div>
          </v-col>
          <v-col lg="4">
            <tr>
              <td><p class="text-left text-subtitle-2">库存：</p></td>
              <td><p>{{getProduct.inventory }}</p></td>
            </tr>
          </v-col>
          <v-col lg="4">
            <tr>
              <td><p class="text-left text-subtitle-2">产品状态：</p></td>
              <td><p>{{ getProduct.state }}</p></td>
            </tr>
          </v-col>
          <v-col lg="4">
            <tr>
              <td><p class="text-left text-subtitle-2">类别：</p></td>
              <td><p>{{ getProduct.category }}</p></td>
            </tr>
          </v-col>
          <v-col lg="12">
            <p class="text-left text-subtitle-2">产品来源：</p>
            <p class="text-left v-col-lg-12 px-0">{{ getProduct.description }}</p>
          </v-col>
          <v-col lg="12" class="pb-0 pt-0">       
              <p class="text-left text-subtitle-2 mb-2 ">产品评分：</p> 
              <div class="text-medium-emphasis align-center d-flex mb-0 gap-2 ">
                <v-rating color="primary"  half-increment v-model="getProduct.rating" > </v-rating>
                <small>({{ getProduct.rating }}+)</small>
              </div>  
          </v-col>
          <v-col lg="6">
            <v-btn block color="primary" @click="store.AddToCart(getProduct)">
              <p style="font-weight: bold;">加入购物车</p>
            </v-btn>
          </v-col>
          <v-col lg="6">
            <v-btn block color="secondary" to="/ecommerce/checkout" @click="store.AddToCart(getProduct)">
              <p style="font-weight: bold;">立即订购</p>
            </v-btn>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
    <v-tabs 
      v-model="tab"
      color="primary"
      align-tabs="center"
      
    >
      <v-tab :value="1">产品介绍</v-tab>
      <v-tab :value="2">参数选择</v-tab>
    </v-tabs>
    <v-divider 
    color="red"
        :thickness="2"
    ></v-divider>
    <v-window >
      <v-window-item :value="1">
        <v-card-text>
            <!-- 加载markdown -->
            <!-- <v-md-preview :text="text"></v-md-preview> -->
          </v-card-text>
      </v-window-item>
      <v-window-item :value="2">

      </v-window-item>
    </v-window>
  </v-col>
    </v-row>
</div>
</template>

<style scoped>
.productCustomize tr td {
  padding: 15px 20px;
  vertical-align: center;
}
#my_card{
  position: relative;
  height: 100%;
  width: 90%;
  left: 5%;
}

.v-divider{
  border-color: rgb(var(--v-theme-secondary)) !important;
}
</style>