jzhw_uni/pages/ucenter/parter/detail/detail.vue

<template>
    <view>
        <van-tabs :active="showType" color="#09afff" @change="onTabChange">
            <van-tab title="待支付" name="1"></van-tab>
            <van-tab title="已支付" name="2"></van-tab>
        </van-tabs>
        <view class="orders">
            <view class="order" v-for="(item, index) in detailList" :key="index">
                <view class="h">
                    <view class="l">订单编号：{{ item.orderSn }}</view>
                    <view class="r">{{ item.orderStatusText }}</view>
                </view>

                <view v-if="showType == '1'" class="create-time">创建时间：{{ item.createTime }}</view>

                <view class="goods">
                    <view class="img">
                        <image :src="item.picUrl"></image>
                    </view>
                    <view class="info">
                        <text class="name">{{ item.goodsName }}</text>
                        <text class="number" v-if="showType == '2'">共{{ item.number }}件商品</text>
                    </view>
                    <!-- <view class="time">{{item.addTime}}</view> -->
                    <view class="status">
                        <view class="time">电话：{{ item.mobile }}</view>
                        <view class="btn" :data-mobile="item.mobile" @tap="makeCall">拨打</view>
                    </view>
                </view>

                <view class="flexb">
                    <view class="flex">实付：￥{{ item.actualPrice }}</view>
                    <!-- <view class="flex">分红：￥{{item.total}}</view> -->
                    <view class="flex" v-if="showType == '2'">分佣状态：{{ item.commissionStatus }}</view>

                    <view class="flex edit-wrapper" v-if="showType == '1'">
                        <text class="edit-amount" @tap="showEditDialog" :data-id="item.id" :data-price="item.actualPrice">修改支付金额</text>
                    </view>
                </view>
            </view>
        </view>

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

        <van-dialog use-slot title="修改支付金额" :show="dialogShow" show-cancel-button @close="onClose" @confirm="editAmount">
            <view class="price-wrapper">
                <input class="weui-input" type="digit" placeholder="请输入支付金额" :value="actualPrice" @input="bindKeyInput" />
            </view>
        </van-dialog>
    </view>
</template>

<script>
var util = require('../../../../utils/util.js');
var api = require('../../../../config/api.js');
export default {
    data() {
        return {
            dialogShow: false,
            detailList: [],
            showType: 1,
            page: 1,
            limit: 10,
            totalPages: 1,
            orderId: '',
            actualPrice: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // this.getDetailList();
        this.getWaitDetailList();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.totalPages > this.page) {
            this.setData({
                page: this.page + 1
            });
            if (this.showType == '2') {
                this.getWaitDetailList();
            } else {
                this.getDetailList();
            }
        } else {
            uni.showToast({
                title: '没有更多明细了',
                icon: 'none',
                duration: 2000
            });
            return false;
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindKeyInput(e) {
            this.setData({
                actualPrice: e.detail.value
            });
        },

        showEditDialog(e) {
            let id = e.currentTarget.dataset.id;
            let price = e.currentTarget.dataset.price;
            this.setData({
                orderId: id,
                actualPrice: price,
                dialogShow: true
            });
        },

        onClose() {
            this.setData({
                dialogShow: false
            });
        },

        editAmount() {
            util.request(
                api.OrderEdit,
                {
                    orderId: this.orderId,
                    actualPrice: this.actualPrice
                },
                'POST'
            ).then((res) => {
                if (res.errno === 0) {
                    console.log(res.data);
                    this.setData({
                        detailList: [],
                        page: 1,
                        limit: 10,
                        totalPages: 1,
                        dialogShow: false
                    });
                    this.getWaitDetailList();
                }
            });
        },

        onTabChange(e) {
            let showType = e.detail.name;
            this.setData({
                detailList: [],
                page: 1,
                limit: 10,
                totalPages: 1
            });
            if (showType == '2') {
                this.getDetailList();
            } else {
                this.getWaitDetailList();
            }
        },

        getWaitDetailList() {
            let that = this;
            util.request(api.DisCommissionWaitDetail, {
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        detailList: that.detailList.concat(res.data.list),
                        totalPages: res.data.pages
                    });
                }
            });
        },

        getDetailList() {
            let that = this;
            util.request(api.DisCommissionDetail, {
                page: that.page,
                limit: that.limit
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        detailList: that.detailList.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 .r {
    float: right;
}

.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 {
    /* width: 105rpx; */
    display: flex;
    color: #b4282d;
    font-size: 25rpx;
}

.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;
}

.order .b .rs {
    float: right;
    margin-right: 20rpx;
}

.time {
    float: right;
    display: block;
}

.order .b .rs .red {
    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;
}

.flexb {
    height: 103rpx;
    line-height: 103rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    color: #333;
    display: flex;
    flex-wrap: nowrap;
}
.flex {
    flex-grow: 1;
}
.create-time {
    color: #777;
    height: 40rpx;
    font-size: 24rpx;
    margin-left: 32rpx;
}
.edit-amount {
    border: 2rpx solid #09afff;
    padding: 6rpx 10rpx;
    border-radius: 8rpx;
}
.price-wrapper {
    padding: 20rpx 50rpx;
}
.price-wrapper input {
    height: 80rpx;
    padding: 0 20rpx;
    border: 2rpx solid #ccc;
    border-radius: 8rpx;
}
.van-dialog__header {
    color: #333;
    font-weight: bold;
}
.edit-wrapper {
    text-align: right;
}
</style>