feat(用户信息): 添加邮箱字段及填写弹窗功能

在用户信息表单中添加邮箱字段，并实现邮箱填写弹窗组件
当用户未填写邮箱时，在发布评论前提示填写

.trae/rules/project_rules.md

@@ -1 +1,3 @@
-项目中有关颜色的都使用uni.scss的$uni-color变量
+项目中有关颜色的都使用uni.scss的$uni-color变量
+
+当前时uniapp的vue2环境，开发微信小程序

pages_order/auth/wxUserInfo.vue

@@ -94,6 +94,11 @@
 		class="school-input" 
 		v-model="form.gzSchool" />
 		
+		<input type="email" 
+		placeholder="邮箱地址（选填）" 
+		class="school-input" 
+		v-model="form.mail" />
+		
 		<view class="line">
 			<view class="">
 				手机号
@@ -152,6 +157,7 @@
 					phone : '',
 					czSchool: '',
 					gzSchool: '',
+					mail: '',
 				},
 				maxDate : this.$dayjs().valueOf(),
 				minDate : this.$dayjs().add(-100, 'y').valueOf(),
@@ -250,6 +256,8 @@
 						this.form.czSchool = res.result.czSchool || this.form.czSchool
 						
 						this.form.gzSchool = res.result.gzSchool || this.form.gzSchool
+						
+						this.form.mail = res.result.mail || this.form.mail
 					}
 				})
 			},

pages_order/components/list/comment/commentPublish.vue

@@ -1,26 +1,37 @@
 <template>
-    <uv-popup ref="popup" :round="30">
-        <view class="comment-publish">
-            <view class="content-input">
-                <uv-textarea v-model="form.userValue" :maxlength="200" autoHeight count focus
-                    :placeholder="placeholder"></uv-textarea>
+    <view>
+        <uv-popup ref="popup" :round="30">
+            <view class="comment-publish">
+                <view class="content-input">
+                    <uv-textarea v-model="form.userValue" :maxlength="200" autoHeight count focus
+                        :placeholder="placeholder"></uv-textarea>
+                </view>
+
+                <view class="images box">
+                    <uv-upload :fileList="fileList" :maxCount="imageMax" multiple width="150rpx" height="150rpx"
+                        @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
+                </view>
+
+                <view class="uni-color-btn" @click="submit">
+                    发布
+                </view>
             </view>
-
-            <view class="images box">
-                <uv-upload :fileList="fileList" :maxCount="imageMax" multiple width="150rpx" height="150rpx"
-                    @delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
-            </view>
-
-            <view class="uni-color-btn" @click="submit">
-                发布
-            </view>
-        </view>
-    </uv-popup>
+        </uv-popup>
+        
+        <!-- 邮箱填写弹窗组件 -->
+        <email-popup ref="emailPopup" @skip="handleEmailSkip" @confirm="handleEmailConfirm"></email-popup>
+    </view>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import EmailPopup from './emailPopup.vue'
+
 export default {
     name: 'CommentPublish',
+    components: {
+        EmailPopup
+    },
     props: {
         // 评论参数
         params: {
@@ -33,13 +44,16 @@ export default {
             default: '说点什么吧...'
         }
     },
+    computed: {
+        ...mapState(['userInfo'])
+    },
     data() {
         return {
             form: {
                 userValue: ''
             },
             imageMax: 9,
-            fileList: [],
+            fileList: []
         }
     },
     methods: {
@@ -53,7 +67,29 @@ export default {
             this.$refs.popup.close()
         },
 
+        // 检查邮箱并提交
         async submit() {
+            // 检查用户是否填写了邮箱
+            if (!this.userInfo.mail) {
+                this.$refs.emailPopup.show()
+                return
+            }
+            
+            this.doSubmit()
+        },
+        
+        // 处理邮箱跳过事件
+        handleEmailSkip() {
+            this.doSubmit()
+        },
+        
+        // 处理邮箱确认事件
+        handleEmailConfirm(email) {
+            this.doSubmit()
+        },
+
+        // 执行提交评论
+        async doSubmit() {
             await this.onSubscribeMessageTap()
 
             let data = {

pages_order/components/list/comment/emailPopup.vue

@@ -0,0 +1,168 @@
+<template>
+    <!-- 邮箱填写弹窗 -->
+    <uv-popup ref="emailPopup" :round="30">
+        <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>