<template>
<view class="user">
<view class="search">
<!-- <view class="box">
<image src="/static/news/icon-search.png"></image>
<input type="search" placeholder="商品名称/编码" />
</view> -->
<u-search placeholder="输入用户昵称/姓名/手机号" shape="round" :show-action="false" height="60" bg-color="#ffffff" v-model="keyword"></u-search>
</view>
<view class="user-bd">
<view class="li" v-for="i in list" :key="i.user_id" @click="goVipDetails(i)">
<view class="a">
<view class="l">
<image :src="i.avatar_url?i.avatar_url:$picUrl+'/static/news/avater.png'"></image>
</view>
<view class="r">
<view class="m">
<view class="n">{{i.nick_name}}</view>
<view class="btn">{{i.user_type_text}}</view>
</view>
<view class="n">
<view>
<text>{{i.mobile}}</text>
<image @click="copyText(i.mobile)" :src="$picUrl+'/static/news/icon-copy.png'" style="margin-top:-4rpx;"></image>
</view>
<image :src="$picUrl+'/static/news/tel.png'" @click="makeCall(i.mobile)"></image>
</view>
</view>
<!-- <view class="m">
<view class="n">{{nick_name}}</view>
<view class="n">真实姓名：张三</view>
<view class="n">{{mobile}}<image :src="$picUrl+'/static/news/icon-copy.png'"></image></view>
</view>
<view class="r">
<view class="btn">会员</view>
<image :src="$picUrl+'/static/news/tel.png'"></image>
</view> -->
</view>
<view class="b">
<view class="l">余额(元）<text>¥{{i.expend_money?i.expend_money:0.00}}</text></view>
<view class="l">积分(分）<text>{{i.grade?i.grade:0}}</text></view>
</view>
</view>
<!-- <view class="li" v-for="i in 2" :key="i">
<view class="a">
<view class="l">
<image :src="$picUrl+'/static/news/avater.png'"></image>
</view>
<view class="m">
<view class="n">昵称</view>
<view class="n">真实姓名：张三</view>
<view class="n">18089800909<image :src="$picUrl+'/static/news/avater.png'"></image></view>
</view>
<view class="r">
<view class="btn btn-on">游客</view>
<image :src="$picUrl+'/static/news/tel.png'"></image>
</view>
</view>
<view class="b">
<view class="l">余额(元）<text>¥0.00</text></view>
<view class="l">积分(分）<text>0.00</text></view>
</view>
</view> -->
</view>
</view>
</template>
<script>
import * as Vip from '@/api/user/vip'
export default {
data() {
return {
keyword:'',
page:1,
total:0,
list:[],
title:'会员管理'
};
},
methods: {
async getList(){
let res = await Vip.getVipList({page:this.page,search:this.keyword,user_type:this.title=='会员管理'?"10,20":'40'})
console.log(res,"===")
this.list.push(...res.data.list.data);
this.total = res.data.list.total;
},
copyText(text) {
uni.setClipboardData({
data: text,
success: () => {
uni.showToast({
title: '复制成功',
icon: 'success',
duration: 2000
});
},
fail: () => {
uni.showToast({
title: '复制失败',
icon: 'none'
});
}
});
},
makeCall(phoneNumber) {
uni.getSetting({
success(res) {
if (!res.authSetting['scope.phoneCall']) {
// 没有权限，需要请求用户授权
uni.authorize({
scope: 'scope.phoneCall',
success() {
// 用户已授权，可以拨打电话
uni.makePhoneCall({
phoneNumber: phoneNumber // 电话号码
});
},
fail() {
// 用户拒绝授权，可以引导用户开启
uni.showModal({
title: '提示',
content: '需要电话权限',
success: function(modalRes) {
if (modalRes.confirm) {
uni.openSetting();
}
}
});
}
});
} else {
// 已经有权限，直接拨打电话
uni.makePhoneCall({
phoneNumber: phoneNumber // 电话号码
});
}
}
});
},
goVipDetails(item){
let details = JSON.stringify(item)
uni.navigateTo({
url:"/pages/news/user/index?item="+details
})
}
},
onLoad(option) {
this.title = option.title
uni.setNavigationBarTitle({
title: this.title
});
this.list = []
this.getList()
},
onReachBottom() {
if (this.list.length < this.total) {
this.page++;
this.getList()
}
},
}
</script>
<style lang="scss" scoped>
.user{
padding: 0 0 130rpx;
overflow: hidden;
.search{
width: 750rpx;
padding: 34rpx 34rpx 0 34rpx;
box-sizing: border-box;
// .box{
// padding: 15rpx 25rpx;
// box-sizing: border-box;
// display: flex;
// align-items: center;
// background: #F3F3F3;
// border-radius: 60rpx;
// image{
// width: 28rpx;
// height: 28rpx;
// margin-right: 22rpx;
// }
// input{
// flex: 1;
// font-size: 28rpx;
// line-height: 30rpx;
// }
// }
}
&-bd{
padding: 0 34rpx;
overflow: hidden;
.li{
padding:0 12rpx;
background-color: #FFFFFF;
overflow: hidden;
border-radius: 8rpx;
margin-top: 18rpx;
// &:first-child{
// margin-top: 0;
// }
.a{
display: flex;
// align-items: flex-start;
align-items: center;
justify-content: space-between;
padding: 15rpx 0 30rpx;
border-bottom: 1px solid #F2F2F2;
.l{
width: 114rpx;
height: 114rpx;
margin-right: 25rpx;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.r{
flex: 1;
// width: 98rpx;
// overflow: hidden;
.m{
// flex: 1;
// max-width: 400rpx;
// margin-right: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.btn{
// width: 98rpx;
padding:0 10rpx;
height: 56rpx;
line-height: 56rpx;
background: #FFFFFF;
border-radius: 3px 3px 3px 3px;
border: 1px solid #FFA928;
text-align: center;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #FFA928;
&-on{
border-color:#FFA928;
color: #FFA928;
}
}
}
.n{
display: flex;
align-items: center;
justify-content: space-between;
margin-top:20rpx;
text{
font-size: 28rpx;
color: #454545;
}
image{
width: 30rpx;
height: 30rpx;
margin-left: 10rpx;
vertical-align: middle;
}
}
// image{
// display: block;
// width: 30rpx;
// height: 30rpx;
// float: right;
// margin-top: 20rpx;
// margin-right: 20rpx;
// }
}
// .m{
// flex: 1;
// max-width: 400rpx;
// margin-right: 20rpx;
// .n{
// font-size: 28rpx;
// font-weight: 400;
// color: #545454;
// height: 50rpx;
// image{
// width: 30rpx;
// height: 30rpx;
// margin-left: 10rpx;
// vertical-align: middle;
// margin-top: -1px;
// }
// }
// }
}
.b{
padding-top: 20rpx;
padding-bottom: 20rpx;
overflow: hidden;
display: flex;
align-items: center;
.l{
flex: 1;
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #B1B1B1;
text{
font-size: 28rpx;
font-weight: 400;
color: #454545;
display: block;
margin-top: 12rpx;
}
}
}
}
}
}
</style>