村民圈入库
This commit is contained in:
aixianling
332
src/project/shandong10086/AppVillager/add.vue
Normal file
332
src/project/shandong10086/AppVillager/add.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="u-forms">
|
||||
<u-form class="u-form" :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
|
||||
<u-form-item label="话题类型" prop="topicValue" required :border-bottom="false" right-icon="arrow-right">
|
||||
<u-input v-model="forms.topicValue" disabled placeholder="请选择话题类型" @click="showStstus = true" />
|
||||
|
||||
<u-select v-model="showStstus" :list="$dict.getDict('villagerCircleTopic')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="form-item form-item__textarea">
|
||||
<div class="form-item__wrapper">
|
||||
<div class="form-item__title">
|
||||
<i>*</i>
|
||||
<h2>事件描述</h2>
|
||||
</div>
|
||||
<div class="form-item__right">
|
||||
<textarea v-model="forms.content" class="textareas" :maxlength="500" placeholder="分享你的动态"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="图片上传 (最多9张)" prop="pictures" :border-bottom="false" class="avatars" label-position="top">
|
||||
<AiUploader :def.sync="forms.pictures" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="所在位置" class="gpsDescs" prop="gpsDesc" required :border-bottom="false" right-icon="arrow-right">
|
||||
<u-input v-model="forms.gpsDesc" disabled placeholder="点击定位" @click="chooseAddress" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</div>
|
||||
|
||||
<div class="btn" @click="submit">提交</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'add',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
topic: '',
|
||||
topicValue: '',
|
||||
content: '',
|
||||
pictures: [],
|
||||
gpsDesc: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
},
|
||||
showStstus: false,
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad() {
|
||||
this.$dict.load('villagerCircleTopic').then(() => {
|
||||
// var value = wx.getStorageSync('lat_lng')
|
||||
// this.forms.lat = value.latitude
|
||||
// this.forms.lng = value.longitude
|
||||
// this.forms.gpsDesc = value.name
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '发布话题',
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.flag) return
|
||||
|
||||
this.$refs.uForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.forms.topicValue) {
|
||||
return this.$u.toast('请选择话题类型')
|
||||
}
|
||||
if (!this.forms.content) {
|
||||
return this.$u.toast('请输入内容')
|
||||
}
|
||||
if (!this.forms.gpsDesc) {
|
||||
return this.$u.toast('请选择所在位置')
|
||||
}
|
||||
if (!this.forms.lat && !this.forms.lng) {
|
||||
return this.$u.toast('请选择所在位置')
|
||||
}
|
||||
|
||||
const imgs = []
|
||||
if (this.forms.pictures) {
|
||||
this.forms.pictures.map((e) => {
|
||||
imgs.push({ url: e.url, id: e.id })
|
||||
})
|
||||
}
|
||||
|
||||
this.$instance
|
||||
.post(`/app/appvillagercircleinfo/addOrUpdate`, {
|
||||
topic: this.forms.topic,
|
||||
content: this.forms.content,
|
||||
pictures: imgs || [],
|
||||
createUserResidentId: this.user.id,
|
||||
areaId: this.user.areaId,
|
||||
gpsDesc: this.forms.gpsDesc,
|
||||
lat: this.forms.lat,
|
||||
lng: this.forms.lng,
|
||||
id: this.id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('提交成功')
|
||||
// uni.clearStorageSync()
|
||||
uni.$emit('updateList')
|
||||
this.flag = true
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 600)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.flag = false
|
||||
this.$u.toast('提交失败')
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectStatus(e) {
|
||||
this.forms.topic = e[0].value
|
||||
this.forms.topicValue = e[0].label
|
||||
},
|
||||
|
||||
chooseAddress() {
|
||||
uni.authorize({
|
||||
scope: 'scope.userLocation',
|
||||
success: () => {
|
||||
uni.chooseLocation({
|
||||
success: (res) => {
|
||||
this.forms.gpsDesc = res.name
|
||||
this.forms.lat = res.latitude
|
||||
this.forms.lng = res.longitude
|
||||
// uni.setStorageSync('lat_lng', res)
|
||||
},
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
this.$dialog
|
||||
.confirm({
|
||||
content: '您未授权定位权限，无法选择位置',
|
||||
})
|
||||
.then(() => {
|
||||
wx.openSetting({
|
||||
success: (res) => {
|
||||
if (!res.authSetting['scope.userLocation']) {
|
||||
this.$dialog
|
||||
.alert({
|
||||
content: '您未授权定位权限，无法选择位置',
|
||||
})
|
||||
.then(() => {})
|
||||
} else {
|
||||
console.log('设置定位权限')
|
||||
}
|
||||
},
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
.u-forms {
|
||||
padding-bottom: 112px;
|
||||
::v-deep .u-form {
|
||||
background: #fff;
|
||||
.u-form-item {
|
||||
padding: 0 32px !important;
|
||||
.u-form-item__body {
|
||||
padding: 30px 0 !important;
|
||||
.u-form-item--right__content__slot {
|
||||
padding-bottom: 0;
|
||||
.u-input {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
padding-left: 28px;
|
||||
|
||||
.form-item__wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 128px;
|
||||
padding-right: 28px;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
|
||||
span {
|
||||
max-width: 400px;
|
||||
margin-right: 8px;
|
||||
color: #333333;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.form-item__wrapper {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 32px;
|
||||
color: #fa3534;
|
||||
opacity: 0.65;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding: 0 4px;
|
||||
font-size: 28px;
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-item__imgs,
|
||||
&.form-item__textarea {
|
||||
.form-item__wrapper {
|
||||
display: block;
|
||||
height: auto;
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.form-item__title {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.form-item__right {
|
||||
padding-left: 18px;
|
||||
.textareas {
|
||||
color: #303133;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatars {
|
||||
.ai-uploader {
|
||||
.AiImage {
|
||||
.u-image {
|
||||
// margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gpsDescs {
|
||||
.u-form-item {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 24px;
|
||||
background: #f3f6f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: 999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user