效果图
编辑
源码如下
页面设计
<template> <div class="container"> <!-- 顶部用户信息 start--> <div class="header"> <div class="user-info"> <van-image class="user-img" round width="70" :src="userInfo.userImg"></van-image> <div class="user-desc"> <span class="user-nickname">{{ userInfo.nickname }}</span> <span class="user-username">账号名：{{ userInfo.username }}</span> </div> <van-icon @click="onSet" class="user-set" size="large" name="setting-o"/> </div> </div> <!-- 顶部用户信息 end--> <!-- 我的订单 start--> <div class="order"> <span>我的订单</span> <van-button class="order-button" @click="onOrdersList" color="#ff5402" round size="mini">全部</van-button> <van-grid class="order-grid" :border="false" column-num="5"> <van-grid-item v-for="(item,index) in orderGrids" :key="index" :icon="item.icon" :text="item.text" :to="item.to"></van-grid-item> </van-grid> </div> <!-- 我的订单 end--> </div> </template>
逻辑编写
<script setup> import {onMounted, reactive, ref} from "vue"; import axios from "../../utils/request"; import {useDataStore} from "../../stores/dataStore" import {useRouter} from 'vue-router' const router = useRouter() const dataStore = useDataStore() //用户信息 const userInfo = ref(0) //订单宫格数据 const orderGrids = reactive([ { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAUBJREFUWEftlrFOwzAQhn/nNQpSBxpnp40Y6dgHADEhXoEBMSM24CGYYeEN6FqnEixIPQcJBsQzMOWQF0ijGBnFrpdkdE7nT3/+P3cCkR8R+X70AGsKSDm5BosjAFueP807gIK0Omz2/QGQaX4H4MDzxevtBN8QFWf1wzrAG4ChqKrp6nU59wmS7Yz3OUkeAXyQVts2ADYvSKsgxpRp3tq/rkAPEFoBY/Iv0uo4igdspu7sgTQdzwQnlxDYdUkOAy8A7rVWF6a+M4Ac5UvXy38BxSfpxcAPgCVeNjWaceyuQA0gy/aGXFVPgvl0VRa3bRCbAHhm4ERr9bBxABcT+lcgtgmjx9BF9r9qOqfAFUCOJmYcg8piGuVX3I9jFwWir2Thl1LGFZXqvNWE5jDUWt4cwVYA10j5rAuyAf8HsAf4BiiG6yFeCtnSAAAAAElFTkSuQmCC", text: '待付款', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAXlJREFUWEftl7FOwzAQhv8LCxMDUgeW2mrME8BOGRh4ACYW4B1gbTtXYgQ2FiTEyNatzAgW5iZcgIGFJ6jiqwJtlbSp1Iq0BckZL/nvPv2x72zCkh9acn04gDEHjDEldLsHVqhU5O8hD1EMtJj5M503A+BrfQTBJYDVIouncjFBmp0ouhjEsgBKvwLQIBwTwHkQIqgBqBJhN/3eWuwQoT4aH35jqWRJrgh4CSIeaocARuuqCNoiqIdv3JjkgK90OwEIIs7AV8q6NgDoMD/k6fO0DsA5MObAtNtv0iKcRp/W/j0Atw3/lQO+Uk2AtiG4FWBjoZ0wZ7U/A9hKZsFCWvE3gOAOHlr4GVA6Cc0doD90qmK90/A9fBo44Zf1GQj7RGjM1YFpGs0sk3TmWeAA5uZAkrii9BcB64hXNoOPoPObYqPa/onrHpDHIIr2cs+EFaUOCXRTZOHRXEI4CZmvcwGSoDFmzXbjc4L4hYIIOPbQYObMYdfdjJwDPevfljCpyp4mAAAAAElFTkSuQmCC", text: '待发货', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0ZJREFUWEftl0toFFkUhv9TZTQaBRe6UCP0kHrZMvERu6KI2IEZRdHFDLjRnYh7HVBEwbhTQXDlTlyJoKCigsoIiQxjTLWitE7oqi5nBOMDBBFGJ9FY9UslqbbSdh6GtEHGuyroc8/57n//e+5twSQPmeT6+LYBDM0+CIEp4LxRlRR0IZR213fOJWPHrYCpZ9oAsQE6oxYfDCBkrgB1btH5IZ4zLoBo5SKyM2Cwyffv3BsrgKY1p1XhJRFcKnjO7mje+AB0+yGIc57vHBpr8TjOMOxfhDhPUes9r+PpsACW1rwuVNAkDNd9XkSaheHGgn+n/UsBonhTtykMW6L5FQEMzd4tgmMA7pO4WF5EBK1xggkHsHR7K4HTJFqHkzi5ggkFSKWWzp5WM/UPCLpdz9kQJY+Mo4BbkjBVAzB1+wiAPUJmC37uZgQw4Hi0ukWntF1VAbC0zFqKRKY66hadvSXXfi0A07Cvgqh/1/d+zePH919/VQBLW5GlKG0CbIOq3GIQnBpqLslWdQtigLhIf49PDAG6kj18wj1QDjDa0foO8P9QoLGxsa63t/bnyA+1tb2/5/P5t7E3qq6AZWR+I+XAYMHZAF6T3O/5uRPlt1klwxpGk6VA/SmktIDMK8Dtgu9cj2Ita2WKQfiPBEFj4e+7D/rba/IUxN+g7II65aTr/vnvQDvmvoAfFvr+vZcjKZBKZWun1vwX9ZSVBP4SoCESUYCthaJzxtCbTwm4zC06S0sPklJRsB2U+RA+c4u5lnh1ixY1zQs/qM8Q/d4/JPvpu+KhXRxQyfp+Z5dprp4F9p0EsQXAKwAzSByOL7d+BdLp9Mygr+7yQCrFgPCq6zk7kqlNPeMDeDJsjxAhiDcANpPc5/m5w3GspdmrKLgFyHa32Dmky372IKl0+1mavZ6Ca7GMIzUqQ7dfgDxeEUCRJa7bmS/rskPT1devmj5zetBGYAEEHQhRA0FWAPdNj9rS3d3RMxKAadhnQWYrbMHytz3qj+XzKz7JGhoyC1WRPSLYFBUjcSUgjz56lBt+CxJUpm6/BDAnaUIKfvU850I5/LhexaPdFYNHNfJAmuBzodwo/0MS56gawFggS8dwrMHViJt0BT4CVJJBP1LneyoAAAAASUVORK5CYII=", text: '待收货', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAgBJREFUWEft1z/oTWEYwPHPb1IyyKCwiLKYUP5lYDDKvxhkIFKklAklLCgJw08pIQaD/EmiSAwySLIwGaSIFEoGZdBT773eezpX59x7bv2G8yyn+97nz/c873ue93nGTBAZmyAcykBmYzfmYWrDoB/xAefwJfddBFmHMwiYUct8vO0EyUEW4wGm4TUe417DNMuwBvF8g0X4HTFykNPYj59YmtM2DLMAzzAZm3GjCHITG3AdWxoOXnT3EKvTi8dR6MnIE6zEURwbMciRFKcbK9+aFqTdGgx8RqK2fOtzgFdhOh79Ryc+gqeZfW2QKPHfk4PtuFKAWY9bae0FlpTAvkyFK2zDR0htkG24nIwj4MZCoH04m9Z+YUrh/7l4l9Y+YdagILElUei+4nYqdnmsuC/uYg7GsbckIxewq1Cfamekal2b1LkzKhqMDKRi/K5aC1LMWJuRWhk5n3rV6JxW4EfdE1hRfwaep3a0WyTzNmAHLiZnUQWjfjTdKkap34Q96XNfjlfF2zd+38Haim92CofwJ9PfmZqqmRV8nMTBjl7ZOBGjRGxTFbmPw+mtTuBAFSP0QJRlpOMnLrsYKfrNNQtxHFFR36dmeGsyvoRrfYA+I2abaNB7ZJhJLw50ZCGeHRm43x0GJIJHRiIzkaGr2U1dcYf+qQ0LUjtgP4MWpJiZvzstiSEwFPllAAAAAElFTkSuQmCC", text: '待评价', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7ZJREFUWEftlkuIFFcUhv9T1fa4CUggRiGPkam61TMLncHp6oyb6MYwkBAScEIIIYkJakKCIUGZnY9F0BCIIVmIEIJuAoZECILgwsciOl3to8lipup2NbSIKBokZBGctuueUMO09KNeEjNuUsuqc8//1X/OufcSHvNDj1kf/wNkdmDNmtLTy3NYy8A6RZggcAkAgzHDRFeAoJrL0dXZ2cqthylrJgDLtA+CaJKBy0Q8B/Dvuo5qKBQEGIWitSAIAEUwTnk1ZzorRCKAYYyP6Zr2I4NOKoX9vl/+Kynx4ODoiuX5/DcABu8H+vv1+kU/DSQWQAh7DwF7SdFLrl8+nZao87sQ9msE/MLAXimdfUlrIwGGhzc8r4JWw5NOphLFCVjC5lagm0lORApYln0Oik94tUpo54OnYIxvbEG/7fvl2c73hlEaySFY6fqXzvU6oQGfutJ5MQ6yD8Ay7d0gjHvSmepdFJYFwBalaKoNEYprGh8H8FOU3QVhH2XGzbjG7AIYHl6/WgX6qVaQ21yvX7gdRS1EcZpAHweKNoffdY1PE6v9bu3Skaj4sDEH8vnzpGmvuu5MozemC6Bg2i8r4lekrGzvDbSs0iZADTAzadBWMvBdGMOgj4DgDyJiQJv3vPLZ9lrLLJ7Vl+HN4D6mmeiqlM5RIYpvAFRou9UFEFqsMe66NefbPgBhHwfzU4nTQHSns3SWVdoK5q9B+ADgyXx+4PPmfPNuoGjC98szYa4uAMuyfwVwyPOcM2ljt9gPSBszy7R3gLB7wSzgCQZ2hU6083cDiNKNVqCPxdW/p8PDhkwFCGMs094FwhYCVV1Z3taZZ0kAQkEhSj9IWX4vsQnjSlAwi+8y8E5fWYg653vhZxh8JKqJC4UXBlOnIKkJY/aETCXIvBUnjeGSALQ3ovlmc2OjUf0ziTzrFIQ5wh9za87JqHxRW/EBIqx2pdNf844MWQEsq/ghFKa8WmVTJoAFYmGfV8AhKZ0TcS5kARDCXkdAtRXwc/V65XpmgKGhCSOnB7V/cxwbhjGgaU9eJsYxr+Z8GfcjqRcSBl5PciIqsWGsH9JJP0OEn13pfJZ5CnoDQyeW6cH3ABr3ms2daY252HCfMOErAva50vkibUvPdOOxTPsACJMMutJ5KW02tb8BPJPL8bOs8BaAt8G4yITDUjrH0sT7DqOkBSMjxVWtFo8B+iiA8cVr+QoAdwBcJ9BvpOuH5+YuXMsiHHkYPczCRxWbqQSPSizzGP6Xgomn4VIKt7X+AXf2mjBrhk0cAAAAAElFTkSuQmCC", text: '售后', to: '', }, ]) onMounted(() => { axios.get("front/user/findById", { params: { userId: dataStore.userId } }).then(res => { if (res.data.code == 200) { userInfo.value = res.data.data } }) }) /** * 用户设置按钮 */ const onSet = () => { router.push("/user/setting") } /** * 用户全部订单 */ const onOrdersList = () => { router.push("/user/orders") } </script>
样式设计
<style scoped> .header { background-image: linear-gradient(135deg, #fdf0e7 10%, #fce3ba 100%) !important;; height: 110px; border-radius: 0 0 15px 15px; } /** 个人信息模块 */ .user-info { display: flex; } .user-img { margin: 10px; } .user-nickname { display: block; font-weight: bolder; font-size: 18px; margin-top: 20px; margin-left: 10px; color: #170f07; } .user-username { display: block; margin-left: 10px; margin-top: 5px; color: #70635a; } .user-set { margin-left: 160px; margin-top: 20px; } /** 订单模块 */ .order { border-radius: 15px; margin: 6px; background-color: #ffffff; padding: 10px; } .order span { font-size: 16px; font-weight: bolder; color: #170f07; } .order-button { float: right; } </style>
全部代码
<template> <div class="container"> <!-- 顶部用户信息 start--> <div class="header"> <div class="user-info"> <van-image class="user-img" round width="70" :src="userInfo.userImg"></van-image> <div class="user-desc"> <span class="user-nickname">{{ userInfo.nickname }}</span> <span class="user-username">账号名：{{ userInfo.username }}</span> </div> <van-icon @click="onSet" class="user-set" size="large" name="setting-o"/> </div> </div> <!-- 顶部用户信息 end--> <!-- 我的订单 start--> <div class="order"> <span>我的订单</span> <van-button class="order-button" @click="onOrdersList" color="#ff5402" round size="mini">全部</van-button> <van-grid class="order-grid" :border="false" column-num="5"> <van-grid-item v-for="(item,index) in orderGrids" :key="index" :icon="item.icon" :text="item.text" :to="item.to"></van-grid-item> </van-grid> </div> <!-- 我的订单 end--> </div> </template> <script setup> import {onMounted, reactive, ref} from "vue"; import axios from "../../utils/request"; import {useDataStore} from "../../stores/dataStore" import {useRouter} from 'vue-router' const router = useRouter() const dataStore = useDataStore() //用户信息 const userInfo = ref(0) //订单宫格数据 const orderGrids = reactive([ { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAUBJREFUWEftlrFOwzAQhn/nNQpSBxpnp40Y6dgHADEhXoEBMSM24CGYYeEN6FqnEixIPQcJBsQzMOWQF0ijGBnFrpdkdE7nT3/+P3cCkR8R+X70AGsKSDm5BosjAFueP807gIK0Omz2/QGQaX4H4MDzxevtBN8QFWf1wzrAG4ChqKrp6nU59wmS7Yz3OUkeAXyQVts2ADYvSKsgxpRp3tq/rkAPEFoBY/Iv0uo4igdspu7sgTQdzwQnlxDYdUkOAy8A7rVWF6a+M4Ac5UvXy38BxSfpxcAPgCVeNjWaceyuQA0gy/aGXFVPgvl0VRa3bRCbAHhm4ERr9bBxABcT+lcgtgmjx9BF9r9qOqfAFUCOJmYcg8piGuVX3I9jFwWir2Thl1LGFZXqvNWE5jDUWt4cwVYA10j5rAuyAf8HsAf4BiiG6yFeCtnSAAAAAElFTkSuQmCC", text: '待付款', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAXlJREFUWEftl7FOwzAQhv8LCxMDUgeW2mrME8BOGRh4ACYW4B1gbTtXYgQ2FiTEyNatzAgW5iZcgIGFJ6jiqwJtlbSp1Iq0BckZL/nvPv2x72zCkh9acn04gDEHjDEldLsHVqhU5O8hD1EMtJj5M503A+BrfQTBJYDVIouncjFBmp0ouhjEsgBKvwLQIBwTwHkQIqgBqBJhN/3eWuwQoT4aH35jqWRJrgh4CSIeaocARuuqCNoiqIdv3JjkgK90OwEIIs7AV8q6NgDoMD/k6fO0DsA5MObAtNtv0iKcRp/W/j0Atw3/lQO+Uk2AtiG4FWBjoZ0wZ7U/A9hKZsFCWvE3gOAOHlr4GVA6Cc0doD90qmK90/A9fBo44Zf1GQj7RGjM1YFpGs0sk3TmWeAA5uZAkrii9BcB64hXNoOPoPObYqPa/onrHpDHIIr2cs+EFaUOCXRTZOHRXEI4CZmvcwGSoDFmzXbjc4L4hYIIOPbQYObMYdfdjJwDPevfljCpyp4mAAAAAElFTkSuQmCC", text: '待发货', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0ZJREFUWEftl0toFFkUhv9TZTQaBRe6UCP0kHrZMvERu6KI2IEZRdHFDLjRnYh7HVBEwbhTQXDlTlyJoKCigsoIiQxjTLWitE7oqi5nBOMDBBFGJ9FY9UslqbbSdh6GtEHGuyroc8/57n//e+5twSQPmeT6+LYBDM0+CIEp4LxRlRR0IZR213fOJWPHrYCpZ9oAsQE6oxYfDCBkrgB1btH5IZ4zLoBo5SKyM2Cwyffv3BsrgKY1p1XhJRFcKnjO7mje+AB0+yGIc57vHBpr8TjOMOxfhDhPUes9r+PpsACW1rwuVNAkDNd9XkSaheHGgn+n/UsBonhTtykMW6L5FQEMzd4tgmMA7pO4WF5EBK1xggkHsHR7K4HTJFqHkzi5ggkFSKWWzp5WM/UPCLpdz9kQJY+Mo4BbkjBVAzB1+wiAPUJmC37uZgQw4Hi0ukWntF1VAbC0zFqKRKY66hadvSXXfi0A07Cvgqh/1/d+zePH919/VQBLW5GlKG0CbIOq3GIQnBpqLslWdQtigLhIf49PDAG6kj18wj1QDjDa0foO8P9QoLGxsa63t/bnyA+1tb2/5/P5t7E3qq6AZWR+I+XAYMHZAF6T3O/5uRPlt1klwxpGk6VA/SmktIDMK8Dtgu9cj2Ita2WKQfiPBEFj4e+7D/rba/IUxN+g7II65aTr/vnvQDvmvoAfFvr+vZcjKZBKZWun1vwX9ZSVBP4SoCESUYCthaJzxtCbTwm4zC06S0sPklJRsB2U+RA+c4u5lnh1ixY1zQs/qM8Q/d4/JPvpu+KhXRxQyfp+Z5dprp4F9p0EsQXAKwAzSByOL7d+BdLp9Mygr+7yQCrFgPCq6zk7kqlNPeMDeDJsjxAhiDcANpPc5/m5w3GspdmrKLgFyHa32Dmky372IKl0+1mavZ6Ca7GMIzUqQ7dfgDxeEUCRJa7bmS/rskPT1devmj5zetBGYAEEHQhRA0FWAPdNj9rS3d3RMxKAadhnQWYrbMHytz3qj+XzKz7JGhoyC1WRPSLYFBUjcSUgjz56lBt+CxJUpm6/BDAnaUIKfvU850I5/LhexaPdFYNHNfJAmuBzodwo/0MS56gawFggS8dwrMHViJt0BT4CVJJBP1LneyoAAAAASUVORK5CYII=", text: '待收货', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAAAXNSR0IArs4c6QAAAgBJREFUWEft1z/oTWEYwPHPb1IyyKCwiLKYUP5lYDDKvxhkIFKklAklLCgJw08pIQaD/EmiSAwySLIwGaSIFEoGZdBT773eezpX59x7bv2G8yyn+97nz/c873ue93nGTBAZmyAcykBmYzfmYWrDoB/xAefwJfddBFmHMwiYUct8vO0EyUEW4wGm4TUe417DNMuwBvF8g0X4HTFykNPYj59YmtM2DLMAzzAZm3GjCHITG3AdWxoOXnT3EKvTi8dR6MnIE6zEURwbMciRFKcbK9+aFqTdGgx8RqK2fOtzgFdhOh79Ryc+gqeZfW2QKPHfk4PtuFKAWY9bae0FlpTAvkyFK2zDR0htkG24nIwj4MZCoH04m9Z+YUrh/7l4l9Y+YdagILElUei+4nYqdnmsuC/uYg7GsbckIxewq1Cfamekal2b1LkzKhqMDKRi/K5aC1LMWJuRWhk5n3rV6JxW4EfdE1hRfwaep3a0WyTzNmAHLiZnUQWjfjTdKkap34Q96XNfjlfF2zd+38Haim92CofwJ9PfmZqqmRV8nMTBjl7ZOBGjRGxTFbmPw+mtTuBAFSP0QJRlpOMnLrsYKfrNNQtxHFFR36dmeGsyvoRrfYA+I2abaNB7ZJhJLw50ZCGeHRm43x0GJIJHRiIzkaGr2U1dcYf+qQ0LUjtgP4MWpJiZvzstiSEwFPllAAAAAElFTkSuQmCC", text: '待评价', to: '', }, { icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA7ZJREFUWEftlkuIFFcUhv9T1fa4CUggRiGPkam61TMLncHp6oyb6MYwkBAScEIIIYkJakKCIUGZnY9F0BCIIVmIEIJuAoZECILgwsciOl3to8lipup2NbSIKBokZBGctuueUMO09KNeEjNuUsuqc8//1X/OufcSHvNDj1kf/wNkdmDNmtLTy3NYy8A6RZggcAkAgzHDRFeAoJrL0dXZ2cqthylrJgDLtA+CaJKBy0Q8B/Dvuo5qKBQEGIWitSAIAEUwTnk1ZzorRCKAYYyP6Zr2I4NOKoX9vl/+Kynx4ODoiuX5/DcABu8H+vv1+kU/DSQWQAh7DwF7SdFLrl8+nZao87sQ9msE/MLAXimdfUlrIwGGhzc8r4JWw5NOphLFCVjC5lagm0lORApYln0Oik94tUpo54OnYIxvbEG/7fvl2c73hlEaySFY6fqXzvU6oQGfutJ5MQ6yD8Ay7d0gjHvSmepdFJYFwBalaKoNEYprGh8H8FOU3QVhH2XGzbjG7AIYHl6/WgX6qVaQ21yvX7gdRS1EcZpAHweKNoffdY1PE6v9bu3Skaj4sDEH8vnzpGmvuu5MozemC6Bg2i8r4lekrGzvDbSs0iZADTAzadBWMvBdGMOgj4DgDyJiQJv3vPLZ9lrLLJ7Vl+HN4D6mmeiqlM5RIYpvAFRou9UFEFqsMe66NefbPgBhHwfzU4nTQHSns3SWVdoK5q9B+ADgyXx+4PPmfPNuoGjC98szYa4uAMuyfwVwyPOcM2ljt9gPSBszy7R3gLB7wSzgCQZ2hU6083cDiNKNVqCPxdW/p8PDhkwFCGMs094FwhYCVV1Z3taZZ0kAQkEhSj9IWX4vsQnjSlAwi+8y8E5fWYg653vhZxh8JKqJC4UXBlOnIKkJY/aETCXIvBUnjeGSALQ3ovlmc2OjUf0ziTzrFIQ5wh9za87JqHxRW/EBIqx2pdNf844MWQEsq/ghFKa8WmVTJoAFYmGfV8AhKZ0TcS5kARDCXkdAtRXwc/V65XpmgKGhCSOnB7V/cxwbhjGgaU9eJsYxr+Z8GfcjqRcSBl5PciIqsWGsH9JJP0OEn13pfJZ5CnoDQyeW6cH3ABr3ms2daY252HCfMOErAva50vkibUvPdOOxTPsACJMMutJ5KW02tb8BPJPL8bOs8BaAt8G4yITDUjrH0sT7DqOkBSMjxVWtFo8B+iiA8cVr+QoAdwBcJ9BvpOuH5+YuXMsiHHkYPczCRxWbqQSPSizzGP6Xgomn4VIKt7X+AXf2mjBrhk0cAAAAAElFTkSuQmCC", text: '售后', to: '', }, ]) onMounted(() => { axios.get("front/user/findById", { params: { userId: dataStore.userId } }).then(res => { if (res.data.code == 200) { userInfo.value = res.data.data } }) }) /** * 用户设置按钮 */ const onSet = () => { router.push("/user/setting") } /** * 用户全部订单 */ const onOrdersList = () => { router.push("/user/orders") } </script> <style scoped> .header { background-image: linear-gradient(135deg, #fdf0e7 10%, #fce3ba 100%) !important;; height: 110px; border-radius: 0 0 15px 15px; } /** 个人信息模块 */ .user-info { display: flex; } .user-img { margin: 10px; } .user-nickname { display: block; font-weight: bolder; font-size: 18px; margin-top: 20px; margin-left: 10px; color: #170f07; } .user-username { display: block; margin-left: 10px; margin-top: 5px; color: #70635a; } .user-set { margin-left: 160px; margin-top: 20px; } /** 订单模块 */ .order { border-radius: 15px; margin: 6px; background-color: #ffffff; padding: 10px; } .order span { font-size: 16px; font-weight: bolder; color: #170f07; } .order-button { float: right; } </style>
