chuangte_bike_newxcx/page_user/shanghugl/index.vue

188 lines
4.1 KiB
Vue

<template>
<view class="page">
<u-navbar title="公告管理" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
title-size='36' height='36' id="navbar"></u-navbar>
<view class="container">
<!-- 标题输入 -->
<view class="input-section">
<view class="section-title">公告标题</view>
<u-input v-model="title" placeholder="请输入公告标题" placeholder-style="color: #C7CDD3"
:custom-style="inputStyle"></u-input>
</view>
<!-- 内容编辑 -->
<view class="input-section">
<view class="section-title">公告内容</view>
<textarea
style="background-color: #F7F8FA;width: 100%;padding: 10rpx;box-sizing: border-box;border-radius: 10rpx;"
v-model="content" placeholder="请输入公告内容" height="400" placeholder-style="color: #C7CDD3"
:custom-style="textareaStyle"></textarea>
</view>
<!-- 操作按钮 -->
<view class="action-buttons">
<u-button type="default" shape="circle" @click="cancel" custom-style="button-cancel">取消</u-button>
<u-button type="primary" shape="circle" @click="publish" :disabled="!canPublish"
custom-style="button-publish">发布公告</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
title: '',
content: '',
inputStyle: {
backgroundColor: '#F7F8FA',
borderRadius: '12rpx',
padding: '24rpx',
fontSize: '32rpx',
color: '#262B37'
},
textareaStyle: {
backgroundColor: '#F7F8FA',
borderRadius: '12rpx',
padding: '24rpx',
fontSize: '32rpx',
color: '#262B37'
},
ggobj: {},
areaId:''
}
},
computed: {
canPublish() {
return this.title.trim() && this.content.trim()
}
},
onShow() {
this.gethuoqu()
},
methods: {
// 获取最新公告
gethuoqu() {
this.areaId = uni.getStorageSync('adminAreaid')
this.$u.get(`/app/agreement/latest?areaId=${this.areaId}&agreementType=0`).then(res => {
if (res.code == 200) {
if (res.data) {
this.title = res.data.title
this.content = res.data.content
this.ggobj = res.data
} else {
this.ggobj = null
}
}
})
},
//取消编辑
cancel() {
uni.showModal({
title: '提示',
content: '确定要取消编辑吗?',
success: (res) => {
if (res.confirm) {
uni.navigateBack()
}
}
})
},
// 点击发布公告
publish() {
uni.showLoading({
title: '发布中...'
})
let data = {
title: this.title,
content: this.content,
agreement: 0,
areaId:this.areaId,
id:this.ggobj.id == undefined ? '' : this.ggobj.id
}
if (this.ggobj == null) {
this.$u.post(`/app/agreement/notice`, data).then(res => {
if (res.code == 200) {
uni.hideLoading()
uni.showToast({
title: '公告发布成功',
icon: 'success'
})
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
} else {
this.$u.put(`/app/agreement/notice`, data).then(res => {
if (res.code == 200) {
uni.hideLoading()
uni.showToast({
title: '公告发布成功',
icon: 'success'
})
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
}
}
}
}
</script>
<style lang="scss">
page {
background: #fff;
}
.container {
padding: 30rpx;
}
.input-section {
margin-bottom: 40rpx;
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #262B37;
margin-bottom: 20rpx;
}
}
.action-buttons {
display: flex;
justify-content: space-between;
margin-top: 60rpx;
.u-button {
width: 48%;
height: 90rpx;
font-size: 32rpx;
}
.button-cancel {
background: #F0F2F5 !important;
color: #6B7785 !important;
border: none !important;
}
.button-publish {
background: linear-gradient(90deg, #4C97E7, #4297F3) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4rpx 12rpx rgba(66, 151, 243, 0.3);
&[disabled] {
opacity: 0.6 !important;
}
}
}
</style>