teambuy-front/pages_order/mine/team.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar :title="`${ !identity ? '团长申请' : '团长信息' }`" leftClick @leftClick="$utils.navigateBack" bgColor="#019245"
            color="#fff" />

        <!-- 顶部图片区域 -->
        <view class="banner" v-if="!identity">
            <image src="/static/image/红烧肉.webp" 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" @tap="chooseImage" v-if="!formData.locationImage">
                        <view class="plus">+</view>
                        <view class="upload-text">添加图片</view>
                    </view>
                    <image v-else :src="formData.locationImage" mode="aspectFill" class="upload-area"
                        @tap="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="nickname" 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">
                    <text class="label">所在地区</text>

                    <picker mode="region" @change="regionSelect">
                        <text style="font-size: 30rpx;">{{ formData.region || '请选择' }}</text>
                    </picker>
                    <uv-icon name="arrow-right" color="#000"  style="margin-left: 2rpx;"/>
                </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 v-if="!this.beModify" class="submit-btn" @tap="submitApplication">
                {{ !identity ? '提交申请' : '提交保存' }}
            </view>
            <view v-else class="submit-btn-container">
                <view class="submit-btn-modify" @tap="submitApplication">修改</view>
                <view class="submit-btn-save" @tap="submitApplication">保存</view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import shareConfig from '@/mixins/configList.js'

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

        // 显示地区选择器（当前只是一个简单的点击反应）
        regionSelect(e) {
            this.formData.region = e.detail.value[1] + e.detail.value[2]
        },

        // 提交申请
        submitApplication() {
            // 表单验证
            if (!this.formData.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()

                if (this.identity) {
                    // 如果是团长 保存表单信息 直接返回了
                    this.saveInfo() 
                    return
                }

                uni.showModal({
                    title: '提交成功！',
                    content: '我们的工作人员会及时与您联系，\n请保持电话畅通！',
                    showCancel: false,
                    confirmColor: '#019245',
                    success: (res) => {
                        if (res.confirm) {
                            // 如果是团员 延迟返回上一页
                            setTimeout(() => {
                                this.$utils.navigateBack()
                            }, 500)
                        }
                    }
                })
            }, 1000)
        },

        // 保存信息 针对团长端
        saveInfo() {
            uni.setStorageSync('team_form_data', JSON.stringify(this.formData))
            uni.showToast({
                title: '保存成功！',
                icon: 'none',
                duration: 2000
            })

        }
    },
    onLoad() {
        if (this.identity) {
            // 如果是团员 才去获取团长信息
            const addData = uni.getStorageSync('team_form_data')
            if (addData) {
                this.beModify = true
                this.formData = JSON.parse(addData)
            }
        }
    }
}
</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  text.placeholder {
    // height: 60rpx;
    color: #999;
}

.region-item {
    cursor: pointer;

}

.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;
}
.submit-btn-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40rpx auto 0;
    width: 74%;
    .submit-btn-modify {
        width: 45%;
        height: 90rpx;
        background-color: #fff;
        color: $uni-color;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
        border: 4rpx solid $uni-color;
    }
    .submit-btn-save {
        width: 45%;
        height: 90rpx;
        background-color: $uni-color;
        color: #fff;
        font-size: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
    }
}
</style>