jzhw_uni/pages/diffOrderDetail/diffOrderDetail.vue

<template>
    <view>
        <view class="supply-order">
            <view class="order-title">
                <view>补差订单</view>
                <view :class="(orderDiff.state != 2 ? 'non-payment' : '') + ' pay-status'">
                    {{ orderDiff.state == 0 || orderDiff.state == 1 ? '未支付' : orderDiff.state == 2 ? '已支付' : '取消' }}
                </view>
            </view>
            <view class="item-line">
                <view class="item-left">补差内容：</view>
                <view>{{ orderDiff.difName }}</view>
            </view>
            <view class="item-line">
                <view class="item-left">金额：</view>
                <view class="order-amount">¥ {{ orderDiff.difTotalPrice }}</view>
            </view>
            <view class="item-line">
                <view class="item-left">创建时间：</view>
                <view class="order-time">{{ orderDiff.createTime }}</view>
            </view>
        </view>
        <view class="supply-list">
            <view class="supply-item" v-for="(item, index) in diffItemList" :key="index">
                <view class="item-title">补差项{{ index + 1 }}</view>

                <view class="item-line">
                    <view class="item-left">补差内容：</view>
                    <view>{{ item.itemName }}</view>
                </view>

                <view class="item-line">
                    <view class="item-left">份数：</view>
                    <view>{{ item.number }}</view>
                </view>

                <view class="item-line">
                    <view class="item-left">金额：</view>
                    <view>¥ {{ item.difTotalPrice }}</view>
                </view>
            </view>
        </view>
        <view class="supply-bottom" v-if="orderDiff.state == 0 || orderDiff.state == 1">
            <view class="total-amount">
                <view class="title">总计补差金额</view>
                <view>
                    ¥
                    <text>{{ orderDiff.difTotalPrice }}</text>
                    元
                </view>
            </view>
            <view class="order-button" @tap="goPay">立即支付</view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
const app = getApp();
const util = require('../../utils/util');
const api = require('../../config/api.js');
export default {
    data() {
        return {
            difNo: '',
            orderDiff: {
                state: 0,
                difName: '',
                difTotalPrice: '',
                createTime: ''
            },
            diffItemList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log(options);
        if (options.difNo) {
            this.setData({
                difNo: options.difNo
            });
        }
        if (options.scene) {
            let scene = decodeURIComponent(options.scene);
            let difNo = scene.split('=')[1];
            this.setData({
                difNo: difNo
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getDiffOrderDetail();
    },
    onHide: function () {},
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getDiffOrderDetail();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getDiffOrderDetail() {
            uni.showLoading({
                title: '加载中...'
            });
            util.request(
                api.getDiffDetail,
                {
                    diffOrderNo: this.difNo
                },
                'GET'
            )
                .then((res) => {
                    uni.hideLoading();
                    if (res.errno === 0) {
                        this.setData({
                            orderDiff: res.data.orderDiff,
                            diffItemList: res.data.diffItemList
                        });
                    } else {
                        uni.showToast({
                            title: res.errmsg,
                            icon: 'none',
                            duration: 3000,
                            mask: true
                        });
                    }
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        },

        goPay() {
            let that = this;
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.prepayDiff, {
                diffOrderNo: this.difNo
            })
                .then((res) => {
                    uni.hideLoading();
                    if (res.errno === 0) {
                        let payParam = res.data;
                        uni.requestPayment({
                            timeStamp: payParam.timeStamp,
                            nonceStr: payParam.nonceStr,
                            package: payParam.packageValue,
                            signType: payParam.signType,
                            paySign: payParam.paySign,
                            success: function (res) {
                                console.log('支付过程成功');
                                uni.showToast({
                                    title: '支付成功',
                                    duration: 3000,
                                    mask: true
                                });
                                setTimeout(() => {
                                    that.getDiffOrderDetail();
                                }, 4000);
                            },
                            fail: function (res) {
                                console.log('支付过程失败');
                                util.showErrorToast('支付失败');
                            },
                            complete: function (res) {
                                console.log('支付过程结束');
                            }
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    uni.hideLoading();
                });
        }
    }
};
</script>
<style>
page {
    background: #f3f3f3;
    color: #333;
    box-sizing: border-box;
    width: 750rpx;
    padding: 6rpx 0 400rpx;
}
text,
view {
    color: #333;
    font-size: 28rpx;
    box-sizing: border-box;
}
.supply-order {
    background: #fff;
    margin-bottom: 28rpx;
    padding-bottom: 32rpx;
}
.order-title {
    height: 80rpx;
    padding: 0 24rpx 0 48rpx;
    border-bottom: 1rpx solid #f3f3f3;
    color: #666666;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pay-status {
    font-weight: 600;
    color: #09afff;
}
.non-payment.pay-status {
    color: #ff004e;
}
.item-line .order-amount {
    color: #191919;
}
.item-line .order-time {
    color: #191919;
}
.supply-item {
    background: #fff;
    margin-bottom: 10rpx;
    padding-bottom: 10rpx;
}
.item-title {
    height: 80rpx;
    line-height: 80rpx;
    padding-left: 48rpx;
    border-bottom: 1rpx solid #f3f3f3;
    color: #666666;
    font-size: 28rpx;
    margin-bottom: 20rpx;
}
.item-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx 0 48rpx;
    height: 48rpx;
    margin-bottom: 4rpx;
}
.item-line view {
    font-size: 28rpx;
    color: #666;
}
.item-line view.item-left {
    color: #999;
}
.supply-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
}
.total-amount {
    border-bottom: 8rpx solid #f3f3f3;
    display: flex;
    height: 96rpx;
    padding: 0 24rpx 8rpx 34rpx;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
}
.total-amount text {
    font-weight: bold;
}
.del-item {
    width: 198rpx;
    height: 58rpx;
    background: #ff9f18;
    border-radius: 8rpx;
    font-size: 30rpx;
    text-align: center;
    line-height: 58rpx;
    color: #fff;
    margin: 30rpx auto;
}
.item-operate-special {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30rpx 0;
}
.disable-item {
    width: 198rpx;
    height: 58rpx;
    background: #b7b7b7;
    border-radius: 8rpx;
    font-size: 30rpx;
    text-align: center;
    line-height: 58rpx;
    color: #fff;
    margin-right: 90rpx;
}
.item-operate-special .add-item {
    margin: 0;
}

.order-button {
    width: 702rpx;
    height: 98rpx;
    line-height: 98rpx;
    background: #1677ff;
    color: #ffffff;
    font-size: 36rpx;
    margin: 24rpx 24rpx 0;
    text-align: center;
    font-weight: 400;
    border-radius: 8rpx;
}
</style>