feat: 完成bbs商城

2024-11-03 18:01:47 +08:00
parent 1468a7b878
commit 22a8703978
5 changed files with 160 additions and 28 deletions
--- a/Yi.Abp.Net8/module/bbs/Yi.Framework.Bbs.Application.Contracts/Dtos/Shop/ShopGetListOutput.cs
+++ b/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>
    /// 上架时间
--- a/Yi.Abp.Net8/module/bbs/Yi.Framework.Bbs.Application/Services/Shop/BbsShopService.cs
+++ b/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;
--- a/Yi.Bbs.Vue3/src/apis/shopApi.js
+++ b/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
+    });
+}
--- a/Yi.Bbs.Vue3/src/views/shop/Index.vue
+++ b/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">
-        <el-col :span="6" v-for="i in 10">
-          <ShopCard/>
+      <el-row :gutter="30" class="shop">
+        <el-col :span="6" :xs="12" :sm="12" :md="8" :lg="6" :xl="6" v-for="item in shopList"  :key="item.id">
+          <ShopCard :data="item" :realData="accountInfo" @clickBuy="clickBuy"/>
        </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>
--- a/Yi.Bbs.Vue3/src/views/shop/components/ShopCard.vue
+++ b/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>