331 lines
8.3 KiB
Vue
331 lines
8.3 KiB
Vue
<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="realName" required :border-bottom="false">
|
|
<u-input v-model="user.realName" disabled maxlength="30" />
|
|
</u-form-item>
|
|
|
|
<u-form-item label="申请时间" prop="auditTime" required :border-bottom="false">
|
|
<u-input v-model="toDay" disabled placeholder="请选择申请时间" />
|
|
</u-form-item>
|
|
|
|
<u-form-item label="联系电话" prop="phone" required :border-bottom="false">
|
|
<u-input v-model="forms.phone" placeholder="请输入联系电话" maxlength="11" />
|
|
</u-form-item>
|
|
|
|
<div class="line"></div>
|
|
|
|
<u-form-item label="积分类型" prop="applyIntegralType" required :border-bottom="false" right-icon="arrow-right">
|
|
<u-input v-model="forms.applyIntegralType" disabled placeholder="请选择积分类型" @click="showStstus = true" />
|
|
|
|
<u-select v-model="showStstus" :list="$dict.getDict('atWillReportType')" value-name="dictValue" label-name="dictName" @confirm="selectStatus"></u-select>
|
|
</u-form-item>
|
|
|
|
<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="applyFiles" :border-bottom="false" class="avatars" label-position="top">
|
|
<AiUploader v-model="forms.applyFiles" multiple placeholder="上传图片" :limit="9"></AiUploader>
|
|
<!-- action="/admin/file/add2" -->
|
|
</u-form-item>
|
|
|
|
<div class="line"></div>
|
|
</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: {
|
|
phone: '',
|
|
auditTime: '',
|
|
applyIntegralType: '',
|
|
applyIntegralTypeValue: '',
|
|
description: '',
|
|
applyFiles: [],
|
|
},
|
|
|
|
showStstus: false,
|
|
flag: false,
|
|
toDay: '',
|
|
}
|
|
},
|
|
computed: { ...mapState(['user']) },
|
|
onLoad() {
|
|
this.$dict.load('atWillReportType').then(() => {
|
|
var toDay = new Date()
|
|
var year = toDay.getFullYear()
|
|
var month = toDay.getMonth() + 1 < 10 ? '0' + (toDay.getMonth() + 1) : toDay.getMonth() + 1
|
|
var data = toDay.getDate() < 10 ? '0' + toDay.getDate() : toDay.getDate()
|
|
this.toDay = year + '-' + month + '-' + data
|
|
|
|
this.forms.phone = this.user.phone
|
|
})
|
|
},
|
|
onShow() {
|
|
uni.setNavigationBarTitle({
|
|
title: '我要申请',
|
|
})
|
|
},
|
|
methods: {
|
|
submit() {
|
|
if (this.flag) return
|
|
|
|
this.$refs.uForm.validate((valid) => {
|
|
if (valid) {
|
|
if (!this.forms.phone) {
|
|
return this.$u.toast('请输入联系电话')
|
|
}
|
|
|
|
const regPhone = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
|
|
if (this.forms.phone && !regPhone.test(this.forms.phone)) {
|
|
return this.$u.toast('请输入正确的手机号')
|
|
}
|
|
|
|
if (!this.forms.applyIntegralType) {
|
|
return this.$u.toast('请选择积分类型')
|
|
}
|
|
if (!this.forms.content) {
|
|
return this.$u.toast('请输入事件描述')
|
|
}
|
|
|
|
const imgs = []
|
|
if (this.forms.applyFiles) {
|
|
this.forms.applyFiles.map((e) => {
|
|
imgs.push({ url: e.url, id: e.id })
|
|
})
|
|
}
|
|
|
|
this.flag = true
|
|
this.$instance
|
|
.post(`/app/appvillagerintegraldeclare/addOrUpdate`, {
|
|
name: this.user.realName,
|
|
residentPhone: this.forms.phone,
|
|
applyIntegralType: this.forms.applyIntegralTypeValue,
|
|
description: this.forms.content,
|
|
applyFiles: imgs || [],
|
|
residentId: this.user.residentId,
|
|
})
|
|
.then((res) => {
|
|
if (res.code == 0) {
|
|
this.$u.toast('提交成功')
|
|
uni.$emit('updateList')
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 600)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.flag = false
|
|
this.$u.toast('提交失败')
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
selectStatus(e) {
|
|
this.forms.applyIntegralType = e[0].label
|
|
this.forms.applyIntegralTypeValue = e[0].value
|
|
},
|
|
|
|
changeCalendar(e) {
|
|
this.forms.auditTime = e.result
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.add {
|
|
height: 100%;
|
|
|
|
.u-forms {
|
|
padding-bottom: 112px;
|
|
::v-deep .u-form {
|
|
background: #fff;
|
|
.u-form-item {
|
|
padding: 0;
|
|
.u-form-item__body {
|
|
padding: 40px 0 !important;
|
|
margin: 0 45px;
|
|
box-shadow: inset 0px -1px 0px 0px #dddddd;
|
|
.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: 28px;
|
|
|
|
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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contents {
|
|
padding-bottom: 20px !important;
|
|
.u-form-item__body {
|
|
box-shadow: none;
|
|
.u-form-item--right__content__slot {
|
|
.u-input {
|
|
text-align: left !important;
|
|
}
|
|
}
|
|
.default {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatars {
|
|
.u-form-item__body {
|
|
margin: 0 !important;
|
|
padding: 32px 32px 48px 32px !important;
|
|
.u-form-item--left {
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
.ai-uploader {
|
|
.item {
|
|
.info {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.line {
|
|
height: 24px;
|
|
background: #f3f6f9;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: #1365dd;
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
border-radius: 16px;
|
|
font-size: 34px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
</style>
|