monthlyPlan.vue

<template>
	<view class="main">
		<view class="top_bar">
			<view class="left" @click="$backup">
				<text class="eosfont left_icon">&#xe743;</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>