<template>
<view class="page">
<u-navbar title="用户管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='45'></u-navbar>
<view class="" style="background: #FFFFFF;width: 750rpx;padding-bottom: 36rpx;">
<view class="top_box"style="margin-top: 20rpx;">
<view class="left_text">
手机号
</view>
<view class="sear_ipt">
<input type="text"
v-model="searchKeyword"
placeholder="请输入手机号"
class="input"
placeholder-style="color:#C7CDD3"
@input="search()">
</view>
</view>
<!-- <view class="data_box">
<view class="data_cont " :class="typeindex==0?'act1':''" @click="changeType(0)">
按日期
</view>
<view class="data_cont" :class="typeindex==1?'act1':''" @click="changeType(1)">
按车辆
</view>
</view> -->
</view>
<view class="info_card" style="margin-top: 20rpx;" v-for="(item,index) in infoList" :key="index" @click="topage(item)">
<view class="info_tit">
手机号：<span>{{item.phonenumber}}</span>
<view class="tit_right" v-if="item.status==0">
<view class="yuan"></view>
正常
</view>
<view class="tit_right" v-if="item.status==1" style="color: red;">
<view class="yuan" style="background: red;"></view>
停用
</view>
</view>
<view class="lines"></view>
<view class="cont">
<view class="info_li">
押金：<span>￥{{item.balance}}</span>
<!-- <view class="half_infoli">
</view>
<view class="half_infoli">
</view> -->
</view>
<view class="info_li">
<view class="txt" v-if="item.latestOrder.orderNo">最近一笔订单：{{item.latestOrder.orderNo}}</view>
<span style="color:#4C97E7 ;" v-if="item.latestOrder.status==0||item.latestOrder.status==2">（进行中）</span>
<span style="color:#4C97E7 ;" v-if="item.latestOrder.status==1||item.latestOrder.status==3">（待支付）</span>
<span style="color:#4C97E7 ;" v-if="item.latestOrder.status==4">（已完成）</span>
</view>
</view>
</view>
</view>
</template>
<script>
let timerId;
export default {
data() {
return {
bgc: {
backgroundColor: "#fff",
},
typeindex:0,
infoList:[],
searchKeyword:''
}
},
onShow() {
this.getuserList()
},
methods: {
topage(item){
uni.navigateTo({
url:'/pages_admin/worke/worke_user_detail?id='+item.userId
})
},
getuserList(){
let data ={
phonenumber:this.searchKeyword
}
this.$u.get('/appVerify/user/list?', data).then((res) => {
if (res.code === 200) {
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
this.infoList = res.rows
}
}).catch(error => {
});
},
search() {
clearTimeout(timerId);
timerId = setTimeout(() => {
this.getuserList()
}, 500);
},
changeType(num){
this.typeindex=num
}
}
}
</script>
<style lang="scss">
page {
background-color: #F6F6F6;
}
.page {
width: 750rpx;
.lines{
width: 748rpx;
height: 22rpx;
background: #F6F6F6;
border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.info_card {
background: #FFFFFF;
.info_tit {
display: flex;
flex-wrap: nowrap;
padding: 22rpx 28rpx;
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
.money {
margin-left: auto;
font-weight: 500;
font-size: 32rpx;
color: #4C97E7;
}
.tit_right{
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-left: auto;
font-weight: 400;
font-size: 28rpx;
color: #4C97E7;
.yuan{
margin-right: 12rpx;
margin-top: 6rpx;
width: 15rpx;
height: 15rpx;
border-radius: 50%;
background: #4C97E7;
}
}
}
.lines {
width: 750rpx;
// height: 2rpx;
border-bottom: 2rpx solid #E7E7E7;
}
.cont {
padding: 26rpx 28rpx;
.info_li {
display: flex;
flex-wrap: nowrap;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span {
color: #3D3D3D;
}
line-height: 48rpx;
.txt{
width: 70%;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
}
.half_infoli {
display: flex;
flex-wrap: nowrap;
width: 50%;
font-weight: 400;
font-size: 28rpx;
color: #808080;
span {
color: #3D3D3D;
}
.input{
width: 30%;
}
}
}
}
}
.cont_box {
padding: 14rpx 30rpx;
width: 750rpx;
background: #E2F2FF;
border-radius: 0rpx 0rpx 0rpx 0rpx;
.cont_info {
margin-top: 8rpx;
display: flex;
flex-wrap: nowrap;
.txt{
width: 70%;
white-space: nowrap;
/* 禁止换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
}
.info_li {
width: 50%;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
}
.data_box {
width: 672rpx;
margin: 36rpx auto;
display: flex;
flex-wrap: nowrap;
align-items: center;
// justify-content: space-between;
.data_cont {
margin-right: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 150rpx;
height: 60rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
border: 2rpx solid #fff;
}
.act1 {
background: #E2F2FF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
color: #4C97E7;
border: 2rpx solid #4C97E7;
}
}
.top_box {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 28rpx 30rpx;
// padding: 20rpx 0;
margin: 0 auto;
width: 672rpx;
height: 100rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.07);
border-radius: 10rpx 10rpx 10rpx 10rpx;
.left_text {
width: 25%;
font-weight: 400;
font-size: 32rpx;
color: #3D3D3D;
}
.timebox {
width: 75%;
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-left: 34rpx;
.left_time {
text-align: center;
margin-right: 6rpx;
height: 50rpx;
width: 45%;
border: 2rpx solid #ccc;
border-radius: 12rpx;
font-weight: 400;
font-size: 32rpx;
color: #979797;
}
.right_time {
text-align: center;
margin-left: 6rpx;
height: 50rpx;
width: 45%;
border: 2rpx solid #ccc;
border-radius: 12rpx;
font-weight: 400;
font-size: 32rpx;
color: #979797;
}
}
}
}
</style>