326 lines
9.2 KiB
Vue
326 lines
9.2 KiB
Vue
<template>
|
||
<div class="integralAdd">
|
||
<div class="item">
|
||
<div class="left"><span class="tips">*</span>姓名</div>
|
||
<div class="right name-flex" :class="form.name ? '' : 'color-999'" >
|
||
<AiPagePicker single :isShowPhone="true" @select="handleSelectUser" type="sysUser" class="pick" action="/app/appwechatuserqujing/listByFdAppletUserByGirdMember" nodeKey="openId">
|
||
<AiMore v-model="form.name"/>
|
||
</AiPagePicker>
|
||
<u-icon name="scan" color="#333" size="40" class="scan" @click="scan"></u-icon>
|
||
</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" @data="selectType" v-if="dictList && dictList.length"></AiSelect>
|
||
<span v-else class="color-999">请选择</span>
|
||
</div>
|
||
</div>
|
||
<div class="item mar-b32">
|
||
<div class="left"><span class="tips">*</span>积分值</div>
|
||
<div class="right">
|
||
<u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="form.applyIntegral" maxlength="10" />
|
||
<!-- <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" :class="form.girdName ? '' : 'color-999'">{{form.girdName || '自动获取'}}</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<div hover-class="text-hover" @click="submit">提交申请</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapActions, mapState} from "vuex";
|
||
export default {
|
||
name: "integralAdd",
|
||
appName: '积分申请',
|
||
data() {
|
||
return {
|
||
form: {
|
||
name: '',
|
||
userId: '',
|
||
phone: '',
|
||
idNumber: '',
|
||
applyItemId: '',
|
||
applyIntegral: '',
|
||
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.$dict.load(['clapEventStatus'])
|
||
this.injectJWeixin(['scanQRCode'])
|
||
},
|
||
onShow() {
|
||
document.title = '积分代申请'
|
||
},
|
||
methods: {
|
||
...mapActions(['injectJWeixin']),
|
||
submit() {
|
||
if(this.flag) return
|
||
|
||
if (!this.form.name) {
|
||
return this.$u.toast('请选择代申请人员')
|
||
}
|
||
|
||
if (!this.form.applyItemId) {
|
||
return this.$u.toast('请选择事件类型')
|
||
}
|
||
if (!/^([1-9]\d*|0)(\.\d{1,2})?$/g.test(this.form.applyIntegral)) {
|
||
this.form.applyIntegral = Number(this.form.applyIntegral).toFixed(2)
|
||
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)
|
||
}
|
||
})
|
||
},
|
||
selectType(selecteds) {
|
||
this.form.applyItemName = this.list.filter(e=> (e.id==selecteds[0].value))[0].ruleName
|
||
this.form.applyIntegral = this.list.filter(e => (e.id == selecteds[0].value))[0].integral
|
||
},
|
||
// 事件类型
|
||
getType() {
|
||
this.$http.post(`/app/appintegralrule/listByFdGirdMember?openId=${this.form.userId}`).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 || ""
|
||
this.form.girdId = v?.[0]?.girdId || ""
|
||
this.form.girdName = v?.[0]?.girdName || ""
|
||
this.form.applyIntegral = ''
|
||
this.form.applyItemId = ''
|
||
this.form.applyItemName = ''
|
||
this.dictList = []
|
||
this.getType()
|
||
},
|
||
scan() {
|
||
wx.scanQRCode({
|
||
desc: '扫描居民信息',
|
||
needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
|
||
scanType: ["qrCode",], // 可以指定扫二维码还是条形码（一维码），默认二者都有
|
||
success: (res) => {
|
||
res.resultStr.realName = res.resultStr.name
|
||
var userList = [{...res.resultStr}]
|
||
this.handleSelectUser(userList)
|
||
},
|
||
error: (res) => {
|
||
console.log(res)
|
||
if (res.errMsg.indexOf('function_not_exist') > 0) {
|
||
alert('版本过低请升级')
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
.name-flex {
|
||
display: flex;
|
||
.pick {
|
||
width: calc(100% - 60px);
|
||
text-align:right;
|
||
}
|
||
.scan {
|
||
width: 60px;
|
||
padding-left: 20px;
|
||
}
|
||
}
|
||
::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 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;
|
||
z-index: 3;
|
||
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> |