odjbin/city-store-transfer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request '罗世杰：完成了Dropdown组件和两个page，初始化了主页导航' (#32) from lj into master

Browse Source 
Reviewed-on: http://git.feashow.cn/odjbin/city-store-transfer/pulls/32
This commit is contained in:
luojie
2023-11-09 15:11:54 +00:00
parent 0a50a04cfb 5c391aae6e
commit 8bb43518c7
14 changed files with 475 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/DropDown/DropDown.vue
View File

@@ -1,50 +1,114 @@
<template>
<view class="container">
<view
class="title-view"
v-for="item in title"
>
<text>{{item}}</text>
<view class="arrow">
<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
<view class="tabs-bg"/>
<view class="tabs">
<view
class="title-view"
v-for="(item, index) in title"
:key="item"
@click="changeActiveIndex(index)"
:class="{isActive: activeIndex === index}"
>
<text>{{item}}</text>
<view class="arrow" v-if="activeIndex !== index">
<u-image src="/static/dropdown/dp_icon_lxia.png" width="14rpx" height="11rpx"/>
</view>
<view class="arrow" v-if="activeIndex === index">
<u-image src="/static/dropdown/dp_icon_hlxia.png" width="14rpx" height="11rpx"/>
</view>
</view>
</view>
<view class="item-border">
<DropDownItem v-if="activeIndex !== -1" :list="tablist"/>
</view>
</view>
</template>
<script>
/**
* @property {Array} postlist 传递一个二维数组
*/
import DropDownItem from "./DropDownItem.vue"
export default {
name:"DropDown",
components: {
DropDownItem
},
props: {
postlist: {
type:Array,
default(){
return [['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
}
}
},
data() {
return {
title: ['行业','区域','面积','筛选']
title: ['行业','区域','面积','筛选'],
activeIndex: -1,
// postlist: [['全部', '餐饮美食', '百货超市', '美容美发'],['区域1', '区域2', '区域3', '区域4'],['100m2','200m2','300m2'],['附近的', '最新发布的', '其他']]
};
}
},
computed: {
tablist: function() {
return this.postlist[this.activeIndex]
}
},
methods: {
changeActiveIndex(index){
if(this.activeIndex === index){
this.activeIndex = -1;
}else
this.activeIndex = index
}
},
}
</script>
<style lang="scss" scoped>
.container{
height: 100rpx;
background-color: #fff;
display: flex;
justify-content: space-around;
.title-view {
display: flex;
>text {
font-size: 14px;
.isActive{
color: #CC3333;
}
.container{
margin-top: 10px;
position: relative;
.tabs-bg {
position: absolute;
background-color: $uni-bg-color-grey;
height: 120rpx;
width: 100%;
transform: translateY(-20rpx);
z-index: 2;
}
.tabs{
background-color: #fff;
height: 100rpx;
display: flex;
justify-content: space-around;
position: relative;
z-index: 3;
}
.title-view {
display: flex;
>text {
font-size: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.arrow {
margin-left: 8rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.arrow {
margin-left: 8rpx;
display: flex;
flex-direction: column;
justify-content: center;
.item-border{
position: absolute;
width: 100%;
height: 100%;
}
}
</style>

63
components/DropDown/DropDownItem.vue
View File

@@ -1,8 +1,69 @@
<template>
<view class="root">
<view class="mask"/>
<view class="list-container">
<view
class="item"
v-for="(item,index) in list"
>
<view></view>
<text class="list-text">{{item}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default(){
return []
}
}
}
}
</script>
<style>
<style lang="scss" scoped>
.mask{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
-webkit-backdrop-filter:saturate(150%) blur(8px);
background-color:rgba(0,0,0,.3);
z-index: 20;
}
.root {
position: absolute;
top: 0;
width: 100%;
font-size: 28rpx;
background-color: #fff;
position: absolute;
z-index: 1;
.list-container {
position: relative;
background-color: #fff;
width: 100%;
z-index: 21;
border-radius: 0px 0px 20px 20px;
.item {
border-top: 1px solid #EEEEEE;
font-weight: 500;
padding-left: 61rpx;
height: 80rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
}
}
</style>

6
components/InputAndSwiper/InputAndSwiper.vue
View File

@@ -1,5 +1,5 @@
<template>
<view>
<view class="input-and-swiper-root">
<view class="search-box">
<view class="search-box-input">
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
@@ -133,6 +133,10 @@
</script>
<style lang="scss">
.input-and-swiper-root {
position: relative;
z-index: 2;
}
.search-box {
position: absolute;
z-index: 1;

14
components/ShowShopListItem/ShowShopListItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="list-border">
<view class="list-container">
<view class="shop-list-img">
<view class="list-container" @click="enterDetail()">
<view class="shop-list-img" >
<u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
</view>
<view class="text-area">
@@ -87,7 +87,10 @@
<script>
/**
* @property shopInfo {Object} 传入商铺对象数据
* @property {Object} shopInfo 传入商铺对象数据
* @property {Number} showStyle 展示商铺的样式类型(0为首页默认)
* @property {Boolean} isADshow 是否显示推广广告
* @property {Boolean} isEdit 是否显示编辑和删除
*/
export default {
props: {
@@ -135,6 +138,11 @@
},
handleDel(shopid) {
this.$emit('delItem', shopid)
},
enterDetail(){
uni.navigateTo({
url: '/pages/detail/detail'
})
}
}
}

2
components/publishSlide/publishSlide.vue
View File

@@ -60,7 +60,7 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
.mask{
position: fixed;
top: 0;

40
pages.json
View File

@@ -105,6 +105,46 @@
"enablePullDownRefresh": false
}
},
{
"path" : "pages/index/NavBarPages/zrxx/zrxx",
"style" :
{
"navigationBarTitleText" : "转让信息",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/index/NavBarPages/zdxx/zdxx",
"style" :
{
"navigationBarTitleText" : "找店信息",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/index/NavBarPages/czxx/czxx",
"style" :
{
"navigationBarTitleText" : "出租信息",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/index/NavBarPages/xmzs/xmzs",
"style" :
{
"navigationBarTitleText" : "项目招商",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/index/NavBarPages/cjal/cjal",
"style" :
{
"navigationBarTitleText" : "成交案例",
"enablePullDownRefresh" : false
}
}
],
"tabBar": {

29
pages/index/HomeMainContent/HomeNavCard.vue
View File

@@ -15,31 +15,38 @@
return {
navItems: [{
icon: "/static/navbar/sy_icon_zrxx.png",
text: "转让信息"
text: "转让信息",
url: "/pages/index/NavBarPages/zrxx/zrxx"
},
{
icon: "/static/navbar/sy_icon_zdxx.png",
text: "找店信息"
text: "找店信息",
url: "/pages/index/NavBarPages/zdxx/zdxx"
},
{
icon: "/static/navbar/sy_icon_czxx.png",
text: "出租信息"
text: "出租信息",
url: "/pages/index/NavBarPages/czxx/czxx"
},
{
icon: "/static/navbar/sy_icon_xmzs.png",
text: "项目招商"
text: "项目招商",
url: "/pages/index/NavBarPages/xmzs/xmzs"
},
{
icon: "/static/navbar/sy_icon_cjal.png",
text: "成交案例"
text: "成交案例",
url: "/pages/index/NavBarPages/cjal/cjal"
},
{
icon: "/static/navbar/sy_icon_spdt.png",
text: "速配地图"
text: "速配地图",
url: '/pages/index/map/map'
},
{
icon: "/static/navbar/sy_icon_zmhb.png",
text: "招募合伙"
text: "招募合伙",
url:'/pages/Partnerships/Partnerships'
},
{
icon: "/static/navbar/sy_icon_lxwm.png",
@@ -51,12 +58,10 @@
},
methods: {
handleItemClick(index) {
// 在这里处理点击事件，并使用下标值
console.log(`项目 ${index} 被点击了`);
// 或者执行其他需要的操作
if (index == 5) {
// 跳转页面
if (index >= 0 && index <= 6) {
uni.navigateTo({
url: '/pages/index/map/map'
url: this.navItems[index].url
})
}
}

22
pages/index/NavBarPages/cjal/cjal.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

22
pages/index/NavBarPages/czxx/czxx.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

22
pages/index/NavBarPages/xmzs/xmzs.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>

64
pages/index/NavBarPages/zdxx/zdxx.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<view>
<view class="search-box">
<view class="search-box-input">
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
</u-input>
</view>
</view>
<view>
<DropDown></DropDown>
</view>
<view>
<SearchShopList :showStyle="1"/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
page{
background-color: #F8F8F8;
}
.search-box {
position: relative;
z-index: 1;
left: 50%;
width: 84.6%;
transform: translateX(-50%);
.search-box-input {
border-radius: 12rpx;
margin-top: 20rpx;
background-color: #fff;
opacity: 0.85;
.u-border {
border: none;
.u-input__content {
height: 62rpx;
border-radius: 12rpx;
background-color: #fff;
.u-input__content__field-wrapper__field {
font-size: 26rpx !important;
}
}
}
}
}
</style>

64
pages/index/NavBarPages/zrxx/zrxx.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<view>
<view class="search-box">
<view class="search-box-input">
<u-input placeholder="热门搜索" placeholder-style="color: #969696" prefixIcon="search"
prefixIconStyle="font-size: 24px;color: #909399;" border="true">
</u-input>
</view>
</view>
<view>
<DropDown></DropDown>
</view>
<view>
<ShowShopList :showStyle="1"></ShowShopList>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss">
page{
background-color: #F8F8F8;
}
.search-box {
position: relative;
z-index: 1;
left: 50%;
width: 84.6%;
transform: translateX(-50%);
.search-box-input {
border-radius: 12rpx;
margin-top: 20rpx;
background-color: #fff;
opacity: 0.85;
.u-border {
border: none;
.u-input__content {
height: 62rpx;
border-radius: 12rpx;
background-color: #fff;
.u-input__content__field-wrapper__field {
font-size: 26rpx !important;
}
}
}
}
}
</style>

31
pages/shopAddress/shopAddress.vue
View File

@@ -2,17 +2,28 @@
<view class="root">
<InputAndSwiper></InputAndSwiper>
<view style="margin-top: 10px;">
<DropDown></DropDown>
<view>
<view class="dropdown-bug">
</view>
<view class="marginLR10">
<DropDown></DropDown>
</view>
<view class="marginLR10">
<SearchShopList :showStyle="1"/>
</view>
</view>
<SearchShopList :showStyle="1"></SearchShopList>
<TabBar :current-page="3"></TabBar>
</view>
</template>
<script>
import DropDownItem from "@/components/DropDown/DropDownItem.vue"
export default {
components: {
DropDownItem
},
data() {
return {
@@ -24,11 +35,23 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
background-color: $uni-bg-color-grey;
}
.root{
position: relative;
}
.dropdown-bug {
position: absolute;
background-color: $uni-bg-color-grey;
height: 120rpx;
width: 100%;
transform: translateY(-20rpx);
z-index: 2;
}
.marginLR10{
margin: 0 10px;
}
</style>

57
pages/shopTransfer/shopTransfer.vue
View File

@@ -2,43 +2,31 @@
<view class="root">
<InputAndSwiper></InputAndSwiper>
<view style="margin-top: 10px;">
<DropDown></DropDown>
<view>
<view class="dropdown-bug">
</view>
<view class="marginLR10">
<DropDown></DropDown>
</view>
<view class="marginLR10">
<ShowShopList :showStyle="1"></ShowShopList>
</view>
</view>
<ShowShopList :showStyle="1"></ShowShopList>
<TabBar :current-page="1"></TabBar>
</view>
</template>
<script>
import DropDownItem from "@/components/DropDown/DropDownItem.vue"
export default {
components: {
DropDownItem
},
data() {
return {
value1: 1,
value2: 2,
options1: [{
label: '默认排序',
value: 1,
},
{
label: '距离优先',
value: 2,
},
{
label: '价格优先',
value: 3,
}
],
options2: [{
label: '去冰',
value: 1,
},
{
label: '加冰',
value: 2,
},
],
}
},
methods: {
@@ -47,11 +35,22 @@
}
</script>
<style lang="scss">
<style lang="scss" scoped>
page {
background-color: $uni-bg-color-grey;
}
.root {
.root{
position: relative;
}
.dropdown-bug {
position: absolute;
background-color: $uni-bg-color-grey;
height: 120rpx;
width: 100%;
transform: translateY(-20rpx);
z-index: 2;
}
.marginLR10{
margin: 0 10px;
}