dou_fire/pages/work/confirmSchemeInfo.vue

<template>
	<view class="content" v-if="user.nickname">
		<view class="greet">
			<view class="name">您好！{{user.nickname}}{{user.sex === '女'? '女士': '先生'}}</view>
			<view>您名下的{{closeScheme.institution.title}}账户{{closeScheme.business_type.title}}洽谈协商服务已完成。</view>
		</view>
		<!-- 卡片信息 -->
		<view class="schemes-block">
			<view class="schemes-info">
				<view class="schemes-flex">
					<view class="schemes-title">{{closeScheme.institution.title}}</view>
					<text class="schemes-type">{{closeScheme.business_type.title}}</text>
				</view>
				<block v-if="closeScheme.params.length > 0">
					<view class="schemes-flex" v-for="(item, index) in closeScheme.params" :key="index">
						<view class="schemes-label">{{item.title}}</view>
						<text class="schemes-value">{{item.value || '-'}}</text>
					</view>
				</block>
				<block v-else>
					<view class="params-null">
						<u-empty
							mode="coupon"
							icon="http://cdn.uviewui.com/uview/empty/coupon.png"
							text="暂无结案方案"
						>
						</u-empty>
					</view>
				</block>
			</view>
		</view>
		<!-- 温馨提示 -->
		<view class="notic">
			<text>{{closeScheme.business_type.sweet_notic}}</text>
		</view>
		<!-- 确认方案 -->
		<view class="footer-btns">
			<view class="btn-item" @click="show = true">不同意</view>
			<view class="btn-item" @click="onAgree">同意并确认</view>
		</view>
		<!-- 弹出层 -->
		<u-popup
			:show="show"
			round="20rpx"
			closeable
			@close="show = false"
			:closeOnClickOverlay="false"
		>
			<view class="remove-from">
				<view class="title">不同意原因</view>
				<view class="textarea">
					<textarea placeholder="请输入不同意原因" maxlength="500" v-model="remove"></textarea>
					<view class="remove-number">{{remove.length}}/500</view>
				</view>
				<button class="btn" :disabled="remove.length <= 0" @click="onScheme('refuse', { 'remark': remove })">提交</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getConfirmSchemeInfo, sbuConfirmScheme } from '@/apis/interfaces/order.js'
	export default {
		data() {
			return {
				show		: false,
				user		: '',
				closeScheme	: '',
				remove		: ''
			};
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			getConfirmSchemeInfo(this.$Route.query.schemeId).then(res => {
				let { close_scheme, user } = res;
				this.closeScheme = close_scheme
				this.user = user
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 提示信息
			onAgree(){
				uni.showModal({
					title		: '提示',
					content		: '是确认接受当前结案方案?',
					cancelText	: '再想一想',
					confirmText	: '确认方案',
					success		: res => {
						if(res.confirm){
							this.onScheme('agree')
						}
					}
				})
			},
			// 提交方案
			onScheme(type, parms){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				let data = parms || {}
				sbuConfirmScheme(type, this.$Route.query.schemeId, data).then(res => {
					if(type === 'refuse'){
						this.show = false
						this.remove = ''
					}
					uni.showModal({
						title: '提示',
						content: res,
						showCancel: false,
						success: () => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-bottom: 200rpx;
		box-sizing: border-box;
	}
	// 拒绝方案弹出层
	.remove-from{
		padding: 30rpx 30rpx 50rpx;
		.title{
			text-align: center;
			font-size: 34rpx;
			padding-bottom: 30rpx;
		}
		.textarea{
			background: #F6F6F6;
			border-radius: 20rpx;
			padding: 30rpx;
			textarea{
				font-size: 30rpx;
				line-height: 40rpx;
				height: 200rpx;
			}
		}
		.remove-number{
			text-align: right;
			font-size: 28rpx;
			color: gray;
		}
		.btn{
			margin-top: 30rpx;
			border-radius: 20rpx;
			background: $main-color;
			color: white;
			font-size: 34rpx;
			color: white;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0;
			&[disabled]{
				background-color: $main-color;
				color: white;
				opacity: .5;
			}
		}
	}
	// 同意方案
	.footer-btns{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 15rpx 50rpx;
		background: white;
		z-index: 3;
		display: flex;
		justify-content: space-between;
		.btn-item{
			width: calc(50% - 30rpx);
			margin: 0 15rpx;
			text-align: center;
			line-height: 90rpx;
			border:solid 1rpx $main-color;
			color: $main-color;
			border-radius: 20rpx;
			&:last-child{
				background-color: $main-color;
				color: white;
			}
		}
	}
	// 欢迎
	.greet{
		background: $main-color;
		padding: 30rpx 30rpx 200rpx 30rpx;
		color: white;
		font-size: 30rpx;
		line-height: 40rpx;
		.name{
			padding-bottom: 20rpx;
		}
	}
	// 温馨提示
	.notic{
		padding: 30rpx;
		color: #FBAF3B;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	// 方案
	.schemes-block{
		border-radius: 20rpx;
		background: white;
		margin: -140rpx 30rpx 0;
		position: relative;
		.schemes-info{
			padding: 30rpx;
			box-sizing: border-box;
			position: relative;
			.params-null{
				padding: 30rpx 0 50rpx;
			}
			.schemes-flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.schemes-title{
					font-weight: bold;
					font-size: 40rpx;
					line-height: 70rpx;
				}
				.schemes-type{
					background: white;
					color: $main-color;
					border:solid 1rpx $main-color;
					font-size: 28rpx;
					padding: 0 20rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
				}
				.schemes-label{
					line-height: 70rpx;
					font-size: 30rpx;
					width: 200rpx;
					color: #999999;
				}
				.schemes-value{
					width: calc( 100% - 200rpx );
					font-size: 30rpx;
					text-align: right;
				}
			}
			// 提示信息
			.schemes-tips{
				background: #F6F6F6;
				border-radius: 20rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				font-size: 28rpx;
				color: #666;
				.schemes-tips-title{
					font-weight: bold;
					color: #111;
					padding-bottom: 20rpx;
				}
				text{
					line-height: 40rpx;
				}
			}
		}
	}
</style>