You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
7.7 KiB
231 lines
7.7 KiB
<template>
|
|
<view class="order-refund-modal">
|
|
<view class="orm-mask" v-show="isShow">
|
|
<view class="om-content">
|
|
<image class="oc-close" mode="aspectFit" src="../../static/images/icon/x_close.png" @click="hide"></image>
|
|
<view class="oc-title">退款</view>
|
|
<view class="oc-section">
|
|
<view class="os-info">
|
|
<view class="oi-name">{{ refundInfo.stadium_name || '' }}</view>
|
|
<view class="oi-line">订单编号：{{ refundInfo.order_no || '' }}</view>
|
|
<view class="oi-line">手机号码：{{ refundInfo.mobile || '' }}</view>
|
|
|
|
<view class="os-ipts">
|
|
<view class="oi-item">
|
|
<view class="oi-name">
|
|
<text class="on-txt">*</text>
|
|
退款金额
|
|
</view>
|
|
<view class="oi-right">
|
|
<input
|
|
class="or-ipt"
|
|
type="digit"
|
|
v-model="iptInfo.refund_amount"
|
|
:disabled="refundInfo.refund_times > 0"
|
|
:class="{ 'or-disabled': refundInfo.refund_times > 0 }"
|
|
/>
|
|
<view class="or-tip">可退{{ refundInfo.refundable_amount || 0 }}元</view>
|
|
</view>
|
|
</view>
|
|
<view class="oi-item">
|
|
<view class="oi-name">
|
|
<text class="on-txt">*</text>
|
|
退款积分
|
|
</view>
|
|
<view class="oi-right">
|
|
<input
|
|
class="or-ipt" type="digit"
|
|
v-model="iptInfo.refund_integral"
|
|
:disabled="refundInfo.refund_times > 0"
|
|
:class="{ 'or-disabled': refundInfo.refund_times > 0 }"
|
|
/>
|
|
<view class="or-tip">可退{{ refundInfo.refundable_integral || 0 }}积分</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="oc-btns">
|
|
<view class="ob-item" @click="cancelBtn">取消</view>
|
|
<view class="ob-item" @click="confirmBtn">确认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* PM:
|
|
* 什么状态下都能退
|
|
* 全部订单都能退两次, 所有订单最多只能退2次款
|
|
* 只要订单金额是未全退的，都能退
|
|
* 0元订单不能退
|
|
*
|
|
*/
|
|
import { mapState } from 'vuex';
|
|
import { showModal } from '@/utils/util';
|
|
export default {
|
|
computed: {
|
|
...mapState([ 'brandInfo' ])
|
|
},
|
|
data() {
|
|
return {
|
|
isShow: false,
|
|
refundInfo: {
|
|
/**
|
|
* @param {String} stadium_name 店铺名称
|
|
* @param {String} order_no 订单编号
|
|
* @param {String} mobile 手机号码
|
|
* @param {String} refundable_amount 退款金额
|
|
* @param {String} refundable_integral 退款积分
|
|
* @param {Number} refund_times 退款次数
|
|
* @param {Function} cancel 取消回调
|
|
* @param {Function} confirm 确认回调
|
|
*/
|
|
},
|
|
iptInfo: {
|
|
refund_amount: '',
|
|
refund_integral: ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
show(initData){
|
|
let { brandInfo } = this;
|
|
if(brandInfo?.permission?.['1018']){
|
|
this.isShow = true;
|
|
this.init(initData);
|
|
}else{
|
|
showModal({
|
|
content: '您没有退款权限',
|
|
})
|
|
}
|
|
|
|
},
|
|
init(data){
|
|
this.iptInfo.refund_amount = data?.refundable_amount || '0';
|
|
this.iptInfo.refund_integral = data?.refundable_integral || '0';
|
|
this.refundInfo = data;
|
|
},
|
|
hide(){
|
|
this.isShow = false;
|
|
},
|
|
cancelBtn() {
|
|
this.hide();
|
|
this.$emit('click:cancel');
|
|
this.refundInfo?.cancel?.(0);
|
|
},
|
|
confirmBtn() {
|
|
let { iptInfo, refundInfo } = this;
|
|
|
|
this.$emit('click:confirm');
|
|
this.refundInfo?.confirm?.(iptInfo);
|
|
this.hide();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order-refund-modal{}
|
|
|
|
.orm-mask{
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,.5);
|
|
z-index: 10;
|
|
}
|
|
.om-content{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding-bottom: 80upx;
|
|
width: 620upx;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
.oc-close{
|
|
position: absolute;
|
|
top: 30upx;
|
|
right: 30upx;
|
|
width: 34upx;
|
|
height: 34upx;
|
|
}
|
|
.oc-title{
|
|
padding-top: 78upx;
|
|
text-align: center;
|
|
@include flcw(32upx, 44upx, #333, 500);
|
|
}
|
|
.oc-section{
|
|
padding: 30upx 30upx 0;
|
|
@include ctf(center);
|
|
.os-info{
|
|
.oi-name{
|
|
@include flcw(28upx, 48upx, #333);
|
|
}
|
|
.oi-line{
|
|
@include flcw(28upx, 48upx, #9C9C9F);
|
|
}
|
|
.os-ipts{
|
|
padding-top: 34upx;
|
|
.oi-item{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.oi-name{
|
|
@include flcw(28upx, 56upx, #333333);
|
|
.on-txt{
|
|
color: #EA5061;
|
|
}
|
|
}
|
|
.oi-right{
|
|
margin-left: 16upx;
|
|
flex-shrink: 0;
|
|
width: 312upx;
|
|
.or-ipt{
|
|
display: block;
|
|
box-sizing: border-box;
|
|
padding: 0 20upx;
|
|
width: 100%;
|
|
height: 56upx;
|
|
border-radius: 10upx;
|
|
border: 2upx solid #D8D8D8;
|
|
@include flcw(28upx, 48upx, #9C9C9F);
|
|
&.or-disabled{
|
|
background: #cecece;
|
|
color: #9C9C9F;
|
|
}
|
|
}
|
|
.or-tip{
|
|
padding-left: 8upx;
|
|
@include flcw(24upx, 48upx, #EA5061);
|
|
@include tHide;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.oc-btns{
|
|
margin-top: 32upx;
|
|
padding: 0 54upx;
|
|
@include ctf(space-between);
|
|
.ob-item{
|
|
width: 240upx;
|
|
height: 88upx;
|
|
text-align: center;
|
|
border: 2upx solid $mColor;
|
|
border-radius: 10upx;
|
|
@include flcw(32upx, 84upx, $mColor, 500);
|
|
&+.ob-item{
|
|
background: $mColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|