novel-front-app/pages_order/novel/SubscriptionInformation.vue

<template>
	<view class="subscription-info-container">
		<uv-navbar title="订阅信息" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;"
			:border="false" leftIconSize="46" />
		<view class="content-area">
			<view class="card">
				<view class="section-title">订阅章节</view>
				<view class="row row-split">
					<template v-if="!showBatch">
						<text class="label">章节名称</text>
						<view class="row-content">
							<text class="value">第1章 2004</text>
							<text class="batch-link" @click="showBatch = true">批量订阅</text>
						</view>
					</template>
					<template v-else>
						<view class="batch-row">
							<view class="batch-left">
								<text class="star">*</text>
								<text class="batch-title">批量订阅</text>
							</view>
						</view>
						<view class="batch-input-row">
							<input class="batch-input" v-model="batchCount" placeholder="请输入订阅数"
								placeholder-class="batch-placeholder" />
							<text class="batch-action" @click="batchSubscribeAction">订阅本章</text>
						</view>
						<view class="batch-divider"></view>
					</template>
				</view>
				<view class="row row-split">
					<text class="label">章节信息</text>
					<view class="row-content">
						<text class="value">本次订阅消耗：10 豆豆</text>
					</view>
				</view>
				<view class="row">
					<text class="label">支付方式</text>
					<view class="row-content">
						<text class="value">账户余额：0 豆豆</text>
					</view>
				</view>
			</view>
			<view class="card order-info">
				<view class="section-title">订单信息</view>
				<view class="row">
					<text class="label">内容</text>
				</view>
				<view class="row">
					<text class="price"><span class="total-label">合计：</span><span class="total-amount">0.10
							元</span></text>
				</view>
			</view>
			<view class="tips">
				请仔细检查并确认相关信息，因用户个人疏忽导致的充值错误、章节用户自行承担。一旦完成充值，概不退换。
			</view>
		</view>
		<button class="pay-btn" @click="payAndSubscribe">支付并订阅</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showBatch: false,
				batchCount: ''
			}
		},
		methods: {
			batchSubscribe() {
				uni.showToast({
					title: '批量订阅功能开发中',
					icon: 'none'
				})
			},
			batchSubscribeAction() {
				// Implementation of batchSubscribeAction method
			},
			payAndSubscribe() {
				uni.showToast({
					title: '支付成功，已订阅',
					icon: 'success'
				})
				// 可在此处添加支付逻辑
			}
		}
	}
</script>

<style scoped>
	.subscription-info-container {
		background: #f8f8f8;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.content-area {
		padding-bottom: 180rpx;
	}

	body {
		overflow: hidden;
	}

	.card {
		background: #fff;
		border-radius: 24rpx;
		margin: 32rpx 24rpx 0 24rpx;
		padding: 32rpx 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 24rpx;
	}

	.row {
		display: flex;
		flex-direction: column;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}

	.row-split {
		border-bottom: 1px solid #f0f0f0;
	}

	.label {
		color: #888;
		font-size: 26rpx;
		margin-bottom: 4rpx;
		margin-top: 20rpx;
	}

	.row-content {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.value {
		color: #222;
		font-size: 26rpx;
	}

	.batch-link {
		color: #3478f6;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	.order-info {
		margin-top: 32rpx;
	}

	.order-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.price {
		font-size: 28rpx;
		margin-left: 0;
	}

	.total-label {
		color: #222;
	}

	.total-amount {
		color: #ff6600;
	}

	.tips {
		color: #bbb;
		font-size: 22rpx;
		margin: 32rpx 24rpx 0 24rpx;
		line-height: 1.6;
	}

	.pay-btn {
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		bottom: 90rpx;
		background: #0a297e;
		color: #fff;
		font-size: 32rpx;
		border-radius: 40rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-weight: bold;
		z-index: 100;
	}

	.batch-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0;
	}

	.batch-left {
		display: flex;
		align-items: center;
	}

	.star {
		color: #f5222d;
		margin-right: 6rpx;
		font-size: 26rpx;
	}

	.batch-title {
		font-size: 26rpx;
		color: #222;
		font-weight: 500;
	}

	.batch-action {
		color: #3478f6;
		font-size: 24rpx;
		margin-left: 24rpx;
	}

	.batch-input-row {
		display: flex;
		align-items: center;
		margin-top: 4rpx;
	}

	.batch-input {
		flex: 1;
		border: none;
		font-size: 24rpx;
		color: #bbb;
		background: transparent;
		outline: none;
		padding: 0;
		height: 40rpx;
	}

	.batch-placeholder {
		color: #bbb;
		font-size: 24rpx;
	}

	.batch-divider {
		height: 2rpx;
		background: #f0f0f0;
		width: 100%;
		margin-top: 4rpx;
	}
</style>