商品子页面完善

Yi.Framework.Net6/Yi.Framework.ApiMicroservice/Controllers/BaseController/BaseSimpleCrudController.cs

@@ -31,7 +31,6 @@ namespace Yi.Framework.ApiMicroservice.Controllers
         /// </summary>
         /// <param name="id"></param>
         /// <returns></returns>
-        [Permission($"{nameof(T)}:get")]
         [Route("{id}")]
         [HttpGet]
         public virtual async Task<Result> GetById([FromRoute]long id)

Yi.Framework.Net6/Yi.Framework.ApiMicroservice/Controllers/Shop/SpuController.cs

@@ -36,6 +36,13 @@ namespace Yi.Framework.ApiMicroservice.Controllers
             return Result.Success().SetData(await _iSpuService.SelctPageList(eneity, page));
         }
 
+        [Route("{id}")]
+        [HttpGet]
+        public override async Task<Result> GetById([FromRoute] long id)
+        {
+            return Result.Success().SetData(await _repository._DbQueryable.Includes(u=>u.Skus).SingleAsync(u=>u.Id.Equals(id)));
+        }
+
 
 
 

Yi.Framework.Net6/Yi.Framework.ApiMicroservice/Controllers/System/AccountController.cs

@@ -122,7 +122,6 @@ namespace Yi.Framework.ApiMicroservice.Controllers
         /// </summary>
         /// <returns></returns>
         [HttpGet]
-        //[Authorize]
         public async Task<Result> GetUserAllInfo()
         {
             //通过鉴权jwt获取到用户的id

Yi.Framework.Net6/Yi.Framework.WebCore/MiddlewareExtend/ErrorHandExtension.cs

@@ -6,6 +6,7 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using Yi.Framework.Common.Enum;
 using Yi.Framework.Common.Models;
 
 namespace Yi.Framework.WebCore.MiddlewareExtend
@@ -69,8 +70,10 @@ namespace Yi.Framework.WebCore.MiddlewareExtend
             {
                 resp = Result.Error(msg);
             }
+            resp.SetCode((ResultCodeEnum)statusCode);
             var result = JsonConvert.SerializeObject(resp);
             context.Response.ContentType = "application/json;charset=utf-8";
+         
             return  context.Response.WriteAsync(result);
         }
     }

Yi.Vue3.x.Vant/components.d.ts

@@ -7,14 +7,19 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    AppCard: typeof import('./src/components/AppCard.vue')['default']
     AppCreateTime: typeof import('./src/components/AppCreateTime.vue')['default']
     AppGrid: typeof import('./src/components/AppGrid.vue')['default']
     AppUserIcon: typeof import('./src/components/AppUserIcon.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanActionBar: typeof import('vant/es')['ActionBar']
+    VanActionBarButton: typeof import('vant/es')['ActionBarButton']
+    VanActionBarIcon: typeof import('vant/es')['ActionBarIcon']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCol: typeof import('vant/es')['Col']
     VanDivider: typeof import('vant/es')['Divider']
@@ -26,6 +31,7 @@ declare module '@vue/runtime-core' {
     VanList: typeof import('vant/es')['List']
     VanLoading: typeof import('vant/es')['Loading']
     VanNavBar: typeof import('vant/es')['NavBar']
+    VanPopup: typeof import('vant/es')['Popup']
     VanPullRefresh: typeof import('vant/es')['PullRefresh']
     VanRow: typeof import('vant/es')['Row']
     VanSticky: typeof import('vant/es')['Sticky']

Yi.Vue3.x.Vant/src/api/spuApi.ts

@@ -1,18 +1,25 @@
 import myaxios from '@/utils/myaxios'
 
 export default {
-    add(data:any) {
+  add(data: any) {
-        return myaxios({
+    return myaxios({
-            url: `/spu/add`,
+      url: `/spu/add`,
-            method: 'post',
+      method: 'post',
-            data: data
+      data: data
-        })
+    })
-    },
+  },
-    pageList(data:any) {
+  pageList(data: any) {
-        return myaxios({
+    return myaxios({
-          url: '/spu/pageList',
+      url: '/spu/pageList',
-          method: 'get',
+      method: 'get',
-          params: data
+      params: data
-        })
+    })
-      }
+  },
+  getById(id: any) {
+    return myaxios({
+      url: `/spu/GetById/${id}`,
+      method: 'get',
+    })
+  },
+
 }

Yi.Vue3.x.Vant/src/components/AppCard.vue

@@ -0,0 +1,63 @@
+<template>
+
+  <div class="out-div">
+    <div class="card-div">
+     
+        <van-image
+        radius="1rem"
+  width="100%"
+  height="100%"
+  src="https://unpkg.com/@vant/assets/cat.jpeg"
+/>
+
+
+    </div>
+
+    <div class="bottom-div">
+      <div v-for="i of 10" :key="i" class="card-div-inside">
+        <van-image
+        radius="1rem"
+  width="4rem"
+  height="4rem"
+  src="https://unpkg.com/@vant/assets/cat.jpeg"
+/>
+<br>
+￥79.0
+    </div>
+    </div>
+  </div>
+</template>
+<style  scoped>
+.out-div {
+  width: 100%;
+  min-height: 10rem;
+  border-radius: 1rem;
+  background-color: #ffffff;
+}
+
+.card-div {
+  background-color: #000;
+  height: 6rem;
+  width: 100%;
+}
+.bottom-div {
+  display: flex;
+
+  justify-content: center;
+  width: 100%;
+  height: 6rem;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.card-div-inside {
+  flex: none;
+  display: block;
+
+    margin-top: 0.5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+</style>

Yi.Vue3.x.Vant/src/view/shop/shopDetails.vue

@@ -1,5 +1,44 @@
 <template>
-    这里是商品详情页
+    这里是商品详情页，当所有规格组全部选择完后，就会匹配sku列表，匹配成功才显示价格，即绑定好的sku
+
+    <div >商品名称：{{spuItem.spuName}}</div>
+   <div v-for="spec in spuItem.specsSpuAllInfo" :key="spec">规格组： {{spec.specsGroupName}}
+    <div v-for="name in spec.specsNames" :key="name">规格值： {{name}}</div>
+   
+</div>
+<hr>
+ <div v-for="sku in spuItem.skus" :key="sku"> 价格：{{sku.price}}<br>Sku：{{sku}}
+    <hr>
+</div>
+
+
 <br>
     <router-link to="/shopIndex">返回商品首页</router-link>
-</template>
+
+    <van-action-bar>
+  <van-action-bar-icon icon="chat-o" text="客服" dot />
+  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
+  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
+  <van-action-bar-button type="warning" text="加入购物车" />
+  <van-action-bar-button type="danger" text="立即购买" />
+</van-action-bar>
+</template>
+<script lang="ts" setup>
+import {ref,onMounted} from 'vue'
+import { useRouter } from 'vue-router'
+import spuApi from "@/api/spuApi";
+const router = useRouter();
+
+const spuItem=ref<any>({});
+
+  onMounted(() => {
+    const spuId=router.currentRoute.value.query.spuId;
+    // 打印
+    spuApi.getById(spuId).then((response:any)=>{
+        spuItem.value=response.data
+
+    })
+
+
+  })
+</script>>

Yi.Vue3.x.Vant/src/view/shop/shopIndex.vue

@@ -1,23 +1,68 @@
 <template>
-    这里是商城主页
+
-    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
+
-  <van-swipe-item>1</van-swipe-item>
+<div class="head-div">
-  <van-swipe-item>2</van-swipe-item>
+  <van-swipe
-  <van-swipe-item>3</van-swipe-item>
+    height="100"
-  <van-swipe-item>4</van-swipe-item>
+    class="my-swipe"
-</van-swipe>
+    :autoplay="3000"
-<van-grid :column-num="4">
+    indicator-color="white"
-  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
+  >
-</van-grid>
+    <van-swipe-item>1</van-swipe-item>
+    <van-swipe-item>2</van-swipe-item>
+    <van-swipe-item>3</van-swipe-item>
+    <van-swipe-item>4</van-swipe-item>
+  </van-swipe>
+  </div>
+
+  <van-row class="body-row">
+
+    <van-col span="24">   <van-grid :column-num="4">
+      <van-grid-item
+        v-for="value in 8"
+        :key="value"
+        icon="photo-o"
+        text="文字"
+      />
+    </van-grid> </van-col>
+    <van-col span="24">     <AppCard /></van-col>
+    <van-col span="24"></van-col>
+
+   
     <router-link to="/shopSearch">点击前往搜索</router-link>
-    <br>
+    <br />
+  </van-row>
 </template>
+<script  setup lang="ts">
+import AppCard from "@/components/AppCard.vue";
+</script>
 <style>
-  .my-swipe .van-swipe-item {
+.my-swipe .van-swipe-item {
-    color: #fff;
+  color: #fff;
-    font-size: 20px;
+  font-size: 20px;
-    line-height: 150px;
+  line-height: 150px;
-    text-align: center;
+  text-align: center;
-    background-color: #39a9ed;
+  background-color: #39a9ed;
-  }
+}
+.body-row {
+  padding: 1rem;
+  padding-top: 0.2rem;
+  background-color: #f4f4f4;
+  margin-top: 1rem;
+}
+.van-swipe {
+  /* margin-top: 10rem;
+  margin-left: 1rem;
+  margin-right: 1rem; */
+}
+.head-div
+{
+    background-color: #f4f4f4;
+    padding: 1rem;
+    padding-bottom: 0;
+}
+.van-col
+{
+  margin-bottom: 2rem;
+}
 </style>

Yi.Vue3.x.Vant/src/view/shop/shopSearch.vue

@@ -1,14 +1,16 @@
 <template>
     这里是商品搜索页
     <br>
-    <router-link to="/shopDetails">点击进入商品详情</router-link>
+   
     <br>
     <router-link to="/shopIndex">返回商品首页</router-link>
 这个是spu:
+
 <div v-for="item in spuList" :key="item.id">商品名称：{{item.spuName}}
+  <router-link :to="`/shopDetails?spuId=${item.id}`">点击进入该商品详情</router-link>
    <div v-for="spec in item.specsSpuAllInfo" :key="spec">规格组： {{spec.specsGroupName}}
     <div v-for="name in spec.specsNames" :key="name">规格值： {{name}}
-
+   
 </div>
 
 </div>