316 lines
7.1 KiB
Vue
316 lines
7.1 KiB
Vue
<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>
|