网格动态

This commit is contained in:
liuye
2024-10-10 15:17:02 +08:00
parent 1d043ba4b8
commit 537e6dc6e6
3 changed files with 777 additions and 0 deletions

View File

@@ -0,0 +1,199 @@
<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="图片(最多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: '',
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(res => {
wx.getLocation({
type: 'wgs84',
success: res => {
this.forms.lng = res.longitude
this.forms.lat = res.latitude
},
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,401 @@
<!--suppress ALL -->
<template>
<div class="AppFormReview">
<AiTopFixed v-if="tabs.length">
<div class="tab-select">
<div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index"
@click="tabClick(index, item)">{{ item.name }}<span></span></div>
</div>
<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>
<template v-if="datas.length > 0">
<AiCard v-for="(item, i) in datas" :ref="item.id" :key="i" @click.native="toDetail(item)">
<template #custom>
<div class="titles">{{ item.content }}</div>
<!-- <p class="item-content">
<u-parse :html="item.content"></u-parse>
</p> -->
<div class="img-list" v-if="item.files.length">
<img :src="items.accessUrl" alt="" v-for="(items, index) in item.files" :key="index" v-if="index < 3"
@click.stop="previewImage(item.files, items.accessUrl)"/>
</div>
<div class="flex">
<span class="left">
<span class="type">{{ $dict.getLabel('wyGirdNewsType', item.type) }}</span>
<span class="times">{{ item.name }}</span>
</span>
<!-- <span class="right">
<img src="./img/view-icon.png" alt="">
<span>{{ item.viewCount }}</span>
</span> -->
</div>
</template>
<template #menu v-if="tabIndex == 1">
<div class="menu" @tap.stop="toDetele(item)">删除</div>
</template>
</AiCard>
</template>
<AiEmpty description="暂无数据" v-else></AiEmpty>
<AiFixedBtn>
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()"/>
</AiFixedBtn>
<u-modal v-model="deletShow" content="您确认要删除该条信息吗?" :show-cancel-button="true" :mask-close-able="true"
:show-title="false" @confirm="delet"></u-modal>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'AppFormReview',
appName: '网格动态',
components: {},
props: {},
data() {
return {
datas: [],
keyword: '',
current: 1,
size: 10,
pages: 0,
deletShow: false,
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']).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}`})
},
toDetele(item) {
this.deletShow = true
this.deletId = item.id
this.$refs?.[item.id]?.[0]?.handleClose()
},
delet() {
this.$http.post(`/app/appgirdnews/delete?id=${this.deletId}`).then((res) => {
if (res.code == 0) {
this.current = 1
this.$u.toast('删除成功!')
this.getListInit()
}
})
},
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;
}
}
}
.AppFormReview {
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;
}
::v-deep .AiCard {
background: #f3f6f9;
position: relative;
.start {
background: #fff;
padding: 32px;
border-radius: 16px;
.titles {
width: 600px;
font-size: 32px;
font-weight: 500;
color: #333333;
margin-bottom: 16px;
line-height: 50px;
word-break: break-all;
}
.item-content {
width: 100%;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 44px;
margin-bottom: 24px;
}
.img-list {
margin-bottom: 24px;
img {
width: calc(33% - 16px);
height: 204px;
margin: 0 16px 8px 0;
}
}
.flex {
display: flex;
justify-content: space-between;
.left {
.garydiv {
font-size: 28px;
color: #999999;
background: #eeeeee;
border-radius: 24px;
padding: 4px 16px;
}
.times {
font-size: 28px;
color: #999999;
}
.type {
display: inline-block;
padding: 0 16px;
line-height: 48px;
background: #EEE;
border-radius: 24px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
margin-right: 16px;
}
}
.right {
font-size: 28px;
color: #999;
img {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 8px;
}
.font {
color: #4181ff;
}
}
}
.iconfont-iconMore {
position: absolute;
top: 42px;
right: 32px;
}
}
.mask {
.moreMenu {
.menu {
text-align: center;
line-height: 80px;
width: 192px;
height: 80px;
font-size: 28px;
font-weight: 400;
color: #333333;
}
}
}
}
.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,177 @@
<template>
<div class="Detail">
<div class="header-top">
<div class="titles">{{ data.content }}</div>
<div class="flex">
<span class="left">
<span class="type">{{ $dict.getLabel('wyGirdNewsType', data.type) }}</span>
<span class="times">{{ data.name }}</span>
</span>
</div>
</div>
<div class="img-list" v-if="data.files">
<div class="title">图片</div>
<img :src="item.accessUrl" alt="" v-for="(item, index) in data.files" :key="index" @click="previewImage(data.files, item.accessUrl)" />
</div>
</div>
</template>
<script>
export default {
name: 'Detail',
data() {
return {
data: {},
id: '',
listName: '',
selectList: []
}
},
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
}
})
},
},
}
</script>
<style scoped lang="scss">
.Detail {
height: 100%;
padding: 0 32px;
background: #fff;
.header-top {
padding: 40px 0 32px 0;
.titles {
font-size: 48px;
font-weight: 600;
width: 100%;
font-family: PingFangSC-Semibold, PingFang SC;
color: #333;
line-height: 66px;
word-break: break-all;
margin-bottom: 16px;
}
.titles-bottom {
margin-top: 16px;
font-size: 30px;
color: #999999;
.to-left {
margin-left: 32px;
}
}
}
.header-middle {
padding: 64px 0 48px 0;
background: inherit;
.contsnts {
font-size: 36px;
line-height: 1.5;
word-break: break-all;
background: inherit;
}
img {
margin-top: 30px;
width: 686px;
height: 486px;
}
}
.img-list {
img {
width: 204px;
height: 204px;
margin: 0 8px 8px 0;
}
.title {
width: 100%;
line-height: 112px;
background: #FFF;
font-size: 32px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
}
}
.flex {
display: flex;
justify-content: space-between;
.left {
.garydiv {
font-size: 28px;
color: #999999;
background: #eeeeee;
border-radius: 24px;
padding: 4px 16px;
}
.times {
font-size: 28px;
color: #999999;
}
.type {
display: inline-block;
padding: 0 16px;
line-height: 48px;
background: #EEE;
border-radius: 24px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999;
margin-right: 16px;
}
}
.right {
font-size: 28px;
color: #999;
img {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 8px;
}
.font {
color: #4181ff;
}
}
}
::v-deep uni-video {
width: 100%;
}
}
</style>