Skip to content

B
buildingAgricultureSharing-miniapp
Commit 3e309efa authored by 张娇（东信）'s avatar 张娇（东信）
Browse files
Options

筑农严选页面实现

parent 6d1d8e81
Show whitespace changes
Inline Side-by-side
Showing with 420 additions and 23 deletions
src/components/index/OtherSearch.vue 0 → 100644
View file @ 3e309efa
<template>
<view class="search">
<wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
<slot></slot>
<view class="searchBox">
<image
class="magnifyingGlass"
src="../../static/assets/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input
type="text"
:value="test"
class="text"
placeholder="请输入要搜索的内容"
placeholder-style="font-size:16rpx;"
/>
</view>
</view>
</template>
<script setup>
// 返回上一级
function back() {
xma.navigateBack({
delta: 1,
});
}
</script>
<style lang="scss">
.search {
width: 710rpx;
height: 80rpx;
// background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8;
margin: 0 auto;
margin-top: 44rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
padding-top: 75rpx;
box-sizing: border-box;
.arrow {
width: 15rpx;
height: 24rpx;
}
.icon {
font-size: 28rpx;
}
.searchBox {
opacity: 1;
width: 256rpx;
height: 56rpx;
background: #f4f4f4;
border-radius: 28rpx 28rpx 28rpx 28rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
margin-left: 20rpx;
.magnifyingGlass {
width: 26rpx;
height: 26rpx;
}
.text {
margin-left: 10rpx;
font-size: 24rpx;
}
}
}
</style>
src/components/index/Search.vue
View file @ 3e309efa
<template>
<view class="search">
<img class="icon" src="/static/assets/return.png" />
<img class="icon" src="/static/assets/return.png" @tap="back" />
<slot></slot>
<view class="searchBox">
<image
......@@ -8,14 +8,24 @@
src="../../static/preSale/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input type="text" :value="value" class="text" placeholder="请输入要搜索的内容" />
<input
type="text"
:value="value"
class="text"
placeholder="请输入要搜索的内容"
placeholder-style="font-size:16rpx;"
/>
</view>
</view>
</template>
<script setup>
// 返回上一级
const back = () => {};
function back() {
xma.navigateBack({
delta: 1,
});
}
</script>
<style lang="scss">
......
src/pages.json
View file @ 3e309efa
......@@ -11,6 +11,19 @@
"style": {
"navigationBarTitleText": "小程序平台"
}
},
{
"path": "pages/index/building",
"style": {
"navigationBarTitleText": "筑农严选",
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path": "pages/index/presale",
"style": {
"navigationBarTitleText": "预售"
}
}
],
"globalStyle": {
......
src/pages/index/building.vue 0 → 100644
View file @ 3e309efa
<template>
<view class="container">
<!-- 顶部搜索框-->
<view class="top">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
</view>
<!-- 轮播图-->
<view class="nav">
<wd-swiper
class="main-img"
:list="swiperList"
autoplay
v-model:current="current"
@click="handleClick"
@change="onChange"
height="188"
></wd-swiper>
<view class="nav-img">
<img
class="culture"
src="/static/assets/culture.png"
style="width: 366rpx; height: 362rpx"
/>
<view class="right-img">
<img
class="delicacy"
src="/static/assets/delicacy.png"
style="height: 176rpx; margin-left: 8rpx"
/>
<img
class="fresh"
src="/static/assets/fresh.png"
style="height: 176rpx; margin-left: 8rpx"
/>
</view>
</view>
</view>
<!-- 好货热卖-->
<view class="hot-sale">
<view class="top-title">
<text class="left-title">好货热卖</text>
<text class="right-title">更多</text>
</view>
<wd-icon
name="arrow-right"
size="25rpx"
color="#ABAAAA"
style="position: relative; float: right; top: -42rpx"
></wd-icon>
<img class="rice" src="/static/assets/rice.png" style="width: 670rpx; height: 236rpx" />
<img
class="potato"
src="/static/assets/potato.png"
style="width: 325px; height: 236rpx; margin-left: 10px; margin-top: -10px"
/>
</view>
<!-- tabs-->
<scroll-view class="tabs" scroll-x="true">
<text
@tap="choice(index, item.categoryId)"
v-for="(item, index) in tabsData"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.text }}
</text>
</scroll-view>
<!-- 列表-->
<view class="tabs-list">
<img
class="fruit-img"
src="/static/assets/fruit4.png"
style="width: 670rpx; height: 236rpx"
/>
<view class="sort-list">
<view class="sort-img" v-for="(item, index) in detailList" :key="index">
<img :src="item.img" style="width: 330rpx; height: 330rpx" />
<view class="detail-title">{{ item.text }}</view>
<view class="price-page">
<text class="price">￥{{ item.price }}</text>
</view>
<img class="presale" src="/static/assets/car.png" style="width: 40rpx; height: 40rpx" />
</view>
</view>
</view>
</view>
</template>
<script setup>
import OtherSearch from '../../components/index/OtherSearch.vue';
const current = ref(0);
const light = ref(0);
// 轮播图
const swiperList = ref([
'../../static/assets/village.png',
'../../static/assets/village.png',
'../../static/assets/village.png',
]);
// 分类列表数据
const tabsData = ref([
{ img: '/static/assets/mainPicture.png', text: '水果生鲜' },
{ img: '/static/assets/presale.png', text: '米面粮油' },
{ img: '/static/assets/mainPicture.png', text: '农家干货' },
{ img: '/static/assets/mainPicture.png', text: '鲜货预售' },
{ img: '/static/assets/mainPicture.png', text: '水果生鲜' },
{ img: '/static/assets/mainPicture.png', text: '米面粮油' },
{ img: '/static/assets/mainPicture.png', text: '农家干货' },
{ img: '/static/assets/mainPicture.png', text: '鲜货预售' },
]);
const detailList = ref([
{ img: '/static/assets/fruit.png', price: '2555', text: '这是草莓这是草莓' },
{ img: '/static/assets/fruit1.png', price: '2555', text: '这是草莓这是草莓' },
{ img: '/static/assets/fruit2.png', price: '2555', text: '麻辣鱼豆腐' },
{ img: '/static/assets/fruit3.png', price: '2555', text: '麻辣鱼豆腐' },
]);
const choice = (index) => {
light.value = index;
};
function handleClick(e) {
console.log(e);
}
function onChange(e) {
console.log(e);
}
</script>
<style lang="scss" scoped>
page {
background: #f3f3f3;
}
.container {
position: relative;
left: 0rpx;
top: -45rpx;
opacity: 1;
}
.top {
width: 750rpx;
height: 128rpx;
background: #ffffff;
}
.nav {
width: 710rpx;
margin-left: 18rpx;
margin-top: 15rpx;
}
.nav-img {
width: 710rpx;
display: flex;
position: relative;
top: 12rpx;
}
.hot-sale {
width: 710rpx;
height: 266px;
border-radius: 8px;
background: #ffffff;
margin: 20rpx;
}
.top-title {
top: 5px;
position: relative;
margin: 25rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.left-title {
font-family: Source Han Sans;
font-size: 15px;
font-weight: bold;
line-height: 15px;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #3d3d3d;
}
.right-title {
font-family: Source Han Sans;
font-size: 9px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
font-variation-settings: 'opsz' auto;
font-feature-settings: 'kern' on;
color: #abaaaa;
}
.tabs {
white-space: nowrap;
height: 60rpx;
.text {
font-size: 24rpx;
color: #d8d8d8;
margin: 0 20rpx;
font-weight: bold;
display: inline-block;
}
.text:nth-child(1) {
margin-left: 40rpx;
}
.light {
background: #2fb641;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
position: relative;
&::after {
content: '';
width: 20rpx;
height: 12rpx;
background: url('../../static/assets/selected.png') no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translate(-50%);
}
}
}
.tabs-list {
margin-left: 10px;
width: 712rpx;
height: 1172rpx;
border-radius: 8px;
background: #ffffff;
}
.fruit-img {
margin-left: 10px;
margin-top: 10px;
}
.son-img {
display: flex;
align-content: space-between;
flex-wrap: wrap;
}
.row {
display: flex;
flex-basis: 100%;
justify-content: space-between;
}
.sort-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.sort-img {
width: 330rpx;
height: 330rpx;
margin-bottom: 80rpx;
}
.detail-title {
font-family: Source Han Sans;
font-size: 28rpx;
font-weight: 500;
line-height: 28rpx;
letter-spacing: 0em;
margin-left: 48rpx;
margin-top: -20rpx;
color: #3d3d3d;
width: 190rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.price-page {
width: 96rpx;
height: 28rpx;
margin-top: 20rpx;
font-size: 24rpx;
font-weight: 500;
color: #abaaaa;
margin-left: 40rpx;
}
.price {
font-size: 24rpx;
font-weight: 500;
line-height: 28rpx;
color: #fa5151;
}
.presale {
border-radius: 2px;
font-size: 16rpx;
line-height: 16rpx;
text-align: center;
line-height: 24rpx;
margin-left: 240rpx;
margin-top: -15px;
display: block;
}
</style>
src/pages/index/index.vue
View file @ 3e309efa
......@@ -9,25 +9,18 @@
</view>
<view class="sort">
<view style="display: flex; flex-direction: row">
<view class="borderClass">
<img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">筑农严选</view>
<view
class="borderClass"
@tap="toBuilding"
v-for="(item, index) in sortList"
:key="index"
>
<img :src="item.img" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">{{ item.text }}</view>
</view>
<view class="borderClass">
<img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">认养农业</view>
</view>
<view class="borderClass">
<img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">乡村旅居</view>
</view>
<view class="borderClass">
<img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
<view class="sort-text">特色农庄</view>
</view>
</view>
</view>
<view class="product-page" @tap="goPreSale()" v-for="(item, index) in list" :key="index">
<view class="product-page" @tap="toPresale" v-for="(item, index) in list" :key="index">
<view>
<view class="page-title">{{ item.text }}</view>
<img :src="item.img" class="main-img" />
......@@ -60,15 +53,29 @@ const list = ref([
{ img: '/static/assets/mainPicture.png', text: '特色农庄' },
]);
const detailList = ref([
{ img: '/static/assets/detailedMapOne.png', price: '25', text: '干辣椒炒肉' },
{ img: '/static/assets/detailedMapOne.png', price: '25', text: '干辣椒炒肉干辣椒炒肉' },
{ img: '/static/assets/detailedMapTwo.png', price: '25', text: '贵阳辣子鸡' },
{ img: '/static/assets/detailedMapThree.png', price: '25', text: '麻辣鱼豆腐' },
]);
const goPreSale = () => {
const sortList = ref([
{ img: '/static/assets/buildingAgriculture.png', price: '25', text: '筑农严选' },
{ img: '/static/assets/adoption.png', price: '25', text: '认养农业' },
{ img: '/static/assets/rural.png', price: '25', text: '乡村旅居' },
{ img: '/static/assets/buildingAgriculture.png', price: '25', text: '特色农庄' },
]);
function toBuilding() {
// TODO: 跳转到筑农严选
xma.navigateTo({
url: '/pages/index/preSale',
url: '/pages/index/building',
});
};
}
function toPresale() {
// TODO: 跳转到预售
xma.navigateTo({
url: '/pages/index/presale',
});
}
const goBack = () => {};
</script>
<style lang="scss">
......
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