1、定义数据源 usertradedataList:[],
2、请求数据
getUserTradeDetailList: function () {
var _this = this
this.postJsonRequest('/trading/lsdk/api/json', {'data': {
'merId': 1,
'currPage': 1,
'pageSize': 10
},
'method': 'trans.list'
}).then(respond => {
if (respond.status === 200) {
if (respond.data.code === 200) {
console.log('code 200的')
this.usertradedata = respond.data.result.detailList
this.usertradedataList = this.usertradedataList.concat(respond.data.result.detailList)
console.log(this.usertradedata)
} else {
console.log('进入else')
console.log(respond.data.message)
}
}
console.log(respond.code)
}
)
}
循环数组,处理字符串
var conditionDes = ''
for(var i=0;i<this.materiallist.length;i++) {
var model = this.materiallist[i]
conditionDes = conditionDes + model.attrValue + '、'
}
conditionDes = conditionDes.substring(0,conditionDes.length-1)
this.needmaterial = conditionDes
3、列表绘制,赋值
<div class="transaction-alldetail">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
>
<div class="transaction-alldetail-items" v-for='(item,index) in usertradedataList'>
<div class="transaction-alldetail-items-left">
<img :src="item.imgUrl" alt="">
<div>
<p class="transaction-expenditure">{{item.desc}}</p>
<p class="transaction-time">{{item.time}}</p>
</div>
</div>
<div class="transaction-alldetail-items-right">
<p class="transaction-amount">{{item.asset}}</p>
<p class="transaction-integration-kind">映豆</p>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
布局
.transaction-alldetail-items{
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 15px;
color:#666666;
border-bottom:1px solid #DCDCDC;
}
.transaction-alldetail-items-left img{
width: 50px;
border-radius: 50%;
}
.transaction-alldetail-items-left div{
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
.transaction-expenditure{
font-size: 16px;
text-align: left;
margin: 2px 0px 8px;
}
网友评论