365 lines
8.1 KiB
Vue
365 lines
8.1 KiB
Vue
<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;margin-bottom: 44rpx;">
|
||
<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="u-card-level">
|
||
<view class="u-level-item">
|
||
<view class="u-level-item-num">{{userInfo.vip_name}}</view>
|
||
<view class="u-level-item-txt">会员等级</view>
|
||
</view>
|
||
<view class="u-level-item">
|
||
<view class="u-level-item-num">{{userInfo.discount}}</view>
|
||
<view class="u-level-item-txt">可享折扣</view>
|
||
</view>
|
||
<view class="u-level-item">
|
||
<view class="u-level-item-num">{{userInfo.now_money}}</view>
|
||
<view class="u-level-item-txt">可用余额</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="member">
|
||
<view class="member-wrap">
|
||
<view class="member-left">
|
||
<up-image width="36rpx" height="36rpx" src="/static/icon/silver.webp"></up-image>
|
||
<text>初级会员</text>
|
||
<up-line direction="col" color="#707070" margin="0 10rpx" length="12"></up-line>
|
||
<view :style="{'font-weight':userInfo.user_ship>0?'bold':'normal'}">
|
||
{{userInfo.user_ship>0?'享折扣权益':'活动期间下单即享初级会员'}}
|
||
</view>
|
||
</view>
|
||
<view class="member-right" @click="handleBack(userInfo.user_ship)">
|
||
{{userInfo.user_ship>0?'立即升级':'立即下单'}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="member-progress">
|
||
<view>
|
||
<text>当前已充值{{userInfo.total_recharge_amount}}，升级还需{{userInfo.next_limit}}</text>
|
||
<text>{{userInfo.next_level}}</text>
|
||
</view>
|
||
<up-line-progress :percentage="(userInfo.total_recharge_amount/userInfo.next_limit).toFixed(2)"
|
||
activeColor="#A26341" inactiveColor="#fff" height="8rpx"></up-line-progress>
|
||
</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.webp">
|
||
</image>
|
||
<view class="">待核销</view>
|
||
<view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
|
||
</view>
|
||
|
||
<view class="list-item" @click="navTo(2)">
|
||
<image src="/static/icon/done.webp">
|
||
</image>
|
||
<view class="">已核销</view>
|
||
<view class="badge" v-if="orderCount.receiving">{{orderCount.receiving}}</view>
|
||
</view>
|
||
|
||
<view class="list-item" @click="navTo()">
|
||
<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/abdcd202404261406199643.png">
|
||
</image>
|
||
<view class="">全部订单</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
|
||
})
|
||
const getOrderCount = () => {
|
||
orderCountApi().then(res => {
|
||
orderCount.value = res.data;
|
||
})
|
||
}
|
||
|
||
// 返回下单 或者充值
|
||
const handleBack = (e) => {
|
||
console.log(userInfo.user_ship);
|
||
|
||
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 logout = () => {
|
||
userStore.setToken('');
|
||
userStore.setUserInfo({});
|
||
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: 436rpx;
|
||
/* #ifdef H5 */
|
||
height: 350rpx;
|
||
/* #endif */
|
||
|
||
.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: 100rpx;
|
||
left: 0;
|
||
z-index: 2;
|
||
|
||
.content {
|
||
width: 500rpx;
|
||
padding-left: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.u-phone {
|
||
font-size: 32rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style> |