积分代申请
This commit is contained in:
liuye
287
src/project/fd/AppPointsReview/integralAdd.vue
Normal file
287
src/project/fd/AppPointsReview/integralAdd.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="integralAdd">
|
||||
<div class="item">
|
||||
<div class="left"><span class="tips">*</span>姓名</div>
|
||||
<div class="right" :class="form.name ? '' : 'color-999'" >
|
||||
<AiPagePicker single @select="handleSelectUser" type="sysUser" style="width:100%;text-align:right;" action="/app/appwechatuserqujing/listByFdAppletUser" nodeKey="openId">
|
||||
<AiMore v-model="form.name"/>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left"><span class="tips">*</span>身份证</div>
|
||||
<div class="right" :class="form.idNumber ? '' : 'color-999'">{{form.idNumber || '自动获取'}}</div>
|
||||
</div>
|
||||
<div class="item mar-b32">
|
||||
<div class="left"><span class="tips">*</span>手机号</div>
|
||||
<div class="right" :class="form.phone ? '' : 'color-999'">{{form.phone || '自动获取'}}</div>
|
||||
</div>
|
||||
<div class="item mar-b32">
|
||||
<div class="left"><span class="tips">*</span>事件类型</div>
|
||||
<div class="right">
|
||||
<AiSelect :list="dictList" v-model="form.applyItemId"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item mar-b32">
|
||||
<div class="left"><span class="tips">*</span>积分值</div>
|
||||
<div class="right">
|
||||
<u-number-box v-model="form.applyIntegral" input-height="44" size="14" :min="1" :max="100"></u-number-box>
|
||||
</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<p><span class="tips">*</span>详情描述</p>
|
||||
<textarea v-model="form.content" :maxlength="300" placeholder="请输入详细描述..."></textarea>
|
||||
<div class="text-tips">{{ form.content.length }}/300</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<p>上传图片</p>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="form.images" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
|
||||
</div>
|
||||
<div class="text-tips left">可上传图片，最多上传9张。</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<p>上传视频</p>
|
||||
<div class="upload">
|
||||
<AiUploader :def.sync="form.videos" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
|
||||
</div>
|
||||
<div class="text-tips left">可上传视频，最大30M。</div>
|
||||
</div>
|
||||
|
||||
<div class="item mar-b32">
|
||||
<div class="left">所属网格</div>
|
||||
<!-- <AiPagePicker type="gird" v-model="form.girdId" :params="{ formType: 2 }" @select="handleSelectGrid" nodeKey="id">
|
||||
<AiMore v-model="form.girdName"/>
|
||||
</AiPagePicker> -->
|
||||
<div class="right">{{form.girdName}}</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div hover-class="text-hover" @click="submit">提交申请</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: "integralAdd",
|
||||
appName: '积分申请',
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: '',
|
||||
userId: '',
|
||||
phone: '',
|
||||
idNumber: '',
|
||||
applyItemId: '',
|
||||
applyIntegral: 0,
|
||||
applyItemName: '',
|
||||
content: '',
|
||||
files: [],
|
||||
images: [],
|
||||
videos: [],
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
},
|
||||
list: [],
|
||||
dictList: [],
|
||||
flag: false,
|
||||
id: '',
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
onLoad(o) {
|
||||
if(o.id) {
|
||||
this.id = o.id
|
||||
this.getDetail()
|
||||
}
|
||||
this.form.girdId = this.user.girdId
|
||||
this.form.girdName = this.user.girdName
|
||||
this.$dict.load(['clapEventStatus'])
|
||||
this.getType()
|
||||
},
|
||||
onShow() {
|
||||
document.title = '积分代申请'
|
||||
},
|
||||
watch: {
|
||||
'form.applyItemId'(v) {
|
||||
if(v) {
|
||||
this.form.applyItemName = this.list.filter(e=> (e.id==v))[0].ruleName
|
||||
this.form.applyIntegral = this.list.filter(e => (e.id == v))[0].integral
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if(this.flag) return
|
||||
|
||||
if (!this.form.name) {
|
||||
return this.$u.toast('请选择代申请人员')
|
||||
}
|
||||
|
||||
if (!this.form.applyItemId) {
|
||||
return this.$u.toast('请选择事件类型')
|
||||
}
|
||||
|
||||
if (!this.form.content) {
|
||||
return this.$u.toast('请输入详细描述')
|
||||
}
|
||||
|
||||
if ((this.form.images.length + this.form.videos.length) > 9) {
|
||||
return this.$u.toast('图片和视频不得超过9个')
|
||||
} else {
|
||||
this.form.files = [...this.form.images,...this.form.videos]
|
||||
}
|
||||
|
||||
this.flag = true
|
||||
this.$http.post(`/app/appintegraluserapply/add`,{
|
||||
...this.form
|
||||
}).then(res=> {
|
||||
if(res?.data) {
|
||||
this.$u.toast('提交成功')
|
||||
uni.$emit('updateList')
|
||||
setTimeout(()=> {
|
||||
uni.navigateBack()
|
||||
},500)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 事件类型
|
||||
getType() {
|
||||
this.$http.post(`/app/appintegralrule/listByFD`).then(res=> {
|
||||
if(res?.data) {
|
||||
this.list = res.data
|
||||
this.dictList = res.data.map(v => {
|
||||
return {
|
||||
value: v.id,
|
||||
label: v.ruleName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectGrid(v) {
|
||||
this.form.girdName = v.girdName
|
||||
this.form.girdId = v.girdId
|
||||
},
|
||||
getDetail() {
|
||||
this.$http.post(`/app/appintegraluserapply/queryDetailById?id=${this.id}`).then(res => {
|
||||
if (res?.data) {
|
||||
this.form = res.data
|
||||
this.form.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.name.split('.')[1])))
|
||||
this.form.videos = res.data.files.filter(e => (['mp4'].includes(e.name.split('.')[1])))
|
||||
this.form.files = []
|
||||
}
|
||||
})
|
||||
},
|
||||
handleSelectUser(v) {
|
||||
this.form.name = v?.[0]?.realName || ""
|
||||
this.form.userId = v?.[0]?.openId || ""
|
||||
this.form.phone = v?.[0]?.phone || ""
|
||||
this.form.idNumber = v?.[0]?.idNumber || ""
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.integralAdd {
|
||||
padding: 24px 0 120px 0;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: #FFF;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
width: 250px;
|
||||
.tips {
|
||||
color: #f46;
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: calc(100% - 200px);
|
||||
text-align: right;
|
||||
}
|
||||
::v-deep .AiSelect {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.mar-b32 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.items {
|
||||
width: 100%;
|
||||
background: #FFF;
|
||||
margin-bottom: 24px;
|
||||
p {
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #EEEEEE;
|
||||
}
|
||||
textarea {
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
.tips {
|
||||
color: #f46;
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.text-tips {
|
||||
padding: 12px 32px;
|
||||
box-sizing: border-box;
|
||||
text-align: right;
|
||||
color: #999999;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
.upload {
|
||||
padding: 24px 32px 0 32px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// ::v-deep .display {
|
||||
// display: inline-block;
|
||||
// }
|
||||
.footer{
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: #FFF;
|
||||
box-shadow: inset 0 0 0 0 #D4D4D4;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
div {
|
||||
flex: 1;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #1365DD;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user