jzhw_uni/pages/ucenter/aftersaleDetail/aftersaleDetail.vue

<template>
    <view class="container">
        <van-cell-group title="退款明细">
            <van-cell :value="statusColumns[aftersale.status]" title="售后状态" required />
            <van-cell :value="aftersale.addTime" title="申请时间" required />
            <van-cell :value="aftersale.aftersaleSn" title="服务编号" required />
            <van-cell :value="aftersale.typeName" title="退款类型" required />
            <van-cell :value="aftersale.reason" title="退款原因" required />
            <van-cell title="退款金额" :value="'￥' + aftersale.amount + '元'" label="即订单实付- 运费" required />
            <van-field label="退款说明" :value="aftersale.comment" type="textarea" autosize disabled />
            <van-cell title="上传凭证">
                <van-uploader :file-list="fileList" disabled :deletable="false" :max-count="0" preview-size="50px" />
            </van-cell>
        </van-cell-group>

        <view class="order-goods">
            <view class="h">退款商品</view>
            <view class="goods">
                <view class="item" v-for="(item, index) in orderGoods" :key="index">
                    <view class="img">
                        <image :src="item.picUrl"></image>
                    </view>

                    <view class="info">
                        <view class="t">
                            <text class="name">{{ item.goodsName }}</text>
                            <text class="number">x{{ item.number }}</text>
                        </view>
                        <view class="attr">{{ item.specifications }}</view>
                        <view class="price">￥{{ item.price }}</view>
                    </view>
                </view>
            </view>
        </view>

        <van-cell-group title="订单明细">
            <van-cell title="商品总价" :value="' ￥' + order.goodsPrice + '元'" />
            <van-cell title="    运费" :value="' ￥' + order.freightPrice + '元'" />
            <van-cell title="    优惠" :value="'-￥' + order.couponPrice + '元'" />
            <van-cell title="订单实付" :value="' ￥' + order.actualPrice + '元'" />
        </van-cell-group>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            orderId: 0,
            order: {
                goodsPrice: '',
                freightPrice: '',
                couponPrice: '',
                actualPrice: ''
            },
            orderGoods: [],
            aftersale: {
                status: '',
                addTime: '',
                aftersaleSn: '',
                typeName: '',
                reason: '',
                amount: '',
                comment: ''
            },
            statusColumns: ['未申请', '已申请，待审核', '审核通过，待退款', '退款成功', '审核不通过，已拒绝'],
            typeColumns: ['未收货退款', '不退货退款', '退货退款'],
            fileList: []
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            orderId: options.id
        });
        this.getAftersaleDetail();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getAftersaleDetail: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            let that = this;
            util.request(api.AftersaleDetail, {
                orderId: that.orderId
            }).then(function (res) {
                if (res.errno === 0) {
                    let _fileList = [];
                    res.data.aftersale.pictures.forEach(function (v) {
                        _fileList.push({
                            url: v
                        });
                    });
                    that.setData({
                        order: res.data.order,
                        orderGoods: res.data.orderGoods,
                        aftersale: res.data.aftersale,
                        fileList: _fileList
                    });
                }
                uni.hideLoading();
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    width: 100%;
    background: #f4f4f4;
}

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

.order-goods .h {
    height: 93.75rpx;
    line-height: 93.75rpx;
    margin-left: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
    padding-right: 31.25rpx;
}

.order-goods .h .label {
    float: left;
    font-size: 30rpx;
    color: #333;
}

.order-goods .h .status {
    float: right;
    font-size: 30rpx;
    color: #b4282d;
}

.order-goods .item {
    display: flex;
    align-items: center;
    height: 192rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-bottom: 1px solid #f4f4f4;
}

.order-goods .item:last-child {
    border-bottom: none;
}

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

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

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

.order-goods .item .t {
    margin-top: 8rpx;
    height: 33rpx;
    line-height: 33rpx;
    margin-bottom: 10.5rpx;
}

.order-goods .item .t .name {
    display: block;
    float: left;
    height: 33rpx;
    line-height: 33rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .t .number {
    display: block;
    float: right;
    height: 33rpx;
    text-align: right;
    line-height: 33rpx;
    color: #333;
    font-size: 30rpx;
}

.order-goods .item .attr {
    height: 29rpx;
    line-height: 29rpx;
    color: #666;
    margin-bottom: 25rpx;
    font-size: 25rpx;
}

.order-goods .item .price {
    display: block;
    float: left;
    height: 30rpx;
    line-height: 30rpx;
    color: #333;
    font-size: 30rpx;
}

.fb-body {
    width: 100%;
    background: #fff;
    height: 300rpx;
    padding: 30rpx;
}

.fb-body .content {
    width: 100%;
    height: 200rpx;
    color: #333;
}

.weui-uploader__files {
    width: 100%;
}

.weui-uploader__file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
}

.weui-uploader__img {
    display: block;
    width: 30px;
    height: 30px;
}

.weui-uploader__input-box {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 30px;
    height: 30px;
    border: 1px solid #d9d9d9;
}

.weui-uploader__input-box:after,
.weui-uploader__input-box:before {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #d9d9d9;
}

.weui-uploader__input-box:before {
    width: 2px;
    height: 30px;
}

.weui-uploader__input-box:after {
    width: 30px;
    height: 2px;
}

.weui-uploader__input-box:active {
    border-color: #999;
}

.weui-uploader__input-box:active:after,
.weui-uploader__input-box:active:before {
    background-color: #999;
}

.weui-uploader__input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.fb-body .text-count {
    float: right;
    color: #666;
    font-size: 24rpx;
    line-height: 30rpx;
}
</style>