头像&背景

src/main/pc-space/package.json

@@ -16,6 +16,7 @@
         "qs": "^6.10.1",
         "swiper": "5.x",
         "vue": "^2.6.11",
+        "vue-avatar-cropper": "^5.0.2",
         "vue-awesome-swiper": "^4.1.1",
         "vue-clipboard2": "^0.3.3",
         "vue-router": "^3.2.0",

src/main/pc-space/src/components/CropUpload.vue

@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <div id="upload-wrapper" class="upload-wrapper">
+            <img v-if="src" :src="src" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div v-if="loading" class="loading"><i class="el-icon-loading"></i></div>
+        </div>
+        <avatar-cropper
+            ref="cropper"
+            @submit="loading = true"
+            @uploaded="handleUploaded"
+            trigger="#upload-wrapper"
+            :cropper-options="cropperOptions"
+            :output-options="outputOptions"
+            :upload-url="uploadUrl"
+            :labels="{ submit: '确定', cancel: '取消' }"
+            :upload-headers="headers"
+        />
+    </div>
+</template>
+<script>
+import resolveUrl from 'resolve-url';
+import AvatarCropper from 'vue-avatar-cropper';
+
+export default {
+    props: {
+        value: {},
+        width: {
+            type: Number,
+            default: 350
+        },
+        height: {
+            type: Number,
+            default: 350
+        }
+    },
+    created() {
+        this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
+        if (this.value) {
+            this.src = this.value;
+        }
+    },
+    mounted() {
+        document.body.appendChild(this.$refs.cropper.$el);
+    },
+    beforeDestroy() {
+        document.body.removeChild(this.$refs.cropper.$el);
+    },
+    data() {
+        return {
+            uploadUrl: '',
+            src: '',
+            cropperOptions: {
+                aspectRatio: 1
+            },
+            loading: false,
+            headers: {
+                Authorization: 'Bearer ' + localStorage.getItem('webToken')
+            }
+        };
+    },
+    computed: {
+        outputOptions() {
+            return { width: this.width, height: this.height };
+        }
+    },
+    watch: {
+        value() {
+            if (this.value) {
+                this.src = this.value;
+            }
+        }
+    },
+    methods: {
+        handleUploaded(res) {
+            this.loading = false;
+            this.src = res;
+            this.$emit('input', res);
+        }
+    },
+    components: {
+        AvatarCropper
+    }
+};
+</script>
+<style lang="less" scoped>
+.upload-wrapper {
+    width: 148px;
+    height: 148px;
+    display: block;
+    border: 1px dashed #d9d9d9;
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    &:hover {
+        border-color: @prim;
+    }
+}
+
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 148px;
+    height: 148px;
+    line-height: 148px;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    background-color: #fbfdff;
+}
+
+.loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.6);
+    color: #333;
+    font-size: 24px;
+}
+</style>

src/main/pc-space/src/main.js

@@ -8,6 +8,7 @@ import './styles/element/index.css';
 import common from './mixins/common';
 ElementUI.Dialog.props.closeOnClickModal.default = false;
 import SingleUpload from '@/components/SingleUpload';
+import CropUpload from '@/components/CropUpload';
 import './styles/font.less';
 import './styles/app.less';
 import eventBus from './eventBus';
@@ -21,6 +22,7 @@ Vue.use(ElementUI);
 Vue.use(http);
 Vue.mixin(common);
 Vue.component('single-upload', SingleUpload);
+Vue.component('crop-upload', CropUpload);
 Vue.prototype.$EventBus = eventBus;
 Vue.use(VueClipboard);
 

src/main/pc-space/src/mixins/common.js

@@ -22,7 +22,9 @@ export default {
     },
     methods: {
         updateUser(info, sucess = true) {
+            console.log(info);
             if (info) {
+                console.log(info);
                 return this.$http
                     .post(
                         '/user/save',
@@ -39,21 +41,32 @@ export default {
                     })
                     .then(() => {
                         if (sucess) {
-                            this.$toast.success('更新成功');
+                            this.$message.success('更新成功');
                         }
                         return Promise.resolve();
                     })
                     .catch(e => {
                         if (e) {
-                            this.$toast(e.error);
+                            this.$message.error(e.error);
                         }
                         return Promise.reject();
                     });
             }
         },
-        updateFile(e) {
+        // updateFile(e) {
+        //     const formData = new FormData();
+        //     formData.append('file', e.name);
+        //     return http.axios.post('/upload/file', formData).then(res => {
+        //         return Promise.resolve(res.data);
+        //     });
+        // },
+        updateFile(e, size = 2000) {
+            console.log(e);
             const formData = new FormData();
-            formData.append('file', e.file, e.file.name);
+            formData.append('file', e, e.name);
+            formData.append('compress', true);
+            formData.append('width', size);
+            formData.append('height', size);
             return http.axios.post('/upload/file', formData).then(res => {
                 return Promise.resolve(res.data);
             });
@@ -104,6 +117,5 @@ export default {
         wait() {
             this.$message.warning('敬请期待');
         }
-        
     }
 };

src/main/pc-space/src/router/index.js

@@ -116,9 +116,9 @@ const routes = [
                         }
                     },
                     {
-                        path: '/mylikes',
-                        name: 'mylikes',
-                        component: () => import('../views/user/MyLikes.vue'),
+                        path: '/collectionorder',
+                        name: 'collectionorder',
+                        component: () => import('../views/user/CollectionOrder.vue'),
                         meta: {
                             title: '藏品订单',
                             checkLogin: true

src/main/pc-space/src/views/user/AccountData.vue

@@ -1,7 +1,9 @@
 <template>
     <div class="container">
-        <div class="top"></div>
-        <!-- <img class="top" :src="userInfo.avatar" alt="" /> -->
+        <el-upload class="top" :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload2">
+            <img v-if="userInfo.bg" class="top" :src="userInfo.bg" alt="" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+        </el-upload>
         <div class="top1">
             <div class="title">
                 <div class="text">
@@ -18,7 +20,11 @@
                     </div>
                 </div>
             </div>
-            <img class="img2" :src="userInfo.avatar" alt="" />
+
+            <el-upload :action="uploadUrl" :show-file-list="false" :before-upload="beforeAvatarUpload">
+                <img v-if="userInfo.avatar" class="img2" :src="userInfo.avatar" alt="" />
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
         </div>
         <div v-if="active === '关注' || active === '粉丝'">
             <div v-for="item in list" :key="item.id">
@@ -123,8 +129,12 @@
 </template>
 <script>
 import { mapState } from 'vuex';
+import resolveUrl from 'resolve-url';
 import FansInfo from '../../components/FansInfo.vue';
 export default {
+    created() {
+        this.uploadUrl = resolveUrl(this.$baseUrl, 'upload/file');
+    },
     components: { FansInfo },
     data() {
         return {
@@ -157,6 +167,20 @@ export default {
         }
     },
     methods: {
+        beforeAvatarUpload(file) {
+            this.updateFile(file, 100).then(img => {
+                this.updateUser({ avatar: img }).then(res => {
+                    // console.log(res);
+                });
+            });
+        },
+        beforeAvatarUpload2(file) {
+            this.updateFile(file, 1080).then(img => {
+                this.updateUser({ bg: img }).then(res => {
+                    // console.log(res);
+                });
+            });
+        },
         tab(e) {
             this.active = e;
             if (e === '关注') {
@@ -223,8 +247,7 @@ export default {
     }
     .top {
         height: 146px;
-        width: 100%;
-        background: @prim;
+        width: 970px;
     }
     .top1 {
         display: flex;
@@ -262,6 +285,7 @@ export default {
             padding: 4px;
             background: #ffffff;
             top: -50px;
+            left: 431px;
         }
     }
     .content {

src/main/pc-space/src/views/user/MyLikes.vue → src/main/pc-space/src/views/user/CollectionOrder.vue

@@ -93,19 +93,19 @@ export default {
     computed: {
         ...mapState(['userInfo'])
     },
-    // watch: {
-    //     type() {
-    //         this.$router
-    //             .replace({
-    //                 query: {
-    //                     userId: this.userInfo.id,
-    //                     type: this.type
-    //                 }
-    //             })
-    //             .catch(() => {});
-    //         this.getData();
-    //     }
-    // },
+    watch: {
+        type() {
+            this.$router
+                .replace({
+                    query: {
+                        userId: this.userInfo.id,
+                        type: this.type
+                    }
+                })
+                .catch(() => {});
+            this.getData();
+        }
+    },
     mounted() {
         this.getData();
     },

src/main/pc-space/src/views/user/Personal.vue

@@ -23,7 +23,7 @@
                         <img class="icon" src="../../assets/user/icon_jiaoyixinxi@3x.png" alt="" />
                         <span>交易信息</span>
                     </template>
-                    <el-menu-item index="/mylikes">藏品订单</el-menu-item>
+                    <el-menu-item index="/collectionorder">藏品订单</el-menu-item>
                     <el-menu-item index="/payrecord">支付记录</el-menu-item>
                     <el-menu-item index="/transactionordes">交易记录</el-menu-item>
                     <el-menu-item index="/ordervalue">价值证明</el-menu-item>

src/main/pc-space/yarn.lock

@@ -2460,10 +2460,10 @@ cli-width@^3.0.0:
   resolved "https://registry.npm.taobao.org/cli-width/download/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha1-ovSEN6LKqaIkNueUvwceyeYc7fY=
 
-clipboard@^2.0.0:
+clipboard@^2.0.0, clipboard@^2.0.8:
   version "2.0.8"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
-  integrity sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==
+  resolved "https://registry.nlark.com/clipboard/download/clipboard-2.0.8.tgz#ffc6c103dd2967a83005f3f61976aa4655a4cdba"
+  integrity sha1-/8bBA90pZ6gwBfP2GXaqRlWkzbo=
   dependencies:
     good-listener "^1.2.2"
     select "^1.1.2"
@@ -2801,6 +2801,11 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+cropperjs@^1.5.12:
+  version "1.5.12"
+  resolved "https://registry.nlark.com/cropperjs/download/cropperjs-1.5.12.tgz#d9c0db2bfb8c0d769d51739e8f916bbc44e10f50"
+  integrity sha1-2cDbK/uMDXadUXOej5FrvEThD1A=
+
 cross-spawn@^5.0.1:
   version "5.1.0"
   resolved "https://registry.nlark.com/cross-spawn/download/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -5577,6 +5582,11 @@ mime@^2.4.4:
   resolved "https://registry.nlark.com/mime/download/mime-2.5.2.tgz#6e3dc6cc2b9510643830e5f19d5cb753da5eeabe"
   integrity sha1-bj3GzCuVEGQ4MOXxnVy3U9pe6r4=
 
+mime@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/mime/download/mime-3.0.0.tgz?cache=0&sync_timestamp=1635900750501&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fmime%2Fdownload%2Fmime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
+  integrity sha1-s3RVDco6DBhEOwyVCmpY8ZMc96c=
+
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.npm.taobao.org/mimic-fn/download/mimic-fn-1.2.0.tgz?cache=0&sync_timestamp=1617823824094&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmimic-fn%2Fdownload%2Fmimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -8383,6 +8393,14 @@ vm-browserify@^1.0.1:
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-avatar-cropper@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmmirror.com/vue-avatar-cropper/download/vue-avatar-cropper-5.0.2.tgz?cache=0&sync_timestamp=1636185543539&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-avatar-cropper%2Fdownload%2Fvue-avatar-cropper-5.0.2.tgz#6b536fbc873a633a80ad341dddc17a82a5e45d3c"
+  integrity sha1-a1NvvIc6YzqArTQd3cF6gqXkXTw=
+  dependencies:
+    cropperjs "^1.5.12"
+    mime "^3.0.0"
+
 vue-awesome-swiper@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz#8f7ab221ad003021d756b86aa618f429924900fe"