239 lines
6.4 KiB
Vue
239 lines
6.4 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="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="申请人：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="被申请人：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="借款开始日期：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="借款结束日期：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="案件标的：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="申请人主张欠本金：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="申请人主张欠利息：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="申请人主张违约金：" name="taskname" label-width="120px" required>
|
||
|
|
<uni-easyinput :inputBorder="false" :disabled='true' v-model="formData.taskname"
|
||
|
|
placeholder="" />
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="证据材料" name="headImage" 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.headImage" :key="index" :src="formData.headImage[index].pics_small_url"
|
||
|
|
@click="getImgIndex(index)"></image>
|
||
|
|
</view>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="是否指派仲裁员" label-width="120px" name="maintenancetype" required>
|
||
|
|
<uni-data-checkbox class='checkbox' :disabled='true' v-model="formData.maintenancetype"
|
||
|
|
:localdata="maintenancetypeArr" @change='maintenancetypeChange'></uni-data-checkbox>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item label="选择仲裁方式" label-width="120px" name="arbitrationmethod" required>
|
||
|
|
<uni-data-checkbox class='checkbox' v-model="formData.arbitrationmethod"
|
||
|
|
:localdata="arbitrationmethodArr" @change='arbitrationmethod'></uni-data-checkbox>
|
||
|
|
</uni-forms-item>
|
||
|
|
</view>
|
||
|
|
</uni-forms>
|
||
|
|
<view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import ImgUpload from '@/components/imgUpload.vue'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
formData: {
|
||
|
|
headImage: [{
|
||
|
|
index: 1,
|
||
|
|
pics_small_url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: 2,
|
||
|
|
pics_small_url: 'https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: 3,
|
||
|
|
pics_small_url: 'https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
index: 4,
|
||
|
|
pics_small_url: 'https://img1.baidu.com/it/u=1310564963,1641173348&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
rules: {},
|
||
|
|
maintenancetypeArr: [{
|
||
|
|
text: '是',
|
||
|
|
value: 0
|
||
|
|
}, {
|
||
|
|
text: '否',
|
||
|
|
value: 1
|
||
|
|
}, ],
|
||
|
|
arbitrationmethodArr: [{
|
||
|
|
text: '书面仲裁',
|
||
|
|
value: 0
|
||
|
|
}, {
|
||
|
|
text: '视频仲裁',
|
||
|
|
value: 1
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
maintenancetypeChange(val) {
|
||
|
|
console.log(val, "PPPPPPPPPPPPPPPPPP");
|
||
|
|
},
|
||
|
|
// 仲裁方式
|
||
|
|
arbitrationmethod(val) {
|
||
|
|
console.log(val, "仲裁方式");
|
||
|
|
},
|
||
|
|
getImgIndex(index) {
|
||
|
|
// console.log(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,
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
components: {
|
||
|
|
// 'img-upload': ImgUpload,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</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%)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|