1
This commit is contained in:
+315
-315
@@ -1,315 +1,315 @@
|
||||
<template>
|
||||
<view class="hash_union_warp">
|
||||
<view class="hash_union_content">
|
||||
<!-- 头部 -->
|
||||
<view class="content_header">
|
||||
<view class="header_union_comm">
|
||||
<up-image src="/static/common/address3.png" width="16" height="18" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="msg_">二七广场丹尼斯</view>
|
||||
<view style="margin-top: 10rpx;">
|
||||
<up-image src="/static/common/right.png" width="18" height="18" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header_union_comm">
|
||||
<view style="width: 200rpx;">
|
||||
<up-search
|
||||
shape="square"
|
||||
bgColor="#EEEEEEFF"
|
||||
color="#666666FF"
|
||||
:showAction="false"
|
||||
placeholder="搜索"
|
||||
></up-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner图 -->
|
||||
<up-swiper
|
||||
:list="swiperList"
|
||||
height="120"
|
||||
radius="10"
|
||||
@change="e => currentNum = e.current"
|
||||
bgColor="#ffffff00"
|
||||
>
|
||||
<template #indicator>
|
||||
<view
|
||||
class="indicator-num"
|
||||
>
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
<!-- 分类 -->
|
||||
<view class="sort_comm_warp">
|
||||
<view v-for="item in sortList" :key="item.id" class="sort_item_comm">
|
||||
<up-image :src="item.icon" width="40" height="32" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="sort_item_title_comm">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 附近列表 -->
|
||||
<view class="hash_union_nearby">
|
||||
<view class="header_">
|
||||
<view class="left_">
|
||||
<view class="item_comm">
|
||||
<view style="margin-top: 4rpx;">
|
||||
<up-image src="/static/common/address3.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<text style="margin: 0 10rpx; 0 6rpx;">附近</text>
|
||||
<view style="margin-top: 6rpx;">
|
||||
<up-image src="/static/common/buttom.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_comm" style="margin-left: 10rpx;">
|
||||
<text style="margin-right: 10rpx;">综合排序</text>
|
||||
<view style="margin-top: 6rpx;">
|
||||
<up-image src="/static/common/buttom.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_comm">查看更多</view>
|
||||
</view>
|
||||
<view class="content_">
|
||||
<view
|
||||
class="content_item"
|
||||
v-if="contentList && contentList.length !==0"
|
||||
v-for="item in contentList"
|
||||
:key="item.id"
|
||||
>
|
||||
<up-image src="/static/common/bianlidian.jpg" width="80" height="80" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
<view class="content_item_right">
|
||||
<view class="title_">{{item.name}}</view>
|
||||
<view class="rate_">
|
||||
<up-rate v-model="item.rate" size="14"></up-rate>
|
||||
<text>￥{{item.price}}/人</text>
|
||||
<text>{{item.num}}去过</text>
|
||||
</view>
|
||||
<view>
|
||||
{{item.tabs.join(" ")}}
|
||||
</view>
|
||||
<view class="address_">
|
||||
<up-image src="/static/common/address3.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
<text style="margin-left: 10rpx;">{{item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="not_order_warp">
|
||||
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">暂未开放</view>
|
||||
</view> -->
|
||||
<CustomTabBar :tabIndex="2"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomTabBar from '@/components/custom-tab-bar.vue';
|
||||
export default {
|
||||
components:{CustomTabBar},
|
||||
data() {
|
||||
return {
|
||||
swiperList:[
|
||||
'/static/home/banner04.png',
|
||||
],
|
||||
currentNum:0,
|
||||
sortList:[
|
||||
{
|
||||
id:1,
|
||||
icon:'/static/union/bh.png',
|
||||
name:'百货',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
icon:'/static/union/fs.png',
|
||||
name:'服饰',
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
icon:'/static/union/wj.png',
|
||||
name:'五金',
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
icon:'/static/union/sm.png',
|
||||
name:'数码',
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
icon:'/static/union/jd.png',
|
||||
name:'酒店',
|
||||
},
|
||||
{
|
||||
id:6,
|
||||
icon:'/static/union/xc.png',
|
||||
name:'洗车',
|
||||
},
|
||||
{
|
||||
id:7,
|
||||
icon:'/static/union/yy.png',
|
||||
name:'影院',
|
||||
},
|
||||
{
|
||||
id:8,
|
||||
icon:'/static/union/sh.png',
|
||||
name:'商行',
|
||||
},
|
||||
{
|
||||
id:9,
|
||||
icon:'/static/union/bld.png',
|
||||
name:'便利店',
|
||||
},
|
||||
{
|
||||
id:10,
|
||||
icon:'/static/union/yb.png',
|
||||
name:'饮吧',
|
||||
},
|
||||
],
|
||||
rateValue:4,
|
||||
contentList:[
|
||||
{
|
||||
id:1,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
animation: false
|
||||
})
|
||||
/*#endif*/
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hash_union_warp{
|
||||
background-color: #FFFFFF;
|
||||
height: calc(100vh - 140rpx);
|
||||
overflow: hidden;
|
||||
.hash_union_content{
|
||||
padding: 40rpx 20rpx;
|
||||
.content_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 60rpx 0 20rpx;
|
||||
}
|
||||
.header_union_comm{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.msg_{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hash_union_nearby{
|
||||
background-color: $app-bj;
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
|
||||
padding: 30rpx;
|
||||
.header_{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left_{
|
||||
display: flex;
|
||||
}
|
||||
.item_comm{
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content_{
|
||||
margin: 20rpx 0;
|
||||
height: calc(100vh - 1020rpx);
|
||||
overflow: auto;
|
||||
}
|
||||
.content_item{
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.content_item_right{
|
||||
margin-left: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
width: calc(100% - 40rpx);
|
||||
|
||||
}
|
||||
.title_{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.rate_{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10rpx 0 6rpx;
|
||||
}
|
||||
.address_{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.not_order_warp {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
padding-top: 400rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view class="hash_union_warp">
|
||||
<view class="hash_union_content">
|
||||
<!-- 头部 -->
|
||||
<view class="content_header">
|
||||
<view class="header_union_comm">
|
||||
<up-image src="/static/common/address3.png" width="16" height="18" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="msg_">二七广场丹尼斯</view>
|
||||
<view style="margin-top: 10rpx;">
|
||||
<up-image src="/static/common/right.png" width="18" height="18" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header_union_comm">
|
||||
<view style="width: 200rpx;">
|
||||
<up-search
|
||||
shape="square"
|
||||
bgColor="#EEEEEEFF"
|
||||
color="#666666FF"
|
||||
:showAction="false"
|
||||
placeholder="搜索"
|
||||
></up-search>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- banner图 -->
|
||||
<up-swiper
|
||||
:list="swiperList"
|
||||
height="120"
|
||||
radius="10"
|
||||
@change="e => currentNum = e.current"
|
||||
bgColor="#ffffff00"
|
||||
>
|
||||
<template #indicator>
|
||||
<view
|
||||
class="indicator-num"
|
||||
>
|
||||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</up-swiper>
|
||||
<!-- 分类 -->
|
||||
<view class="sort_comm_warp">
|
||||
<view v-for="item in sortList" :key="item.id" class="sort_item_comm">
|
||||
<up-image :src="item.icon" width="40" height="32" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="sort_item_title_comm">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 附近列表 -->
|
||||
<view class="hash_union_nearby">
|
||||
<view class="header_">
|
||||
<view class="left_">
|
||||
<view class="item_comm">
|
||||
<view style="margin-top: 4rpx;">
|
||||
<up-image src="/static/common/address3.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
<text style="margin: 0 10rpx; 0 6rpx;">附近</text>
|
||||
<view style="margin-top: 6rpx;">
|
||||
<up-image src="/static/common/buttom.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_comm" style="margin-left: 10rpx;">
|
||||
<text style="margin-right: 10rpx;">综合排序</text>
|
||||
<view style="margin-top: 6rpx;">
|
||||
<up-image src="/static/common/buttom.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item_comm">查看更多</view>
|
||||
</view>
|
||||
<view class="content_">
|
||||
<view
|
||||
class="content_item"
|
||||
v-if="contentList && contentList.length !==0"
|
||||
v-for="item in contentList"
|
||||
:key="item.id"
|
||||
>
|
||||
<up-image src="/static/common/bianlidian.jpg" width="80" height="80" bgColor="#f1f6ff00" radius="10"></up-image>
|
||||
<view class="content_item_right">
|
||||
<view class="title_">{{item.name}}</view>
|
||||
<view class="rate_">
|
||||
<up-rate v-model="item.rate" size="14"></up-rate>
|
||||
<text>￥{{item.price}}/人</text>
|
||||
<text>{{item.num}}去过</text>
|
||||
</view>
|
||||
<view>
|
||||
{{item.tabs.join(" ")}}
|
||||
</view>
|
||||
<view class="address_">
|
||||
<up-image src="/static/common/address3.png" width="10" height="12" bgColor="#f1f6ff00"></up-image>
|
||||
<text style="margin-left: 10rpx;">{{item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="not_order_warp">
|
||||
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||||
<view class="not_order_msg_warp">暂未开放</view>
|
||||
</view> -->
|
||||
<CustomTabBar :tabIndex="2"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomTabBar from '@/components/custom-tab-bar.vue';
|
||||
export default {
|
||||
components:{CustomTabBar},
|
||||
data() {
|
||||
return {
|
||||
swiperList:[
|
||||
'/static/home/banner04.png',
|
||||
],
|
||||
currentNum:0,
|
||||
sortList:[
|
||||
{
|
||||
id:1,
|
||||
icon:'/static/union/bh.png',
|
||||
name:'百货',
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
icon:'/static/union/fs.png',
|
||||
name:'服饰',
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
icon:'/static/union/wj.png',
|
||||
name:'五金',
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
icon:'/static/union/sm.png',
|
||||
name:'数码',
|
||||
},
|
||||
{
|
||||
id:5,
|
||||
icon:'/static/union/jd.png',
|
||||
name:'酒店',
|
||||
},
|
||||
{
|
||||
id:6,
|
||||
icon:'/static/union/xc.png',
|
||||
name:'洗车',
|
||||
},
|
||||
{
|
||||
id:7,
|
||||
icon:'/static/union/yy.png',
|
||||
name:'影院',
|
||||
},
|
||||
{
|
||||
id:8,
|
||||
icon:'/static/union/sh.png',
|
||||
name:'商行',
|
||||
},
|
||||
{
|
||||
id:9,
|
||||
icon:'/static/union/bld.png',
|
||||
name:'便利店',
|
||||
},
|
||||
{
|
||||
id:10,
|
||||
icon:'/static/union/yb.png',
|
||||
name:'饮吧',
|
||||
},
|
||||
],
|
||||
rateValue:4,
|
||||
contentList:[
|
||||
{
|
||||
id:1,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
name:"好又多便利店",
|
||||
rate:4,//
|
||||
price:12,
|
||||
num:1854,
|
||||
tabs:['便利店',"建业路/英协花园"],
|
||||
address:"200m",
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
/*#ifdef APP-PLUS*/
|
||||
uni.hideTabBar({
|
||||
animation: false
|
||||
})
|
||||
/*#endif*/
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hash_union_warp{
|
||||
background-color: #FFFFFF;
|
||||
height: calc(100vh - 140rpx);
|
||||
overflow: hidden;
|
||||
.hash_union_content{
|
||||
padding: 40rpx 20rpx;
|
||||
.content_header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 60rpx 0 20rpx;
|
||||
}
|
||||
.header_union_comm{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.msg_{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #1A1A1A;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hash_union_nearby{
|
||||
background-color: $app-bj;
|
||||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||||
|
||||
padding: 30rpx;
|
||||
.header_{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left_{
|
||||
display: flex;
|
||||
}
|
||||
.item_comm{
|
||||
background: #FFFFFF;
|
||||
border-radius: 28rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content_{
|
||||
margin: 20rpx 0;
|
||||
height: calc(100vh - 1020rpx);
|
||||
overflow: auto;
|
||||
}
|
||||
.content_item{
|
||||
background: #FFFFFF;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.content_item_right{
|
||||
margin-left: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 18rpx;
|
||||
color: #999999;
|
||||
width: calc(100% - 40rpx);
|
||||
|
||||
}
|
||||
.title_{
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.rate_{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10rpx 0 6rpx;
|
||||
}
|
||||
.address_{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.not_order_warp {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
margin-top: 0;
|
||||
padding-top: 400rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user