feat: 完成bbs商城

Yi.Bbs.Vue3/src/views/shop/components/ShopCard.vue

@@ -1,24 +1,66 @@
-<template>
+<script setup>
+import {computed, ref, watch} from "vue";
+const data=ref({});
+const realData=ref({});
+const props = defineProps([
+  "data","realData"
+]);
+const emit = defineEmits(['clickBuy'])
+watch(()=>props.data,(n)=>{
+  data.value=n;
+},{deep:true, immediate: true})
+
+watch(()=>props.realData,(n)=>{
+  realData.value=n;
+},{deep:true, immediate: true})
+
+const clickBuy=async ()=>{
+  
+  emit('clickBuy',data.value)
+}
+
+const isConformToRule=computed(()=>{
+  if (data.value.isLimit===true)
+  {
+    return true;
+  }
+  if (realData.value.money>=data.value.needMoney
+      &&realData.value.value>=data.value.needValue
+      &&realData.value.points>=data.value.needPoints
+      &&data.value.stockNumber>0)
+  {
+   return true; 
+  }
+  return false
+  
+})
+</script>
+
+
+<template>
   <el-card  shadow="hover">
-    <template #header>商品-物品A</template>
+    <template #header>{{data.name}}</template>
     <img
-        src="https://ccnetcore.com/prod-api/wwwroot/logo.png"
+        :src="data.imageUrl"
         style="width: 100%"
      alt=""/>
+    简介：{{data.describe}}
     <ul>
-      <li>所需钱钱（扣除）：666</li>
-      <li>所需价值（拥有）：777</li>
-      <li>所需积分（拥有）：888</li>
-      <li>限制数量：1</li>
+      <li :class="{'less-li': realData.money<data.needMoney}">所需钱钱：{{data.needMoney}}</li>
+      <li :class="{'less-li': realData.value<data.needValue}">所需价值：{{data.needValue}}</li>
+      <li :class="{'less-li': realData.points<data.needPoints}">所需积分：{{data.needPoints}}</li>
+      <li>限购数量：{{data.limitNumber}}</li>
+      <li>剩余：{{data.stockNumber}}</li>
     </ul>
     <el-divider />
     <div class="bottom"> 
-      <el-button type="success">申请购买</el-button>
+      
+      <el-button v-if="!isConformToRule" :disabled="true" type="danger">条件不足</el-button>
+      <el-button v-else :disabled="data.isLimit" type="success" @click="clickBuy">{{data.isLimit===true?"已申请":"申请购买"}} </el-button>
     </div>
   </el-card>
 </template>
-<script setup lang="ts">
-</script>
+
 <style scoped lang="scss">
 .bottom
 {
@@ -26,4 +68,7 @@
   justify-content: flex-end;
   margin-top: 20px;
 }
+.less-li{
+  color: red;
+}
 </style>