teambuy-front/pages_order/mine/team.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar title="团长申请" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />

        <!-- 顶部图片区域 -->
        <view class="banner">
            <image src="/static/image/红烧肉.png" mode="aspectFill" class="banner-image"></image>
        </view>

        <view class="content-area">
            <!-- 送餐点照片上传区域 -->
            <view class="section-title">送餐点照片</view>
            <view class="section-block">
                <view class="upload-container">
                    <view class="upload-area" @click="chooseImage" v-if="!locationImage">
                        <view class="plus">+</view>
                        <view class="upload-text">添加图片</view>
                    </view>
                    <image v-else :src="locationImage" mode="aspectFill" class="upload-area" @click="chooseImage" />
                </view>
            </view>

            <!-- 送餐点信息填写区域 -->
            <view class="section-title">送餐点信息</view>
            <view class="section-block">

                <view class="form-item">
                    <text class="label">送餐点名称</text>
                    <input class="input" type="text" v-model="formData.name" placeholder="请输入送餐点名称"
                        placeholder-class="placeholder" />
                </view>

                <view class="form-item">
                    <text class="label">您的姓名</text>
                    <input class="input" type="text" v-model="formData.contactName" placeholder="请输入您的姓名"
                        placeholder-class="placeholder" />
                </view>

                <view class="form-item">
                    <text class="label">联系手机号</text>
                    <input class="input" type="number" v-model="formData.contactPhone" placeholder="请输入您的手机号"
                        placeholder-class="placeholder" />
                </view>

                <view class="form-item region-item" @click="showRegionPicker">
                    <text class="label">所在地区</text>
                    <view class="region-value">
                        <text :class="{ 'placeholder': !formData.region }" style="color: #000;">{{ formData.region || '请选择' }}</text>
                        <uv-icon name="arrow-right" color="#000" />
                    </view>
                </view>

                <view class="address-item">
                    <text class="label">详细地址</text>
                    <view class="address-box">
                        <textarea class="address-input" v-model="formData.address" placeholder="请输入详细地址"
                            placeholder-class="placeholder" />
                    </view>
                </view>
            </view>

            <!-- 提交按钮 -->
            <view class="submit-btn" @click="submitApplication">
                提交申请
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'

export default {
    components: {
        navbar
    },
    data() {
        return {
            locationImage: '', // 上传的送餐点照片
            formData: {
                name: '', // 送餐点名称
                contactName: '', // 联系人姓名
                contactPhone: '', // 联系电话
                region: '', // 所在地区
                address: '' // 详细地址
            }
        }
    },
    methods: {
        // 选择图片
        chooseImage() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    // 这里可以添加图片上传到服务器的逻辑
                    // 暂时只展示选择的图片
                    this.locationImage = res.tempFilePaths[0]
                }
            })
        },

        // 显示地区选择器（当前只是一个简单的点击反应）
        showRegionPicker() {
            // 模拟选择了一个地区
            this.formData.region = '长沙市雨花区'

            // 显示提示
            uni.showToast({
                title: '已选择地区',
                icon: 'none'
            })
        },

        // 提交申请
        submitApplication() {
            // 表单验证
            if (!this.locationImage) {
                return uni.showToast({
                    title: '请上传送餐点照片',
                    icon: 'none'
                })
            }

            if (!this.formData.name) {
                return uni.showToast({
                    title: '请输入送餐点名称',
                    icon: 'none'
                })
            }

            if (!this.formData.contactName) {
                return uni.showToast({
                    title: '请输入您的姓名',
                    icon: 'none'
                })
            }

            if (!this.formData.contactPhone) {
                return uni.showToast({
                    title: '请输入联系手机号',
                    icon: 'none'
                })
            }

            if (!this.$utils.verificationPhone(this.formData.contactPhone)) {
                return uni.showToast({
                    title: '请输入正确的手机号',
                    icon: 'none'
                })
            }

            if (!this.formData.region) {
                return uni.showToast({
                    title: '请选择所在地区',
                    icon: 'none'
                })
            }

            if (!this.formData.address) {
                return uni.showToast({
                    title: '请输入详细地址',
                    icon: 'none'
                })
            }

            // 显示提交中
            uni.showLoading({
                title: '提交中...'
            })

            // 模拟提交申请的过程
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '申请提交成功',
                    icon: 'success'
                })

                // 延迟返回上一页
                setTimeout(() => {
                    this.$utils.navigateBack()
                }, 1500)
            }, 1000)
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.banner {
    width: 100%;
    height: 240rpx;
    background-color: #019245;

    .banner-image {
        width: 100%;
        height: 100%;
        display: block;
    }
}

.content-area {
    padding: 20rpx;
}

.section-block {
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 10rpx 20rpx;
    
    overflow: hidden;
}

.section-title {
    font-size: 28rpx;
    color: #333;
    padding: 20rpx;
    // border-bottom: 1rpx solid #f5f5f5;
}

.upload-container {
    padding: 20rpx;
    min-height: 140rpx;
}

.upload-area {
    width: 150rpx;
    height: 150rpx;
    border: 3rpx dashed $uni-color;
    // border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .plus {
        font-size: 80rpx;
        color: $uni-color;
        line-height: 1;
        // margin-bottom: 5rpx;
        font-weight: 100;
    }

    .upload-text {
        font-size: 24rpx;
        color: $uni-color-third;
    }
}


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

    &:last-child {
        border-bottom: none;
    }
}

.label {
    flex: 3;
    font-size: 28rpx;
    color: #333;
    padding-left: 10rpx;
}

.input {
    flex: 2;
    font-size: 28rpx;
    // height: 60rpx;
    text-align: left;
}

.placeholder,
.region-item .region-value text.placeholder {
    // height: 60rpx;
    color: #999;
}

.region-item {
    cursor: pointer;

    .region-value {
        flex: 1;
        text-align: right;
        font-size: 28rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.address-item {
    padding: 24rpx 0;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    .address-box {
    }

    .address-input {
        padding: 20rpx;
        background-color: #F5F5F5;
        border-radius: 10rpx;
        width: inherit;
        height: 60rpx;
        font-size: 28rpx;
    }
}

.submit-btn {
    width: 80%;
    margin: 40rpx auto 0;
    height: 100rpx;
    background-color: $uni-color;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50rpx;
    // margin-top: 60rpx;
}
</style>