图中 订单数 销售额 都是由后台获取到，我们需要计算每一个项目的平均值，以及每一个案例的销售总额。
.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获取的到的数据！一开始里面只有销售额，销售单数，我们只能手动计算得出结果，并且推入到这个数组中，渲染页面！