jzmall_verify_uni/pages/ucenter/applyRefund/applyRefund.vue

<template>
    <view class="container">
        <!-- 商品信息 -->
        <view class="product-block">
            <view class="refund-title">退款商品</view>
            <view class="product-detail">
                <view class="profuct-info">
                    <image mode="aspectFit" class="product-img" :src="orderInfo.picUrl"></image>
                    <view class="info-right">
                        <view class="info-main">
                            <view class="product-name">{{ orderInfo.goodsName }}</view>
                            <view class="price">
                                ¥
                                <text style="font-size: 24rpx">{{ orderInfo.actualPrice }}</text>
                            </view>
                        </view>
                        <view class="other-info">服务{{ orderInfo.serviceTimes }}次</view>
                    </view>
                </view>
            </view>
            <view class="real-price">
                实际付款：
                <text>¥{{ orderInfo.actualPrice }}</text>
            </view>
        </view>
        <!-- 
  <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>
 -->

        <view class="card">
            <view class="refund-title">退款信息</view>
            <!-- <view class="refund-tips">
      退款发起时间距离服务时间小于(含)24小时，将收取60元退改费
    </view> -->
            <view class="tt-cell">
                <view>退款金额</view>
                <view class="refund-price">￥{{ aftersale.amount }}</view>
            </view>
            <!-- <view class="comment-tips">不可更改，即订单实付</view> -->

            <!-- <picker value="{{index}}" range="{{columns}}" bindchange="bindPickerChange"> -->
            <view class="tt-cell" @tap="showReason">
                <view style="width: 150rpx">
                    <text class="need">*</text>
                    退款原因
                </view>
                <view class="cell-right default" v-if="reasonActive.id == ''">请选择</view>
                <view class="cell-right" v-else>{{ reasonActive.name }}</view>
                <view class="arrow-wrapper">
                    <image src="https://mall.zhaijieshi.cc/file/wx-dy/arrow-grey.png" mode="aspectFit" class="arrow-img"></image>
                </view>
            </view>

            <!-- </picker> -->

            <view class="tt-cell">
                <view style="width: 150rpx">补充描述</view>
                <input :value="aftersale.reason" placeholder="补充描述，有助于更好的处理售后问题。" placeholder-style="font-size:24rpx;color:#ACADB1;" @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;"
          bindinput="onCommentChange">
        </input>
      </view>

    </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>

        <!-- 备注退款原因 -->
        <view class="appoint-overlay-wrapper remark-overlay" v-if="reasonPopupShow" @tap="onReasonPopupClose">
            <view class="remark-select" @tap.stop.prevent="onReasonClick">
                <view class="title">选择退款原因</view>
                <view class="remark-list">
                    <view class="remark-item" :data-reason="item" @tap.stop.prevent="reasonItemSelect" v-for="(item, index) in reasonList" :key="index">
                        <view class="remark-value">{{ item.name }}</view>

                        <image
                            mode="aspectFit"
                            src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png"
                            class="radio-img"
                            v-if="reasonActive.id == item.id"
                        ></image>

                        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png" class="radio-img" v-else></image>
                    </view>
                </view>
                <view class="remark-conf-btn" @tap.stop.prevent="reasonItemConfirm">确定</view>
            </view>
        </view>
    </view>
</template>

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

            orderInfo: {
                picUrl: '',
                goodsName: '',
                actualPrice: '',
                serviceTimes: ''
            },

            orderGoods: [],

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

            reasonActive: {
                id: '',
                name: ''
            },

            reasonPopupShow: false,
            reasonList: [],
            columns: ['地址约错', '约不到想要的服务时间', '活动/优惠未享受', '服务质量问题'],
            contentLength: 0,
            fileList: [],
            imgList: [],
            showPicker: false
        };
    },
    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({
                        reasonList: 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
                        // orderGoods: res.data.orderGoods,
                        // 'aftersale.orderId': that.data.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.reasonActive.id == '') {
                util.showErrorToast('请选择退款原因');
                return false;
            }

            // let name = that.data.aftersale.typeDesc;
            // let vals = this.data.refundTypes.filter(item =>item.name == name);
            //  that.setData({
            //    type:vals[0].id
            //  })

            // console.log(that.data.aftersale);

            // if (that.data.aftersale.reason == '') {
            //   util.showErrorToast('请输入退款原因');
            //   return false;
            // }
            uni.showLoading({
                title: '提交中...',
                mask: true,
                success: function () {}
            });
            // this.setData({
            //   "aftersale.pictures": this.data.imgList
            // });
            let params = {
                orderId: this.orderId,
                pictures: this.imgList,
                type: this.reasonActive.id,
                typeDesc: this.reasonActive.name,
                reason: this.aftersale.reason,
                amount: this.aftersale.amount
            };
            util.request(api.AftersaleSubmit, params, 'POST').then(function (res) {
                uni.hideLoading();
                if (res.errno === 0) {
                    uni.showToast({
                        title: '申请售后成功',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            uni.navigateBack({
                                delta: 1
                            });
                            // wx.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();
                }
            });
        },

        showReason() {
            this.setData({
                reasonPopupShow: true
            });
        },

        onReasonPopupClose() {
            this.setData({
                reasonPopupShow: false
            });
        },

        onReasonClick() {
            //阻止事件冒泡，不要删
        },

        reasonItemSelect(e) {
            let reason = e.currentTarget.dataset.reason;
            this.setData({
                reasonActive: reason
            });
        },

        reasonItemConfirm() {
            if (this.reasonActive.id === '') {
                util.showErrorToast('请选择退款原因');
                return false;
            }
            this.setData({
                reasonPopupShow: false
            });
        }
    }
};
</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: flex-end;
    justify-content: space-between;
    background: #fff;
    height: 78rpx;
    padding-bottom: 12rpx;
    /* border-bottom:2rpx solid #ebedf0; */
}
.tt-cell view {
    font-size: 26rpx;
    color: #191919;
    font-weight: bold;
}
.tt-cell view.cell-right {
    font-family: normal;
    flex: 1;
    border-bottom: 2rpx solid #e0e0e0;
    padding-bottom: 8rpx;
}
.arrow-wrapper {
    border-bottom: 2rpx solid #e0e0e0;
    height: 40rpx;
}
.arrow-img {
    width: 28rpx;
    height: 28rpx;
}
.tt-cell view.cell-right.default {
    color: #acadb1;
    font-size: 24rpx;
    font-weight: normal;
}
.tt-cell input {
    flex: 1;
    border-bottom: 2rpx solid #e0e0e0;
}
.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 26rpx 60rpx;
    width: 650rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #ff8219;
    border-radius: 90rpx;
    font-size: 34rpx;
}
.upload-text {
    height: 88rpx;
    line-height: 88rpx;
    /* padding-left:22rpx; */
    background: #fff;
    font-size: 26rpx;
    color: #191919;
    font-weight: bold;
}
.upload-wrapper {
    /* margin:18rpx -20rpx 56rpx 0; */
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 0 24rpx 40rpx 0;
}
.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: 24rpx;
    padding: 30rpx 24rpx;
}
.tt-cell input {
    flex: 1;
    font-size: 26rpx;
    color: #666;
}

/* 产品订单信息 */
.product-block {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 24rpx;
    margin: 28rpx 0 30rpx;
}

.product-block .title {
    height: 88rpx;
    line-height: 78rpx;
}

.profuct-info {
    height: 190rpx;
    display: flex;
    align-items: flex-start;
}

.product-img {
    width: 190rpx;
    height: 190rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
}

.info-right {
    /* padding-top: 10rpx; */
    flex: 1;
}
.info-main {
    display: flex;
    height: 40rpx;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 58rpx;
}
.product-name {
    line-height: 40rpx;
    font-size: 28rpx;
    /* padding-left: 20rpx;
  text-indent: -16rpx; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 328rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
}
.info-main .price {
    color: rgba(0, 0, 0, 0.9);
    font-size: 18rpx;
    font-weight: bold;
}

.info-right .other-info {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 34rpx;
}
.refund-title {
    color: #191919;
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 28rpx;
    height: 30rpx;
    line-height: 30rpx;
}
.real-price {
    display: flex;
    align-items: center;
    height: 36rpx;
    justify-content: flex-end;
    font-size: 26rpx;
    font-weight: bold;
    margin: 20rpx 0 12rpx;
}
.real-price text {
    color: #ff004e;
    font-size: 26rpx;
}
.tt-cell view.refund-price {
    color: #ff004e;
}
/* 选择备注 */
.appoint-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}
.appoint-overlay-wrapper.remark-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.remark-select {
    width: 750rpx;
    padding: 0 24rpx 56rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
}
.remark-select .title {
    font-weight: 600;
    color: #191919;
    font-size: 30rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-bottom: 2rpx solid #e0e0e0;
}
.remark-list {
    height: 340rpx;
    overflow-y: scroll;
}
.remark-item .remark-value {
    color: #191919;
    font-size: 26rpx;
    font-weight: bold;
    flex: 1;
    text-align: left;
}
.remark-list .remark-item {
    height: 84rpx;
    display: flex;
    border-bottom: 2rpx solid #e0e0e0;
    align-items: center;
}
.remark-item .radio-img {
    width: 26rpx;
    height: 26rpx;
}
.remark-conf-btn {
    width: 652rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 90rpx;
    border: 4rpx solid #ff8219;
    text-align: center;
    font-size: 36rpx;
    color: #ff8219;
    margin: 0 auto;
    margin-top: 54rpx;
}
</style>