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

完善医疗项目页面

Browse Source
This commit is contained in:
huangzhenbao
2026-04-10 10:02:10 +08:00
parent 3304b98bee
commit d5bd898896
186 changed files with 1059 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

392
pages/mall/merchant/reviews.uvue
View File

@@ -100,7 +100,12 @@
},
onLoad() {
this.initMerchantId()
// 同步设置 merchantId，不用 async 包裹，避免 generator 内 this 绑定异常
try {
const session = supa.getSession()
this.merchantId = session?.user?.getString('id') || uni.getStorageSync('user_id') || ''
} catch (e) {}
this.loadReviews()
},
onShow() {
@@ -108,17 +113,10 @@
},
methods: {
async initMerchantId() {
try {
const session = supa.getSession()
this.merchantId = session?.user?.getString('id') || uni.getStorageSync('user_id') || ''
} catch (e) {}
},
async loadReviews() {
if (!this.merchantId || this.merchantId.split('-').length !== 5) return
if (this.loading) return
this.loading = true
try {
let query = supa
.from('ml_product_reviews')
@@ -127,7 +125,6 @@
.order('created_at', { ascending: false })
.page(this.page)
.limit(this.limit)
const response = await query.execute()
if (response.error != null || !response.data) {
@@ -186,7 +183,8 @@
if (!this.loadingMore && this.hasMore) {
this.loadingMore = true
this.page++
this.loadReviews().then(() => { this.loadingMore = false })
const resetMore = () => { this.loadingMore = false }
this.loadReviews().then(resetMore).catch(resetMore)
}
},
@@ -253,44 +251,334 @@
</script>
<style>
.reviews-page { background-color: #f5f5f5; min-height: 100vh; }
.filter-tabs { display: flex; flex-direction: row; background-color: #fff; padding: 0 20rpx; margin-bottom: 20rpx; }
.filter-tab { flex: 1; text-align: center; padding: 24rpx 0; font-size: 26rpx; color: #666; position: relative; }
.filter-tab.active { color: rgb(66, 121, 240); font-weight: bold; }
.filter-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40rpx; height: 4rpx; background-color: rgb(66, 121, 240); border-radius: 2rpx; }
.reviews-list { padding: 0 20rpx; height: calc(100vh - 120rpx); }
.loading-container, .empty-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 0; }
.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
.empty-text, .loading-text { font-size: 28rpx; color: #999; }
.review-card { background-color: #fff; border-radius: 16rpx; margin-bottom: 20rpx; padding: 24rpx; }
.review-header { display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx; }
.user-avatar { width: 70rpx; height: 70rpx; border-radius: 50%; margin-right: 16rpx; background-color: #f5f5f5; }
.user-info { flex: 1; }
.user-name { font-size: 26rpx; color: #333; font-weight: 500; display: block; margin-bottom: 8rpx; }
.rating { display: flex; flex-direction: row; }
.star { font-size: 22rpx; color: #ddd; margin-right: 4rpx; }
.star.filled { color: #FFB800; }
.review-time { font-size: 22rpx; color: #999; }
.review-product { font-size: 24rpx; color: #666; margin-bottom: 12rpx; }
.review-content { font-size: 26rpx; color: #333; line-height: 1.5; margin-bottom: 16rpx; }
.review-images { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12rpx; margin-bottom: 16rpx; }
.review-image { width: 120rpx; height: 120rpx; border-radius: 8rpx; }
.review-reply { background-color: #f5f5f5; padding: 16rpx; border-radius: 8rpx; margin-top: 16rpx; }
.reply-label { font-size: 24rpx; color: rgb(66, 121, 240); font-weight: 500; display: block; margin-bottom: 8rpx; }
.reply-content { font-size: 24rpx; color: #666; }
.review-actions { margin-top: 16rpx; text-align: right; }
.action-btn { display: inline-block; padding: 12rpx 24rpx; font-size: 24rpx; background-color: #E3F2FD; color: rgb(66, 121, 240); border-radius: 24rpx; }
.load-more { padding: 30rpx 0; text-align: center; }
.load-more-text { font-size: 24rpx; color: #999; }
.modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 1000; }
.modal-content { width: 100%; background-color: #fff; border-radius: 24rpx 24rpx 0 0; padding-bottom: env(safe-area-inset-bottom); }
.modal-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 30rpx; border-bottom: 1rpx solid #f5f5f5; }
.modal-title { font-size: 32rpx; font-weight: bold; color: #333; }
.modal-close { font-size: 44rpx; color: #999; }
.modal-body { padding: 30rpx; }
.reply-input { width: 100%; height: 200rpx; border: 1rpx solid #e5e5e5; border-radius: 8rpx; padding: 20rpx; font-size: 28rpx; box-sizing: border-box; }
.modal-footer { display: flex; flex-direction: row; border-top: 1rpx solid #f5f5f5; }
.modal-btn { flex: 1; height: 88rpx; line-height: 88rpx; text-align: center; font-size: 28rpx; }
.modal-btn.cancel { color: #666; border-right: 1rpx solid #f5f5f5; }
.modal-btn.confirm { color: rgb(66, 121, 240); font-weight: bold; }
</style>
.reviews-page {
display: flex;
flex-direction: column;
background-color: #f5f5f5;
min-height: 100vh;
box-sizing: border-box;
}
.filter-tabs {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
padding: 0 20rpx;
margin-bottom: 20rpx;
border-bottom: 1rpx solid #f2f2f2;
box-sizing: border-box;
}
.filter-tab {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 88rpx;
font-size: 26rpx;
color: #666666;
position: relative;
box-sizing: border-box;
}
.filter-tab.active {
color: rgb(66, 121, 240);
font-weight: bold;
}
.filter-tab.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 44rpx;
height: 4rpx;
background-color: rgb(66, 121, 240);
border-radius: 2rpx;
}
.reviews-list {
flex: 1;
height: calc(100vh - 176rpx);
padding: 0 20rpx 20rpx;
box-sizing: border-box;
}
.loading-container,
.empty-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 0;
box-sizing: border-box;
}
.empty-icon {
font-size: 100rpx;
line-height: 1;
margin-bottom: 20rpx;
}
.empty-text,
.loading-text {
font-size: 28rpx;
color: #999999;
line-height: 1.4;
}
.review-card {
background-color: #ffffff;
border-radius: 16rpx;
margin-bottom: 20rpx;
padding: 24rpx;
box-sizing: border-box;
}
.review-header {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
box-sizing: border-box;
}
.user-avatar {
width: 72rpx;
height: 72rpx;
border-radius: 36rpx;
margin-right: 16rpx;
background-color: #f5f5f5;
flex-shrink: 0;
}
.user-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
.user-name {
font-size: 26rpx;
color: #333333;
font-weight: 500;
line-height: 1.4;
margin-bottom: 8rpx;
}
.rating {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
}
.star {
font-size: 22rpx;
line-height: 1;
color: #dddddd;
margin-right: 4rpx;
}
.star.filled {
color: #ffb800;
}
.review-time {
margin-left: 16rpx;
font-size: 22rpx;
color: #999999;
line-height: 1.4;
text-align: right;
flex-shrink: 0;
}
.review-product {
margin-bottom: 12rpx;
}
.product-name {
font-size: 24rpx;
color: #666666;
line-height: 1.4;
}
.review-content {
font-size: 26rpx;
color: #333333;
line-height: 1.6;
margin-bottom: 16rpx;
}
.review-images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 16rpx;
}
.review-image {
width: 120rpx;
height: 120rpx;
border-radius: 8rpx;
margin-right: 12rpx;
margin-bottom: 12rpx;
background-color: #f5f5f5;
}
.review-reply {
display: flex;
flex-direction: column;
background-color: #f7f8fa;
padding: 18rpx 20rpx;
border-radius: 10rpx;
margin-top: 16rpx;
box-sizing: border-box;
}
.reply-label {
font-size: 24rpx;
color: rgb(66, 121, 240);
font-weight: 500;
line-height: 1.4;
margin-bottom: 8rpx;
}
.reply-content {
font-size: 24rpx;
color: #666666;
line-height: 1.6;
}
.review-actions {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-top: 16rpx;
}
.action-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12rpx 24rpx;
font-size: 24rpx;
line-height: 1.4;
background-color: #e8f0fe;
color: rgb(66, 121, 240);
border-radius: 24rpx;
box-sizing: border-box;
}
.load-more {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 30rpx 0;
}
.load-more-text {
font-size: 24rpx;
color: #999999;
line-height: 1.4;
}
.modal-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
z-index: 1000;
}
.modal-content {
width: 100%;
background-color: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
}
.modal-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 30rpx;
border-bottom: 1rpx solid #f2f2f2;
box-sizing: border-box;
}
.modal-title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 1.4;
}
.modal-close {
font-size: 44rpx;
color: #999999;
line-height: 1;
}
.modal-body {
padding: 30rpx;
box-sizing: border-box;
}
.reply-input {
width: 100%;
height: 220rpx;
border: 1rpx solid #e5e5e5;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
line-height: 1.6;
box-sizing: border-box;
background-color: #ffffff;
}
.modal-footer {
display: flex;
flex-direction: row;
align-items: center;
border-top: 1rpx solid #f2f2f2;
}
.modal-btn {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 88rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.modal-btn.cancel {
color: #666666;
border-right: 1rpx solid #f2f2f2;
}
.modal-btn.confirm {
color: rgb(66, 121, 240);
font-weight: bold;
}
</style>