feat: 完成bbs商城

Yi.Abp.Net8/module/bbs/Yi.Framework.Bbs.Application.Contracts/Dtos/Shop/ShopGetListOutput.cs

@@ -1,8 +1,9 @@
-using Yi.Framework.Bbs.Domain.Shared.Enums;
+using Volo.Abp.Application.Dtos;
+using Yi.Framework.Bbs.Domain.Shared.Enums;
 
 namespace Yi.Framework.Bbs.Application.Contracts.Dtos.Shop;
 
-public class ShopGetListOutput
+public class ShopGetListOutput:EntityDto<Guid>
 {
     /// <summary>
     /// 上架时间

Yi.Abp.Net8/module/bbs/Yi.Framework.Bbs.Application/Services/Shop/BbsShopService.cs

@@ -92,7 +92,7 @@ public class BbsShopService : ApplicationService
         var eto = new SetAccountInfoEto(userId);
         await LocalEventBus.PublishAsync(eto, false);
         //钱钱累加
-        output.Money += eto.Money;
+        output.Money =money+ eto.Money;
         output.Points = eto.Points;
         output.Value = eto.Value;
         return output;

Yi.Bbs.Vue3/src/apis/shopApi.js

@@ -0,0 +1,33 @@
+import request from "@/config/axios/service";
+
+/**
+ *  获取商城列表
+ */
+export function getShopList() {
+    return request({
+        url: `/bbs-shop`,
+        method: "get",
+    });
+}
+
+
+/**
+ *  获取商城的用户信息
+ */
+export function getAccountInfo() {
+    return request({
+        url: `/bbs-shop/account`,
+        method: "get",
+    });
+}
+
+/**
+ *  购买商品
+ */
+export function postBuy(data) {
+    return request({
+        url: `/bbs-shop/buy`,
+        method: "post",
+        data
+    });
+}

Yi.Bbs.Vue3/src/views/shop/Index.vue

@@ -1,4 +1,45 @@
-<template>
+<script setup lang="ts">
+import ShopCard from "./components/ShopCard.vue";
+import {getShopList,getAccountInfo,postBuy} from "@/apis/shopApi.js";
+import {onMounted, reactive, ref} from "vue";
+import { ElMessage } from 'element-plus'
+const  buyForm=reactive({
+  goodsId:"",
+  contactInformation:""
+});
+const shopList=ref([]);
+const accountInfo=ref({});
+const dialogFormVisible=ref(false);
+onMounted(async ()=>{
+await initData();
+})
+const  initData=async ()=>{
+  const shopListData= await getShopList();
+  shopList.value=shopListData.data.items;
+  const accountInfoData= await getAccountInfo();
+  accountInfo.value=accountInfoData.data;
+}
+
+const currentGoods=ref({});
+//点击购买商品
+const clickBuy=(data)=>{
+  dialogFormVisible.value=true;
+  currentGoods.value=data;
+}
+//确认购买
+const confirmBuy=async()=>{
+  buyForm.goodsId=currentGoods.value.id;
+  await postBuy(buyForm);
+  dialogFormVisible.value = false;
+  await initData();
+  ElMessage({
+    message: '申请购买成功',
+    type: 'success',
+  })
+
+}
+</script>
+<template>
   <div class="content-body">
 
     <div class="title">
@@ -6,32 +47,47 @@
     </div>
     <div class="header">
       <span >你的钱钱
-       <el-tooltip effect="dark" content="社区通用货币，（来源：通过社区活动获取）" placement="top-start">
+       <el-tooltip effect="dark" content="社区通用货币，成功购买后将扣减（来源：通过社区活动获取）" placement="top-start">
              <el-icon><InfoFilled/></el-icon>
         </el-tooltip>
-        ：50</span>
+        ：{{accountInfo.money}}</span>
       
       
       <span>你的价值
-         <el-tooltip effect="dark" content="数字藏品账号价值，（来源：通过社区小程序数字藏品获取）" placement="top-start">
+         <el-tooltip effect="dark" content="数字藏品账号价值，成功购买后不会扣减（来源：通过社区小程序数字藏品获取）" placement="top-start">
              <el-icon><InfoFilled/></el-icon>
         </el-tooltip>
-        ：70</span>
+        ：{{accountInfo.value}}</span>
       
       <span> 你的积分
-         <el-tooltip effect="dark" content="邀请码积分，（来源：通过社区小程序个人中心邀请获取）" placement="top-start">
+         <el-tooltip effect="dark" content="邀请码积分，成功购买后将会扣减（来源：通过社区小程序个人中心邀请获取）" placement="top-start">
              <el-icon><InfoFilled/></el-icon>
         </el-tooltip>
-        ：40</span>
+        ：{{accountInfo.points}}</span>
     </div>
     
-    <div class="shop">
+      <el-row :gutter="30" class="shop">
-      <el-row :gutter="30">
+        <el-col :span="6" :xs="12" :sm="12" :md="8" :lg="6" :xl="6" v-for="item in shopList"  :key="item.id">
-        <el-col :span="6" v-for="i in 10">
+          <ShopCard :data="item" :realData="accountInfo" @clickBuy="clickBuy"/>
-          <ShopCard/>
         </el-col>
       </el-row>
-    </div>
+
+
+
+    <el-dialog  title="申请购买" v-model="dialogFormVisible">
+      <el-form :model="buyForm">
+        <el-form-item label="联系方式（微信号）" :label-width="200">
+          <el-input v-model="buyForm.contactInformation" autocomplete="off"></el-input>
+        </el-form-item>
+       
+      </el-form>
+      <template #footer>
+        <p>后续，如您符合申请条件，官方将定期将会与您联系</p>
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmBuy()">确定无误，申请购买</el-button>
+      </template>
+    </el-dialog>
+    
   </div>
 
 </template>
@@ -69,6 +125,3 @@
   }
 }
 </style>
-<script setup lang="ts">
-import ShopCard from "./components/ShopCard.vue";
-</script>

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 :class="{'less-li': realData.money<data.needMoney}">所需钱钱：{{data.needMoney}}</li>
-      <li>所需价值（拥有）：777</li>
+      <li :class="{'less-li': realData.value<data.needValue}">所需价值：{{data.needValue}}</li>
-      <li>所需积分（拥有）：888</li>
+      <li :class="{'less-li': realData.points<data.needPoints}">所需积分：{{data.needPoints}}</li>
-      <li>限制数量：1</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>