lift-drawing-wechat/pages/index/index.vue

<template>
	<view class="container">
		<!-- 顶部图片和标题 -->
		<view class="header-section">
			<image class="header-image" src="/static/imgs/indexImg.png" mode="aspectFill"></image>
			<view class="header-overlay">
				<view class="header-title">生成电梯图纸</view>
				<view class="header-subtitle">
					选择模板并设置参数，快速生成专业电梯施工图
				</view>
			</view>
		</view>

		<!-- 选择图纸模板 -->
		<view class="section">
			<view class="section-title">选择图纸模板</view>
			<uv-skeletons v-if="loading" :loading="loading" :skeleton="[{
					type: 'flex',
					num: 2,
					gap: '20rpx',
					children:[{
						type: 'custom',
						num: 1,
						gap: '20rpx',
						style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;'
						},{
						type: 'custom',
						num: 1,
						gap: '20rpx',
						style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;'
						}]
				}]"></uv-skeletons>
			<view class="template-grid" v-else>
				<view class="template-item" :class="{ active: currentTemplate.id === item.id }"
					@click="selectTemplate(item)" v-for="item in templateList" :key="item.id">
					<view class="tag" v-if="item.price_cents">¥ {{item.price_cents / 100}}</view>
					<view class="template-name">{{item.name}}</view>
					<view class="template-desc">{{item.description}}</view>
				</view>
			</view>
		</view>

		<!-- 设置参数 -->
		<view class="section">
			<view class="section-title">设置参数</view>
			<uv-skeletons v-if="loading" :loading="loading" :skeleton="[{
					type: 'line',
					num: 3,
					gap: '20rpx'
				}]"></uv-skeletons>
			<view class="form" v-else>
				<uv-form labelAlign="left" labelWidth="auto" labelPosition="left" :model="formField" :rules="rules"
					ref="form">
					<uv-form-item :prop="item.key" :label="item.name + '：'" v-for="item in (currentTemplate.params?.filter(item => item.enabled) || [])">
						<uv-input :type="item.type === 'number' ? 'digit' : 'text'" v-model="item.value" color="#000"
							border="bottom" :placeholderStyle="{ color: '#666778' }" placeholder="请输入"></uv-input>
					</uv-form-item>
					<!-- <uv-form-item prop="password" label="载重（kg）">
            <uv-input
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="井道宽度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="井道深度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="顶层高度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password" label="底坑深度（mm）">
            <uv-input
              type="digit"
              v-model="formField.password"
              color="#000"
              border="none"
              :placeholderStyle="{ color: '#666778' }"
              placeholder="请输入"
            ></uv-input>
          </uv-form-item>
          <uv-form-item prop="password">
            <div style="margin-bottom: 4px">备注说明</div>
            <uv-textarea
              v-model="formField.password"
              placeholder="请输入"
            ></uv-textarea>
          </uv-form-item> -->
				</uv-form>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<uv-button :loading="generating" @click="() => modalRef.open()" text="生成图纸" color="#3F70FF"></uv-button>
			<uv-button @click="viewHistory" text="查看记录"></uv-button>
		</view>
		<uv-modal ref="modalRef" showCancelButton content='确定生成图纸？' @confirm="confirmGenerate"></uv-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		onShow,
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom,
	} from "@dcloudio/uni-app";
	import {
		useAuthStore,
		useUserStore
	} from "@/store";
	import RPC from "@/utils/request";
	import {
		usePermission
	} from "@/hooks/usePermission";

	const authStore = useAuthStore();
	const userStore = useUserStore();
	const loading = ref(false)

	const generating = ref(false);
	const modalRef = ref(null)
	const confirmGenerate = () => {
		const params = {}
		currentTemplate.value.params?.filter(item => item.enabled).forEach(item => {
			params[item.name] = item.value
		})
		RPC.post('/template_create_task', {template_id:currentTemplate.value.id,template_data:params}).then(() => {

			uni.showToast({
				title: "图纸开始生成",
				icon: "success",
			});
			setTimeout(() => {
				uni.navigateTo({
					url: "/pagesA/generate-record/generate-record",
				});
			}, 1000)
			modalRef.value.close()
		})
	}
	const templateList = ref([])
	const currentTemplate = ref({})
	const getList = () => {
		loading.value = true
		RPC.post('/template/list', {
			page: 1,
			limit: -1
		}).then(res => {
			templateList.value = (res.rows || []).filter(item => item.enabled)
			currentTemplate.value = templateList.value[0] ? JSON.parse(JSON.stringify(templateList.value[0])) : {}
		}).finally(() => {
			loading.value = false
		})
	}
	getList()

	// 选择模板
	const selectTemplate = (item) => {
		currentTemplate.value = JSON.parse(JSON.stringify(item));
	};

	const form = ref(null);
	const formField = ref({
		phone: "",
		password: "",
	});
	const rules = ref({
		// 'phone': {
		// 	required: true,
		// 	message: '请填写手机号',
		// 	trigger: ['blur', 'change']
		// },
		// 'password': {
		// 	required: true,
		// 	message: '请填写验证码',
		// 	trigger: ['blur', 'change']
		// }
	});

	// 查看历史记录
	const viewHistory = () => {
		uni.navigateTo({
			url: "/pagesA/generate-record/generate-record",
		});
	};

	// 分享给朋友
	onShareAppMessage((data) => {
		console.log("🚀 ~ onShareAppMessage ~ data:", data);
		return {
			title: "电梯图纸生成平台",
			path: "/pages/index/index",
		};
	});

	// 分享到朋友圈
	onShareTimeline((data) => {
		console.log("🚀 ~ onShareTimeline ~ data:", data);
		return {
			title: "电梯图纸生成平台",
			query: "a=1&b=2",
		};
	});

	onLoad(() => {
		console.log("index-onLoad");
	});
	onShow(async () => {
		console.log("test page onShow");
		const hasPermission = await usePermission();
		console.log(hasPermission ? "已登录" : "跳转登录");
		// 以下开始写业务逻辑...
		if (!hasPermission) {
			authStore.signOut();
			uni.$uv.route("/pages/login/login");
		}
	});
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 52px;

		/* #ifdef H5 */
		padding-bottom: 102px;
		/* H5环境下需要更多空间 (50px按钮 + 50px tabBar + 2px间距) */
		/* #endif */
	}

	.header-section {
		position: relative;
		height: 200px;
		overflow: hidden;

		.header-image {
			width: 100%;
			height: 100%;
		}

		.header-overlay {
			position: absolute;
			top: 50%;
			right: 0;
			background: rgba(0, 0, 0, 0.5);
			color: white;
			width: 70%;
			transform: translate(0, -50%);
			padding: 20px 10px;

			.header-title {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 8px;
				color: #bd9e85;
			}

			.header-subtitle {
				font-size: 12px;
			}
		}
	}

	.section {
		margin: 16px;
		background: white;
		border-radius: 12px;
		padding: 16px;

		.section-title {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			margin-bottom: 16px;
		}
	}

	.template-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
		max-height: 200px;
		overflow-y: auto;

		.template-item {
			border: 1px solid #e5e5e5;
			border-radius: 8px;
			padding: 16px 12px;
			text-align: center;
			transition: all 0.3s;
			position: relative;
			.tag {
				position: absolute;
				top: 0px;
				left: 0;
				padding: 2px 8px;
				border-radius: 0 0 10px 0;
				font-size: 10px;
				color: white;
				background: #00caef;
			}

			&.active {
				border-color: #4285f4;
				background-color: #f0f7ff;
			}

			.template-name {
				font-size: 14px;
				font-weight: 500;
				color: #333;
				margin: 8px 0 4px;
			}

			.template-desc {
				font-size: 12px;
				color: #999;
			}
		}
	}

	.bottom-actions {
		z-index: 999;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		height: 50px;
		border-top: 1px solid #e5e5e5;
		display: flex;
		align-items: center;
		gap: 12px;
		justify-content: space-between;
		padding: 0 16px;
		box-sizing: border-box;
		width: 100%;

		/* #ifdef H5 */
		bottom: 50px;
		/* H5环境下给tabBar留出空间 */
		/* #endif */
	}
</style>

<style lang="scss">
	.bottom-actions {
		.uv-button-wrapper {
			width: 48%;
		}
	}
</style>