382 lines
11 KiB
Vue
382 lines
11 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { useUserStore } from '@/store/user'
|
||
|
|
import { ICOBalanceRecharge,ICOMyCoupon,ICOMyRights,ICOMyOrder } from '@/components/icons'
|
||
|
|
import { generateQRCode, getCurrentPagePath } from '@/utils/qrcode'
|
||
|
|
|
||
|
|
definePage({
|
||
|
|
style: {
|
||
|
|
navigationBarTitleText: '我的',
|
||
|
|
// navigationStyle: 'custom',
|
||
|
|
},
|
||
|
|
})
|
||
|
|
const userStore = useUserStore();
|
||
|
|
/** 登录用户信息 */
|
||
|
|
const loginUser:any = computed(() => userStore.info ?? {});
|
||
|
|
|
||
|
|
console.log(loginUser.value,'用户信息')
|
||
|
|
|
||
|
|
const itemClick = (url:string) => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: url,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const showQrcode = ref(false)
|
||
|
|
const qrcodeData = ref('')
|
||
|
|
|
||
|
|
// 生成二维码
|
||
|
|
const generateUserQRCode = async () => {
|
||
|
|
console.log('开始生成二维码');
|
||
|
|
try {
|
||
|
|
// 生成包含用户ID和页面路径的二维码
|
||
|
|
const qrContent = `${loginUser.value?.idnum || 'guest'}`;
|
||
|
|
console.log('二维码内容:', qrContent);
|
||
|
|
|
||
|
|
// 调用二维码生成工具
|
||
|
|
const qrDataUrl = await generateQRCode(qrContent, {
|
||
|
|
size: 200,
|
||
|
|
margin: 1,
|
||
|
|
color: {
|
||
|
|
dark: '#000000',
|
||
|
|
light: '#FFFFFF'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
console.log('二维码生成成功:', qrDataUrl.substring(0, 100) + '...');
|
||
|
|
qrcodeData.value = qrDataUrl;
|
||
|
|
showQrcode.value = true;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('生成二维码失败:', error);
|
||
|
|
uni.showToast({
|
||
|
|
title: '生成二维码失败',
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view class="profile-container">
|
||
|
|
<!-- 二维码 -->
|
||
|
|
<wd-popup v-model="showQrcode" custom-style="border-radius:16rpx; padding: 0;" position="center" >
|
||
|
|
<view class="qrcode-wrapper">
|
||
|
|
<view class="qrcode-header">
|
||
|
|
<view class="qrcode-title">{{ loginUser.name || '用户' }}的二维码</view>
|
||
|
|
<!-- <view class="qrcode-close" @click="showQrcode = false">-->
|
||
|
|
<!-- <wd-icon name="close" size="20px"></wd-icon>-->
|
||
|
|
<!-- </view>-->
|
||
|
|
</view>
|
||
|
|
<view class="qrcode-content">
|
||
|
|
<view class="qrcode-image-container" v-if="qrcodeData">
|
||
|
|
<image :src="qrcodeData" mode="aspectFit" class="qrcode-image"></image>
|
||
|
|
</view>
|
||
|
|
<view class="qrcode-info">
|
||
|
|
<!-- <view class="qrcode-desc">扫描二维码分享给好友</view>-->
|
||
|
|
<view class="qrcode-user">
|
||
|
|
<wd-img :width="40" :height="40" round :src="loginUser.avatar" />
|
||
|
|
<view class="user-name">{{ loginUser.name || '用户' }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</wd-popup>
|
||
|
|
<view class="user-info-section">
|
||
|
|
<view class="avatar-wrapper">
|
||
|
|
<wd-img :width="60" :height="60" round :src="loginUser.avatar" :enable-preview="true" />
|
||
|
|
<view class="user-details">
|
||
|
|
<view class="username">
|
||
|
|
<view style="margin-right: 8px">{{ loginUser.name }}</view>
|
||
|
|
<wd-icon @click="itemClick('/pages/me/personal-profile/index')" name="edit-outline" size="16px"></wd-icon>
|
||
|
|
</view>
|
||
|
|
<view class="user-card">
|
||
|
|
<wd-tag custom-class="space" mark use-icon-slot>
|
||
|
|
<text>普卡会员</text>
|
||
|
|
<template #icon>
|
||
|
|
<wd-icon name="creditcard" />
|
||
|
|
</template>
|
||
|
|
</wd-tag>
|
||
|
|
<!-- <wd-tag >卡号: {{ 10022342348 }}</wd-tag>-->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-right" @click="generateUserQRCode">
|
||
|
|
<wd-icon name="qrcode" size="30px"></wd-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-bottom">
|
||
|
|
<wd-grid bg-color="#F5F7FA" :column="4">
|
||
|
|
<wd-grid-item custom-class="custom-item" icon="picture" text="余额(元)" >
|
||
|
|
<template #icon>
|
||
|
|
<view class="balance">{{ 0 }}</view>
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item custom-class="custom-item" icon="picture" text="积分" >
|
||
|
|
<template #icon>
|
||
|
|
<view class="balance">{{ 0 }}</view>
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item custom-class="custom-item" icon="picture" text="卡项" >
|
||
|
|
<template #icon>
|
||
|
|
<view class="balance">{{ 0 }}</view>
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item custom-class="custom-item" icon="picture" text="优惠卷" >
|
||
|
|
<template #icon>
|
||
|
|
<view class="balance">{{ 0 }}</view>
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
</wd-grid>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="user-container">
|
||
|
|
<view class="body-card-style-radius-padding" style="padding: 4px">
|
||
|
|
<wd-grid :column="4">
|
||
|
|
<wd-grid-item icon="picture" text="余额充值" >
|
||
|
|
<template #icon>
|
||
|
|
<ICOBalanceRecharge style="width: 35px; height: 35px" />
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item icon="picture" text="我的优惠卷" >
|
||
|
|
<template #icon>
|
||
|
|
<ICOMyCoupon style="width: 35px; height: 35px" />
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item icon="picture" text="我的权益" >
|
||
|
|
<template #icon>
|
||
|
|
<ICOMyRights style="width: 35px; height: 35px" />
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item icon="picture" text="我的订单" >
|
||
|
|
<template #icon>
|
||
|
|
<ICOMyOrder style="width: 35px; height: 35px" />
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
</wd-grid>
|
||
|
|
</view>
|
||
|
|
<view class="body-card-style-radius-padding">
|
||
|
|
<view class="body-card-style-head">
|
||
|
|
我的订单
|
||
|
|
<view class="right text-right">
|
||
|
|
<wd-icon name="arrow-right" size="16px"></wd-icon>
|
||
|
|
全部
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<wd-grid :column="5">
|
||
|
|
<wd-grid-item icon="wallet" text="待付款" />
|
||
|
|
<wd-grid-item icon="bags" text="待发货" />
|
||
|
|
<wd-grid-item text="待收货" >
|
||
|
|
<template #icon>
|
||
|
|
<view style="width: 26px; height: 26px; color: #000000" class="i-carbon:arrival"></view>
|
||
|
|
</template>
|
||
|
|
</wd-grid-item>
|
||
|
|
<wd-grid-item icon="dong" text="待评价" />
|
||
|
|
<wd-grid-item icon="money-circle" text="退款/售后" />
|
||
|
|
</wd-grid>
|
||
|
|
</view>
|
||
|
|
<view class="body-card-style-radius-padding" style="margin-bottom: 0">
|
||
|
|
<view class="body-card-style-head">
|
||
|
|
我的功能
|
||
|
|
</view>
|
||
|
|
<wd-grid :column="4">
|
||
|
|
<wd-grid-item icon="gift" @click="itemClick('/pages/me/promote-with-courtesy/index')" text="推广有礼" />
|
||
|
|
<wd-grid-item icon="picture" text="我的预约" />
|
||
|
|
<wd-grid-item icon="picture" text="购物车" />
|
||
|
|
<wd-grid-item icon="picture" text="我的地点" />
|
||
|
|
<wd-grid-item icon="picture" text="我的拼团" />
|
||
|
|
<wd-grid-item icon="picture" text="我的表单" />
|
||
|
|
<wd-grid-item icon="picture" text="我的消息" />
|
||
|
|
<wd-grid-item icon="picture" text="服务日志" />
|
||
|
|
<wd-grid-item icon="picture" text="待评价" />
|
||
|
|
<wd-grid-item icon="picture" text="积分商城" />
|
||
|
|
<wd-grid-item icon="picture" text="我的会员卡" />
|
||
|
|
<wd-grid-item icon="picture" text="公众号通知" />
|
||
|
|
</wd-grid>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.qrcode-wrappe{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 二维码弹框样式 */
|
||
|
|
.qrcode-wrapper {
|
||
|
|
width: 560rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.qrcode-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 32rpx 32rpx 16rpx;
|
||
|
|
border-bottom: 1px solid #f5f5f5;
|
||
|
|
|
||
|
|
.qrcode-title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qrcode-close {
|
||
|
|
width: 60rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
color: #999;
|
||
|
|
transition: all 0.3s;
|
||
|
|
|
||
|
|
&:active {
|
||
|
|
background-color: #e8e8e8;
|
||
|
|
transform: scale(0.95);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qrcode-content {
|
||
|
|
padding: 32rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.qrcode-image-container {
|
||
|
|
width: 400rpx;
|
||
|
|
height: 400rpx;
|
||
|
|
padding: 20rpx;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
||
|
|
margin-bottom: 32rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
.qrcode-image {
|
||
|
|
width: 360rpx;
|
||
|
|
height: 360rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.qrcode-info {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
.qrcode-desc {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #666;
|
||
|
|
margin-bottom: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qrcode-user {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 20rpx;
|
||
|
|
background-color: #f9f9f9;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
|
||
|
|
.user-name {
|
||
|
|
margin-left: 16rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 基础样式 */
|
||
|
|
.profile-container {
|
||
|
|
overflow-y: auto;
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
||
|
|
|
||
|
|
.user-info-section{
|
||
|
|
background: #ffffff;
|
||
|
|
|
||
|
|
.avatar-wrapper{
|
||
|
|
padding: 15px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.user-details{
|
||
|
|
margin-left: 16px;
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.username{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-card-number{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-right{
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-bottom{
|
||
|
|
padding: 0 9px 15px 9px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-container{
|
||
|
|
padding: 12px;
|
||
|
|
|
||
|
|
.text-right{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #cccccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.body-card-style-radius-padding {
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 16px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
|
||
|
|
.body-card-style-head {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 移除:deep()选择器，直接使用类名 */
|
||
|
|
:deep(.custom-item) {
|
||
|
|
border-radius: 12px;
|
||
|
|
margin: 0 6px;
|
||
|
|
width: calc(100% / 4 - 12px) !important;
|
||
|
|
height: 70px !important;
|
||
|
|
|
||
|
|
.balance{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|