pet-system-merchant-app/pages/store/apply/index.vue

<template>
	<view class="store-apply-page">
		<view class="hero-banner">
			<text class="hero-title">商家入驻申请</text>
			<text class="hero-desc">加入我们，共享宠物服务市场</text>
		</view>
		<view class="form-card">
			<view class="form-item"><text class="form-label">商家名称</text><input class="form-input" v-model="form.name"
					placeholder="请输入商家名称" /></view>
			<view class="form-item"><text class="form-label">联系人</text><input class="form-input" v-model="form.contact"
					placeholder="请输入联系人姓名" /></view>
			<view class="form-item"><text class="form-label">联系电话</text><input class="form-input" v-model="form.phone"
					type="number" placeholder="请输入联系电话" /></view>
			<view class="form-item"><text class="form-label">经营地址</text><input class="form-input" v-model="form.address"
					placeholder="请输入经营地址" /></view>
			<view class="form-item">
				<text class="form-label">服务类型</text>
				<picker :range="serviceTypes" @change="onTypeChange">
					<view class="picker-value">{{ form.serviceType || '请选择' }}</view>
				</picker>
			</view>
			<view class="form-item column"><text class="form-label">商家简介</text><textarea class="form-textarea"
					v-model="form.intro" placeholder="请简要介绍商家情况"></textarea></view>
		</view>
		<button class="submit-btn" @click="onSubmit">提交申请</button>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
const serviceTypes = ['宠物接送', '上门喂遛', '上门洗护', '宠物就医', '综合服务']
const form = reactive({ name: '', contact: '', phone: '', address: '', serviceType: '', intro: '' })
const onTypeChange = (e) => { form.serviceType = serviceTypes[e.detail.value] }
const onSubmit = () => {
	if (!form.name || !form.phone) { uni.showToast({ title: '请填写必要信息', icon: 'none' }); return }
	uni.showToast({ title: '申请已提交，请等待审核', icon: 'success' })
	setTimeout(() => uni.navigateBack(), 1500)
}
</script>

<style lang="scss" scoped>
.store-apply-page {
	min-height: 100vh;
	background: #f7f8fa;
	padding-bottom: 160rpx;
}

.hero-banner {
	background: linear-gradient(135deg, #ffd53f, #ff9500);
	padding: 80rpx 40rpx 60rpx;
}

.hero-title {
	display: block;
	font-size: 44rpx;
	font-weight: 900;
	color: #fff;
}

.hero-desc {
	display: block;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.85);
	margin-top: 12rpx;
}

.form-card {
	background: #fff;
	border-radius: 32rpx 32rpx 0 0;
	margin-top: -30rpx;
	padding: 40rpx 32rpx;
	position: relative;
	z-index: 3;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 28rpx 0;
	border-bottom: 2rpx solid #EEEEEE;
}

.form-item.column {
	flex-direction: column;
	align-items: flex-start;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	width: 180rpx;
	font-size: 28rpx;
	color: #333;
	flex-shrink: 0;
	margin-bottom: 16rpx;
}

.form-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
}

.picker-value {
	font-size: 28rpx;
	color: #333;
}

.form-textarea {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	height: 200rpx;
	background: #f9f9f9;
	border-radius: 16rpx;
	padding: 20rpx;
}

.submit-btn {
	margin: 40rpx 32rpx;
	width: calc(100% - 64rpx);
	height: 96rpx;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #fff;
	border: none;
	border-radius: 48rpx;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 96rpx;
}
</style>