婚丧嫁娶
This commit is contained in:
花有清香月有阴
230
src/apps/AppMarryAndDie/Add.vue
Normal file
230
src/apps/AppMarryAndDie/Add.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="header-description">
|
||||
<u-form :model="forms" ref="uForm" label-width="auto" :border-bottom="false">
|
||||
<u-form-item label="类型" prop="type" required :border-bottom="false" right-icon="arrow-right">
|
||||
<u-input v-model="forms.type" disabled placeholder="请选择类型" @click="showStstus = true" />
|
||||
|
||||
<u-select v-model="showStstus" :list="$dict.getDict('marriageType')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="事主姓名" prop="name" required :border-bottom="false" class="names">
|
||||
<u-input v-model="forms.name" placeholder="请输入事主姓名" maxlength="30" />
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="方式" prop="modeType" required :border-bottom="false" class="modeTypes" right-icon="arrow-right">
|
||||
<u-input v-model="forms.modeType" disabled placeholder="请选择类型" @click="showModeType = true" />
|
||||
|
||||
<u-select v-model="showModeType" :list="$dict.getDict('modeType')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="联系电话" prop="phone" required :border-bottom="false" class="phones">
|
||||
<u-input v-model="forms.phone" placeholder="请输入联系电话" maxlength="16" />
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="地址" prop="address" required :border-bottom="false" right-icon="arrow-right">
|
||||
<u-input v-model="forms.address" placeholder="请输入地址" />
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="活动详情" prop="content" required :border-bottom="false" label-position="top" class="contents">
|
||||
<u-input v-model="forms.content" placeholder="请输入详细描述信息" type="textarea" auto-height height="100" maxlength="500" />
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
|
||||
<u-form-item label="图片上传 (最多9张)" prop="files" :border-bottom="false" class="avatars" label-position="top">
|
||||
<AiUploader :def.sync="forms.files" multiple placeholder="上传图片" :limit="9"></AiUploader>
|
||||
</u-form-item>
|
||||
|
||||
<div class="line"></div>
|
||||
</u-form>
|
||||
</div>
|
||||
|
||||
<div class="btn" @click="submit">确认上报</div>
|
||||
|
||||
<AiBack></AiBack>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Add',
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
forms: {
|
||||
type: '',
|
||||
typeValue: '',
|
||||
name: '',
|
||||
modeType: '',
|
||||
|
||||
modeTypeValue: '',
|
||||
phone: '',
|
||||
address: '',
|
||||
content: '',
|
||||
|
||||
personType: 0,
|
||||
files: [],
|
||||
},
|
||||
showStstus: false,
|
||||
showModeType: false,
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
onLoad() {
|
||||
console.log(this.user.id)
|
||||
this.$dict.load('marriageType', 'modeType')
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.flag) return
|
||||
|
||||
this.$refs.uForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.forms.type) {
|
||||
return this.$u.toast('请选择')
|
||||
}
|
||||
if (!this.forms.name) {
|
||||
return this.$u.toast('请输入事主姓名')
|
||||
}
|
||||
if (!this.forms.phone) {
|
||||
return this.$u.toast('请输入联系电话')
|
||||
}
|
||||
if (!this.forms.address) {
|
||||
return this.$u.toast('请输入地址')
|
||||
}
|
||||
if (!this.forms.content) {
|
||||
return this.$u.toast('请输入详细描述信息')
|
||||
}
|
||||
|
||||
const imgs = []
|
||||
if (this.forms.files) {
|
||||
this.forms.files.map((e) => {
|
||||
imgs.push({ url: e.url, id: e.id })
|
||||
})
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http
|
||||
.post(`/app/appvisitvondolence/addOrUpdate`, {
|
||||
type: this.forms.typeValue,
|
||||
name: this.forms.name,
|
||||
modeType: this.forms.modeTypeValue,
|
||||
phone: this.forms.phone,
|
||||
|
||||
address: this.forms.address,
|
||||
content: this.forms.content,
|
||||
createUserId: this.user.id,
|
||||
personType: this.forms.personType,
|
||||
|
||||
fileIds: imgs || [],
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.$u.toast('发布成功')
|
||||
this.flag = false
|
||||
uni.navigateTo({ url: `./AppMarryAndDie` })
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast('失败')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectStatus(e) {
|
||||
if (this.showStstus == true) {
|
||||
console.log(e)
|
||||
this.forms.type = e[0].label
|
||||
this.forms.typeValue = e[0].value
|
||||
}
|
||||
if (this.showModeType == true) {
|
||||
console.log(e)
|
||||
this.forms.modeType = e[0].label
|
||||
this.forms.modeTypeValue = e[0].value
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
height: 100%;
|
||||
padding-bottom: 112px;
|
||||
|
||||
.header-description {
|
||||
::v-deep .u-form {
|
||||
.u-form-item {
|
||||
padding: 0 45px !important;
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
padding-bottom: 0;
|
||||
.u-input {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.names,
|
||||
.modeTypes,
|
||||
.phones {
|
||||
.u-form-item__body {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-item:last-child {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.avatars,
|
||||
.contents {
|
||||
padding-bottom: 20px !important;
|
||||
.u-form-item__body {
|
||||
.u-form-item--right__content__slot {
|
||||
.u-input {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
.default {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user