549 lines
12 KiB
Vue
549 lines
12 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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.balance {
|
|
position: absolute;
|
|
top: 160rpx;
|
|
z-index: 999;
|
|
left: 80rpx;
|
|
font-size: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 620rpx;
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
</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;" @click="updataInfp">
|
|
<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="balance" @click="navgo('/pageQuota/balanceDetail/index?type=2')">
|
|
<view class="" style="font-size: 28rpx;transform: translateY(10rpx);">
|
|
余额:
|
|
</view>
|
|
<view class="">
|
|
{{userInfo.now_money||"0.00"}}<text style="font-size: 28rpx;"> (元)</text>
|
|
</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">
|
|
<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" @click="navgo('/pageQuota/balanceDetail/index?type=3')"> -->
|
|
<view class="rest-item">
|
|
<view class="rest-item-num">{{userInfo.GetNumber ||"0.00"}}</view>
|
|
<view class="rest-item-txt">礼品券</view>
|
|
</view>
|
|
<view class="rest-item">
|
|
<view class="rest-item-num">{{userInfo.number ||"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>
|
|
|
|
<up-popup :show="showPop" @close="showPop=false" @open="showPop=true">
|
|
<view class="popContent">
|
|
<view style="text-align: center;font-size: 30rpx;font-weight: bold;">
|
|
修改个人信息
|
|
</view>
|
|
<up-form labelPosition="left">
|
|
<up-form-item label="呢称" prop="userInfo.name" borderBottom ref="item1">
|
|
<up-input v-model="formData.nick_name" border="none" placeholder="请输入个人呢称"></up-input>
|
|
</up-form-item>
|
|
<up-form-item label="头像" prop="userInfo.sex" borderBottom ref="item1">
|
|
<up-image :src="formData.avatar" width="80px" height="80px" @click="uploadAvatar"></up-image>
|
|
</up-form-item>
|
|
</up-form>
|
|
<view style="display: flex;margin-top: 40rpx;justify-content: space-around;">
|
|
<view style="width: 200rpx;">
|
|
<up-button color="#20b128" @click="updataFn">保存</up-button>
|
|
</view>
|
|
<view style="width: 200rpx;">
|
|
<up-button @click="showPop=false">取消</up-button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <button></button> -->
|
|
</view>
|
|
</up-popup>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
reactive,
|
|
ref
|
|
} from "vue";
|
|
import useUserStore from "@/store/user";
|
|
import {
|
|
orderCountApi
|
|
} from "@/api/order.js";
|
|
import {
|
|
onShow,
|
|
onPullDownRefresh
|
|
} from "@dcloudio/uni-app"
|
|
import {
|
|
userInfoApi,
|
|
uploadImg,
|
|
loginUpdateUserApi
|
|
} from "@/api/user.js"
|
|
import {
|
|
config
|
|
} from "@/config/app.js"
|
|
|
|
console.log()
|
|
|
|
|
|
|
|
const userStore = useUserStore();
|
|
const userInfo = ref({});
|
|
let token = uni.getStorageSync('token') || ''
|
|
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 showPop = ref(false)
|
|
|
|
const updataInfp = () => {
|
|
console.log(5454)
|
|
showPop.value = true
|
|
}
|
|
|
|
const formData = reactive({
|
|
nick_name: "",
|
|
avatar: ""
|
|
|
|
})
|
|
|
|
const updataFn = () => {
|
|
loginUpdateUserApi({
|
|
nickname: formData.nick_name,
|
|
avatar: formData.avatar
|
|
}).then(res => {
|
|
uni.$u.toast('修改成功');
|
|
showPop.value = false
|
|
userInfoApi().then(res => {
|
|
userInfo.value = res.data;
|
|
})
|
|
})
|
|
}
|
|
|
|
const uploadAvatar = () => {
|
|
uni.chooseImage({
|
|
success: (chooseImageRes) => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
});
|
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
|
uni.uploadFile({
|
|
url: config.HTTP_REQUEST_URL + '/api/Upload/image', //仅为示例，非真实的接口地址
|
|
filePath: tempFilePaths[0],
|
|
name: 'file',
|
|
header: {
|
|
token: token,
|
|
},
|
|
success: (uploadFileRes) => {
|
|
let data = JSON.parse(uploadFileRes.data)
|
|
formData.avatar = data.data.uri
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
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;
|
|
formData.avatar = res.data.avatar
|
|
formData.nick_name = res.data.nickname
|
|
|
|
})
|
|
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: -10rpx;
|
|
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;
|
|
}
|
|
|
|
.popContent {
|
|
padding: 30rpx 20rpx 50rpx 20rpx;
|
|
}
|
|
|
|
.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> |