shang/guyu
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

封装组件

Browse Source
This commit is contained in:
zpc 2025-07-23 22:42:07 +08:00
parent 160ecdd483
commit a66328a125
8 changed files with 186 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components.d.ts vendored
View File

@ -8,7 +8,20 @@ export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
HomeGoodsItem: typeof import('./components/guyu-home-container/home-goods-item.vue')['default']
HomeNotice: typeof import('./components/guyu-home-container/home-notice.vue')['default']
HomeRecommend: typeof import('./components/guyu-home-container/home-recommend.vue')['default']
HomeSearch: typeof import('./components/guyu-home-container/home-search.vue')['default']
HomeSwiper: typeof import('./components/guyu-home-container/home-swiper.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
ZPaging: typeof import('./components/z-paging/z-paging.vue')['default']
ZPagingCell: typeof import('./components/z-paging-cell/z-paging-cell.vue')['default']
ZPagingEmptyView: typeof import('./components/z-paging-empty-view/z-paging-empty-view.vue')['default']
ZPagingLoadMore: typeof import('./components/z-paging/components/z-paging-load-more.vue')['default']
ZPagingRefresh: typeof import('./components/z-paging/components/z-paging-refresh.vue')['default']
ZPagingSwiper: typeof import('./components/z-paging-swiper/z-paging-swiper.vue')['default']
ZPagingSwiperItem: typeof import('./components/z-paging-swiper-item/z-paging-swiper-item.vue')['default']
ZTabs: typeof import('./components/z-tabs/z-tabs.vue')['default']
}
}

43
components/guyu-home-container/home-goods-item.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<view class=""
style="height: 490.28rpx; background-color: #FEF6D6; border: 3rpx solid #F9D051; border-radius: 40rpx;display: flex; flex-direction: column;">
<view class=""
style="width: 100%; height: 320.83rpx; background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0; ">
<!-- <image :src="goodsItem.imgUrl" mode=""></image> -->
</view>
<text class="myZt-500w"
style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{
goodsItem.title }}
</text>
<text class="myZt-300w"
style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
<view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
<text class="myZt-500w" style="font-size: 29.17rpx; color: #87644E;">￥{{ goodsItem.price }}</text>
<text class="myZt-500w" style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> /
包</text>
</view>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
goodsItem: {
type: Object,
required: true,
default: () => ({
title: '',
imgUrl: '',
price: '0',
})
}
});
</script>
<style lang="scss">
</style>

39
components/guyu-home-container/home-notice.vue Normal file
View File

@ -0,0 +1,39 @@
<template>
<view class=""
style="width:100%; height: 57.64rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 20rpx; margin-top: 33.33rpx; display: flex; align-items: center;">
<image src="@@:static/ic_notice.png" style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;"
mode=""></image>
<view class="news-text">
<uni-notice-bar scrollable single :style="{ width: `100%` }" :speed="8"
background-color="transparent" color="#6B5E4B" v-if="noticeInfo"
:text="noticeInfo"></uni-notice-bar>
</view>
</view>
</template>
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
noticeInfo: {
type: String,
default: ''
}
});
</script>
<style lang="scss">
.news-text {
width: 600rpx;
height: 57.64rpx;
display: flex;
align-items: center;
margin-left: 18rpx;
padding-top: 20rpx;
::v-deep.uni-noticebar__content-text {
font-size: 22.22rpx;
font-family: "JiangChengYuanTi-300W", sans-serif;
}
}
</style>

34
components/guyu-home-container/home-recommend.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<view class="" v-if="recList && recList.length > 0"
style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 29.86rpx;">
<view class="" v-for="(item, index) in recList" :key="index" @click="handleItemClick(index)"
style="display: flex; flex-direction: column; justify-content: center;">
<image :src="item.imageUrl"
style="width: 159.72rpx; height: 159.72rpx; background-color: #FDF4D5; border-radius: 40rpx;">
</image>
<text class="myZt-500w"
style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{
item.name }}</text>
</view>
</view>
</template>
<script setup>
import { ref, defineProps, defineEmits } from 'vue';
const props = defineProps({
recList: {
type: Array,
default: () => []
}
});
const emit = defineEmits(['itemClick']);
const handleItemClick = (index) => {
emit('itemClick', index);
};
</script>
<style lang="scss">
</style>

15
components/guyu-home-container/home-search.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<view class="" style="width: 100%; margin-top: 96.53rpx;">
<view class=""
style="width: 450.56rpx; height: 71.53rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 50rpx; display: flex; align-items: center;">
<image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;" mode="">
</image>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
</script>
<style lang="scss" scoped></style>

26
components/guyu-home-container/home-swiper.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<view class="" style="width: 100%; margin-top: 30.56rpx; ">
<swiper v-if="advertList && advertList.length > 0" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
:circular="true" style="height: 300rpx;">
<swiper-item v-for="(item, index) in advertList" :key="index">
<view class="" style="background-color: #F5D677; width: 100%; height: 300rpx;">
<image :src="item.imageUrl" style="width: 100%; height: 300rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
advertList: {
type: Array,
default: () => []
}
});
</script>
<style lang="scss">
</style>

166
pages/home/home-page.vue
View File

@ -1,58 +1,16 @@
<template>
<view class="content" style="background-color: #FFFDF6;">
<image src="@@:static/bg.png" style="width: 620.83rpx; height: 100%; position: absolute;" mode=""></image>
<view class="content" style="position: absolute;">
<!-- <image src="@@:static/bg.png" style="width: 620.83rpx; height: 100%; position: absolute;" mode=""></image> -->
<view class="content">
<!-- 搜索 -->
<view class="" style="width: 100%; margin-top: 96.53rpx;">
<view class=""
style="width: 450.56rpx; height: 71.53rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 50rpx; display: flex; align-items: center;">
<image src="@@:static/ic_search.png" style="width: 28.47rpx; height: 28.47rpx; margin-left: 25rpx;"
mode=""></image>
</view>
</view>
<home-search style="width: 100%;" />
<!-- 公告 -->
<view class=""
style="width:100%; height: 57.64rpx; background-color: #FFFFFF; border: 5rpx solid #F5D677; border-radius: 20rpx; margin-top: 33.33rpx; display: flex; align-items: center;">
<image src="@@:static/ic_notice.png" style="width: 23.61rpx; height: 22.92rpx; margin-left: 24.31rpx;"
mode=""></image>
<view class="news-text">
<uni-notice-bar scrollable single :style="{ width: `100%` }" :speed="8"
background-color="transparent" color="#6B5E4B" v-if="homeData"
:text="homeData.noticeInfo"></uni-notice-bar>
</view>
</view>
<home-notice :notice-info="homeData?.noticeInfo" />
<!-- 轮播图 -->
<view class="" style="width: 100%; margin-top: 30.56rpx; ">
<swiper v-if="homeData" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
:circular="true">
<swiper-item v-for="(item, index) in homeData.advertList" :key="index">
<view class="" style="background-color: #F5D677; width: 100%; height: 300rpx;">
<image :src="item.imageUrl" style="width: 100%;height: 300rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- 固定四个 -->
<view class="" v-if="homeData"
style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 29.86rpx;">
<view class="" v-for="(item, index) in homeData.recList" :key="index"
@click="toDetails(dataList[index].id)"
style="display: flex; flex-direction: column; justify-content: center;">
<image :src="item.imageUrl"
style="width: 159.72rpx; height: 159.72rpx; background-color: #FDF4D5; border-radius: 40rpx;">
</image>
<text class="myZt-500w"
style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{
item.name }}</text>
</view>
</view>
<home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
<!-- 推荐位 -->
<home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
<!-- tab -->
<view class="" style="width: 100%; display: flex; flex-direction: row; margin-top: 32.64rpx;">
@ -63,46 +21,11 @@
</view>
</view>
<!-- 商品列表 -->
<view class="grid-container">
<view class="" v-for="(item, index) in goodsLsit" :key="index"
style="height: 490.28rpx; background-color: #FEF6D6; border: 3rpx solid #F9D051; border-radius: 40rpx;display: flex; flex-direction: column;">
<view class=""
style="width: 100%; height: 320.83rpx; background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0; ">
<!-- <image :src="item.imgUrl" mode=""></image> -->
</view>
<text class="myZt-500w"
style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{
item.title }}
</text>
<text class="myZt-300w"
style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
<view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
<text class="myZt-500w" style="font-size: 29.17rpx; color: #87644E;">￥{{ item.price }}</text>
<text class="myZt-500w" style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> /
包</text>
</view>
</view>
<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
</view>
</view>
</view>
</template>
@ -115,6 +38,12 @@ import {
preloadHomeData,
refreshHomeData
} from '@/common/server/home';
import HomeSearch from '@/components/guyu-home-container/home-search.vue';
import HomeNotice from '@/components/guyu-home-container/home-notice.vue';
import HomeSwiper from '@/components/guyu-home-container/home-swiper.vue';
import HomeRecommend from '@/components/guyu-home-container/home-recommend.vue';
import HomeGoodsItem from '@/components/guyu-home-container/home-goods-item.vue';
onLoad(() => {
});
@ -123,57 +52,7 @@ onMounted(() => {
if (!homeData.value) preloadHomeData();
});
const currendIndex = ref(0);
const swiperList = ref([1, 2, 3, 4]);
const dataList = reactive([
{
id: 1,
title: "坂本日常",
color: "#90BB76",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#FDA6AA",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#96ABEB",
url: ""
},
{
id: 1,
title: "坂本日常",
color: "#F9D051",
url: ""
}
]);
const tabList = reactive([
{
id: 1,
title: "全部"
},
{
id: 1,
title: "吧唧"
},
{
id: 1,
title: "立牌"
},
{
id: 1,
title: "色纸"
},
{
id: 1,
title: "拍立得"
}
]);
const goodsLsit = reactive([
{
@ -283,21 +162,6 @@ const toDetails = (id) => {
flex-direction: column;
position: relative;
align-items: center;
}
.news-text {
width: 600rpx;
height: 57.64rpx;
display: flex;
align-items: center;
margin-left: 18rpx;
padding-top: 20rpx;
::v-deep.uni-noticebar__content-text {
font-size: 22.22rpx;
font-family: "JiangChengYuanTi-300W", sans-serif;
}
}
.grid-container {

2
vite.config.js
View File

@ -69,7 +69,7 @@ export default defineConfig({
// 自动导入组件
Components({
dirs: [
'components/guyu-container',
'components/**/*',
], // 指定组件目录
extensions: ['vue'],
dts: true, // 生成类型声明文件（可选）