426 lines
8.9 KiB
Vue
426 lines
8.9 KiB
Vue
<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" @click="navgo('/pageQuota/balanceDetail/index?type=2')">
|
|
<view class="rest-item-num">{{userInfo.now_money||"0.00"}}</view>
|
|
<view class="rest-item-txt">余额</view>
|
|
</view>
|
|
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=1')">
|
|
<view class="rest-item-num">{{userInfo.purchase_funds||'0.00'}}</view>
|
|
<view class="rest-item-txt">采购款</view>
|
|
</view>
|
|
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=4')">
|
|
<view class="rest-item-num">{{userInfo.return_money||'0.00'}}</view>
|
|
<view class="rest-item-txt">返还金</view>
|
|
</view>
|
|
<view class="rest-item" @click="navgo('/pageQuota/balanceDetail/index?type=3')">
|
|
<view class="rest-item-num">{{userInfo.integral ||"0.00"}}</view>
|
|
<view class="rest-item-txt">礼品券</view>
|
|
</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="/pagesOrder/addressList/addressList"></up-cell>
|
|
<up-cell title="支付密码" :isLink="true" url="/pagesOrder/setPayPassword/index"></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,
|
|
onPullDownRefresh
|
|
} from "@dcloudio/uni-app"
|
|
import {
|
|
userInfoApi
|
|
} from "@/api/user.js"
|
|
|
|
|
|
|
|
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(() => {
|
|
userInfoApi().then(res => {
|
|
userInfo.value = res.data;
|
|
})
|
|
getOrderCount();
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
userInfoApi().then(res => {
|
|
userInfo.value = res.data;
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.user-info {
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 750rpx;
|
|
height: 250rpx;
|
|
|
|
.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: 50rpx;
|
|
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> |