jzmall_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.couponPrice}}元" />
    <van-cell title="订单实付" value=" ￥{{orderInfo.actualPrice}}元" />
  </van-cell-group> -->
        <view class="card">
            <view class="module-title">订单明细</view>
            <view class="tt-cell">
                <view>商品总价</view>
                <view>￥{{ orderInfo.goodsPrice }}元</view>
            </view>
            <view class="tt-cell">
                <view>优 惠</view>
                <view>-￥{{ orderInfo.couponPrice }}元</view>
            </view>
            <view class="tt-cell">
                <view>订单实付</view>
                <view>-￥{{ orderInfo.actualPrice }}元</view>
            </view>
        </view>

        <!-- <van-cell-group title="操作">
    <van-field value="{{ aftersale.typeDesc }}" label="退款类型" readonly="readonly" placeholder="请选择" input-align="right" required clickable bind:tap="showTypePicker" />
    <van-field value="{{ aftersale.reason }}" label="退款原因" placeholder="请输入" bind: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 }}" bind:after-read="afterRead" bind:delete="deleteImage" max-count="3" preview-size="50px" />
    </van-cell>    
  </van-cell-group> -->

        <view class="card">
            <view class="module-title">退款信息</view>
            <!-- <view class="refund-tips">
      退款发起时间距离服务时间小于(含)24小时，将收取60元退改费
    </view> -->

            <picker :value="index" :range="columns" @change="bindPickerChange">
                <view class="tt-cell">
                    <view>
                        <text class="need">*</text>
                        退款类型
                    </view>
                    <view>{{ aftersale.typeDesc }} ></view>
                </view>
            </picker>

            <view class="tt-cell">
                <view>
                    <text class="need">*</text>
                    退款原因
                </view>
                <input :value="aftersale.reason" placeholder="请输入" placeholder-style="font-size:26rpx;color:#999;" @input="onReasonChange" />
            </view>
            <view class="comment-wrapper">
                <view class="tt-cell comment-cell">
                    <view>退款说明</view>
                    <input :value="aftersale.comment" placeholder="请输入" placeholder-style="font-size:26rpx;color:#999;" @input="onCommentChange" />
                </view>
            </view>
            <view class="tt-cell">
                <view>
                    <text class="need">*</text>
                    退款金额
                </view>
                <view>￥{{ aftersale.amount }}元</view>
            </view>
            <view class="comment-tips">不可更改，即订单实付</view>
            <view class="upload-text">上传凭证</view>
            <view class="comment-tips">最多上传3张</view>
            <!-- 图片上传 -->
            <view class="upload-wrapper">
                <view class="img-item" v-for="(item, index) in imgList" :key="index">
                    <image mode="aspectFill" :src="item" class="user-upload" @tap="previewImg" :data-img="item"></image>

                    <image class="close-img" mode="aspectFill" src="/static/images/icon-close.png" @tap="delImg" :data-index="index"></image>
                </view>
                <view class="upload" @tap="uploadImg">
                    <image mode="aspectFill" src="/static/images/icon-add.png"></image>
                    <view>上传照片</view>
                </view>
            </view>
        </view>

        <view class="submit-btn" @tap="submit">申请售后</view>
        <!-- <van-button type="danger" bind:click="submit" block>申请售后</van-button> -->

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

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

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

            orderGoods: [],

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

            columns: ['地址约错', '约不到想要的服务时间', '活动/优惠未享受', '服务质量问题'],
            contentLength: 0,
            fileList: [],
            imgList: [],
            refundTypes: '',
            showPicker: false,
            type: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        this.setData({
            orderId: options.id
        });
        this.getOrderDetail();
        this.getRefudnType();
        this.getAmount();
    },
    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);
                }
            });
        },

        getAmount: function () {
            util.request(api.AftersaleAmount, {
                orderId: this.orderId
            }).then((res) => {
                if (res.errno === 0) {
                    console.log(res.data);
                    this.setData({
                        'aftersale.amount': res.data.refundAmount
                    });
                }
            });
        },

        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) {
            console.log(e);
            this.setData({
                'aftersale.reason': e.detail.value
            });
        },

        onCommentChange: function (e) {
            console.log(e);
            this.setData({
                'aftersale.comment': e.detail.value
            });
        },

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

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

        bindPickerChange: function (event) {
            console.log(event);
            this.setData({
                'aftersale.type': event.detail.value,
                'aftersale.typeDesc': this.columns[event.detail.value]
            });
        },

        submit: function () {
            let that = this;
            if (that.aftersale.type == undefined) {
                util.showErrorToast('请选择退款类型');
                return false;
            }
            let name = that.aftersale.typeDesc;
            let vals = this.refundTypes.filter((item) => item.name == name);
            that.setData({
                type: vals[0].id
            });
            console.log(that.aftersale);
            if (that.aftersale.reason == '') {
                util.showErrorToast('请输入退款原因');
                return false;
            }
            uni.showLoading({
                title: '提交中...',
                mask: true,
                success: function () {}
            });
            this.setData({
                'aftersale.pictures': this.imgList
            });
            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);
                }
            });
        },

        previewImg(e) {
            let img = e.currentTarget.dataset.img;
            let imgs = this.imgList;
            uni.previewImage({
                current: img,
                // 当前显示图片的http链接
                urls: imgs // 需要预览的图片http链接列表
            });
        },

        delImg(e) {
            let imgs = this.imgList;
            let index = e.currentTarget.dataset.index;
            imgs.splice(index, 1);
            this.setData({
                imgList: imgs
            });
        },

        uploadImg() {
            if (this.imgList.length >= 3) {
                uni.showToast({
                    title: '最多上传3张图片',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }
            let that = this;
            let count = 3 - that.imgList.length;
            uni.chooseImage({
                count: count,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    console.log(res);
                    let tempFilePaths = res.tempFilePaths;
                    uni.showLoading({
                        title: '上传中...'
                    });
                    for (let i = 0; i < tempFilePaths.length; i++) {
                        let imgs = that.imgList;
                        if (imgs.length >= 3) {
                            that.setData({
                                imgList: imgs
                            });
                            return false;
                        } else {
                            uni.uploadFile({
                                url: api.StorageUpload,
                                filePath: tempFilePaths[i],
                                name: 'file',
                                success(res) {
                                    console.log(res);
                                    let data = JSON.parse(res.data);
                                    if (data.errno == 0) {
                                        imgs.push(data.data.url);
                                        that.setData({
                                            imgList: imgs
                                        });
                                    } else {
                                        console.log('上传失败');
                                    }
                                }
                            });
                        }
                    }
                    uni.hideLoading();
                }
            });
        }
    }
};
</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;
}
.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: #999;
    font-size: 26rpx;
}
.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: 22rpx;
    height: 50rpx;
    line-height: 30rpx;
    color: #777;
    font-size: 20rpx;
    background: #fff;
}
.submit-btn {
    text-align: center;
    color: #fff;
    margin: 120rpx 0 60rpx;
    width: 690rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #00b9ff;
    border-radius: 100rpx;
    font-size: 30rpx;
}
.upload-text {
    height: 88rpx;
    line-height: 88rpx;
    padding-left: 22rpx;
    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: 4rpx;
    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;
}
.refund-tips {
    color: #ee0a24;
    font-size: 22rpx;
    line-height: 40rpx;
    padding-left: 8rpx;
    margin: 4rpx 0 8rpx;
}
.card {
    background: #fff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    padding: 0 20rpx 20rpx;
}
.tt-cell input {
    flex: 1;
    font-size: 26rpx;
    color: #666;
}
</style>