|
|
|
@ -1,32 +1,77 @@ |
|
|
|
<template> |
|
|
|
<view class="page pageList"> |
|
|
|
<navbar title="景点" leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<view |
|
|
|
style="padding: 10rpx 30rpx;"> |
|
|
|
<uv-search |
|
|
|
bgColor="#fff" |
|
|
|
@search="getData" |
|
|
|
:showAction="false" |
|
|
|
searchIconSize="30rpx" |
|
|
|
placeholder="请输入搜索关键字..." |
|
|
|
v-model="queryParams.title"></uv-search> |
|
|
|
<view style="padding: 10rpx 30rpx;"> |
|
|
|
<uv-search bgColor="#fff" @search="getData" :showAction="false" searchIconSize="30rpx" |
|
|
|
placeholder="请输入搜索关键字..." v-model="queryParams.title"></uv-search> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class=""> |
|
|
|
<screenRen |
|
|
|
@clickItem="clickItem"/> |
|
|
|
<screenRen @clickItem="clickItem" /> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="list"> |
|
|
|
<view class="waterfall"> |
|
|
|
<uv-waterfall ref="waterfall" v-model="list" |
|
|
|
:add-time="10" |
|
|
|
:left-gap="leftGap" |
|
|
|
:right-gap="rightGap" |
|
|
|
:column-gap="columnGap" |
|
|
|
@changeList="changeList"> |
|
|
|
<!-- 第一列数据 --> |
|
|
|
<template v-slot:list1> |
|
|
|
<!-- 为了磨平部分平台的BUG，必须套一层view --> |
|
|
|
<view> |
|
|
|
<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" |
|
|
|
@click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)"> |
|
|
|
<view class="waterfall-item__image" :style="[imageStyle(item)]"> |
|
|
|
<image :src="item.titleImage" mode="widthFix" :style="{width:item.width+'px'}"></image> |
|
|
|
</view> |
|
|
|
<view class="waterfall-item__ft"> |
|
|
|
<view class="waterfall-item__ft__title"> |
|
|
|
<text class="value">{{item.name}}</text> |
|
|
|
</view> |
|
|
|
<view class="waterfall-item__ft__desc uv-line-2"> |
|
|
|
<text class="value">{{item.address}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
<!-- 第二列数据 --> |
|
|
|
<template v-slot:list2> |
|
|
|
<!-- 为了磨平部分平台的BUG，必须套一层view --> |
|
|
|
<view> |
|
|
|
<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" |
|
|
|
@click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)"> |
|
|
|
<view class="waterfall-item__image" :style="[imageStyle(item)]"> |
|
|
|
<image :src="item.titleImage" mode="widthFix" :style="{width:item.width+'px'}"></image> |
|
|
|
</view> |
|
|
|
<view class="waterfall-item__ft"> |
|
|
|
<view class="waterfall-item__ft__title"> |
|
|
|
<text class="value">{{item.name}}</text> |
|
|
|
</view> |
|
|
|
<view class="waterfall-item__ft__desc uv-line-2"> |
|
|
|
<text class="value">{{item.address}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</uv-waterfall> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="list"> |
|
|
|
<scenicSpotItem |
|
|
|
:key="index" |
|
|
|
v-for="(item, index) in list" |
|
|
|
:item="item" |
|
|
|
@click="$utils.navigateTo('/pages_order/scenicSpot/scenicSpotDetail?id=' + item.id)" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -34,19 +79,40 @@ |
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
import screenRen from '../components/screen/screenRen.vue' |
|
|
|
import scenicSpotItem from '../components/list/scenicSpot/scenicSpotItem.vue' |
|
|
|
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js' |
|
|
|
export default { |
|
|
|
mixins: [mixinsList], |
|
|
|
components : { |
|
|
|
components: { |
|
|
|
scenicSpotItem, |
|
|
|
screenRen, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
mixinsListApi : 'getScenicPage', |
|
|
|
mixinsListApi: 'getScenicPage', |
|
|
|
list: [], // 瀑布流全部数据 |
|
|
|
list1: [], // 瀑布流第一列数据 |
|
|
|
list2: [], // 瀑布流第二列数据 |
|
|
|
leftGap: 10, |
|
|
|
rightGap: 10, |
|
|
|
columnGap: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
imageStyle(item) { |
|
|
|
return item => { |
|
|
|
const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap; |
|
|
|
const w = v / 2; |
|
|
|
const rate = w / item.w; |
|
|
|
const h = rate * item.h; |
|
|
|
return { |
|
|
|
width: w + 'px', |
|
|
|
height: h + 'px' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
clickItem(result){ |
|
|
|
clickItem(result) { |
|
|
|
this.queryParams = { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10, |
|
|
|
@ -56,14 +122,54 @@ |
|
|
|
}) |
|
|
|
this.getData() |
|
|
|
}, |
|
|
|
// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列 |
|
|
|
changeList(e) { |
|
|
|
this[e.name].push(e.value); |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page{ |
|
|
|
.list{ |
|
|
|
padding: 0 20rpx; |
|
|
|
.page { |
|
|
|
background: #f1f1f1; |
|
|
|
|
|
|
|
.list { |
|
|
|
padding: 0 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
$show-lines: 1; |
|
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss'; |
|
|
|
|
|
|
|
.waterfall-item { |
|
|
|
overflow: hidden; |
|
|
|
margin-top: 10px; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.waterfall-item__ft { |
|
|
|
padding: 20rpx; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
&__title { |
|
|
|
margin-bottom: 10rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
font-weight: 700; |
|
|
|
|
|
|
|
.value { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #303133; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&__desc .value { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #606266; |
|
|
|
} |
|
|
|
|
|
|
|
&__btn { |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
