<style lang="scss"> .rest { display: flex; justify-content: space-around; margin: 20rpx; .rest-item { display: flex; flex-direction: column; align-items: center; justify-content: center; .rest-item-num { font-size: 30rpx; margin-bottom: 16rpx; } .rest-item-txt { font-size: 28rpx; } } } </style> <template> <view> <up-navbar title="我的" :autoBack="true" bgColor="transparent" :fixed="true"> </up-navbar> <view class="user-info"> <image class="bg" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/e3a7b202404261113002322.webp" mode="widthFix"></image> <view class="u-card"> <view style="display: flex;"> <up-avatar :src="userInfo.avatar" size="56"></up-avatar> <view class="content"> <view class="u-phone">{{userInfo.nickname}}</view> <view class="u-id">ID: {{userInfo.id}}</view> </view> </view> <view class="to-vip-btn" @click="navgo('/pageQuota/vipUser/index')"> 会员报备 </view> </view> </view> <view class="rest"> <view class="rest-item"> <view class="rest-item-num">{{userInfo.now_money}}</view> <view class="rest-item-txt">余额</view> </view> <view class="rest-item"> <view class="rest-item-num">{{userInfo.purchase_funds}}</view> <view class="rest-item-txt">采购款</view> </view> <view class="rest-item"> <view class="rest-item-num">{{userInfo.return_money}}</view> <view class="rest-item-txt">返还金</view> </view> <view class="rest-item"> <view class="rest-item-num">{{userInfo.integral}}</view> <view class="rest-item-txt">礼品券</view> </view> </view> <!-- <view class="gift"> <view style="font-weight: bold;"> 供销经营礼包 </view> <view class='gift-buy' @click="navgo('/pages/gift/index')"> 立即购买 </view> </view> --> <view class="order-info-box"> <view class="order-info"> <view class="info-head">我的订单</view> <view class="info-list"> <view class="list-item" @click="navTo(1)"> <image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/f335a202404261401535608.png"> </image> <view class="">待付款</view> <view class="badge" v-if="orderCount.no_pay">{{orderCount.no_pay}}</view> </view> <view class="list-item" @click="navTo(2)"> <image src="/static/icon/wait.jpg"> </image> <view class="">待核销</view> <view class="badge" v-if="orderCount.waiting">{{orderCount.waiting}}</view> </view> <view class="list-item" @click="navTo(3)"> <image src="/static/icon/done.jpg"> </image> <view class="">已核销</view> <view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view> </view> <view class="list-item" @click="navTo(4)"> <image src="/static/icon/back.jpg"> </image> <view class="">售后/退款</view> <view class="badge" v-if="orderCount.applyRefund">{{orderCount.applyRefund}}</view> </view> </view> </view> </view> <view class="card"> <up-cell-group> <!-- <up-cell title="我的余额" :isLink="true" url="/pageQuota/Balance/index"></up-cell> --> <up-cell title="我的地址" :isLink="true" url="/pagesOrder/addressList/addressList"></up-cell> </up-cell-group> </view> <view class="card"> <up-cell-group> <up-cell title="意见反馈" :isLink="true" url="/pageQuota/feedBack/index"></up-cell> <up-cell title="关于我们" :isLink="true" url="/pageQuota/aboutUs/index"></up-cell> <up-cell title="退出登录" :isLink="true" @click="logout"></up-cell> </up-cell-group> </view> </view> </template> <script setup> import { ref } from "vue"; import useUserStore from "@/store/user"; import { orderCountApi } from "@/api/order.js"; import { onShow } from "@dcloudio/uni-app" const userStore = useUserStore(); const userInfo = ref({}); const orderCount = ref({ no_pay: 0, receiving: 0, waiting: 0, applyRefund: 0 }) const getOrderCount = () => { orderCountApi().then(res => { orderCount.value = res.data; }) } // 返回下单 或者充值 const handleBack = (e) => { if (e > 0) { uni.navigateTo({ url: "/pages/charge/charge" }) } else { uni.navigateBack() } } const navTo = (type = 0) => { uni.navigateTo({ url: `/pagesOrder/order/order?type=${type}` }) } const navgo = (url) => { uni.navigateTo({ url }) } const logout = () => { userStore.setToken(''); userStore.setUserInfo({}); uni.removeStorageSync('SHARE_INFO'); uni.setStorageSync("STORE_INFO", '') uni.reLaunch({ url: '/pages/login/login' }) } onShow(() => { userInfo.value = userStore.userInfo; getOrderCount(); }) </script> <style lang="scss"> .user-info { overflow: hidden; position: relative; width: 750rpx; height: 350rpx; .bg { width: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .u-card { box-sizing: border-box; padding: 50rpx 0 50rpx 50rpx; position: absolute; top: 150rpx; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; width: 100%; .to-vip-btn { color: white; padding: 10rpx 20rpx; background-color: #39BE40; border-radius: 30rpx; margin-right: 20rpx; } .content { // width: 500rpx; padding-left: 30rpx; display: flex; flex-direction: column; justify-content: center; .u-phone { font-size: 32rpx; } .u-id { font-size: 24rpx; } } .u-card-level { display: flex; justify-content: center; align-items: center; margin-bottom: 40rpx; .u-level-item { display: flex; justify-content: center; align-items: center; flex-direction: column; &:not(:nth-last-child(1)) { margin-right: 100rpx; } .u-level-item-num { font-weight: 600; font-size: 32rpx; color: #333333; margin-bottom: 8rpx; } .u-level-item-txt { font-size: 26rpx; color: #444444; } } } } } .member { width: 710rpx; margin: 0 auto; background: linear-gradient(135deg, #FFF9E8 0%, #F3E7C0 100%); box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(113, 113, 113, 0.11); border-radius: 12rpx; padding: 0 18rpx 22rpx 22rpx; box-sizing: border-box; .member-wrap { display: flex; align-items: center; justify-content: space-between; height: 78rpx; margin-bottom: 20rpx; .member-left { display: flex; align-items: center; text { font-weight: bold; font-size: 26rpx; color: #060606; } view { font-size: 24rpx; color: #060606; } } .member-right { width: 136rpx; height: 56rpx; line-height: 56rpx; background: #FFFFFF; border-radius: 28rpx; font-weight: 600; font-size: 24rpx; color: #7D661E; text-align: center; } } .member-progress { &>view { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; text { font-size: 22rpx; color: #A26341; } } } } .order-info-box { .order-info { width: 710rpx; background-color: #fff; border-radius: 14rpx; background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/a8863202404261349533191.png'); background-size: 28% 100%; background-position: right; background-repeat: no-repeat; margin: 0 auto; padding: 28rpx 0 40rpx 0; .info-head { font-size: 32rpx; font-weight: bold; margin: 0 0 30rpx 30rpx; } .info-list { height: 110rpx; display: flex; font-size: 26rpx; .list-item { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; position: relative; image { width: 64rpx; height: 64rpx; } .badge { position: absolute; top: 0; right: 20%; width: 30rpx; height: 30rpx; border-radius: 50%; text-align: center; line-height: 30rpx; font-size: 22rpx; color: #fff; background-color: #F55726; } } } } } .card { margin: 20rpx; background-color: #fff; border-radius: 14rpx; overflow: hidden; } .gift { width: 710rpx; margin: 20rpx; margin-bottom: 0; box-sizing: border-box; padding: 20rpx; align-items: center; height: 96rpx; display: flex; justify-content: space-between; box-sizing: border-box; background-color: #FAF1D7; font-size: 26rpx; .gift-buy { font-size: 24rpx; width: 136rpx; height: 56rpx; background-color: white; border-radius: 28rpx; line-height: 56rpx; text-align: center; color: #7D661E; } } </style>