zhuoxin-user-uniapp/components/fxyk-modal/fxyk-modal.vue

<template>
	<u-modal v-model="show"
		 :show-title="false"
		 :show-confirm-button="false" 
		 :show-cancel-button="false"
		 :zoom="false">
		 <view slot="default" style="padding:27rpx 27rpx 65rpx 27rpx">
			 <view class="d-flex a-center j-end" @click="cancle"><u-icon name="close-circle-fill" color="#A9A3D2" size="60"></u-icon></view>
			 <view class="text-center word-one" :style="wordColor">{{ data.title }}</view>
			 <view style="padding-left: 55rpx">
				 <view class="u-m-t-36 word-two">责任部门:&ensp;{{ data.department }}</view>
				 <view class="u-m-t-20 word-two">施工时限:&ensp;{{ data.start }}-{{ data.end }}</view>
				 <view class="u-m-t-16 word-two">
					<text>额定天数:&ensp;{{ data.edDay }}天</text> | 								<text :style="data.status !== 2 || data.ifYq !== 0 ? wordColor : ''">已用时: {{ data.yyDay }}天</text></view>
				 <view class="u-m-t-18 word-two" :style="wordColor">目前状态:&ensp;进行中</view>
				 <view  v-if="data.status === 3" class="u-m-t-18 word-two" :style="wordColor">终止原因:&ensp;原因原因原因原因原因原因</view>
			 </view>
		 </view>
	</u-modal>
</template>

<script>
	export default {
		props: {
			// 是否显示模态框
			show: {
				type: Boolean,
				default: false
			},
			// data.status 1已完成 2进行中 3已终止
			// data.ifYq   是否逾期 1逾期 0未逾期
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			wordColor() {
				// 进行中
				if (this.data.status === 2) {
					// 已逾期
					if (this.data.ifYq) {
						return {'color':'#F17E38'}
					}
					// 未逾期(即将逾期)
					else {
						return {'color':'#E7AE5E'}
					}
				}	
				// 已终止
				if (this.data.status === 3) {
					return {'color':'#FF0014'}
				}
			}
		},
		methods: {
			// 关闭
			cancle() {
				this.$emit('cancle')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.word-one {
		font-size: 33rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 44rpx;
		color: #FFAF38;
	}
	.word-two {
		font-size: 29rpx;
		font-family: SimSun;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
	}
</style>