jzmall_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="refund-title">退款信息</view>
            <view class="tt-cell">
                <view>退款金额</view>
                <view class="refund-price">￥{{ aftersale.amount }}</view>
            </view>
            <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>


            <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="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" v-if='showRefundBtn'>申请退款</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>
		<contact-mov  :pageX="260" :pageY="400"></contact-mov>
		<!-- 退款成功 -->
		<view class="refund-order-overlay"  v-if="refundTipShowSuccess">
		    <view class="refund-order-dialog refund-order-dia-success">
				<view class="refund-dia-title">退款成功</view>
		        <view class="refund-dia-tips">预计1-3个工作日原路返还，请注意查收！</view>
		        <view class="dia-btn-wrapper">
					<view class="dia-cancel-btn" @tap="refundBack">返回</view>
		           
		        </view>
		    </view>
		</view>
		<!-- 退款审核中 -->
		<view class="refund-order-overlay"  v-if="refundTipShowAlert">
		    <view class="refund-order-dialog">
		        <view class="refund-dia-title">审核中</view>
				   <view class="refund-dia-tips">您的退款已在加速处理中！感谢您的耐心等待，如需进一步协助，请联系我们的在线客服</view>
		        <view class="dia-btn-wrapper">
					<view class="dia-cancel-btn" @tap="refundBack">返回主页</view>
		            <view class="dia-conf-btn" @tap="goIM">联系在线客服</view>
		           
		        </view>
		    </view>
		</view>
		<!-- 退款失败 -->
		<view class="refund-order-overlay"  v-if="refundTipShowFail">
		    <view class="refund-order-dialog refund-order-dia-fail">
		        <view class="refund-dia-title">退款失败</view>
				   <view class="refund-dia-tips">非常抱歉，退款遇到问题，请立即联系在线客服协助处理问题！</view>
		        <view class="dia-btn-wrapper">
					<view class="dia-cancel-btn" @tap="refundBack">返回主页</view>
		            <view class="dia-conf-btn" @tap="goIM">联系在线客服</view>
		           
		        </view>
		    </view>
		</view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
import contactMov from '@/components/contact-mov';
export default {
	components:{contactMov},
    data() {
        return {
			refundTipShowSuccess:false,
			refundTipShowAlert:false,
			refundTipShowFail:false,
			showRefundBtn:true,
            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
                    });
                }

                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;
            }
            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(res=> {
                uni.hideLoading();
                if (res.errno === 0) {
					this.setData({
						showRefundBtn:false
					});
					
					 if(res.data.canRefundNow){
					 	  if(res.data.refundSuccess){
					 		  this.setData({
					 			  refundTipShowSuccess:true
					 		  });
					 	  }else{
					 		  this.setData({
					 		  		refundTipShowFail:true			
					 		  });
					 	  }
					 	  
					 	
					 }else{
					 	this.setData({
					 		refundTipShowAlert:true							  
					 	});
					 }
                } 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
            });
        },
		refundBack(){
			this.setData({
				refundTipShowSuccess:false,
				refundTipShowAlert:false,
				refundTipShowFail:false
			});
			uni.navigateBack();
		},
		goIM() {
			this.setData({
				refundTipShowSuccess:false,
				refundTipShowAlert:false,
				refundTipShowFail:false
			});
		    console.info('goIm');
		    uni.navigateTo({
		        url: '/pages/chat/im/im'
		    });
		},
		
    }
};
</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 {
    min-height: 340rpx;
    /* 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;
}
/* 退款弹框 */
	.refund-order-overlay {
	    width: 750rpx;
	    height: 100vh;
	    background: rgba(0, 0, 0, 0.5);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    position: fixed;
	    top: 0;
	    bottom: 0;
		z-index:999;
		left:0;
	}
	
	.refund-order-dialog {
		width: 606rpx;
		/* height: 644rpx; */
		border-radius: 14rpx;
	    background: #ffffff;
	    border-radius: 20rpx;
	    position: relative;
	    padding: 270rpx 30rpx 40rpx;
	    background: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-fefund-alert.png') no-repeat;
		background-color: #FFFFFF;
	    background-size: 606rpx 210rpx;
	}
	.refund-order-dialog.refund-order-dia-success{
		 background-image: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund-success.png')
	}
	.refund-order-dialog.refund-order-dia-fail{
		 background-image: url('https://jzmall.lifejingzhi.com/file/jzmall-dy/dia-bg-refund-fail.png')
	}
	.refund-dia-title {
		height: 56rpx;
	    font-weight: bold;
	    font-size: 40rpx;
	    color: rgba(0,0,0,0.85);
	    line-height: 56rpx;
	    text-align: center;
		margin:0rpx 0 34rpx;
	}
	.refund-dia-tips {
	   width: 540rpx;
	    color: #333333;
	    line-height: 46rpx;
	    font-size: 32rpx;
	    color: rgba(0,0,0,0.85);
	    text-align: center;
		white-space: wrap;
	    margin-bottom: 60rpx;
		font-weight: bold;
	}
	
	.dia-btn-wrapper {
	    height:94rpx;
		display: flex;
		justify-content: space-between;
	}
	.refund-order-dia-success .dia-btn-wrapper{
		justify-content: center;
	}
	.dia-cancel-btn{
		width: 248rpx;
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 94rpx;
		border: 2rpx solid #FA6400;
		font-size: 32rpx;
		color: #FA6400;
		/* font-weight: bold; */
		text-align: center;
	}
	.refund-order-dia-success .dia-cancel-btn{
		width:494rpx;
		font-weight: bold;
		border: 2rpx solid #0093FF;
		color: #0093FF;
	}
	.refund-order-dia-fail .dia-cancel-btn{
		border: 2rpx solid #E02020;
		color: #E02020;
	}
	.refund-order-dia-fail .dia-conf-btn{
	 background: #E02020;
	}
	.dia-conf-btn{
		width: 258rpx;
		height: 94rpx;
		line-height: 94rpx;
		border-radius: 94rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	    background: #FA6400;
		text-align: center;
	}
</style>