rongzidanbao-ui/work/components/popup/popup.vue

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