Skip to content

B
buildingAgricultureSharing-miniapp
Commit c97ac13f authored by 周俊涛（东信）'s avatar 周俊涛（东信）
Browse files
Options

完成商店首页

parent 6514e445
Hide whitespace changes
Inline Side-by-side
Showing with 413 additions and 0 deletions
pnpm-lock.yaml 0 → 100644
View file @ c97ac13f
This source diff could not be displayed because it is too large. You can view the blob instead.
src/pages.json
View file @ c97ac13f
......@@ -19,6 +19,14 @@
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/shop/index",
"style": {
"navigationBarTitleText": "商店首页",
"navigationBarBackgroundColor": "#ffffff",
"navigationStyle":""
}
},
{
"path": "pages/index/presale",
"style": {
......
src/pages/shop/commodityItem.vue 0 → 100644
View file @ c97ac13f
<template>
<div class="item">
<div class="image-wrap" :class="{ border: isPreSale }">
<img src="/src/static/shop/chicken.png" alt="" />
<div class="count-down-wrop">
距离结束:
<wd-count-down :time="6068060" />
</div>
<div class="type">预售</div>
<img src="/src/static/shop/commodityBorder.png" alt="" />
</div>
<div class="commodity-info">
<div class="name">这是产品名称</div>
<div class="wrap">
<div class="describe">描述</div>
<div class="date">预计8月31日发货</div>
</div>
<div class="price">
<span style="font-size: 22rpx">￥</span>
135
<span class="unit">/只</span>
</div>
</div>
<div class="add-shopping-cart">
<img src="/src/static/shop/add.png" alt="" />
</div>
</div>
</template>
<script setup>
const isPreSale = true;
</script>
<style lang="scss" scoped>
.item {
display: flex;
position: relative;
.image-wrap {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
position: relative;
&.border {
border: 2rpx solid #fcdbdb;
box-sizing: border-box;
border-radius: 16rpx;
}
.count-down-wrop {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
font-size: 16rpx;
color: #fa5151;
z-index: 1;
height: 24rpx;
width: 100%;
.wd-count-down {
font-size: 16rpx;
color: #fa5151;
}
}
.type {
position: absolute;
bottom: 4rpx;
right: 10rpx;
font-size: 18rpx;
color: #fff;
z-index: 1;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.commodity-info {
display: flex;
flex-direction: column;
color: #3d3d3d;
padding-bottom: 20rpx;
box-sizing: border-box;
.name {
font-size: 24rpx;
}
.wrap {
flex: 1;
}
.describe {
color: #abaaaa;
font-size: 22rpx;
}
.date {
color: #fa5151;
font-size: 22rpx;
}
.price {
color: #fa5151;
font-size: 36rpx;
span {
font-size: 22rpx;
}
.unit {
color: #3d3d3d;
}
}
}
.add-shopping-cart {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 16rpx;
right: 0;
img {
width: 52rpx;
height: 52rpx;
}
}
}
</style>
src/pages/shop/index.vue 0 → 100644
View file @ c97ac13f
<template>
<div class="page">
<div class="banner">
<img src="/static/shop/banner.png" alt="" />
</div>
<div class="commodity-wrap">
<div class="top-bar">
<div class="header">分类</div>
<div class="search">
<wd-search hide-cancel placeholder="请输入要搜索的内容" />
</div>
</div>
<div class="content">
<div class="nav">
<p
v-for="(v, i) in navList"
:key="i"
@click="acitveNav = v.id"
:class="{ active: acitveNav == v.id }"
>
{{ v.name }}
</p>
</div>
<div class="list">
<div class="list-top">
<div class="subclass">
<div v-for="v in 10" :key="v">鸡</div>
</div>
<div class="filter" @click="activeFilter = true" v-if="!activeFilter">
筛选
<img src="/static/shop/filter.png" alt="" />
</div>
<div class="sort" v-else>
<Sort>销量</Sort>
<Sort>交割</Sort>
</div>
</div>
<div class="commodity-list">
<CommodityItem v-for="v in 50" :key="v" />
</div>
</div>
</div>
</div>
<div class="shopping-cart">
<div>
<img src="/src/static/shop/shoppingCart.png" alt="" />
购物车
</div>
<img src="/src/static/shop/doubleArrow.png" alt="" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import CommodityItem from './commodityItem.vue';
import Sort from './sort.vue';
const navList = ref([
{
id: 1,
name: '鲜货家禽',
},
{
id: 2,
name: '鲜货家禽',
},
{
id: 3,
name: '鲜货家禽',
},
{
id: 4,
name: '鲜货家禽',
},
{
id: 5,
name: '鲜货家禽',
},
]);
const acitveNav = ref(1);
const activeFilter = ref(false);
</script>
<style lang="scss" scoped>
uni-page-body {
height: 100%;
}
.page {
height: 100%;
background-color: #f6f6f6;
padding: 20rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.banner {
width: 710rpx;
height: 236rpx;
margin-bottom: 20rpx;
img {
width: 100%;
height: 100%;
}
}
.commodity-wrap {
height: 40rpx;
flex-grow: 1;
background-color: #fff;
border-radius: 16rpx 16rpx 0rpx 0rpx;
display: flex;
flex-direction: column;
padding-bottom: 100rpx;
.top-bar {
display: flex;
height: 88rpx;
border-bottom: 2rpx solid #f6f6f6;
.header {
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: 500;
line-height: 88rpx;
color: #3d3d3d;
width: 180rpx;
border-right: 2rpx solid #f6f6f6;
text-align: center;
}
.search {
flex: 1;
padding: 16rpx 36rpx;
.wd-search {
padding: 0;
}
}
}
.content {
display: flex;
flex: 1;
.nav {
width: 180rpx;
border-right: 2rpx solid #f6f6f6;
background-color: #f1f1f1;
p {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #abaaaa;
&.active {
background-color: #fff;
color: #3d3d3d;
}
}
}
.list {
flex: 1;
color: #3d3d3d;
display: flex;
flex-direction: column;
.list-top {
display: flex;
padding: 24rpx 0;
box-sizing: border-box;
.subclass {
display: flex;
width: 40rpx;
padding: 0 20rpx;
flex-grow: 1;
gap: 64rpx;
overflow-x: scroll;
font-size: 24rpx;
}
.filter {
width: 78rpx;
font-size: 22rpx;
padding: 0 4rpx;
display: flex;
align-items: center;
justify-content: center;
img {
height: 19rpx;
width: 16rpx;
}
}
.sort {
width: 194rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
box-sizing: border-box;
}
}
.commodity-list {
padding: 0 20rpx;
overflow-y: scroll;
height: 200rpx;
flex-grow: 1;
.item {
margin-bottom: 20rpx;
}
}
}
}
}
.shopping-cart {
position: fixed;
bottom: 10rpx;
background-color: #fff;
right: 0;
width: 730rpx;
height: 98rpx;
border-radius: 16rpx 0rpx 0rpx 0rpx;
display: flex;
justify-content: flex-end;
align-items: center;
& > img {
width: 24rpx;
height: 20rpx;
margin-right: 70rpx;
}
div {
margin-right: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #3d3d3d;
img {
margin-bottom: 10rpx;
width: 40rpx;
height: 38rpx;
}
}
}
</style>
src/pages/shop/sort.vue 0 → 100644
View file @ c97ac13f
<template>
<div class="sort-wrap" @click="test">
<slot name="default"></slot>
<div class="arrow" :class="{ rotate: isHighToLow }">
<img src="/src/static/shop/arrowGreen.png" alt="" />
<img src="/src/static/shop/arrow.png" alt="" />
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const isHighToLow = ref(false);
const test = () => {
isHighToLow.value = !isHighToLow.value;
};
</script>
<style lang="scss" scoped>
.sort-wrap {
display: flex;
font-size: 22rpx;
color: #343434;
.arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rpx;
margin-left: 4rpx;
img {
width: 10.5rpx;
height: 6rpx;
}
&.rotate {
transform: rotateZ(180deg);
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment