微信小程序开发：将数组元素用逗号分隔成字符串

<style>
  .total {
    font-size: 28rpx;
    color: rgba(54, 60, 90, 0.8);
    margin-top: 16rpx;
  }

  .item {
    padding: 20rpx;
    background-color: #fff;
    border-bottom: 1rpx solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .item_title {
    font-size: 32rpx;
    color: rgba(54, 60, 90, 0.8);
    margin-bottom: 20rpx;
  }

  .item_number {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .item_number view {
    display: flex;
    align-items: center;
  }

  .item_number view image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }

  .item_number view view {
    font-size: 28rpx;
    color: rgba(107, 107, 107, 0.8);
  }

  .line {
    width: 1rpx;
    height: 36rpx;
    background-color: rgba(107, 107, 107, 0.8);
    margin: 0 20rpx;
  }

  .item_mes {
    font-size: 28rpx;
    color: rgba(107, 107, 107, 0.8);
  }

  .item_mes view {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .item_mes view image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
  }

  .item_mes view view {
    font-size: 28rpx;
    color: rgba(107, 107, 107, 0.8);
    margin-right: 10rpx;
  }

  .signNum {
    font-size: 28rpx;
    color: rgba(96, 155, 255, 1);
  }

  .tag {
    width: 110rpx;
    height: 110rpx;
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
<wxs module="util">
  function interval(arr) {
    var re = {
      str: "",
      state: false
    }
    if (!arr) {
      return re
    }
    for (var i = 0; i < arr.length; i++) {
      if (i == arr.length - 1) {
        re.str += arr[i] || '-
      } else {
        re.str += (arr[i] || '-') + '，'
      }
    }
<pre><code>var val = re.str.substring(0, 29)
if (re.str &amp;&amp; re.str.length &gt; 29) {
  re.state = true;
  re.str = val
}
return re
</code></pre>
<p>}</p>
<p>function getContractImg(type) {
var urlType = {
img: &quot;active4&quot;,
class: &quot;tag&quot;
};
switch (type) {
case 0:
urlType = {
img: &quot;active4&quot;,
class: &quot;tag&quot;
};
break;
case 94: //代他人签署
urlType = {
img: &quot;active2&quot;,
class: &quot;tag&quot;
};
break;
case 91: //拟定中-待签署方补充参数
urlType = {
img: &quot;active11&quot;,
class: &quot;tag&quot;
};
break;
case 92: //拟定中-待我补充参数
urlType = {
img: &quot;active11&quot;,
class: &quot;tag&quot;
};
break;
case 93: // 拟定中-待对方补充参数
urlType = {
img: &quot;active11&quot;,
class: &quot;tag&quot;
};
break;
case 95: //待我签署
urlType = {
img: &quot;active1&quot;,
class: &quot;tag&quot;
};
break;
case 3: //已签署
urlType = {
img: &quot;active7&quot;,
class: &quot;tag&quot;
};
break;
case 4: //已撤回
urlType = {
img: &quot;active6&quot;,
class: &quot;tag&quot;
};
break;
case 5: //已失效
urlType = {
img: &quot;active5&quot;,
class: &quot;tag&quot;
};
break;
case 6: //作废
urlType = {
img: &quot;active3&quot;,
class: &quot;tag&quot;
};
break;
default:
urlType = {
img: &quot;active4&quot;,
class: &quot;tag&quot;
};
}
return urlType;
}
module.exports = {
interval: interval,
getContractImg: getContractImg
}
</wxs>
<view>
<view class="total" wx:if="{{total>0}}">共有{{total ? total : 0}}条数据</view>
<scroll-view class="" scroll-y="true" style="height: 78vh; margin-top: 16rpx;" bindscrolltolower="scrollBottom">
<view class="item" wx:for="{{list}}" wx:key="contractId" data-item="{{item}}" bindtap="goFileDetail">
<view class="item_title">{{item.contractTitle}}</view>
<view class="item_number">
<view>
<image src="/images/FileManagement/number.png" />
<view>{{item.contractSerail}}</view>
</view>
<view class="line"></view>
<view>
<image src="/images/FileManagement/leibie.png" />
<view>{{item.documentCategoryName || '未分类'}}</view>
</view>
</view>
<view class="item_mes">
<view>
<image src="/images/FileManagement/from.png" />
<view>发起方：</view>
<view>{{item.companyName}}</view>
</view>
<view>
<image src="/images/FileManagement/write.png" />
<view>签署方：</view>
<view>
<view>{{util.interval(item.signCompanys).str}}</view>
<view class="signNum" style="position: absolute; bottom: 0rpx; right: 0rpx; color: rgba(96, 155, 255, 1);" wx:if="{{util.interval(item.signCompanys).state}}"><text style="color:rgba(54, 60, 90, 0.8); font-size: 28rpx;">...</text>[共{{item.signCompanys.length}}方签署]</view>
</view>
</view>
<view>
<image src="/images/FileManagement/time.png" />
<view>截止时间：</view>
<view>{{item.signingDeadline}}</view>
</view>
</view>
<image class="{{util.getContractImg(item.contractStatus).class}}" src='/images/FileManagement/{{util.getContractImg(item.contractStatus).img}}.png'></image>
</view>
</scroll-view>
</view></p>