<template>
<view class="main">
<view class="top_bar">
<view class="left" @click="$backup">
<text class="eosfont left_icon"></text>l
<text class="close_title">关闭</text>
</view>
<text class="middle">我的包年计划</text>
<text class="my_contract" @click="$jump('/pages/monthlyContract/monthlyContract',2)">我的合同</text>
</view>
<view class="plan_info">
<view class="info_title">当前累计已采购 (元)</view>
<view class="info_amount">{{month_apply_info.total_amount}}</view>
<view class="wait" v-if="month_apply_info.apply_status=== '1'" @click="$jump(`/pages/monthlyDeposit/monthlyDeposit?month_apply_id=${month_apply_info.month_apply_id}`,2)">您有一笔押金等待缴纳</view>
<view class="info_detail">
<view class="detail_item">
<view class="title1">{{month_apply_info.date_diff}}天</view>
<view class="title2">剩余时间</view>
</view>
<text class="line"></text>
<view class="detail_item">
<view class="title1">{{month_apply_info.min_quantity}}元</view>
<view class="title2">计划总采购</view>
</view>
<text class="line"></text>
<view class="detail_item">
<view class="title1">{{month_apply_info.discount*10}}折</view>
<view class="title2">当前享折扣</view>
</view>
</view>
</view>
<view class="mid_card">
<view class="mid_left">
<view class="text1">包年计划商品专区</view>
<view class="text2">自由搭配 采购钜惠</view>
</view>
<view class="mid_right">
<view class="text1">折扣采购</view>
<view class="text2" @click="$jump('/pages/monthly/monthly',2)">去看看</view>
</view>
</view>
<view class="pro_title">
采购明细
<text>/包含计划内商品的订单</text>
</view>
<view v-if="month_order_list !== null">
<view class="pro_item" v-for="(item, index) in month_order_list" :key="index">
<view class="item_top">计划内采购金额：<text>¥{{item.total_price}}</text></view>
<view class="item_content">
<view class="content_item" v-for="(vo, key) in item.child" :key="key" @click="$jumpOrderDetail(vo.order_id)">
<image class="item_img" :src="vo.goods_image || $noGoodsImg"/>
<view>
<view class="item_name">{{vo.goods_name}}</view>
<view class="item_spec" v-if="vo.specification" v-html="vo.specification"></view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="no_data">
<view class="no_title">暂无记录</view>
<view class="no_btn" @click="$jump('/pages/monthly/monthly',2)">前往专区</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
month_apply_info: [],
month_order_list: []
}
},
onLoad(options) {
let month_apply_id = options.month_apply_id;
uni.request({
url: '/uni/api/month/GetMyMonthApply',
method: 'POST',
data: {
month_apply_id: month_apply_id
},
dataType: 'json',
success: (res) => {
if(res.data.code === 0) {
this.month_apply_info = res.data.data.month_apply_info[0];
res.data.data.month_order_list !== null && res.data.data.month_order_list.map((item, index) => {
item.child.map((vo, key) => {
if(!vo.specification) return
vo.specification = vo.specification.replace(/src/, 'style="width:18px;height:18px;vertical-align:middle;" src');
});
});
this.month_order_list = res.data.data.month_order_list;
} else {
uni.showModal({
title: '提示',
content: '当前没有可履行的合同',
success: () => {
this.$jump('/pages/monthly/monthly',2);
}
})
}
}
})
}
}
</script>
<style lang="scss" scoped>
.main {
.top_bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 80rpx;
padding: 0 20rpx;
.left {
display: flex;
align-items: center;
color: #7c7c7c;
.left_icon {
font-weight: 900;
margin-right: 10rpx;
color: #000;
font-size: 40rpx;
}
.close_title {
font-size: 28rpx;
color: #212121;
margin-left: 10rpx;
}
}
.middle {
text-align: center;
color: #000;
font-size: 32rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.my_contract {
color: #000;
font-size: 26rpx;
line-height: 36rpx;
}
}
.plan_info {
background:linear-gradient(135deg,rgba(255,232,199,1) 0%,rgba(214,163,93,1) 100%);
overflow: hidden;
.info_title {
text-align: center;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color: rgba(0,0,0,0.6);
margin-top: 40rpx;
}
.info_amount {
text-align: center;
font-size: 64rpx;
color: #000;
height: 90rpx;
line-height: 90rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
}
.wait {
width: 340rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
border-radius: 32rpx;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 28rpx;
margin: 24rpx auto 0;
}
.info_detail {
width: 710rpx;
height: 160rpx;
margin: 24rpx auto 0;
border-radius:32rpx 32rpx 12rpx 12rpx;
background:linear-gradient(180deg,rgba(51,51,51,1) 0%,rgba(48,47,53,1) 100%);
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.1);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 36rpx;
box-sizing: border-box;
.line {
width: 2rpx;
height: 40rpx;
background-color: #000;
}
.detail_item {
text-align: center;
min-width: 180rpx;
.title1 {
color: #FCE3C1;
font-size: 36rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
height: 50rpx;
line-height: 50rpx;
}
.title2 {
margin-top: 8rpx;
color: rgba(253,228,194,0.5);
font-size: 26rpx;
line-height: 36rpx;
height: 36rpx;
}
}
}
}
.mid_card {
width: 702rpx;
height: 120rpx;
margin: 30rpx auto 40rpx;
border-radius: 16rpx;
overflow: hidden;
display: flex;
.mid_left {
background:linear-gradient(135deg,rgba(47,46,51,1) 0%,rgba(69,75,93,1) 100%);
width: 422rpx;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 40rpx;
.text1 {
font-size: 32rpx;
color: #FDE4C2;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
.text2 {
font-size: 22rpx;
color:rgba(253,228,194,0.6);
height: 32rpx;
line-height: 32rpx;
letter-spacing: 2rpx;
margin-top: 4rpx;
}
}
.mid_right {
width: 240rpx;
height: 100%;
background-color: #EFD5A2;
display: flex;
flex-direction: column;
justify-content: center;
.text1 {
color: #2F2E33;
font-size: 32rpx;
height: 44rpx;
line-height: 44rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
margin: -6rpx 0 6rpx 78rpx;
}
.text2 {
width: 120rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
background-color: #3B3E4A;
border-radius: 20rpx;
font-size: 24rpx;
color: #fff;
margin-left: 82rpx;
}
}
}
.pro_title {
font-size: 36rpx;
height: 50rpx;
line-height: 50rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
padding-left: 24rpx;
margin-bottom: 24rpx;
text {
margin-left: 16rpx;
color: #959595;
font-size: 28rpx;
font-weight: initial;
}
}
.pro_item {
width: 702rpx;
margin: 0 auto 34rpx;
.item_top {
width: 392rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #FAE0BB;
border-radius:16rpx 80rpx 0px 0px;
color: #2F2E33;
font-size: 26rpx;
line-height: 60rpx;
padding-left: 20rpx;
text {
font-size: 32rpx;
font-weight: 500;
}
}
.item_content {
background-color: #fff;
padding: 24rpx 24rpx 0;
box-shadow:0px 4rpx 60rpx 0px rgba(0,0,0,0.05);
border-radius:20rpx;
.content_item {
padding-bottom: 24rpx;
display: flex;
.item_img {
width: 160rpx;
height: 160rpx;
border-radius: 16rpx;
margin-right: 24rpx;
}
.item_name {
color: #212121;
font-size: 28rpx;
height: 40rpx;
line-height: 40rpx;
margin-bottom: 8rpx;
}
.item_spec {
height: 36rpx;
line-height: 36rpx;
border-radius: 16rpx;
background-color: #F5F5F5;
padding: 0 16rpx;
color: #7C7C7C;
font-size: 22rpx;
}
}
}
}
.no_data {
margin-top: 120rpx;
.no_title {
color: #959595;
font-size: 30rpx;
height: 42rpx;
line-height: 42rpx;
text-align: center;
}
.no_btn {
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
text-align: center;
border-radius: 10rpx;
background-color: #E2B77C;
font-size: 26rpx;
color: #302F35;
margin: 40rpx auto 0;
}
}
}
</style>