效果图
源码如下
页面设计
<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>
