universal-wechat-uniapp-241007/pages_order/components/list/comment/emailPopup.vue

<template>
    <!-- 邮箱填写弹窗 -->
    <uv-popup ref="emailPopup" :round="30" :safeAreaInsetBottom="false">
        <view class="email-popup">
            <view class="email-title">
                完善邮箱信息
            </view>
            <view class="email-desc">
                为了更好的服务体验，请填写您的邮箱地址
            </view>
            <view class="email-input-box">
                <input 
                    type="email" 
                    v-model="emailForm.mail" 
                    placeholder="请输入邮箱地址"
                    class="email-input"
                />
            </view>
            <view class="email-buttons">
                <view class="email-btn cancel-btn" @click="skipEmail">
                    跳过
                </view>
                <view class="email-btn confirm-btn" @click="saveEmail">
                    确认
                </view>
            </view>
        </view>
    </uv-popup>
</template>

<script>
export default {
    name: 'EmailPopup',
    data() {
        return {
            emailForm: {
                mail: ''
            }
        }
    },
    methods: {
        // 显示邮箱填写弹窗
        show() {
            this.$refs.emailPopup.open('center')
        },
        
        // 隐藏邮箱填写弹窗
        hide() {
            this.$refs.emailPopup.close()
        },
        
        // 跳过邮箱填写
        skipEmail() {
            this.hide()
            this.resetForm()
            this.$emit('skip')
        },
        
        // 保存邮箱
        saveEmail() {
            if (!this.emailForm.mail) {
                uni.showToast({
                    title: '请输入邮箱地址',
                    icon: 'none'
                })
                return
            }
            
            // 验证邮箱格式
            const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
            if (!emailReg.test(this.emailForm.mail)) {
                uni.showToast({
                    title: '请输入正确的邮箱格式',
                    icon: 'none'
                })
                return
            }
            
            // 更新用户邮箱信息
            this.$api('updateInfo', {
                mail: this.emailForm.mail
            }, res => {
                if (res.code == 200) {
                    // 更新本地用户信息
                    this.$store.commit('getUserInfo')
                    this.hide()
                    this.resetForm()
                    uni.showToast({
                        title: '邮箱保存成功',
                        icon: 'success'
                    })
                    this.$emit('confirm', this.emailForm.mail)
                }
            })
        },
        
        // 重置表单
        resetForm() {
            this.emailForm.mail = ''
        }
    }
}
</script>

<style scoped lang="scss">
.email-popup {
    padding: 40rpx;
    width: 600rpx;
    
    .email-title {
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20rpx;
        color: #333;
    }
    
    .email-desc {
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-bottom: 40rpx;
        line-height: 1.5;
    }
    
    .email-input-box {
        margin-bottom: 40rpx;
        
        .email-input {
            width: 100%;
            height: 80rpx;
            border: 2rpx solid #e5e5e5;
            border-radius: 10rpx;
            padding: 0 20rpx;
            font-size: 28rpx;
            box-sizing: border-box;
            
            &:focus {
                border-color: $uni-color-primary;
            }
        }
    }
    
    .email-buttons {
        display: flex;
        gap: 20rpx;
        
        .email-btn {
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            border-radius: 10rpx;
            font-size: 28rpx;
            
            &.cancel-btn {
                background-color: #f5f5f5;
                color: #666;
            }
            
            &.confirm-btn {
                background-color: $uni-color-primary;
                color: #fff;
            }
        }
    }
}
</style>