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

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

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

.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

.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获取的到的数据!一开始里面只有销售额,销售单数,我们只能手动计算得出结果,并且推入到这个数组中,渲染页面!

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

上一篇:我的java web之路(JSP基本语法)


下一篇:2小时快速搭建第一个小程序,有可能吗