重新修改上传头像为vue

src/frontend/views/layouts/centerHeader.php

@@ -8,5 +8,5 @@
 ?>
 <div class="tp-head navbar-fixed-top clearfix">
     <div class="menu-btn fl"><a href="javascript:;"><i class="icon-menu"></i></a></div>
-    <div class="avatar fr"><a href="<?= \yii\helpers\Url::base() . 'user-center/'?>"><img src="<?=\common\models\User::getAvatarUrl(Yii::$app->user->identity->avatar) ?>"></a></div>
+    <div class="avatar fr"><a href="<?= \yii\helpers\Url::base() . '/user-center/'?>"><img src="<?=\common\models\User::getAvatarUrl(Yii::$app->user->identity->avatar) ?>"></a></div>
 </div>

src/frontend/views/layouts/main.php

@@ -47,8 +47,8 @@ $baseUrl = \yii\helpers\Url::base();
 <?php else : ?>
 
     <div class="navbar-main navbar-static-top clearfix">
-        <div id="main-logo" class="logo pull-left"><a href="<?= $baseUrl . "/user-center/" ?>">云崖</a></div>
-        <div class="avatar pull-right"><a href="<?= \yii\helpers\Url::base() . '/user-center/'?>"><img src="<?=\common\models\User::getAvatarUrl(Yii::$app->user->identity->avatar) ?>"></a></div>
+        <div id="main-logo" class="logo pull-left"><a href="<?= $baseUrl . "/user-center/info" ?>">云崖</a></div>
+        <div class="avatar pull-right"><a href="<?= $baseUrl . '/user-center/info'?>"><img src="<?=\common\models\User::getAvatarUrl(Yii::$app->user->identity->avatar) ?>"></a></div>
     </div>
 <?php endif; ?>
 

src/frontend/views/user-center/info.php

@@ -10,44 +10,9 @@ $url = Yii::$app->qiniu->storages['public']['url'];
 
 ?>
 
-
-<div id="edit-container" class="add-box" style="display: none">
-    <div id="user-center-info-container" class="add-box-main">
-        <div class="tit">基本信息</div>
-
-        <avatar-upload uptoken="<?=$publicToken?>"></avatar-upload>
-
-        <input id="avatar" type="hidden"
-               value="<?= \yii\bootstrap\Html::encode(Yii::$app->user->identity->avatar) ?>">
-
-
-        <div class="type-name">
-            <input id="username" type="text"
-                   value="<?= \yii\bootstrap\Html::encode(Yii::$app->user->identity->username) ?>"
-                   placeholder="请输入您的昵称...">
-        </div>
-
-        <div class="btn-box m-t-20">
-            <button id="cancel" class="btn btn-nobg">取消</button>
-            <button id="save" class="btn btn-save m-l-10">保存</button>
-        </div>
-    </div>
+<div id="user-center-info-container">
+    <info avatarsrc="<?= \common\models\User::getAvatarUrl(Yii::$app->user->identity->avatar) ?>" username="<?=\yii\bootstrap\Html::encode(Yii::$app->user->identity->username)?>" avatar="<?=  \yii\bootstrap\Html::encode(Yii::$app->user->identity->avatar)?>" public-token="<?=$publicToken?>"></info>
 </div>
 
 
-<div id="normal-container" class="add-box">
-    <div class="add-box-main">
-        <div class="tit">基本信息</div>
-
-        <div class="upload-avatar">
-            <img id="avatar-uploader"
-                 src="<?=\common\models\User::getAvatarUrl(Yii::$app->user->identity->avatar)?>">
-        </div>
-        <div class="type-name m-b-20"><?= \yii\bootstrap\Html::encode(Yii::$app->user->identity->username) ?></div>
-
-        <a id="edit" href="javascript:;" class="edit-info"><i class="icon-mode_edit"></i></a>
-
-    </div>
-</div>
-
 

src/frontend/web/js/user-center/conponents/info.vue

+<template>
+    <div id="edit-container" class="add-box" v-if="showEdit">
+        <div class="add-box-main">
+            <div class="tit">基本信息</div>
+
+            <avatar-upload :uptoken="publicToken"></avatar-upload>
+
+            <input id="avatar" type="hidden"
+                   v-model="avatar">
+
+
+            <div class="type-name">
+                <input id="username" type="text"
+                       v-model="username"
+                       placeholder="请输入您的昵称...">
+            </div>
+
+            <div class="btn-box m-t-20">
+                <button @click="cancel"  class="btn btn-nobg">取消
+                </button>
+                <button @click="save" id="save" class="btn btn-save m-l-10">保存</button>
+            </div>
+        </div>
+    </div>
+
+
+    <div v-if="!showEdit" id="normal-container" class="add-box">
+        <div class="add-box-main">
+            <div class="tit">基本信息</div>
+
+            <div class="upload-avatar">
+                <img id="avatar-uploader"
+                     :src="avatarsrc">
+            </div>
+            <div class="type-name m-b-20">{{username}}</div>
+
+            <a @click="showEdit=true" id="edit" href="javascript:;" class="edit-info"><i class="icon-mode_edit"></i></a>
+
+        </div>
+    </div>
+</template>
+<script>
+    import  avatarUploader  from '../../components/uploader/avatar-upload.vue';
+    export default{
+        data(){
+            return {
+              showEdit:false,
+              change:false
+            }
+        },
+        props:{
+           publicToken:String,
+           avatar:String,
+           username:String,
+           avatarsrc:String
+        },
+        components:{
+            "avatarUpload":avatarUploader
+        },
+        methods:{
+            cancel(){
+                window.location.reload();
+            },
+            save(){
+                var url = __BASE_URL__ + 'user-center/save-user-info';
+                var dataObj = {
+                    avatar: this.avatar,
+                    username: this.username
+                };
+                $.ajax({
+                    type: "POST",
+                    url: url,
+                    data: dataObj,
+                    dataType: 'json',
+                    success: function (reponse) {
+                        if (!reponse.status === true) {
+                            layer.alert(reponse.message || '系统错误', {icon: 2, title: "提示"})
+                        } else {
+                            window.location.reload();
+                        }
+                    }
+                }).error(function () {
+                    layer.alert('保存用户信息接口错误', {'icon': 2, 'title': '提示'});
+
+                })
+            },
+        },
+        ready(){
+            this.$on("avatar-uploaded", function(name, data) {
+                this.avatar = data.key
+            });
+
+        }
+    }
+
+
+
+
+
+
+
+</script>

src/frontend/web/js/user-center/info.js

@@ -2,58 +2,20 @@
  * Created by xiabin on 2016/9/29.
  */
 var Vue = require('vue');
-var avatarUploader = require('../components/uploader/avatar-upload.vue');
+var info = require('./conponents/info.vue');
 new Vue({
     el:'#user-center-info-container',
     components: {
-        "avatar-upload": avatarUploader
+        "info": info
     },
-    ready:function () {
-        this.$on("avatar-uploaded", function(name, data) {
-            $('#avatar').val(data.key);
-        });
+    data:function () {
+      return {
+          showEdit:false
+      }
     }
 });
 
-$("#cancel").click(function () {
-    window.location.reload();
-});
 
-var oldAvatar = $('#avatar').val();
-var oldUsername = $("#username").val();
-$("#save").click(function () {
-    var avatar = $('#avatar').val();
-    var username = $("#username").val();
-    if (avatar === oldAvatar && username === oldUsername) {
-        return false;
-    }
-    var url = __BASE_URL__ + 'user-center/save-user-info';
-    console.log(avatar);
-    console.log(username);
-    var dataObj = {
-        avatar: avatar,
-        username: username
-    };
-    $.ajax({
-        type: "POST",
-        url: url,
-        data: dataObj,
-        dataType: 'json',
-        success: function (reponse) {
-            if (!reponse.status === true) {
-                layer.alert(reponse.message || '系统错误', {icon: 2, title: "提示"})
-            } else {
-                window.location.reload();
-            }
-        }
-    }).error(function () {
-        layer.alert('保存用户信息接口错误', {'icon': 2, 'title': '提示'});
 
-    })
-});
 
-$('#edit').click(function () {
-    $('#edit-container').show();
-    $('#normal-container').hide();
-});