You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.4 KiB
1 line
9.4 KiB
{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/bigbar-start/src/views/profile/Profile.vue?vue&type=style&index=0&id=191aab26&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/src/views/profile/Profile.vue","mtime":1616776946014},{"path":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5mb290ZXIgZGl2ewogIG1hcmdpbi10b3A6OXB4OwogIGhlaWdodDogNTBweDsKICB3aWR0aDogMTAwJTsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1OwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBsaW5lLWhlaWdodDogNTBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLC01MCUpOwp9CgouZm9vdGVyewogIG1hcmdpbi10b3A6IDQwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICB3aWR0aDogMTAwJTsKfQoKLmFjY291bnR7CiAgbWFyZ2luLXRvcDogMjBweDsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDEwMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5hY2NvdW50IC5pdGVtewogIHdpZHRoOiAzMiU7CiAgaGVpZ2h0OiAxMDBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMnB4IDJweCAycHggMnB4IHJnYmEoMjQxLCAyMzUsIDIzNSwgMC4yKTsKfQoKLmFjY291bnQgLml0ZW0gaW1newogICBtYXJnaW4tdG9wOiA1cHg7CiAgcG9zaXRpb246cmVsYXRpdmU7CiAgbGVmdDo1MCU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwwKTsKfQoKLmFjY291bnQgLml0ZW0gc3BhbnsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgbWFyZ2luLXRvcDogNXB4OwogIGRpc3BsYXk6IGJsb2NrOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnVzZXItbmlja25hbWV7CiAgbWFyZ2luLXRvcDoxMnB4IDsKfQogICAgICAKCi51c2VyLWluZm97CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OjEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7Cn0KCi5pbmZvLXNpZ257CiAgbWFyZ2luLXRvcDo4cHg7CiAgZm9udC1zaXplOiAxMnB4Owp9CgouaW5mby1zaWduIHNwYW57CiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsKICBvdmVyZmxvdzogaGlkZGVuOwogIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzOwp9CgoKLnVzZXItaWNvbnsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgdG9wOjUwJTsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLC01MCUpOwogIGJvcmRlci1yYWRpdXM6NTAlOwogIGhlaWdodDogNjBweDsKICB3aWR0aDogNjBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIGZsb2F0OiBsZWZ0Owp9CgoudXNlci1pY29uIGltZ3sKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgYm9yZGVyLXJhZGl1czo1MCU7CiAgaGVpZ2h0OiA2MHB4OwogIHdpZHRoOiA2MHB4Owp9CgoudXNlci1pY29uIC51cGxvYWRpbmd7CiAgbGVmdDogMDsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgYm9yZGVyLXJhZGl1czo1MCU7CiAgb3BhY2l0eTogMDsKfQoKLm5hdi1iYXJ7CiAgYmFja2dyb3VuZC1jb2xvcjojZjUzYjU3OwogIGNvbG9yOiAjZmZmOwp9Cgo="},{"version":3,"sources":["Profile.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"Profile.vue","sourceRoot":"src/views/profile","sourcesContent":["<template>\n <div class=\"profile\">\n <nav-bar class=\"nav-bar\"><div slot=\"center\">个人中心</div></nav-bar>\n\n <!--1.单独封装一个组件: 利用slot-->\n <user-info class=\"user-info\">\n <div slot=\"user-icon\" class=\"user-icon\" >\n <img alt=\"上传成功\" :src=\"this.avatar\" v-if=\"this.avatarexit\"/>\n <img alt=\"未上传\" src=\"~assets/img/profile/avatar.svg\" v-else/>\n <van-uploader\n class=\"uploading\"\n :after-read=\"afterRead\"\n preview-size=\"60px\"\n accept=\"image/png,image/jpeg,image/jpg,image/svg,image/gif\"\n />\n </div>\n <div slot=\"user-nickname\" class=\"user-nickname\" >\n <div v-if=\"this.name\">{{ isLogin }}</div>\n <div v-else><a @click=\"infoLogin\">登陆</a><a>/</a><a @click=\"infoRegister\">注册</a></div>\n </div>\n <div slot=\"sign\" class=\"info-sign\">\n 个性签名: <span>{{sign}}</span>\n </div>\n </user-info>\n <!--2.没有单独封装: 不同的地方太多, 需要传过多的参数-->\n <section class=\"account\">\n <div class=\"item imte2\" @click=\"mineOrder\"><img src=\"~assets/img/profile/order.svg\" alt=\"\"><span>我的订单</span></div>\n <div class=\"item imte3\"><img src=\"~assets/img/profile/cart.svg\" alt=\"\"><span>送货中</span></div>\n <div class=\"item imte4\"><img src=\"~assets/img/profile/success.svg\" alt=\"\"> <span>送货中</span></div>\n </section>\n <section class=\"footer\">\n <div @click=\"messageinfo\">设置</div>\n <div @click=\"AboutInfo\">关于我们</div>\n <div @click=\"logout()\">退出</div>\n </section>\n </div>\n</template>\n\n<script>\nimport NavBar from \"@/components/common/navbar/NavBar\";\nimport Scroll from \"@/components/common/Scroll/Scroll\";\nimport UserInfo from \"@/views/profile/childComps/UserInfo\";\nimport {getSign} from \"@/network/profile.js\"\n\nexport default {\n name: \"Profile\",\n components: {\n NavBar,\n Scroll,\n UserInfo\n },\n data() {\n return {\n name: \"\",\n isLogin: \"\",\n id:'',\n url:'',\n avatar:'',\n avatarexit:false,\n isshow:true,\n sign:\"\",\n token:\"\"\n };\n },\n async mounted(){\n this.token = window.sessionStorage.getItem(\"token\");\n if(this.token){\n this.userLogin();\n this.getAvatar();\n const res=await getSign();\n this.sign=res.data;\n }\n }\n ,\n methods: {\n mineOrder(){\n this.$router.push('/mineorder')\n },\n AboutInfo(){\n this.$router.push('/about')\n },\n messageinfo(){\n this.$router.push('/message')\n },\n logout(){\n if(this.token){\n window.sessionStorage.clear();\n this.$router.push(\"/login\")\n this.$message('退出成功')\n }else{\n this.$router.push(\"/login\")\n }\n },\n userLogin() {\n this.name = window.sessionStorage.getItem(\"name\");\n if (this.name) {\n this.isLogin =this.name;\n }\n },\n Default(){\n return \"~assets/img/profile/avatar.svg\";\n },\n infoLogin() {\n this.$router.push(\"/login\");\n },\n infoRegister() {\n this.$router.push(\"/register\");\n },\n async afterRead(file) {\n \n this.url='/upload/'+this.id+'/avatar'\n // 此时可以自行将文件上传至服务器\n const formdata=new FormData();\n formdata.append('avatar',file.file)\n await this.$http.post(this.url,formdata)\n this.getAvatar()\n this.avatarexit=false\n this.$nextTick(() => {\n this.avatarexit=true\n }, 3000);\n \n },\n async getAvatar(){\n try{\n this.id=window.sessionStorage.getItem('userId')\n const res= await this.$http.get('/users/'+this.id+'/avatar')\n this.avatar=res.config.url\n this.avatarexit=true\n }catch(err){\n this.avatarexit=false\n }\n }\n ,\n pullingDown() {\n this.$refs.scroll.finishPullDown();\n }\n },\n created() {\n },\n};\n</script>\n\n<style scoped>\n\n\n.footer div{\n margin-top:9px;\n height: 50px;\n width: 100%;\n background-color: #f5f5f5;\n text-align: center;\n line-height: 50px;\n transform: translate(0,-50%);\n}\n\n.footer{\n margin-top: 40px;\n height: 150px;\n width: 100%;\n}\n\n.account{\n margin-top: 20px;\n width: 100%;\n height: 100px;\n display: flex;\n justify-content: space-around;\n}\n\n.account .item{\n width: 32%;\n height: 100px;\n background-color: #f5f5f5;\n border-radius: 10px;\n box-shadow: 2px 2px 2px 2px rgba(241, 235, 235, 0.2);\n}\n\n.account .item img{\n margin-top: 5px;\n position:relative;\n left:50%;\n transform: translate(-50%,0);\n}\n\n.account .item span{\n position: relative;\n margin-top: 5px;\n display: block;\n text-align: center;\n}\n\n.user-nickname{\n margin-top:12px ;\n}\n \n\n.user-info{\n width: 100%;\n height:100px;\n background-color: #f5f5f5;\n}\n\n.info-sign{\n margin-top:8px;\n font-size: 12px;\n}\n\n.info-sign span{\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n\n.user-icon{\n position: relative;\n top:50%;\n transform: translate(0,-50%);\n border-radius:50%;\n height: 60px;\n width: 60px;\n background-color: #fff;\n float: left;\n}\n\n.user-icon img{\n position: relative;\n border-radius:50%;\n height: 60px;\n width: 60px;\n}\n\n.user-icon .uploading{\n left: 0;\n position: absolute;\n border-radius:50%;\n opacity: 0;\n}\n\n.nav-bar{\n background-color:#f53b57;\n color: #fff;\n}\n\n</style>\n"]}]} |