AppGridReview
This commit is contained in:
liuye
210
src/project/biaopin/AppGridReview/Add.vue
Normal file
210
src/project/biaopin/AppGridReview/Add.vue
Normal 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>
|
||||
Reference in New Issue
Block a user