{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/profile/Profile.vue?vue&type=style&index=0&id=ae7cad70&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/profile/Profile.vue","mtime":1617881216265},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCi5mb290ZXIgZGl2ewogIG1hcmdpbi10b3A6OXB4OwogIGhlaWdodDogNTBweDsKICB3aWR0aDogMTAwJTsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1OwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBsaW5lLWhlaWdodDogNTBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLC01MCUpOwp9CgouZm9vdGVyewogIG1hcmdpbi10b3A6IDQwcHg7CiAgaGVpZ2h0OiAxNTBweDsKICB3aWR0aDogMTAwJTsKfQoKLmFjY291bnR7CiAgbWFyZ2luLXRvcDogMjBweDsKICB3aWR0aDogMTAwJTsKICBoZWlnaHQ6IDEwMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7Cn0KCi5hY2NvdW50IC5pdGVtewogIHdpZHRoOiAzMiU7CiAgaGVpZ2h0OiAxMDBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjVmNWY1OwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgYm94LXNoYWRvdzogMnB4IDJweCAycHggMnB4IHJnYmEoMjQxLCAyMzUsIDIzNSwgMC4yKTsKfQoKLmFjY291bnQgLml0ZW0gaW1newogICBtYXJnaW4tdG9wOiA1cHg7CiAgcG9zaXRpb246cmVsYXRpdmU7CiAgbGVmdDo1MCU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoLTUwJSwwKTsKfQoKLmFjY291bnQgLml0ZW0gc3BhbnsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgbWFyZ2luLXRvcDogNXB4OwogIGRpc3BsYXk6IGJsb2NrOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnVzZXItbmlja25hbWV7CiAgbWFyZ2luLXRvcDoxMnB4IDsKfQogICAgICAKCi51c2VyLWluZm97CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OjEwMHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmNWY1ZjU7Cn0KCi5pbmZvLXNpZ257CiAgbWFyZ2luLXRvcDo4cHg7CiAgZm9udC1zaXplOiAxMnB4Owp9CgouaW5mby1zaWduIHNwYW57CiAgd2hpdGUtc3BhY2U6IG5vd3JhcDsKICBvdmVyZmxvdzogaGlkZGVuOwogIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzOwp9CgoKLnVzZXItaWNvbnsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgdG9wOjUwJTsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLC01MCUpOwogIGJvcmRlci1yYWRpdXM6NTAlOwogIGhlaWdodDogNjBweDsKICB3aWR0aDogNjBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIGZsb2F0OiBsZWZ0Owp9CgoudXNlci1pY29uIGltZ3sKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgYm9yZGVyLXJhZGl1czo1MCU7CiAgaGVpZ2h0OiA2MHB4OwogIHdpZHRoOiA2MHB4Owp9CgoudXNlci1pY29uIC51cGxvYWRpbmd7CiAgbGVmdDogMDsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgYm9yZGVyLXJhZGl1czo1MCU7CiAgb3BhY2l0eTogMDsKfQoKLm5hdi1iYXJ7CiAgYmFja2dyb3VuZC1jb2xvcjojZjUzYjU3OwogIGNvbG9yOiAjZmZmOwp9Cgo="},{"version":3,"sources":["Profile.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuJA;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=\"\" @click=\"successOrder\"><span>送货中</span></div>\n      <div class=\"item imte4\"><img src=\"~assets/img/profile/success.svg\" alt=\"\" @click=\"overOrder\"> <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.localStorage.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    overOrder(){\n      this.$router.push('/overorder')\n    },\n    successOrder(){\n      this.$router.push('/successorder')\n    },\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.localStorage.clear();\n        this.$router.push(\"/login\")\n        this.$message('退出成功')\n       }else{\n         this.$router.push(\"/login\")\n       }\n    },\n    userLogin() {\n      this.name = window.localStorage.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.localStorage.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"]}]}