zdtap-uniapp-main/pagesActivity/bgSelect.vue

<template>
	<view class="page">
		<!-- 模板列表容器 -->
		<view 
			class="template-list"
			:class="{'is-pdf': exportType === 2}"
		>
			<view 
				v-for="(item, index) in templateList" 
				:key="item.id"
				class="template-item" 
				:class="{'is-active': selectedId === item.id}"
				@click="handleSelect(item.id)"
			>
				<image 
					class="template-cover" 
					:src="item.cover" 
					:mode="exportType === 2 ? 'aspectFit' : 'aspectFill'"
				/>
				<view class="check-icon" v-show="selectedId === item.id">
					<text class="iconfont icon-check"></text>
				</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="action-bar">
			<button 
				class="preview-btn" 
				:class="{'is-active': isSelected}"
				:disabled="!isSelected"
				@click="handlePreview"
			>预览</button>
		</view>
	</view>
</template>

<script>
import { getBillTemplateList } from "@/api/bar.js"

export default {
	data() {
		return {
			selectedId: 0,
			templateList: [],
			exportType: 1, // 1: 图片导出, 2: PDF导出
			formData: {
				beerId: '',
				tapNumber: '',
				amount: '',
				amount1: '',
				specs: '',
				specs1: ''
			}
		}
	},
	
	computed: {
		isSelected() {
			return this.selectedId !== 0
		}
	},
	
	onLoad(options) {
		this.initPage(options)
	},
	
	methods: {
		// 页面初始化
		initPage(options) {
			this.exportType = Number(options.type) || 1
			this.initFormData(options)
			this.fetchTemplateList()
			this.setPageTitle()
		},
		
		// 初始化表单数据
		initFormData(options) {
			this.formData = {
				beerId: options.beerId,
				tapNumber: options.no,
				amount: options.amount,
				amount1: options.amount1,
				specs: options.specs,
				specs1: options.specs1
			}
		},
		
		// 设置页面标题
		setPageTitle() {
			uni.setNavigationBarTitle({
				title: this.exportType === 2 ? '选择打印样式' : '选择图片样式'
			})
		},
		
		// 获取模板列表
		async fetchTemplateList() {
			try {
				const res = await getBillTemplateList()
				this.templateList = this.formatTemplateData(res.data)
			} catch (error) {
				uni.showToast({
					title: '获取模板列表失败',
					icon: 'none'
				})
			}
		},
		
		// 格式化模板数据
		formatTemplateData(data) {
			return data
				.filter(item => item.templateType === this.exportType)
				.map(item => ({
					id: item.id,
					cover: item.elements ? JSON.parse(item.elements).templateCover : '',
					elements: item.elements ? JSON.parse(item.elements) : {}
				}))
		},
		
		// 选择模板
		handleSelect(id) {
			this.selectedId = id
		},
		
		// 预览模板
		handlePreview() {
			if (!this.isSelected) {
				uni.showToast({
					title: '请选择模板',
					icon: 'none'
				})
				return
			}
			
			const params = this.getPreviewParams()
			const route = this.exportType === 1 ? 'preview' : 'pdfPreview'
			
			uni.navigateTo({
				url: `/pagesActivity/${route}?${params}`
			})
		},
		
		// 获取预览参数
		getPreviewParams() {
			const { beerId, tapNumber, amount, amount1, specs, specs1 } = this.formData
			return [
				`templateId=${this.selectedId}`,
				`beerId=${beerId}`,
				`no=${tapNumber}`,
				`amount=${amount}`,
				`amount1=${amount1}`,
				`specs=${specs}`,
				`specs1=${specs1}`
			].join('&')
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #F7F7F7;
	padding: 20rpx;
	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	
	.template-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		// 根据导出类型使用不同的布局
		&.is-pdf {
			justify-content: center;
			
			.template-item {
				width: 100%;
				max-width: 710rpx;
				margin-bottom: 24rpx;
				
				&::before {
					padding-top: 50%; // 460:230 ≈ 2:1 比例
				}
			}
		}
		
		.template-item {
			position: relative;
			width: calc(50% - 10rpx);
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			border-radius: 12rpx;
			overflow: hidden;
			transition: transform 0.3s ease;
			
			&::before {
				content: '';
				display: block;
				padding-top: 177.78%; // 9:16 比例，用于图片导出类型
			}
			
			&.is-active {
				border: 2rpx solid #D42E78;
				
				.check-icon {
					opacity: 1;
					transform: scale(1);
				}
			}
			
			&:active {
				transform: scale(0.98);
			}
			
			.template-cover {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #F5F5F5;
			}
			
			.check-icon {
				position: absolute;
				top: 12rpx;
				right: 12rpx;
				z-index: 1;
				width: 40rpx;
				height: 40rpx;
				background-color: #D42E78;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0;
				transform: scale(0.8);
				transition: all 0.3s ease;
				
				.icon-check {
					color: #FFFFFF;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.action-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.preview-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #CCCCCC;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			
			&.is-active {
				background-color: #D42E78;
				
				&:active {
					transform: scale(0.98);
					background-color: #B0245F;
				}
			}
			
			&:disabled {
				opacity: 0.7;
				pointer-events: none;
			}
		}
	}
}
</style>