初始化产品库
This commit is contained in:
aixianling
281
src/pages/snapshot/snapshot.vue
Normal file
281
src/pages/snapshot/snapshot.vue
Normal file
@@ -0,0 +1,281 @@
|
||||
<template>
|
||||
<div class="snapshot">
|
||||
<div class="banner">
|
||||
<picker :range="dictList" @change="bindPickerChange" range-key="dictName">
|
||||
<div class="picker">
|
||||
{{ reportType }}
|
||||
<u-icon
|
||||
name="arrow-down"
|
||||
:custom-style="{ margin: '0 4px' }"
|
||||
></u-icon>
|
||||
</div>
|
||||
</picker>
|
||||
<u-search
|
||||
placeholder="请输入标题"
|
||||
:show-action="false"
|
||||
v-model="keyword"
|
||||
@clear="search"
|
||||
@search="search"
|
||||
/>
|
||||
</div>
|
||||
<u-tabs
|
||||
class="nav"
|
||||
:list="tabs"
|
||||
:is-scroll="false"
|
||||
:current="currentType"
|
||||
font-size="32"
|
||||
bar-width="192"
|
||||
height="96"
|
||||
@change="handleTabClick"
|
||||
/>
|
||||
<div class="body" v-if="eventList.length > 0">
|
||||
<div
|
||||
class="item"
|
||||
v-for="(item, index) in eventList"
|
||||
:key="index"
|
||||
@click="detail(item)"
|
||||
>
|
||||
<u-row justify="between">
|
||||
<u-row>
|
||||
<img
|
||||
class="avatar"
|
||||
:src="item.portrait ? item.portrait : imgOtherUrl + 'tx.png'"
|
||||
alt=""/>
|
||||
<div class="wrap">
|
||||
<span class="name">{{ item.nickName }}</span>
|
||||
<span class="date">{{ item.createTime }}</span>
|
||||
</div>
|
||||
</u-row>
|
||||
<u-row>
|
||||
<u-icon :name="$cdn + 'Location2@2x.png'" :custom-style="{width:'20px',height:'20px'}"></u-icon>
|
||||
<span class="date">{{item.areaName}}</span>
|
||||
</u-row>
|
||||
</u-row>
|
||||
<div class="content">
|
||||
<span class="text">
|
||||
<span class="targ" v-if="item.reportType">{{
|
||||
$dict.getLabel('atWillReportTypeForCp', item.reportType)
|
||||
}}</span>
|
||||
{{ item.explain }}</span>
|
||||
</div>
|
||||
<div class="photos">
|
||||
<img
|
||||
:src="photo.url"
|
||||
v-for="(photo, idx) in item.files.slice(0,3)"
|
||||
:key="idx"
|
||||
@click.stop="previewImage(index, idx)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AiEmpty from '../../components/AiEmpty/AiEmpty'
|
||||
import {mapState} from "vuex"
|
||||
|
||||
export default {
|
||||
name: "snapshot",
|
||||
components: {AiEmpty},
|
||||
data() {
|
||||
return {
|
||||
dictList: [],
|
||||
index: 0,
|
||||
keyword: '',
|
||||
currentCategory: '',
|
||||
currentType: 0,
|
||||
reportType: '上报类型',
|
||||
reportIndex: '',
|
||||
pageNum: 1,
|
||||
pages: 2,
|
||||
eventList: [],
|
||||
}
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.$dict.load('atWillReportTypeForCp').then(() => {
|
||||
this.dictList = this.$dict.getDict('atWillReportTypeForCp')
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
detail(item) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/snapshot/snapshotDetail?id=" + item.id
|
||||
})
|
||||
},
|
||||
bindPickerChange(e) {
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
let index = e.detail.value
|
||||
this.reportType = this.dictList[index].dictName
|
||||
this.reportIndex = index
|
||||
this.getList()
|
||||
},
|
||||
handleTabClick(i) {
|
||||
this.currentType = i
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.getList()
|
||||
},
|
||||
search() {
|
||||
this.pageNum = 1;
|
||||
this.pages = 2;
|
||||
this.getList()
|
||||
},
|
||||
previewImage(index, idx) {
|
||||
uni.previewImage({
|
||||
urls: this.eventList[index]['files'].map(e => e.url),
|
||||
current: this.eventList[index]['files'][idx].url
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
if (this.pageNum > this.pages) return
|
||||
this.$http.post(`/app/appreportatwillinfo/list`, null, {
|
||||
params: {
|
||||
current: this.pageNum,
|
||||
size: 10,
|
||||
status: this.currentType,
|
||||
reportType: this.reportIndex == 6 ? null : this.reportIndex,
|
||||
address: this.keyword,
|
||||
areaId:this.user?.areaId
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
const eventList = this.pageNum > 1 ? [...this.eventList, ...res.data.records] : res.data.records
|
||||
this.pages = Math.ceil(res.data.total / 10)
|
||||
this.eventList = eventList
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(["user"]),
|
||||
tabs() {
|
||||
return [
|
||||
{name: "待处理", value: 0},
|
||||
{name: "处理完成", value: 1},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.snapshot {
|
||||
min-height: 100%;
|
||||
background: #F5F5F5;
|
||||
|
||||
.banner {
|
||||
background-color: #ffffff;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 30px;
|
||||
|
||||
.picker {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: #ffffff;
|
||||
height: 96px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.body {
|
||||
.item {
|
||||
background-color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
padding: 30px;
|
||||
margin-top: 16px;
|
||||
|
||||
.avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
font-size: 26px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 22px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 18px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.text {
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 44px;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
|
||||
.targ {
|
||||
padding: 6px;
|
||||
background: #E8EFFF;
|
||||
border-radius: 8px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #2266FF;
|
||||
margin-right: 8px;
|
||||
line-height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > img {
|
||||
width: 224px;
|
||||
height: 224px;
|
||||
margin: 0 8px 8px 0;
|
||||
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user