|
@@ -4,35 +4,107 @@
|
|
|
<van-cell-group>
|
|
|
<van-field v-model="form.name" disabled label="订单编号" />
|
|
|
<van-field v-model="form.name" disabled label="考级名称" />
|
|
|
+ <van-field v-model="form.transStatusTxt" :class="[form.transStatus === 'SUCCESS' ? 'pass' : null]" disabled label="缴费状态" />
|
|
|
<van-field v-model="form.name" disabled label="考试日期" />
|
|
|
<van-field v-model="form.name" disabled label="专业等级" />
|
|
|
- <van-field v-model="form.name" disabled label="练习曲" is-link />
|
|
|
+ <van-field v-model="form.name" disabled label="练习曲" @click="onOpen" is-link />
|
|
|
<van-field v-model="form.name" disabled label="练习曲" is-link />
|
|
|
<van-field v-model="form.name" disabled label="演奏曲" is-link />
|
|
|
<van-field v-model="form.name" disabled label="演奏曲" is-link />
|
|
|
- <van-field v-model="form.name" disabled label="考级证书" />
|
|
|
+ <van-field v-model="form.name" disabled label="考级证书" >
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ name="certificate"
|
|
|
+ :before-read="beforeRead"
|
|
|
+ :before-delete="beforeDelete"
|
|
|
+ :after-read="afterRead"
|
|
|
+ accept="image/*"
|
|
|
+ disabled
|
|
|
+ v-model="uploadCertificate"
|
|
|
+ :max-count="1" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
<van-field v-model="form.name" disabled label="乐理等级" />
|
|
|
- <van-field v-model="form.name" disabled label="乐理证书" />
|
|
|
+ <van-field v-model="form.name" disabled label="乐理证书" >
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ name="certificate2"
|
|
|
+ :before-read="beforeRead"
|
|
|
+ :before-delete="beforeDelete"
|
|
|
+ :after-read="afterRead"
|
|
|
+ v-model="uploadCertificate2"
|
|
|
+ disabled
|
|
|
+ accept="image/*"
|
|
|
+ :max-count="1" />
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
</van-cell-group>
|
|
|
|
|
|
<van-cell-group style="margin-top: 20px">
|
|
|
- <van-field v-model="form.name" disabled label="报名审核" />
|
|
|
- <van-field v-model="form.name" disabled label="备注" />
|
|
|
+ <van-field v-model="form.statusTxt" :class="[form.status === 'pass' ? 'pass' : null]" disabled label="报名审核" />
|
|
|
+ <van-field v-model="form.memo" disabled label="备注" />
|
|
|
</van-cell-group>
|
|
|
<van-button type="primary" round block>重新提交</van-button>
|
|
|
+
|
|
|
+ <van-popup class="van-popup-song" v-model="songUpload.songStatus" :close-on-click-overlay="false">
|
|
|
+ <div class="song-popup">
|
|
|
+ <div class="title">自定义曲目</div>
|
|
|
+ <van-field readonly clearable >
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ :before-read="beforeRead"
|
|
|
+ :before-delete="beforeDelete"
|
|
|
+ :after-read="afterRead"
|
|
|
+ v-model.trim="performNumUpload"
|
|
|
+ multiple
|
|
|
+ accept="image/*"
|
|
|
+ :max-count="5" >
|
|
|
+ </van-uploader>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <p class="song-popup-tips"><i style="color: #ee0a24">*</i>支持格式:pdf,png,jpg,bmp</p>
|
|
|
+
|
|
|
+ <div class="popup-group">
|
|
|
+ <span @click="onSaveCancel">取消</span>
|
|
|
+ <span class="popup-sure">确定</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import MHeader from '@/components/MHeader'
|
|
|
// import { browser } from '@/common/common'
|
|
|
+import { uploadFile } from '../signup/SignUpApi'
|
|
|
export default {
|
|
|
name: 'appDetail',
|
|
|
components: { MHeader },
|
|
|
data () {
|
|
|
return {
|
|
|
form: {
|
|
|
- name: '测试测试测试'
|
|
|
- }
|
|
|
+ name: '测试测试测试',
|
|
|
+ transStatus: "SUCCESS",
|
|
|
+ transStatusTxt: "已缴费",
|
|
|
+ status: "pass",
|
|
|
+ statusTxt: "已通过",
|
|
|
+ memo: "这里是备注"
|
|
|
+ },
|
|
|
+ uploadCertificate: [],
|
|
|
+ uploadCertificate2: [],
|
|
|
+ songUpload: {
|
|
|
+ songStatus: false, // 曲目状态
|
|
|
+ indexName: null,
|
|
|
+ index: null, // 索引
|
|
|
+ name: null, // 曲名
|
|
|
+ author: null // 作者
|
|
|
+ },
|
|
|
+ performNumUpload: [{
|
|
|
+ url: "https://daya-online.oss-cn-beijing.aliyuncs.com/202007/S3wXfqp.jpg"
|
|
|
+ }, {
|
|
|
+ url: "https://daya-online.oss-cn-beijing.aliyuncs.com/202007/S3wrElA.jpg"
|
|
|
+ }, {
|
|
|
+ url: "https://daya-online.oss-cn-beijing.aliyuncs.com/202007/S3wuoPO.jpg"
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -44,6 +116,62 @@ export default {
|
|
|
document.title = "报考详情"
|
|
|
},
|
|
|
methods: {
|
|
|
+ onOpen() {
|
|
|
+ this.songUpload.songStatus = true
|
|
|
+ },
|
|
|
+ beforeRead(file) {
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$toast('上传证书大小不能超过 2MB')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ beforeDelete(file, detail) {
|
|
|
+ const obj = detail.name.split('-')
|
|
|
+ let form = this.form
|
|
|
+ if(obj[0] == "certificate2") {
|
|
|
+ form.lastMusicTheoryCertificateUrl = "" // 上传图片地址为空
|
|
|
+ } else if(obj[0] == "certificate") {
|
|
|
+ form.lastExamCertificateUrl = ""
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ async afterRead(file, detail) { // 上传头像
|
|
|
+ const obj = detail.name.split('-')
|
|
|
+ try {
|
|
|
+ file.status = 'uploading'
|
|
|
+ file.message = '上传中...'
|
|
|
+ let formData = new FormData()
|
|
|
+ formData.append('file', file.file)
|
|
|
+ let res = await uploadFile(formData)
|
|
|
+ let result = res.data
|
|
|
+ if(result.code == 200) {
|
|
|
+ file.status = 'done'
|
|
|
+ let form = this.form
|
|
|
+ if(obj[0] == "certificate2") {
|
|
|
+ form.lastMusicTheoryCertificateUrl = result.data.url // 上传图片地址为空
|
|
|
+ } else if(obj[0] == "certificate") {
|
|
|
+ form.lastExamCertificateUrl = result.data.url
|
|
|
+ } else if(obj[0] == 'practiceNum') {
|
|
|
+ file.url = result.data.url
|
|
|
+ } else if(obj[0] == 'performNum') {
|
|
|
+ file.url = result.data.url
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ file.status = 'failed'
|
|
|
+ file.message = '上传失败'
|
|
|
+ this.$toast(result.msg)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSaveCancel() {
|
|
|
+ this.songUpload.songStatus = false
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -55,7 +183,7 @@ export default {
|
|
|
/deep/.van-cell {
|
|
|
padding: 14px 16px;
|
|
|
font-size: 16px;
|
|
|
- color: var(--font-main-color);
|
|
|
+ // color: var(--font-main-color);
|
|
|
.van-cell__value {
|
|
|
width: 40%;
|
|
|
text-align: left;
|
|
@@ -69,7 +197,93 @@ export default {
|
|
|
.payTime {
|
|
|
color: var(--red-color);
|
|
|
}
|
|
|
+ &.van-field--disabled .van-field__label {
|
|
|
+ color: var(--font-main-color);
|
|
|
+ }
|
|
|
+ .van-field__control:disabled {
|
|
|
+ color: var(--font-second-color);
|
|
|
+ }
|
|
|
+ &.noPass {
|
|
|
+ .van-field__control:disabled {
|
|
|
+ color: var(--red-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.pass {
|
|
|
+ .van-field__control:disabled {
|
|
|
+ color: var(--main-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+.van-popup-song {
|
|
|
+ width: 80%;
|
|
|
+ border-radius: .08rem;
|
|
|
+}
|
|
|
+.song-popup {
|
|
|
+ text-align: center;
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: var(--font-main-color);
|
|
|
+ padding: .2rem 0 .15rem;
|
|
|
+ }
|
|
|
+ .song-upload {
|
|
|
+ border-radius: .05rem;
|
|
|
+ border: 1px solid #c5c7cb;
|
|
|
+ background-position: 0 0, 100% 0, 0 0, 0 100%;
|
|
|
+ font-size: .16rem;
|
|
|
+ color: #777;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ .van-uploader__preview {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.van-uploader {
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ /deep/.van-uploader__upload,
|
|
|
+ /deep/.van-uploader__preview-image {
|
|
|
+ width: 65px;
|
|
|
+ height: 65px;
|
|
|
+ }
|
|
|
+ .song-popup-tips {
|
|
|
+ font-size: .14rem;
|
|
|
+ color: #808080;
|
|
|
+ padding-bottom: .15rem
|
|
|
+ // padding-top: .1rem;
|
|
|
+ // padding-bottom: .25rem;
|
|
|
+ }
|
|
|
+ /deep/.van-cell {
|
|
|
+ padding: 13px 35px;
|
|
|
+ }
|
|
|
+ /deep/.van-field__label {
|
|
|
+ width: .8rem;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .popup-group {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ color: var(--main-color);
|
|
|
+ background-color: #F0F0F0;
|
|
|
+ font-size: .18rem;
|
|
|
+ span {
|
|
|
+ padding: .12rem 0;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .popup-sure {
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: var(--main-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.section {
|
|
|
margin-top: 10px;
|
|
|
}
|