weewe
This commit is contained in:
@zuopngfei
parent
26563409c9
commit
72284c0ba7
@ -50,6 +50,16 @@
|
|||||||
<text class="product-price">¥{{ formatPrice(item.price) }}</text>
|
<text class="product-price">¥{{ formatPrice(item.price) }}</text>
|
||||||
<text class="product-qty">x{{ item.quantity }}</text>
|
<text class="product-qty">x{{ item.quantity }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="product-actions" v-if="canReview">
|
||||||
|
<button
|
||||||
|
class="review-btn"
|
||||||
|
size="mini"
|
||||||
|
:disabled="item.reviewed"
|
||||||
|
@tap.stop="openReviewModal(item)"
|
||||||
|
>
|
||||||
|
{{ item.reviewed ? '已评价' : '去评价' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -120,6 +130,41 @@
|
|||||||
<text class="placeholder-text">正在加载订单详情...</text>
|
<text class="placeholder-text">正在加载订单详情...</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view v-if="showReviewModal" class="review-modal">
|
||||||
|
<view class="modal-mask" @tap="closeReviewModal"></view>
|
||||||
|
<view class="modal-content">
|
||||||
|
<view class="modal-header">
|
||||||
|
<text>评价商品</text>
|
||||||
|
<text class="modal-subtitle">{{ currentProduct ? currentProduct.name : '' }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="rating-row">
|
||||||
|
<text class="rating-label">评分</text>
|
||||||
|
<view class="rating-stars">
|
||||||
|
<text
|
||||||
|
v-for="score in 5"
|
||||||
|
:key="score"
|
||||||
|
class="star"
|
||||||
|
:class="{ active: score <= reviewForm.rating }"
|
||||||
|
@tap="setRating(score)"
|
||||||
|
>
|
||||||
|
★
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<textarea
|
||||||
|
class="review-textarea"
|
||||||
|
v-model="reviewForm.comment"
|
||||||
|
maxlength="200"
|
||||||
|
placeholder="分享下本次购物体验吧（最多200字）"
|
||||||
|
placeholder-class="textarea-placeholder"
|
||||||
|
/>
|
||||||
|
<view class="modal-actions">
|
||||||
|
<button class="modal-btn cancel" @tap="closeReviewModal">取消</button>
|
||||||
|
<button class="modal-btn submit" :loading="submittingReview" @tap="submitReview">提交</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -151,7 +196,14 @@ export default {
|
|||||||
orderInfo: null,
|
orderInfo: null,
|
||||||
payCountdown: 0,
|
payCountdown: 0,
|
||||||
countdownTimer: null,
|
countdownTimer: null,
|
||||||
isPaying: false
|
isPaying: false,
|
||||||
|
showReviewModal: false,
|
||||||
|
currentProduct: null,
|
||||||
|
reviewForm: {
|
||||||
|
rating: 5,
|
||||||
|
comment: ''
|
||||||
|
},
|
||||||
|
submittingReview: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -178,6 +230,9 @@ export default {
|
|||||||
if (!this.orderInfo) return 0;
|
if (!this.orderInfo) return 0;
|
||||||
return this.orderInfo.products.reduce((acc, item) => acc + Number(item.quantity || 0), 0);
|
return this.orderInfo.products.reduce((acc, item) => acc + Number(item.quantity || 0), 0);
|
||||||
},
|
},
|
||||||
|
canReview() {
|
||||||
|
return !!this.orderInfo && Number(this.orderInfo.status) === 5;
|
||||||
|
},
|
||||||
shippingStatusText() {
|
shippingStatusText() {
|
||||||
if (!this.orderInfo) return '--';
|
if (!this.orderInfo) return '--';
|
||||||
const code = this.orderInfo.delivery.shippingStatus;
|
const code = this.orderInfo.delivery.shippingStatus;
|
||||||
@ -339,6 +394,8 @@ export default {
|
|||||||
if (!Array.isArray(list)) return [];
|
if (!Array.isArray(list)) return [];
|
||||||
return list.map((item) => ({
|
return list.map((item) => ({
|
||||||
id: item.product_id || item.sku_id || item.product_name,
|
id: item.product_id || item.sku_id || item.product_name,
|
||||||
|
productId: item.product_id || '',
|
||||||
|
skuId: item.sku_id || '',
|
||||||
name: item.product_name || '--',
|
name: item.product_name || '--',
|
||||||
skuName: item.sku_name || '',
|
skuName: item.sku_name || '',
|
||||||
desc: item.product_description || '',
|
desc: item.product_description || '',
|
||||||
@ -346,7 +403,8 @@ export default {
|
|||||||
quantity: item.quantity || 0,
|
quantity: item.quantity || 0,
|
||||||
image: item.product_main_image_url || item.category_image_url || '',
|
image: item.product_main_image_url || item.category_image_url || '',
|
||||||
isHot: Number(item.is_hot_selling) === 1,
|
isHot: Number(item.is_hot_selling) === 1,
|
||||||
isLimited: Number(item.is_limited) === 1
|
isLimited: Number(item.is_limited) === 1,
|
||||||
|
reviewed: Number(item.review_status) === 1
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
formatDeliveryInfo(info = {}) {
|
formatDeliveryInfo(info = {}) {
|
||||||
@ -382,6 +440,63 @@ export default {
|
|||||||
clearInterval(this.countdownTimer);
|
clearInterval(this.countdownTimer);
|
||||||
this.countdownTimer = null;
|
this.countdownTimer = null;
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
openReviewModal(product) {
|
||||||
|
if (!product || product.reviewed) return;
|
||||||
|
this.currentProduct = product;
|
||||||
|
this.reviewForm = {
|
||||||
|
rating: 5,
|
||||||
|
comment: ''
|
||||||
|
};
|
||||||
|
this.showReviewModal = true;
|
||||||
|
},
|
||||||
|
closeReviewModal() {
|
||||||
|
this.showReviewModal = false;
|
||||||
|
this.currentProduct = null;
|
||||||
|
},
|
||||||
|
setRating(score) {
|
||||||
|
const value = Number(score);
|
||||||
|
if (Number.isNaN(value)) return;
|
||||||
|
this.reviewForm.rating = Math.min(5, Math.max(1, value));
|
||||||
|
},
|
||||||
|
async submitReview() {
|
||||||
|
if (!this.orderInfo || !this.currentProduct) return;
|
||||||
|
const rating = Number(this.reviewForm.rating);
|
||||||
|
const comment = (this.reviewForm.comment || '').trim();
|
||||||
|
if (Number.isNaN(rating) || rating < 1 || rating > 5) {
|
||||||
|
uni.showToast({ title: '请选择1-5分评分', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!comment) {
|
||||||
|
uni.showToast({ title: '请输入评价内容', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const payload = {
|
||||||
|
order_id: this.orderInfo.orderNo,
|
||||||
|
product_id: this.currentProduct.productId || this.currentProduct.id,
|
||||||
|
sku_id: this.currentProduct.skuId || '',
|
||||||
|
rating,
|
||||||
|
comment
|
||||||
|
};
|
||||||
|
this.submittingReview = true;
|
||||||
|
try {
|
||||||
|
await request('xcx/order/review', 'post', payload);
|
||||||
|
uni.showToast({ title: '评价成功', icon: 'success' });
|
||||||
|
this.markProductReviewed(this.currentProduct.id);
|
||||||
|
this.closeReviewModal();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('提交评价失败', error);
|
||||||
|
uni.showToast({ title: error.message || '评价失败，请稍后再试', icon: 'none' });
|
||||||
|
} finally {
|
||||||
|
this.submittingReview = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markProductReviewed(productId) {
|
||||||
|
if (!this.orderInfo || !Array.isArray(this.orderInfo.products)) return;
|
||||||
|
const target = this.orderInfo.products.find((item) => item.id === productId);
|
||||||
|
if (target) {
|
||||||
|
this.$set(target, 'reviewed', true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -596,6 +711,27 @@ export default {
|
|||||||
margin-top: 8rpx;
|
margin-top: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-btn {
|
||||||
|
background: #ff6b81;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
border-radius: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-btn[disabled] {
|
||||||
|
background: #e0e0e0;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
.product-price {
|
.product-price {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #d81e06;
|
color: #d81e06;
|
||||||
@ -648,4 +784,116 @@ export default {
|
|||||||
.pay-btn:disabled {
|
.pay-btn:disabled {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
width: 640rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 32rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111;
|
||||||
|
gap: 8rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-subtitle {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-right: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating-stars {
|
||||||
|
display: flex;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star.active {
|
||||||
|
color: #ffb400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 180rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #f6f6f6;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea-placeholder {
|
||||||
|
color: #aaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn {
|
||||||
|
min-width: 160rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
line-height: 72rpx;
|
||||||
|
border-radius: 36rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn.cancel {
|
||||||
|
background: #f0f0f0;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn.submit {
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -212,18 +212,27 @@
|
|||||||
|
|
||||||
<!-- 用户评价 -->
|
<!-- 用户评价 -->
|
||||||
<view class="tab-content" v-if="activeTab === 'review'">
|
<view class="tab-content" v-if="activeTab === 'review'">
|
||||||
<view class="review-list">
|
<view class="review-list" v-if="reviews.length">
|
||||||
<view class="review-item" v-for="(review, index) in reviews" :key="index">
|
<view class="review-item" v-for="(review, index) in reviews" :key="index">
|
||||||
<view class="review-header">
|
<view class="review-header">
|
||||||
<view class="review-user">{{ review.username || '用户' + (index + 1) }}</view>
|
<view class="review-user">{{ review?.user_info?.username || review.username || '用户' + (index + 1) }}</view>
|
||||||
<view class="review-rating">
|
<view class="review-rating">
|
||||||
<text class="iconfont icon-xingxing" v-for="n in review.rating" :key="n"></text>
|
<text class="iconfont icon-xingxing" v-for="n in (review.rating || 0)" :key="n"></text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="review-content">{{ review.content || '商品很不错，香味持久，包装精美！' }}</view>
|
<view class="review-content">{{ review.comment || review.content || '商品很不错，香味持久，包装精美！' }}</view>
|
||||||
<view class="review-time">{{ review.time || '2025-01-15' }}</view>
|
<view class="review-time">{{ review.created_at || review.time || '' }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="review-empty" v-else-if="!isLoadingReviews">
|
||||||
|
暂无评价
|
||||||
|
</view>
|
||||||
|
<view class="review-loading" v-if="isLoadingReviews">
|
||||||
|
加载中...
|
||||||
|
</view>
|
||||||
|
<view class="load-more-reviews" v-if="hasMoreReviews && !isLoadingReviews" @click="loadMoreReviews">
|
||||||
|
查看更多评价
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 服务保障 -->
|
<!-- 服务保障 -->
|
||||||
@ -327,11 +336,11 @@ export default {
|
|||||||
{ label: '保质期', value: '36个月' },
|
{ label: '保质期', value: '36个月' },
|
||||||
{ label: '产地', value: '法国' }
|
{ label: '产地', value: '法国' }
|
||||||
],
|
],
|
||||||
reviews: [
|
reviews: [],
|
||||||
{ username: '用户1', rating: 5, content: '商品很不错，香味持久，包装精美！', time: '2025-01-15' },
|
reviewPage: 1,
|
||||||
{ username: '用户2', rating: 5, content: '非常喜欢这个味道，已经回购了！', time: '2025-01-14' },
|
reviewPageSize: 5,
|
||||||
{ username: '用户3', rating: 4, content: '包装很精美，送人很不错。', time: '2025-01-13' }
|
reviewsTotal: 0,
|
||||||
]
|
isLoadingReviews: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -359,6 +368,9 @@ export default {
|
|||||||
},
|
},
|
||||||
subtotal() {
|
subtotal() {
|
||||||
return this.currentPrice * this.quantity;
|
return this.currentPrice * this.quantity;
|
||||||
|
},
|
||||||
|
hasMoreReviews() {
|
||||||
|
return this.reviews.length < this.reviewsTotal;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
@ -420,6 +432,8 @@ export default {
|
|||||||
}];
|
}];
|
||||||
this.selectSku(this.skuList[0], 0);
|
this.selectSku(this.skuList[0], 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.fetchProductReviews(true);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 轮播图切换
|
// 轮播图切换
|
||||||
@ -604,7 +618,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// 跳转到购物车
|
// 跳转到购物车
|
||||||
goToCart() {
|
async goToCart() {
|
||||||
const token = await uni.getStorageSync('access_token')
|
const token = await uni.getStorageSync('access_token')
|
||||||
if (!token) {
|
if (!token) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
@ -633,6 +647,54 @@ export default {
|
|||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取购物车数量失败:', error);
|
console.error('获取购物车数量失败:', error);
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
async fetchProductReviews(reset = false) {
|
||||||
|
if (!this.productInfo || this.isLoadingReviews) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.productInfo.product_id && !this.productInfo.id) {
|
||||||
|
console.warn('缺少商品ID，无法获取评价');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (reset) {
|
||||||
|
this.reviewPage = 1;
|
||||||
|
this.reviews = [];
|
||||||
|
this.reviewsTotal = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoadingReviews = true;
|
||||||
|
try {
|
||||||
|
const response = await request('xcx/order/reviews', 'GET', {
|
||||||
|
product_id: this.productInfo.product_id || this.productInfo.id,
|
||||||
|
page: this.reviewPage,
|
||||||
|
page_size: this.reviewPageSize
|
||||||
|
});
|
||||||
|
const list = response?.list || [];
|
||||||
|
const total = typeof response?.total === 'number' ? response.total : this.reviewsTotal;
|
||||||
|
|
||||||
|
this.reviews = reset ? list : [...this.reviews, ...list];
|
||||||
|
this.reviewsTotal = total || this.reviews.length;
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
this.reviewPage += 1;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取商品评价失败：', error);
|
||||||
|
uni.showToast({
|
||||||
|
title: '获取评价失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
this.isLoadingReviews = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async loadMoreReviews() {
|
||||||
|
if (!this.hasMoreReviews || this.isLoadingReviews) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await this.fetchProductReviews();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -1265,6 +1327,21 @@ export default {
|
|||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-empty,
|
||||||
|
.review-loading {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
font-size: 26rpx;
|
||||||
|
padding: 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.load-more-reviews {
|
||||||
|
margin-top: 24rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: #9810fa;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
/* 底部操作栏 */
|
/* 底部操作栏 */
|
||||||
.bottom-bar {
|
.bottom-bar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user