<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)"></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>