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> |