114 lines
2.3 KiB
Vue
114 lines
2.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view v-if="listsArr.length > 0">
|
||
<navigator hover-class="none" :url="'/pages/index/clients?user_id=' + item.user_id" class="list" v-for="(item, index) in listsArr" :key="index">
|
||
<image class="list-cover" :src="item.avatar ? item.avatar : '/static/user_default.png'" mode="aspectFill"></image>
|
||
<view class="list-cont">
|
||
<view class="list-name">{{item.nickname}}</view>
|
||
<view class="list-phone">{{item.username}}</view>
|
||
</view>
|
||
<view class="list-btn">计算结果></view>
|
||
</navigator>
|
||
</view>
|
||
<view class="pack-center pages-hint" v-else>
|
||
<image src="https://cdn.shuiganying.com/images/2023/04/04/40b2f4bfe2dfb828688fcd3766d6b541.png"></image>
|
||
<view class="reportTips">
|
||
<view class="reportTips-title">暂无数据</view>
|
||
<view class="reportTips-text">抱歉，暂没有历史记录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { Clients } from '@/apis/interfaces/index'
|
||
export default {
|
||
data() {
|
||
return {
|
||
listsArr : [] // 结果列表
|
||
}
|
||
},
|
||
onShow() {
|
||
this.listsInfo()
|
||
},
|
||
|
||
methods: {
|
||
listsInfo() {
|
||
Clients().then(res => {
|
||
this.listsArr = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
.list {
|
||
position: relative;
|
||
padding: 24rpx 30rpx 24rpx 140rpx;
|
||
min-height: 80rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.list-cover {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 24rpx;
|
||
background: #808080;
|
||
}
|
||
|
||
.list-cont {
|
||
width: calc(100% - 180rpx);
|
||
}
|
||
|
||
.list-name {
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.list-phone {
|
||
height: 30rpx;
|
||
line-height:30rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.list::before {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 1rpx;
|
||
background: #FAFAFA;
|
||
content: "";
|
||
}
|
||
|
||
.list:last-child::before {
|
||
display: none;
|
||
}
|
||
|
||
.list-btn {
|
||
display: inline-block;
|
||
background-color: #0352c8;
|
||
color: #ffffff;
|
||
border-radius: 80rpx;
|
||
line-height: 64rpx;
|
||
padding: 0 20rpx;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 30rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
</style> |