优化代码
This commit is contained in:
zpc
parent
a66328a125
commit
ca70540ff5
|
|
@ -1,43 +1,110 @@
|
|||
<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 class="goods-item" @click="onItemClick">
|
||||
<view class="goods-image">
|
||||
<image v-if="goodsItem.imgUrl" :src="goodsItem.imgUrl" class="image" mode="aspectFill" />
|
||||
</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="goods-title myZt-500w">{{ goodsItem.title }}</text>
|
||||
|
||||
<text class="myZt-300w"
|
||||
style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
|
||||
<text class="goods-status myZt-300w">现货发售中</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 class="goods-price">
|
||||
<text class="price-value myZt-500w">￥{{ goodsItem.price }}</text>
|
||||
<text class="price-unit myZt-500w">/ 包</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
/**
|
||||
* 商品项组件
|
||||
*/
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
// 组件属性
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 商品信息
|
||||
*/
|
||||
goodsItem: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: '',
|
||||
title: '',
|
||||
imgUrl: '',
|
||||
price: '0',
|
||||
type: ''
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 事件
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
/**
|
||||
* 点击商品项
|
||||
*/
|
||||
const onItemClick = () => {
|
||||
emit('click', props.goodsItem.id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.goods-item {
|
||||
height: 490.28rpx;
|
||||
background-color: #FEF6D6;
|
||||
border: 3rpx solid #F9D051;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.goods-image {
|
||||
width: 100%;
|
||||
height: 320.83rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
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;
|
||||
}
|
||||
|
||||
.goods-status {
|
||||
font-size: 19.44rpx;
|
||||
color: #FF6A6A;
|
||||
margin-left: 24.31rpx;
|
||||
}
|
||||
|
||||
.goods-price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 20.31rpx;
|
||||
|
||||
.price-value {
|
||||
font-size: 29.17rpx;
|
||||
color: #87644E;
|
||||
}
|
||||
|
||||
.price-unit {
|
||||
font-size: 19.44rpx;
|
||||
color: #87644E;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +1,24 @@
|
|||
<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="home-notice">
|
||||
<image src="@@:static/ic_notice.png" class="notice-icon" 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>
|
||||
<uni-notice-bar v-if="noticeInfo" class="news-text-t" scrollable single :text="noticeInfo" :speed="8"
|
||||
background-color="transparent" color="#6B5E4B" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue';
|
||||
/**
|
||||
* 首页公告组件
|
||||
*/
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
// 组件属性
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 公告内容
|
||||
*/
|
||||
noticeInfo: {
|
||||
type: String,
|
||||
default: ''
|
||||
|
|
@ -22,18 +26,38 @@ const props = defineProps({
|
|||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.news-text {
|
||||
width: 600rpx;
|
||||
<style lang="scss" scoped>
|
||||
.home-notice {
|
||||
width: 100%;
|
||||
height: 57.64rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 5rpx solid #F5D677;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 33.33rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 18rpx;
|
||||
padding-top: 20rpx;
|
||||
|
||||
::v-deep.uni-noticebar__content-text {
|
||||
.notice-icon {
|
||||
width: 23.61rpx;
|
||||
height: 22.92rpx;
|
||||
margin-left: 24.31rpx;
|
||||
}
|
||||
|
||||
.news-text {
|
||||
width: 600rpx;
|
||||
height: 57.64rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 18rpx;
|
||||
padding-top: 20rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.news-text-t {
|
||||
font-size: 22.22rpx;
|
||||
font-family: "JiangChengYuanTi-300W", sans-serif;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -1,34 +1,77 @@
|
|||
<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 v-if="recList && recList.length > 0" class="home-recommend">
|
||||
<view
|
||||
v-for="(item, index) in recList"
|
||||
:key="index"
|
||||
class="recommend-item"
|
||||
@click="handleItemClick(index)"
|
||||
>
|
||||
<image :src="item.imageUrl" class="recommend-image" />
|
||||
<text class="recommend-title myZt-500w">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, defineEmits } from 'vue';
|
||||
/**
|
||||
* 首页推荐位组件
|
||||
*/
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
|
||||
// 组件属性
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 推荐列表
|
||||
*/
|
||||
recList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// 事件
|
||||
const emit = defineEmits(['itemClick']);
|
||||
|
||||
/**
|
||||
* 点击推荐项
|
||||
* @param {Number} index 点击的索引
|
||||
*/
|
||||
const handleItemClick = (index) => {
|
||||
emit('itemClick', index);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.home-recommend {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 29.86rpx;
|
||||
|
||||
.recommend-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.recommend-image {
|
||||
width: 159.72rpx;
|
||||
height: 159.72rpx;
|
||||
background-color: #FDF4D5;
|
||||
border-radius: 40rpx;
|
||||
}
|
||||
|
||||
.recommend-title {
|
||||
margin-top: 13.19rpx;
|
||||
font-size: 22.22rpx;
|
||||
color: #685952;
|
||||
width: 159.72rpx;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,15 +1,52 @@
|
|||
<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 class="home-search">
|
||||
<view class="search-box">
|
||||
<image src="@@:static/ic_search.png" class="search-icon" mode=""></image>
|
||||
<input type="text" placeholder="" class="search-input" disabled @click="onSearchClick" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
/**
|
||||
* 首页搜索组件
|
||||
*/
|
||||
import { defineEmits } from 'vue';
|
||||
|
||||
// 事件
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
// 点击搜索框
|
||||
const onSearchClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.home-search {
|
||||
width: 100%;
|
||||
margin-top: 96.53rpx;
|
||||
|
||||
.search-box {
|
||||
width: 450.56rpx;
|
||||
height: 71.53rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 5rpx solid #F5D677;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.search-icon {
|
||||
width: 28.47rpx;
|
||||
height: 28.47rpx;
|
||||
margin-left: 25rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,26 +1,71 @@
|
|||
<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>
|
||||
<view class="home-swiper">
|
||||
<swiper
|
||||
v-if="advertList && advertList.length > 0"
|
||||
:indicator-dots="false"
|
||||
:autoplay="true"
|
||||
:interval="interval"
|
||||
:duration="duration"
|
||||
:circular="true"
|
||||
class="swiper-container"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in advertList" :key="index" class="swiper-item">
|
||||
<image :src="item.imageUrl" class="swiper-image" mode="aspectFill"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue';
|
||||
/**
|
||||
* 首页轮播图组件
|
||||
*/
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
// 组件属性
|
||||
const props = defineProps({
|
||||
/**
|
||||
* 广告列表
|
||||
*/
|
||||
advertList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/**
|
||||
* 轮播间隔时间(ms)
|
||||
*/
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
/**
|
||||
* 滑动动画时长(ms)
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.home-swiper {
|
||||
width: 100%;
|
||||
margin-top: 30.56rpx;
|
||||
|
||||
.swiper-container {
|
||||
height: 300rpx;
|
||||
|
||||
.swiper-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5D677;
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +1,29 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<!-- 搜索 -->
|
||||
<home-search style="width: 100%;" />
|
||||
<!-- 公告 -->
|
||||
<home-notice :notice-info="homeData?.noticeInfo" />
|
||||
<!-- 轮播图 -->
|
||||
<home-swiper :advert-list="homeData?.advertList" style="width: 100%;" />
|
||||
<!-- 推荐位 -->
|
||||
<home-recommend :rec-list="homeData?.recList" @item-click="toDetails" style="width: 100%;" />
|
||||
|
||||
<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">
|
||||
<!-- 搜索 -->
|
||||
<home-search style="width: 100%;" />
|
||||
<!-- 公告 -->
|
||||
<home-notice :notice-info="homeData?.noticeInfo" />
|
||||
<!-- 轮播图 -->
|
||||
<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;">
|
||||
<view class="" v-for="(item, index) in homeData.categories" :key="index" @click="clickTab(index)"
|
||||
:style="setTabBg(index)"
|
||||
style="padding: 0 16.67rpx 6rpx 16.67rpx ; margin-right: 26.39rpx; border-radius: 50rpx;">
|
||||
<text class="myZt-500w" style=" font-size: 23.61rpx;">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="grid-container">
|
||||
<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
|
||||
<!-- tab -->
|
||||
<view class="" style="width: 100%; display: flex; flex-direction: row; margin-top: 32.64rpx;">
|
||||
<view class="" v-for="(item, index) in homeData.categories" :key="index" @click="clickTab(index)"
|
||||
:style="setTabBg(index)"
|
||||
style="padding: 0 16.67rpx 6rpx 16.67rpx ; margin-right: 26.39rpx; border-radius: 50rpx;">
|
||||
<text class="myZt-500w" style=" font-size: 23.61rpx;">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="grid-container">
|
||||
<home-goods-item v-for="(item, index) in goodsLsit" :key="index" :goods-item="item" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -44,6 +41,7 @@ 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(() => {
|
||||
|
||||
});
|
||||
|
|
@ -155,7 +153,7 @@ const toDetails = (id) => {
|
|||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 693.06rpx;
|
||||
width: 94%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
<script setup>
|
||||
import { appInit } from "@/common/system/system";
|
||||
|
||||
onLoad(async () => {
|
||||
// 记录开始时间
|
||||
const startTime = Date.now();
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user