<template> <view> <!-- 弹窗 --> <view class="bgbox" @click="getClose" v-if="type"></view> <!-- 业务进度 --> <view class="speedbox" v-if="type=='ywjd'"> <view class="tit">业务进度</view> <view class="lists" v-for="(ite,idx) in stepList" :key='idx'> <view class="listl"> <image :src="stepa" class="imga" v-if="Number(stepval)>Number(ite.val)"></image> <image :src="stepb" v-else-if="stepval==ite.val"></image> <image :src="stepc" v-else></image> </view> <view class="listr"> <view class="ltit" :class="stepval==ite.val?'act':''">{{ite.tit}}</view> <view class="ltxt">{{ite.time}}</view> </view> </view> </view> <!-- 业务审核 --> <view class="fixbox" v-if="type=='sh'"> <view class="cloimg" @click="getClose"> <image :src="closeimg"></image> </view> <view class="ttit">业务审核</view> <view class="mb16"> <view class="ttxt mb18">是否同意进入初审</view> <uni-data-checkbox :selectedColor="actcolor" v-model="isty" :localdata="tyList" /> </view> <view class="mb16"> <view class="ttxt mb18">审核意见</view> <textarea class="textar" style="height: 156rpx;" placeholder="若不同意进入初审,请填写理由…"></textarea> </view> <view class="mb16"> <view class="ttxt mb18">分配B角</view> <uni-data-select v-model="mycdtxt" placeholder="请选择A角" :localdata="mycdlist" ></uni-data-select> </view> <view class="mb16"> <view class="ttxt mb18">分配A角</view> <uni-data-select v-model="mycdtxt" placeholder="请选择B角" :localdata="mycdlist" ></uni-data-select> </view> <view class="btns">确认并生成担保意向函</view> </view> </view> </template> <script> export default{ props:{ type: { type: Number, default () { return 0 } }, stepList:{ type: Array, default () { return [] } }, stepval:{ type: [Number,String], default () { return 0 } } }, data(){ return{ stepa:require('@/work/static/images/busin/stepa.png'), stepb:require('@/work/static/images/busin/stepb.png'), stepc:require('@/work/static/images/busin/stepc.png'), closeimg:require('@/work/static/images/close.png'), actcolor:'#00A9F0', tyList:[{text: '同意',value: '0'},{text: '不同意',value: '1'}], mycdlist:[{text: 'a',value: '0'},{text: 'b',value: '1'}], isty:'0', mycdtxt:'', } }, methods:{ getClose(){ this.$emit('getClose') } } } </script> <style lang="scss" scoped> .speedbox{background: #FFFFFF;box-shadow: 0px 0px 14rpx 0px rgba(184,184,184,0.76);border-radius: 20rpx;padding: 44rpx 40rpx 0; position: fixed;z-index: 10;left: 220rpx;top: 50%;transform: translateY(-50%);max-height: calc(100vh - 400rpx);overflow: auto; .tit{font-weight: bold;font-size: 30rpx;color: #222327;margin-bottom: 36rpx;} .lists{display: flex;align-items: flex-start;position: relative;padding-bottom: 52rpx; &::after{content: '';width: 2rpx;position: absolute;left: 15rpx;top: 56rpx;bottom: 56rpx;height: 60rpx;background: #E6E6E6;} &:last-child{ &::after{display: none;} // .ltit{color: #01A9F0 !important;} } .listl{width: 32rpx;height: 32rpx;margin-right: 22rpx;display: flex;align-items: center;justify-content: center; image{width: 32rpx;height: 32rpx; &.imga{width: 30rpx;height: 30rpx;} } } .listr{ .ltit{font-weight: 500;font-size: 26rpx;color: #222327;margin-bottom: 22rpx; &.act{color: #01A9F0;} } .ltxt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;} } } } .fixbox /deep/ .uni-select{border: none;background-color: #EEEEEE;height: 88rpx;} .fixbox /deep/ .uni-select__input-placeholder{font-size: 30rpx;color: #AAAAAA;} .fixbox /deep/ .uni-textarea-placeholder{font-size: 26rpx;color: #AAAAAA;} .textar{width: 100%;border-radius: 10rpx;padding: 26rpx 30rpx;font-size: 26rpx;color: #222327;height: 400rpx;background: #EEEEEE; &.texthe{height: 190rpx;} } .fixbox{position: fixed;left: 56rpx;right: 56rpx;background: #FFFFFF;max-height: calc(100vh - 400rpx);overflow: auto; border-radius: 20rpx;z-index: 10;top: 50%;transform: translateY(-50%);padding: 40rpx 48rpx 52rpx; .cloimg{display: flex;align-items: center;justify-content: center;position: absolute;width: 40rpx;height: 40rpx; top: 40rpx;left: 40rpx; image{width: 22rpx;height: 22rpx;} } .ttit{font-weight: bold;text-align: center;font-size: 30rpx;color: #222327;margin-bottom:50rpx;} .ttxt{font-weight: bold;font-size: 30rpx;color: #222327;} .btns{margin-top: 70rpx; width: 100%;background: #00A9F0;border-radius:10rpx;height: 88rpx;display: flex;align-items: center;justify-content: center;font-weight: 500;font-size: 30rpx;color: #FFFFFF;} } </style>