121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view class="txjc-box">
|
||
|
|
<view class="time-ranger">
|
||
|
|
<uni-datetime-picker type="datetimerange" v-model="tm" @change="handleRanger"></uni-datetime-picker>
|
||
|
|
<view class="search-btn" @click="searchHandle">
|
||
|
|
搜索
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="pic-box" style="margin-top: 20px; position: relative; height: 800px;">
|
||
|
|
<!-- <u-album :urls="list" singleSize="360" rowCount="1"></u-album> -->
|
||
|
|
<u-image :src="list[current]" width="380" height="400" mode="scaleToFill" :lazy-load="true" @click="previewImage"></u-image>
|
||
|
|
<image src="../../../static/images/icon.png" @click="handleLeft" class="icon-left"></image>
|
||
|
|
<image src="../../../static/images/icon.png" @click="handleRight" class="icon-right"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import moment from "moment"
|
||
|
|
const stm = moment().subtract(7, 'days').add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:ss");
|
||
|
|
const etm = moment().add(1, 'hour').set({minute: 0, second: 0}).format("YYYY-MM-DD HH:mm:ss");
|
||
|
|
export default {
|
||
|
|
props:{
|
||
|
|
source:String,
|
||
|
|
resCode:String,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tm:[stm,etm],
|
||
|
|
list:[],
|
||
|
|
current:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleLeft(){
|
||
|
|
if(this.current > 0){
|
||
|
|
this.current -= 1;
|
||
|
|
}else{
|
||
|
|
uni.$showMsg("已经是第一张图片了")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleRight(){
|
||
|
|
if(this.list.length > this.current){
|
||
|
|
this.current += 1;
|
||
|
|
}else{
|
||
|
|
uni.$showMsg("已经是最后一张图片了")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 预览图片
|
||
|
|
previewImage(){
|
||
|
|
uni.previewImage({
|
||
|
|
urls:this.list
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleRanger(e){
|
||
|
|
this.tm = [...e]
|
||
|
|
},
|
||
|
|
// 搜索
|
||
|
|
searchHandle(){
|
||
|
|
this.getData()
|
||
|
|
|
||
|
|
},
|
||
|
|
async getData(){
|
||
|
|
try{
|
||
|
|
const {data} = await uni.$http.post(
|
||
|
|
"/gunshiApp/xfflood/river/water/image/info",
|
||
|
|
{
|
||
|
|
source:this.source,
|
||
|
|
resCode:this.resCode,
|
||
|
|
stm:this.tm[0],
|
||
|
|
etm:this.tm[1],
|
||
|
|
"pageSo": {
|
||
|
|
"pageSize": 10,
|
||
|
|
"pageNumber": 1
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if(data.code == 200){
|
||
|
|
let newList = data.data.records.map(item =>item.imgPath)
|
||
|
|
this.list = [...newList]
|
||
|
|
}
|
||
|
|
}catch(e){
|
||
|
|
uni.$showMsg()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getData()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.txjc-box{
|
||
|
|
.time-ranger{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
.search-btn{
|
||
|
|
margin: 3px 0 0 5px;
|
||
|
|
color: #3399ef;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.icon-left{
|
||
|
|
position: absolute;
|
||
|
|
top: 23%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
left: 0;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
.icon-right{
|
||
|
|
position: absolute;
|
||
|
|
top: 23%;
|
||
|
|
transform: translateY(-50%) rotate(-180deg);
|
||
|
|
right: 0;
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|