zd/pages/shop/rent.vue

<template>
	<view class="content">
		<!-- 套餐 -->
		<view class="tc-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					选择套餐
				</view>
			</view>
			<view class="contet-list flex">
				<view class="tc flex" v-for="(item,index) in 5" :class="{'action': selectTcIndex == index}" @click="choosTc(index,item)">
					<view class="tc-time">
						7天
					</view>
					<view class="tc-price">
						79
					</view>
					<view class="tc-time-price">
					<text>11</text>元/天
					</view>
				</view>
			</view>
		</view>
		<view class="dy-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					押金服务
				</view>
				<view class="top-right">
					<text>押金规则</text>
					<image src="../../static/icon/next1.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="contet-list flex">
				<view class="tc flex dy">
					<view class="tc-time">
						<image src="../../static/icon/orderWx.png" mode="heightFix"></image>微信信用免押金
					</view>
					<view class="tc-time-price">
					微信信用≥550分
					</view>
					<view class="tc-price">
						77<text>￥88</text>
					</view>
				</view>
				<view class="tc flex dy">
					<view class="tc-time">
						支付押金
					</view>
					<view class="tc-time-price">
					元/天
					</view>
					<view class="tc-price">
						77
					</view>
				</view>
			</view>
		</view>
		<view class="dy-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					使用说明
				</view>
			</view>
			<view class="sysm">
				1、套餐购买需在15分钟之内完成付款，超过15分系统自动取消订单
				2、购买成功后，可至门店取货
				3、商家超过30分钟未接单，自动退款
				4、若未取车，可申请退款，套餐金额将全款退还至原支付账户，若已取车，暂不支持退款
			</view>
		</view>
		<view class="ts">
			
		</view>
		<view class="btm-btn flex">
			<view class="pay-price">
				总计费用：<text>548</text>
			</view>
			<view class="pay-btn">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tcList: [],
				selectTc: {},
				selectTcIndex: 0,
				
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			choosTc(index,item) {
				this.selectTcIndex = index
				this.selectTc = item
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 1rpx;
	}
	.dy-wrap, .tc-wrap {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		// padding: 25rpx 25rpx 45rpx;
		margin: 20rpx auto;
		
	}
	.contet-list {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 25rpx 45rpx;
		.tc {
			width: 315rpx;
			height: 212rpx;
			background: #FFFFFF;
			border: 2px solid #E9E9E9;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			flex-direction: column;
			justify-content: center;
			// align-items: center;
			.tc-time {
				font-size: 28rpx;
				font-weight: bold;
				color: #00001A;
				display: flex;
				align-items: center;
				image {
					height: 34rpx;
					margin-right: 10rpx;
				}
			}
			.tc-price {
				font-size: 55rpx;
				font-weight: bold;
				color: #52C696;
				padding: 4rpx 0;
				&::before {
					content: '￥';
					font-size: 20rpx;
					
				}
				text {
					font-size: 22rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}
			}
			.tc-time-price {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				text {
					font-weight: bold;
				}
			}
		}
		.dy {
			height: 187rpx;
		}
		.action {
			background: #F3FFFB;
			border: 2px solid #5FCCA7;
		}
	}
	.top-wrap {
		justify-content: space-between;
		padding: 0 25rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #00001A;
		height: 85rpx;
		.top-left {
			
		}
		.top-right {
			text {
				font-size: 25rpx;
				font-weight: 500;
				color: #999999;
			}
			image {
				height: 22rpx;
				margin-left: 10rpx;
			}
		}
	}
	.sysm {
		padding: 34rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}
	.ts {
		height: 130rpx;
	}
	.btm-btn {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		.pay-price {
			padding-left: 33rpx;
			flex-grow: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			text {
				font-size:48rpx;
				font-weight: 500;
				color: #FF6B2E;
				&::before {
					content: '￥';
					font-size: 28rpx;
				}
			}
		}
		.pay-btn {
			flex-shrink: 0;
			width: 287rpx;
			height: 98rpx;
			background: linear-gradient(-38deg, #6CDBC3, #6DD6B8);
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>