huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

consumer模块完成度95%，优化安卓端界面和小程序测试4

Browse Source
This commit is contained in:
cyh666666
2026-03-17 12:03:57 +08:00
parent b5c7947ad8
commit c3d2be354e
2083 changed files with 1110 additions and 44315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/main/cart.uvue
View File

@@ -3,7 +3,7 @@
<view class="cart-page">
<!-- 智能顶部导航栏 - 与消息页保持一致 -->
<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-container" :style="{ paddingRight: navBarRight + 'px' }">
<view class="nav-container" :style="{ paddingRight: (navBarRight > 0 ? navBarRight : 16) + 'px' }">
<text class="nav-title">购物车</text>
<view class="nav-actions">
<view class="action-btn" @click="toggleManageMode">

2
pages/main/category.uvue
View File

@@ -2,7 +2,7 @@
<view class="category-page">
<!-- 顶部搜索栏 -->
<view class="search-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="search-container" :style="{ paddingRight: navBarRight + 'px' }">
<view class="search-container" :style="{ paddingRight: (navBarRight > 0 ? navBarRight : 16) + 'px' }">
<view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
<!-- 模拟输入框 -->
<text class="search-placeholder">请输入商品名称、店铺</text>

4
pages/main/index.uvue
View File

@@ -9,7 +9,7 @@
transform: showNavbar ? 'translateY(0)' : 'translateY(-100%)'
}"
>
<view class="search-container" :style="{ paddingRight: navBarRight + 'px' }">
<view class="search-container" :style="{ paddingRight: (navBarRight > 0 ? navBarRight : 16) + 'px' }">
<view class="search-box" @click="navigateToSearch" :style="{ height: '30px' }">
<!-- 模拟输入框 -->
<text class="search-placeholder">请输入商品名称、店铺</text>
@@ -1146,7 +1146,7 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
}
.nav-inner-search-text {
font-size: 12px; /* 字体稍微变小 */
font-size: 12px;
color: #ffffff;
font-weight: normal;
}

33
pages/main/messages.uvue
View File

@@ -2,7 +2,7 @@
<view class="messages-page">
<!-- 智能顶部导航栏 - 与主页保持一致 -->
<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-container">
<view class="nav-container" :style="{ paddingRight: (navBarRight > 0 ? navBarRight : 16) + 'px' }">
<text class="nav-title">消息中心</text>
<view class="nav-actions">
<view class="action-btn" @click="clearAllUnread">
@@ -263,6 +263,20 @@ const unreadCount = ref<number>(12)
const statusBarHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
const navBarRight = ref(0)
// 小程序胶囊按钮信息类型
type CapsuleButtonInfo = {
left: number,
top: number,
right: number,
bottom: number,
width: number,
height: number
}
// 小程序胶囊按钮信息
const capsuleButtonInfo = ref<CapsuleButtonInfo | null>(null)
// 消息分类标签
const messageTabs = reactive<MessageTab[]>([
@@ -339,6 +353,23 @@ const initPage = () => {
const systemInfo = uni.getSystemInfoSync()
statusBarHeight.value = systemInfo.statusBarHeight
// 获取小程序胶囊按钮信息
// #ifdef MP-WEIXIN
try {
capsuleButtonInfo.value = uni.getMenuButtonBoundingClientRect()
if (capsuleButtonInfo.value != null) {
navBarRight.value = (systemInfo.screenWidth - capsuleButtonInfo.value.left) + 10
}
} catch (e) {
console.log('获取胶囊按钮信息失败', e)
navBarRight.value = 90
}
// #endif
// #ifndef MP-WEIXIN
navBarRight.value = 0
// #endif
const windowHeight = systemInfo.windowHeight
scrollHeight.value = windowHeight - statusBarHeight.value - 44 - 42
}

27
pages/main/profile.uvue
View File

@@ -3,7 +3,7 @@
<view class="consumer-profile">
<!-- 智能顶部导航栏 - 与消息页保持一致 -->
<view class="smart-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-container">
<view class="nav-container" :style="{ paddingRight: (navBarRight > 0 ? navBarRight : 16) + 'px' }">
<!-- 基础用户信息：头像和昵称 -->
<view class="nav-user-basic" @click="editProfile">
<image
@@ -14,7 +14,7 @@
</view>
<!-- 用户资产横向排列 (积分、余额、优惠券) -->
<view class="nav-user-stats" :style="{ marginRight: navBarRight + 'px' }">
<view class="nav-user-stats">
<view class="nav-stat-item" @click="goToPoints">
<text class="nav-stat-label">积分</text>
<text class="nav-stat-value">{{ userStats.points }}</text>
@@ -31,12 +31,14 @@
</view>
</view>
<!-- 设置按钮 (最右侧) -->
<!-- #ifndef MP-WEIXIN -->
<!-- 设置按钮 (安卓端和电脑端显示，小程序不显示) -->
<view class="nav-actions">
<view class="action-btn" @click="goToSettings">
<text class="action-icon">⚙️</text>
</view>
</view>
<!-- #endif -->
</view>
</view>
@@ -48,6 +50,11 @@
<view class="my-services" style="margin-top: 10px;">
<view class="section-title">我的服务</view>
<view class="service-grid">
<view class="service-item" @click="goToMessages">
<text class="service-icon">💬</text>
<text class="service-text">消息中心</text>
<text v-if="serviceCounts.unreadMessages > 0" class="service-badge">{{ serviceCounts.unreadMessages }}</text>
</view>
<view class="service-item" @click="goToCoupons">
<text class="service-icon">🎫</text>
<text class="service-text">优惠券</text>
@@ -301,6 +308,7 @@ type OrderCountsType = {
type ServiceCountsType = {
coupons: number
favorites: number
unreadMessages: number
}
type ConsumptionStatsType = {
@@ -354,7 +362,8 @@ export default {
} as OrderCountsType,
serviceCounts: {
coupons: 0,
favorites: 0
favorites: 0,
unreadMessages: 0
} as ServiceCountsType,
recentOrders: [] as Array<OrderItemType>,
statsPeriods: [
@@ -543,6 +552,10 @@ export default {
this.navBarRight = 90
}
// #endif
// #ifndef MP-WEIXIN
this.navBarRight = 0
// #endif
},
async loadUserProfile() {
try {
@@ -1166,6 +1179,12 @@ export default {
url: '/pages/mall/consumer/coupons'
})
},
goToMessages() {
uni.navigateTo({
url: '/pages/main/messages'
})
},
goToPoints() {
uni.navigateTo({

314
pages/mall/consumer/product-detail.uvue
View File

@@ -38,7 +38,13 @@
</view>
</view>
<text class="product-name">{{ product.name }}</text>
<view class="product-name-row">
<text class="product-name">{{ product.name }}</text>
<view class="share-btn" @click="showSharePopup">
<text class="share-icon">📤</text>
<text class="share-text">分享</text>
</view>
</view>
<text class="sales-info">已售{{ product.sales }}件 · 库存{{ product.stock }}件</text>
</view>
@@ -277,6 +283,61 @@
</view>
</view>
<!-- 分享弹窗 -->
<view v-if="showShare" class="share-popup-mask" @click="hideSharePopup">
<view class="share-popup-content" @click.stop>
<view class="share-popup-header">
<text class="share-popup-title">分享至</text>
<text class="close-btn" @click="hideSharePopup">×</text>
</view>
<!-- 分享选项 -->
<view class="share-options">
<view class="share-option" @click="shareToWechat">
<view class="share-icon-wrapper wechat">
<text class="share-option-icon">💬</text>
</view>
<text class="share-option-text">微信好友</text>
</view>
<view class="share-option" @click="shareToMoments">
<view class="share-icon-wrapper moments">
<text class="share-option-icon">🔄</text>
</view>
<text class="share-option-text">朋友圈</text>
</view>
<view class="share-option" @click="shareToQQ">
<view class="share-icon-wrapper qq">
<text class="share-option-icon">🐧</text>
</view>
<text class="share-option-text">QQ</text>
</view>
<view class="share-option" @click="copyLink">
<view class="share-icon-wrapper link">
<text class="share-option-icon">🔗</text>
</view>
<text class="share-option-text">复制链接</text>
</view>
<view class="share-option" @click="saveImage">
<view class="share-icon-wrapper image">
<text class="share-option-icon">🖼️</text>
</view>
<text class="share-option-text">保存图片</text>
</view>
<view class="share-option" @click="generatePoster">
<view class="share-icon-wrapper poster">
<text class="share-option-icon">📋</text>
</view>
<text class="share-option-text">生成海报</text>
</view>
</view>
<!-- 取消按钮 -->
<view class="share-cancel-btn" @click="hideSharePopup">
<text class="cancel-text">取消</text>
</view>
</view>
</view>
</view>
</template>
@@ -326,6 +387,8 @@ export default {
// 新增: 优惠券相关
coupons: [] as Array<CouponTemplateType>,
showCoupons: false,
// 分享相关
showShare: false,
// 会员价相关
memberPrice: 0 as number,
memberDiscount: 0 as number,
@@ -1007,6 +1070,114 @@ export default {
if (this.product.approval_number != null && (this.product.approval_number as string) != '') summary += '批准文号 '
const finalSummary = summary.trim()
return finalSummary != '' ? finalSummary : '查看详情'
},
// 分享相关方法
showSharePopup() {
this.showShare = true
},
hideSharePopup() {
this.showShare = false
},
shareToWechat() {
this.hideSharePopup()
// #ifdef MP-WEIXIN
// 小程序分享
uni.share({
provider: 'weixin',
scene: 'WXSceneSession',
type: 0,
title: this.product.name,
summary: `¥${this.product.price} - ${this.product.description ?? '精选好物'}`,
imageUrl: this.product.images.length > 0 ? this.product.images[0] : '',
success: () => {
uni.showToast({ title: '分享成功', icon: 'success' })
},
fail: (err) => {
console.error('分享失败', err)
uni.showToast({ title: '分享失败', icon: 'none' })
}
})
// #endif
// #ifndef MP-WEIXIN
uni.showToast({ title: '请在微信中打开分享', icon: 'none' })
// #endif
},
shareToMoments() {
this.hideSharePopup()
// #ifdef MP-WEIXIN
uni.share({
provider: 'weixin',
scene: 'WXSceneTimeline',
type: 0,
title: this.product.name,
summary: `¥${this.product.price} - ${this.product.description ?? '精选好物'}`,
imageUrl: this.product.images.length > 0 ? this.product.images[0] : '',
success: () => {
uni.showToast({ title: '分享成功', icon: 'success' })
},
fail: (err) => {
console.error('分享失败', err)
uni.showToast({ title: '分享失败', icon: 'none' })
}
})
// #endif
// #ifndef MP-WEIXIN
uni.showToast({ title: '请在微信中打开分享', icon: 'none' })
// #endif
},
shareToQQ() {
this.hideSharePopup()
uni.showToast({ title: 'QQ分享开发中', icon: 'none' })
},
copyLink() {
this.hideSharePopup()
const shareLink = `pages/mall/consumer/product-detail?id=${this.product.id}`
uni.setClipboardData({
data: shareLink,
success: () => {
uni.showToast({ title: '链接已复制', icon: 'success' })
}
})
},
saveImage() {
this.hideSharePopup()
if (this.product.images.length > 0) {
uni.showLoading({ title: '保存中...' })
uni.downloadFile({
url: this.product.images[0],
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.hideLoading()
uni.showToast({ title: '已保存到相册', icon: 'success' })
},
fail: () => {
uni.hideLoading()
uni.showToast({ title: '保存失败', icon: 'none' })
}
})
},
fail: () => {
uni.hideLoading()
uni.showToast({ title: '下载失败', icon: 'none' })
}
})
} else {
uni.showToast({ title: '暂无图片可保存', icon: 'none' })
}
},
generatePoster() {
this.hideSharePopup()
uni.showToast({ title: '海报生成功能开发中', icon: 'none' })
}
}
}
@@ -1193,9 +1364,38 @@ export default {
font-weight: bold;
color: #333;
line-height: 1.4;
flex: 1;
}
.product-name-row {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 15rpx;
}
.share-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 8rpx 16rpx;
background-color: #f8f8f8;
border-radius: 12rpx;
flex-shrink: 0;
margin-left: 20rpx;
}
.share-icon {
font-size: 32rpx;
}
.share-text {
font-size: 22rpx;
color: #666;
margin-top: 4rpx;
}
.sales-info {
font-size: 26rpx;
color: #666;
@@ -1822,6 +2022,118 @@ export default {
margin-left: 10rpx;
}
/* 分享弹窗样式 */
.share-popup-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: flex-end;
flex-direction: column;
z-index: 1000;
}
.share-popup-content{
background-color: #fff;
width: 100%;
border-radius: 24rpx 24rpx 0 0;
padding: 30rpx;
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.share-popup-header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.share-popup-title{
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.share-options{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 20rpx 0;
}
.share-option{
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30rpx;
}
.share-icon-wrapper{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
}
.share-icon-wrapper.wechat{
background-color: #07C160;
}
.share-icon-wrapper.moments{
background-color: #07C160;
}
.share-icon-wrapper.qq{
background-color: #12B7F5;
}
.share-icon-wrapper.link{
background-color: #FF9500;
}
.share-icon-wrapper.image{
background-color: #FF2D55;
}
.share-icon-wrapper.poster{
background-color: #5856D6;
}
.share-option-icon{
font-size: 44rpx;
color: #fff;
}
.share-option-text{
font-size: 24rpx;
color: #333;
}
.share-cancel-btn{
width: 100%;
height: 88rpx;
background-color: #f5f5f5;
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}
.cancel-text{
font-size: 30rpx;
color: #333;
}
/* 商品参数弹窗样式 */
.params-modal {
position: fixed;