jzhw_uni/pages/ucenter/aftersale/aftersale.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.price }}</view>
                    </view>
                </view>
            </view>
        </view>

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

        <van-cell-group title="操作">
            <van-field :value="aftersale.typeDesc" label="退款类型" readonly="readonly" placeholder="请选择" input-align="right" required clickable @tap.native="showTypePicker" />
            <van-field :value="aftersale.reason" label="退款原因" placeholder="请输入" @change="onReasonChange" input-align="right" required clearable />
            <van-field label="退款说明" :value="aftersale.comment" placeholder="请输入" type="textarea" input-align="right" autosize />
            <van-cell title="退款金额" :value="'￥' + aftersale.amount + '元'" label="不可修改，即订单实付- 运费" required />
            <van-cell title="上传凭证" label="最多上传三张">
                <van-uploader :file-list="fileList" @after-read="afterRead" @delete="deleteImage" :max-count="3" preview-size="50px" />
            </van-cell>
        </van-cell-group>

        <van-button type="danger" @click="submit" block>申请售后</van-button>

        <van-popup :show="showPicker" position="bottom">
            <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
export default {
    data() {
        return {
            orderId: 0,

            orderInfo: {
                goodsPrice: '',
                couponPrice: '',
                actualPrice: ''
            },

            orderGoods: [],

            aftersale: {
                pictures: [],
                orderId: '',
                amount: '',
                comment: '',
                reason: '',
                type: '',
                typeDesc: ''
            },

            //columns: ['未上门','服务质量问题','其他'],
            columns: ['不想要\不喜欢', '7天无理由退款', '搬家/出差', '重复购买', '地址超服务范围', '地址约错', '约不到想要的服务时间', '活动/优惠未享受', '服务质量问题'],

            contentLength: 0,
            refundTypes: [],

            //退款原因
            fileList: [],

            showPicker: false
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            orderId: options.id
        });
        this.getOrderDetail();
        this.getRefudnType();
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        getRefudnType() {
            let that = this;
            util.request(api.AftersaleRefundType).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        refundTypes: res.data,
                        columns: res.data.map((obj) => obj.name)
                    });
                    console.info(that.refundTypes);
                }
            });
        },

        getOrderDetail: function () {
            uni.showLoading({
                title: '加载中'
            });
            setTimeout(function () {
                uni.hideLoading();
            }, 2000);
            let that = this;
            util.request(api.OrderDetail, {
                orderId: that.orderId
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        orderInfo: res.data.orderInfo,
                        orderGoods: res.data.orderGoods,
                        'aftersale.orderId': that.orderId,
                        'aftersale.amount': res.data.orderInfo.actualPrice - res.data.orderInfo.freightPrice
                    });
                }
                uni.hideLoading();
            });
        },

        deleteImage(event) {
            const { fileList = [] } = this;
            fileList.splice(event.detail.index, 1);
            this.setData({
                fileList: fileList
            });
            let urls = [];
            fileList.forEach(function (e) {
                urls.push(e.url);
            });
            this.setData({
                'aftersale.pictures': urls
            });
        },

        afterRead(event) {
            const { file } = event.detail;
            let that = this;
            const uploadTask = uni.uploadFile({
                url: api.StorageUpload,
                filePath: file.path,
                name: 'file',
                success: function (res) {
                    var _res = JSON.parse(res.data);
                    if (_res.errno === 0) {
                        var url = _res.data.url;
                        that.aftersale.pictures.push(url);
                        const { fileList = [] } = that;
                        fileList.push({
                            ...file,
                            url: url
                        });
                        that.setData({
                            fileList: fileList
                        });
                    }
                },
                fail: function (e) {
                    uni.showModal({
                        title: '错误',
                        content: '上传失败',
                        showCancel: false
                    });
                }
            });
        },

        previewImage: function (e) {
            uni.previewImage({
                current: e.currentTarget.id,
                // 当前显示图片的http链接
                urls: this.files // 需要预览的图片http链接列表
            });
        },

        contentInput: function (e) {
            this.setData({
                contentLength: e.detail.cursor,
                'aftersale.comment': e.detail.value
            });
        },

        onReasonChange: function (e) {
            this.setData({
                'aftersale.reason': e.detail
            });
        },

        showTypePicker: function () {
            this.setData({
                showPicker: true
            });
        },

        onCancel: function () {
            this.setData({
                showPicker: false
            });
        },

        onConfirm: function (event) {
            let name = event.detail.value;
            let typeId = 0;
            let vals = this.refundTypes.filter((item) => item.name == event.detail.value);
            typeId = vals[0].id;
            this.setData({
                //'aftersale.type': event.detail.index,
                //'aftersale.typeDesc': event.detail.value,
                'aftersale.type': typeId,
                'aftersale.typeDesc': name,
                showPicker: false
            });
        },

        submit: function () {
            let that = this;
            if (that.aftersale.type == undefined) {
                util.showErrorToast('请选择退款类型');
                return false;
            }
            console.log(that.aftersale.reason);
            if (!that.aftersale.reason) {
                util.showErrorToast('请输入退款原因');
                return false;
            }
            uni.showLoading({
                title: '提交中...',
                mask: true,
                success: function () {}
            });
            util.request(api.AftersaleSubmit, that.aftersale, 'POST').then(function (res) {
                uni.hideLoading();
                if (res.errno === 0) {
                    uni.showToast({
                        title: '申请售后成功',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            uni.redirectTo({
                                url: '/pages/ucenter/aftersaleList/aftersaleList'
                            });
                        }
                    });
                } else {
                    // util.showErrorToast(res.errmsg);
                    uni.showToast({
                        title: res.errmsg,
                        icon: 'none'
                    });
                }
            });
        }
    }
};
</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;
}
</style>