xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

商品子页面完善

Browse Source
This commit is contained in:
陈淳
2022-10-25 09:47:30 +08:00
parent c29aeeee41
commit ac70fc37f6
11 changed files with 208 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
Yi.Vue3.x.Vant/src/view/shop/shopDetails.vue
View File

@@ -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>>

81
Yi.Vue3.x.Vant/src/view/shop/shopIndex.vue
View File

@@ -1,23 +1,68 @@
<template>
这里是商城主页
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
<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>
<van-grid :column-num="4">
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>
<div class="head-div">
<van-swipe
height="100"
class="my-swipe"
:autoplay="3000"
indicator-color="white"
>
<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 {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
background-color: #39a9ed;
}
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
line-height: 150px;
text-align: center;
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>

6
Yi.Vue3.x.Vant/src/view/shop/shopSearch.vue
View File

@@ -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>