百度小程序-通过获取到的数据来计算数值

Posted 2022-06-14 suni1024

图中 订单数 销售额 都是由后台获取到，我们需要计算每一个项目的平均值，以及每一个案例的销售总额。

.swan  利用判断后台获取的数据，判断每一个项目的销售额是否为0,0就不显示出来，上图为效果图；

 1         <view class="case">
 2             <block s-for="item,index in DataInfo">
 3                 <navigator url="/pages/detail/detail?id=item.id">
 4                 <view class="case-item">
 5                         <view class="case-item-img">
 6                             <image src="item.cover_id" lazy-load="true" mode="widthFix"></image>
 7                             <view class="case-item-title">item.title</view>
 8                         </view>                        
 9                         <view class="case-content">
10                             <block s-if="item.cwdxse!=0">
11                                 <view class="case-content-item">
12                                     <view class="case-content-item-title">厨卫顶</view>
13                                     <view class="case-content-item-title-desc">item.cwd单</view>
14                                     <view class="case-content-item-title">销售额</view>
15                                     <view class="case-content-item-title-desc">item.cwdxse元</view>
16                                     <view class="case-content-item-title">平均单值</view>
17                                     <view class="case-content-item-title-desc">item.cwdAVG元</view>
18                                 </view>
19                             </block>
20                             <block s-if="item.qwddxse!=0">
21                                 <view class="case-content-item" >
22                                     <view class="case-content-item-title">全屋吊顶</view>
23                                     <view class="case-content-item-title-desc">item.qwdd单</view>
24                                     <view class="case-content-item-title">销售额</view>
25                                     <view class="case-content-item-title-desc">item.qwddxse元</view>
26                                     <view class="case-content-item-title">平均单值</view>
27                                     <view class="case-content-item-title-desc">item.qwddAVG元</view>
28                                 </view>
29                             </block>
30                         </view>
31                         <view class="case-content-desc">
32                                 <view class="case-content-item-title">销售总额</view>
33                                 <view class="case-content-item-title-desc">item.sales元</view>
34                         </view>
35                 </view>
36                 </navigator>
37             </block>
38         </view>

.css

.casepadding:8px 8px
.case-itemwidth:100%;margin-bottom:30rpx;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.15);box-sizing:border-box
.case-item-imgposition:relative;display:none
.case-item-img imagedisplay:block;width:100%
.case-item-titlewhite-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:0;bottom:0;width:100%;height:60rpx;line-height:60rpx;text-align:center;background-color:rgba(0,0,0,.7);color:#fff;font-size:28rpx
.case-contentpadding:30rpx 30rpx 0 30rpx;overflow:hidden;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:center;align-items:center;align-self:center;justify-content:center
.case-content-itemflex:1;text-align:center
.case-content-item+viewborder-left:1px solid #d4aa7b
.case-content-item-title-desccolor:#d4aa7b;margin:5px 0
.case-content-descborder-top:1px solid #d4aa7b;width:80%;margin:0 auto;text-align:center;padding:20rpx 0  30rpx 0;margin-top:30rpx

.js 上关键部分

                        let arr = res.data.lines;//临时数组存放；
                        for(let i =0;i<arr.length;i++)
                            arr[i].cwdAVG=arr[i].cwdxse/arr[i].cwd; 
                            // 厨卫顶 平均值 销售额/单数
                            arr[i].qwddAVG=arr[i].qwddxse/arr[i].qwdd;
                            // 全屋吊顶 平均值 销售额/单数
                            arr[i].qwddAVG=parseInt(arr[i].qwddAVG);
                            arr[i].cwdAVG=parseInt(arr[i].cwdAVG);
                            // 计算出的平均值 取整数，也可以取浮点数
                            arr[i].sales = parseInt(arr[i].cwdxse)+parseInt(arr[i].qwddxse);
                            //销售总额 等于 每个项目的 销售额度相加
                        

arr 存放 通过ajax获取的到的数据！一开始里面只有销售额，销售单数，我们只能手动计算得出结果，并且推入到这个数组中，渲染页面！