AppGridReview

This commit is contained in:
liuye
2024-10-11 17:47:23 +08:00
parent a7643117e9
commit 6f820ced1b
3 changed files with 3 additions and 3 deletions

View File

@@ -0,0 +1,210 @@
<template>
<div class="Add">
<div class="header-description">
<u-form :model="forms" ref="uForm" label-width="auto">
<u-form-item label="内容" prop="content" required label-position="top">
<u-input v-model="forms.content" :focus="true" placeholder="请输入内容(300字以内)" type="textarea" auto-height
height="100" maxlength="300"/>
</u-form-item>
<u-form-item label="类型" prop="type" required>
<div class="right" @click="showType=true">
<span v-if="forms.typeName === ''" class="color-999">请选择类型</span>
<span v-else>{{ forms.typeName }}</span>
<u-icon name="arrow-right" color="#CCCCCC" class="right-icon"></u-icon>
</div>
<u-select v-model="showType" :list="$dict.getDict('wyGirdNewsType')" value-name="dictValue" label-name="dictName"
@confirm="selectType"></u-select>
</u-form-item>
<u-form-item label="地址" prop="address">
<div class="right">
<span class="color-999">{{ forms.address }}</span>
</div>
</u-form-item>
<u-form-item label="图片(最多9张)" prop="files" class="avatars" label-position="top">
<AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9"
action="/admin/file/add2"></AiUploader>
</u-form-item>
</u-form>
</div>
<div class="pad-b112"></div>
<div class="btn" @click="submit">发布</div>
</div>
</template>
<script>
import {mapState, mapActions} from 'vuex'
export default {
name: 'Add',
data() {
return {
id: '',
forms: {
content: '',
type: '',
typeName: '',
files: [],
lat: '',
lng: '',
address: '',
girdCode: '',
girdName: '',
girdId: '',
girdMemberId: ''
},
showType: false,
flag: false
}
},
computed: {...mapState(['user'])},
onLoad() {
console.log(this.user)
this.forms.girdCode = this.user.gridInfo.girdCode
this.forms.girdName = this.user.girdName
this.forms.girdId = this.user.girdId
this.forms.girdMemberId = this.user.girdMemberId
this.$dict.load(['wyGirdNewsType'])
// this.forms.lng = '114.305000'
// this.forms.lat = '30.592800'
this.getLocation()
},
onShow() {
document.title = '网格动态'
},
methods: {
...mapActions(['injectJWeixin']),
submit() {
if (this.flag) return
if (!this.forms.content) {
return this.$u.toast('请输入内容')
}
if (this.forms.typeName === '') {
return this.$u.toast('请选择类型')
}
this.$http.post(`/app/appgirdnews/addOrUpdate`, {...this.forms}).then((res) => {
if (res.code == 0) {
uni.$emit('update')
this.$u.toast('发布成功')
this.flag = true
setTimeout(() => {
uni.navigateBack()
}, 600)
}
})
},
selectType(e) {
this.forms.type = e[0].value
this.forms.typeName = e[0].label
},
getLocation () {
this.injectJWeixin(['getLocation']).then(res1 => {
wx.getLocation({
type: 'wgs84',
success: res2 => {
this.forms.lng = res2.longitude
this.forms.lat = res2.latitude
this.$http.post('/api/appdvcpconfig/apiForward', `https://apis.map.qq.com/ws/geocoder/v1/?location=${res2.latitude},${res2.longitude}&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1`).then(res => {
if (res.code === 0) {
this.forms.address = res.data.result.address
}
})
},
error: err => {
console.log(err)
}
})
})
},
},
}
</script>
<style lang="scss" scoped>
.Add {
height: 100%;
.header-description {
::v-deep .u-form {
.u-form-item {
.u-form-item__body {
.u-form-item--right__content__slot {
padding-bottom: 0;
}
}
}
.u-form-item:last-child {
margin-bottom: 0;
padding-bottom: 20px !important;
}
.avatars {
.u-form-item__body {
.default {
width: 160px;
height: 160px;
}
}
}
}
}
.pad-b112 {
padding-bottom: 224px;
}
.btn {
position: fixed;
bottom: 0;
width: 100%;
height: 112px;
line-height: 112px;
background: #1365dd;
text-align: center;
font-size: 32px;
font-weight: 500;
color: #ffffff;
z-index: 9999;
}
.right {
width: 100%;
text-align: right;
.right-icon {
vertical-align: middle;
margin-left: 8px;
}
.area-right-icon {
margin: -60px 0 0 8px;
}
::v-deep .AiAreaPicker {
display: inline-block;
width: calc(100% - 50px);
.areaSelector {
div {
width: 100%;
box-sizing: border-box;
text-align: right;
}
.fixedTop {
text-align: left;
}
}
}
}
.color-999 {
color: #999;
}
}
</style>

View File

@@ -0,0 +1,300 @@
<!--suppress ALL -->
<template>
<div class="AppGridReview">
<AiTopFixed v-if="tabs.length">
<u-search class="serach_content" placeholder="请输入内容" :show-action="false" v-model="keyword" @clear="clearSearch"
@search="getListInit"></u-search>
<div class="select-top">
<div class="tab-item">
<AiPagePicker type="gird" valueObj nodeKey="id" formType="2" @select="handleSelectGird" action="/app/appgirdmemberinfo/queryMyGirdList">
<AiMore v-model="searchGrid.girdName" icon="arrow-down" placeholder="所属网格"/>
</AiPagePicker>
</div>
<div class="tab-item" @click="showType = true">
<AiMore v-model="typeText" icon="arrow-down" placeholder="类型"/>
</div>
<u-select v-model="showType" :list="typeList" value-name="dictValue" label-name="dictName" @confirm="confirmType"></u-select>
</div>
</AiTopFixed>
<div class="user-list">
<div class="item" v-for="(item, index) in datas" :key="index" @click="toDetail(item)">
<div class="item-top">
<div class="title">{{item.content}}</div>
<div class="info">所属网格{{item.girdName}}</div>
<div class="info">类型{{$dict.getLabel('wyGirdNewsType', item.type)}}</div>
<div class="info">网格员姓名{{item.name}}</div>
</div>
<div class="item-bottom">
<div class="status" :class="`status${item.status}`">{{$dict.getLabel('auditStatus', item.status)}}</div>
<div class="time">{{item.createTime}}</div>
</div>
</div>
<AiEmpty v-if="!datas.length"></AiEmpty>
</div>
<AiFixedBtn>
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()"/>
</AiFixedBtn>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'AppGridReview',
appName: '网格动态',
components: {},
props: {},
data() {
return {
datas: [],
keyword: '',
current: 1,
size: 10,
pages: 0,
tabs: [{name: '全部'}, {name: '我发布的'}],
tabIndex: 0,
searchGrid: {},
showType: false,
type: '',
typeText: '',
typeList: []
}
},
computed: {
...mapState(['user']),
},
onLoad() {
this.searchGrid.girdId = this.user.girdId
this.searchGrid.girdName = this.user.girdName
this.$dict.load(['wyGirdNewsType', 'auditStatus']).then(() => {
this.typeList = this.$dict.getDict('wyGirdNewsType')
this.typeList.unshift({dictName: '全部', dictValue: ''})
this.getList()
})
uni.$on('update', () => {
this.current = 1
this.getList()
})
},
onShow() {
document.title = '网格动态'
},
methods: {
previewImage(images, img) {
uni.previewImage({
urls: images.map(v => v.url),
current: img
})
},
tabClick(index) {
this.tabIndex = index
this.getListInit()
},
getListInit() {
this.current = 1
this.getList()
},
getList() {
this.$http.post('/app/appgirdnews/list', null, {
params: {
size: 20,
current: this.current,
girdId: this.searchGrid.id,
content: this.keyword,
createUserId: this.tabindex == 1 ? this.user.id : '',
type: this.type
},
}).then((res) => {
if (res.code == 0) {
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
this.pages = res.data.pages
}
})
},
toAdd() {
uni.navigateTo({url: './Add'})
},
toDetail(row) {
uni.navigateTo({url: `./Detail?id=${row.id}`})
},
handleSelectGird(v) {
console.log(v)
this.searchGrid = v
this.getListInit()
},
confirmType(e) {
this.type = e[0].value
this.typeText = e[0].label
this.getListInit()
},
},
onReachBottom() {
this.current = this.current + 1
this.getList()
},
}
</script>
<style scoped lang="scss">
::v-deep .content {
padding: 0 !important;
}
.tab-select {
width: 100%;
height: 96px;
line-height: 96px;
background: #3975C6;
display: flex;
.item {
flex: 1;
text-align: center;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #CDDCF0;
}
.active {
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
position: relative;
color: #fff;
span {
width: 48px;
height: 4px;
background: #FFF;
position: absolute;
bottom: 14px;
left: 50%;
margin-left: -24px;
}
}
}
.AppGridReview {
height: 100%;
.select-top {
background: #fff;
display: flex;
padding: 24px 0;
border-top: 1px solid #eee;
.tab-item {
flex: 1;
text-align: center;
line-height: 48px;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
img {
width: 32px;
height: 32px;
margin-left: 8px;
vertical-align: middle;
}
}
.tab-item:nth-of-type(1) {
border-right: 1px solid #eee;
}
}
.u-search {
background: #fff;
padding: 20px 30px;
}
::v-deep .u-search {
margin-bottom: 0!important;
}
.user-list {
padding: 24px 32px 0 32px;
box-sizing: border-box;
.item {
width: 100%;
background: #FFF;
border-radius: 16px;
margin-bottom: 24px;
.item-top {
padding: 24px;
.title {
line-height: 48px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #333;
margin-bottom: 12px;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.info {
line-height: 48px;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #666;
}
}
.item-bottom {
padding: 18px 24px;
border-top: 1px solid #E4E5E6;
display: flex;
justify-content: space-between;
.time {
line-height: 48px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #999;
}
.status0{
color: #FF883C;
}
.status1{
color: #2EA222;
}
.status2{
color: #F46;
}
}
}
}
.AiFixedBtn {
.movableArea {
.addBtn {
display: flex;
justify-content: center;
align-items: center;
width: 96px;
height: 96px;
flex-shrink: 0;
background: $uni-color-primary;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
font-size: 48px;
color: #fff;
border-radius: 50%;
}
}
}
::v-deep uni-video {
width: 100%;
}
}
</style>

View File

@@ -0,0 +1,267 @@
<template>
<div class="Detail">
<div class="header-top">
<div class="avatars" v-if="data.name">{{ data.name.substring(data.name.length, data.name.length - 2) }}</div>
<div class="right">
<div class="names">{{ data.name }}的上报</div>
<div class="times">{{ data.createTime }}</div>
<!-- <span class="edit-btn" @click="toEdit()" v-if="data.eventStatus != 2 && data.eventStatus != 3">编辑</span> -->
</div>
</div>
<div class="header-middle">
<div class="titles">{{ data.content }}</div>
<span class="status" :class="`status${data.status}`">{{$dict.getLabel('auditStatus', data.status)}}</span>
<div class="card solid">
<span class="card-left">所属网格</span>
<span class="card-right">{{data.girdName}}</span>
</div>
<div class="card solid">
<span class="card-left">类型</span>
<span class="card-right">{{$dict.getLabel('wyGirdNewsType', data.type)}}</span>
</div>
<div class="card">
<span class="card-left">地址</span>
</div>
<div class="card solid">
<span class="card-right">{{data.address}}</span>
</div>
<div v-if="data.status != 0">
<div class="card" v-if="data.examineOpinion">
<span class="card-left">审批意见</span>
</div>
<div class="card solid" v-if="data.examineOpinion">
<span class="card-right">{{data.examineOpinion}}</span>
</div>
<div class="card solid">
<span class="card-left">审批人</span>
<span class="card-right">{{data.examineUserName}}</span>
</div>
<div class="card solid">
<span class="card-left">审批时间</span>
<span class="card-right">{{data.examineTime}}</span>
</div>
</div>
<div class="cards" v-if="data.files && data.files.length">
<span class="card-left" style="color:#999">图片</span>
</div>
<img :src="item.url" alt="" v-for="(item, i) in data.files" :key="i" @click="previewImage(data.files, item.accessUrl)"/>
</div>
<div class="footer-btn" v-if="data.status == 0 && user.girdMemberId == data.girdMemberId">
<div class="btn" @click="deletShow=true">删除</div>
</div>
<u-modal v-model="deletShow" content="您确认要删除该条信息吗?" :show-cancel-button="true" :mask-close-able="true"
:show-title="false" @confirm="confirm"></u-modal>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'Detail',
data() {
return {
data: {},
id: '',
selectList: [],
deletShow: false,
}
},
computed: {
...mapState(['user']),
},
onLoad(o) {
this.id = o.id
this.$dict.load(['wyGirdNewsType']).then(() => {
this.getDetail()
})
},
onShow() {
document.title = '网格动态'
},
methods: {
previewImage(images, img) {
uni.previewImage({
urls: images.map(v => v.url),
current: img
})
},
getDetail() {
this.$http.post(`/app/appgirdnews/queryDetailById?id=${this.id}`).then((res) => {
if (res?.data) {
this.data = res.data
}
})
},
confirm() {
this.$http.post(`/app/appgirdnews/delete?id=${this.id}`).then((res) => {
if (res.code == 0) {
uni.$emit('update')
this.$u.toast('删除成功!')
setTimeout(() => {
uni.navigateBack()
}, 500);
}
})
},
},
}
</script>
<style scoped lang="scss">
uni-page-body {
height: 100%;
padding-top: 26px;
}
.Detail {
height: 100%;
.header-top {
background-color: #fff;
display: flex;
padding: 32px 32px 0;
.avatars {
width: 80px;
height: 80px;
line-height: 80px;
background: #3975c6;
border-radius: 50%;
color: #fff;
text-align: center;
font-size: 28px;
font-weight: 500;
margin-right: 16px;
}
.right {
.names {
font-size: 32px;
font-weight: 500;
}
.times {
margin-top: 10px;
font-size: 28px;
color: #999999;
}
.edit-btn {
position: absolute;
color: #197df0;
top: 32px;
right: 32px;
width: 150px;
height: 44px;
line-height: 44px;
text-align: right;
}
}
}
.header-middle {
padding: 0 32px 180px 32px;
background: #fff;
.titles {
padding: 32px 0;
line-height: 1.4;
word-break: break-all;
font-size: 40px;
font-weight: 600;
}
.status {
display: inline-block;
margin-bottom: 14px;
padding: 4px 8px;
font-size: 26px;
color: #fff;
border-radius: 8px;
}
.status0 {
background: #ff883c;
}
.status1 {
background: #2EA222;
}
.status2 {
background: #F46;
}
.status3 {
background: #ff4466;
}
.card {
display: flex;
justify-content: space-between;
padding: 34px 0;
.card-left {
width: 46%;
font-size: 32px;
color: #999999;
}
.card-right {
font-size: 32px;
word-break: break-all;
padding-right: 16px;
.u-icon {
margin-left: 8px;
}
}
}
.solid {
border-bottom: 1px solid #ddd;
}
// .card:last-child {
// border-bottom: none;
// }
.cards {
padding: 34px 0;
}
img {
width: 220px;
height: 220px;
margin: 0 8px 8px 0;
}
img:nth-of-type(3n) {
margin-right: 0;
}
}
.footer-btn {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
padding: 16px 32px 52px 16px;
box-sizing: border-box;
background-color: #fff;
.btn {
width: 100%;
text-align: center;
height: 96px;
line-height: 94px;
border: 1px solid #2183FF;
border-radius: 8px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
color: #2183FF;
margin-bottom: 16px;
}
}
}
</style>