471 lines
12 KiB
Vue
471 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="detail">
|
|||
|
|
<div class="header-content">
|
|||
|
|
<div class="title-flex">
|
|||
|
|
<p>{{info.applyItemName}}</p>
|
|||
|
|
<div :class="`color-${info.status}`">{{ $dict.getLabel('appIntegralApplyEventStatus', info.status) }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="user-flex">
|
|||
|
|
<div>申请人：{{info.integralUserName}}</div>
|
|||
|
|
<div>电话号码：<span style="color:#1365DD;" @click="callPhone(info.phone)">{{info.phone}}</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="title-flex">
|
|||
|
|
<p>申请信息</p>
|
|||
|
|
<div style="color:#1365DD;" v-if="info.status == 0">
|
|||
|
|
<span style="margin-right:16px" v-if="isEdit" @click="isEdit=false;getDetail()">取消</span>
|
|||
|
|
<span @click="edit">{{isEdit ? '保存' : '编辑'}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-flex solid">
|
|||
|
|
<div class="label">积分值</div>
|
|||
|
|
<div class="value">
|
|||
|
|
<u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="info.applyIntegral" maxlength="10" v-if="isEdit"/>
|
|||
|
|
<!-- <u-number-box v-model="info.applyIntegral" input-height="44" size="14" :min="1" :max="100" v-if="isEdit"></u-number-box> -->
|
|||
|
|
<span v-else>{{info.applyIntegral}}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-flex">
|
|||
|
|
<div class="label">详情描述</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-textarea" v-if="isEdit">
|
|||
|
|
<u-input v-model="info.content" type="textarea" :height="200" auto-height maxlength="300" placeholder="请输入详细描述" />
|
|||
|
|
<div class="hint">{{ info.content.length }}/300</div>
|
|||
|
|
</div>
|
|||
|
|
<p class="text solid" v-else>{{info.content}}</p>
|
|||
|
|
|
|||
|
|
<div class="items solid" v-if="isEdit">
|
|||
|
|
<p>上传图片</p>
|
|||
|
|
<div class="upload">
|
|||
|
|
<AiUploader :def.sync="info.images" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-tips left">可上传图片，最多上传9张。</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="items" v-if="isEdit">
|
|||
|
|
<p>上传视频</p>
|
|||
|
|
<div class="upload">
|
|||
|
|
<AiUploader :def.sync="info.videos" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
|
|||
|
|
</div>
|
|||
|
|
<div class="text-tips left">可上传视频，最大30M。</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="img-list" v-if="info.files && info.files.length && !isEdit">
|
|||
|
|
<div v-for="(item, index) in info.files" :key="index">
|
|||
|
|
<div v-if="item.postfix == '.mp4' || item.postfix == '.MOV'" class="video-item" @click="choose(item)" >
|
|||
|
|
<img :src="item.facePicture" alt="" class="pic-img">
|
|||
|
|
<img :src="`${$cdn}video/play-icon.png`" alt="" class="play-icon">
|
|||
|
|
</div>
|
|||
|
|
<img :src="item.accessUrl" alt="" @click="previewImages(item.accessUrl)" class="pic-img" v-else>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="pass-info" v-if="info.status == 2">
|
|||
|
|
<div class="title"><span></span>未通过理由</div>
|
|||
|
|
<p>{{info.auditDesc}}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="footer" v-if="info.status == 0 && !isEdit">
|
|||
|
|
<div class="confirm" @click="agree()">通过</div>
|
|||
|
|
<div class="cancel" @click="show=true">不通过</div>
|
|||
|
|
</div>
|
|||
|
|
<u-popup v-model="show" mode="bottom">
|
|||
|
|
<div class="textarea">
|
|||
|
|
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入不通过原因" :clearable="false" maxlength="500" />
|
|||
|
|
<p>字数{{ value.length }}/500</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="btn">
|
|||
|
|
<span @click="value = ''">清空内容</span>
|
|||
|
|
<span class="confirm" @click="confirm">保存</span>
|
|||
|
|
</div>
|
|||
|
|
</u-popup>
|
|||
|
|
<u-popup v-model="showVideo" mode="bottom">
|
|||
|
|
<div class="audio">
|
|||
|
|
<video controls class="only_video" :src="videoUrl" autoplay></video>
|
|||
|
|
<!-- <audio :src="url" ref="audio" :controls="true" :name="autioName" style="display: block;"></audio> -->
|
|||
|
|
</div>
|
|||
|
|
</u-popup>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "detail",
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
show: false,
|
|||
|
|
value: '',
|
|||
|
|
id: '',
|
|||
|
|
info: {},
|
|||
|
|
showVideo: false,
|
|||
|
|
videoUrl: '',
|
|||
|
|
isEdit: false,
|
|||
|
|
flag: false
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.id = option.id
|
|||
|
|
this.$dict.load('appIntegralApplyEventStatus').then(() => {
|
|||
|
|
this.getDetail()
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
document.title = '积分详情'
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getDetail() {
|
|||
|
|
this.$http.post(`/app/appintegraluserapply/queryDetailById?id=${this.id}`).then(res=> {
|
|||
|
|
if(res?.data) {
|
|||
|
|
this.info = res.data
|
|||
|
|
this.info.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.postfix.split('.')[1])))
|
|||
|
|
this.info.videos = res.data.files.filter(e => (['mp4', 'MOV'].includes(e.postfix.split('.')[1])))
|
|||
|
|
this.flag = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
confirm() {
|
|||
|
|
if(!this.value) {
|
|||
|
|
return this.$u.toast('请输入不通过原因')
|
|||
|
|
}
|
|||
|
|
this.submit(0)
|
|||
|
|
},
|
|||
|
|
agree() {
|
|||
|
|
this.$confirm('确定通过该条申请').then(() => {
|
|||
|
|
this.submit(1)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
submit(status) {
|
|||
|
|
this.$http.post(`/app/appintegraluserapply/auditById`, {
|
|||
|
|
auditDesc: this.value,
|
|||
|
|
id: this.id,
|
|||
|
|
auditStatus: status
|
|||
|
|
}).then(res=> {
|
|||
|
|
if(res.code == 0) {
|
|||
|
|
this.$u.toast('操作成功')
|
|||
|
|
uni.$emit('updateList')
|
|||
|
|
this.show = false
|
|||
|
|
this.getDetail()
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
previewImages(img) {
|
|||
|
|
var imgs = []
|
|||
|
|
this.info.files.map((item) => {
|
|||
|
|
if(item.postfix != '.mp4' || item.postfix != '.MOV') {
|
|||
|
|
imgs.push(item.accessUrl)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: imgs,
|
|||
|
|
current: img
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
callPhone(phone) {
|
|||
|
|
uni.makePhoneCall({ phoneNumber: phone })
|
|||
|
|
},
|
|||
|
|
choose(item) {
|
|||
|
|
this.videoUrl = item.accessUrl
|
|||
|
|
this.showVideo = true
|
|||
|
|
},
|
|||
|
|
edit() {
|
|||
|
|
if(this.isEdit) {
|
|||
|
|
this.editSubmit()
|
|||
|
|
}else {
|
|||
|
|
this.isEdit = true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
editSubmit() {
|
|||
|
|
if(this.flag) return
|
|||
|
|
|
|||
|
|
if (!/^([1-9]\d*|0)(\.\d{1,2})?$/g.test(this.info.applyIntegral)) {
|
|||
|
|
this.info.applyIntegral = Number(this.info.applyIntegral).toFixed(2)
|
|||
|
|
return this.$u.toast('积分值最多只保留两位小数点')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.info.content) {
|
|||
|
|
return this.$u.toast('请输入详细描述')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if ((this.info.images.length + this.info.videos.length) > 9) {
|
|||
|
|
return this.$u.toast('图片和视频不得超过9个')
|
|||
|
|
} else {
|
|||
|
|
this.info.files = [...this.info.images,...this.info.videos]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.flag = true
|
|||
|
|
this.$http.post(`/app/appintegraluserapply/updateByGirdMember`,{
|
|||
|
|
...this.info,
|
|||
|
|
userId: this.info.integralUserId,
|
|||
|
|
}).then(res=> {
|
|||
|
|
if(res?.data) {
|
|||
|
|
this.$u.toast('提交成功')
|
|||
|
|
uni.$emit('updateList')
|
|||
|
|
this.getDetail()
|
|||
|
|
this.isEdit = false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
uni-page-body {
|
|||
|
|
background-color: #F4F5FA;
|
|||
|
|
}
|
|||
|
|
.detail {
|
|||
|
|
height: 100%;
|
|||
|
|
padding-top: 32px;
|
|||
|
|
.title-flex {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
p {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 34px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-family: "PingFang SC";
|
|||
|
|
line-height: 40px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-family: "PingFang SC";
|
|||
|
|
line-height: 40px;
|
|||
|
|
width: 280px;
|
|||
|
|
text-align: right;
|
|||
|
|
span {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.color-0{
|
|||
|
|
color: #FF9A40;
|
|||
|
|
}
|
|||
|
|
.color-1{
|
|||
|
|
color: #42D784;
|
|||
|
|
}
|
|||
|
|
.color-2{
|
|||
|
|
color: #cd413aff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.header-content {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 40px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
.user-flex {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
line-height: 42px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
font-size: 28px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 32px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.info-flex {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 24px 0;
|
|||
|
|
line-height: 40px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.label {
|
|||
|
|
color: #999;
|
|||
|
|
vertical-align: top;
|
|||
|
|
width: 160px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: calc(100% - 160px);
|
|||
|
|
word-break: break-all;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
color: #333;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-family: "PingFang SC";
|
|||
|
|
line-height: 42px;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
padding-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
.info-textarea{
|
|||
|
|
padding: 16px 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-bottom: 1px solid #ddd;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
.hint {
|
|||
|
|
padding: 4px 0 8px 0;
|
|||
|
|
text-align: right;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.img-list {
|
|||
|
|
div {
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.pic-img {
|
|||
|
|
width: 210px;
|
|||
|
|
height: 210px;
|
|||
|
|
margin: 0 16px 16px 0;
|
|||
|
|
}
|
|||
|
|
.pic-img:nth-of-type(3n) {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
.video-item {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.play-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 80px;
|
|||
|
|
left: 80px;
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.pass-info {
|
|||
|
|
padding: 40px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
.title {
|
|||
|
|
color: #222;
|
|||
|
|
font-size: 30px;
|
|||
|
|
font-family: "PingFang SC";
|
|||
|
|
line-height: 40px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
|
|||
|
|
span {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
background-color: #CD413A;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-family: "PingFang SC";
|
|||
|
|
line-height: 42px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.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: #FFF;
|
|||
|
|
font-family: PingFangSC-Regular;
|
|||
|
|
font-size: 32px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.cancel {
|
|||
|
|
color: #1365DD;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.confirm {
|
|||
|
|
background-color: #1365DD;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.textarea {
|
|||
|
|
margin: 32px 32px 24px;
|
|||
|
|
width: calc(100% - 64px);
|
|||
|
|
padding: 16px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #f7f7f7;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
p {
|
|||
|
|
font-size: 26px;
|
|||
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|||
|
|
color: #999;
|
|||
|
|
line-height: 36px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.btn {
|
|||
|
|
padding: 0 32px 24px;
|
|||
|
|
height: 64px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
span {
|
|||
|
|
display: inline-block;
|
|||
|
|
line-height: 64px;
|
|||
|
|
font-size: 26px;
|
|||
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.confirm {
|
|||
|
|
width: 144px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #1365dd;
|
|||
|
|
border-radius: 32px;
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.audio {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 600px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
padding: 32px;
|
|||
|
|
.only_video {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.items {
|
|||
|
|
width: 100%;
|
|||
|
|
background: #FFF;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
p {
|
|||
|
|
padding: 24px 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
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 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
text-align: right;
|
|||
|
|
color: #999999;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
.left {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.upload {
|
|||
|
|
padding: 24px 0 0 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|