新增微信小程序头像及昵称填写提示

App.vue

@@ -27,6 +27,8 @@
                 cache_prev_page_key: 'cache_prev_page_key',
 				// tab页面切换参数
 				cache_page_tabbar_switch_params: 'cache_page_tabbar_switch_params_key',
+                // 用户基础资料提示间隔key
+                cache_user_base_personal_interval_time_key: 'cache_user_base_personal_interval_time_key',
                 // 默认用户头像
                 default_user_head_src: "/static/images/common/user.png",
                 // 成功圆形提示图片
@@ -55,6 +57,15 @@
 				user_center_nav_show_model_type: 0,
                 // 商品列表是否展示购物车（0否, 1是）
                 is_goods_list_show_cart_opt: 1,
+                // 用户基础信息头像及昵称设置提示数据
+                user_base_personal_setup_data: {
+                    // 页面（index 首页、goods-category 商品分类、cart 购物车、 user 用户中心、share 分享）
+                    pages: ['index', 'goods-category', 'cart', 'user', 'share'],
+                    // 终端（weixin 微信、alipay 支付宝、baidu 百度、qq QQ、toutiao 头条、kuaishou 快手）
+                    client: ['weixin'],
+                    // 关闭后再次提示间隔时间（单位秒）、默认1800秒30分钟
+                    interval_time: 1800,
+                },
                 // tabbar页面
                 tabbar_pages: [
                     "/pages/index/index",

components/cart/cart.vue

@@ -101,12 +101,16 @@
         <block v-if="data_list.length == 0 && data_list_loding_status != 0">
             <component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
         </block>
+
+        <!-- 用户基础 -->
+        <component-user-base ref="user_base"></component-user-base>
     </view>
 </template>
 <script>
     const app = getApp();
     import base64 from '../../common/js/lib/base64.js';
     import componentNoData from "../../components/no-data/no-data";
+    import componentUserBase from "../../components/user-base/user-base";
 
     var common_static_url = app.globalData.get_static_url('common');
     export default {
@@ -147,7 +151,8 @@
         },
 
         components: {
-            componentNoData
+            componentNoData,
+            componentUserBase
         },
         props: {},
 
@@ -210,7 +215,16 @@
                         // 分享菜单处理
                         app.globalData.page_share_handle();
                     } else {
+                        // 获取数据
                         this.get_data();
+
+                        // 用户头像和昵称设置提示
+                        if((this.$refs.user_base || null) != null) {
+                            var self = this;
+                            setTimeout(function() {
+                                self.$refs.user_base.init('cart');
+                            }, 10);
+                        }
                     }
                 } else {
                     uni.stopPullDownRefresh();

components/share-popup/share-popup.vue

@@ -35,12 +35,16 @@
                 </view>
             </view>
         </component-popup>
+
+        <!-- 用户基础 -->
+        <component-user-base ref="user_base"></component-user-base>
     </view>
 </template>
 <script>
     const app = getApp();
     var common_static_url = app.globalData.get_static_url('common');
     import componentPopup from "../../components/popup/popup";
+    import componentUserBase from "../../components/user-base/user-base";
     export default {
         data() {
             return {
@@ -52,7 +56,8 @@
         },
 
         components: {
-            componentPopup
+            componentPopup,
+            componentUserBase
         },
 
         created: function() {},
@@ -68,6 +73,11 @@
                     is_goods_poster: config.is_goods_poster || 0,
                     goods_id: config.goods_id || 0
                 });
+
+                // 用户头像和昵称设置提示
+                if((this.$refs.user_base || null) != null) {
+                    this.$refs.user_base.init('share');
+                }
             },
 
             // 弹层关闭

components/user-base/user-base.vue

@@ -0,0 +1,216 @@
+<template>
+    <view>
+        <component-popup :propShow="popup_status" propPosition="bottom" @onclose="popup_close_event">
+            <view :class="'user-base-popup bg-white page-bottom-fixed '+(propIsGrayscale ? 'grayscale' : '')">
+                <view class="close fr oh">
+                    <view class="fr" @tap.stop="popup_close_event">
+                        <icon type="clear" size="20"></icon>
+                    </view>
+                </view>
+                <form @submit="form_submit" class="form-container">
+                    <view class="padding-horizontal-main padding-top-main">
+                        <view class="cr-base margin-bottom-xl tc text-size-xs fw-b">请完善头像及昵称，让我们更好的为您服务！</view>
+                        <view v-if="(user.avatar || null) == null" class="form-gorup oh">
+                            <view class="form-gorup-title fl">头像<text class="form-group-tips-must">*</text></view>
+                            <button class="fl bg-white br-0 lh-0 padding-0 margin-left-xxl" hover-class="none" open-type="chooseAvatar" @chooseavatar="choose_avatar_event" @tap="choose_avatar_event">
+                                <image :src="(user_avatar || default_avatar)" mode="widthFix" class="circle br user-base-avatar"></image>
+                            </button>
+                        </view>
+                        <view v-if="(user.nickname || null) == null" class="form-gorup oh">
+                            <view class="form-gorup-title fl">昵称<text class="form-group-tips-must">*</text></view>
+                            <view class="fr user-nickname-container">
+                                <input :type="(application_client_type == 'weixin') ? 'nickname' : 'text'" name="nickname" maxlength="16" placeholder-class="cr-grey" class="cr-base" placeholder="输入昵称1~16个字符">
+                            </view>
+                        </view>
+
+                        <view class="bottom-fixed padding-main">
+                            <button class="bg-main br-main cr-white round text-size-sm" type="default" form-type="submit" hover-class="none" :disabled="form_submit_disabled_status">保存</button>
+                        </view>
+                    </view>
+                </form>
+            </view>
+        </component-popup>
+    </view>
+</template>
+<script>
+    const app = getApp();
+    import componentPopup from "../../components/popup/popup";
+    export default {
+        data() {
+            return {
+                application_client_type: app.globalData.application_client_type(),
+                default_avatar: app.globalData.data.default_user_head_src,
+                cache_key: app.globalData.data.cache_user_base_personal_interval_time_key,
+                popup_status: false,
+                user: null,
+                user_avatar: '',
+            };
+        },
+
+        components: {
+            componentPopup
+        },
+        props: {
+            propIsGrayscale: {
+            	type: Boolean,
+            	default: false
+            }
+        },
+
+        created: function() {},
+
+        methods: {
+            // 初始配置
+            init(type = '') {
+                var data = app.globalData.data.user_base_personal_setup_data;
+                if(data.pages.indexOf(type) != -1 && data.client.indexOf(this.application_client_type) != -1) {
+                    // 当前缓存用户
+                    var user = app.globalData.get_user_cache_info();
+                    // 头像是默认则置为空
+                    if(user != null && (user.avatar || null) != null && user.avatar.indexOf('default-user-avatar') != -1) {
+                        user.avatar = '';
+                    }
+                    // 状态
+                    var status = (user == null) ? false : (((user.avatar || null) == null || (user.nickname || null) == null) ? true : false);
+                    // 间隔时间
+                    var cache_time = parseInt(uni.getStorageSync(this.cache_key) || 0);
+                    var current_time = Date.parse(new Date())/1000;
+                    if(status && !this.popup_status && cache_time > 0 && current_time < cache_time+parseInt(data.interval_time)) {
+                        status = false;
+                    }
+                    this.setData({
+                        popup_status: status,
+                        user: user
+                    });
+                }
+            },
+
+            // 弹层关闭
+            popup_close_event(e) {
+                this.setData({
+                    popup_status: false
+                });
+                uni.setStorageSync(this.cache_key, Date.parse(new Date())/1000);
+            },
+
+            // 头像事件
+            choose_avatar_event(e) {
+                var self = this;
+                if(this.application_client_type == 'weixin') {
+                    self.upload_handle(e.detail.avatarUrl);
+                } else {
+                    uni.chooseImage({
+                        count: 1,
+                        success(res) {
+                            if(res.tempFilePaths.length > 0) {
+                                self.upload_handle(res.tempFilePaths[0]);
+                            }
+                        }
+                    });
+                }
+            },
+            
+            // 上传处理
+            upload_handle(image) {
+                var self = this;
+                uni.uploadFile({
+                    url: app.globalData.get_request_url('useravatarupload', 'personal'),
+                    filePath: image,
+                    name: 'file',
+                    formData: {},
+                    success: function(res) {
+                        if(res.statusCode == 200) {
+                            var data = typeof res.data == 'object' ? res.data : JSON.parse(res.data);
+                            if(data.code == 0) {
+                                self.setData({user_avatar: data.data});
+                            } else {
+                                app.globalData.showToast(data.msg);
+                            }
+                        }
+                    }
+                });
+            },
+            
+            // 数据提交
+            form_submit(e) {
+                // 表单数据
+                var form_data = e.detail.value;
+                // 头像
+                form_data['avatar'] = this.user_avatar || '';
+
+                // 验证数据项
+                var validation = [];
+                if((this.user.avatar || null) == null) {
+                    validation.push({fields: 'avatar', msg: '请上传头像'});
+                }
+                if((this.user.nickname || null) == null) {
+                    validation.push({fields: 'nickname', msg: '请填写昵称'});
+                }
+                if(app.globalData.fields_check(e.detail.value, validation)) {
+                    // 数据保存
+                    this.setData({
+                        form_submit_disabled_status: true
+                    });
+                    uni.showLoading({
+                        title: '处理中...'
+                    });
+                    uni.request({
+                        url: app.globalData.get_request_url('save', 'personal'),
+                        method: 'POST',
+                        data: form_data,
+                        dataType: 'json',
+                        success: res => {
+                            uni.hideLoading();
+                            this.setData({
+                                form_submit_disabled_status: false
+                            });
+                            if(res.data.code == 0) {
+                                uni.setStorageSync(app.globalData.data.cache_user_info_key, res.data.data);
+                                app.globalData.showToast(res.data.msg, 'success');
+                                this.setData({
+                                    popup_status: false
+                                });
+                            } else {
+                                if (app.globalData.is_login_check(res.data)) {
+                                    app.globalData.showToast(res.data.msg);
+                                } else {
+                                    app.globalData.showToast('提交失败，请重试！');
+                                }
+                            }
+                        },
+                        fail: () => {
+                            uni.hideLoading();
+                            this.setData({
+                                form_submit_disabled_status: false
+                            });
+                            app.globalData.showToast('服务器请求出错');
+                        }
+                    });
+                }
+            }
+        }
+    };
+</script>
+<style>
+    .user-base-popup {
+        padding: 20rpx 10rpx 0 10rpx;
+        position: relative;
+    }
+    .user-base-popup .close {
+        position: absolute;
+        top: 20rpx;
+        right: 20rpx;
+        z-index: 2;
+    }
+    .user-base-avatar {
+        width: 80rpx;
+        height: 80rpx !important;
+    }
+    .user-base-popup .form-gorup-title {
+        line-height: 70rpx;
+        margin-bottom: 0;
+    }
+    .user-base-popup .user-nickname-container {
+        width: calc(100% - 120rpx);
+    }
+</style>

pages/goods-category/goods-category.vue

@@ -264,6 +264,9 @@
 
             <!-- 快捷导航 -->
             <component-quick-nav :propIsNav="true" :propIsBar="true"></component-quick-nav>
+
+            <!-- 用户基础 -->
+            <component-user-base ref="user_base"></component-user-base>
         </view>
     </view>
 </template>
@@ -278,6 +281,7 @@
     import componentPopup from "../../components/popup/popup";
     import componentBadge from "../../components/badge/badge";
     import componentCartParaCurve from '../../components/cart-para-curve/cart-para-curve';
+    import componentUserBase from "../../components/user-base/user-base";
     
     var common_static_url = app.globalData.get_static_url('common');
     // 状态栏高度
@@ -335,7 +339,8 @@
             componentNoData,
             componentPopup,
             componentBadge,
-            componentCartParaCurve
+            componentCartParaCurve,
+            componentUserBase
         },
         props: {},
 
@@ -354,6 +359,11 @@
 
 			// 清除tab参数
 			app.globalData.remove_page_tabbar_switch_params();
+
+            // 用户头像和昵称设置提示
+            if((this.$refs.user_base || null) != null) {
+                this.$refs.user_base.init('goods-category');
+            }
         },
 
         // 下拉刷新
@@ -654,7 +664,7 @@
                 }
                 var user = app.globalData.get_user_info(this);
                 if (user != false) {
-                    // 用户未绑定用户则转到登录页面
+                    // 用户未绑定手机则转到登录页面
                     if (app.globalData.user_is_need_login(user)) {
                         uni.navigateTo({
                             url: "/pages/login/login?event_callback=buy_number_event"
@@ -761,7 +771,7 @@
                 }
                 var user = app.globalData.get_user_info(this);
                 if (user != false) {
-                    // 用户未绑定用户则转到登录页面
+                    // 用户未绑定手机则转到登录页面
                     if (app.globalData.user_is_need_login(user)) {
                         uni.navigateTo({
                             url: "/pages/login/login?event_callback=cart_buy_number_event"

pages/index/index.vue

@@ -233,6 +233,9 @@
         
         <!-- 快捷导航 -->
         <component-quick-nav :propIsNav="true" :propIsBar="true" :propIsGrayscale="plugins_mourning_data_is_app"></component-quick-nav>
+
+        <!-- 用户基础 -->
+        <component-user-base ref="user_base" :propIsGrayscale="plugins_mourning_data_is_app"></component-user-base>
     </view>
 </template>
 
@@ -254,6 +257,7 @@
     import componentRealstoreList from "../../components/realstore-list/realstore-list";
     import componentShopList from "../../components/shop-list/shop-list";
 	import componentGoodsList from "../../components/goods-list/goods-list";
+    import componentUserBase from "../../components/user-base/user-base";
 
     var common_static_url = app.globalData.get_static_url('common');
     var static_url = app.globalData.get_static_url('home');
@@ -344,7 +348,8 @@
             componentBlogList,
             componentRealstoreList,
             componentShopList,
-			componentGoodsList
+			componentGoodsList,
+            componentUserBase
         },
         props: {},
 
@@ -354,6 +359,11 @@
 
             // 初始化配置
             this.init_config();
+
+            // 用户头像和昵称设置提示
+            if((this.$refs.user_base || null) != null) {
+                this.$refs.user_base.init('index');
+            }
         },
 
         // 下拉刷新

pages/personal/personal.vue

@@ -15,7 +15,7 @@
                         <view class="form-gorup oh">
                             <view class="form-gorup-item-left">
                                 <view class="form-gorup-title">昵称<text class="form-group-tips-must">*</text></view>
-                                <input :type="(application_client_type == 'weixin') ? 'nickname' : 'text'" name="nickname" :value="user_data.nickname || ''" maxlength="16" placeholder-class="cr-grey" class="cr-base" placeholder="昵称2~16个字符">
+                                <input :type="(application_client_type == 'weixin') ? 'nickname' : 'text'" name="nickname" :value="user_data.nickname || ''" maxlength="16" placeholder-class="cr-grey" class="cr-base" placeholder="昵称1~16个字符">
                             </view>
                             <view class="form-gorup-item-right">
                                 <view class="form-gorup-title">生日</view>
@@ -63,7 +63,7 @@
                         </view>
 
                         <view class="bottom-fixed padding-main">
-                            <button class="bg-main br-main cr-white round text-size" type="default" form-type="submit" hover-class="none" :disabled="form_submit_disabled_status">保存</button>
+                            <button class="bg-main br-main cr-white round text-size-sm" type="default" form-type="submit" hover-class="none" :disabled="form_submit_disabled_status">保存</button>
                         </view>
                     </view>
                 </form>

pages/user/user.vue

@@ -148,6 +148,9 @@
         <!-- 快捷导航 -->
         <component-quick-nav :propIsNav="true" :propIsBar="true"></component-quick-nav>
 
+        <!-- 用户基础 -->
+        <component-user-base ref="user_base"></component-user-base>
+
         <!-- 版权信息 -->
         <component-copyright></component-copyright>
     </view>
@@ -158,6 +161,7 @@
     import componentBadge from "../../components/badge/badge";
     import componentCopyright from "../../components/copyright/copyright";
     import componentOnlineService from "../../components/online-service/online-service";
+    import componentUserBase from "../../components/user-base/user-base";
 
     var common_static_url = app.globalData.get_static_url('common');
     var static_url = app.globalData.get_static_url('user');
@@ -209,7 +213,8 @@
             componentQuickNav,
             componentBadge,
             componentCopyright,
-            componentOnlineService
+            componentOnlineService,
+            componentUserBase
         },
         props: {},
 
@@ -276,8 +281,14 @@
                         // 分享菜单处理
                         app.globalData.page_share_handle();
                     } else {
+                        // 获取基础数据
                         this.set_user_base(user);
                         this.get_data();
+
+                        // 用户头像和昵称设置提示
+                        if((this.$refs.user_base || null) != null) {
+                            this.$refs.user_base.init('user');
+                        }
                     }
                 } else {
                     uni.stopPullDownRefresh();