64 lines
2.4 KiB
Vue
64 lines
2.4 KiB
Vue
<template>
|
|
<view class="waper">
|
|
<u-navbar :autoBack="true" :placeholder="true" bgColor="#fff">
|
|
<view slot='center' class="navbar_title">景点名片</view>
|
|
</u-navbar>
|
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
|
|
<view class="list_waper">
|
|
<navigator hover-class="none" :url="'/pages/scenic/spot?id=' + i.id" class="list" v-for="(i, index) in list" :key="index">
|
|
<view class="img">
|
|
<image :src="$utils.setImgUrl(i.image21)" mode=""></image>
|
|
</view>
|
|
<view class="name">{{i.scenicName}}</view>
|
|
<image class="tagImg" v-if="i.flag == 'hot'" src="https://common/hot-tag.png" mode=""></image>
|
|
<image class="tagImg" v-if="i.flag == 'top'" src="https://common/top-tag.png" mode=""></image>
|
|
<image class="tagImg" v-if="i.flag == 'new'" src="https://common/new-tag.png" mode=""></image>
|
|
</navigator>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
data () {
|
|
return {
|
|
paddingTop: 0,
|
|
list: []
|
|
}
|
|
},
|
|
methods: {
|
|
async upCallback (page) {
|
|
let obj = { pageNum: page.num, pageSize: page.size, scenicId: this.$scenicId };
|
|
let info = await this.$http.scenicSpotList(obj);
|
|
if(page.num == 1) this.list = [];
|
|
this.list = this.list.concat(info.rows);
|
|
this.mescroll.endBySize(info.rows.length, info.total);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list_waper{
|
|
width: 100%; box-sizing: border-box; padding: 32rpx;
|
|
.list{
|
|
width: 100%; background: #fff; border-radius: 10rpx; margin-bottom: 20rpx; position: relative;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.img{
|
|
width: 100%; height: 343rpx;
|
|
image{ border-radius: 10rpx 10rpx 0 0; }
|
|
}
|
|
.name{ width: 100%; height: 88rpx; line-height: 88rpx; box-sizing: border-box; padding: 0 24rpx; color: #333; font-size: 28rpx; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.tagImg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |