wx-shop/pages/create/index.vue

<template>
	<view class="create-page">
		<view class="header-section">
			<view class="header-badge">
				<text class="iconfont icon-shandian"></text>
			</view>
			<view class="header-title">
				选择您想要创建的内容类型
			</view>
			<view class="header-subtitle">
				根据业务需求选择合适的方案，快速完成配置
			</view>
		</view>

		<view class="card-list">
			<view
				v-for="option in createOptions"
				:key="option.id"
				class="create-card"
				:class="option.tone"
				@click="handleCreate(option)"
			>
				<view class="card-icon">
					<text class="iconfont" :class="option.icon"></text>
				</view>
				<view class="card-title">{{ option.title }}</view>
				<view class="card-desc">
					{{ option.description }}
				</view>
				<view class="card-tags">
					<view
						class="tag"
						v-for="tag in option.tags"
						:key="tag"
					>
						{{ tag }}
					</view>
				</view>
				<view class="action-button" :class="option.tone">
					<text class="plus">+</text>
					<text class="action-text">立即创建</text>
					<text class="iconfont icon-zhifeiji1"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			createOptions: [
				{
					id: 'group',
					title: '香水团购',
					description: '发起香水团购活动，人数越多折扣越大',
					tags: ['阶梯折扣', '正品保证', '快速成团'],
					icon: 'icon-shandian',
					tone: 'group',
					url: '/pages/index/index',
					navType: 'switchTab'
				},
				{
					id: 'distribution',
					title: '香水分装',
					description: '发起香水分装服务，小容量更实惠',
					tags: ['小容量', '超值价格', '多款选择'],
					icon: 'icon-lihe',
					tone: 'distribution',
					url: '/pages/distribution/index',
					navType: 'switchTab'
				}
			]
		};
	},
	methods: {
		handleCreate(option) {
			if (!option.url) {
				uni.showToast({
					title: '功能即将上线',
					icon: 'none'
				});
				return;
			}

			if (option.navType === 'switchTab') {
				uni.switchTab({
					url: option.url
				});
				return;
			}

			uni.navigateTo({
				url: option.url
			});
		}
	}
};
</script>

<style scoped>
.create-page {
	min-height: 100vh;
	padding: 48rpx 32rpx 80rpx;
	background: linear-gradient(180deg, #f4f2ff 0%, #ffffff 45%, #ffffff 100%);
	box-sizing: border-box;
}

.header-section {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-bottom: 40rpx;
}

.header-badge {
	width: 120rpx;
	height: 120rpx;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f401ff 0%, #8317ff 100%);
	color: #fff;
	box-shadow: 0 20rpx 40rpx rgba(132, 23, 255, 0.2);
	font-size: 52rpx;
}

.header-title {
	font-size: 42rpx;
	font-weight: 700;
	color: #1f2240;
}

.header-subtitle {
	font-size: 28rpx;
	color: #7d8198;
}

.card-list {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.create-card {
	background: #ffffff;
	border-radius: 36rpx;
	padding: 48rpx 40rpx;
	box-shadow: 0 28rpx 68rpx rgba(148, 110, 255, 0.12);
	display: flex;
	flex-direction: column;
	gap: 26rpx;
}

.card-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 54rpx;
}

.create-card.group .card-icon {
	background: linear-gradient(135deg, #ff6388 0%, #ff3b6d 100%);
	box-shadow: 0 20rpx 40rpx rgba(255, 62, 120, 0.25);
}

.create-card.distribution .card-icon {
	background: linear-gradient(135deg, #6e6bff 0%, #9828ff 100%);
	box-shadow: 0 20rpx 40rpx rgba(120, 64, 255, 0.25);
}

.card-title {
	font-size: 38rpx;
	font-weight: 700;
	color: #1f2240;
}

.card-desc {
	font-size: 28rpx;
	line-height: 44rpx;
	color: #646887;
}

.card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag {
	padding: 12rpx 24rpx;
	border-radius: 999rpx;
	background: rgba(132, 23, 255, 0.08);
	color: #5a4cff;
	font-size: 24rpx;
}

.create-card.group .tag {
	background: rgba(255, 61, 109, 0.1);
	color: #ff3d6d;
}

.create-card.distribution .tag {
	background: rgba(120, 64, 255, 0.12);
	color: #624dff;
}

.action-button {
	margin-top: 12rpx;
	height: 96rpx;
	border-radius: 999rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 600;
}

.action-button .plus {
	font-size: 40rpx;
}

.action-button.group {
	background: linear-gradient(90deg, #ff3d6d 0%, #ff00b8 100%);
	box-shadow: 0 18rpx 34rpx rgba(255, 0, 120, 0.2);
}

.action-button.distribution {
	background: linear-gradient(90deg, #6158ff 0%, #9f21ff 100%);
	box-shadow: 0 18rpx 34rpx rgba(97, 88, 255, 0.22);
}
</style>