fix: 订单列表及商品组件处理空值展示并统一数字转换避免显示 null/NaN

Jacob

4 天以前 212ed891eba94c59d663c7bbbb156acdbc3a0f12

fix: 订单列表及商品组件处理空值展示并统一数字转换避免显示 null/NaN

 components/orderListGoods/index.vue
..
..
@@ -9,8 +9,8 @@
9
9
             </view>
10
10
             <view class='text acea-row row-between'>
11
11
                 <view class="acea-row row-between-wrapper name_box">
12
-                    <view class='name line2'>{{ items.storeName }}</view>
13
-                    <view class="num">{{ items.sku }} x{{ items.cartNum }}</view>
12
+                    <view class='name line2'>{{ items.storeName || '' }}</view>
13
+                    <view class="num">{{ items.sku || '' }} x{{ toNumber(items.cartNum) }}</view>
14
14
                 </view>
15
15
                 <view class='info'></view>
16
16
                 <view class='money'>
..
..
@@ -34,8 +34,8 @@
34
34
                         <view class="gift-tag">赠品</view>
35
35
                     </view>
36
36
                     <view class='text' style="margin-left: 20rpx;">
37
-                        <view class='line1'>{{ gift.giftName }}</view>
38
-                        <view class='infor'>x{{ gift.giftNum }}</view>
37
+                        <view class='line1'>{{ gift.giftName || '' }}</view>
38
+                        <view class='infor'>x{{ toNumber(gift.giftNum) }}</view>
39
39
                     </view>
40
40
                 </view>
41
41
             </view>
 main.js
..
..
@@ -228,16 +228,21 @@
228
228
 Vue.mixin(pageLog);
229
229
 import BigNumber from 'bignumber.js';
230
230
 Vue.prototype.toNumber = function(number) {
231
-	if (isNaN(number)) {
232
-		return number;
233
-	} else {
234
-		return BigNumber(number).toNumber();
231
+	// null / undefined / 空值 / 非数字统一返回 0，避免页面显示 null、undefined、NaN
232
+	if (number === null || number === undefined || number === '' || isNaN(number)) {
233
+		return 0;
235
234
 	}
235
+	const result = BigNumber(number).toNumber();
236
+	return isNaN(result) ? 0 : result;
236
237
 }
237
238
 
238
239
 Vue.prototype.toThousands = function(num) {
239
-	if (num < 1000) return num;
240
-	if (Number.isInteger(num)) {
240
+	// null / undefined / 空值 / 非数字统一返回 0，避免页面显示 null、undefined、NaN
241
+	if (num === null || num === undefined || num === '' || isNaN(num)) {
242
+		return 0;
243
+	}
244
+	if (Number(num) < 1000) return num;
245
+	if (Number.isInteger(Number(num))) {
241
246
 		return String(num).replace(/(?!^)(?=(\d{3})+$)/g, ',')
242
247
 	} else {
243
248
 		return String(num).replace(/(?!^)(?=(\d{3})+\.)/g, ',')
 pages/users/order_list/index.vue
..
..
@@ -37,14 +37,14 @@
37
37
 						<view class='title acea-row row-between-wrapper'>
38
38
 							<view class="acea-row row-middle">
39
39
 								<text class="sign cart-color acea-row row-center-wrapper"
40
-									v-if="item.activityType !== '普通' && item.activityType !== '核销'">{{ item.activityType
41
-									}}</text>
40
+									v-if="item.activityType && item.activityType !== '普通' && item.activityType !== '核销'">{{
41
+										item.activityType }}</text>
42
42
 								<!-- <text class="sign cart-color acea-row row-center-wrapper" v-if="item.bargainId != 0">砍价</text>
43
43
 								<text class="sign cart-color acea-row row-center-wrapper" v-else-if="item.storeOrder.combinationId != 0">拼团</text>
44
44
 								<text class="sign cart-color acea-row row-center-wrapper" v-else-if="item.storeOrder.seckillId != 0">秒杀</text> -->
45
45
 								<view>{{ item.createTime }}</view>
46
46
 							</view>
47
-							<view class='font-color'>{{ item.orderStatus }}</view>
47
+							<view class='font-color'>{{ item.orderStatus || '' }}</view>
48
48
 							<!-- <view v-if="item.status?item.status.type == 0:0" class='font-color'>待付款</view>
49
49
 							<view v-else-if="item.status?item.status.type == 1:0 && item.storeOrder.shippingType==1" class='font-color'>待发货</view>
50
50
 							<view v-else-if="item.status?item.status.type == 2:0 && item.storeOrder.shippingType==1" class='font-color'>待收货</view>
..
..
@@ -54,8 +54,7 @@
54
54
 						</view>
55
55
 						<orderListGoods :orderInfoList="item.orderInfoList"
56
56
 							:zonePromotionList="item.zonePromotionList || []"></orderListGoods>
57
-						<view class='totalPrice'>共{{ item.totalNum + getGiftCount(item.zonePromotionList || [])
58
-							}}件商品，总金额
57
+						<view class='totalPrice'>共{{ getTotalNum(item) }}件商品，总金额
59
58
 							<text class='money font-color' v-if="getPayWay(item.payPrice, item.payCareBean) == 1">
60
59
 								<text class="color-blue">￥{{ toNumber(item.payPrice) }}</text>
61
60
 								<text class="color-blue">+{{ toThousands(toNumber(item.payCareBean)) }}悦养豆</text>
..
..
@@ -254,6 +253,9 @@
254
253
 			});
255
254
 			return count;
256
255
 		},
256
+		getTotalNum(item) {
257
+			return (Number(item.totalNum) || 0) + this.getGiftCount(item.zonePromotionList || []);
258
+		},
257
259
 		getPayWay(price, payCareBean) {
258
260
 			console.log('阿斯顿发送到发送地方', Number(price) > 0 && Number(payCareBean) > 0);
259
261
 			if (Number(price) > 0 && Number(payCareBean) > 0) {
..
..
@@ -312,7 +314,9 @@
312
314
 		getOrderData: function () {
313
315
 			let that = this;
314
316
 			orderData().then(res => {
315
-				that.$set(that, 'orderData', res.data);
317
+				that.$set(that, 'orderData', (res && res.data) || {});
318
+			}).catch(() => {
319
+				that.$set(that, 'orderData', {});
316
320
 			})
317
321
 		},
318
322
 		/**
..
..
@@ -447,7 +451,7 @@
447
451
 				page: that.page,
448
452
 				limit: that.limit,
449
453
 			}).then(res => {
450
-				let list = res.data.list || [];
454
+				let list = (res && res.data && res.data.list) || [];
451
455
 				let loadend = list.length < that.limit;
452
456
 				that.orderList = that.$util.SplitArray(list, that.orderList);
453
457
 				that.$set(that, 'orderList', that.orderList);