Baidu applet - calculated value by the acquired data

Figure sales orders are acquired by the background to, we need to calculate the average value of each project, and the total sales for each case.

Analyzing .swan background using the acquired data, it determines whether the item is a sales per 0,0 is not displayed, the effect on the graph of FIG;

 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

.case{padding:8px 8px}
.case-item{width:100%;margin-bottom:30rpx;box-shadow:0px 3px 5px 0px rgba(0,0,0,0.15);box-sizing:border-box}
.case-item-img{position:relative;display:none}
.case-item-img image{display:block;width:100%}
.case-item-title{white-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-content{padding: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-item{flex:1;text-align:center}
.case-content-item+view{border-left:1px solid #d4aa7b}
.case-content-item-title-desc{color:#d4aa7b;margin:5px 0}
.case-content-desc{border-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获取的到的数据！一开始里面只有销售额，销售单数，我们只能手动计算得出结果，并且推入到这个数组中，渲染页面！

Baidu applet - calculated value by the acquired data

Guess you like