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">
            <uv-alert v-if="status != '-1'" fontSize="28rpx" :title="toastTitle" :show-icon="true" closable :type="toastType"
                :description="remark" />

            <!-- 送餐点照片上传区域 -->
            <view class="section-title">送餐点照片 </view>
            <view class="section-block">
                <view class="upload-container">
                    <view class="upload-area" @tap="chooseImage" v-if="!formData.spotImage">
                        <view class="plus">+</view>
                        <view class="upload-text">添加图片</view>
                    </view>
                    <image v-else :src="formData.spotImage" 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.spotName" placeholder="请输入送餐点名称"
                        placeholder-class="placeholder" />
                </view>
                <view class="form-item">
                    <text class="label">您的姓名</text>
                    <input class="input" type="nickname" v-model="formData.name" placeholder="请输入您的姓名"
                        placeholder-class="placeholder" />
                </view>
                <view class="form-item">
                    <text class="label">联系手机号</text>
                    <input class="input" type="number" v-model="formData.phone" placeholder="请输入您的手机号"
                        placeholder-class="placeholder" />
                </view>

                <view class="form-item region-item" @click="regionSelect">
                    <text class="label">所在地区</text>
                    <text>{{ formData.area }}</text>
                    <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 class="submit-btn" v-if="status != '1' || identity != 0" @tap="submitApplication">
                {{ buttonText }}
            </view>
        </view>
    </view>
</template>

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

export default {
    components: {
        navbar
    },
    mixins: [shareConfig],
    data() {
        return {
            formData: {
                spotImage: '', // 上传的送餐点照片
                spotName: '', // 送餐点名称
                name: '', // 联系人姓名
                phone: '', // 联系电话
                area: '', // 所在地区
                address: '', // 详细地址
                latitude: '', // 纬度
                longitude: '' // 经度
            },
            identity: uni.getStorageSync('identity'),
            status: '-1', // 团长申请状态  -1 未提交 0 审核中 1 审核通过 2 审核不通过
            remark: '', // 审核不通过原因
            noBind: false // 是否未绑定团长
        }
    },
    methods: {
        // 选择图片
        chooseImage() {
            this.$Oss.ossUploadImage({
                compressed: true,
                success: (res) => {
                    console.log('上传成功',res);
                    this.formData.spotImage = ''
                    this.formData.spotImage = res
                },
                fail: (res) => {
                    console.log('上传失败',res);
                    uni.showToast({
                        title: `上传失败,${res.errMsg}`,
                        icon: 'error'
                    })
                }
            })
        },

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

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

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

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

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

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

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

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

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

            console.log(this.formData);

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

        },

        // 获取初始值进行赋值 赋值关键部分
        assign(data) {
            this.formData.address = data.address
            this.formData.area = data.area
            this.formData.name = data.name
            this.formData.phone = data.phone
            this.formData.spotImage = data.spotImage
            this.formData.spotName = data.spotName
            this.formData.id = data.id
        },
    },
    computed: {
        buttonText() {
            switch (this.status) {
                case '-1':
                    return '提交申请'
                case '0':
                    return '修改申请'
                case '1':
                    return '修改信息'
                case '2':
                    return '重新申请'
                default:
                    return '提交申请'
            }
        },
        toastTitle() {
            if (this.status == '2') {
                return '审核不通过！'
            } else if (this.status == '1') {
                return '审核已通过！请前往个人页面右上角切换团长身份'
            } else if (this.status == '0') {
                return '审核中...'
            }
        },
        toastType() {
            if (this.status == '2') {
                return 'error'
            } else if (this.status == '1') {
                return 'success'
            } else if (this.status == '0') {
                return 'warning'
            } else {
                return 'info'
            }
        }
    },
    onLoad() {
        this.$api('queryLeaderInfo', { }, res => {
            if (res.code == 200){
                this.assign(res.result)
                this.status = res.result.status
                this.remark = res.result.remark
            }  
        })
    }
}
</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>