<template>
    <view>
        <view class="no-order" v-if="childList.length <= 0">
            <view class="c">
                <text>还没有任何客户呢</text>
            </view>
        </view>

        <view class="orders">
            <view class="order" v-for="(item, index) in childList" :key="index">
                <view class="h">
                    <view class="l">客户名：{{ item.user.nickname }}</view>
                    <view class="r">加入时间：{{ item.createtime }}</view>
                </view>

                <view class="goods">
                    <view class="img">
                        <image :src="item.user.avatar"></image>
                    </view>
                    <!--<view class="info">
          <text class="name">{{gitem.goodsName}}</text>
          <text class="number">共{{gitem.number}}件商品</text>
        </view> -->
                    <view class="status">
                        <view class="time">电话：{{ item.user.tel }}</view>
                        <view class="btn" :data-mobile="item.user.tel" @tap="makeCall">拨打</view>
                    </view>
                </view>

                <!--<view class="b">
        <view class="l">实付：￥{{item.actualPrice}}</view>
        <view class="r">状态：无</view>
        <view class="r">分佣金额：￥0</view>
      </view> -->
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../../utils/util.js');
var api = require('../../../../config/api.js');
export default {
    data() {
        return {
            childList: [],
            page: 1,
            limit: 10,
            totalPages: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getChildList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            this.getChildList();
        } else {
            uni.showToast({
                title: '没有更多了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getChildList() {
            let that = this;
            util.request(api.DisCommissionChildUser, {
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        childList: that.childList.concat(res.data.list),
                        totalPages: res.data.pages
                    });
                }
            });
        },

        makeCall(e) {
            uni.makePhoneCall({
                phoneNumber: e.currentTarget.dataset.mobile
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

.orders-switch {
    width: 100%;
    background: #fff;
    height: 84rpx;
    /* border-bottom: 1px solid rgba(0,0,0,.15); */
}

.orders-switch .item {
    display: inline-block;
    height: 82rpx;
    width: 18%;
    padding: 0 15rpx;
    text-align: center;
}

.orders-switch .item .txt {
    display: inline-block;
    height: 82rpx;
    padding: 0 20rpx;
    line-height: 82rpx;
    color: #9a9ba1;
    font-size: 30rpx;
    width: 170rpx;
}

.orders-switch .item.active .txt {
    color: #ab956d;
    border-bottom: 4rpx solid #ab956d;
}

.no-order {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.no-order .c {
    width: 100%;
    height: auto;
    margin-top: 400rpx;
}

.no-order .c text {
    margin: 0 auto;
    display: block;
    width: 258rpx;
    height: 29rpx;
    line-height: 29rpx;
    text-align: center;
    font-size: 29rpx;
    color: #999;
}

.orders {
    height: auto;
    width: 100%;
    overflow: hidden;
}

.order {
    margin-top: 20rpx;
    background: #fff;
}

.order .h {
    height: 83.3rpx;
    line-height: 83.3rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
}

.order .h .l {
    float: left;
}

.order .h .r {
    float: right;
    color: #b4282d;
    font-size: 24rpx;
}
.order .goods {
    display: flex;
    align-items: center;
    height: 199rpx;
    margin-left: 31.25rpx;
}

.order .goods .img {
    height: 145.83rpx;
    width: 145.83rpx;
    background: #f4f4f4;
}

.order .goods .img image {
    height: 145.83rpx;
    width: 145.83rpx;
}

.order .goods .info {
    height: 145.83rpx;
    flex: 1;
    padding-left: 20rpx;
}

.order .goods .name {
    margin-top: 30rpx;
    display: block;
    height: 44rpx;
    line-height: 44rpx;
    color: #333;
    font-size: 30rpx;
}

.order .goods .number {
    display: block;
    height: 37rpx;
    line-height: 37rpx;
    color: #666;
    font-size: 25rpx;
}

.order .goods .status {
    display: flex;
    /* width: 105rpx; */
    color: #b4282d;
    font-size: 25rpx;
    margin-left: 50rpx;
}

.order .goods .status .btn {
    margin-left: 10rpx;
    margin-right: 10rpx;
    color: blue;
}

.order .b {
    height: 103rpx;
    line-height: 103rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
}

.order .b .l {
    float: left;
}

.order .b .r {
    float: right;
    color: red;
}

.order .b .btn {
    margin-top: 19rpx;
    height: 64.5rpx;
    line-height: 64.5rpx;
    text-align: center;
    padding: 0 20rpx;
    border-radius: 5rpx;
    font-size: 28rpx;
    color: #fff;
    background: #b4282d;
}
</style>
