hookehuyr

feat(订单): 添加订单评价功能及支付组件集成

- 新增订单评价弹窗组件,支持评分和评价内容输入
- 实现评价提交逻辑,包含表单验证和状态管理
- 集成支付组件,优化支付流程
- 添加评价样式和响应式布局
- 完善订单列表交互,区分已评价和未评价状态
......@@ -23,6 +23,7 @@ declare module 'vue' {
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutRadio: typeof import('@nutui/nutui-taro')['Radio']
NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
NutRate: typeof import('@nutui/nutui-taro')['Rate']
NutRow: typeof import('@nutui/nutui-taro')['Row']
NutSearchbar: typeof import('@nutui/nutui-taro')['Searchbar']
NutSticky: typeof import('@nutui/nutui-taro')['Sticky']
......
......@@ -247,6 +247,141 @@
color: #9ca3af;
}
// 评价弹窗样式
.rate-popup {
padding: 40rpx;
height: 100%;
display: flex;
flex-direction: column;
.rate-header {
text-align: center;
margin-bottom: 40rpx;
.rate-title {
font-size: 36rpx;
font-weight: 600;
color: #333;
}
}
.rate-content {
flex: 1;
.product-info {
display: flex;
padding: 30rpx;
background: #f8f9fa;
border-radius: 16rpx;
margin-bottom: 40rpx;
.product-image {
width: 120rpx;
height: 120rpx;
border-radius: 12rpx;
margin-right: 24rpx;
}
.product-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.product-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 8rpx;
}
.product-specs {
font-size: 26rpx;
color: #666;
margin-bottom: 8rpx;
}
.product-price {
font-size: 32rpx;
font-weight: 600;
color: #ff6b35;
}
}
}
.rate-score-section {
margin-bottom: 40rpx;
.score-label {
display: block;
font-size: 30rpx;
color: #333;
margin-bottom: 20rpx;
font-weight: 500;
}
.rate-stars {
margin-bottom: 16rpx;
}
.score-text {
font-size: 26rpx;
color: #666;
margin-left: 16rpx;
}
}
.rate-input-section {
.input-label {
display: block;
font-size: 30rpx;
color: #333;
margin-bottom: 20rpx;
font-weight: 500;
}
.rate-textarea {
width: 100%;
min-height: 200rpx;
border: 2rpx solid #e5e5e5;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
line-height: 1.5;
&:focus {
border-color: #ff6b35;
}
&.readonly {
background-color: #f8f9fa;
border-color: #e9ecef;
color: #666;
}
}
.review-date {
display: block;
font-size: 24rpx;
color: #999;
margin-top: 16rpx;
text-align: right;
}
}
}
.rate-footer {
padding-top: 40rpx;
.nut-button {
height: 88rpx;
border-radius: 44rpx;
font-size: 32rpx;
font-weight: 600;
}
}
}
/* 响应式适配 */
@media (max-width: 750px) {
.header {
......@@ -304,4 +439,31 @@
.order-actions {
gap: 16rpx;
}
}
\ No newline at end of file
}
/* 加载指示器 */
.loading-container {
display: flex;
align-items: center;
justify-content: center;
padding: 40rpx;
gap: 16rpx;
}
.loading-text {
font-size: 28rpx;
color: #9ca3af;
}
:deep(.nut-textarea) {
border: 1rpx solid #e5e7eb;
border-radius: 16rpx;
padding: 24rpx;
}
:deep(.nut-textarea__textarea) {
font-size: 28rpx;
color: #374151;
line-height: 1.5;
}
......
This diff is collapsed. Click to expand it.