Pārlūkot izejas kodu

feat(商城): 添加热销图书列表功能并优化商品选择逻辑

添加获取热销图书列表的API接口
实现热销图书页面数据动态加载
优化商品选择弹窗的默认选中逻辑
添加退款状态显示样式
完善购物车添加功能及商品详情跳转
ylong 1 nedēļu atpakaļ
vecāks
revīzija
eba42f75c7

+ 4 - 1
api/modules/mall.js

@@ -155,7 +155,10 @@ export const useMallApi = (Vue, vm) => {
         // 降价活动规则详情
         getActivityReduceRuleAjax: () => vm.$u.get('/token/shop/getActivityReduceRule'),
 
-         // 获取商品分享二维码
+		// 获取商品分享二维码
         getIsbnQrcodeAjax: (isbn) => vm.$u.http.get('/token/shop/order/getIsbnQrcode', { isbn }),
+
+		// 热销图书列表
+		getHotBookListAjax: (params) => vm.$u.get('/token/shop/showIndex/getHotBookList', params),
 	}
 }

+ 6 - 1
pages-car/components/buy-order-item.vue

@@ -3,7 +3,9 @@
         <!-- 订单头部:订单号和状态 -->
         <view class="order-header">
             <text class="order-no">订单号:{{ order.orderId }}</text>
-            <text class="order-status">{{ getStatusText(order) }}</text>
+
+            <text class="order-status color-red" v-if="order.refundStatus==3">已退款</text>
+            <text class="order-status" v-else>{{ getStatusText(order) }}</text>
         </view>
 
         <!-- 商品信息 -->
@@ -219,6 +221,9 @@
         border-radius: 16rpx;
         padding: 30rpx 20rpx;
         margin-bottom: 20rpx;
+        .color-red {
+            color: #FF000C;
+        }
 
         .order-header {
             display: flex;

+ 30 - 8
pages-sell/components/hot-sell-item/index.vue

@@ -9,32 +9,40 @@
 		</view>
 
 		<!-- Book Info -->
-		<view class="book-info">
-			<image :src="item.cover" class="book-cover" mode="aspectFill"></image>
+		<view class="book-info" @click.stop="navigateToDetail">
+			<image :src="item.bookImg" class="book-cover" mode="aspectFill"></image>
 			
 			<view class="info-right">
-				<text class="title">{{ item.name || '-' }}</text>
-				<text class="author">{{ item.author }}</text>
+				<text class="title">{{ item.bookName || '-' }}</text>
+				<text class="author">{{ item.author || '-' }}</text>
 				
 				<view class="bottom-row">
 					<view class="price-box">
 						<text class="currency">¥</text>
-						<text class="price">{{ item.productPrice }}</text>
-						<text class="original">¥{{ item.price }}</text>
+						<text class="price">{{ item.bookPrice }}</text>
+						<text class="original">¥{{ item.bookOriginalPrice }}</text>
 					</view>
 					
-					<view class="cart-btn">
+					<view class="cart-btn" @click.stop="handleAddToCart">
 						<text>加入购物车</text>
 					</view>
 				</view>
 			</view>
 		</view>
+
+		<!-- Product Selection Popup -->
+		<SelectGoodPopup ref="popup" @confirm="onPopupConfirm"></SelectGoodPopup>
 	</view>
 </template>
 
 <script>
+import SelectGoodPopup from '../select-good-popup/index.vue';
+
 export default {
 	name: 'HotSellItem',
+	components: {
+		SelectGoodPopup
+	},
 	props: {
 		rank: {
 			type: Number,
@@ -44,6 +52,20 @@ export default {
 			type: Object,
 			required: true
 		}
+	},
+	methods: {
+		navigateToDetail() {
+			uni.navigateTo({
+				url: '/pages-sell/pages/detail?isbn=' + this.item.bookIsbn || ''
+			});
+		},
+		handleAddToCart() {
+			this.item.isbn = this.item.bookIsbn || '';
+			this.$refs.popup.open(this.item, 1);
+		},
+		onPopupConfirm(data) {
+			this.$emit('add-cart', data);
+		}
 	}
 }
 </script>
@@ -98,7 +120,7 @@ export default {
 			padding: 10rpx 0;
 
 			.title {
-				font-size: 36rpx;
+				font-size: 32rpx;
 				color: #303030;
 				font-weight: bold;
 				line-height: 1.2;

+ 2 - 2
pages-sell/components/select-good-popup/index.vue

@@ -152,8 +152,8 @@ export default {
 				if (res.code === 200) {
 					this.currentProduct = res.data || {};
 					this.qualityOptions = res.data.skuList || [];
-					if (this.qualityOptions.length > 0) {
-						this.currentQuality = this.qualityOptions[0].conditionType
+					if (this.qualityOptions.length > 1) {
+						this.currentQuality = this.qualityOptions[1].conditionType || 2;
 					}
 				}
 			});

+ 17 - 51
pages-sell/pages/hot-sell.vue

@@ -21,6 +21,7 @@
 				:key="index" 
 				:rank="index + 1" 
 				:item="item"
+				@add-cart="addToCart"
 			></hot-sell-item>
 		</view>
 	</view>
@@ -38,66 +39,31 @@ export default {
 	data() {
 		return {
 			statusBarHeight: 20,
-			bookList: [
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				},
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				},
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				},
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				},
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				},
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				},
-				{
-					title: '山河岁月',
-					author: '本书编写组',
-					price: '6.80',
-					originalPrice: '36.80',
-					cover: 'https://img.yzcdn.cn/vant/cat.jpeg'
-				}
-			]
+			bookList: []
 		}
 	},
 	created() {
 		const systemInfo = uni.getSystemInfoSync();
 		this.statusBarHeight = systemInfo.statusBarHeight || 20;
+		this.getHotBookList();
 	},
 	methods: {
 		goBack() {
 			uni.navigateBack();
+		},
+		getHotBookList() {
+			uni.showLoading({ title: '加载中...' });
+			this.$u.api.getHotBookListAjax({pageNum: 1, pageSize: 100}).then(res => {
+				uni.hideLoading();
+				if (res.code === 200) {
+					this.bookList = res.data || res.rows || [];
+				}
+			}).catch(() => {
+				uni.hideLoading();
+			});
+		},
+		addToCart(data) {
+			console.log('add to cart:', data);
 		}
 	}
 }