jzmall_uni/pages/ucenter/aftersaleDetail/aftersaleDetail.vue

<template>
    <view class="container">
        <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.serviceTimes}}</view> -->
                        <view class="price">单价：￥{{ item.price }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="card">
            <view class="module-title">订单明细</view>
            <view class="tt-cell">
                <view>商品总价</view>
                <view>￥{{ order.goodsPrice }}元</view>
            </view>
            <!-- <view class="tt-cell">
    <view>    运费</view>
    <view>￥{{order.freightPrice}}元</view>
</view> -->
            <view class="tt-cell">
                <view>优惠</view>
                <view>-￥{{ order.couponPrice }}元</view>
            </view>
            <view class="tt-cell">
                <view>订单实付</view>
                <view>￥{{ order.actualPrice }}元</view>
            </view>
        </view>
        <view class="card">
            <view class="module-title">退款明细</view>
            <view class="tt-cell">
                <view>售后状态</view>
                <view>{{ statusColumns[aftersale.status] }}</view>
            </view>
            <view class="tt-cell">
                <view>申请时间</view>
                <view>{{ aftersale.addTime }}</view>
            </view>
            <view class="tt-cell">
                <view>服务编号</view>
                <view>{{ aftersale.aftersaleSn }}</view>
            </view>
            <view class="tt-cell">
                <view>退款类型</view>
                <view>{{ typeColumns[aftersale.type] }}</view>
            </view>
            <view class="tt-cell">
                <view>退款原因</view>
                <view>{{ aftersale.reason }}</view>
            </view>
            <view class="tt-cell">
                <view>退款说明</view>
                <view>{{ aftersale.comment }}</view>
            </view>
            <view class="comment-wrapper">
                <view class="tt-cell comment-cell">
                    <view>退款金额</view>
                    <view>￥{{ aftersale.amount }}元</view>
                </view>
                <view class="comment-tips">不可更改，即订单实付</view>
            </view>
            <view class="upload-text">上传凭证</view>
            <view class="upload-wrapper" v-if="fileList.length > 0">
                <view class="img-item" v-for="(item, index) in fileList" :key="index">
                    <image mode="aspectFill" :src="item" class="user-upload" @tap="previewImg" :data-img="item"></image>
                </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: '',
                couponPrice: '',
                actualPrice: ''
            },
            orderGoods: [],
            aftersale: {
                status: '',
                addTime: '',
                aftersaleSn: '',
                type: '',
                reason: '',
                comment: '',
                amount: ''
            },
            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({
                    //      v
                    //   });
                    // });
                    that.setData({
                        order: res.data.order,
                        orderGoods: res.data.orderGoods,
                        aftersale: res.data.aftersale,
                        fileList: res.data.aftersale.pictures
                    });
                }
                uni.hideLoading();
            });
        },

        previewImg(e) {
            let img = e.currentTarget.dataset.img;
            let imgs = this.fileList;
            uni.previewImage({
                current: img,
                // 当前显示图片的http链接
                urls: imgs // 需要预览的图片http链接列表
            });
        }
    }
};
</script>
<style>
page {
    /* height: 100%; */
    width: 100%;
    background: #f4f4f4;
    padding: 0 0 80rpx;
}
.container {
    padding: 0 30rpx;
}

.order-goods {
    margin-top: 30rpx;
    background: #fff;
    border-radius: 10rpx;
    width: 690rpx;
    padding: 30rpx 20rpx;
}

.order-goods .h {
    height: 30rpx;
    line-height: 30rpx;
    margin-bottom: 30rpx;
    font-size: 30rpx;
    color: #333;
}

.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: 190rpx;
}

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

.order-goods .item .img {
    height: 190rpx;
    width: 190rpx;
    background: #f4f4f4;
    margin-right: 20rpx;
    border-radius: 10rpx;
}

.order-goods .item .img image {
    height: 190rpx;
    border-radius: 10rpx;
    width: 190rpx;
}

.order-goods .item .info {
    flex: 1;
    height: 190rpx;
}

.order-goods .item .t {
    margin-top: 10rpx;
    /* height: 33rpx; */
    line-height: 34rpx;
    margin-bottom: 30rpx;
    display: flex;
    justify-content: space-between;
}

.order-goods .item .t .name {
    max-height: 68rpx;
    line-height: 34rpx;
    color: #333;
    font-size: 30rpx;
    width: 360rpx;
    margin-right: 40rpx;
    /* text-overflow: ellipsis;
 white-space: nowrap;*/
    overflow: hidden;
}

.order-goods .item .t .number {
    line-height: 36rpx;
    color: #666;
    font-size: 26rpx;
}

.order-goods .item .attr {
    height: 26rpx;
    line-height: 26rpx;
    color: #666;
    font-size: 26rpx;
}

.order-goods .item .price {
    height: 26rpx;
    line-height: 26rpx;
    color: #666;
    font-size: 26rpx;
    margin-top: 16rpx;
}

.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;
}
.module-title {
    height: 80rpx;
    padding: 0 8rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #333;
    border-bottom: 1rpx solid #efefef;
}
.tt-cell {
    display: flex;
    padding: 0 4rpx 0 8rpx;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    height: 68rpx;
    /* border-bottom:2rpx solid #ebedf0; */
}
.tt-cell view {
    font-size: 30rpx;
    color: #333;
}
.tt-cell view:last-child {
    color: #666;
}
.tt-cell input {
    text-align: right;
}
.need {
    color: red;
}
.comment-wrapper {
    /* border-bottom:2rpx solid #ebedf0; */
}
.tt-cell.comment-cell {
    border: none;
}
.tt-cell.comment-cell view {
    /* padding-left:14rpx; */
}
.comment-tips {
    padding-left: 8rpx;
    height: 50rpx;
    line-height: 30rpx;
    color: #777;
    font-size: 20rpx;
    background: #fff;
}
.upload-wrapper {
    /* margin:18rpx -20rpx 56rpx 0; */
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 0 24rpx 40rpx;
}
.upload {
    width: 160rpx;
    height: 160rpx;
    background: #fafafa;
    border-radius: 2rpx;
    border: 1rpx solid #d9d9d9;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-right: 16rpx;
    box-sizing: border-box;
}
.upload image {
    width: 38rpx;
    height: 38rpx;
    margin-bottom: 22rpx;
}
.upload view {
    font-weight: 400;
    color: #c5c3c3;
    line-height: 48rpx;
    font-size: 26rpx;
}
.img-item {
    width: 160rpx;
    height: 160rpx;
    background: #fff;
    border-radius: 2rpx;
    border: 1rpx solid #d9d9d9;
    margin: 0 20rpx 24rpx 0;
    padding: 8rpx;
    position: relative;
    box-sizing: border-box;
}
.img-item .user-upload {
    width: 144rpx;
    height: 144rpx;
}
.img-item .close-img {
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    top: 0;
    right: 0;
}
.upload-text {
    height: 88rpx;
    line-height: 88rpx;
    padding-left: 8rpx;
    background: #fff;
}
.card {
    background: #fff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    padding: 0 20rpx 20rpx;
}
</style>