Skip to content

飞
飞鹤小程序
Commit f59c101f authored by tao.huang's avatar tao.huang
Browse files
Options

Merge branch '20250528-dev-ht' of gitlab2.dui88.com:sparkprojects/20250528_FHQ1 into dev

parents 51fc5054 0c78a851
Hide whitespace changes
Inline Side-by-side
Showing with 422 additions and 302 deletions
components/My.vue
View file @ f59c101f
<template>
<view class="my-container">
<!-- 用户信息区域 -->
<view class="user-info">
<view class="user-header">
<image class="avatar" :src="userInfo.avatar || '/static/my/avatar.png'" mode="aspectFill" />
<view class="user-detail">
<text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
<view class="user-level">
<image class="level-icon" src="/static/my/level.png" mode="aspectFit" />
<text class="level-text">Lv.{{ userInfo.level || 1 }}</text>
</view>
</view>
<view class="edit-btn" @tap="handleEditProfile">
<image src="/static/my/edit.png" mode="aspectFit" />
</view>
</view>
</view>
</view>
<view class="my-container">
<view class="bg-container">
<image
class="bg-img"
src="/static/my/cover_white_bg.png"
mode="aspectFit"
lazy-load="false"
binderror=""
bindload=""
/>
</view>
<!-- 用户信息区域 -->
<view class="user-info">
<view class="user-header">
<image
class="avatar"
:src="userInfo.avatar || '/static/my/avatar.png'"
mode="aspectFill"
/>
<view class="user-detail">
<text class="nickname">{{ userInfo.nickname || "未登录" }}</text>
<view class="user-level">
<image
class="level-icon"
src="/static/my/level.png"
mode="aspectFit"
/>
<text class="level-text">Lv.{{ userInfo.level || 1 }}</text>
</view>
</view>
<view class="edit-btn" @tap="handleEditProfile">
<image src="/static/my/edit.png" mode="aspectFit" />
</view>
</view>
<!-- user desc -->
<view class="user-desc">
<text class="desc-text"> </text>
</view>
</view>
<!-- 工具 -->
<view class="tool-container">
<text class="tool-title" selectable="false" space="false" decode="false">
工具
</text>
<view class="tool-list">
<view class="tool-item" v-for="item in toolList" :key="item.title">
<image class="tool-icon" :src="item.icon" mode="aspectFit" />
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted } from "vue";
const toolList = ref([
{
icon: "/static/my/code.png",
title: "扫码积分",
url: "",
},
{
icon: "/static/my/suyuan.png",
title: "产品溯源",
url: "",
},
{
icon: "/static/my/book.png",
title: "奶娃宝典",
url: "",
},
{
icon: "/static/my/doctor.png",
title: "医生问诊",
url: "",
},
{
icon: "/static/my/literature.png",
title: "育儿百科",
url: "",
},
]);
// 用户信息
const userInfo = ref({
avatar: '',
nickname: '',
level: 1,
points: 0,
coupons: 0,
collects: 0
})
avatar: "",
nickname: "",
level: 1,
points: 0,
coupons: 0,
collects: 0,
});
// 订单数量统计
const orderCounts = ref({
pending: 0,
shipping: 0,
receiving: 0,
comment: 0,
after: 0
})
pending: 0,
shipping: 0,
receiving: 0,
comment: 0,
after: 0,
});
// 页面跳转
const navigateTo = (url) => {
uni.navigateTo({
url,
fail: (err) => {
console.error('页面跳转失败:', err)
uni.showToast({
title: '页面跳转失败',
icon: 'none'
})
}
})
}
uni.navigateTo({
url,
fail: (err) => {
console.error("页面跳转失败:", err);
uni.showToast({
title: "页面跳转失败",
icon: "none",
});
},
});
};
// 编辑个人资料
const handleEditProfile = () => {
navigateTo('/pages/user/profile')
}
navigateTo("/pages/user/profile");
};
// 联系客服
const handleContactService = () => {
// #ifdef MP-WEIXIN
uni.openCustomerServiceChat({
extInfo: { url: 'YOUR_CUSTOMER_SERVICE_URL' },
corpId: 'YOUR_CORP_ID',
success(res) {
console.log('打开客服会话成功')
},
fail(err) {
console.error('打开客服会话失败:', err)
uni.showToast({
title: '打开客服会话失败',
icon: 'none'
})
}
})
// #endif
// #ifdef H5
window.open('YOUR_CUSTOMER_SERVICE_URL', '_blank')
// #endif
}
// #ifdef MP-WEIXIN
uni.openCustomerServiceChat({
extInfo: { url: "YOUR_CUSTOMER_SERVICE_URL" },
corpId: "YOUR_CORP_ID",
success(res) {
console.log("打开客服会话成功");
},
fail(err) {
console.error("打开客服会话失败:", err);
uni.showToast({
title: "打开客服会话失败",
icon: "none",
});
},
});
// #endif
// #ifdef H5
window.open("YOUR_CUSTOMER_SERVICE_URL", "_blank");
// #endif
};
// 获取用户信息
const getUserInfo = async () => {
try {
// TODO: 调用获取用户信息接口
const res = await uni.request({
url: '/api/user/info',
method: 'GET'
})
if (res.data.code === 0) {
userInfo.value = res.data.data
}
} catch (error) {
console.error('获取用户信息失败:', error)
uni.showToast({
title: '获取用户信息失败',
icon: 'none'
})
}
}
try {
// TODO: 调用获取用户信息接口
const res = await uni.request({
url: "/api/user/info",
method: "GET",
});
if (res.data.code === 0) {
userInfo.value = res.data.data;
}
} catch (error) {
console.error("获取用户信息失败:", error);
uni.showToast({
title: "获取用户信息失败",
icon: "none",
});
}
};
// 获取订单数量
const getOrderCounts = async () => {
try {
// TODO: 调用获取订单数量接口
const res = await uni.request({
url: '/api/order/counts',
method: 'GET'
})
if (res.data.code === 0) {
orderCounts.value = res.data.data
}
} catch (error) {
console.error('获取订单数量失败:', error)
}
}
// 下拉刷新
const onPullDownRefresh = async () => {
return
try {
await Promise.all([
getUserInfo(),
getOrderCounts()
])
uni.stopPullDownRefresh()
} catch (error) {
console.error('刷新数据失败:', error)
uni.stopPullDownRefresh()
}
}
try {
// TODO: 调用获取订单数量接口
const res = await uni.request({
url: "/api/order/counts",
method: "GET",
});
if (res.data.code === 0) {
orderCounts.value = res.data.data;
}
} catch (error) {
console.error("获取订单数量失败:", error);
}
};
// 页面加载
onMounted(() => {
// getUserInfo()
// getOrderCounts()
})
// getUserInfo()
// getOrderCounts()
});
// 定义页面配置
defineExpose({
onPullDownRefresh
})
defineExpose({});
</script>
<style lang="scss" scoped>
.my-container {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 100rpx;
.user-info {
background-color: #fff;
padding: 40rpx 30rpx;
margin-bottom: 20rpx;
.user-header {
display: flex;
align-items: center;
margin-bottom: 40rpx;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 20rpx;
}
.user-detail {
flex: 1;
.nickname {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 10rpx;
}
.user-level {
display: flex;
align-items: center;
.level-icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.level-text {
font-size: 24rpx;
color: #666;
}
}
}
.edit-btn {
image {
width: 40rpx;
height: 40rpx;
}
}
}
.user-stats {
display: flex;
justify-content: space-around;
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
.num {
font-size: 36rpx;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
}
.label {
font-size: 24rpx;
color: #666;
}
}
}
}
.my-container {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 100rpx;
overflow: hidden;
.bg-container {
width: 750rpx;
height: 840rpx;
position: absolute;
top: 0;
left: 0;
z-index: 0;
.bg-img {
width: 100%;
height: 100%;
display: block;
}
}
.user-info {
background-color: #fef7f2;
padding: 30rpx;
width: 686rpx;
height: 343rpx;
box-sizing: border-box;
border-radius: 32rpx;
position: relative;
margin: 0 auto;
margin-top: 676rpx;
.user-header {
display: flex;
align-items: center;
margin-bottom: 40rpx;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 20rpx;
}
.user-detail {
flex: 1;
.nickname {
font-size: 32rpx;
font-weight: 500;
color: #333;
margin-bottom: 10rpx;
}
.user-level {
display: flex;
align-items: center;
.level-icon {
width: 32rpx;
height: 32rpx;
margin-right: 8rpx;
}
.level-text {
font-size: 24rpx;
color: #666;
}
}
}
.edit-btn {
image {
width: 40rpx;
height: 40rpx;
}
}
}
.user-stats {
display: flex;
justify-content: space-around;
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
.num {
font-size: 36rpx;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
}
.label {
font-size: 24rpx;
color: #666;
}
}
}
.user-desc {
width: 100%;
height: 182rpx;
background-color: #fff;
border-radius: 32rpx;
padding: 30rpx 32rpx;
box-sizing: border-box;
position: absolute;
bottom: 0;
left: 0;
}
}
.tool-container {
margin: 0 auto;
margin-top: 48rpx;
width: 686rpx;
.tool-list {
display: flex;
flex-wrap: wrap;
margin: 32rpx 0;
}
.order-section {
background-color: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.more {
display: flex;
align-items: center;
text {
font-size: 24rpx;
color: #666;
margin-right: 8rpx;
}
image {
width: 32rpx;
height: 32rpx;
}
}
}
.order-types {
display: flex;
justify-content: space-between;
.type-item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
margin-bottom: 12rpx;
}
text {
font-size: 24rpx;
color: #666;
}
}
}
}
.tool-title {
font-size: 32rpx;
font-weight: 500;
color: #1d1e25;
margin-left: 21rpx;
}
.function-list {
background-color: #fff;
padding: 0 30rpx;
.function-item {
display: flex;
align-items: center;
height: 100rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
&.arrow {
width: 32rpx;
height: 32rpx;
margin-right: 0;
margin-left: auto;
}
}
text {
font-size: 28rpx;
color: #333;
}
}
.tool-item {
width: 152rpx;
height: 152rpx;
margin-left: 26rpx;
margin-bottom: 24rpx;
.tool-icon {
width: 100%;
height: 100%;
display: block;
};
&:nth-child(4n+1) {
margin-left: 0;
}
}
}
.order-section {
background-color: #fff;
padding: 30rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.title {
font-size: 32rpx;
font-weight: 500;
color: #333;
}
.more {
display: flex;
align-items: center;
text {
font-size: 24rpx;
color: #666;
margin-right: 8rpx;
}
image {
width: 32rpx;
height: 32rpx;
}
}
}
.order-types {
display: flex;
justify-content: space-between;
.type-item {
display: flex;
flex-direction: column;
align-items: center;
image {
width: 48rpx;
height: 48rpx;
margin-bottom: 12rpx;
}
text {
font-size: 24rpx;
color: #666;
}
}
}
}
.function-list {
background-color: #fff;
padding: 0 30rpx;
.function-item {
display: flex;
align-items: center;
height: 100rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
&.arrow {
width: 32rpx;
height: 32rpx;
margin-right: 0;
margin-left: auto;
}
}
text {
font-size: 28rpx;
color: #333;
}
}
}
}
.badge {
position: absolute;
top: -8rpx;
right: -8rpx;
background-color: #ff4d4f;
color: #fff;
font-size: 20rpx;
padding: 2rpx 8rpx;
border-radius: 16rpx;
min-width: 32rpx;
text-align: center;
}
.badge {
position: absolute;
top: -8rpx;
right: -8rpx;
background-color: #ff4d4f;
color: #fff;
font-size: 20rpx;
padding: 2rpx 8rpx;
border-radius: 16rpx;
min-width: 32rpx;
text-align: center;
}
.type-item {
position: relative;
}
.type-item {
position: relative;
}
</style>
components/TabBar.vue
View file @ f59c101f
......@@ -47,11 +47,15 @@ const props = defineProps({
},
],
},
curTabIndex: {
type: Number,
default: 0,
},
});
const emit = defineEmits(["tabClick"]);
const currentIndex = ref(0);
const currentIndex = ref(props.curTabIndex);
const handleTabClick = (index, item) => {
currentIndex.value = index;
......
pages/index/index.vue
View file @ f59c101f
......@@ -4,7 +4,7 @@
<Brand v-if="curTabIndex == 1"></Brand>
<Integral v-if="curTabIndex == 2"></Integral>
<My v-if="curTabIndex == 3"></My>
<TabBar @tabClick="handleTabClick" />
<TabBar :curTabIndex="curTabIndex" @tabClick="handleTabClick" />
</view>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment