monthlyContract.vue

<template>
	<view class="main">
		<TopBar title="我的合同" />
		<view class="contract_bar">
			<text class="left">当前合同</text>
			<text class="right_btn" @click="cancelContract(data[0]['month_apply_id'])" v-if="data[0]['apply_status'] === '1' || data[0]['apply_status'] === '2'">退出包年计划</text>
		</view>
		<view class="now_contract">
			<view class="contract_flex">
				<view class="flex_left">
					<view class="con_title">合同时长</view>
					<view class="con_detail">{{data[0].contract_period}}个月</view>
				</view>
				 <view class="flex_right">
					 <view class="con_title">签署时间</view>
					 <view class="con_detail">{{data[0].sign_time.substr(0, 10)}}</view>
				 </view>
			</view>
			<view class="contract_flex">
				<view class="flex_left">
					<view class="con_title">享受折扣</view>
					<view class="con_detail">{{Number(data[0].discount)*10}}折</view>
				</view>
				 <view class="flex_right">
					 <view class="con_title">采购量</view>
					 <view class="con_detail">≥{{data[0].min_quantity}}元</view>
				 </view>
			</view>
			<view class="contract_flex">
				<view class="flex_left">
					<view class="con_title">押金</view>
					<view class="con_detail spec_color" v-if="data[0]['is_deposit'] === '1'">¥{{Number(data[0].deposit/100)*Number(data[0].min_quantity)}}</view>
					<view class="con_detail" v-else>无</view>
				</view>
				 <view class="flex_right">
					 <view class="con_title">状态</view>
					 <view class="con_detail spec_color">{{data[0].apply_status_name}}</view>
				 </view>
			</view>
			<view class="check_btn" @click="check(data[0].view_url)">查看合同</view>
		</view>
		<view class="contract_bar" v-if="data.length>1">
			<text class="left">其他合同</text>
		</view>
		<view style="padding: 0;" v-if="data.length>1">
			<view class="now_contract packup" v-for="(item, index) in data" :key="index" v-if="index !== 0" :style="[rotate[index]['rotate'] ? {'height':'400rpx'} : null]">
				<view class="contract_flex">
					<view class="flex_left">
						<view class="con_title">合同时长</view>
						<view class="con_detail">{{item.contract_period}}个月</view>
					</view>
					 <view class="flex_right">
						 <view class="con_title">签署时间</view>
						 <view class="con_detail">{{item.sign_time.substr(0, 10)}}</view>
					 </view>
				</view>
				<view class="contract_flex">
					<view class="flex_left">
						<view class="con_title">享受折扣</view>
						<view class="con_detail">{{Number(item.discount)*10}}折</view>
					</view>
					 <view class="flex_right">
						 <view class="con_title">采购量</view>
						 <view class="con_detail">≥{{item.min_quantity}}元</view>
					 </view>
				</view>
				<view class="contract_flex">
					<view class="flex_left">
						<view class="con_title">押金</view>
						<view class="con_detail spec_color" v-if="item.is_deposit === '1'">¥{{Number(item.deposit/100)*Number(item.min_quantity)}}</view>
						<view class="con_detail" v-else>无</view>
					</view>
					 <view class="flex_right">
						 <view class="con_title">状态</view>
						 <view class="con_detail spec_color">{{item.apply_status_name}}</view>
					 </view>
				</view>
				<text class="eosfont" :class="{rotate: rotate[index]['rotate']}" 
				@click="pack(index)">&#xe729;</text>
				<view class="check_btn" @click="check(item.view_url)">查看合同</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		data() {
			return {
				data: [{
					contract_period: '',
					sign_time: '',
					deposit: '',
					discount: '',
					min_quantity: '',
					apply_status_name: ''
				}],
				rotate: [],
				rotateKey: -1,
				auth_id: ''
			}
		},
		onLoad() {
			uni.request({
				url: '/uni/api/month/GetMonthApplyList',
				method: 'GET',
				dataType: 'json',
				success: (res) => {
					if(res.data.code === 0) {
						this.data = res.data.data;
						let arr = [];
						res.data.data && res.data.data.map((item, index) => {
							let o = {rotate: false};
							arr.push(o);
						});
						this.rotate = arr;
					}
				}
			});
		},
		methods: {
			cancelContract(id) {
				uni.showModal({
					title: '提示',
					content: '确认取消该合同吗？',
					success:(data) => {
						if(data.confirm) {
							uni.request({
								url: '/uni/api/month_signcontract/CancelContract',
								method: 'POST',
								dataType: 'json',
								data: {
									month_apply_id: id
								},
								success: (res) => {
									uni.showToast({
										title: '您的合同已取消',
										icon: 'none'
									});
									setTimeout(() => {
										this.$jump('/pages/monthly/monthly',2);
									}, 2000);
								}
							})
						}
					}
				});
			},
			pack(key) {
				this.rotate[key]['rotate'] = !this.rotate[key]['rotate'];
			},
			check(url) {
				uni.navigateTo({
				  url: `/pages/web/web?contract_url=${url}`
				});
			}
		},
		components: {
			TopBar
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 80rpx;
		background-color: #F5F5F5;
		.contract_bar {
			height: 98rpx;
			padding: 0 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				font-size: 36rpx;
				color: #000;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
			}
			.right_btn {
				width: 200rpx;
				height: 60rpx;
				border: 1px solid #dcdcdc;
				box-sizing: border-box;
				background-color: #fff;
				text-align: center;
				line-height: 58rpx;
				font-size: 26rpx;
				color: #333;
				border-radius: 30rpx;
			}
		}
		.now_contract {
			padding: 32rpx;
			background-color: #fff;
			position: relative;
			transition: all 0.5s;
			.contract_flex {
				display: flex;
				margin-bottom: 24rpx;
				.flex_left {
					margin-right: 182rpx;
					width: 120rpx;
				}
			}
			.con_title {
				color: #464646;
				font-size: 26rpx;
				height: 36rpx;
				line-height: 36rpx;
				margin-bottom: 4rpx;
			}
			.con_detail {
				color: #000;
				font-size: 32rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				height: 44rpx;
				line-height: 44rpx;
			}
			.spec_color {
				color: #B48000;
			}
			.check_btn {
				width: 100%;
				height: 76rpx;
				line-height: 74rpx;
				text-align: center;
				border: 1px solid #464646;
				box-sizing: border-box;
				color: #464646;
				font-size: 26rpx;
				border-radius: 16rpx;
			}
		}
		.packup {
			border-bottom: 1px solid #ececec;
			height: 80rpx;
			overflow: hidden;
			.eosfont {
				font-size: 32rpx;
				font-weight: 900;
				position: absolute;
				right: 24rpx;
				top: 60rpx;
				transition: all 0.5s;
			}
			.rotate {
				transform: rotateZ(180deg);
			}
		}
	}
</style>