309 lines
7.9 KiB
Vue
309 lines
7.9 KiB
Vue
<template>
|
||
<view class="assignrbitrators">
|
||
<view class="from">
|
||
<uni-forms ref="form" :modelValue="formData" :rules="rules">
|
||
<view class="title">案件详情</view>
|
||
<view class="box">
|
||
<uni-forms-item label="案件编号：" name="caseNum" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.caseNum" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="申请人：" name="applicantName" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.applicantName" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="被申请人：" name="respondentName" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.respondentName" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="借款开始日期：" name="loanStartDate" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.loanStartDate" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="借款结束日期：" name="loanEndDate" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.loanEndDate" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="案件标的：" name="caseSubjectAmount" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.caseSubjectAmount" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="申请人主张欠本金：" name="claimPrinciOwed" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.claimPrinciOwed" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="申请人主张欠利息：" name="claimInterestOwed" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.claimInterestOwed" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="申请人主张违约金：" name="claimLiquidDamag" label-width="120px" required>
|
||
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.claimLiquidDamag" placeholder="" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="证据材料" name="evidenceMaterialList" required :disabled='true'>
|
||
<!-- <img-upload :limit='3' :value.sync="formData.headImage" ></img-upload> -->
|
||
<view class="imagearea">
|
||
<image class="image" v-for="(item,index) in formData.evidenceMaterialList" :key="index" :src="formData.evidenceMaterialList[index].annexPath"
|
||
@click="getImgIndex(index)"></image>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="是否指派仲裁员" label-width="120px" name="maintenancetypeArr" required>
|
||
<uni-data-checkbox class='checkbox' v-model="formData.maintenancetypeArr"
|
||
:localdata="maintenancetypeArr" @change='maintenancetypeChange'></uni-data-checkbox>
|
||
</uni-forms-item>
|
||
</view>
|
||
</uni-forms>
|
||
<view class="uni-list" v-if="selectFlag">
|
||
<checkbox-group @change="checkboxChange">
|
||
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
||
<view>
|
||
<checkbox :value="item.value" :checked="item.checked" />
|
||
</view>
|
||
<view class="main">
|
||
<view class="">
|
||
仲裁员姓名：张三
|
||
</view>
|
||
<view class="">
|
||
当前案件数量：3
|
||
</view>
|
||
<view class="">
|
||
已结案数量：13
|
||
</view>
|
||
<view class="">
|
||
专业分类：借贷
|
||
</view>
|
||
</view>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
<button type="primary" @click="submitImg">确认提交</button>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {respondentDetail,arbitratorList} from '../../../api/handlecase/index.js'
|
||
import moment from 'moment'
|
||
const app = getApp()
|
||
export default {
|
||
data() {
|
||
return {
|
||
formData: {},
|
||
selectFlag:false,
|
||
rules: {},
|
||
maintenancetypeArr:[{
|
||
text: '是',
|
||
value: 0
|
||
}, {
|
||
text: '否',
|
||
value: 1
|
||
},],
|
||
items: [{
|
||
value: 'USA',
|
||
name: '美国'
|
||
},
|
||
{
|
||
value: 'CHN',
|
||
name: '中国',
|
||
},
|
||
{
|
||
value: 'BRA',
|
||
name: '巴西'
|
||
},
|
||
{
|
||
value: 'JPN',
|
||
name: '日本'
|
||
},
|
||
{
|
||
value: 'ENG',
|
||
name: '英国'
|
||
},
|
||
{
|
||
value: 'FRA',
|
||
name: '法国'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
maintenancetypeChange(val){
|
||
let flag = val.detail.value;
|
||
if(flag == 0){
|
||
this.selectFlag = true
|
||
}else{
|
||
this.selectFlag = false
|
||
}
|
||
},
|
||
getData(parms){
|
||
respondentDetail(parms).then(res=>{
|
||
this.formData = res.data
|
||
this.formData.loanEndDate = moment(this.formData.loanEndDate).format('YYYY-MM-DD HH:mm:ss');
|
||
this.formData.loanStartDate = moment(this.formData.loanStartDate).format('YYYY-MM-DD HH:mm:ss');
|
||
this.formData.evidenceMaterialList.forEach(item=>{
|
||
item.annexPath = app.globalData.requestUrl + item.annexPath
|
||
})
|
||
console.log(this.formData,"IMG");
|
||
})
|
||
},
|
||
checkboxChange (e) {
|
||
// console.log(e,"PPPPPPPPPPPPPPPPPPP");
|
||
},
|
||
// 获取仲裁员列表
|
||
getArbitratorList(){
|
||
arbitratorList({}).then(res=>{
|
||
console.log(res,"KKKKKKKKKKKKKKKKKKK");
|
||
})
|
||
},
|
||
// 预览图片
|
||
getImgIndex(index) {
|
||
//准备一个装图片路径的 数组imgs
|
||
let imgs = this.formData.headImage.map(item => {
|
||
// console.log(item, 'item');
|
||
//只返回图片路径
|
||
return item.pics_small_url
|
||
})
|
||
// console.log(imgs);
|
||
//调用预览图片的方法
|
||
uni.previewImage({
|
||
urls: imgs,
|
||
current: index,
|
||
loop: true,
|
||
})
|
||
},
|
||
},
|
||
onLoad(data){
|
||
this.getData(data.id);
|
||
// this.getArbitratorList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.assignrbitrators {
|
||
// text-align: center;
|
||
padding: 20rpx;
|
||
|
||
.box {
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
.imagearea {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-evenly;
|
||
.image {
|
||
width: 40%;
|
||
height: 200rpx;
|
||
margin-top: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flexd {
|
||
padding-top: 20rpx;
|
||
|
||
.btn {
|
||
width: 80%;
|
||
font-size: 26rpx;
|
||
border-radius: 60rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.select-picker {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
border: 1px solid #DCDFE6;
|
||
border-radius: 8rpx;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.table-content {
|
||
background-color: #fff;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.none {
|
||
font-size: 24rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
/deep/.title {
|
||
font-size: 28rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
}
|
||
}
|
||
|
||
.htmltitle {
|
||
font-size: 30rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.look {
|
||
color: #0D91F9;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
}
|
||
|
||
.adsTitle {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.multiple {
|
||
width: 75%;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
font-size: 24rpx;
|
||
// @include text-overflow($width: 100%)
|
||
}
|
||
.selectArbitrator{
|
||
margin-top: 20rpx;
|
||
height: 200rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
padding: 15rpx;
|
||
.arbitrator-left{
|
||
width: 80%;
|
||
.arbitrator-item{
|
||
height: 40rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
.arbitrator-right{
|
||
width: 20%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.uni-list{
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
.uni-list-cell {
|
||
border-radius: 30rpx;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
background-color: #fff;
|
||
.main{
|
||
height: 100%;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |