jzhw_uni/pages/diffOrder/diffOrder.vue

<template>
    <view class="container">
        <!-- 卡片 -->
        <view class="top-card">
            <view class="top-name">{{ orderInfo.goodsName }}</view>

            <view class="top-times">
                <!-- <view class="top-sku-name">{{orderInfo.skuName}}</view> -->
                <view>
                    剩余
                    <text>{{ orderInfo.remainNumber }}</text>
                    次
                </view>
                <view class="serviced-times">
                    已服务
                    <text>{{ orderInfo.servicedTimes }}</text>
                    次
                </view>
            </view>
        </view>

        <!-- 工单 -->
        <view class="service-list">
            <view class="service-item">
                <view class="service-title">
                    <view class="sercive-name">服务{{ utils.servciceName(orderInfo.ofTimes) }}</view>
                    <view class="service-id">工单编号：{{ orderInfo.bookDetailId }}</view>
                    <view class="service-status">{{ orderInfo.statusName }}</view>
                </view>

                <view class="service-main">
                    <view class="customer-info">
                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png"></image>
                        <view class="customer-main">
                            <view class="main-line">
                                <view>{{ orderInfo.cusName }}</view>
                                <view class="phone">{{ orderInfo.cusMobile }}</view>
                            </view>
                            <!-- <view class="customer-address" wx:if="{{orderInfo.address}}">{{orderInfo.addressName}}</view> -->
                            <view class="customer-address">{{ orderInfo.address }}</view>
                        </view>
                    </view>
                    <view class="row">
                        <text>上门时段：</text>
                        {{ orderInfo.bookTime }}
                    </view>
                    <view class="row">
                        <text>预约备注：</text>
                        {{ orderInfo.message }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 提示 -->
        <view class="diff-tips">
            <span v-if="'diffList.length >0'">您的服务还需支付补差费（若无需要，请忽略）</span>
            <span v-else>占无补差信息</span>
        </view>

        <view class="service-tips">如有任何疑问，请联系服务人员或客服</view>
        <view class="supply-order" @tap="diffDetail" :data-no="item.difNo" v-for="(item, index) in diffList" :key="index">
            <view class="order-title">
                <view>补差订单{{ index + 1 }}</view>
                <view :class="(item.state != 2 ? 'non-payment' : '') + ' pay-status'">
                    {{ item.state == 0 || item.state == 1 ? '未支付' : item.state == 2 ? '已支付' : '取消' }}
                </view>
            </view>

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

            <view class="item-line">
                <view class="item-left">金额：</view>
                <view class="order-amount">¥ {{ item.difTotalPrice }}</view>
            </view>

            <view class="item-line">
                <view class="item-left">创建时间：</view>
                <view class="order-time">{{ item.createTime }}</view>
            </view>

            <view class="pay-btn" v-if="item.state == 0 || item.state == 1" @tap.stop.prevent="goPay" :data-no="item.difNo">立即支付</view>

            <view class="detail-btn" v-else>查看详情</view>
        </view>
    </view>
</template>
<script module="utils" lang="wxs" src="@/utils/formatFuc.wxs"></script>
<script>
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
export default {
    data() {
        return {
            // 0创建，1发起支付中，2支付成功，3退款，4取消
            id: '',
            diffList: [],
            orderInfo: {
                goodsName: '',
                remainNumber: '',
                servicedTimes: '',
                bookDetailId: '',
                statusName: '',
                cusName: '',
                cusMobile: '',
                address: ''
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        console.log(options);
        this.setData({
            id: options.id
        });
        // this.getDiffOrder();
    },
    onShow: function () {
        // 页面显示
        this.getDiffOrder();
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading(); //在标题栏中显示加载
        this.getDiffOrder();
        uni.hideNavigationBarLoading(); //完成停止加载
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    onReady: function () {
        // 页面渲染完成
    },
    onHide: function () {
        console.log('onHide');
        // clearInterval(this.data.timer);
    },
    onUnload: function () {
        console.log('onunload');
    },
    methods: {
        getDiffOrder: function () {
            uni.showLoading({
                title: '加载中'
            });
            util.request(api.getDiffList, {
                bookDetailId: this.id
            })
                .then((res) => {
                    uni.hideLoading();
                    if (res.errno === 0) {
                        this.setData({
                            diffList: res.data.diffList,
                            orderInfo: res.data.bookDetail
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    uni.hideLoading();
                });
        },

        diffDetail(e) {
            let difNo = e.currentTarget.dataset.no;
            uni.navigateTo({
                url: '/pages/diffOrderDetail/diffOrderDetail?difNo=' + difNo
            });
        },

        goPay(e) {
            uni.showLoading({
                title: '加载中'
            });
            let difNo = e.currentTarget.dataset.no;
            util.request(api.prepayDiff, {
                diffOrderNo: 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(() => {
                                    uni.navigateTo({
                                        url: '/pages/diffOrderDetail/diffOrderDetail?difNo=' + difNo
                                    });
                                }, 4000);
                            },
                            fail: function (res) {
                                console.log('支付过程失败');
                                util.showErrorToast('支付失败');
                            },
                            complete: function (res) {
                                console.log('支付过程结束');
                            }
                        });
                    } else {
                        uni.showToast({
                            title: res.errmsg,
                            icon: 'none',
                            duration: 3000
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    uni.hideLoading();
                });
        },

        // “去付款”按钮点击效果
        payOrder: function () {
            let that = this;
            util.request(
                api.OrderPayCheck,
                {
                    orderId: that.orderInfo.id
                },
                'POST'
            ).then(function (res) {
                if (res.errno === 0) {
                    const outOrderNo = res.data;
                    console.log(res);
                    uni.continueToPay({
                        // orderId: this.data.orderId, // 内部订单号
                        outOrderNo: outOrderNo,
                        // 外部订单号 2个订单号必填一个
                        success: (res) => {
                            console.log(res);
                            const { orderId, outOrderNo } = res;
                            console.log('success res', res);
                            console.log('orderId', orderId, 'outOrderNo', outOrderNo);
                            uni.redirectTo({
                                url: '/pages/ucenter/order/order'
                            });
                        },
                        fail: (res) => {
                            console.log(res);
                            const { orderId, outOrderNo, errNo, errMsg, errLogId } = res;
                            if (errLogId) {
                                console.log('查询订单信息失败', errNo, errMsg, errLogId);
                            }
                            if (orderId || outOrderNo) {
                                console.log('支付失败', errNo, errMsg, orderId, outOrderNo);
                            }
                            util.showErrorToast('支付失败');
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}
.container {
    padding: 24rpx 0 180rpx;
}

/* 卡片 */
.top-card {
    width: 702rpx;
    height: 164rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/order-card-bg.png') no-repeat center;
    background-size: 100% 100%;
    padding: 20rpx 30rpx 24rpx;
    color: #fff;
    position: relative;
    margin: 0 24rpx 20rpx;
}
.top-name-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44rpx;
    overflow: hidden;
}
.top-name {
    height: 44rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 44rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.top-sku-name {
    font-size: 24rpx;
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.top-times {
    margin: 12rpx 0 54rpx;
    display: flex;
    height: 42rpx;
    align-items: center;
}
.top-times view {
    font-size: 24rpx;
    font-weight: bold;
}
.top-times view.serviced-times {
    margin-left: 20rpx;
}
.top-times view text {
    font-size: 30rpx;
}

/* 工单列表 */
.service-item {
    /* margin-top:24rpx; */
    background: #ffffff;
    border-radius: 24rpx;
    width: 702rpx;
    padding: 0 24rpx;
    margin: 0 24rpx;
}
.service-item .service-title {
    height: 80rpx;
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #e0e0e0;
}
.service-title .sercive-name {
    color: #191919;
    font-size: 30rpx;
    font-weight: bold;
}
.service-title .service-id {
    color: #666666;
    font-size: 24rpx;
    margin: 0 12rpx;
    flex: 1;
}
.service-title .service-status {
    color: #008dff;
    font-size: 26rpx;
}
.service-main {
    padding: 12rpx 0 16rpx;
}
.customer-info {
    display: flex;
    align-items: center;
}
.customer-info image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 24rpx;
}
.customer-info .customer-main {
    display: flex;
    padding: 18rpx 0 4rpx;
    flex-direction: column;
    flex: 1;
}
.main-line {
    display: flex;
    height: 44rpx;
    margin-bottom: 4rpx;
    align-items: center;
}
.main-line view {
    color: #333333;
    font-size: 32rpx;
}
.main-line view.phone {
    color: #999999;
    font-size: 24rpx;
    margin-left: 14rpx;
}
.customer-info .customer-address {
    color: #666666;
    line-height: 40rpx;
}
.service-main .row {
    /* height: 56rpx;
  line-height: 56rpx; */
    display: flex;
    color: rgba(0, 0, 0, 0.9);
    font-size: 26rpx;
    font-weight: bold;
    align-items: center;
    margin: 10rpx 0;
}
.service-main .row text {
    color: #666666;
    font-weight: normal;
    /* white-space: nowrap; */
}
.diff-tips {
    height: 56rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 56rpx;
    margin: 28rpx 0 12rpx;
    text-align: center;
    font-weight: bold;
}
.service-tips {
    height: 42rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    line-height: 42rpx;
    margin-bottom: 30rpx;
    text-align: center;
}
.supply-order {
    background: #fff;
    margin-bottom: 12rpx;
    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;
}
.detail-btn {
    width: 676rpx;
    height: 66rpx;
    line-height: 66rpx;
    border-radius: 3rpx;
    border: 1rpx solid #d4d4d4;
    color: #666666;
    font-size: 28rpx;
    margin: 14rpx 0 0 48rpx;
    text-align: center;
}
.pay-btn {
    width: 676rpx;
    height: 66rpx;
    line-height: 66rpx;
    border-radius: 3rpx;
    color: #fff;
    font-size: 28rpx;
    margin: 14rpx 0 0 48rpx;
    text-align: center;
    background: #09afff;
}
</style>