Skip to content

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

Merge branch 'master' of…

Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/buildingAgricultureSharing-miniapp
parents 3d11b112 b5120096
Hide whitespace changes
Inline Side-by-side
Showing with 340 additions and 102 deletions
src/components/index/DepartureDate.vue 0 → 100644
View file @ 7584cebb
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/components/index/OtherSearch.vue deleted 100644 → 0
View file @ 3d11b112
<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" scoped>
.search {
width: 710rpx;
height: 80rpx;
// background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8;
margin: 0 auto;
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: 400rpx;
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/ScenicSpots.vue 0 → 100644
View file @ 7584cebb
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/components/index/Screen.vue 0 → 100644
View file @ 7584cebb
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/components/index/Search.vue
View file @ 7584cebb
<template>
<view class="search">
<img class="icon" src="/static/assets/return.png" @tap="back" />
<img class="icon" :src="iconSrc" @tap="back" />
<!-- <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>-->
<slot></slot>
<view class="searchBox">
<image
class="magnifyingGlass"
src="../../static/preSale/magnifyingGlass.png"
src="../../static/assets/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix"
/>
<input
type="text"
:value="value"
:value="test"
class="text"
placeholder="请输入要搜索的内容"
:placeholder="placeholderText"
placeholder-style="font-size:16rpx;"
/>
</view>
......@@ -20,6 +21,17 @@
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
iconSrc: {
type: String,
default: '',
},
placeholderText: {
type: String,
default: '',
},
});
// 返回上一级
function back() {
xma.navigateBack({
......@@ -33,33 +45,29 @@ function back() {
position: absolute;
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 {
width: 40rpx;
height: 40rpx;
margin-left: 40rpx;
}
.searchBox {
opacity: 1;
width: 256rpx;
width: 400rpx;
height: 56rpx;
background: #ffffff;
background: #f4f4f4;
border-radius: 28rpx 28rpx 28rpx 28rpx;
display: flex;
align-items: center;
padding-left: 20rpx;
margin-left: 167rpx;
margin-left: 20rpx;
.magnifyingGlass {
width: 26rpx;
height: 26rpx;
......
src/components/index/Sort.vue 0 → 100644
View file @ 7584cebb
<template>
<view class="sort" :style="{ width: width }">
<ul class="ul">
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
>
{{ item }}
</li>
</ul>
</view>
</template>
<script setup>
import { defineProps } from 'vue';
const items = reactive(['智能排序', '距离优先', '好评优先', '销量优先', '低价优先', '低价优先']);
const selectedItem = ref(null);
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
};
</script>
<style lang="scss" scoped>
.sort {
position: absolute;
top: 100%;
// width: 100%;
// min-height: 212rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
margin: 0 auto;
z-index: 99;
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
.ul {
padding-left: 60rpx;
li {
list-style-type: none;
font-size: 22rpx;
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
</style>
src/pages/RuralTravel/RuralTravel.vue
View file @ 7584cebb
<template>
<view>
<view class="container">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
<view class="bac-img">
<img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
</view>
......@@ -91,6 +91,10 @@
></wd-icon>
</view>
</view>
<Sort v-show="rotate" />
<DepartureDate v-show="rotate2" />
<ScenicSpots v-show="rotate3" />
<Screen v-show="rotate4" />
</view>
<view class="list-card">
<view
......@@ -130,7 +134,12 @@
</template>
<script setup lang="ts">
import OtherSearch from '../../components/index/OtherSearch.vue';
import Search from '../../components/index/Search.vue';
import Sort from '../../components/index/Sort.vue';
import DepartureDate from '../../components/index/DepartureDate.vue';
import ScenicSpots from '../../components/index/ScenicSpots.vue';
import Screen from '../../components/index/Screen.vue';
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
......
src/pages/detail/detail.vue
View file @ 7584cebb
......@@ -2,7 +2,14 @@
<view class="container">
<!-- 顶部搜索框-->
<view class="top">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<view class="top">
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/blackLeft.png"
placeholderText="请输入要搜索的内容"
></Search>
</view>
</view>
<!-- 图片-->
<view class="nav">
......@@ -60,9 +67,11 @@
<img src="/static/detail/img8.png" style="width: 40rpx; height: 40rpx" />
<view class="sort-text">客服</view>
</view>
<view class="borderClass">
<img src="/static/detail/img6.png" style="width: 40rpx; height: 40rpx" />
<view class="sort-text" @tap="toCart">购物车</view>
<view class="borderClass" @tap="toCart">
<wd-badge modelValue="4">
<img src="/static/detail/car.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
<view class="sort-text">购物车</view>
</view>
</view>
<!-- <view class="sort">-->
......@@ -82,7 +91,7 @@
</template>
<script setup>
import OtherSearch from '../../components/index/OtherSearch.vue';
import Search from '../../components/index/Search.vue';
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
......@@ -348,4 +357,8 @@ function toCart() {
margin-top: -90rpx;
margin-left: 400rpx;
}
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/index/building.vue
View file @ 7584cebb
......@@ -2,18 +2,24 @@
<view class="container">
<!-- 顶部搜索框-->
<view class="top">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/blackLeft.png"
placeholderText="请输入要搜索的内容"
></Search>
</view>
<!-- 轮播图-->
<view class="nav">
<wd-swiper
class="main-img"
customImageClass="main-img"
:list="swiperList"
autoplay
v-model:current="current"
@click="handleClick"
@change="onChange"
height="188"
mode="aspectFit"
></wd-swiper>
<view class="nav-img">
<img
......@@ -92,14 +98,16 @@
</view>
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating">
<img class="cart" @tap="toCart" src="/static/presale/cart.png" />
<view class="cart-floating" @tap="toCart">
<wd-badge modelValue="4">
<img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
</view>
</view>
</template>
<script setup>
import OtherSearch from '../../components/index/OtherSearch.vue';
import Search from '../../components/index/Search.vue';
const current = ref(0);
const light = ref(0);
// 轮播图
......@@ -346,4 +354,15 @@ page {
width: 48rpx;
height: 46rpx;
}
.shop-car {
margin-left: 20rpx;
margin-top: 20rpx;
}
::v-deep .wd-badge__content.is-fixed {
margin-top: 20rpx;
}
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/index/index.vue
View file @ 7584cebb
<template>
<view>
<view class="container">
<Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/return.png"
placeholderText="请输入要搜索的内容"
></Search>
<view>
<img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
<img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
......@@ -303,4 +308,9 @@ page {
margin-top: -23rpx;
color: #fa5151;
}
::v-deep .icon {
width: 40rpx;
height: 40rpx;
margin-left: 40rpx;
}
</style>
src/pages/index/presale.vue
View file @ 7584cebb
<template>
<view class="container">
<view class="top">
<OtherSearch background="rgba(255, 255, 255, 0.8)" backIcon="black"></OtherSearch>
<Search
background="rgba(255, 255, 255, 0.8)"
backIcon="black"
iconSrc="/static/assets/left.png"
placeholderText="输入商品名称"
></Search>
</view>
<view class="nav">
<wd-swiper
......@@ -134,13 +139,15 @@
</view>
</view>
<!-- 购物车悬浮按钮 -->
<view class="cart-floating">
<img class="cart" @tap="toCart" src="/static/presale/cart.png" />
<view class="cart-floating" @tap="toCart">
<wd-badge modelValue="4">
<img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
</view>
</template>
<script setup>
import OtherSearch from '../../components/index/OtherSearch.vue';
import Search from '../../components/index/Search.vue';
import { ref } from 'vue';
const current = ref(0);
const light = ref(0);
......@@ -491,4 +498,15 @@ page {
width: 48rpx;
height: 46rpx;
}
.shop-car {
margin-left: 20rpx;
margin-top: 20rpx;
}
::v-deep .wd-badge__content.is-fixed {
margin-top: 20rpx;
}
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style>
src/pages/shop/index.vue
View file @ 7584cebb
......@@ -248,7 +248,7 @@ uni-page-body {
}
.cart-floating {
position: fixed;
text-align: center;
bottom: 10%;
width: 80rpx;
height: 80rpx;
......
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