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> <template>
<view class="search"> <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> <slot></slot>
<view class="searchBox"> <view class="searchBox">
<image <image
class="magnifyingGlass" class="magnifyingGlass"
src="../../static/preSale/magnifyingGlass.png" src="../../static/assets/magnifyingGlass.png"
mode="aspectFit|aspectFill|widthFix" mode="aspectFit|aspectFill|widthFix"
/> />
<input <input
type="text" type="text"
:value="value" :value="test"
class="text" class="text"
placeholder="请输入要搜索的内容" :placeholder="placeholderText"
placeholder-style="font-size:16rpx;" placeholder-style="font-size:16rpx;"
/> />
</view> </view>
...@@ -20,6 +21,17 @@ ...@@ -20,6 +21,17 @@
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue';
const props = defineProps({
iconSrc: {
type: String,
default: '',
},
placeholderText: {
type: String,
default: '',
},
});
// 返回上一级 // 返回上一级
function back() { function back() {
xma.navigateBack({ xma.navigateBack({
...@@ -33,33 +45,29 @@ function back() { ...@@ -33,33 +45,29 @@ function back() {
position: absolute; position: absolute;
width: 710rpx; width: 710rpx;
height: 80rpx; height: 80rpx;
// background: rgba(255, 255, 255, 0.8);
border-radius: 16rpx 16rpx 16rpx 16rpx; border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 0.8; opacity: 0.8;
margin: 0 auto; margin: 0 auto;
margin-top: 44rpx;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 20rpx; padding-left: 20rpx;
padding-top: 75rpx;
box-sizing: border-box; box-sizing: border-box;
.arrow { .arrow {
width: 15rpx; width: 15rpx;
height: 24rpx; height: 24rpx;
} }
.icon {
width: 40rpx;
height: 40rpx;
margin-left: 40rpx;
}
.searchBox { .searchBox {
opacity: 1; opacity: 1;
width: 256rpx; width: 400rpx;
height: 56rpx; height: 56rpx;
background: #ffffff; background: #f4f4f4;
border-radius: 28rpx 28rpx 28rpx 28rpx; border-radius: 28rpx 28rpx 28rpx 28rpx;
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 20rpx; padding-left: 20rpx;
margin-left: 167rpx; margin-left: 20rpx;
.magnifyingGlass { .magnifyingGlass {
width: 26rpx; width: 26rpx;
height: 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> <template>
<view> <view>
<view class="container"> <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"> <view class="bac-img">
<img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" /> <img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
</view> </view>
...@@ -91,6 +91,10 @@ ...@@ -91,6 +91,10 @@
></wd-icon> ></wd-icon>
</view> </view>
</view> </view>
<Sort v-show="rotate" />
<DepartureDate v-show="rotate2" />
<ScenicSpots v-show="rotate3" />
<Screen v-show="rotate4" />
</view> </view>
<view class="list-card"> <view class="list-card">
<view <view
...@@ -130,7 +134,12 @@ ...@@ -130,7 +134,12 @@
</template> </template>
<script setup lang="ts"> <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 rotate = ref(false);
const rotate2 = ref(false); const rotate2 = ref(false);
const rotate3 = ref(false); const rotate3 = ref(false);
......
src/pages/detail/detail.vue
View file @ 7584cebb
...@@ -2,7 +2,14 @@ ...@@ -2,7 +2,14 @@
<view class="container"> <view class="container">
<!-- 顶部搜索框--> <!-- 顶部搜索框-->
<view class="top"> <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>
<!-- 图片--> <!-- 图片-->
<view class="nav"> <view class="nav">
...@@ -60,9 +67,11 @@ ...@@ -60,9 +67,11 @@
<img src="/static/detail/img8.png" style="width: 40rpx; height: 40rpx" /> <img src="/static/detail/img8.png" style="width: 40rpx; height: 40rpx" />
<view class="sort-text">客服</view> <view class="sort-text">客服</view>
</view> </view>
<view class="borderClass"> <view class="borderClass" @tap="toCart">
<img src="/static/detail/img6.png" style="width: 40rpx; height: 40rpx" /> <wd-badge modelValue="4">
<view class="sort-text" @tap="toCart">购物车</view> <img src="/static/detail/car.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
<view class="sort-text">购物车</view>
</view> </view>
</view> </view>
<!-- <view class="sort">--> <!-- <view class="sort">-->
...@@ -82,7 +91,7 @@ ...@@ -82,7 +91,7 @@
</template> </template>
<script setup> <script setup>
import OtherSearch from '../../components/index/OtherSearch.vue'; import Search from '../../components/index/Search.vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app'; import { onShow } from '@dcloudio/uni-app';
...@@ -348,4 +357,8 @@ function toCart() { ...@@ -348,4 +357,8 @@ function toCart() {
margin-top: -90rpx; margin-top: -90rpx;
margin-left: 400rpx; margin-left: 400rpx;
} }
::v-deep.icon {
width: 56rpx;
height: 56rpx;
}
</style> </style>
src/pages/index/building.vue
View file @ 7584cebb
...@@ -2,18 +2,24 @@ ...@@ -2,18 +2,24 @@
<view class="container"> <view class="container">
<!-- 顶部搜索框--> <!-- 顶部搜索框-->
<view class="top"> <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>
<!-- 轮播图--> <!-- 轮播图-->
<view class="nav"> <view class="nav">
<wd-swiper <wd-swiper
class="main-img" customImageClass="main-img"
:list="swiperList" :list="swiperList"
autoplay autoplay
v-model:current="current" v-model:current="current"
@click="handleClick" @click="handleClick"
@change="onChange" @change="onChange"
height="188" height="188"
mode="aspectFit"
></wd-swiper> ></wd-swiper>
<view class="nav-img"> <view class="nav-img">
<img <img
...@@ -92,14 +98,16 @@ ...@@ -92,14 +98,16 @@
</view> </view>
</view> </view>
<!-- 购物车悬浮按钮 --> <!-- 购物车悬浮按钮 -->
<view class="cart-floating"> <view class="cart-floating" @tap="toCart">
<img class="cart" @tap="toCart" src="/static/presale/cart.png" /> <wd-badge modelValue="4">
<img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import OtherSearch from '../../components/index/OtherSearch.vue'; import Search from '../../components/index/Search.vue';
const current = ref(0); const current = ref(0);
const light = ref(0); const light = ref(0);
// 轮播图 // 轮播图
...@@ -346,4 +354,15 @@ page { ...@@ -346,4 +354,15 @@ page {
width: 48rpx; width: 48rpx;
height: 46rpx; 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> </style>
src/pages/index/index.vue
View file @ 7584cebb
<template> <template>
<view> <view>
<view class="container"> <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> <view>
<img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" /> <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" /> <img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
...@@ -303,4 +308,9 @@ page { ...@@ -303,4 +308,9 @@ page {
margin-top: -23rpx; margin-top: -23rpx;
color: #fa5151; color: #fa5151;
} }
::v-deep .icon {
width: 40rpx;
height: 40rpx;
margin-left: 40rpx;
}
</style> </style>
src/pages/index/presale.vue
View file @ 7584cebb
<template> <template>
<view class="container"> <view class="container">
<view class="top"> <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>
<view class="nav"> <view class="nav">
<wd-swiper <wd-swiper
...@@ -134,13 +139,15 @@ ...@@ -134,13 +139,15 @@
</view> </view>
</view> </view>
<!-- 购物车悬浮按钮 --> <!-- 购物车悬浮按钮 -->
<view class="cart-floating"> <view class="cart-floating" @tap="toCart">
<img class="cart" @tap="toCart" src="/static/presale/cart.png" /> <wd-badge modelValue="4">
<img class="shop-car" src="/static/presale/cart.png" style="width: 40rpx; height: 40rpx" />
</wd-badge>
</view> </view>
</template> </template>
<script setup> <script setup>
import OtherSearch from '../../components/index/OtherSearch.vue'; import Search from '../../components/index/Search.vue';
import { ref } from 'vue'; import { ref } from 'vue';
const current = ref(0); const current = ref(0);
const light = ref(0); const light = ref(0);
...@@ -491,4 +498,15 @@ page { ...@@ -491,4 +498,15 @@ page {
width: 48rpx; width: 48rpx;
height: 46rpx; 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> </style>
src/pages/shop/index.vue
View file @ 7584cebb
...@@ -248,7 +248,7 @@ uni-page-body { ...@@ -248,7 +248,7 @@ uni-page-body {
} }
.cart-floating { .cart-floating {
position: fixed; position: fixed;
text-align: center;
bottom: 10%; bottom: 10%;
width: 80rpx; width: 80rpx;
height: 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