hehang
2 years ago
parent
2c56905910
commit
45a157a1a8
@ -0,0 +1,395 @@ |
||||
<template> |
||||
<view> |
||||
<view class="top"> |
||||
<uni-search-bar class="search-bar" @confirm="search" :focus="true" v-model="searchValue" cancelButton="none" @clear="clear"></uni-search-bar> |
||||
<button class="no-margin-button" size="mini" @click="goSort">排序</button> |
||||
</view> |
||||
|
||||
<view @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd"> |
||||
<refresh ref="refresh" @isRefresh="isRefresh"></refresh> |
||||
|
||||
<!-- list --> |
||||
<view> |
||||
<scroll-view class="scroll-body-design" scroll-y="true" @scrolltolower="lower1" scroll-with-animation> |
||||
<view style="width: 100%; height: 10rpx"></view> |
||||
<view class="card" v-for="(item, index) in list" v-if="list.length > 0" :key="index"> |
||||
<view class="card-content"> |
||||
<view class="images" v-if="item.imageUrl"> |
||||
<image style="width: 180px; height: 180px; background-color: #eeeeee" :mode="'center'" :src="baseUrls + item.imageUrl.split(',')[0]"></image> |
||||
</view> |
||||
<view class="images" v-else>暂无图片</view> |
||||
<view class="introduce"> |
||||
<view class="big-font">{{ item.resourceName || '/' }}</view> |
||||
<view class="small-font">所属景区：{{ item.scenicArea || '/' }}</view> |
||||
<view class="small-font">开放时间：{{ item.openTime || '/' }}</view> |
||||
</view> |
||||
</view> |
||||
<view class="small-btn"> |
||||
<button class="mini-btn" type="default" @click="toEdit(item.id)" size="mini">编辑</button> |
||||
<button class="mini-btn" type="default" size="mini" @click="toRecommend(item)">{{item.ifRecommend=='0'?"推荐":"取消推荐"}}</button> |
||||
</view> |
||||
</view> |
||||
</scroll-view> |
||||
<!-- <view style="width: 100%;height: 100rpx;opacity:0;">底部占位盒子</view> --> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import util from '../util/util.js' |
||||
|
||||
|
||||
import refresh from '@/components/uni-list/refresh.vue'; |
||||
import baseUrl from '@/config'; |
||||
import {updateScenicSpotSortList} from '@/api/word/attractionsEditor.js'; |
||||
import { getScenicSpotData } from '@/api/word/scenicSpot.js'; |
||||
export default { |
||||
components: { refresh }, |
||||
data() { |
||||
return { |
||||
currentPage: 'index', |
||||
toView: '', |
||||
list: [], //数据格式 |
||||
baseUrls: '', |
||||
searchValue: '', //查询名称 |
||||
pageNum: 1, |
||||
pageBottom: false // 是否全部加载完成 |
||||
}; |
||||
}, |
||||
created() { |
||||
this.baseUrls = baseUrl; |
||||
}, |
||||
onLoad(e) {}, |
||||
mounted() { |
||||
// 获取景点信息集合 |
||||
this.getScenicSpotData(null, 1, 10); |
||||
}, |
||||
onShow() {}, |
||||
onHide() {}, |
||||
methods: { |
||||
goSort() { |
||||
uni.navigateTo({ |
||||
url: 'sort' |
||||
}); |
||||
}, |
||||
|
||||
toEdit(item){ |
||||
uni.navigateTo({ |
||||
url:'/pages/work/scenicSpot/attractionsEditor?id='+item |
||||
}) |
||||
}, |
||||
|
||||
// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。 |
||||
isRequest() { |
||||
return new Promise((resolve, reject) => { |
||||
this.pageNum++; |
||||
var that = this; |
||||
|
||||
setTimeout(() => { |
||||
uni.hideLoading(); |
||||
|
||||
this.getScenicSpotData(this.searchValue, this.pageNum, 10); |
||||
|
||||
// let newData = ['新数据1','新数据2','新数据3'] |
||||
// resolve(newData) |
||||
}, 500); |
||||
}) |
||||
|
||||
}, |
||||
|
||||
// 加载更多 util.throttle为防抖函数 |
||||
lower1: util.throttle(function (e) { |
||||
if (this.pageBottom) { |
||||
return; |
||||
} |
||||
console.log(`加载${this.pageNum}`); //pageNum表示当前所在页数 根据当前所在页数发起请求并带上page页数 |
||||
uni.showLoading({ |
||||
title: '加载中', |
||||
mask: true |
||||
}) |
||||
|
||||
|
||||
this.isRequest().then((res) => { |
||||
let tempList = this.list; |
||||
tempList[this.pageNum] = tempList[this.pageNum].concat(res); |
||||
|
||||
this.list = tempList; |
||||
this.$forceUpdate(); //二维数组，开启强制渲染 |
||||
}); |
||||
}, 300), |
||||
// 刷新touch监听 |
||||
refreshStart(e) { |
||||
this.$refs.refresh.refreshStart(e); |
||||
}, |
||||
refreshMove(e) { |
||||
this.$refs.refresh.refreshMove(e); |
||||
}, |
||||
refreshEnd(e) { |
||||
this.$refs.refresh.refreshEnd(e); |
||||
}, |
||||
isRefresh() { |
||||
setTimeout(() => { |
||||
this.list = []; |
||||
|
||||
this.pageBottom = false; |
||||
this.pageNum = 1; |
||||
this.getScenicSpotData(null, this.pageNum, 10); |
||||
uni.showToast({ |
||||
icon: 'success', |
||||
title: '刷新成功' |
||||
}); |
||||
|
||||
this.$refs.refresh.endAfter(); //刷新结束调用 |
||||
}, 1000) |
||||
|
||||
}, |
||||
// 获取景点信息集合 |
||||
getScenicSpotData(resourceName, pageNum, pageSize) { |
||||
let data = { |
||||
resourceName: resourceName == null ? '' : resourceName, |
||||
pageNum: pageNum == null ? 1 : pageNum, |
||||
pageSize: pageSize == null ? 10 : pageSize |
||||
}; |
||||
|
||||
getScenicSpotData(data).then((res) => { |
||||
if (res.code === 200) { |
||||
res.rows.forEach((item) => { |
||||
this.list.push(item); |
||||
}); |
||||
if (this.list.length === res.total) { |
||||
this.pageBottom = true; |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
toRecommend(item){ |
||||
let ifrecommend = item.ifRecommend==0?"1":"0"; |
||||
var query ={ |
||||
id: item.id, |
||||
ifRecommend: ifrecommend |
||||
} |
||||
console.log(query) |
||||
updateScenicSpotSortList(query).then(res =>{ |
||||
console.log(res) |
||||
if(res.code ==200){ |
||||
if(query.ifRecommend==1){ |
||||
uni.showToast({ |
||||
title: '推荐成功' |
||||
}); |
||||
}else{ |
||||
uni.showToast({ |
||||
title: '取消成功' |
||||
}); |
||||
} |
||||
let _this = this; |
||||
this.list = []; |
||||
_this.isRequest() |
||||
} |
||||
}) |
||||
}, |
||||
// 查看详情 |
||||
goDetail(val) { |
||||
const id = val.id; |
||||
uni.navigateTo({ |
||||
url: 'emergencyResourcesDetail?id=' + id |
||||
}); |
||||
}, |
||||
goDetails(val) { |
||||
uni.navigateTo({ |
||||
url: 'emergencyResourcesList?code=' + val |
||||
}); |
||||
}, |
||||
search(res) { |
||||
console.log(res); |
||||
|
||||
this.pageBottom = false; |
||||
this.pageNum = 1; |
||||
this.searchValue = res.value; |
||||
this.list = []; |
||||
this.getScenicSpotData(res.value, 1, 10); |
||||
}, |
||||
|
||||
clear(res) { |
||||
this.pageBottom = false; |
||||
this.pageNum = 1; |
||||
this.list = [] |
||||
|
||||
|
||||
this.getScenicSpotData(null, 1, 10); |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
::v-deep .uni-searchbar { |
||||
background: #fff; |
||||
} |
||||
|
||||
.search-bar { |
||||
flex: 1; |
||||
} |
||||
.no-margin-button { |
||||
margin: 0; |
||||
} |
||||
.container999 { |
||||
width: 100vw; |
||||
font-size: 28rpx; |
||||
min-height: 100vh; |
||||
overflow: hidden; |
||||
color: #6b8082; |
||||
position: relative; |
||||
background-color: #f6f6f6; |
||||
} |
||||
.content { |
||||
width: 100%; |
||||
} |
||||
|
||||
.card { |
||||
width: 100%; |
||||
height: 300rpx; |
||||
background-color: white; |
||||
margin: 0 auto 6rpx auto; |
||||
background: #ffffff; |
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 5px; |
||||
position: relative; |
||||
|
||||
.card-content { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 20rpx 32rpx; |
||||
|
||||
.images { |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
background-color: #eee; |
||||
} |
||||
|
||||
.introduce { |
||||
flex: 1; |
||||
color: #000; |
||||
margin-left: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
overflow: hidden; |
||||
|
||||
.big-font { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top: 8rpx; |
||||
|
||||
.start { |
||||
display: inline-block; |
||||
border: solid 1px rgb(241, 150, 83); |
||||
border-radius: 20rpx; |
||||
color: rgb(241, 150, 83); |
||||
margin-left: 20rpx; |
||||
margin-top: 0; |
||||
padding: 2rpx 20rpx; |
||||
} |
||||
} |
||||
|
||||
.small-font { |
||||
color: #909090; |
||||
margin-top: 14rpx; |
||||
} |
||||
} |
||||
|
||||
.detail-button { |
||||
height: 64rpx; |
||||
font-size: 26rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.noCard { |
||||
width: 100%; |
||||
height: 200rpx; |
||||
margin: auto; |
||||
background-color: white; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #999999; |
||||
box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1); |
||||
border-radius: 10rpx; |
||||
} |
||||
|
||||
.nav { |
||||
position: fixed; |
||||
left: 0; |
||||
top: 9vh; |
||||
color: white; |
||||
width: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
justify-content: flex-start; |
||||
font-size: 24rpx; |
||||
z-index: 996; |
||||
} |
||||
|
||||
.searchInput999 { |
||||
width: 90%; |
||||
margin: 0 auto; |
||||
background: white; |
||||
border-radius: 30rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 56rpx; |
||||
} |
||||
|
||||
.search999 { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
} |
||||
|
||||
.searchBox999 { |
||||
width: 56rpx; |
||||
height: 56rpx; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.input999 { |
||||
color: #999; |
||||
width: 80%; |
||||
} |
||||
.small-btn { |
||||
float: right; |
||||
button { |
||||
margin-right: 25rpx; |
||||
} |
||||
} |
||||
|
||||
.top { |
||||
display: flex; |
||||
align-items: center; |
||||
background: #fff; |
||||
padding: 0 20rpx 0 0; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
position: fixed; |
||||
top: 0; |
||||
z-index: 99; |
||||
|
||||
.search-bar { |
||||
flex: 1; |
||||
position: unset; |
||||
} |
||||
} |
||||
.scroll-body-design { |
||||
height: 100vh; |
||||
margin-top: 55px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue